/* ==========================================================================
   CrazySneak PDP — Single Product template.
   Mobile-first (390 canvas) -> desktop media queries at >= 768px (1280 canvas).
   Reuses info-header + info-footer; mirrors csn-info-page chrome reset.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Chrome reset for body.csn-product-page (mirrors info-page reset)
   -------------------------------------------------------------------------- */
body.csn-product-page #masthead,
body.csn-product-page #colophon,
body.csn-product-page #ast-scroll-top,
body.csn-product-page .ast-mobile-header-wrap,
body.csn-product-page .ast-flyout-menu,
body.csn-product-page .ast-breadcrumbs-wrapper,
body.csn-product-page .ast-secondary-header,
body.csn-product-page .ast-author-details,
body.csn-product-page .woocommerce-breadcrumb { display: none !important; }

body.csn-product-page #content,
body.csn-product-page #primary,
body.csn-product-page .site-content,
body.csn-product-page .ast-container,
body.csn-product-page .entry-content,
body.csn-product-page .site-main {
	display: block !important;
	padding: 0 !important;
	margin: 0 !important;
	max-width: none !important;
	width: 100%;
	background: var(--bg);
}
body.csn-product-page { background: var(--bg); color: var(--fg); font-family: var(--cs-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body.csn-product-page * { box-sizing: border-box; }
body.csn-product-page button { font-family: inherit; }
body.csn-product-page a { -webkit-tap-highlight-color: transparent; }

/* Astra button/link-hover blue lock */
body.csn-product-page .csn-pdp-pill:hover,
body.csn-product-page .csn-pdp-pill:focus,
body.csn-product-page .csn-pdp-pill.is-selected,
body.csn-product-page .csn-pdp-cta:hover,
body.csn-product-page .csn-pdp-cta:focus,
body.csn-product-page .csn-pdp-pers__font:hover,
body.csn-product-page .csn-pdp-pers__font.is-active,
body.csn-product-page .csn-pdp-versions__card:hover,
body.csn-product-page .csn-pdp-versions__card.is-selected,
body.csn-product-page .csn-pdp-info__btn:hover,
body.csn-product-page .csn-pdp-related__card:hover,
body.csn-product-page .csn-pdp-related__card:hover * { color: inherit !important; }
body.csn-product-page .csn-pdp-crumbs__link:hover,
body.csn-product-page .csn-pdp-buy__rating-link:hover { color: var(--fg) !important; }
body.csn-product-page a.csn-pdp-related__card:hover { text-decoration: none !important; }

/* --------------------------------------------------------------------------
   2. Shell, section base, eyebrow, titles
   -------------------------------------------------------------------------- */
.csn-pdp { display: block; background: var(--bg); }
.csn-pdp-shell { background: var(--bg); }

.csn-pdp-section { padding: 40px 20px 44px; background: var(--bg); }
.csn-pdp-section--bleed { padding-left: 0; padding-right: 0; }
.csn-pdp-section__head { text-align: center; max-width: 640px; margin: 0 auto; }
.csn-pdp-section__head--left { text-align: left; }
.csn-pdp-section__head--row { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; max-width: none; text-align: left; }
.csn-pdp-section__head--padded { padding: 0 20px; }
.csn-pdp-section__title {
	font-family: var(--cs-font-serif);
	font-size: 28px; font-weight: 500;
	line-height: 1.15; letter-spacing: -0.01em;
	color: var(--fg); margin: 6px 0 0;
}
.csn-pdp-section__title--sm { font-size: 22px; line-height: 1.2; }
.csn-pdp-section__lede { font-family: var(--cs-font-sans); font-size: 13px; color: var(--muted); line-height: 1.5; margin: 12px auto 0; max-width: 360px; text-align: center; }
.csn-pdp-section__head--left .csn-pdp-section__lede { margin-left: 0; }
.csn-pdp-section__link { font-family: var(--cs-font-sans); font-size: 12px; color: var(--muted); text-decoration: underline; }

/* Eyebrow (shared utility — also used on info pages, scoped lightly) */
.csn-pdp .csn-eyebrow {
	font-family: var(--cs-font-sans); font-size: 11px; font-weight: 700;
	text-transform: uppercase; letter-spacing: var(--cs-tracking-wider);
	color: var(--accent); margin-bottom: 6px;
}
.csn-pdp .csn-italic-accent { font-family: var(--cs-font-serif); font-style: italic; font-weight: 500; color: var(--accent); }

/* --------------------------------------------------------------------------
   3. Tags (pill-shaped labels)
   -------------------------------------------------------------------------- */
.csn-pdp-tag {
	display: inline-flex; align-items: center; gap: 6px;
	font-family: var(--cs-font-sans); font-size: 11px; font-weight: 600;
	padding: 4px 10px; border-radius: var(--cs-radius-pill);
	letter-spacing: 0.02em;
}
.csn-pdp-tag--dark    { background: rgba(26,20,18,.82); color: #fff; }
.csn-pdp-tag--cream   { background: var(--accent-soft); color: var(--accent); }
.csn-pdp-tag--outline { background: transparent; color: var(--accent); border: 1px solid var(--accent); }
.csn-pdp-tag--gold    { background: var(--accent); color: #fff; }
.csn-pdp-tag--light   { background: rgba(255,255,255,.92); color: var(--fg); }

/* --------------------------------------------------------------------------
   4. Breadcrumbs
   -------------------------------------------------------------------------- */
.csn-pdp-crumbs {
	display: flex; gap: 6px; align-items: center;
	padding: 10px 20px 6px;
	font-family: var(--cs-font-sans); font-size: 11px;
	color: var(--muted); letter-spacing: 0.02em;
}
.csn-pdp-crumbs__link { color: var(--muted); text-decoration: none; }
.csn-pdp-crumbs__link:hover { color: var(--fg); }
.csn-pdp-crumbs__current { color: var(--fg); }

/* --------------------------------------------------------------------------
   5. Hero layout (mobile = stacked)
   -------------------------------------------------------------------------- */
.csn-pdp-hero { display: block; background: var(--bg); }

/* --------------------------------------------------------------------------
   6. Gallery
   -------------------------------------------------------------------------- */
.csn-pdp-gallery { position: relative; background: var(--bg-alt); }
.csn-pdp-gallery__scroller {
	display: flex; overflow-x: auto;
	scroll-snap-type: x mandatory; scroll-behavior: smooth;
	scrollbar-width: none;
}
.csn-pdp-gallery__scroller::-webkit-scrollbar { display: none; }
.csn-pdp-gallery__slide {
	/* MIUI Chrome workaround: aspect-ratio + overflow:hidden + child img → padding-top hack */
	flex: 0 0 100%; scroll-snap-align: start;
	position: relative;
	height: 0; padding-top: 100%;
	background: var(--bg-alt);
}
.csn-pdp-gallery__img,
.csn-pdp-gallery__placeholder {
	position: absolute; top: 0; left: 0;
	width: 100%; height: 100%;
	object-fit: cover; display: block;
}
.csn-pdp-gallery__placeholder { background: var(--bg-alt); }

.csn-pdp-gallery__tag { position: absolute; top: 14px; left: 16px; pointer-events: none; }
.csn-pdp-gallery__actions { position: absolute; top: 14px; right: 16px; display: flex; gap: 8px; }
.csn-pdp-gallery__action {
	width: 34px; height: 34px; border-radius: 50%; border: none; cursor: pointer;
	background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.08);
	display: inline-flex; align-items: center; justify-content: center;
	padding: 0;
}

.csn-pdp-gallery__index {
	position: absolute; bottom: 14px; right: 16px;
	background: rgba(26,20,18,.72); color: #fff;
	font-family: var(--cs-font-sans); font-size: 11px; font-weight: 600;
	padding: 4px 10px; border-radius: var(--cs-radius-pill); letter-spacing: 0.04em;
}
.csn-pdp-gallery__dots { position: absolute; bottom: 14px; left: 0; right: 0; display: flex; justify-content: center; gap: 6px; pointer-events: none; }
.csn-pdp-gallery__dot {
	width: 6px; height: 6px; border-radius: 6px;
	background: rgba(26,20,18,.35); border: none; padding: 0;
	cursor: pointer; pointer-events: auto;
	transition: all var(--cs-dur-base) var(--cs-ease);
}
.csn-pdp-gallery__dot.is-active { width: 18px; background: var(--fg); }

.csn-pdp-gallery__thumbs { display: none; }

/* --------------------------------------------------------------------------
   7. BuyBox
   -------------------------------------------------------------------------- */
.csn-pdp-buy { padding: 20px 20px 8px; background: var(--bg); }

.csn-pdp-buy__tagline { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; flex-wrap: nowrap; }
.csn-pdp-buy__tagline-accent {
	font-family: var(--cs-font-sans); font-size: 11px; color: var(--accent);
	font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
	white-space: nowrap;
}

.csn-pdp-buy__title {
	font-family: var(--cs-font-serif);
	font-size: 32px; font-weight: 500;
	line-height: 1.08; letter-spacing: -0.01em;
	color: var(--fg); margin: 0 0 10px;
}
.csn-pdp-buy__subtitle { font-family: var(--cs-font-sans); font-size: 13px; color: var(--muted); line-height: 1.5; margin: 0; }

.csn-pdp-buy__rating { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-family: var(--cs-font-sans); font-size: 12px; }
.csn-pdp-buy__rating-val { font-weight: 600; font-size: 13px; color: var(--fg); }
.csn-pdp-buy__rating-count { color: var(--muted); }
.csn-pdp-buy__rating-link { color: var(--muted); text-decoration: underline; margin-left: auto; font-size: 12px; }

.csn-pdp-stars { display: inline-flex; gap: 1px; }
.csn-pdp-stars__star { display: inline-flex; }
.csn-pdp-stars__star.is-filled svg { fill: var(--accent); stroke: var(--accent); }

.csn-pdp-buy__price { margin-top: 16px; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.csn-pdp-buy__price-current { font-family: var(--cs-font-sans); font-size: 26px; font-weight: 700; color: var(--fg); letter-spacing: -0.01em; line-height: 1; }
.csn-pdp-buy__price-current .woocommerce-Price-amount { font-weight: 700; }
.csn-pdp-buy__price-old { font-family: var(--cs-font-sans); font-size: 15px; color: var(--muted); text-decoration: line-through; }
.csn-pdp-buy__price-old[hidden] { display: none; }

/* --------------------------------------------------------------------------
   8. Variation axes — pills
   -------------------------------------------------------------------------- */
.csn-pdp-axis { margin-top: 22px; }
.csn-pdp-axis__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; gap: 12px; }
.csn-pdp-label { font-family: var(--cs-font-sans); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: var(--cs-tracking-wider); color: var(--muted); }
.csn-pdp-axis__selected { font-weight: 500; text-transform: none; color: var(--fg); letter-spacing: 0; margin-left: 6px; }
.csn-pdp-axis__link {
	font-family: var(--cs-font-sans); font-size: 11px; color: var(--muted);
	text-decoration: underline; background: none; border: none; padding: 0; cursor: pointer;
	display: inline-flex; align-items: center; gap: 4px;
}
.csn-pdp-axis__hint { margin-top: 8px; font-family: var(--cs-font-sans); font-size: 11px; color: var(--muted); }

.csn-pdp-selects { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; padding: 0; margin: -1px; }

/* Style picker (radio-row list — full-width, name left, price right) */
.csn-pdp-pills--style { display: flex; flex-direction: column; gap: 8px; }
.csn-pdp-pill--style {
	display: flex; flex-direction: row; align-items: center; gap: 12px;
	padding: 12px 16px; border-radius: 14px;
	border: 1.5px solid var(--line); background: var(--card); color: var(--fg);
	cursor: pointer; transition: all 180ms var(--cs-ease); text-align: left; width: 100%;
}
.csn-pdp-pill--style .csn-pdp-pill__radio {
	width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0;
	border: 1.5px solid rgba(26,20,18,.25); background: transparent;
	display: inline-flex; align-items: center; justify-content: center;
	transition: all 180ms var(--cs-ease);
}
.csn-pdp-pill--style .csn-pdp-pill__name { flex: 1; min-width: 0; font-family: var(--cs-font-sans); font-size: 13px; font-weight: 600; line-height: 1.3; overflow-wrap: break-word; }
.csn-pdp-pill--style .csn-pdp-pill__sub { font-family: var(--cs-font-sans); font-size: 12.5px; font-weight: 600; opacity: .6; flex-shrink: 0; white-space: nowrap; }
.csn-pdp-pill--style.is-selected { background: var(--fg); color: #fff; border-color: var(--fg); }
.csn-pdp-pill--style.is-selected .csn-pdp-pill__radio { border-color: #fff; background: #fff; }
.csn-pdp-pill--style.is-selected .csn-pdp-pill__radio::after {
	content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--fg);
}
.csn-pdp-pill--style.is-selected .csn-pdp-pill__sub { opacity: .75; }
.csn-pdp-pill--style.is-disabled { opacity: 0.4; cursor: not-allowed; }

/* Size pills (6-col grid) */
.csn-pdp-pills--size { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.csn-pdp-pill--size {
	padding: 11px 0; border-radius: var(--cs-radius-pill);
	border: 1.5px solid var(--line); background: var(--card); color: var(--fg);
	font-family: var(--cs-font-sans); font-size: 13px; font-weight: 600;
	cursor: pointer; transition: all 160ms var(--cs-ease);
}
.csn-pdp-pill--size.is-selected { background: var(--fg); color: #fff; border-color: var(--fg); }
.csn-pdp-pill--size.is-disabled { color: rgba(26,20,18,.25); text-decoration: line-through; cursor: not-allowed; background: var(--card); }
.csn-pdp-pill--size.is-disabled.is-selected { background: var(--card); color: rgba(26,20,18,.25); border-color: var(--line); }

/* --------------------------------------------------------------------------
   9. Personalization input + fonts
   -------------------------------------------------------------------------- */
.csn-pdp-pers { margin-top: 22px; }
.csn-pdp-pers__input-wrap {
	display: flex; align-items: center; gap: 2px;
	background: var(--card); border: 1px solid var(--chip-border);
	border-radius: 14px; padding: 4px 12px 4px 14px; margin-top: 10px;
	transition: border-color 160ms var(--cs-ease);
}
.csn-pdp-pers__input-wrap:focus-within { border-color: var(--accent); }
.csn-pdp-pers__input {
	flex: 1; min-width: 0; border: none; outline: none; background: transparent;
	font-size: 22px; color: var(--fg); padding: 12px 6px;
	line-height: 1.2;
}
.csn-pdp-pers__input::placeholder { color: rgba(26,20,18,.35); font-family: var(--cs-font-sans); font-size: 14px; }
.csn-pdp-pers__count { font-family: var(--cs-font-sans); font-size: 10px; color: rgba(26,20,18,.4); padding: 0 4px; white-space: nowrap; }

.csn-pdp-pers__fonts { margin-top: 12px; display: flex; align-items: center; gap: 10px; }
.csn-pdp-pers__fonts-label {
	font-family: var(--cs-font-sans); font-size: 10px; font-weight: 600;
	text-transform: uppercase; letter-spacing: 0.12em;
	color: var(--muted); white-space: nowrap;
}
.csn-pdp-pers__fonts-list { display: flex; gap: 6px; flex: 1; justify-content: flex-end; flex-wrap: wrap; }
.csn-pdp-pers__font {
	width: 30px; height: 30px; border-radius: 50%;
	border: 1px solid var(--chip-border); background: var(--card); color: var(--fg);
	font-family: var(--cs-font-sans); font-size: 11px; font-weight: 600;
	cursor: pointer; padding: 0;
	display: flex; align-items: center; justify-content: center;
	transition: all 160ms var(--cs-ease);
}
.csn-pdp-pers__font.is-active { background: var(--fg); color: #fff; border-color: var(--fg); }

.csn-pdp-pers__hint { margin-top: 8px; display: flex; align-items: center; gap: 6px; font-family: var(--cs-font-sans); font-size: 11px; color: var(--muted); }

/* --------------------------------------------------------------------------
   10. CTA button
   -------------------------------------------------------------------------- */
.csn-pdp-cta-wrap { margin-top: 22px; }
.csn-pdp-cta {
	width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	background: var(--fg); color: #fff; border: none; cursor: pointer;
	padding: 16px 22px; border-radius: 14px;
	font-family: var(--cs-font-sans); font-size: 15px; font-weight: 600;
	letter-spacing: 0.01em;
	transition: transform 160ms var(--cs-ease), background 160ms var(--cs-ease), opacity 160ms;
	box-shadow: 0 6px 18px rgba(26,20,18,.14);
}
.csn-pdp-cta:hover:not(:disabled) { background: #2A2420; transform: translateY(-1px); }
.csn-pdp-cta:disabled { opacity: 0.55; cursor: not-allowed; box-shadow: none; }
.csn-pdp-cta__sep { opacity: 0.5; }
.csn-pdp-cta__price .woocommerce-Price-amount { color: #fff; font-weight: 700; }
.csn-pdp-cta .woocommerce-Price-amount { color: inherit; }

/* hide WC's default single_variation notice-style block; we display price elsewhere */
body.csn-product-page .csn-pdp-form .single_variation { display: none !important; }

/* --------------------------------------------------------------------------
   11. Trust badges
   -------------------------------------------------------------------------- */
.csn-pdp-trust { margin-top: 18px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.csn-pdp-trust__card {
	/* MIUI Chrome bug workaround: border-radius+background+child-content combo glitches on Mediatek GPU */
	position: relative;
	padding: 12px 10px;
	text-align: center;
	display: block;
}
.csn-pdp-trust__card::before {
	content: ""; position: absolute; inset: 0;
	border-radius: 14px; background: var(--card); border: 1px solid var(--line-soft); z-index: 0;
}
.csn-pdp-trust__card > * { position: relative; z-index: 1; }
.csn-pdp-trust__card svg { display: block; margin: 0 auto 6px; }
.csn-pdp-trust__title { font-family: var(--cs-font-sans); font-size: 11px; font-weight: 700; color: var(--fg); }
.csn-pdp-trust__sub { font-family: var(--cs-font-sans); font-size: 10px; color: var(--muted); margin-top: 2px; }

/* --------------------------------------------------------------------------
   12. Urgency band
   -------------------------------------------------------------------------- */
.csn-pdp-urgency {
	margin-top: 14px; display: flex; gap: 10px; align-items: center;
	padding: 12px 14px; background: var(--accent-soft);
	border: 1px solid rgba(181,139,91,.2);
	border-radius: 12px;
}
.csn-pdp-urgency__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
.csn-pdp-urgency__text { font-family: var(--cs-font-sans); font-size: 12.5px; color: var(--fg); line-height: 1.45; }
.csn-pdp-urgency__text strong { font-weight: 700; }

/* --------------------------------------------------------------------------
   13. Reasons (Block 2)
   -------------------------------------------------------------------------- */
.csn-pdp-reasons__grid { margin-top: 26px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.csn-pdp-reasons__card {
	/* MIUI Chrome bug workaround */
	position: relative;
	padding: 16px 14px;
}
.csn-pdp-reasons__card::before {
	content: ""; position: absolute; inset: 0;
	border-radius: 16px; background: var(--card); border: 1px solid var(--line-soft); z-index: 0;
}
.csn-pdp-reasons__card > * { position: relative; z-index: 1; }
.csn-pdp-reasons__icon {
	/* MIUI Chrome bug workaround */
	position: relative;
	display: inline-flex; width: 32px; height: 32px;
	align-items: center; justify-content: center;
	margin-bottom: 10px;
}
.csn-pdp-reasons__icon::before {
	content: ""; position: absolute; inset: 0;
	border-radius: 50%; background: var(--accent-soft); z-index: 0;
}
.csn-pdp-reasons__icon > * { position: relative; z-index: 1; }
.csn-pdp-reasons__title { font-family: var(--cs-font-serif); font-size: 17px; font-weight: 600; color: var(--fg); line-height: 1.2; margin-bottom: 4px; }
.csn-pdp-reasons__body { font-family: var(--cs-font-sans); font-size: 12px; color: var(--muted); line-height: 1.45; }

/* --------------------------------------------------------------------------
   14. Choose version (Block 3)
   -------------------------------------------------------------------------- */
.csn-pdp-versions { background: var(--bg-alt); }
.csn-pdp-versions__list { margin-top: 26px; display: flex; flex-direction: column; gap: 12px; }
.csn-pdp-versions__card {
	/* MIUI Chrome workaround: background+rounded on ::before, parent only carries border */
	display: block; width: 100%; text-align: left;
	border: 2px solid transparent; border-radius: 16px;
	cursor: pointer;
	padding: 18px 18px 16px;
	box-shadow: 0 2px 8px rgba(26,20,18,.04);
	transition: border-color 180ms, box-shadow 220ms, transform 200ms;
	position: relative;
}
.csn-pdp-versions__card::before {
	content: ""; position: absolute; inset: 0;
	border-radius: 14px; /* slightly smaller — sits inside parent's 2px border */
	background: var(--card); z-index: 0;
}
.csn-pdp-versions__card > * { position: relative; z-index: 1; }
.csn-pdp-versions__card.is-selected { border-color: var(--fg); box-shadow: 0 6px 24px rgba(26,20,18,.1); }
.csn-pdp-versions__eyebrow { font-family: var(--cs-font-sans); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--accent); }
.csn-pdp-versions__name { font-family: var(--cs-font-serif); font-size: 22px; font-weight: 500; color: var(--fg); line-height: 1.1; margin-top: 4px; }
.csn-pdp-versions__price { font-family: var(--cs-font-sans); font-size: 16px; font-weight: 700; color: var(--fg); margin-top: 6px; }
.csn-pdp-versions__desc { font-family: var(--cs-font-sans); font-size: 12px; color: var(--body-text); line-height: 1.5; margin: 10px 0 0; }
.csn-pdp-versions__select {
	display: flex; align-items: center; gap: 8px;
	margin-top: 12px; padding-top: 12px;
	border-top: 1px solid var(--line-soft);
	font-family: var(--cs-font-sans); font-size: 12px; font-weight: 600;
	color: var(--muted);
}
.csn-pdp-versions__radio {
	/* MIUI workaround: circle border on ::before */
	position: relative;
	width: 16px; height: 16px;
	display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.csn-pdp-versions__radio::before {
	content: ""; position: absolute; inset: 0;
	border-radius: 50%;
	border: 1.5px solid rgba(26,20,18,.25);
	background: transparent;
	z-index: 0;
	transition: border-color 160ms var(--cs-ease), background 160ms var(--cs-ease);
}
.csn-pdp-versions__radio > * { position: relative; z-index: 1; }
.csn-pdp-versions__radio svg { opacity: 0; }
.csn-pdp-versions__card.is-selected .csn-pdp-versions__select { color: var(--accent); }
.csn-pdp-versions__card.is-selected .csn-pdp-versions__radio::before { background: var(--accent); border-color: var(--accent); }
.csn-pdp-versions__card.is-selected .csn-pdp-versions__radio svg { opacity: 1; }
.csn-pdp-versions__select-label { flex: 1; }

/* --------------------------------------------------------------------------
   15. Delivery (Block 4)
   -------------------------------------------------------------------------- */
.csn-pdp-delivery__timeline {
	margin-top: 28px; position: relative;
	background: var(--card); border-radius: 16px;
	padding: 22px 14px; border: 1px solid var(--line-soft);
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px;
}
.csn-pdp-delivery__line { position: absolute; top: 42px; left: 14%; right: 14%; height: 1px; background: rgba(26,20,18,.14); }
.csn-pdp-delivery__step { text-align: center; position: relative; }
.csn-pdp-delivery__bubble {
	/* MIUI Chrome bug workaround */
	width: 40px; height: 40px;
	margin: 0 auto 10px; display: flex; align-items: center; justify-content: center;
	position: relative; z-index: 1;
}
.csn-pdp-delivery__bubble::before {
	content: ""; position: absolute; inset: 0;
	border-radius: 50%; background: var(--card); border: 1.5px solid var(--chip-border);
	z-index: 0;
}
.csn-pdp-delivery__bubble > * { position: relative; z-index: 1; }
.csn-pdp-delivery__step.is-active .csn-pdp-delivery__bubble::before { background: var(--accent); border-color: var(--accent); }
.csn-pdp-delivery__step-title { font-family: var(--cs-font-serif); font-size: 14px; font-weight: 600; color: var(--fg); line-height: 1.15; }
.csn-pdp-delivery__step-sub { font-family: var(--cs-font-sans); font-size: 10.5px; color: var(--muted); margin-top: 3px; letter-spacing: 0.02em; }

.csn-pdp-delivery__notes { margin-top: 14px; display: flex; gap: 10px; }
.csn-pdp-delivery__note { flex: 1; background: var(--bg-alt); border-radius: 14px; padding: 14px; }
.csn-pdp-delivery__note svg { margin-bottom: 6px; }
.csn-pdp-delivery__note-title { font-family: var(--cs-font-sans); font-size: 11.5px; font-weight: 700; color: var(--fg); }
.csn-pdp-delivery__note-body { font-family: var(--cs-font-sans); font-size: 11px; color: var(--muted); margin-top: 2px; line-height: 1.4; }
.csn-pdp-delivery__note-body a { color: var(--accent); }

.csn-pdp-delivery__assurance {
	margin: 14px auto 0; padding: 0;
	max-width: 340px;
	font-family: var(--cs-font-sans); font-size: 12px;
	color: var(--muted); line-height: 1.5;
	text-wrap: pretty;
	/* flex keeps the shield icon anchored to the first line of the text
	 * no matter how many lines the copy wraps onto on narrow phones. Inline-block
	 * fallback used text-align:center which sat the icon at the start of an
	 * empty line on viewports where the text wrapped into 2-3 short lines —
	 * users saw the icon "з'їждає" away from the body copy. */
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: 6px;
}
.csn-pdp-delivery__assurance svg { flex-shrink: 0; margin-top: 3px; }
.csn-pdp-delivery__assurance > span { text-align: center; min-width: 0; }
.csn-pdp-delivery__assurance em.csn-italic-accent {
	font-family: var(--cs-font-serif); font-style: italic; color: var(--accent); font-weight: 500;
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
   16. Real life (Block 5)
   -------------------------------------------------------------------------- */
.csn-pdp-reallife { background: var(--bg-alt); padding-top: 44px; padding-bottom: 48px; }
.csn-pdp-reallife__scroller {
	display: flex; gap: 10px;
	overflow-x: auto;
	overflow-y: hidden; /* prevent implicit vertical scroll intercept on mobile swipe */
	padding: 4px 20px 6px; scroll-snap-type: x mandatory;
	scrollbar-width: none;
}
.csn-pdp-reallife__scroller::-webkit-scrollbar { display: none; }
.csn-pdp-reallife__slide {
	/* MIUI workaround: padding-top hack, image clips itself */
	flex: 0 0 220px; scroll-snap-align: start;
	position: relative;
	aspect-ratio: 3 / 4; /* matches WP-generated 225x300 photo thumbnails exactly — no crop, no stretch */
	box-shadow: 0 2px 8px rgba(26,20,18,.04);
	border-radius: 14px;
	background: var(--bg-alt);
}
.csn-pdp-reallife__img {
	position: absolute; top: 0; left: 0;
	width: 100%; height: 100%;
	object-fit: cover; display: block;
	border-radius: 14px;
}

/* --------------------------------------------------------------------------
   17. Product info accordion (Block 6)
   -------------------------------------------------------------------------- */
.csn-pdp-info__list { margin-top: 22px; background: var(--card); border-radius: 16px; border: 1px solid var(--line-soft); overflow: hidden; }
.csn-pdp-info__row + .csn-pdp-info__row { border-top: 1px solid rgba(26,20,18,.07); }
.csn-pdp-info__btn {
	width: 100%; display: flex; justify-content: space-between; align-items: center;
	background: none; border: none; cursor: pointer;
	padding: 18px; text-align: left;
	color: var(--fg);
}
.csn-pdp-info__btn-title { display: inline-flex; align-items: center; gap: 12px; font-family: var(--cs-font-serif); font-size: 17px; font-weight: 600; color: var(--fg); }
.csn-pdp-info__toggle { display: inline-flex; }
.csn-pdp-info__answer {
	display: none; padding: 0 18px 18px 46px;
	font-family: var(--cs-font-sans); font-size: 13px; line-height: 1.6; color: var(--body-text);
}
.csn-pdp-info__answer p { margin: 0 0 8px; }
.csn-pdp-info__answer p:last-child { margin-bottom: 0; }
.csn-pdp-info__answer a { color: var(--accent); }
.csn-pdp-info__row[data-open="1"] .csn-pdp-info__answer { display: block; }
.csn-pdp-inline-link { background: none; border: none; padding: 0; color: var(--accent); cursor: pointer; font-family: inherit; font-size: inherit; text-decoration: underline; }

/* --------------------------------------------------------------------------
   18. Reviews (Block 7)
   -------------------------------------------------------------------------- */
.csn-pdp-reviews { background: var(--bg-alt); }
.csn-pdp-reviews__stats {
	margin-top: 14px; display: inline-flex; gap: 16px;
	padding: 10px 16px; background: var(--card); border-radius: var(--cs-radius-pill);
	border: 1px solid var(--line-soft);
}
.csn-pdp-reviews__stat { text-align: center; }
.csn-pdp-reviews__stat-num { font-family: var(--cs-font-serif); font-size: 16px; font-weight: 600; color: var(--fg); }
.csn-pdp-reviews__stat-label { font-family: var(--cs-font-sans); font-size: 9.5px; color: var(--muted); letter-spacing: 0.1em; text-transform: uppercase; }
.csn-pdp-reviews__list { margin-top: 26px; display: flex; flex-direction: column; gap: 12px; }
.csn-pdp-reviews__card { background: var(--card); border-radius: 16px; padding: 18px 18px 16px; box-shadow: 0 2px 8px rgba(26,20,18,.04); }
.csn-pdp-reviews__head { display: flex; gap: 10px; align-items: flex-start; }
.csn-pdp-reviews__photo { width: 68px; height: 68px; border-radius: 12px; flex-shrink: 0; overflow: hidden; }
.csn-pdp-reviews__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.csn-pdp-reviews__meta { flex: 1; min-width: 0; }
.csn-pdp-reviews__title { font-family: var(--cs-font-serif); font-size: 17px; font-weight: 600; color: var(--fg); margin-top: 4px; line-height: 1.2; }
.csn-pdp-reviews__byline { margin-top: 3px; font-family: var(--cs-font-sans); font-size: 11px; color: var(--muted); display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.csn-pdp-reviews__byline strong { color: var(--fg); font-weight: 700; }
.csn-pdp-reviews__verified { display: inline-flex; align-items: center; gap: 3px; color: var(--accent); }
.csn-pdp-reviews__body { font-family: var(--cs-font-sans); font-size: 13px; line-height: 1.55; color: var(--fg); margin: 12px 0 10px; }

/* --------------------------------------------------------------------------
   19. Custom CTA (Block 8)
   -------------------------------------------------------------------------- */
.csn-pdp-custom-cta {
	background: #1A1412; color: #fff;
	padding: 52px 20px 56px; text-align: center;
	position: relative; overflow: hidden;
}
.csn-pdp-custom-cta::before {
	content: ''; position: absolute; inset: 0;
	background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.03) 0, rgba(255,255,255,.03) 1px, transparent 1px, transparent 14px);
	pointer-events: none;
}
.csn-pdp-custom-cta__inner { position: relative; max-width: 440px; margin: 0 auto; }
.csn-pdp-custom-cta__eyebrow { color: var(--accent) !important; margin-bottom: 14px; }
.csn-pdp-custom-cta__title {
	font-family: var(--cs-font-serif); font-size: 32px; font-weight: 500;
	line-height: 1.1; letter-spacing: -0.01em; color: #fff; margin: 0;
}
.csn-pdp-custom-cta__body { font-family: var(--cs-font-sans); font-size: 14px; line-height: 1.55; color: rgba(246,241,234,.72); margin: 16px auto 24px; max-width: 320px; }
.csn-pdp-custom-cta__btn {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 14px 22px; border-radius: var(--cs-radius-pill);
	background: var(--accent); color: #1A1412;
	font-family: var(--cs-font-sans); font-size: 14px; font-weight: 700;
	text-decoration: none; border: none; cursor: pointer;
	transition: transform 160ms, background 160ms;
}
.csn-pdp-custom-cta__btn:hover { background: #C8A070; transform: translateY(-1px); }
.csn-pdp-custom-cta__foot { margin-top: 22px; font-family: var(--cs-font-sans); font-size: 11px; color: rgba(246,241,234,.55); }

/* --------------------------------------------------------------------------
   20. Related (Block 9)
   -------------------------------------------------------------------------- */
.csn-pdp-related { background: var(--bg); }
.csn-pdp-related__scroller {
	display: flex; gap: 10px; overflow-x: auto;
	padding: 4px 20px 8px; scroll-snap-type: x mandatory;
	scrollbar-width: none;
}
.csn-pdp-related__scroller::-webkit-scrollbar { display: none; }
.csn-pdp-related__card {
	/* MIUI workaround: pseudo-element frame, no parent overflow */
	position: relative;
	flex: 0 0 180px; scroll-snap-align: start;
	display: flex; flex-direction: column;
	box-shadow: 0 2px 8px rgba(26,20,18,.04);
	text-decoration: none; color: var(--fg);
	transition: transform 200ms var(--cs-ease);
}
.csn-pdp-related__card::before {
	content: ""; position: absolute; inset: 0;
	border-radius: 14px; background: var(--card); z-index: 0;
}
.csn-pdp-related__card > * { position: relative; z-index: 1; }
.csn-pdp-related__card:hover { transform: translateY(-2px); }
.csn-pdp-related__media {
	position: relative; height: 0; padding-top: 100%;
	border-top-left-radius: 14px; border-top-right-radius: 14px;
	background: var(--bg-alt);
	overflow: hidden; /* keep here: small element, clips its own img inside fixed bounds */
}
.csn-pdp-related__img {
	position: absolute; top: 0; left: 0;
	width: 100%; height: 100%;
	object-fit: cover; display: block;
}
.csn-pdp-related__body { padding: 10px 12px 12px; }
.csn-pdp-related__name { font-family: var(--cs-font-serif); font-size: 15px; font-weight: 600; color: var(--fg); line-height: 1.15; }
.csn-pdp-related__rating { display: flex; gap: 4px; align-items: center; margin-top: 3px; font-family: var(--cs-font-sans); font-size: 10.5px; color: var(--muted); }
.csn-pdp-related__count { color: var(--muted); }
.csn-pdp-related__price { margin-top: 6px; font-family: var(--cs-font-sans); font-size: 13px; font-weight: 700; color: var(--fg); }
.csn-pdp-related__price .woocommerce-Price-amount { font-weight: 700; color: var(--fg); }

/* --------------------------------------------------------------------------
   21. Sticky CTA (Block 10) — mobile only
   -------------------------------------------------------------------------- */
.csn-pdp-sticky {
	position: fixed; bottom: 0; left: 0; right: 0;
	background: rgba(246,241,234,.96);
	border-top: 1px solid var(--line);
	padding: 10px 14px calc(12px + env(safe-area-inset-bottom));
	display: flex; gap: 10px; align-items: center;
	z-index: 20;
	transform: translateY(110%);
	transition: transform 280ms var(--cs-ease);
	pointer-events: none;
}
.csn-pdp-sticky.is-visible { transform: translateY(0); pointer-events: auto; }
.csn-pdp-sticky[aria-hidden="true"] { pointer-events: none; }
.csn-pdp-sticky__thumb { width: 44px; height: 44px; border-radius: 10px; flex-shrink: 0; overflow: hidden; border: 1px solid var(--line-soft); }
.csn-pdp-sticky__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.csn-pdp-sticky__meta { flex: 1; min-width: 0; }
.csn-pdp-sticky__name { font-family: var(--cs-font-serif); font-size: 14px; font-weight: 600; color: var(--fg); line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.csn-pdp-sticky__row { font-family: var(--cs-font-sans); font-size: 11px; color: var(--muted); margin-top: 2px; display: flex; gap: 5px; align-items: center; }
.csn-pdp-sticky__row strong { color: var(--fg); font-weight: 700; }
.csn-pdp-sticky__row .woocommerce-Price-amount { color: var(--fg); font-weight: 700; }
.csn-pdp-sticky__btn { padding: 11px 16px !important; font-size: 13px !important; border-radius: var(--cs-radius-pill) !important; gap: 6px !important; }

/* --------------------------------------------------------------------------
   22. Desktop layout (>= 768px, canvas 1280)
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {

	.csn-pdp-section { padding: 80px 48px; }
	.csn-pdp-section--bleed { padding-left: 0; padding-right: 0; }
	.csn-pdp-section__head--padded { padding: 0 48px; }
	.csn-pdp-section__title { font-size: 36px; }

	.csn-pdp-crumbs { padding: 18px 48px 8px; font-size: 12px; }

	/* Hero: 2-col grid (gallery left, buy-box right sticky) — desktop tokens from updated design source */
	.csn-pdp-hero {
		display: grid;
		grid-template-columns: minmax(0, 1.15fr) minmax(420px, 0.85fr);
		gap: 56px;
		padding: 24px 48px 64px;
		align-items: start;
	}

	/* Gallery: NOT sticky on desktop (only buy-box is). 108px thumbnail rail per design. */
	.csn-pdp-gallery {
		position: static;
		display: grid;
		grid-template-columns: 108px 1fr;
		gap: 18px;
		background: transparent;
	}
	.csn-pdp-gallery__scroller { grid-column: 2; border-radius: 20px; overflow: hidden; scroll-snap-type: none; flex-direction: column; }
	/* On desktop, show only the active slide — use thumbs to switch via JS */
	.csn-pdp-gallery__scroller { display: block; }
	.csn-pdp-gallery__slide { display: none; border-radius: 20px; }
	.csn-pdp-gallery__slide.is-active { display: block; }
	.csn-pdp-gallery__index,
	.csn-pdp-gallery__dots { display: none; }
	.csn-pdp-gallery__tag { top: 20px; left: calc(108px + 18px + 20px); }
	.csn-pdp-gallery__actions { top: 20px; right: 20px; }

	.csn-pdp-gallery__thumbs {
		display: flex; flex-direction: column; gap: 10px;
		grid-column: 1; grid-row: 1;
		overflow-y: auto; max-height: 720px;
		scrollbar-width: none;
	}
	.csn-pdp-gallery__thumbs::-webkit-scrollbar { display: none; }
	.csn-pdp-gallery__thumb {
		/* MIUI workaround: img clips itself */
		width: 96px; height: 96px; border-radius: 12px;
		border: 2px solid transparent; padding: 0; cursor: pointer;
		background: var(--bg-alt);
		transition: border-color 160ms var(--cs-ease);
		margin: 0 auto;
	}
	.csn-pdp-gallery__thumb.is-active { border-color: var(--fg); }
	.csn-pdp-gallery__thumb-img {
		width: 100%; height: 100%; object-fit: cover; display: block;
		border-radius: 10px; /* inside the 2px transparent border */
	}

	/* Buy box: sticky on desktop, top 92 — NO internal max-height/overflow.
	   Page scrolls naturally past it once content runs out (no scroll bubble UX). */
	.csn-pdp-buy { padding: 0; position: sticky; top: 92px; align-self: start; }
	.csn-pdp-buy__title { font-size: 40px; }

	/* Reasons 4-col on desktop, design-token gap + card polish */
	.csn-pdp-reasons__grid { grid-template-columns: repeat(4, 1fr); gap: 20px; }
	.csn-pdp-reasons__card { padding: 24px 22px; }
	.csn-pdp-reasons__title { font-size: 20px; }

	/* Versions list — flex wrap with center justification so an orphan row
	   (e.g. 5 cards → 3+2) centers instead of left-aligning. Cards target ~3 per row.
	   Mobile base sets flex-direction: column; explicitly reset to row at desktop. */
	.csn-pdp-versions__list {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		gap: 20px;
	}
	.csn-pdp-versions__card {
		width: calc((100% - 40px) / 3);
		flex: 0 1 calc((100% - 40px) / 3);
		min-width: 0;
		box-sizing: border-box;
	}
	/* Lift the selected version card on desktop — same accent, just elevated */
	.csn-pdp-versions__card.is-selected {
		transform: translateY(-4px);
		box-shadow: 0 10px 32px rgba(26, 20, 18, .12);
		transition: transform 220ms var(--cs-ease), box-shadow 220ms var(--cs-ease), border-color 180ms var(--cs-ease);
	}

	/* Delivery timeline: bigger bubbles, taller card padding, line repositioned for 56px bubbles */
	.csn-pdp-delivery__timeline { padding: 36px 48px; }
	.csn-pdp-delivery__line { top: 64px; }
	.csn-pdp-delivery__bubble { width: 56px; height: 56px; margin-bottom: 14px; }
	.csn-pdp-delivery__step-title { font-size: 18px; }

	/* Delivery notes: 2-col grid, icon-circle bubble on left of each note */
	.csn-pdp-delivery__notes { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
	.csn-pdp-delivery__note {
		display: grid;
		grid-template-columns: auto 1fr;
		grid-template-rows: auto auto;
		column-gap: 14px;
		align-items: center;
		padding: 18px 20px;
	}
	.csn-pdp-delivery__note > svg {
		/* MIUI workaround: border-radius:50% on SVG-element → mask circle (different render path) */
		grid-row: 1 / 3; grid-column: 1;
		width: 38px; height: 38px;
		padding: 10px;
		background: var(--card);
		-webkit-mask-image: radial-gradient(circle, #000 50%, transparent 51%);
		mask-image: radial-gradient(circle, #000 50%, transparent 51%);
		box-sizing: border-box;
		margin: 0;
		align-self: center;
	}
	.csn-pdp-delivery__note-title { grid-column: 2; grid-row: 1; align-self: end; }
	.csn-pdp-delivery__note-body  { grid-column: 2; grid-row: 2; align-self: start; }

	/* Real life: switch from horizontal scroller to 4-col grid */
	.csn-pdp-reallife__scroller {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 16px;
		padding: 4px 48px 6px;
		overflow-x: visible;
		scroll-snap-type: none;
	}
	.csn-pdp-reallife__slide { flex: none; min-width: 0; }

	/* Product info: 2-col layout with sticky section head on the left */
	.csn-pdp-info {
		display: grid;
		grid-template-columns: 0.9fr 1.4fr;
		gap: 64px;
		align-items: start;
	}
	.csn-pdp-info > .csn-pdp-section__head { position: sticky; top: 100px; }
	.csn-pdp-info__list { max-width: none; margin-left: 0; margin-right: 0; }

	/* Reviews 3-col, design-token gap. Header reflows to 2-col (title left, stats right). */
	.csn-pdp-reviews__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
	.csn-pdp-reviews > .csn-pdp-section__head {
		display: grid;
		grid-template-columns: 1fr auto;
		grid-template-rows: auto auto;
		column-gap: 32px;
		row-gap: 8px;
		align-items: end;
		text-align: left;
		max-width: none;
	}
	.csn-pdp-reviews > .csn-pdp-section__head > .csn-eyebrow            { grid-column: 1; grid-row: 1; }
	.csn-pdp-reviews > .csn-pdp-section__head > .csn-pdp-section__title { grid-column: 1; grid-row: 2; margin: 0; }
	.csn-pdp-reviews > .csn-pdp-section__head > .csn-pdp-reviews__stats { grid-column: 2; grid-row: 1 / 3; align-self: end; margin: 0; }

	/* Custom CTA: design tokens (96 vertical / 720 inner / 56 title) */
	.csn-pdp-custom-cta { padding: 96px 48px; }
	.csn-pdp-custom-cta__inner { max-width: 720px; }
	.csn-pdp-custom-cta__title { font-size: 56px; }

	/* Related: keeps horizontal scroller on desktop (more than 4 items expected). */
	.csn-pdp-related__scroller { padding: 4px 48px 8px; gap: 16px; }
	.csn-pdp-related__card { flex: 0 0 240px; }

	/* Hide mobile sticky CTA on desktop */
	.csn-pdp-sticky { display: none !important; }

	/* Wider pills grid */
	.csn-pdp-pills--size { grid-template-columns: repeat(7, 1fr); }
}

@media (min-width: 1024px) {
	.csn-pdp-reallife__slide { flex: 0 0 340px; }
	.csn-pdp-related__card { flex: 0 0 270px; }
}

@media (min-width: 1280px) {
	.csn-pdp-section__head { max-width: 720px; }
}

/* --------------------------------------------------------------------------
   23. Print & reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.csn-pdp-pill, .csn-pdp-pers__font, .csn-pdp-versions__card, .csn-pdp-sticky, .csn-pdp-cta, .csn-pdp-custom-cta__btn, .csn-pdp-gallery__dot { transition: none !important; }
}


/* ==========================================================================
   24b. Chrome reset extension — Astra/WP wrappers above our shell
   Zero padding/margin so the PDP renders edge-to-edge at every viewport.
   ========================================================================== */
body.csn-product-page #page,
body.csn-product-page .hfeed.site,
body.csn-product-page .wp-site-blocks {
	padding: 0 !important;
	margin: 0 !important;
	max-width: none !important;
	width: 100%;
}

/* Scroller containment — clip horizontal bleed on full-bleed sections.
   Internal overflow-x:auto on the scroller keeps its own scroll context. */
body.csn-product-page .csn-pdp-section--bleed { overflow-x: clip; }
body.csn-product-page .csn-pdp-reallife__scroller,
body.csn-product-page .csn-pdp-related__scroller { min-width: 0; }

/* ==========================================================================
   25. PDP-SPECIFIC LOCKS
   Defeats Astra parent + WC parent cascades on PDP-unique elements.
   Body-class scoped + !important (same pattern as info-shared.css ROUND 2/7).
   ========================================================================== */

/* Size + Style pills */
body.csn-product-page .csn-pdp-pill,
body.csn-product-page .csn-pdp-pill:link,
body.csn-product-page .csn-pdp-pill:visited,
body.csn-product-page .csn-pdp-pill:hover,
body.csn-product-page .csn-pdp-pill:focus,
body.csn-product-page .csn-pdp-pill:active {
	color: var(--fg) !important;
	background: var(--card) !important;
	border-color: var(--line) !important;
	text-decoration: none !important;
}
body.csn-product-page .csn-pdp-pill.is-selected,
body.csn-product-page .csn-pdp-pill.is-selected:hover,
body.csn-product-page .csn-pdp-pill.is-selected:focus,
body.csn-product-page .csn-pdp-pill.is-selected:active {
	color: #fff !important;
	background: var(--fg) !important;
	border-color: var(--fg) !important;
}
body.csn-product-page .csn-pdp-pill.is-selected .csn-pdp-pill__name,
body.csn-product-page .csn-pdp-pill.is-selected .csn-pdp-pill__sub { color: #fff !important; }
body.csn-product-page .csn-pdp-pill.is-disabled,
body.csn-product-page .csn-pdp-pill.is-disabled:hover {
	color: rgba(26,20,18,.25) !important;
	background: var(--card) !important;
	border-color: var(--line) !important;
}

/* Add-to-cart CTA — WC ".button.alt" has high specificity */
body.csn-product-page .csn-pdp-cta,
body.csn-product-page .csn-pdp-cta:link,
body.csn-product-page .csn-pdp-cta:visited,
body.csn-product-page .csn-pdp-cta:focus:not(:disabled),
body.csn-product-page .csn-pdp-cta:active:not(:disabled) {
	background: #1A1412 !important;
	color: #fff !important;
	border: none !important;
	text-decoration: none !important;
}
body.csn-product-page .csn-pdp-cta:hover:not(:disabled) {
	background: #2A2420 !important; color: #fff !important; border: none !important;
}
body.csn-product-page .csn-pdp-cta:disabled { opacity: 1 !important; background: #1A1412 !important; color: #fff !important; cursor: not-allowed !important; }
body.csn-product-page .csn-pdp-cta .woocommerce-Price-amount,
body.csn-product-page .csn-pdp-cta .woocommerce-Price-amount bdi { color: #fff !important; }

/* Personalization input — defeat Astra input border + focus ring */
body.csn-product-page .csn-pdp-pers__input,
body.csn-product-page .csn-pdp-pers__input:focus,
body.csn-product-page .csn-pdp-pers__input:hover,
body.csn-product-page .csn-pdp-pers__input:active {
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
	background: transparent !important;
}
body.csn-product-page .csn-pdp-pers__input-wrap:focus-within { border-color: var(--accent) !important; }

/* Personalization font circles */
body.csn-product-page .csn-pdp-pers__font,
body.csn-product-page .csn-pdp-pers__font:link,
body.csn-product-page .csn-pdp-pers__font:visited,
body.csn-product-page .csn-pdp-pers__font:hover,
body.csn-product-page .csn-pdp-pers__font:focus,
body.csn-product-page .csn-pdp-pers__font:active {
	color: var(--fg) !important;
	background: var(--card) !important;
	border-color: var(--chip-border) !important;
	text-decoration: none !important;
}
body.csn-product-page .csn-pdp-pers__font.is-active,
body.csn-product-page .csn-pdp-pers__font.is-active:hover,
body.csn-product-page .csn-pdp-pers__font.is-active:focus {
	color: #fff !important;
	background: var(--fg) !important;
	border-color: var(--fg) !important;
}

/* Choose-version cards */
body.csn-product-page .csn-pdp-versions__card,
body.csn-product-page .csn-pdp-versions__card:link,
body.csn-product-page .csn-pdp-versions__card:visited,
body.csn-product-page .csn-pdp-versions__card:hover,
body.csn-product-page .csn-pdp-versions__card:focus,
body.csn-product-page .csn-pdp-versions__card:active {
	color: var(--fg) !important;
	text-decoration: none !important;
}

/* Accordion rows */
body.csn-product-page .csn-pdp-info__btn,
body.csn-product-page .csn-pdp-info__btn:hover,
body.csn-product-page .csn-pdp-info__btn:focus,
body.csn-product-page .csn-pdp-info__btn:active,
body.csn-product-page .csn-pdp-info__btn[aria-expanded="true"] {
	color: var(--fg) !important;
	background: transparent !important;
	text-decoration: none !important;
}
body.csn-product-page .csn-pdp-info__answer a,
body.csn-product-page .csn-pdp-info__answer a:link,
body.csn-product-page .csn-pdp-info__answer a:visited,
body.csn-product-page .csn-pdp-info__answer a:hover,
body.csn-product-page .csn-pdp-info__answer a:focus,
body.csn-product-page .csn-pdp-info__answer a:active,
body.csn-product-page .csn-pdp-inline-link,
body.csn-product-page .csn-pdp-inline-link:link,
body.csn-product-page .csn-pdp-inline-link:visited,
body.csn-product-page .csn-pdp-inline-link:hover,
body.csn-product-page .csn-pdp-inline-link:focus,
body.csn-product-page .csn-pdp-inline-link:active { color: var(--accent) !important; background: transparent !important; }

/* Axis links (Compare all / Sizing guide) */
body.csn-product-page .csn-pdp-axis__link,
body.csn-product-page .csn-pdp-axis__link:link,
body.csn-product-page .csn-pdp-axis__link:visited,
body.csn-product-page .csn-pdp-axis__link:hover,
body.csn-product-page .csn-pdp-axis__link:focus,
body.csn-product-page .csn-pdp-axis__link:active {
	color: var(--muted) !important;
	background: transparent !important;
	border: none !important;
	text-decoration: underline !important;
}

/* Rating "Read" link + section__link */
body.csn-product-page .csn-pdp-buy__rating-link,
body.csn-product-page .csn-pdp-buy__rating-link:hover,
body.csn-product-page .csn-pdp-buy__rating-link:focus,
body.csn-product-page .csn-pdp-section__link,
body.csn-product-page .csn-pdp-section__link:hover,
body.csn-product-page .csn-pdp-section__link:focus {
	color: var(--muted) !important;
	text-decoration: underline !important;
}

/* Related card anchor */
body.csn-product-page a.csn-pdp-related__card,
body.csn-product-page a.csn-pdp-related__card:link,
body.csn-product-page a.csn-pdp-related__card:visited,
body.csn-product-page a.csn-pdp-related__card:hover,
body.csn-product-page a.csn-pdp-related__card:focus {
	color: var(--fg) !important;
	text-decoration: none !important;
}
body.csn-product-page a.csn-pdp-related__card:hover * { color: inherit !important; }

/* Breadcrumb links */
body.csn-product-page .csn-pdp-crumbs__link,
body.csn-product-page .csn-pdp-crumbs__link:link,
body.csn-product-page .csn-pdp-crumbs__link:visited {
	color: var(--muted) !important;
	text-decoration: none !important;
}
body.csn-product-page .csn-pdp-crumbs__link:hover { color: var(--fg) !important; }

/* Sticky CTA (WC .button.alt also lands here via csn-btn--dark inheritance) */
body.csn-product-page .csn-pdp-sticky__btn,
body.csn-product-page .csn-pdp-sticky__btn:hover,
body.csn-product-page .csn-pdp-sticky__btn:focus,
body.csn-product-page .csn-pdp-sticky__btn:active {
	background: #1A1412 !important;
	color: #fff !important;
	border-color: #1A1412 !important;
}

/* Gallery top-overlay icon buttons */
body.csn-product-page .csn-pdp-gallery__action,
body.csn-product-page .csn-pdp-gallery__action:hover,
body.csn-product-page .csn-pdp-gallery__action:focus {
	background: #fff !important;
	color: var(--fg) !important;
	border: none !important;
}

/* Gallery indicator dots (mobile) + thumb strip (desktop) */
body.csn-product-page .csn-pdp-gallery__dot,
body.csn-product-page .csn-pdp-gallery__dot:hover,
body.csn-product-page .csn-pdp-gallery__dot:focus,
body.csn-product-page .csn-pdp-gallery__dot:active {
	background: rgba(26,20,18,.35) !important;
	border: none !important;
	color: inherit !important;
}
body.csn-product-page .csn-pdp-gallery__dot.is-active,
body.csn-product-page .csn-pdp-gallery__dot.is-active:hover,
body.csn-product-page .csn-pdp-gallery__dot.is-active:focus { background: var(--fg) !important; }

body.csn-product-page .csn-pdp-gallery__thumb,
body.csn-product-page .csn-pdp-gallery__thumb:hover,
body.csn-product-page .csn-pdp-gallery__thumb:focus,
body.csn-product-page .csn-pdp-gallery__thumb:active {
	background: var(--bg-alt) !important;
	border-color: transparent !important;
	color: inherit !important;
}
body.csn-product-page .csn-pdp-gallery__thumb.is-active { border-color: var(--fg) !important; }

/* ==========================================================================
   14b. Choose-version card media area (Block 3)
   ========================================================================== */
.csn-pdp-versions__card {
	display: block;
	position: relative;
	padding: 0;
	overflow: hidden;
}
.csn-pdp-versions__grid {
	display: grid;
	grid-template-columns: 128px 1fr;
	gap: 0;
	align-items: stretch;
}
.csn-pdp-versions__media {
	position: relative;
	display: flex; align-items: center; justify-content: center;
	padding: 10px;
	background-image: repeating-linear-gradient(135deg, rgba(26,20,18,.05) 0, rgba(26,20,18,.05) 1px, transparent 1px, transparent 14px);
}
.csn-pdp-versions__media--tone-cream { background-color: var(--bg-alt); }
.csn-pdp-versions__media--tone-ivory { background-color: #F6F1EA; }
.csn-pdp-versions__media--tone-rose  { background-color: #EBDCDA; background-image: repeating-linear-gradient(135deg, rgba(139,44,58,.06) 0, rgba(139,44,58,.06) 1px, transparent 1px, transparent 14px); }
.csn-pdp-versions__media--tone-blush { background-color: #E8D6CE; background-image: repeating-linear-gradient(135deg, rgba(139,44,58,.05) 0, rgba(139,44,58,.05) 1px, transparent 1px, transparent 14px); }
.csn-pdp-versions__media--tone-dark  { background-color: #231914; background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.04) 0, rgba(255,255,255,.04) 1px, transparent 1px, transparent 14px); }
.csn-pdp-versions__art { width: 80%; height: auto; display: block; }
.csn-pdp-versions__photo { width: 100%; height: 100%; object-fit: cover; display: block; }
.csn-pdp-versions__media--has-image { padding: 0; background-image: none; }
.csn-pdp-versions__body { padding: 16px 16px 14px; display: block; }
.csn-pdp-versions__includes {
	list-style: none; padding: 0; margin: 10px 0 0;
	display: flex; flex-direction: column; gap: 5px;
}
.csn-pdp-versions__includes li {
	display: flex; gap: 6px; align-items: flex-start;
	font-family: var(--cs-font-sans); font-size: 12px; color: rgba(26,20,18,.75); line-height: 1.4;
}
.csn-pdp-versions__includes li svg { margin-top: 3px; flex-shrink: 0; }
.csn-pdp-versions__footer {
	display: flex; align-items: center; justify-content: space-between;
	padding: 12px 16px;
	border-top: 1px solid var(--line-soft);
	background: transparent;
	transition: background var(--cs-dur-base) var(--cs-ease);
	font-family: var(--cs-font-sans); font-size: 12px; font-weight: 600;
	color: var(--muted);
}
.csn-pdp-versions__footer .csn-pdp-versions__radio { margin-right: 8px; }
.csn-pdp-versions__select-label { flex: 1; }
.csn-pdp-versions__badge {
	position: absolute; top: 14px; right: 14px; z-index: 2;
}
.csn-pdp-versions__card.is-selected .csn-pdp-versions__footer {
	background: var(--accent-soft);
	color: var(--accent);
}

/* ==========================================================================
   26. ROUND 2 PATCHES — defensive containment + version-card lock + drawer/sticky
   ========================================================================== */

/* --- Issue 1: defensive width containment (mobile overflow) --- */
body.csn-product-page .csn-pdp-gallery__img {
	width: 100% !important;
	height: 100% !important;
	max-width: 100% !important;
}
body.csn-product-page .csn-pdp-pers__input { min-width: 0 !important; }
body.csn-product-page .csn-pdp-gallery,
body.csn-product-page .csn-pdp-gallery__scroller { min-width: 0 !important; }
/* Flex-item min-width fix: prevents <main>'s content min-content (gallery scroller's flat 6×slide layout) from inflating .csn-info-shell's cross-axis and overflowing body. Canonical CSS Flexbox fix. */
body.csn-product-page main.csn-pdp { min-width: 0 !important; }
body.csn-product-page .csn-info-shell { overflow-x: clip; }
body.csn-product-page main.csn-pdp { overflow-x: clip; }

/* Mobile gutter tightening (real device widths 375–390px) */
@media (max-width: 767px) {
	body.csn-product-page .csn-pdp-section { padding-left: 16px !important; padding-right: 16px !important; }
	body.csn-product-page .csn-pdp-section.csn-pdp-section--bleed { padding-left: 0 !important; padding-right: 0 !important; }
	body.csn-product-page .csn-pdp-section__head--padded { padding-left: 16px !important; padding-right: 16px !important; }
	body.csn-product-page .csn-pdp-buy { padding-left: 16px !important; padding-right: 16px !important; }
	body.csn-product-page .csn-pdp-crumbs { padding-left: 16px !important; padding-right: 16px !important; }
	body.csn-product-page .csn-pdp-pills--style { gap: 6px !important; }
	body.csn-product-page .csn-pdp-pills--size { gap: 6px !important; }
	body.csn-product-page .csn-pdp-trust { gap: 6px !important; }
}

/* --- Issue 3: Choose-version card full state lock --- */
body.csn-product-page .csn-pdp-versions__card,
body.csn-product-page .csn-pdp-versions__card:link,
body.csn-product-page .csn-pdp-versions__card:visited,
body.csn-product-page .csn-pdp-versions__card:hover,
body.csn-product-page .csn-pdp-versions__card:focus,
body.csn-product-page .csn-pdp-versions__card:active {
	background: var(--card) !important;
	border-color: transparent !important;
	color: var(--fg) !important;
	text-decoration: none !important;
}
body.csn-product-page .csn-pdp-versions__card.is-selected,
body.csn-product-page .csn-pdp-versions__card.is-selected:hover,
body.csn-product-page .csn-pdp-versions__card.is-selected:focus,
body.csn-product-page .csn-pdp-versions__card.is-selected:active {
	background: var(--card) !important;
	border-color: var(--fg) !important;
}
body.csn-product-page .csn-pdp-versions__card.is-selected .csn-pdp-versions__select {
	color: var(--accent) !important;
	background: var(--accent-soft) !important;
}
body.csn-product-page .csn-pdp-versions__card.is-selected .csn-pdp-versions__radio::before {
	background: var(--accent) !important;
	border-color: var(--accent) !important;
}
body.csn-product-page .csn-pdp-versions__name,
body.csn-product-page .csn-pdp-versions__price { color: var(--fg) !important; }
body.csn-product-page .csn-pdp-versions__desc,
body.csn-product-page .csn-pdp-versions__select-label { color: var(--muted) !important; }
body.csn-product-page .csn-pdp-versions__eyebrow { color: var(--accent) !important; }

/* --- Issue 4: hide sticky CTA while sizing drawer is open --- */
body.csn-drawer-open .csn-pdp-sticky { display: none !important; }

/* ==========================================================================
   27. PDP HEADER NAV (PDP-only, replaces info-header on product pages)
   ========================================================================== */
.csn-pdp-header { background: var(--bg); }

.csn-pdp-nav {
	display: grid;
	grid-template-columns: 60px 1fr 90px;
	align-items: center;
	padding: 14px 16px;
	background: rgba(246, 241, 234, 0.92);
	border-bottom: 1px solid rgba(26, 20, 18, .09);
	position: sticky; top: 0; z-index: 20;
}
.csn-pdp-nav__back {
	justify-self: start;
	display: inline-flex; align-items: center;
	color: var(--fg); text-decoration: none;
	padding: 4px;
}
.csn-pdp-nav__logo {
	text-align: center;
	font-family: var(--cs-font-serif);
	font-size: 22px;
	letter-spacing: -0.01em;
	color: var(--fg);
	font-weight: 500;
	text-decoration: none;
}
.csn-pdp-nav__logo em { font-style: italic; font-weight: 400; }
.csn-pdp-nav__icons {
	display: flex; gap: 14px; justify-self: end; align-items: center;
	color: var(--fg);
}
.csn-pdp-nav__icon {
	display: inline-flex; align-items: center;
	color: inherit; text-decoration: none;
}
.csn-pdp-nav__cart { position: relative; }
.csn-pdp-nav__cart-badge {
	position: absolute; top: -4px; right: -6px;
	background: var(--accent); color: #fff;
	width: 16px; height: 16px;
	border-radius: 50%;
	font-family: var(--cs-font-sans);
	font-size: 10px; font-weight: 700;
	display: flex; align-items: center; justify-content: center;
}
@media (min-width: 768px) {
	.csn-pdp-nav { padding: 14px 40px; }
	.csn-pdp-nav__logo { font-size: 24px; }
}

/* Astra blue-leak locks for nav (same pattern as info-shared ROUND 4) */
body.csn-product-page .csn-pdp-nav a,
body.csn-product-page .csn-pdp-nav a:link,
body.csn-product-page .csn-pdp-nav a:visited,
body.csn-product-page .csn-pdp-nav a:hover,
body.csn-product-page .csn-pdp-nav a:focus,
body.csn-product-page .csn-pdp-nav a:active {
	color: var(--fg) !important;
	text-decoration: none !important;
}
body.csn-product-page .csn-pdp-nav a:hover { color: var(--accent) !important; }
body.csn-product-page .csn-pdp-nav__cart-badge { color: #fff !important; }

/* Defeat .csn-pdp-tag's display:inline-flex when an empty placeholder span is hidden
   (e.g. data-csn-price-save / data-csn-price-old before WC populates them). */
body.csn-product-page [hidden] { display: none !important; }

/* ==========================================================================
   28. DESKTOP POLISH (no design source for desktop — judgment-driven)

   Same visual language as mobile + rest of site. Strategy:
     - Hero capped + centered on extra-wide viewports (full-bleed elsewhere)
     - Multi-col content grids capped at 1200px so cards stay proportional
     - Sticky behavior simplified: gallery sticky, buy-box flows naturally
     - Sticky offset tightened to align with the sticky nav
     - Bigger nav logo + slightly more typographic presence on wide screens
   ========================================================================== */

@media (min-width: 768px) {
	/* Choose-version cards: bigger media column on desktop (kept horizontal per design choice). */
	.csn-pdp-versions__grid {
		grid-template-columns: 168px 1fr;
	}

	/* PDP nav: more horizontal padding + bigger logo on desktop */
	.csn-pdp-nav { padding: 16px 48px; }
	.csn-pdp-nav__logo { font-size: 26px; }
}

@media (min-width: 1280px) {
	/* Hero: cap + center on extra-wide viewports.
	   Project principle is full-bleed for layout, but at 1920+ the hero
	   gallery becomes absurdly large without a cap. Pragmatic exception:
	   only the hero is capped; sections below remain full-bleed (their
	   inner grids cap separately below). */
	.csn-pdp-hero {
		max-width: 1280px;
		margin-left: auto;
		margin-right: auto;
	}

	/* Multi-col content grids cap at 1280px + center within their full-bleed sections */
	.csn-pdp-reasons__grid,
	.csn-pdp-versions__list,
	.csn-pdp-reviews__list,
	.csn-pdp-reviews > .csn-pdp-section__head,
	.csn-pdp-delivery__timeline,
	.csn-pdp-delivery__notes,
	.csn-pdp-reallife__scroller,
	.csn-pdp-info {
		max-width: 1280px;
		margin-left: auto;
		margin-right: auto;
	}

	/* Bigger nav logo on wide */
	.csn-pdp-nav__logo { font-size: 28px; }
}

/* ============================================================
 * RM-PAG — Reviews Read more pagination + ghost button + accordion list rendering
 * Added per design (Atoms.jsx ghost variant + Blocks.jsx Accordion body)
 * ============================================================ */
.csn-pdp-reviews__list[data-csn-revealed="3"] > .csn-pdp-reviews__card:nth-child(n+4),
.csn-pdp-reviews__list[data-csn-revealed="6"] > .csn-pdp-reviews__card:nth-child(n+7),
.csn-pdp-reviews__list[data-csn-revealed="9"] > .csn-pdp-reviews__card:nth-child(n+10),
.csn-pdp-reviews__list[data-csn-revealed="12"] > .csn-pdp-reviews__card:nth-child(n+13),
.csn-pdp-reviews__list[data-csn-revealed="15"] > .csn-pdp-reviews__card:nth-child(n+16),
.csn-pdp-reviews__list[data-csn-revealed="18"] > .csn-pdp-reviews__card:nth-child(n+19),
.csn-pdp-reviews__list[data-csn-revealed="21"] > .csn-pdp-reviews__card:nth-child(n+22),
.csn-pdp-reviews__list[data-csn-revealed="24"] > .csn-pdp-reviews__card:nth-child(n+25),
.csn-pdp-reviews__list[data-csn-revealed="27"] > .csn-pdp-reviews__card:nth-child(n+28),
.csn-pdp-reviews__list[data-csn-revealed="30"] > .csn-pdp-reviews__card:nth-child(n+31),
.csn-pdp-reviews__list[data-csn-revealed="33"] > .csn-pdp-reviews__card:nth-child(n+34),
.csn-pdp-reviews__list[data-csn-revealed="36"] > .csn-pdp-reviews__card:nth-child(n+37),
.csn-pdp-reviews__list[data-csn-revealed="39"] > .csn-pdp-reviews__card:nth-child(n+40),
.csn-pdp-reviews__list[data-csn-revealed="42"] > .csn-pdp-reviews__card:nth-child(n+43),
.csn-pdp-reviews__list[data-csn-revealed="45"] > .csn-pdp-reviews__card:nth-child(n+46),
.csn-pdp-reviews__list[data-csn-revealed="48"] > .csn-pdp-reviews__card:nth-child(n+49),
.csn-pdp-reviews__list[data-csn-revealed="51"] > .csn-pdp-reviews__card:nth-child(n+52),
.csn-pdp-reviews__list[data-csn-revealed="54"] > .csn-pdp-reviews__card:nth-child(n+55),
.csn-pdp-reviews__list[data-csn-revealed="57"] > .csn-pdp-reviews__card:nth-child(n+58),
.csn-pdp-reviews__list[data-csn-revealed="60"] > .csn-pdp-reviews__card:nth-child(n+61),
.csn-pdp-reviews__list[data-csn-revealed="63"] > .csn-pdp-reviews__card:nth-child(n+64),
.csn-pdp-reviews__list[data-csn-revealed="66"] > .csn-pdp-reviews__card:nth-child(n+67),
.csn-pdp-reviews__list[data-csn-revealed="69"] > .csn-pdp-reviews__card:nth-child(n+70),
.csn-pdp-reviews__list[data-csn-revealed="72"] > .csn-pdp-reviews__card:nth-child(n+73),
.csn-pdp-reviews__list[data-csn-revealed="75"] > .csn-pdp-reviews__card:nth-child(n+76),
.csn-pdp-reviews__list[data-csn-revealed="78"] > .csn-pdp-reviews__card:nth-child(n+79),
.csn-pdp-reviews__list[data-csn-revealed="81"] > .csn-pdp-reviews__card:nth-child(n+82),
.csn-pdp-reviews__list[data-csn-revealed="84"] > .csn-pdp-reviews__card:nth-child(n+85),
.csn-pdp-reviews__list[data-csn-revealed="87"] > .csn-pdp-reviews__card:nth-child(n+88),
.csn-pdp-reviews__list[data-csn-revealed="90"] > .csn-pdp-reviews__card:nth-child(n+91),
.csn-pdp-reviews__list[data-csn-revealed="93"] > .csn-pdp-reviews__card:nth-child(n+94),
.csn-pdp-reviews__list[data-csn-revealed="96"] > .csn-pdp-reviews__card:nth-child(n+97),
.csn-pdp-reviews__list[data-csn-revealed="99"] > .csn-pdp-reviews__card:nth-child(n+100) {
	display: none;
}

.csn-pdp-reviews__more-wrap { margin-top: 18px; text-align: center; }
.csn-pdp-reviews__more {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	padding: 10px 16px;
	font-family: var(--cs-font-sans); font-size: 12px; font-weight: 600; line-height: 1;
	letter-spacing: 0.01em;
	color: var(--fg);
	background: transparent;
	border: 1.5px solid rgba(26,20,18,.18);
	border-radius: 100px;
	cursor: pointer;
	transition: opacity 220ms, transform 140ms, border-color 220ms;
}
.csn-pdp-reviews__more:hover { border-color: rgba(26,20,18,.35); }
.csn-pdp-reviews__more:active { transform: scale(0.98); }
body.csn-product-page .csn-pdp-reviews__more,
body.csn-product-page .csn-pdp-reviews__more:link,
body.csn-product-page .csn-pdp-reviews__more:visited,
body.csn-product-page .csn-pdp-reviews__more:hover,
body.csn-product-page .csn-pdp-reviews__more:focus,
body.csn-product-page .csn-pdp-reviews__more:active {
	color: var(--fg) !important;
	background: transparent !important;
	text-decoration: none !important;
}
.csn-pdp-reviews__more svg { transition: transform 220ms; }

.csn-pdp-info__answer ul,
.csn-pdp-info__answer ol { margin: 0 0 8px; padding-left: 1.1em; }
.csn-pdp-info__answer ul:last-child,
.csn-pdp-info__answer ol:last-child { margin-bottom: 0; }
.csn-pdp-info__answer li { margin: 0 0 4px; line-height: 1.6; color: var(--body-text); }
.csn-pdp-info__answer li:last-child { margin-bottom: 0; }
.csn-pdp-info__answer li::marker { color: var(--accent); }
/* /RM-PAG */


/* ============================================================
 * RM-FX1 — Fractional stars (layered overlay) + axis-label match + accordion-btn reset
 * Per design: Atoms.jsx Stars + Blocks.jsx labelStyle + Accordion no-divider-mid-row
 * ============================================================ */

/* --- Fractional star rendering: empty grey base + gold overlay clipped via --csn-star-fill --- */
.csn-pdp-stars__star { position: relative; display: inline-block; line-height: 0; }
.csn-pdp-stars__star-empty { display: inline-block; line-height: 0; }
.csn-pdp-stars__star-fill {
	position: absolute; top: 0; left: 0;
	display: inline-block; line-height: 0;
	clip-path: inset(0 calc(100% - var(--csn-star-fill, 0%)) 0 0);
	-webkit-clip-path: inset(0 calc(100% - var(--csn-star-fill, 0%)) 0 0);
	pointer-events: none;
}

/* --- Axis selected label: match the static label half exactly (caps, tracking, weight) --- */
.csn-pdp-axis__selected {
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	text-transform: inherit;
	letter-spacing: inherit;
	color: inherit;
	margin-left: 0;
}

/* --- Defensive: kill any inherited Astra/UA borders/outlines on the accordion title button --- */
body.csn-product-page .csn-pdp-info__btn,
body.csn-product-page .csn-pdp-info__btn:hover,
body.csn-product-page .csn-pdp-info__btn:focus,
body.csn-product-page .csn-pdp-info__btn:focus-visible,
body.csn-product-page .csn-pdp-info__btn:active,
body.csn-product-page .csn-pdp-info__btn[aria-expanded="true"] {
	border: none !important;
	border-bottom: none !important;
	outline: none !important;
	box-shadow: none !important;
}
.csn-pdp-info__row[data-open="1"] .csn-pdp-info__btn { padding-bottom: 12px; }
.csn-pdp-info__row[data-open="1"] .csn-pdp-info__answer { padding-top: 0; }

/* RM-FX1-STAR-FIX — ensure SVG paint fills correctly in layered fractional stars.
   csn_icon emits <svg fill="none" stroke="...">; without these rules the gold
   overlay shows only its stroke and the polygon stays hollow. */
.csn-pdp-stars__star-empty svg { fill: none; }
.csn-pdp-stars__star-fill svg  { fill: var(--accent); stroke: var(--accent); }
/* /RM-FX1-STAR-FIX */
/* /RM-FX1 */

/* ==========================================================================
   29. Choose-version cards — photoless variant (--solo)
   When no per-term photo is uploaded, the card collapses to a single-column
   text layout. No silhouette, no tone bg, no diagonal stripes — just clean
   typography matching Reasons / Reviews card vocabulary.
   ========================================================================== */
.csn-pdp-versions__body--solo {
	padding: 24px 22px 20px;
}
.csn-pdp-versions__body--solo .csn-pdp-versions__name {
	font-size: 24px;
}
.csn-pdp-versions__body--solo .csn-pdp-versions__price {
	margin-top: 8px;
	font-size: 18px;
}
.csn-pdp-versions__body--solo .csn-pdp-versions__includes {
	margin-top: 14px;
}

/* ============================================================
   PDP Edit-from-cart banner.
   ============================================================ */
.csn-pdp-edit-banner {
	margin: 0 0 14px;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	background: var(--accent-soft);
	border: 1px solid rgba(181,139,91,.28);
	border-radius: 12px;
	font-family: var(--cs-font-sans);
	font-size: 13px;
	color: var(--fg);
}
.csn-pdp-edit-banner__text { flex: 1; font-weight: 600; }
.csn-pdp-edit-banner__cancel {
	color: var(--accent);
	text-decoration: underline;
	font-weight: 600;
	font-size: 12.5px;
}
.csn-pdp-edit-banner__cancel:hover { text-decoration: none; }


/* “See more real brides” link below Read more button — italic gold accent CTA. */
.csn-pdp-reviews__seeall {
	margin-top: 16px;
	text-align: center;
}
.csn-pdp-reviews__seeall a {
	font-family: var(--cs-font-serif);
	font-style: italic;
	font-weight: 500;
	font-size: 16px;
	color: var(--accent);
	text-decoration: none;
	border-bottom: 1px solid rgba(181,139,91,.35);
	padding-bottom: 2px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	transition: border-color 220ms, opacity 220ms;
}
.csn-pdp-reviews__seeall a:hover {
	border-bottom-color: var(--accent);
}
/* Astra .button blue override defeat — keep gold on all states */
body.csn-product-page .csn-pdp-reviews__seeall a,
body.csn-product-page .csn-pdp-reviews__seeall a:link,
body.csn-product-page .csn-pdp-reviews__seeall a:visited,
body.csn-product-page .csn-pdp-reviews__seeall a:hover,
body.csn-product-page .csn-pdp-reviews__seeall a:focus,
body.csn-product-page .csn-pdp-reviews__seeall a:active {
	color: var(--accent) !important;
}
.csn-pdp-reviews__seeall a span.csn-italic-accent { color: inherit; }
@media (min-width: 768px) {
	.csn-pdp-reviews__seeall { margin-top: 20px; }
	.csn-pdp-reviews__seeall a { font-size: 18px; }
}

/* Pinterest "Pin it" button — stealth mode (desktop only, icon only) */
.csn-pdp-gallery { position: relative; }
.csn-pdp-gallery__pin {
	position: absolute;
	top: 18px;
	right: 18px;
	z-index: 5;
	display: none; /* hidden on mobile (Pinterest discovery happens desktop) */
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	background: rgba(255, 255, 255, 0.85);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	border-radius: 50%;
	color: #BD081C;
	text-decoration: none;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
	opacity: 0.7;
	transition: opacity 0.18s ease, transform 0.18s ease;
}
.csn-pdp-gallery__pin:hover,
.csn-pdp-gallery__pin:focus {
	opacity: 1;
	transform: scale(1.05);
	color: #BD081C !important;
	text-decoration: none;
}
.csn-pdp-gallery__pin svg { display: block; width: 13px; height: 13px; }

@media (min-width: 768px) {
	.csn-pdp-gallery__pin { display: inline-flex; }
}