/* ============================================================
   Brushnail — CANNI-style product detail page
   ============================================================ */

.bn-pdp { padding: 18px 0 0; }
.bn-pdp-wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }

/* ---------- Breadcrumb ---------- */
.bn-pdp-crumb {
	font-size: 12px;
	letter-spacing: .04em;
	color: #9a8f83;
	margin: 4px 0 26px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}
.bn-pdp-crumb a { color: #9a8f83; }
.bn-pdp-crumb a:hover { color: var(--bn-ink); }
.bn-pdp-crumb .bn-crumb-sep { color: #c9c0b6; }
.bn-pdp-crumb .is-current { color: var(--bn-ink); }

/* ---------- Layout ---------- */
.bn-pdp-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
	gap: 56px;
	align-items: start;
}

/* ---------- Gallery ---------- */
.bn-gal { position: relative; }
.bn-gal-stage {
	position: relative;
	border: 1px solid #e6e0d8;
	background: #fbf8f4;
	padding: 10px;
}
.bn-gal-viewport {
	position: relative;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background: #fbf8f4;
}
.bn-gal-slide {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
.bn-gal-slide[hidden] { display: none; }
.bn-gal-img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.bn-gal-video {
	width: 100%;
	height: 100%;
	object-fit: contain;
	background: #0b0b0b;
}
.bn-gal-ph { width: 100%; height: 100%; background: var(--bn-cream); }

/* arrows */
.bn-gal-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, .86);
	border: 1px solid #e6e0d8;
	border-radius: 50%;
	color: #222;
	cursor: pointer;
	transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.bn-gal-arrow svg { width: 20px; height: 20px; }
.bn-gal-arrow:hover { background: #111; color: #fff; border-color: #111; }
.bn-gal-arrow.is-prev { left: 18px; }
.bn-gal-arrow.is-next { right: 18px; }

/* thumbnails */
.bn-gal-thumbs {
	display: flex;
	gap: 10px;
	margin-top: 14px;
	flex-wrap: wrap;
}
.bn-gal-thumb {
	position: relative;
	width: 72px;
	height: 72px;
	padding: 0;
	border: 1px solid #e6e0d8;
	background: #fbf8f4;
	cursor: pointer;
	overflow: hidden;
	transition: border-color .18s ease;
}
.bn-gal-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bn-gal-thumb:hover { border-color: #b9aea2; }
.bn-gal-thumb.is-active { border-color: #111; box-shadow: 0 0 0 1px #111 inset; }
.bn-thumb-play {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, .28);
	color: #fff;
}
.bn-thumb-play svg { width: 22px; height: 22px; fill: currentColor; }

/* ---------- Buy box ---------- */
.bn-pdp-info { padding-top: 6px; }

.bn-pdp-title {
	font-family: var(--bn-serif);
	font-weight: 600;
	font-size: clamp(30px, 3vw, 42px);
	line-height: 1.1;
	letter-spacing: .01em;
	margin: 0 0 14px;
	color: var(--bn-ink);
}

.bn-pdp-price {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 10px;
}
.bn-price-now { font-size: 22px; font-weight: 500; color: var(--bn-ink); }
.bn-price-was { font-size: 16px; color: #a79b8e; }
.bn-price-off {
	font-size: 11px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #b33a2b;
	background: #f7e9e5;
	padding: 3px 9px;
	border-radius: 999px;
}

.bn-pdp-rating { display: flex; align-items: center; gap: 3px; margin: 0 0 10px; }
.bn-star { font-size: 15px; color: #ddd6cc; line-height: 1; }
.bn-star.is-on { color: #d8a52a; }
.bn-rating-count { font-size: 13px; color: #8d8174; margin-left: 4px; }

.bn-pdp-note { font-size: 13px; color: #6f6459; margin: 0 0 16px; }

.bn-pdp-sku {
	font-size: 11px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #8d8174;
	margin: 0 0 16px;
}
.bn-pdp-sku b { color: var(--bn-ink); font-weight: 500; }

.bn-pdp-variant { display: flex; align-items: center; gap: 14px; margin: 0 0 22px; }
.bn-swatch {
	width: 46px;
	height: 46px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #171717;
	color: #fff;
	font-size: 10px;
	letter-spacing: .1em;
	border: 1px solid #171717;
}
.bn-variant-label { font-size: 13px; color: #6f6459; }

/* quantity */
.bn-qty { margin: 0 0 14px; }
.bn-qty-label {
	display: block;
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #8d8174;
	margin-bottom: 8px;
}
.bn-qty-box {
	display: inline-flex;
	align-items: center;
	border: 1px solid #d9d2c9;
	height: 46px;
}
.bn-qty-btn {
	width: 44px;
	height: 100%;
	border: 0;
	background: #fff;
	color: #222;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	transition: background .15s ease;
}
.bn-qty-btn:hover { background: #f5f1ec; }
.bn-qty-input {
	width: 54px;
	height: 100%;
	border: 0;
	text-align: center;
	font-family: var(--bn-sans);
	font-size: 15px;
	color: #222;
	background: #fff;
	-moz-appearance: textfield;
}
.bn-qty-input::-webkit-outer-spin-button,
.bn-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* buttons */
.bn-btn-atc {
	display: block;
	width: 100%;
	height: 52px;
	background: #fff;
	color: #111;
	border: 1px solid #111;
	text-transform: uppercase;
	letter-spacing: .18em;
	font-family: var(--bn-sans);
	font-size: 12px;
	font-weight: 500;
	cursor: pointer;
	transition: background .2s ease, color .2s ease;
}
.bn-btn-atc:hover { background: #111; color: #fff; }

.bn-buy-form { margin: 10px 0 0; }
.bn-btn-buy {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	width: 100%;
	height: 52px;
	background: var(--bn-ink);
	color: #fff;
	border: 0;
	font-family: var(--bn-sans);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: .01em;
	cursor: pointer;
	transition: background .2s ease;
}
.bn-btn-buy svg { width: 19px; height: 19px; }
.bn-btn-buy:hover { background: #3a2c20; color: #fff; }

.bn-more-pay {
	display: block;
	text-align: center;
	font-size: 13px;
	color: #5f5549;
	text-decoration: underline;
	text-underline-offset: 3px;
	margin: 12px 0 20px;
}
.bn-more-pay:hover { color: #111; }

.bn-ship-note {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	color: #5f5549;
	background: #faf7f3;
	border: 1px solid #f0e9e1;
	padding: 12px 14px;
	margin: 0 0 24px;
}
.bn-ship-note svg { width: 20px; height: 20px; flex: 0 0 auto; }

/* accordions */
.bn-acc { border-top: 1px solid #e7e0d7; }
.bn-acc-item { border-bottom: 1px solid #e7e0d7; }
.bn-acc-item summary {
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 0;
	font-size: 12px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--bn-ink);
	cursor: pointer;
}
.bn-acc-item summary::-webkit-details-marker { display: none; }
.bn-acc-item summary::after {
	content: "+";
	font-size: 19px;
	font-weight: 300;
	line-height: 1;
	color: #6f6459;
}
.bn-acc-item[open] summary::after { content: "\2212"; }
.bn-acc-body { padding: 0 0 18px; font-size: 14px; line-height: 1.75; color: #5f5549; }
.bn-acc-body p { margin: 0 0 10px; }
.bn-acc-body ul { margin: 0; padding-left: 18px; }
.bn-acc-body li { margin: 0 0 6px; }

/* share / ask */
.bn-pdp-assist { display: flex; align-items: center; gap: 26px; margin: 20px 0 0; }
.bn-assist-link {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	background: none;
	border: 0;
	padding: 0;
	font-family: var(--bn-sans);
	font-size: 13px;
	color: #5f5549;
	cursor: pointer;
}
.bn-assist-link svg { width: 17px; height: 17px; }
.bn-assist-link:hover { color: #111; }

/* ---------- Trust marquee ---------- */
.bn-marquee {
	margin-top: 64px;
	background: #f7f4f0;
	border-top: 1px solid #ece5dd;
	border-bottom: 1px solid #ece5dd;
	overflow: hidden;
	padding: 14px 0;
}
.bn-marquee-track {
	display: flex;
	width: max-content;
	animation: bn-marquee 30s linear infinite;
}
.bn-marquee-item {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 0 34px;
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #4f463c;
	white-space: nowrap;
}
.bn-marquee-item svg { width: 18px; height: 18px; fill: #6f6459; }
@keyframes bn-marquee {
	from { transform: translateX(0); }
	to { transform: translateX(-25%); }
}
@media (prefers-reduced-motion: reduce) {
	.bn-marquee-track { animation: none; }
}

/* ---------- Related ---------- */
.bn-pdp-related { padding: 72px 0 48px; }
.bn-related-title {
	font-family: var(--bn-serif);
	font-weight: 600;
	font-size: clamp(26px, 2.6vw, 34px);
	text-align: center;
	margin: 0 0 34px;
	color: var(--bn-ink);
}

/* ---------- Notices ---------- */
.bn-pdp .woocommerce-message,
.bn-pdp .woocommerce-info,
.bn-pdp .woocommerce-error {
	max-width: 1180px;
	margin: 0 auto 18px;
	padding: 14px 18px;
	border: 1px solid #e7e0d7;
	background: #faf7f3;
	font-size: 14px;
	list-style: none;
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
	.bn-pdp-grid { grid-template-columns: 1fr; gap: 34px; }
	.bn-gal-thumb { width: 62px; height: 62px; }
	.bn-gal-arrow.is-prev { left: 10px; }
	.bn-gal-arrow.is-next { right: 10px; }
	.bn-pdp-related { padding: 48px 0 32px; }
}
@media (max-width: 560px) {
	.bn-pdp-wrap { padding: 0 16px; }
	.bn-gal-stage { padding: 6px; }
	.bn-btn-atc, .bn-btn-buy { height: 48px; }
}

/* ---------- Toast ---------- */
.bn-toast {
	position: fixed;
	left: 50%;
	bottom: 28px;
	transform: translateX(-50%);
	z-index: 9999;
	background: #171717;
	color: #fff;
	font-size: 13px;
	letter-spacing: .04em;
	padding: 12px 20px;
	border-radius: 4px;
	max-width: 88vw;
	box-shadow: 0 10px 30px rgba(0,0,0,.22);
}

/* ---------- Gallery video poster + play ---------- */
.bn-video-play {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 76px;
	height: 76px;
	border-radius: 50%;
	border: 0;
	background: rgba(255, 255, 255, .93);
	color: #111;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 14px 34px rgba(0, 0, 0, .22);
	z-index: 3;
	transition: transform .18s ease, background .18s ease;
}
.bn-video-play svg { width: 28px; height: 28px; fill: currentColor; margin-left: 4px; }
.bn-video-play:hover { background: #fff; transform: translate(-50%, -50%) scale(1.06); }
.bn-gal-slide.is-playing .bn-video-play { display: none; }