/**
 * Omniverce Core — Feature 8: Figma product card (loop layouts
 * 5041 grid / 5155 list).
 *
 * Values come from the locked card spec
 * (product_card_build_2026-10-28/SPEC.md): Figma geometry where
 * extracted, zoom-read screenshot values elsewhere. When the
 * background Figma extraction lands the exact node values, this
 * file is where they are dropped in — selectors stay the same.
 *
 * Everything is scoped to the two loop items so nothing else on
 * the site is affected.
 */

/* ---------- Card frame ---------- */
.wd-loop-item-5041,
.wd-loop-item-5155 {
	font-family: "Inter Tight", sans-serif;
	color: #111827;
}

.wd-loop-item-5041 .wd-product-wrapper,
.wd-loop-item-5155 .wd-product-wrapper {
	border: 1px solid #E5E7EB;
	border-radius: 8px;
	padding: 10px;
	background: #fff;
}

/* ---------- Sponsored line ---------- */
.ovc-sponsored {
	font-size: 11px;
	line-height: 1.3;
	color: #4B5563;
	margin: 0 0 4px;
}

.ovc-sponsored-info {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 13px;
	height: 13px;
	border-radius: 50%;
	background: #9AA0A6;
	color: #fff;
	font-size: 9px;
	font-style: italic;
	font-weight: 700;
	vertical-align: 1px;
}

/* ---------- Chips row ---------- */
.ovc-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	align-items: center;
	margin: 0 0 6px;
}

.ovc-chip {
	display: inline-flex;
	align-items: center;
	height: 16px;
	padding: 0 5px;
	border-radius: 4px;
	font-size: 11px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
}

.ovc-chip-local {
	border: 1px solid #359E20;
	color: #359E20;
	background: #fff;
}

.ovc-chip-import {
	border: 1px solid #2563EB;
	color: #2563EB;
	background: #fff;
}

.ovc-chip-brand {
	background: #D6EAFF;
	color: #111827;
	border: 1px solid transparent;
}

/* ---------- Rating row: bought text beside the stars ---------- */
.wd-loop-item-5041 .wd-loop-prod-rating,
.wd-loop-item-5155 .wd-loop-prod-rating {
	display: inline-flex;
	align-items: center;
}

.ovc-bought {
	font-size: 12px;
	color: #4B5563;
	margin-left: 8px;
	white-space: nowrap;
}

/* WoodMart rating block: blue review count like the design. */
.wd-loop-item-5041 .woocommerce-review-link,
.wd-loop-item-5155 .woocommerce-review-link {
	color: #1662C7;
	font-weight: 600;
}

/* ---------- OFF chip + countdown row ---------- */
.ovc-off {
	display: inline-flex;
	align-items: center;
	padding: 3px 7px;
	border: 1.5px solid #C4191D;
	border-radius: 4px;
	color: #C4191D;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
}

.wd-loop-item-5155 .ovc-off {
	border-color: #374151;
}

/* ---------- Campaign chip ---------- */
.ovc-campaign {
	display: inline-flex;
	align-items: center;
	margin-top: 8px;
	padding: 4px 8px;
	border-radius: 4px;
	background: #000;
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.2;
}

/* ---------- Direct row ---------- */
.ovc-direct {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 8px;
}

.ovc-direct-word {
	position: relative;
	font-style: italic;
	font-weight: 800;
	font-size: 15px;
	line-height: 1;
	color: #1662C7;
	padding-bottom: 5px;
}

.ovc-direct-swoosh {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 6px;
}

.ovc-member-price {
	font-size: 13px;
	font-weight: 600;
	color: #111827;
}

.ovc-member-price-active {
	color: #359E20;
}

.ovc-member-lock {
	display: inline-flex;
	align-items: center;
}

/* ---------- Delivery lines ---------- */
.ovc-delivery {
	margin-top: 8px;
	font-size: 13px;
	line-height: 1.45;
	color: #4B5563;
}

.ovc-delivery-line strong {
	color: #000;
	font-weight: 700;
}

/* ---------- List actions pill ---------- */
.ovc-actions {
	display: inline-flex;
	align-items: stretch;
	margin-top: 10px;
	border: 1px solid #D2D2D2;
	border-radius: 999px;
	overflow: hidden;
	background: #fff;
}

.ovc-bag-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	min-height: 38px;
	border: 0;
	border-radius: 999px;
	background: #053677;
	cursor: pointer;
	padding: 0;
}

.ovc-bag-btn:hover {
	background: #1662C7;
}

.ovc-bag-btn.is-adding {
	opacity: 0.6;
	pointer-events: none;
}

.ovc-qty {
	display: inline-flex;
	align-items: center;
	padding: 0 6px;
}

.ovc-qty-btn {
	border: 0;
	background: transparent;
	color: #4B5563;
	font-size: 17px;
	line-height: 1;
	width: 26px;
	height: 100%;
	cursor: pointer;
	padding: 0;
}

.ovc-qty-input {
	width: 26px;
	border: 0 !important;
	background: transparent;
	text-align: center;
	font-size: 14px;
	font-weight: 600;
	color: #000;
	padding: 0;
	box-shadow: none !important;
}

/* Grid card keeps the native round bag button; make sure it sits
   on the site's dark blue like the design. */
.wd-loop-item-5041 .wd-add-btn .button,
.wd-loop-item-5041 a.add-to-cart-loop {
	background: #053677;
	border-radius: 100px;
}

/* WoodMart product labels (sale %, Hot) REMOVED from the cards
   (Hassan 2026-10-28): they are not in the Figma card, and the
   discount percent already shows in the OFF chip under the price. */
.wd-loop-item-5041 .wd-loop-prod-labels.product-labels,
.wd-loop-item-5155 .wd-loop-prod-labels.product-labels {
	display: none;
}

/* Double-border fix (Hassan 2026-10-28): the inner wrapper keeps
   its own frame in the theme — neutralise it so the card carries
   exactly ONE border (the loop item's). */
.wd-loop-item-5041 .wd-product-wrapper,
.wd-loop-item-5155 .wd-product-wrapper {
	border: 0;
	border-radius: 0;
	background: none;
	padding: 0;
}

/* Pill hardening (Hassan 2026-10-28): in the grid layout the pill
   was being stretched to the full card width by the surrounding
   blocks, and the bag button could be visually lost. Keep the
   pill compact and the bag a fixed dark circle in both layouts. */
.wd-loop-item-5041 .ovc-actions,
.wd-loop-item-5155 .ovc-actions {
	display: inline-flex;
	width: fit-content;
	max-width: 100%;
	align-self: flex-start;
	justify-self: start;
	flex: 0 0 auto;
}

.wd-loop-item-5041 .ovc-bag-btn,
.wd-loop-item-5155 .ovc-bag-btn {
	flex: 0 0 44px;
	width: 44px;
	min-width: 44px;
	height: 44px;
	min-height: 44px;
	background-color: #053677;
	border-radius: 999px;
}

.wd-loop-item-5041 .ovc-qty,
.wd-loop-item-5155 .ovc-qty {
	flex: 0 0 auto;
}

/* Width pin (follow-up, same evening): the hardening alone did
   not shrink the pill in the 6-column grid — pin the width and
   the stepper's internal geometry outright. */
.wd-loop-item-5041 .ovc-actions,
.wd-loop-item-5155 .ovc-actions {
	width: fit-content !important;
	flex: 0 0 auto !important;
	justify-content: flex-start;
	column-gap: 6px;
}

.wd-loop-item-5041 .ovc-qty,
.wd-loop-item-5155 .ovc-qty {
	flex: 0 0 auto;
	column-gap: 2px;
}

.wd-loop-item-5041 .ovc-qty-input,
.wd-loop-item-5155 .ovc-qty-input {
	flex: 0 0 30px;
	width: 30px;
}

/* Stepper legibility (follow-up): in the grid context the theme's
   input/button styles were washing the quantity digit out. Pin
   the stepper internals explicitly. */
.wd-loop-item-5041 .ovc-qty-btn,
.wd-loop-item-5155 .ovc-qty-btn {
	background: transparent !important;
	color: #111827 !important;
	font-size: 17px;
	width: 26px;
	height: 44px;
}

.wd-loop-item-5041 .ovc-qty-input,
.wd-loop-item-5155 .ovc-qty-input {
	color: #000 !important;
	-webkit-text-fill-color: #000;
	background: transparent !important;
	opacity: 1;
	font-size: 14px;
	font-weight: 600;
	text-align: center;
	height: 44px;
}

/* Figma rule + icon fix (Hassan 2026-10-28): variable products
   show the bag icon ONLY (no pill box, no stepper). The bag
   glyph is pinned through the common .ovc-bag-btn class so the
   icon renders identically on the simple-product <button> and
   the variable-product <a> — the button's icon was collapsing. */
.wd-loop-item-5041 .ovc-actions-icon,
.wd-loop-item-5155 .ovc-actions-icon {
	border: 0;
	background: transparent;
	border-radius: 0;
	overflow: visible;
}

.wd-loop-item-5041 .ovc-bag-btn,
.wd-loop-item-5155 .ovc-bag-btn {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
}

.wd-loop-item-5041 .ovc-bag-btn svg,
.wd-loop-item-5155 .ovc-bag-btn svg {
	display: block;
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
}

/* Click + digit hardening (Hassan 2026-10-28, urgent): the card
   hover/link layers were swallowing clicks on the actions row
   and the quantity digit still did not render. Lift the actions
   above card overlays and pin the input box outright. */
.wd-loop-item-5041 .ovc-actions,
.wd-loop-item-5155 .ovc-actions {
	position: relative;
	z-index: 6;
	pointer-events: auto;
}

.wd-loop-item-5041 .ovc-actions > *,
.wd-loop-item-5155 .ovc-actions > * {
	pointer-events: auto;
}

.wd-loop-item-5041 .ovc-qty-input,
.wd-loop-item-5155 .ovc-qty-input {
	font-size: 14px !important;
	min-width: 30px !important;
	visibility: visible !important;
}

/* Hassan's finding (2026-10-28): the theme's input/button
   padding was squeezing the quantity digit out of its narrow
   field. Zero padding, forced, on the whole stepper group. */
.wd-loop-item-5041 .ovc-qty-input,
.wd-loop-item-5155 .ovc-qty-input,
.wd-loop-item-5041 .ovc-qty-btn,
.wd-loop-item-5155 .ovc-qty-btn,
.wd-loop-item-5041 .ovc-bag-btn,
.wd-loop-item-5155 .ovc-bag-btn {
	padding: 0 !important;
}

/* Card frame spacing (Hassan, 2026-10-28): the loop-item
   container itself carries NO padding; the 7px inset lives on
   the text section (ovc-card-body) only, so the image section
   sits flush with the card edges. Grid layout only. */
.wd-loop-item-5041 {
	padding: 0 !important;
}

.wd-loop-item-5041 .ovc-card-body {
	padding: 10px 7px 15px;
}

/* Countdown size (Hassan, 2026-10-28): the loop countdown was
   too large and too widely spaced — on narrower cards the
   seconds unit dropped to a second line. Shrink the digits and
   labels, tighten the gaps, and never let the four units split
   across lines. */
.wd-loop-item-5041 .wd-timer,
.wd-loop-item-5155 .wd-timer {
	display: flex;
	flex-wrap: nowrap;
	gap: 8px;
}

.wd-loop-item-5041 .wd-timer .wd-item,
.wd-loop-item-5155 .wd-timer .wd-item {
	min-width: 0;
	margin: 0;
	white-space: nowrap;
	text-align: center;
}

.wd-loop-item-5041 .wd-timer-value,
.wd-loop-item-5155 .wd-timer-value {
	font-size: 17px;
	line-height: 1.15;
}

.wd-loop-item-5041 .wd-timer-text,
.wd-loop-item-5155 .wd-timer-text {
	font-size: 10px;
	line-height: 1.15;
}

/* Countdown position (Hassan, 2026-10-28): the countdown goes
   BELOW the OFF chip on its own line, not beside it. The chip
   and countdown share a wrapping flex row in the loop layout;
   giving the timer a full-width basis pushes it to the next
   line under the chip. */
.wd-loop-item-5041 .wd-countdown-timer,
.wd-loop-item-5155 .wd-countdown-timer {
	flex: 0 0 100%;
	margin-top: 4px;
}

/* Product grid card image (Hassan, 2026-10-28 — his "160px
   square contain" instruction was for the PRODUCT card, not
   the store logo): every product image renders at the same
   160x160 square with object-fit contain, so nothing is
   cropped and all cards line up equal. */
.wd-loop-item-5041 .ovc-card-media img {
	width: 200px !important;
	height: 200px !important;
	object-fit: contain !important;
	display: block;
	margin-left: auto;
	margin-right: auto;
}
/* Direct Benefits (Core 1.6.1): the member-price note printed beside
   member pricing for logged-in Direct members. New element; member-only. */
.ovc-member-price-note {
	display: block;
	font-size: 11px;
	font-weight: 600;
	color: #1662C7;
	margin-top: 2px;
}