/* PBJ Forms & Products — shop (2.4): [pbj_shop], single product page, [pbj_product] additions.
   Colours follow the site theme: lines and tints are mixed from currentColor, and the accent is
   the computed colour of the page's own .pbj-fb-submit (set by the shop JS), so a sale badge and a
   buy button are always the same colour. Buttons ARE .pbj-fb-submit. */

.pbj-shop {
	--pbj-shop-line: color-mix(in srgb, currentColor 16%, transparent);
	--pbj-shop-tint: color-mix(in srgb, currentColor 5%, transparent);
	--pbj-shop-muted: color-mix(in srgb, currentColor 66%, transparent);
	--pbj-shop-radius: var(--pbjfb-radius, 8px);
	--pbj-shop-ok: var(--pbjfb-success, #2a8a3e);
	--pbj-shop-warn: #c78a00;
	--pbj-shop-bad: var(--pbjfb-error, #c0392b);
	max-width: none;
	box-sizing: border-box;
}
.pbj-shop *, .pbj-shop *::before, .pbj-shop *::after { box-sizing: border-box; }
.pbj-shop .screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Buttons: same class as every form button; layout only here. */
.pbj-shop .pbj-shop-button {
	display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
	text-decoration: none; text-align: center; line-height: 1.2; min-height: 2.75rem;
}
.pbj-shop .pbj-shop-button[disabled] { opacity: .45; cursor: not-allowed; }
.pbj-shop-button-quiet {
	display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 .25rem;
	color: inherit; text-decoration: underline; text-underline-offset: 3px; opacity: .8;
}
.pbj-shop-button-quiet:hover { opacity: 1; }

/* Price */
.pbj-shop-price { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .45rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.pbj-shop-price del { font-weight: 400; color: var(--pbj-shop-muted); text-decoration-thickness: 1px; }
.pbj-shop-price ins { text-decoration: none; background: none; padding: 0; }
.pbj-shop-price-none { font-weight: 400; color: var(--pbj-shop-muted); }
.pbj-shop-range-sep { color: var(--pbj-shop-muted); font-weight: 400; }
.pbj-shop-price-note { margin: .25rem 0 0; font-size: .875em; color: var(--pbj-shop-muted); }

/* Badges */
.pbj-shop-badges { position: absolute; top: .75rem; left: .75rem; z-index: 2; display: flex; gap: .35rem; pointer-events: none; }
.pbj-shop-badge {
	display: inline-block; padding: .2rem .6rem; border-radius: 999px;
	font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; line-height: 1.5;
}
.pbj-shop-badge-sale {
	/* Accent comes from the theme's primary button (shop.js syncAccent). Without
	 * it (no JavaScript) the badge is an outlined pill in the text colour, which
	 * reads on any theme instead of filling white-on-white. */
	background: var(--pbj-shop-accent, transparent); color: var(--pbj-shop-accent-text, currentColor);
	box-shadow: inset 0 0 0 1px var(--pbj-shop-accent, currentColor), 0 1px 2px rgba(0, 0, 0, .2);
}
.pbj-shop-badge-out {
	background: color-mix(in srgb, #000 70%, transparent); color: #fff;
}

/* Stock line */
.pbj-shop-stock { display: flex; align-items: center; gap: .45rem; margin: .75rem 0; font-size: .925em; font-weight: 600; }
.pbj-shop-dot { flex: none; width: .55rem; height: .55rem; border-radius: 50%; background: var(--pbj-shop-ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pbj-shop-ok) 22%, transparent); }
.pbj-shop-stock-low .pbj-shop-dot,
.pbj-shop-stock-onbackorder .pbj-shop-dot { background: var(--pbj-shop-warn); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pbj-shop-warn) 22%, transparent); }
.pbj-shop-stock-outofstock .pbj-shop-dot { background: var(--pbj-shop-bad); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pbj-shop-bad) 22%, transparent); }

/* Placeholder image */
.pbj-shop-placeholder {
	display: grid; place-items: center; width: 100%; height: 100%; min-height: 8rem;
	background: var(--pbj-shop-tint); color: var(--pbj-shop-muted);
	background-image: linear-gradient(135deg, transparent 0 48%, var(--pbj-shop-line) 48% 52%, transparent 52% 100%);
	background-size: 18px 18px;
}
.pbj-shop-placeholder svg { width: 3rem; height: 3rem; opacity: .7; background: transparent; }

/* Unavailable (out of stock) card */
.pbj-shop-unavailable {
	margin: 1rem 0; padding: 1rem 1.15rem; border-radius: var(--pbj-shop-radius);
	border: 1px dashed var(--pbj-shop-line); background: var(--pbj-shop-tint);
}
.pbj-shop-unavailable p { margin: 0; }
.pbj-shop-unavailable-title { font-weight: 700; margin-bottom: .25rem !important; }
.pbj-shop-note { margin: .75rem 0; color: var(--pbj-shop-muted); }

/* ---------------------------------------------------------------
 * [pbj_shop]
 * --------------------------------------------------------------- */
.pbj-shop-archive { margin: 1.5rem 0; }
.pbj-shop-cats { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.25rem; }
.pbj-shop-chip {
	display: inline-flex; align-items: center; gap: .4rem; min-height: 2.25rem; padding: .3rem .9rem;
	border: 1px solid var(--pbj-shop-line); border-radius: 999px; color: inherit; text-decoration: none; font-size: .9em;
}
.pbj-shop-chip:hover { border-color: currentColor; }
.pbj-shop-chip.is-current { border-color: var(--pbj-shop-accent, currentColor); box-shadow: inset 0 0 0 1px var(--pbj-shop-accent, currentColor); font-weight: 700; }
.pbj-shop-chip-count { font-size: .8em; color: var(--pbj-shop-muted); }

.pbj-shop-toolbar {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1rem;
	margin: 0 0 1.25rem; padding: 0 0 1rem; border-bottom: 1px solid var(--pbj-shop-line);
}
.pbj-shop-count { margin: 0; color: var(--pbj-shop-muted); }
.pbj-shop-sort { margin: 0; display: flex; gap: .5rem; }
.pbj-shop-sort select,
.pbj-shop-var-row select {
	min-height: 2.75rem; max-width: 100%; padding: .45rem 2.25rem .45rem .8rem; font: inherit; line-height: 1.3;
	color: inherit; background-color: var(--pbj-shop-tint); border: 1px solid var(--pbj-shop-line); border-radius: var(--pbj-shop-radius);
	-webkit-appearance: none; appearance: none; cursor: pointer;
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position: calc(100% - 1.15rem) 50%, calc(100% - .8rem) 50%; background-size: .35rem .35rem; background-repeat: no-repeat;
}
.pbj-shop-sort select:focus-visible, .pbj-shop-var-row select:focus-visible { outline: 2px solid var(--pbj-shop-accent, currentColor); outline-offset: 2px; }
.pbj-shop-sort select option, .pbj-shop-var-row select option { color: #1d2327; background: #fff; }

.pbj-shop-grid {
	list-style: none; margin: 0; padding: 0;
	display: grid; gap: 2rem 1.5rem; grid-template-columns: repeat(3, minmax(0, 1fr));
}
.pbj-shop-archive[data-columns="1"] .pbj-shop-grid { grid-template-columns: minmax(0, 1fr); }
.pbj-shop-archive[data-columns="2"] .pbj-shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pbj-shop-archive[data-columns="4"] .pbj-shop-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pbj-shop-archive[data-columns="5"] .pbj-shop-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.pbj-shop-archive[data-columns="6"] .pbj-shop-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 900px) {
	.pbj-shop-archive .pbj-shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 1.5rem 1rem; }
}
@media (max-width: 380px) {
	.pbj-shop-archive .pbj-shop-grid { grid-template-columns: minmax(0, 1fr) !important; }
}
.pbj-shop-card { display: flex; flex-direction: column; min-width: 0; margin: 0; padding: 0; }
.pbj-shop-card-link { display: flex; flex-direction: column; gap: .35rem; color: inherit; text-decoration: none; }
.pbj-shop-card-media {
	position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; margin-bottom: .5rem;
	border-radius: var(--pbj-shop-radius); background: var(--pbj-shop-tint); border: 1px solid var(--pbj-shop-line);
}
.pbj-shop-card-media img, .pbj-shop-card-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
a.pbj-shop-card-link:hover .pbj-shop-card-img { transform: scale(1.03); }
.pbj-shop-card.is-out .pbj-shop-card-media img { filter: grayscale(.6); opacity: .75; }
.pbj-shop-card-cat { font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--pbj-shop-muted); }
.pbj-shop-card-title { font-weight: 600; font-size: 1.05em; line-height: 1.3; overflow-wrap: anywhere; }
a.pbj-shop-card-link:hover .pbj-shop-card-title { text-decoration: underline; text-underline-offset: 3px; }
.pbj-shop-card-price { margin: .35rem 0 .75rem; }
.pbj-shop-card-action { margin-top: auto; }
.pbj-shop-card-action .pbj-shop-add { margin: 0; }
.pbj-shop-card-action .pbj-fb-add-row { display: block; margin: 0; }
.pbj-shop-card-action .pbj-shop-button { width: 100%; }
.pbj-shop-card-action .pbj-fb-added { margin: .5rem 0 0; font-size: .875em; }

.pbj-shop-empty {
	display: grid; justify-items: center; gap: .5rem; padding: 3rem 1.5rem; text-align: center;
	border: 1px dashed var(--pbj-shop-line); border-radius: var(--pbj-shop-radius);
}
.pbj-shop-empty .pbj-shop-placeholder { width: 5rem; height: 5rem; min-height: 0; border-radius: 50%; background-image: none; }
.pbj-shop-empty p { margin: 0; }
.pbj-shop-empty-title { font-weight: 700; font-size: 1.1em; }

.pbj-shop-pages { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; margin: 2.5rem 0 0; }
.pbj-shop-page {
	display: inline-grid; place-items: center; min-width: 2.5rem; height: 2.5rem; padding: 0 .6rem;
	border: 1px solid var(--pbj-shop-line); border-radius: var(--pbj-shop-radius); color: inherit; text-decoration: none;
}
a.pbj-shop-page:hover { border-color: currentColor; }
.pbj-shop-page.is-current { background: var(--pbj-shop-accent, currentColor); border-color: var(--pbj-shop-accent, currentColor); color: var(--pbj-shop-accent-text, #fff); font-weight: 700; }

/* ---------------------------------------------------------------
 * Gallery (single page + embedded card)
 * --------------------------------------------------------------- */
.pbj-shop-gallery { position: relative; min-width: 0; }
.pbj-shop-gallery-main {
	aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--pbj-shop-radius);
	background: var(--pbj-shop-tint); border: 1px solid var(--pbj-shop-line);
}
.pbj-shop-gallery-main img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pbj-shop-thumbs { list-style: none; margin: .75rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .5rem; }
.pbj-shop-thumbs li { margin: 0; padding: 0; }
.pbj-shop-thumb {
	display: block; width: 100%; aspect-ratio: 1 / 1; padding: 0; overflow: hidden; cursor: pointer;
	border: 1px solid var(--pbj-shop-line); border-radius: calc(var(--pbj-shop-radius) - 2px); background: none; opacity: .7;
}
.pbj-shop-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pbj-shop-thumb:hover, .pbj-shop-thumb.is-current { opacity: 1; }
.pbj-shop-thumb.is-current { border-color: var(--pbj-shop-accent, currentColor); box-shadow: 0 0 0 1px var(--pbj-shop-accent, currentColor); }

/* ---------------------------------------------------------------
 * Single product page
 * --------------------------------------------------------------- */
.pbj-shop-single { margin: 0 0 2rem; }
.pbj-shop-crumbs { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1.5rem; font-size: .875em; color: var(--pbj-shop-muted); }
.pbj-shop-crumbs a { color: inherit; }
.pbj-shop-crumbs [aria-current] { color: inherit; opacity: 1; font-weight: 600; overflow-wrap: anywhere; }
.pbj-shop-single-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; align-items: start; }
@media (max-width: 860px) {
	.pbj-shop-single-grid { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
	/* No picture: a short panel, not a screen-high empty square. */
	.pbj-shop-single .pbj-shop-gallery-main:has(> .pbj-shop-placeholder) { aspect-ratio: 16 / 7; }
}
.pbj-shop-summary { min-width: 0; }
.pbj-shop-kicker { margin: 0 0 .35rem; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--pbj-shop-muted); }
.pbj-shop-title { margin: 0 0 .6rem; font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.4rem); line-height: 1.15; overflow-wrap: anywhere; }
.pbj-shop-headline { margin: 0 0 .5rem; font-size: 1.15em; font-weight: 600; }
.pbj-shop-summary-price { margin: 0 0 .75rem; font-size: 1.6em; line-height: 1.25; }
.pbj-shop-summary-price .pbj-shop-price del { font-size: .7em; }
.pbj-shop-short { margin: 0 0 1rem; font-size: 1.05em; }
.pbj-shop-included { margin: .5rem 0 1rem; padding: 0; list-style: none; }
.pbj-shop-included li { position: relative; padding-left: 1.6rem; margin: 0 0 .4rem; }
.pbj-shop-included li::before {
	content: ""; position: absolute; left: .15rem; top: .45em; width: .7rem; height: .4rem;
	border-left: 2px solid var(--pbj-shop-ok); border-bottom: 2px solid var(--pbj-shop-ok); transform: rotate(-45deg);
}
.pbj-shop-summary .pbj-shop-add { margin: 1.25rem 0 0; padding: 1.25rem 0 0; border-top: 1px solid var(--pbj-shop-line); }
.pbj-shop-summary .pbj-shop-add-row { display: flex; flex-wrap: wrap; align-items: stretch; gap: .75rem; }
.pbj-shop-summary .pbj-shop-add-row .pbj-shop-button { flex: 1 1 12rem; min-height: 2.9rem; }
.pbj-shop-summary .pbj-fb-qty-input { min-height: 2.9rem; }
.pbj-shop-meta { margin: 1.5rem 0 0; padding: 1rem 0 0; border-top: 1px solid var(--pbj-shop-line); font-size: .9em; }
.pbj-shop-meta div { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0 0 .3rem; }
.pbj-shop-meta dt { font-weight: 600; margin: 0; }
.pbj-shop-meta dt::after { content: ":"; }
.pbj-shop-meta dd { margin: 0; color: var(--pbj-shop-muted); overflow-wrap: anywhere; }
.pbj-shop-meta dd a { color: inherit; }

/* The direct checkout form sits inside the summary: its own product block is the page above. */
.pbj-shop-direct { margin: 1.25rem 0 0; padding: 1.25rem 0 0; border-top: 1px solid var(--pbj-shop-line); }
.pbj-shop-direct .pbj-fb-wrap { max-width: none; margin: 0; }
.pbj-shop-single .pbj-shop-direct .pbj-fb-product { display: none; }

/* Variation picker */
.pbj-shop-variations { display: grid; gap: .85rem; margin: 0 0 1rem; }
.pbj-shop-var-row { display: grid; gap: .3rem; }
.pbj-shop-var-row label { font-weight: 600; font-size: .925em; }
.pbj-shop-var-row select { width: 100%; }
.pbj-shop-var-clear {
	justify-self: start; padding: 0; border: 0; background: none; color: inherit; font: inherit; font-size: .875em;
	text-decoration: underline; text-underline-offset: 3px; cursor: pointer; opacity: .8;
}
.pbj-shop-var-result { display: none; gap: .25rem; padding: .85rem 1rem; border-radius: var(--pbj-shop-radius); background: var(--pbj-shop-tint); border: 1px solid var(--pbj-shop-line); }
.pbj-shop-variations.has-result .pbj-shop-var-result { display: grid; }
.pbj-shop-var-price { font-size: 1.25em; }
.pbj-shop-var-price:empty { display: none; }
.pbj-shop-var-stock { margin: 0; display: flex; align-items: center; gap: .45rem; font-weight: 600; font-size: .925em; }
.pbj-shop-var-stock.is-unavailable { font-weight: 400; color: var(--pbj-shop-bad); }

/* Tabs */
.pbj-shop-tabs { margin: 3rem 0 0; }
.pbj-shop-tablist { display: none; }
.pbj-shop-tabs.is-js .pbj-shop-tablist { display: flex; flex-wrap: wrap; gap: 0 1.5rem; border-bottom: 1px solid var(--pbj-shop-line); margin: 0 0 1.5rem; }
.pbj-shop-tablist [role="tab"] {
	padding: .75rem 0; margin: 0 0 -1px; border: 0; border-bottom: 2px solid transparent; background: none;
	color: inherit; font: inherit; font-weight: 600; cursor: pointer; opacity: .7;
}
.pbj-shop-tablist [role="tab"][aria-selected="true"] { opacity: 1; border-bottom-color: var(--pbj-shop-accent, currentColor); }
.pbj-shop-tabs.is-js .pbj-shop-panel-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
.pbj-shop-panel { max-width: 75ch; }
.pbj-shop-panel + .pbj-shop-panel { margin-top: 2rem; }
.pbj-shop-tabs.is-js .pbj-shop-panel + .pbj-shop-panel { margin-top: 0; }
.pbj-shop-included-title { font-size: 1em; margin: 1.5rem 0 .5rem; }
.pbj-shop-attributes { width: 100%; border-collapse: collapse; }
.pbj-shop-attributes th, .pbj-shop-attributes td { padding: .65rem .75rem; text-align: left; border-bottom: 1px solid var(--pbj-shop-line); vertical-align: top; }
.pbj-shop-attributes th { width: 35%; font-weight: 600; }
.pbj-shop-attributes tr:nth-child(odd) { background: var(--pbj-shop-tint); }

/* ---------------------------------------------------------------
 * [pbj_product] with 2.4 fields
 * --------------------------------------------------------------- */
.pbj-shop-embed { margin: 1.25rem 0; max-width: 720px; }
.pbj-shop-embed-head { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin: 0 0 .25rem; }
.pbj-shop-embed-head .pbj-shop-badges { position: static; }
.pbj-shop-embed-head .pbj-shop-stock { margin: 0; }
.pbj-shop-embed-price { font-size: 1.35em; }
.pbj-shop-embed-direct .pbj-fb-wrap { margin-top: .5rem; }
.pbj-shop-card-embed { display: grid; gap: 1.25rem; }
.pbj-shop-card-embed.is-side { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: start; }
@media (max-width: 640px) { .pbj-shop-card-embed.is-side { grid-template-columns: minmax(0, 1fr); } }
.pbj-shop-card-embed .pbj-shop-gallery { max-width: 360px; }
.pbj-shop-card-embed.is-side .pbj-shop-gallery { max-width: none; }
.pbj-shop-embed-title { margin: 0 0 .5rem; line-height: 1.2; }

@media (max-width: 480px) {
	.pbj-shop-summary-price { font-size: 1.4em; }
	.pbj-shop-tabs { margin-top: 2rem; }
	.pbj-shop-attributes th { width: 42%; }
	.pbj-shop-thumbs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}