/* ==========================================================================
   FILE: assets/css/offers-strip.css
   PURPOSE: Styles the product-page offer chips (Option 3 — side-by-side
   scrollable). Coupon chip design ported directly from the user's own
   Shopify snippet (dashed border + black Copy button); the "Buy 2 Get 1"
   chip reuses the exact same dashed-chip shape for visual consistency.
   Loaded only on single product pages — see functions.php section 35.
   ========================================================================== */

.dc-offers-strip {
	display: flex;
	gap: 10px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	margin: 0 0 16px;
	padding: 2px 0;
}
.dc-offers-strip::-webkit-scrollbar {
	display: none;
}

.dc-offer-chip {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	min-width: 220px;
	border: 2px dashed #111;
	border-radius: 9px;
	padding: 10px 12px;
	box-sizing: border-box;
	text-decoration: none;
}

.dc-offer-chip__text {
	min-width: 0;
}
.dc-offer-chip__code {
	font-size: 13px;
	font-weight: 800;
	color: #111;
	letter-spacing: .02em;
	white-space: nowrap;
}
.dc-offer-chip__desc {
	font-size: 10.5px;
	color: #666;
	margin-top: 1px;
	white-space: nowrap;
}

.dc-offer-chip__copy {
	flex-shrink: 0;
	padding: 7px 14px;
	border: none;
	border-radius: 7px;
	background: #111;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	cursor: pointer;
	transition: background .2s ease;
	-webkit-tap-highlight-color: transparent;
}
.dc-offer-chip__copy:hover {
	background: #333;
}
.dc-offer-chip__copy.is-copied {
	background: #168c4b;
}

/* gift chip is a plain link (no copy button), slightly different
   border emphasis so it reads as "navigate", not "copy" */
.dc-offer-chip--gift {
	border-color: #000;
	background: #f7f7f7;
}

@media (max-width: 420px) {
	.dc-offer-chip { min-width: 200px; padding: 9px 11px; }
	.dc-offer-chip__code { font-size: 12px; }
	.dc-offer-chip__desc { font-size: 10px; }
	.dc-offer-chip__copy { font-size: 10.5px; padding: 6px 11px; }
}