/**
 * Shop 3 — product card per prototype (gb-prototype.css .gb-cat / .gb-cats--shop + gb-new-elements.css §5).
 * Blocksy archive card (Customizer: layers image · title · meta · price · add-to-cart, always visible)
 * restyled here. Actions markup from custom/woocommerce/archive-card.php.
 * Tier B (WooCommerce pages + pages with WC blocks/shortcodes).
 */

/* ---------- grid ---------- */
[data-products].products {
	gap: 20px;
	--grid-columns-gap: 20px;
}

/* ---------- card shell ---------- */
[data-products] > li.product {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-content: start;
	column-gap: 12px;
	padding: 0 0 18px;
	background: var(--gb-surface);
	border: 1px solid var(--gb-line);
	border-radius: var(--gb-r-lg);
	overflow: hidden;
	text-align: left;
	transition: transform 0.15s, box-shadow 0.15s;
}

[data-products] > li.product:hover {
	transform: translateY(-2px);
	box-shadow: var(--gb-shadow-2);
}

[data-products] > li.product > * {
	min-width: 0;
	margin: 0;
}

/* ---------- image 8/7 ---------- */
[data-products] > li.product > figure {
	grid-column: 1 / -1;
	position: relative;
	margin: 0;
	background: var(--gb-surface-2);
}

[data-products] > li.product .ct-media-container {
	display: block;
	aspect-ratio: 8 / 7;
	border-radius: 0;
}

[data-products] > li.product .ct-media-container img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	aspect-ratio: 8 / 7;
}

/* Free shipping flag (legacy shipping class 336 badge) over the photo, top-left. */
[data-products] > li.product > .free-shipping-badge {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	grid-column: 1 / -1;
	width: auto;
	padding: 4px 9px;
	border-radius: 999px;
	background: rgba(27, 24, 21, 0.82);
	color: var(--gb-gold);
	font-size: var(--gb-fs-12);
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1.3;
	text-transform: uppercase;
}

[data-products] > li.product > .free-shipping-badge * {
	color: inherit;
	font: inherit;
	margin: 0;
}

/* ---------- body ---------- */
[data-products] > li.product .woocommerce-loop-product__title {
	grid-column: 1 / -1;
	padding: 16px 18px 0;
	font-family: var(--gb-font-display);
	font-size: var(--gb-fs-18);
	font-weight: 600;
	line-height: 1.25;
}

[data-products] > li.product .woocommerce-loop-product__title a {
	color: var(--gb-ink);
	text-decoration: none;
}

/* meta (first category) left, price right — prototype .gb-cat__meta */
[data-products] > li.product > .entry-meta {
	grid-column: 1;
	padding: 6px 0 0 18px;
	font-size: 0; /* hides the ", " separators between category links */
	line-height: 1.4;
}

[data-products] > li.product > .entry-meta a {
	font-size: var(--gb-fs-14);
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var(--gb-muted);
}

[data-products] > li.product > .entry-meta a:first-of-type {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	display: block;
}

[data-products] > li.product > .entry-meta a:not(:first-of-type) {
	display: none;
}

[data-products] > li.product > .price {
	grid-column: 2;
	align-self: start;
	padding: 6px 18px 0 0;
	font-size: var(--gb-fs-14);
	font-weight: 700;
	color: var(--gb-ink);
	white-space: nowrap;
}

/* ---------- actions ---------- */
[data-products] > li.product > .ct-woo-card-actions {
	grid-column: 1 / -1;
	display: grid;
	gap: 12px;
	margin-top: 12px;
	padding: 0 18px;
	opacity: 1;
	transform: none;
	visibility: visible;
}

[data-products] .gb-cat__cta {
	font-size: var(--gb-fs-14);
	font-weight: 700;
	color: var(--gb-gold-ink);
	text-decoration: none;
}

[data-products] .gb-cat__cta:hover {
	color: var(--gb-gold-deep);
}

.gb-quickadd-row {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 8px;
	align-items: stretch;
}

/* compact stepper — Blocksy quantity (type-2 +/− spans) styled as prototype .gb-qty */
.gb-qty .quantity {
	position: relative;
	display: block;
	width: 112px;
	height: 44px;
	margin: 0;
	border: 1.5px solid var(--gb-line-strong);
	border-radius: var(--gb-r-md);
	background: var(--gb-surface);
	overflow: hidden;
	--quantity-height: 44px;
	--quantity-arrows-initial-color: var(--gb-ink);
	--quantity-arrows-hover-color: var(--gb-ink);
}

.gb-qty .quantity .ct-increase,
.gb-qty .quantity .ct-decrease {
	top: 0;
	width: 32px;
	height: 100%;
	border-radius: 0;
	background: var(--gb-surface-2);
	color: var(--gb-ink);
}

.gb-qty .quantity .ct-decrease { left: 0; inset-inline-start: 0; }
.gb-qty .quantity .ct-increase { right: 0; inset-inline-end: 0; }

.gb-qty .quantity .ct-increase:hover,
.gb-qty .quantity .ct-decrease:hover {
	background: var(--gb-gold-soft);
}

.gb-qty .quantity input.qty {
	width: 100%;
	height: 100%;
	padding: 0 32px;
	border: 0;
	border-radius: 0;
	background: transparent;
	text-align: center;
	font-size: var(--gb-fs-15);
	font-weight: 700;
	color: var(--gb-ink);
	-moz-appearance: textfield;
}

.gb-qty .quantity input.qty::-webkit-outer-spin-button,
.gb-qty .quantity input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Quick add — prototype .gb-quickadd */
[data-products] .gb-quickadd,
.gb-quickadd {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 44px;
	padding: 0 16px;
	border: 1.5px solid var(--gb-gold-deep);
	border-radius: var(--gb-r-md);
	background: var(--gb-gold-deep);
	color: #fff;
	font-family: var(--gb-font-body);
	font-size: var(--gb-fs-14);
	font-weight: 700;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.05s;
	--theme-button-background-initial-color: var(--gb-gold-deep);
	--theme-button-background-hover-color: #75592e;
	--theme-button-text-initial-color: #fff;
	--theme-button-text-hover-color: #fff;
}

/* .gb-root scope: outranks the section link hover (.gb-root a:hover) on home cards */
.gb-quickadd:hover,
.gb-root .gb-quickadd:hover {
	background: #75592e;
	border-color: #75592e;
	color: #fff;
}

.gb-quickadd:active {
	transform: translateY(1px);
}

.gb-quickadd.is-loading {
	opacity: 0.72;
	cursor: progress;
}

.gb-quickadd.is-added,
.gb-quickadd.is-added:hover,
.gb-root .gb-quickadd.is-added:hover {
	background: var(--gb-ok);
	border-color: var(--gb-ok);
	color: #fff;
}

.gb-quickadd.loading::after,
.gb-quickadd.added::after {
	display: none;
}

.gb-quickadd--options {
	background: var(--gb-surface);
	border-color: var(--gb-line-strong);
	color: var(--gb-ink);
	--theme-button-background-initial-color: var(--gb-surface);
	--theme-button-text-initial-color: var(--gb-ink);
}

.gb-quickadd--options:hover,
.gb-root .gb-quickadd--options:hover {
	background: var(--gb-surface);
	border-color: var(--gb-ink);
	color: var(--gb-ink);
}

.gb-quickadd--disabled,
.gb-quickadd--disabled:hover,
.gb-root .gb-quickadd--disabled:hover {
	background: var(--gb-surface-2);
	border-color: var(--gb-line-strong);
	color: var(--gb-muted);
	cursor: not-allowed;
}

/* WooCommerce's injected "View cart" link — the drawer replaces it. */
[data-products] .ct-woo-card-actions .added_to_cart {
	display: none;
}

/* ---------- wishlist chip (top-right), quick-view icon hidden (prototype has none) ---------- */
[data-products] .ct-woo-card-extra[data-type="type-1"] {
	top: 12px;
	right: 12px;
	inset-inline-end: 12px;
	opacity: 1;
	transform: none;
}

[data-products] .ct-woo-card-extra .ct-wishlist-button-archive {
	width: 34px;
	height: 34px;
	border-radius: 999px;
	background: rgba(27, 24, 21, 0.82);
	color: var(--gb-gold);
	--theme-icon-color: var(--gb-gold);
	--theme-icon-hover-color: var(--gb-dark);
	--theme-button-background-initial-color: rgba(27, 24, 21, 0.82);
	--theme-button-background-hover-color: var(--gb-gold);
	box-shadow: none;
}

[data-products] .ct-woo-card-extra .ct-wishlist-button-archive:hover,
[data-products] .ct-woo-card-extra .ct-wishlist-button-archive[data-button-state="active"] {
	background: var(--gb-gold);
	--theme-icon-color: var(--gb-dark);
}

[data-products] .ct-woo-card-extra .ct-open-quick-view {
	display: none;
}

/* ---------- responsive (prototype: 4 → 3 at 1160, 2 at 760) ---------- */
@media (max-width: 760px) {
	[data-products].products {
		gap: 12px;
		--grid-columns-gap: 12px;
	}

	[data-products] > li.product {
		padding-bottom: 14px;
	}

	[data-products] > li.product .woocommerce-loop-product__title {
		padding: 12px 12px 0;
		font-size: var(--gb-fs-16);
	}

	[data-products] > li.product > .entry-meta,
	[data-products] > li.product > .price {
		grid-column: 1 / -1;
		padding: 2px 12px 0;
	}

	[data-products] > li.product > .ct-woo-card-actions {
		padding: 0 12px;
	}

	.gb-quickadd-row {
		grid-template-columns: minmax(0, 1fr);
	}

	.gb-qty .quantity {
		width: 100%;
	}

	[data-products] .gb-quickadd {
		min-height: 42px;
		font-size: var(--gb-fs-13);
	}
}

/* =====================================================================
 * Card pass (prototype shop.html .gb-cat--shop, Oct): one full-width Quick add pinned to the
 * card foot (no stepper), title line height 1.55, category wraps, 27px flag, no hover lift.
 * ===================================================================== */
[data-products] > li.product { grid-template-rows: auto auto auto 1fr; }
[data-products] > li.product:hover { transform: none; box-shadow: none; }
[data-products] > li.product .woocommerce-loop-product__title { line-height: 1.55; }
[data-products] > li.product > .entry-meta { padding-top: 5px; line-height: 1.55; }
[data-products] > li.product > .entry-meta a:first-of-type { white-space: normal; overflow: visible; text-overflow: clip; }
[data-products] > li.product > .price { padding-top: 5px; line-height: 1.55; }
[data-products] > li.product > .free-shipping-badge { line-height: 1.55; }
[data-products] > li.product > .ct-woo-card-actions { grid-row: 4; grid-template-rows: auto 1fr; gap: 0; }
[data-products] .gb-cat__cta { margin-bottom: 18px; }
[data-products] .gb-quickadd-row { display: block; align-self: end; }
[data-products] .gb-quickadd-row .gb-qty { display: none; }
[data-products] .gb-quickadd-row .gb-quickadd { width: 100%; }
@media (max-width: 760px) {
	[data-products] > li.product > .entry-meta,
	[data-products] > li.product > .price { padding-top: 2px; }
	[data-products] .gb-cat__cta { margin-bottom: 14px; }
}
/* Phones: category and price stack (photo, title, category, price, actions = 5 rows). */
@media (max-width: 760px) {
	[data-products] > li.product { grid-template-rows: auto auto auto auto 1fr; }
	[data-products] > li.product > .ct-woo-card-actions { grid-row: 5; }
}
/* "View hamper" stays 12px under the meta when a card stretches to its row (the extra space goes above Quick add). */
[data-products] > li.product > .ct-woo-card-actions { align-content: start; }
[data-products] > li.product > .ct-woo-card-actions > .gb-cat__cta { align-self: start; }
[data-products] > li.product > .ct-woo-card-actions > .gb-cat__cta { margin-top: 0; } /* global .gb-cat__cta adds 6px (category tiles) */

/* ---------- Create Your Own Hamper (legacy builder page), as on live ---------- */
/* The card designs stay out of the builder (live hides them; card choice is at checkout). */
.gb-cyo .styling-grid-container,
.gb-cyo .-gift-styling-title { display: none; }
/* "Add to wishlist" under Add to cart, the live grey button; the label follows the saved state. */
.gb-cyo .gb-cyo-wish { display: block; width: 100%; min-height: 47px; margin: 4px 0 35px; padding: 0 16px; border: 0; border-radius: 0; background: #dadada; color: #3a3633; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; }
.gb-cyo .gb-cyo-wish:hover { background: #cfcfcf; }
.gb-cyo .gb-cyo-wish[aria-pressed="true"] .gb-cyo-wish__off,
.gb-cyo .gb-cyo-wish[aria-pressed="false"] .gb-cyo-wish__on { display: none; }
/* Page frame as live: 1260px card centred, 40px under the header, 14px body copy, serif step heading. */
.gb-cyo .ct-container-full { padding: 0 20px; }
.gb-cyo div.product { max-width: 1260px; margin-inline: auto; }
.gb-cyo .product-parent-container { font-size: 14px; line-height: 1.6; }
.gb-cyo .product-left-content h3 { font-family: var(--gb-font-display); }
/* Desktop/tablet (768px+, where the legacy builder puts the buy row in the page): quantity as live's row,
   "QUANTITY" left, then − 1 + on a bordered strip (on Blocksy's quantity markup). Below 768px the legacy CSS
   keeps its fixed bottom bar. */
@media (min-width: 768px) {
.gb-cyo form.cart .qty-row { display: block; height: auto; } /* legacy fixes it at 72px, so the wishlist button overlapped */
.gb-cyo form.cart .quantity { --theme-form-field-border-radius: 0; display: flex; align-items: center; width: 100%; height: 37px; margin: 0 0 10px; padding-left: 22px; border: 1px solid #b7b7b7; background: #f9f9f5; }
.gb-cyo form.cart .quantity::before { content: "Quantity"; margin-right: auto; font-size: 12px; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase; color: #000; }
.gb-cyo form.cart .quantity .ct-decrease,
.gb-cyo form.cart .quantity .ct-increase { position: static; display: flex; align-items: center; justify-content: center; width: 38px; height: 35px; border-radius: 0; color: #000; transform: none; opacity: 1; }
.gb-cyo form.cart .quantity .ct-decrease { order: 1; border: 1px solid #e4e4e4; }
.gb-cyo form.cart .quantity input.qty { order: 2; width: 37px; height: 35px; padding: 0; border-radius: 0; background: #fff; color: #666; text-align: center; font-size: 14px; }
.gb-cyo form.cart .quantity .ct-increase { order: 3; }
/* Add to cart: live's full-width square gold button, uppercase. */
body.gb-cyo div.product form.cart .qty-row .single_add_to_cart_button-x.button { display: block; height: auto; width: 100%; min-height: 55px; border-radius: 3px; font-size: 12px; font-weight: 500; letter-spacing: 2.4px; line-height: 35px; text-transform: uppercase; }
}

/* Builder type and sizes measured on live (computed styles, red-team pass): grey body copy, 95px category
   icons, bold inline prices, popup rows with the price after the name, 2px popup buttons. */
body.gb-cyo .product-parent-container,
body.gb-cyo .addons-wrapper { color: #656565; }
body.gb-cyo .product-parent-container p { margin-bottom: 1.75em; }
@media (min-width: 922px) {
	body.gb-cyo .addons-grid .addon-grid-item { width: 95px; }
	body.gb-cyo .addons-grid .addon-grid-item img { width: 95px; height: 95px; object-fit: contain; }
}
body.gb-cyo .product-parent-container .woocommerce-Price-amount,
body.gb-cyo .addons-wrapper .woocommerce-Price-amount { display: inline-block; font-weight: 700; line-height: 24.38px; }
body.gb-cyo .summary p.price .woocommerce-Price-amount { color: #000; }
body.gb-cyo .product-addons-total-wrapper .price-wrapper .woocommerce-Price-amount { font-weight: 700; }
body.gb-cyo .addons-wrapper .addon-inner-wrapper .form-row .addon-total span.woocommerce-Price-amount.amount { display: inline-block; }
body.gb-cyo .addons-wrapper .addon-inner-wrapper .form-row span.woocommerce-Price-amount.amount bdi { display: inline; }
body.gb-cyo .product-addons-total-wrapper .addon-inner-wrapper > h6 { margin: 0; }
body.gb-cyo .product-right-content .summary { margin-bottom: 28px; }
body.gb-cyo div.product .summary h1.product_title.entry-title { --theme-font-size: 26px; --theme-line-height: 36px; font-size: 26px; font-weight: 900; line-height: 36px; color: #3a3633; }
body.gb-cyo .summary p.price { margin: 0 0 4.2px; font-size: 21px; line-height: 22.4px; color: #4b4f58; }
body.gb-cyo .summary form.cart { padding: 12px 0; }
body.gb-cyo .summary p.price .woocommerce-Price-amount { font-size: 20px; }
body.gb-cyo .product-addons-total-wrapper dl.product-addon-totals dt { font-weight: 700; line-height: 22.4px; }
body.gb-cyo .list-addon-detail .remove-list-addon-item { font-size: 14px; }
body.gb-cyo .list-addon-detail label { margin: 0; }
body.gb-cyo .list-addon-detail .remove-list-addon-item { color: #33333a; }
body.gb-cyo .addons-wrapper .addon-inner-wrapper .form-row label { display: block; font-size: 0.9em; line-height: 1; } /* 12.6px desktop, 11.5px phone, as live */
body.gb-cyo .addons-wrapper .addon-inner-wrapper .form-row label .price-wrapper { display: inline; }
body.gb-cyo .addons-wrapper .addon-inner-wrapper-control button { border-radius: 2px; }
/* Keep the last row's bottom margin inside its group (live: 8px more per group); the heading's top margin stays out. */
body.gb-cyo .addons-wrapper .product-addon::after { content: ""; display: table; }
/* Phone: live's smaller body copy (old theme scale) and heavier title. */
@media (max-width: 544px) {
	body.gb-cyo .product-parent-container { font-size: 12.768px; line-height: 1.6; }
	body.gb-cyo .build-basket-step-details { line-height: 20.4288px; }
	body.gb-cyo .product-addons-total-wrapper dl.product-addon-totals dt,
	body.gb-cyo .list-addon-detail .remove-list-addon-item { line-height: 20.4288px; }
	body.gb-cyo .summary p.price { margin-bottom: 4.4px; font-size: 22px; line-height: 20.4288px; }
	body.gb-cyo .product-right-content .summary { margin-bottom: 45px; }
}
/* Phone (below 768px): the legacy fixed bottom bar as live, quantity strip then Add to cart filling the rest. */
@media (max-width: 767px) {
	.gb-cyo form.cart .qty-row .quantity { --theme-form-field-border-radius: 0; display: flex; flex: none; align-items: center; width: 112px; height: 37px; margin: 0 15px 20px 0; padding: 0; border: 1px solid #b7b7b7; background: #f9f9f5; }
	.gb-cyo form.cart .qty-row .quantity .ct-decrease,
	.gb-cyo form.cart .qty-row .quantity .ct-increase { position: static; display: flex; align-items: center; justify-content: center; width: 38px; height: 35px; border-radius: 0; color: #000; transform: none; opacity: 1; }
	.gb-cyo form.cart .qty-row .quantity .ct-decrease { order: 1; }
	.gb-cyo form.cart .qty-row .quantity input.qty { order: 2; width: 34px; height: 35px; padding: 0; border-radius: 0; background: #fff; color: #666; font-size: 12.768px; text-align: center; }
	.gb-cyo form.cart .qty-row .quantity .ct-increase { order: 3; }
	body.gb-cyo div.product form.cart .qty-row .single_add_to_cart_button-x.button { display: block; flex: 1; height: 42px; min-height: 0; padding: 10px; border-radius: 3px; font-size: 12px; font-weight: 500; letter-spacing: 2.4px; line-height: 35px; text-transform: uppercase; }
	.gb-cyo .gb-cyo-wish { margin: 35px 0; }
}

/* Narrow cards (2 per row on phones): a smaller Free shipping flag so it clears the wishlist heart (QA). */
@media (max-width: 599.98px) {
	[data-products] > li.product > .free-shipping-badge { top: 10px; left: 10px; padding: 3px 7px; font-size: 10px; letter-spacing: 0.04em; }
}