/* ==========================================================================
   UrbanStems 1:1 Parity Product Detail Page (PDP) Styles
   ========================================================================== */

.has-ccq-pdp .site-content {
	padding-top: 0;
}

/* Stage Layout */
.ccq-pdp__stage {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(360px, 440px);
	gap: 48px;
	align-items: start;
	margin-top: 16px;
	margin-bottom: 60px;
}

@media (max-width: 1023px) {
	.ccq-pdp__stage {
		grid-template-columns: 1fr;
		gap: 24px;
	}
}

/* Left Column: Gallery */
.ccq-pdp__gallery-col {
	min-width: 0;
}

.ccq-pdp__gallery-wrapper {
	position: relative;
}

.ccq-pdp__badge-overlay {
	position: absolute;
	top: 16px;
	left: 16px;
	z-index: 5;
}

.ccq-pdp__award-seal {
	display: inline-block;
	background: var(--ccc-primary, var(--ccc-primary, #1e2934));
	color: var(--ccc-text-inverse, #fff);
	font: var(--ccc-weight-button, 600) var(--ccc-fs-overline, 11px)/1 var(--ccc-font-body, sans-serif);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: var(--ccc-space-2, 8px) var(--ccc-space-3, 12px);
	border-radius: 20px;
	box-shadow: var(--ccc-shadow-2, 0 2px 8px rgb(11 16 20 / 0.1));
}

.ccq-pdp__main-image {
	position: relative;
	border-radius: var(--ccc-radius-lg, 8px);
	overflow: hidden;
	background: var(--ccc-cream, #f2f1eb);
}

.ccq-pdp__hero-img {
	width: 100%;
	height: auto;
	display: block;
	object-fit: cover;
	aspect-ratio: 1;
}

/* PDP Main Video & Top-Right Video Controls */
.ccq-pdp__video-wrap {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 5;
	background: var(--ccc-ink, #0b1014);
	border-radius: var(--ccc-radius-lg, 8px);
	overflow: hidden;
}

.ccq-pdp__video-wrap.is-hidden {
	display: none !important;
}

.ccq-pdp__hero-video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Video controls: play/pause above mute/unmute in top right corner everywhere */
.ccq-video-ctrls {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 15;
	display: flex;
	flex-direction: column;
	gap: var(--ccc-space-2, 8px);
	pointer-events: auto;
}

.ccq-video-ctrl,
button.ccq-video-ctrl {
	width: 32px !important;
	height: 32px !important;
	min-width: 32px !important;
	min-height: 32px !important;
	max-width: 32px !important;
	max-height: 32px !important;
	border-radius: 50% !important;
	background: rgba(11, 16, 20, 0.7) !important;
	background-color: rgba(11, 16, 20, 0.7) !important;
	backdrop-filter: blur(6px) !important;
	-webkit-backdrop-filter: blur(6px) !important;
	color: var(--ccc-text-inverse, #fff) !important;
	border: 1px solid rgba(255, 255, 255, 0.4) !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	cursor: pointer !important;
	padding: 0 !important;
	margin: 0 !important;
	box-shadow: var(--ccc-shadow-2, 0 2px 8px rgb(11 16 20 / 0.1)) !important;
	transition: background-color 200ms ease, transform 200ms ease !important;
	line-height: 1 !important;
}

.ccq-video-ctrl:hover,
button.ccq-video-ctrl:hover {
	background: rgba(11, 16, 20, 0.9) !important;
	transform: scale(1.08) !important;
}

.ccq-video-ctrl svg {
	display: block;
	pointer-events: none;
	color: var(--ccc-text-inverse, #fff);
	stroke: currentColor;
}

.ccq-pdp__thumb-video-badge {
	position: absolute;
	top: 6px;
	right: 6px;
	background: rgba(0, 0, 0, 0.7);
	color: var(--ccc-text-inverse, #fff);
	width: 22px;
	height: 22px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
}

.ccq-pdp__gallery-item--video {
	position: relative;
	cursor: pointer;
}

.ccq-pdp__gallery-item.is-active {
	outline: 2px solid var(--ccc-primary, var(--ccc-primary, #1e2934));
	outline-offset: 1px;
}

.ccq-pdp__zoom-btn {
	position: absolute;
	bottom: 16px;
	left: 16px;
	width: 38px !important;
	height: 38px !important;
	padding: 0 !important;
	border-radius: 50% !important;
	background: var(--ccc-text-inverse, #fff) !important;
	border: 1px solid var(--ccc-border, var(--ccc-border, #d9d9d9)) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	cursor: pointer !important;
	box-shadow: var(--ccc-shadow-2, 0 2px 8px rgb(11 16 20 / 0.1)) !important;
	color: var(--ccc-ink, var(--ccc-ink, #0b1014)) !important;
	transition: transform 200ms ease, background-color 200ms ease !important;
	z-index: 10;
}

.ccq-pdp__zoom-btn:hover {
	transform: scale(1.08) !important;
	background: var(--ccc-page, #fff) !important;
}

.ccq-pdp__zoom-btn svg {
	width: 18px !important;
	height: 18px !important;
	min-width: 18px !important;
	min-height: 18px !important;
	flex-shrink: 0 !important;
	display: block !important;
	stroke: currentColor !important;
}

/* Lightbox Modal */
.ccq-lightbox[hidden] {
	display: none;
}

.ccq-lightbox {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ccq-lightbox__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(11, 16, 20, 0.88);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	animation: ccq-fade var(--ccc-duration, 250ms) ease;
}

.ccq-lightbox__dialog {
	position: relative;
	z-index: 1;
	width: 100%;
	height: 100%;
	max-width: 1200px;
	max-height: 96vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	padding: 24px 20px;
	box-sizing: border-box;
}

.ccq-lightbox__close {
	position: absolute;
	top: 20px;
	right: 20px;
	width: 44px !important;
	height: 44px !important;
	border-radius: 50% !important;
	background: rgba(255, 255, 255, 0.15) !important;
	border: 0 !important;
	color: var(--ccc-text-inverse, #fff) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	cursor: pointer !important;
	z-index: 10;
	transition: background-color 200ms ease, transform 200ms ease;
	padding: 0 !important;
}

.ccq-lightbox__close:hover {
	background: rgba(255, 255, 255, 0.3) !important;
	transform: scale(1.05);
}

.ccq-lightbox__close svg {
	width: 22px !important;
	height: 22px !important;
	stroke: var(--ccc-text-inverse, #fff) !important;
	display: block !important;
}

.ccq-lightbox__stage {
	position: relative;
	flex: 1 1 0;
	min-height: 0;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ccq-lightbox__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 44px !important;
	height: 44px !important;
	border-radius: 50% !important;
	background: rgba(255, 255, 255, 0.9) !important;
	border: 0 !important;
	color: var(--ccc-ink, var(--ccc-ink, #0b1014)) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	cursor: pointer !important;
	z-index: 5;
	box-shadow: var(--ccc-shadow-2, 0 2px 8px rgb(11 16 20 / 0.1)) !important;
	padding: 0 !important;
	transition: transform 200ms ease, background-color 200ms ease;
}

.ccq-lightbox__arrow:hover {
	background: var(--ccc-text-inverse, #fff) !important;
	transform: translateY(-50%) scale(1.08);
}

.ccq-lightbox__arrow--prev {
	left: 12px;
}

.ccq-lightbox__arrow--next {
	right: 12px;
}

.ccq-lightbox__arrow svg {
	width: 24px !important;
	height: 24px !important;
	stroke: var(--ccc-ink, var(--ccc-ink, #0b1014)) !important;
	display: block !important;
}

.ccq-lightbox__image-wrap {
	max-width: 88%;
	max-height: 72vh;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	cursor: zoom-in;
}

.ccq-lightbox__image-wrap.is-zoomed {
	overflow: auto;
	cursor: zoom-out;
}

.ccq-lightbox__image {
	max-width: 100%;
	max-height: 72vh;
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: var(--ccc-radius-lg, 8px);
	user-select: none;
	transition: transform 250ms ease;
}

.ccq-lightbox__image-wrap.is-zoomed .ccq-lightbox__image {
	max-width: none;
	max-height: none;
	transform: scale(1.8);
	transform-origin: center center;
}

.ccq-lightbox__footer {
	margin-top: var(--ccc-space-3, 12px);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--ccc-space-3, 12px);
}

.ccq-lightbox__counter {
	color: var(--ccc-text-inverse, #fff);
	font: var(--ccc-weight-button, 600) var(--ccc-fs-label, 13px)/1 var(--ccc-font-body, sans-serif);
	letter-spacing: 0.05em;
	opacity: 0.85;
}

.ccq-lightbox__thumbs {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	max-width: 100%;
	padding: 4px 8px;
}

.ccq-lightbox__thumb {
	width: 48px;
	height: 48px;
	border-radius: var(--ccc-radius, 4px);
	border: 2px solid transparent;
	overflow: hidden;
	cursor: pointer;
	opacity: 0.6;
	transition: opacity 150ms ease, border-color 150ms ease;
	flex-shrink: 0;
	background: none;
	padding: 0;
}

.ccq-lightbox__thumb.is-active,
.ccq-lightbox__thumb:hover {
	opacity: 1;
	border-color: var(--ccc-text-inverse, #fff);
}

.ccq-lightbox__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

body.ccq-lightbox-open {
	overflow: hidden;
}

.ccq-pdp__gallery-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
	margin-top: 12px;
}

.ccq-pdp__gallery-item {
	border-radius: var(--ccc-radius, 4px);
	overflow: hidden;
	aspect-ratio: 1;
	background: var(--ccc-cream, #f2f1eb);
	cursor: pointer;
}

.ccq-pdp__gallery-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: opacity 200ms ease;
}

.ccq-pdp__gallery-item img:hover {
	opacity: 0.9;
}

/* Right Column: Sticky Purchase Card */
@media (min-width: 1024px) {
	.ccq-pdp__purchase-col {
		position: sticky;
		top: calc(var(--ccq-header-h, 72px) + 16px);
		align-self: start;
	}
}

.ccq-pdp__card {
	background: var(--ccc-text-inverse, #fff);
	border-radius: var(--ccc-radius-lg, 8px);
	border: 1px solid var(--ccc-border, var(--ccc-border, #d9d9d9));
	box-shadow: var(--ccc-shadow-2, 0 2px 8px rgb(11 16 20 / 0.1));
	padding: 32px 32px 36px;
}

@media (max-width: 767px) {
	.ccq-pdp__card {
		padding: 20px 16px;
		box-shadow: none;
		border: 0;
	}
}

/* Rating Jump Link */
.ccq-pdp__rating-jump {
	margin-bottom: 8px;
}

.ccq-pdp__rating-link {
	display: inline-flex;
	align-items: center;
	gap: var(--ccc-space-2, 8px);
	text-decoration: none;
	color: var(--ccc-ink, var(--ccc-ink, #0b1014));
}

.ccq-pdp__stars {
	color: var(--ccc-rewards, #c99324);
	letter-spacing: 2px;
	font-size: var(--ccc-fs-label, 13px);
	line-height: 1;
}

.ccq-pdp__reviews-count {
	font-size: var(--ccc-fs-caption, 12px);
	color: var(--ccc-text, #515151);
	text-decoration: underline;
}

/* Title & Subtitle */
.ccq-pdp__title {
	font: 400 clamp(24px, 2.3vw, 34px)/1.15 var(--ccc-font-heading, "Crimson Text", Georgia, serif);
	margin: 0 0 8px;
	color: var(--ccc-ink, var(--ccc-ink, #0b1014));
}

.ccq-pdp__subtitle {
	font-size: var(--ccc-fs-label, 13px);
	line-height: 1.4;
	color: var(--ccc-text, #515151);
	margin: 0 0 16px;
}

/* Price & Installments */
.ccq-pdp__price-wrap {
	margin-bottom: 20px;
}

.ccq-pdp__price {
	font-size: var(--ccc-fs-h3, 24px);
	font-weight: var(--ccc-weight-button, 600);
	color: var(--ccc-ink, var(--ccc-ink, #0b1014));
	line-height: 1.2;
}

.ccq-pdp__price del {
	font-weight: 400;
	font-size: var(--ccc-fs-h5, 18px);
	color: var(--ccc-text-muted, #707070);
	margin-right: var(--ccc-space-2, 8px);
}

.ccq-pdp__price ins {
	text-decoration: none;
	color: var(--ccc-sale, #ac2c21);
}

.ccq-pdp__installments {
	font-size: var(--ccc-fs-caption, 12px);
	color: var(--ccc-text, #515151);
	margin-top: 4px;
	display: flex;
	align-items: center;
	gap: 4px;
	flex-wrap: wrap;
}

.ccq-pdp__installment-amount {
	font-weight: 600;
	color: var(--ccc-ink, var(--ccc-ink, #0b1014));
	white-space: nowrap;
}

.ccq-pdp__afterpay-badge {
	background: var(--ccc-success, #1a633a);
	color: var(--ccc-ink, #0b1014);
	font-weight: var(--ccc-weight-button, 600);
	padding: var(--ccc-space-1, 4px) var(--ccc-space-2, 8px);
	border-radius: 4px;
	font-size: var(--ccc-fs-overline, 10px);
	text-transform: uppercase;
	margin-left: var(--ccc-space-1, 4px);
}

/* Size Selector Cards */
.ccq-pdp__sizes {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	margin-bottom: 20px;
}

.ccq-size-card {
	position: relative;
	border: 1px solid var(--ccc-border, var(--ccc-border, #d9d9d9));
	border-radius: var(--ccc-radius, 4px);
	padding: 12px 6px;
	text-align: center;
	cursor: pointer;
	transition: all 200ms ease;
	background: var(--ccc-text-inverse, #fff);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	min-width: 0;
}

.ccq-size-card:hover {
	border-color: var(--ccc-primary, var(--ccc-primary, #1e2934));
}

.ccq-size-card.is-selected {
	border: 2px solid var(--ccc-primary, var(--ccc-primary, #1e2934));
	background: var(--ccc-page, #fff);
	padding: var(--ccc-space-2, 8px) var(--ccc-space-1, 4px);
}

.ccq-size-card__check {
	position: absolute;
	top: 5px;
	left: 5px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--ccc-primary, var(--ccc-primary, #1e2934));
	color: var(--ccc-text-inverse, #fff);
	display: none;
	align-items: center;
	justify-content: center;
}

.ccq-size-card.is-selected .ccq-size-card__check {
	display: flex;
}

.ccq-size-card__badge {
	position: absolute;
	top: -9px;
	right: 4px;
	background: var(--ccc-primary, var(--ccc-primary, #1e2934));
	color: var(--ccc-text-inverse, #fff);
	font-size: var(--ccc-fs-overline, 9px);
	font-weight: var(--ccc-weight-button, 600);
	text-transform: uppercase;
	padding: var(--ccc-space-1, 4px) var(--ccc-space-2, 8px);
	border-radius: 10px;
}

.ccq-size-card__thumb img {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	object-fit: cover;
	display: block;
}

.ccq-size-card__info {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--ccc-space-1, 4px);
	width: 100%;
}

.ccq-size-card__title {
	font-size: var(--ccc-fs-label, 13px);
	font-weight: var(--ccc-weight-button, 600);
	color: var(--ccc-ink, var(--ccc-ink, #0b1014));
	line-height: 1.2;
}

.ccq-size-card__serves {
	font-size: var(--ccc-fs-overline, 10px);
	color: var(--ccc-text-muted, #707070);
	line-height: 1.2;
}

.ccq-size-card__price {
	font-size: var(--ccc-fs-caption, 12px);
	font-weight: 600;
	color: var(--ccc-ink, var(--ccc-ink, #0b1014));
	margin-top: var(--ccc-space-1, 4px);
}

/* Hide size variation row when interactive size cards are present, keeping any non-size attributes functional */
.ccq-pdp .variations tr:has(.ccq-hidden-size-select),
.ccq-pdp .variations tr:has(select[name="attribute_pa_size"]),
.ccq-pdp .variations tr:has(select[name^="attribute_size"]) {
	display: none !important;
}

.ccq-pdp .single_variation_wrap .woocommerce-variation-price {
	display: none !important;
}

/* Align WPLoyalty message with tile margin */
.ccq-pdp .wlr-product-message {
	padding-left: 0 !important;
	padding-right: 0 !important;
	margin-left: 0 !important;
}

/* Delivery field labels zero-margin */
.ccq-pdp .ccq-delivery__label,
.ccq-delivery__label {
	margin: 0 !important;
	margin-bottom: 0 !important;
	display: block;
}

/* Quantity Container Stretch to Tile Width */
.ccq-pdp form.cart .quantity {
	display: flex !important;
	width: 100% !important;
	min-height: 48px;
	margin-bottom: 12px;
	border: 1px solid var(--ccc-border, var(--ccc-border, #d9d9d9));
	border-radius: var(--ccc-radius, 4px);
	padding: 0 48px;
	box-sizing: border-box;
	position: relative;
	align-items: center;
	justify-content: center;
}

.ccq-pdp form.cart .quantity .minus,
.ccq-pdp form.cart .quantity .plus {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 48px;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--ccc-fs-body-lg, 16px);
	cursor: pointer;
}

.ccq-pdp form.cart .quantity .minus {
	left: 0;
}

.ccq-pdp form.cart .quantity .plus {
	right: 0;
	left: auto;
}

.ccq-pdp form.cart .quantity .qty {
	width: 100% !important;
	height: 48px !important;
	text-align: center;
	font-size: var(--ccc-fs-body, 15px);
	font-weight: 600;
	border: none !important;
	background: transparent !important;
	box-shadow: none !important;
	padding: 0;
}

/*
 * The primary call to action on the product page, and the large size of the
 * canonical button.
 *
 * This rule used to spell out 13px, weight 700 and 0.1em of tracking, which beat
 * harmony.css section 1 with !important, while the checkout's place order
 * rendered at 15px and 0.9px from CheckoutWC's own settings. The button that
 * starts a purchase and the button that finishes it therefore disagreed on font
 * size, tracking and height, and !important is what decided which one won.
 *
 * Both now read the same tokens. See the rule for #place_order in harmony.css,
 * which is the same scale on the other side of the funnel.
 */
.ccq-pdp form.cart .single_add_to_cart_button {
	width: 100%;
	/* !important because harmony.css section 1 targets this selector with higher
	   specificity and loads last, so without it the button stays 40px tall. */
	min-height: var(--ccc-btn-h-lg, 52px) !important;
	padding: 0 var(--ccc-btn-pad-x-lg, 32px) !important;
	background: var(--ccc-primary, var(--ccc-primary, #1e2934)) !important;
	color: var(--ccc-text-inverse, var(--ccc-text-inverse, #fff)) !important;
	font: var(--ccc-weight-button, 600) var(--ccc-btn-fs-lg, 14px) / 1 var(--ccc-font-body, sans-serif) !important;
	letter-spacing: var(--ccc-caps-spacing, 0.14em) !important;
	text-transform: uppercase !important;
	border: 0 !important;
	border-radius: var(--ccc-radius, 4px) !important;
	margin-top: var(--ccc-space-3, 12px) !important;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ccq-pdp form.cart .single_add_to_cart_button:hover {
	background: transparent !important;
	color: var(--ccc-primary, var(--ccc-primary, #1e2934)) !important;
	box-shadow: inset 0 0 0 1px var(--ccc-primary, var(--ccc-primary, #1e2934)) !important;
}

.ccq-pdp form.cart .single_add_to_cart_button:focus-visible {
	outline: none !important;
	box-shadow: var(--ccc-focus, 0 0 0 2px var(--ccc-primary)) !important;
}

/* Buy Now Button Stretch to Tile Width */
/*
 * The secondary call to action, next to Add to Bag and on the same scale.
 *
 * The two greys it used (#e9ecef and #dde2e5 on hover) were off-token, which
 * made this the third near-white on one form. It now reads the cream, and the
 * large button scale, so it looks deliberate beside the primary action instead
 * of like a leftover.
 */
.ccq-pdp form.cart .buy_now_button,
.ccq-pdp form.cart #buynow {
	width: 100% !important;
	min-height: var(--ccc-btn-h-lg, 52px) !important;
	background: var(--ccc-cream, #f2f1eb) !important;
	color: var(--ccc-ink, var(--ccc-ink, #0b1014)) !important;
	font: var(--ccc-weight-button, 600) var(--ccc-btn-fs-lg, 14px) / 1 var(--ccc-font-body, sans-serif) !important;
	letter-spacing: var(--ccc-caps-spacing, 0.14em) !important;
	text-transform: uppercase !important;
	border: 1px solid var(--ccc-border, var(--ccc-border, #d9d9d9)) !important;
	border-radius: var(--ccc-radius, 4px) !important;
	margin-top: var(--ccc-space-3, 12px) !important;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color 200ms ease;
}

.ccq-pdp form.cart .buy_now_button:hover,
.ccq-pdp form.cart #buynow:hover {
	background: var(--ccc-border, var(--ccc-border, #d9d9d9)) !important;
}

/* Informational Accordions */
.ccq-pdp__accordions {
	margin-top: 24px;
	border-top: 1px solid var(--ccc-border, var(--ccc-border, #d9d9d9));
}

.ccq-pdp__accordions .ccq-accordion {
	border-bottom: 1px solid var(--ccc-border, var(--ccc-border, #d9d9d9));
	padding: var(--ccc-space-3, 12px) 0;
}

.ccq-pdp__accordions .ccq-accordion__summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	cursor: pointer;
	list-style: none;
	font-weight: 600;
	font-size: var(--ccc-fs-body-sm, 14px);
	color: var(--ccc-ink, var(--ccc-ink, #0b1014));
}

.ccq-pdp__accordions .ccq-accordion__summary::-webkit-details-marker {
	display: none;
}

.ccq-pdp__accordions .ccq-accordion__content {
	padding-top: var(--ccc-space-3, 12px);
	font-size: var(--ccc-fs-label, 13px);
	line-height: 1.6;
	color: var(--ccc-text, #515151);
}

/* Below The Fold Sections */
.ccq-pdp__below {
	margin-top: 60px;
}

.ccq-pdp__section-title {
	font: 400 clamp(24px, 2.2vw, 32px)/1.2 var(--ccc-font-heading, "Crimson Text", Georgia, serif);
	text-align: center;
	margin: 0 0 24px;
	color: var(--ccc-ink, var(--ccc-ink, #0b1014));
}

/* How Your Package Will Arrive */
.ccq-pdp__arrives {
	padding: 60px 0;
	background: var(--ccc-cream, #f2f1eb);
	border-top: 1px solid var(--ccc-border, var(--ccc-border, #d9d9d9));
	border-bottom: 1px solid var(--ccc-border, var(--ccc-border, #d9d9d9));
}

.ccq-pdp__arrives-tabs {
	display: flex;
	justify-content: center;
	gap: 16px;
	margin-bottom: 32px;
}

.ccq-pdp__tab {
	background: transparent;
	border: 0;
	border-bottom: 2px solid transparent;
	padding: 8px 16px;
	font-size: var(--ccc-fs-body-sm, 14px);
	font-weight: 600;
	cursor: pointer;
	color: var(--ccc-text-muted, #707070);
	transition: all 200ms ease;
}

.ccq-pdp__tab.is-active {
	color: var(--ccc-ink, var(--ccc-ink, #0b1014));
	border-bottom-color: var(--ccc-primary, var(--ccc-primary, #1e2934));
}

.ccq-pdp__arrives-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
}

.ccq-pdp__arrives-grid[hidden],
.ccq-pdp [data-tab-content][hidden] {
	display: none !important;
}

@media (max-width: 767px) {
	.ccq-pdp__arrives-grid {
		grid-template-columns: 1fr;
		gap: 24px;
	}
}

.ccq-arrive-card {
	text-align: center;
}

.ccq-arrive-card__media {
	position: relative;
	border-radius: var(--ccc-radius-lg, 8px);
	overflow: hidden;
	margin-bottom: 16px;
	aspect-ratio: 1;
	background: var(--ccc-border, var(--ccc-border, #d9d9d9));
}

.ccq-arrive-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ccq-arrive-card__num {
	position: absolute;
	bottom: 12px;
	left: 50%;
	transform: translateX(-50%);
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--ccc-text-inverse, #fff);
	color: var(--ccc-ink, #0b1014);
	font-weight: var(--ccc-weight-button, 600);
	font-size: var(--ccc-fs-label, 13px);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: var(--ccc-shadow-2, 0 2px 8px rgb(11 16 20 / 0.1));
}

.ccq-arrive-card__text {
	font-size: var(--ccc-fs-label, 13px);
	line-height: 1.5;
	color: var(--ccc-ink, #0b1014);
	margin: 0 auto;
	max-width: 280px;
}

/* Reviews Section */
.ccq-pdp__reviews {
	padding: 60px 0;
}

.ccq-pdp__reviews-header {
	text-align: center;
	margin-bottom: 32px;
}

.ccq-pdp__reviews-title {
	font: 400 clamp(24px, 2.2vw, 32px)/1.2 var(--ccc-font-heading, "Crimson Text", Georgia, serif);
	margin: 0 0 var(--ccc-space-3, 12px);
	color: var(--ccc-ink, var(--ccc-ink, #0b1014));
}

.ccq-pdp__reviews-stars {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-bottom: 16px;
}

.ccq-pdp__reviews-tally {
	font-size: var(--ccc-fs-label, 13px);
	color: var(--ccc-text-muted, #707070);
}

.ccq-pdp__write-btn {
	padding: 12px 28px;
	font-size: var(--ccc-fs-caption, 12px);
	letter-spacing: 0.1em;
}

.ccq-pdp__review-form-wrapper {
	max-width: 640px;
	margin: 32px auto 40px;
	padding: 28px;
	background: var(--ccc-text-inverse, #fff);
	border: 1px solid var(--ccc-border, var(--ccc-border, #d9d9d9));
	border-radius: 4px;
}

.ccq-pdp__review-form-wrapper .comment-reply-title {
	font-family: var(--ccc-font-heading, "Crimson Text", Georgia, serif);
	font-size: var(--ccc-fs-h4, 20px);
	font-weight: var(--ccc-weight-heading, 400);
	margin-bottom: 20px;
	display: block;
	color: var(--ccc-ink, #0b1014);
}

.ccq-pdp__review-form-wrapper p {
	margin-bottom: 16px;
}

.ccq-pdp__review-form-wrapper label {
	display: block;
	font-size: var(--ccc-fs-label, 13px);
	font-weight: 600;
	margin-bottom: var(--ccc-space-2, 8px);
	color: var(--ccc-ink, #0b1014);
}

.ccq-pdp__review-form-wrapper input[type="text"],
.ccq-pdp__review-form-wrapper input[type="email"],
.ccq-pdp__review-form-wrapper select,
.ccq-pdp__review-form-wrapper textarea {
	width: 100%;
	padding: var(--ccc-space-3, 12px);
	border: 1px solid var(--ccc-border, var(--ccc-border, #d9d9d9));
	border-radius: 2px;
	font-size: var(--ccc-fs-body-sm, 14px);
	font-family: inherit;
	box-sizing: border-box;
}

.ccq-pdp__review-form-wrapper input[type="submit"] {
	background: var(--ccc-ink, #0b1014);
	color: var(--ccc-text-inverse, #fff);
	border: none;
	padding: 12px 28px;
	font-size: var(--ccc-fs-caption, 12px);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	cursor: pointer;
	border-radius: 2px;
	transition: background-color 0.2s ease;
}

.ccq-pdp__review-form-wrapper input[type="submit"]:hover {
	background: var(--ccc-text-muted, #707070);
}

.ccq-pdp__no-reviews {
	text-align: center;
	padding: 32px 16px;
	color: var(--ccc-text-muted, #707070);
	font-size: var(--ccc-fs-body, 15px);
}

.ccq-pdp__reviews-filter-bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 24px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--ccc-border, var(--ccc-border, #d9d9d9));
	flex-wrap: wrap;
	gap: 12px;
}

.ccq-pdp__filter-chips {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.ccq-chip {
	padding: var(--ccc-space-2, 8px) var(--ccc-space-3, 12px);
	border-radius: 20px;
	border: 1px solid var(--ccc-border, #d9d9d9);
	font-size: var(--ccc-fs-caption, 12px);
	cursor: pointer;
	color: var(--ccc-ink, #0b1014);
	background: var(--ccc-text-inverse, #fff);
	transition: all 150ms ease;
}

.ccq-chip.is-active,
.ccq-chip:hover {
	background: var(--ccc-primary, var(--ccc-primary, #1e2934));
	color: var(--ccc-text-inverse, #fff);
	border-color: var(--ccc-primary, var(--ccc-primary, #1e2934));
}

.ccq-pdp__sort-chip {
	font-size: var(--ccc-fs-caption, 12px);
	color: var(--ccc-text-muted, #707070);
}

.ccq-pdp__reviews-list {
	display: grid;
	gap: 16px;
}

.ccq-review-card {
	background: var(--ccc-text-inverse, #fff);
	border: 1px solid var(--ccc-border, var(--ccc-border, #d9d9d9));
	border-radius: var(--ccc-radius-lg, 8px);
	padding: 24px;
}

.ccq-review-card__header {
	display: flex;
	gap: 8px;
	align-items: center;
	margin-bottom: var(--ccc-space-2, 8px);
}

.ccq-review-card__author {
	font-weight: var(--ccc-weight-button, 600);
	font-size: var(--ccc-fs-body-sm, 14px);
	color: var(--ccc-ink, var(--ccc-ink, #0b1014));
}

.ccq-review-card__verified {
	font-size: var(--ccc-fs-overline, 11px);
	color: var(--ccc-text-muted, #707070);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.ccq-review-card__stars {
	color: var(--ccc-rewards, #c99324);
	font-size: var(--ccc-fs-label, 13px);
	margin-bottom: 8px;
	letter-spacing: 2px;
}

.ccq-review-card__title {
	font-size: var(--ccc-fs-body-lg, 16px);
	font-weight: var(--ccc-weight-button, 600);
	margin: 0 0 8px;
	color: var(--ccc-ink, var(--ccc-ink, #0b1014));
}

.ccq-review-card__body {
	font-size: var(--ccc-fs-body-sm, 14px);
	line-height: 1.6;
	color: var(--ccc-ink, #0b1014);
	margin: 0 0 12px;
}

.ccq-review-card__footer {
	display: flex;
	justify-content: space-between;
	font-size: var(--ccc-fs-caption, 12px);
	color: var(--ccc-text-muted, #707070);
	flex-wrap: wrap;
	gap: 8px;
}

/* Recommendations */
.ccq-pdp__recs {
	padding: 60px 0;
	background: var(--ccc-cream, #f2f1eb);
}

.ccq-pdp__recs-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	margin-bottom: 24px;
}

.ccq-pdp__recs-header .ccq-pdp__section-title {
	text-align: left;
	margin: 0;
}

.ccq-pdp__shop-all-link {
	font-size: var(--ccc-fs-caption, 12px);
	font-weight: var(--ccc-weight-button, 600);
	letter-spacing: 0.1em;
	color: var(--ccc-primary, var(--ccc-primary, #1e2934));
	text-decoration: underline;
}

.ccq-pdp__recs-grid {
	display: grid;
	gap: 28px 16px;
	grid-template-columns: repeat(var(--ccq-cols-m, 2), minmax(0, 1fr));
}

@media (min-width: 768px) {
	.ccq-pdp__recs-grid {
		grid-template-columns: repeat(var(--ccq-cols-t, 3), minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.ccq-pdp__recs-grid {
		grid-template-columns: repeat(var(--ccq-cols, 4), minmax(0, 1fr));
		gap: 40px 20px;
	}
}

/* Story Banner */
.ccq-pdp__story {
	margin: 40px 0 0;
	background: var(--ccc-text-inverse, #fff);
	border-top: 1px solid var(--ccc-border, var(--ccc-border, #d9d9d9));
}

.ccq-pdp__story-inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	max-width: 1280px;
	margin: 0 auto;
}

@media (max-width: 767px) {
	.ccq-pdp__story-inner {
		grid-template-columns: 1fr;
	}
}

.ccq-pdp__story-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	max-height: 480px;
	display: block;
}

.ccq-pdp__story-content {
	padding: 48px;
	position: relative;
}

@media (max-width: 767px) {
	.ccq-pdp__story-content {
		padding: 32px 16px;
	}
}

.ccq-pdp__story-title {
	font: 400 clamp(24px, 2.3vw, 34px)/1.2 var(--ccc-font-heading, "Crimson Text", Georgia, serif);
	margin: 0 0 16px;
	color: var(--ccc-ink, var(--ccc-ink, #0b1014));
}

.ccq-pdp__story-text {
	font-size: var(--ccc-fs-body-sm, 14px);
	line-height: 1.6;
	color: var(--ccc-text, #515151);
	margin: 0 0 24px;
	max-width: 440px;
}

.ccq-pdp__story-seal {
	position: absolute;
	bottom: 32px;
	right: 48px;
	color: var(--ccc-primary, var(--ccc-primary, #1e2934));
	opacity: 0.85;
}

@media (max-width: 767px) {
	.ccq-pdp__story-seal {
		display: none;
	}
}

/* ==========================================================================
   Bundle Trio & Age Verification Gate (UrbanStems 1:1 Parity)
   ========================================================================== */

/* Bundle Trio Container */
.ccq-bundle-trio {
	margin: 0 0 20px;
	padding: var(--ccc-space-4, 16px);
	background: var(--ccc-cream, #f2f1eb);
	border: 1px solid var(--ccc-border, var(--ccc-border, #d9d9d9));
	border-radius: var(--ccc-radius-lg, 8px);
}

.ccq-bundle-trio__heading {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--ccc-space-3, 12px);
	padding-bottom: var(--ccc-space-3, 12px);
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.ccq-bundle-trio__title {
	font: var(--ccc-weight-button, 600) var(--ccc-fs-body, 15px)/1.2 var(--ccc-font-heading, "Crimson Text", Georgia, serif);
	color: var(--ccc-ink, var(--ccc-ink, #0b1014));
}

.ccq-bundle-trio__count {
	font: var(--ccc-weight-button, 600) var(--ccc-fs-overline, 11px)/1 var(--ccc-font-body, sans-serif);
	color: var(--ccc-text-muted, #707070);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.ccq-bundle-trio__list {
	display: flex;
	flex-direction: column;
	gap: var(--ccc-space-3, 12px);
}

.ccq-bundle-trio__item {
	display: flex;
	align-items: center;
	gap: var(--ccc-space-3, 12px);
	background: var(--ccc-text-inverse, #fff);
	border: 1px solid rgba(0, 0, 0, 0.06);
	border-radius: var(--ccc-radius, 4px);
	padding: var(--ccc-space-3, 12px);
	transition: border-color 150ms ease, box-shadow 150ms ease;
}

.ccq-bundle-trio__item:hover {
	border-color: rgba(30, 41, 52, 0.25);
	box-shadow: var(--ccc-shadow-1, 0 1px 2px rgb(11 16 20 / 0.06));
}

.ccq-bundle-trio__thumb-wrap {
	position: relative;
	width: 58px;
	height: 58px;
	flex-shrink: 0;
	border-radius: 4px;
	overflow: hidden;
	background: var(--ccc-page, #fff);
}

.ccq-bundle-trio__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ccq-bundle-trio__qty {
	position: absolute;
	top: 3px;
	left: 3px;
	background: var(--ccc-primary, var(--ccc-primary, #1e2934));
	color: var(--ccc-text-inverse, #fff);
	font: var(--ccc-weight-button, 600) var(--ccc-fs-overline, 10px)/1 var(--ccc-font-body, sans-serif);
	padding: var(--ccc-space-1, 4px);
	border-radius: 3px;
	pointer-events: none;
}

.ccq-bundle-trio__content {
	flex: 1;
	min-width: 0;
}

.ccq-bundle-trio__name {
	font: var(--ccc-weight-button, 600) var(--ccc-fs-label, 13px)/1.3 var(--ccc-font-body, sans-serif);
	color: var(--ccc-ink, var(--ccc-ink, #0b1014));
	margin-bottom: var(--ccc-space-1, 4px);
}

.ccq-bundle-trio__desc {
	font-size: var(--ccc-fs-caption, 12px);
	line-height: 1.35;
	color: var(--ccc-text-muted, #707070);
	margin-bottom: 4px;
}

.ccq-bundle-trio__badge {
	display: inline-flex;
	align-items: center;
	gap: var(--ccc-space-2, 8px);
	background: var(--ccc-blush, #fff2ed);
	color: var(--ccc-danger, #b12535);
	border: 1px solid var(--ccc-blush, #fff2ed);
	padding: var(--ccc-space-1, 4px) var(--ccc-space-2, 8px);
	border-radius: 4px;
	font: var(--ccc-weight-button, 600) var(--ccc-fs-overline, 11px)/1.2 var(--ccc-font-body, sans-serif);
}

.ccq-bundle-trio__badge svg {
	flex-shrink: 0;
}

/* 21+ Age Verification Gate */
.ccq-age-gate {
	margin: 16px 0;
	padding: var(--ccc-space-3, 12px) var(--ccc-space-4, 16px);
	background: var(--ccc-cream, #f2f1eb);
	border: 1.5px solid var(--ccc-cream, #f2f1eb);
	border-radius: var(--ccc-radius, 4px);
	transition: border-color 200ms ease, box-shadow 200ms ease;
}

.ccq-age-gate.has-error {
	border-color: var(--ccc-danger, #b12535);
	background: var(--ccc-blush, #fff2ed);
	box-shadow: 0 0 0 3px rgba(240, 68, 56, 0.15);
	animation: ccq-shake 300ms ease;
}

.ccq-age-gate__label {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	cursor: pointer;
	margin: 0;
	user-select: none;
}

.ccq-age-gate__checkbox {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
	pointer-events: none;
}

.ccq-age-gate__box {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	border: 1.5px solid var(--ccc-border, var(--ccc-border, #d9d9d9));
	border-radius: 4px;
	background: var(--ccc-text-inverse, #fff);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: var(--ccc-space-1, 4px);
	transition: all 150ms ease;
	color: var(--ccc-text-inverse, #fff);
}

.ccq-age-gate__box svg {
	opacity: 0;
	transform: scale(0.5);
	transition: all 150ms ease;
}

.ccq-age-gate__checkbox:checked + .ccq-age-gate__box {
	background: var(--ccc-primary, var(--ccc-primary, #1e2934));
	border-color: var(--ccc-primary, var(--ccc-primary, #1e2934));
}

.ccq-age-gate__checkbox:checked + .ccq-age-gate__box svg {
	opacity: 1;
	transform: scale(1);
}

.ccq-age-gate__checkbox:focus-visible + .ccq-age-gate__box {
	outline: none;
	box-shadow: 0 0 0 3px rgba(30, 41, 52, 0.2);
}

.ccq-age-gate__text {
	font: var(--ccc-weight-button, 600) var(--ccc-fs-caption, 12.5px)/1.45 var(--ccc-font-body, sans-serif);
	color: var(--ccc-ink, #0b1014);
}

.ccq-age-gate__strong {
	color: var(--ccc-ink, var(--ccc-ink, #0b1014));
	font-weight: var(--ccc-weight-button, 600);
}

.ccq-age-gate__error {
	margin-top: 8px;
	padding-left: 32px;
	font: var(--ccc-weight-button, 600) var(--ccc-fs-caption, 12px)/1.3 var(--ccc-font-body, sans-serif);
	color: var(--ccc-danger, #b12535);
}

/* Hide duplicate WPC raw table when custom bundle trio is present */
.ccq-pdp .woosb-wrap.woosb-bundled {
	display: none !important;
}

/* Sticky Add to Bag Bar - Zero Gap under Main Nav Bar */
@media (min-width: 1024px) {
	.ccq-sticky {
		top: var(--ccq-header-actual-h, 65px) !important;
		bottom: auto !important;
		border-top: 0 !important;
		border-bottom: 1px solid var(--ccc-border, var(--ccc-border, #d9d9d9)) !important;
		box-shadow: var(--ccc-shadow-2, 0 2px 8px rgb(11 16 20 / 0.1)) !important;
		transition: top var(--ccc-duration, 250ms) var(--ccc-ease, ease-in-out) !important;
	}
	@media (max-width: 1199px) {
		.ccq-sticky {
			top: var(--ccq-header-actual-h, 57px) !important;
		}
	}
	.admin-bar .ccq-sticky {
		top: calc(32px + var(--ccq-header-actual-h, 65px)) !important;
	}
	@media (max-width: 1199px) {
		.admin-bar .ccq-sticky {
			top: calc(32px + var(--ccq-header-actual-h, 57px)) !important;
		}
	}
	@media (max-width: 782px) {
		.admin-bar .ccq-sticky {
			top: calc(46px + var(--ccq-header-actual-h, 57px)) !important;
		}
	}
	html[data-scroll-direction="down"] .ccq-sticky {
		top: 0 !important;
	}
	.admin-bar html[data-scroll-direction="down"] .ccq-sticky {
		top: 32px !important;
	}
	@media (max-width: 782px) {
		.admin-bar html[data-scroll-direction="down"] .ccq-sticky {
			top: 46px !important;
		}
	}
}