/*
 * My House Aura - the product page.
 *
 * The summary column is rebuilt in aura-pdp.php in the reference's order; this styles it, plus the
 * add-ons, Frequently Bought Together, Compare Similar Items, questions and the sticky bar.
 */

/* ------------------------------------------------------------------ summary column */

.aura-pdp__brand {
	display: inline-block;
	margin: 0 0 6px;
	font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
	color: var(--aura-navy, #12284c);
}
.product_title { margin: 0 0 10px; font-size: 28px; line-height: 1.22; }

.aura-pdp__rating {
	display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
	margin: 0 0 14px;
	font-size: 13px; color: #555;
}
.aura-pdp__rating .aura-card__stars { margin: 0; }
.aura-pdp__rating-n { font-weight: 700; color: #1d1d1d; }
.aura-pdp__rating a { color: var(--aura-navy, #12284c); }
.aura-pdp__sku { margin-left: auto; color: #8a8a8a; font-size: 12px; }

.aura-pdp__price {
	display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px;
	margin: 0 0 12px;
}
.aura-pdp__now { font-size: 30px; font-weight: 700; color: var(--aura-sale, #c8102e); }
.aura-pdp__was { font-size: 16px; color: #8a8a8a; text-decoration: line-through; }
.aura-pdp__save {
	padding: 3px 8px; border-radius: 3px;
	background: #fdeaea;
	font-size: 13px; font-weight: 700; color: var(--aura-sale, #c8102e);
}
.aura-pdp__intro { margin: 0 0 16px; color: #444; }

/* ------------------------------------------------------------------ swatches */

.aura-swatches { margin: 0 0 18px; }
.aura-swatches__label { margin: 0 0 8px; font-size: 14px; color: #444; }
.aura-swatches__row { display: flex; flex-wrap: wrap; gap: 8px; }
.aura-swatch {
	display: block;
	width: 34px; height: 34px; min-width: 34px;
	border: 1px solid #d0d0d0; border-radius: 50%;
	background: var(--sw, #ddd);
	box-shadow: inset 0 0 0 2px #fff;
}
.aura-swatch.is-on,
.aura-swatch:hover { border-color: var(--aura-navy, #12284c); box-shadow: inset 0 0 0 2px #fff, 0 0 0 1px var(--aura-navy, #12284c); }

/* ------------------------------------------------------------------ add-ons */

/* form.cart is display:flex;flex-wrap:wrap, so this fieldset became a 395px flex ITEM and the 117px
   quantity stepper fitted beside it - the stepper ended up floating next to the 3-year plan row
   instead of next to Add to Cart. Claim the whole row. */
.aura-addons {
	flex: 0 0 100%; width: 100%; box-sizing: border-box;
	margin: 18px 0; padding: 0;
	border: 0;
}
/* And keep the quantity beside the button rather than wrapping away from it. */
form.cart .quantity { order: 1; margin-right: 10px; }
form.cart .single_add_to_cart_button { order: 2; }
form.cart .woosw-btn, form.cart .woosc-btn { order: 3; }

/* The theme prints its Compare button twice: once inside form.cart and once as a direct child of the
   summary. Keep the one in the form, drop the stray copy. */
.summary > .woosc-btn { display: none; }
.aura-addons legend {
	padding: 0; margin: 0 0 8px;
	font-size: 14px; font-weight: 700; color: #1d1d1d;
}
.aura-addon {
	display: flex; align-items: flex-start; gap: 10px;
	margin: 0 0 8px; padding: 12px;
	border: 1px solid #dcdcdc; border-radius: 6px;
	cursor: pointer;
}
.aura-addon:hover { border-color: var(--aura-navy, #12284c); }
/* The real checkbox stays in the layout for the keyboard but is not what is seen. */
.aura-addon input { position: absolute; opacity: 0; width: 0; height: 0; }
.aura-addon__box {
	width: 18px; height: 18px; flex: 0 0 auto;
	margin-top: 2px;
	border: 1px solid #8a8a8a; border-radius: 3px;
	background: #fff; position: relative;
}
.aura-addon input:checked + .aura-addon__box {
	border-color: var(--aura-navy, #12284c);
	background: var(--aura-navy, #12284c);
}
.aura-addon input:checked + .aura-addon__box::after {
	content: ""; position: absolute;
	left: 6px; top: 2px; width: 4px; height: 9px;
	border-right: 2px solid #fff; border-bottom: 2px solid #fff;
	transform: rotate(45deg);
}
.aura-addon input:focus-visible + .aura-addon__box { outline: 2px solid var(--aura-navy, #12284c); outline-offset: 2px; }
.aura-addon__text { flex: 1 1 auto; min-width: 0; }
.aura-addon__title { display: block; font-size: 14px; font-weight: 600; }
.aura-addon__note { display: block; font-size: 12px; color: #6b6b6b; }
.aura-addon__price { flex: 0 0 auto; font-size: 14px; font-weight: 700; }

/* ------------------------------------------------------------------ delivery */

.aura-fulfil {
	margin: 18px 0 0; padding: 14px 16px;
	border: 1px solid #e4e4e4; border-radius: 6px;
	list-style: none;
}
.aura-fulfil li {
	display: flex; align-items: flex-start; gap: 10px;
	margin: 0 0 10px;
	font-size: 14px; color: #333;
}
.aura-fulfil li:last-child { margin-bottom: 0; }
.aura-fulfil .aura-i { flex: 0 0 auto; margin-top: 2px; color: var(--aura-navy, #12284c); }

/* ------------------------------------------------------------------ below the fold */

.aura-fbt, .aura-compare, .aura-qa { margin: 48px auto 0; }
.aura-fbt h2, .aura-compare h2, .aura-qa h2 {
	margin: 0 0 18px; font-size: 22px; color: var(--aura-navy, #12284c);
}

.aura-fbt__row {
	display: flex; align-items: center; flex-wrap: wrap; gap: 28px;
	padding: 20px; border: 1px solid #e4e4e4; border-radius: 8px;
}
.aura-fbt__items { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.aura-fbt__item {
	display: block; width: 132px;
	font-size: 13px; text-decoration: none; color: #1d1d1d;
}
.aura-fbt__item img { display: block; width: 100%; height: auto; border-radius: 4px; }
.aura-fbt__name { display: block; margin: 8px 0 2px; }
.aura-fbt__price { display: block; font-weight: 700; }
.aura-fbt__plus { font-size: 22px; color: #8a8a8a; }
.aura-fbt__buy { margin-left: auto; text-align: right; }
.aura-fbt__total { margin: 0 0 10px; font-size: 15px; }

.aura-btn {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 46px; padding: 12px 22px;
	border: 0; border-radius: 4px;
	background: var(--aura-navy, #12284c); cursor: pointer;
	font: inherit; font-size: 15px; font-weight: 700;
	color: #fff; text-decoration: none;
}
.aura-btn:hover { background: #0d1e39; color: #fff; }

.aura-compare__scroll { overflow-x: auto; }
.aura-compare__table {
	width: 100%; border-collapse: collapse;
	font-size: 14px;
}
.aura-compare__table th,
.aura-compare__table td {
	padding: 12px; border: 1px solid #e4e4e4; text-align: left; vertical-align: top;
}
.aura-compare__table thead td { width: 22%; }
.aura-compare__table thead img { display: block; width: 100%; max-width: 132px; height: auto; margin-bottom: 8px; }
.aura-compare__table thead a { font-size: 13px; text-decoration: none; color: #1d1d1d; }
.aura-compare__table th[scope="row"] { width: 12%; font-weight: 700; background: #fafafa; }
.aura-compare__table .is-this { background: #f5f8fd; }
.aura-compare__badge {
	margin: 8px 0 0; font-size: 11px; font-weight: 700; text-transform: uppercase;
	color: var(--aura-navy, #12284c);
}

.aura-qa__list { margin: 0 0 24px; padding: 0; list-style: none; }
.aura-qa__list li { padding: 14px 0; border-bottom: 1px solid #eee; }
.aura-qa__q { margin: 0 0 6px; font-weight: 700; }
.aura-qa__a { margin: 0 0 0 16px; color: #444; }
.aura-qa__empty, .aura-qa__thanks { margin: 0 0 18px; color: #555; }
.aura-qa__form { max-width: 620px; }
.aura-qa__form label { display: block; margin: 0 0 6px; font-weight: 700; }
.aura-qa__form textarea {
	width: 100%; box-sizing: border-box; margin: 0 0 12px; padding: 10px 12px;
	border: 1px solid #c9c9c9; border-radius: 4px;
	font: inherit; font-size: 15px;
}

.aura-specs { width: 100%; border-collapse: collapse; font-size: 14px; }
.aura-specs th, .aura-specs td { padding: 10px 12px; border-bottom: 1px solid #eee; text-align: left; }
.aura-specs th { width: 200px; font-weight: 700; }

/* ------------------------------------------------------------------ sticky bar */

/* The reference pins this to the TOP of the product page, not the bottom. */
.aura-pdp-sticky {
	position: fixed; left: 0; right: 0; top: 0; z-index: 900;
	padding: 10px 0;
	border-bottom: 1px solid #e0e0e0;
	background: var(--aura-cream, #F6F3EA);
	box-shadow: 0 6px 20px rgba(0, 0, 0, .08);
}
.aura-pdp-sticky[hidden] { display: none; }
.aura-pdp-sticky__in { display: flex; align-items: center; gap: 14px; }
.aura-pdp-sticky img { width: 46px; height: 46px; object-fit: contain; flex: 0 0 auto; }
.aura-pdp-sticky__name { flex: 1 1 auto; min-width: 0; font-size: 14px; font-weight: 600;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aura-pdp-sticky__price { flex: 0 0 auto; font-size: 16px; font-weight: 700; }

/* ------------------------------------------------------------------ phone */

@media (max-width: 782px) {
	.product_title { font-size: 22px; }
	.aura-pdp__now { font-size: 24px; }
	.aura-pdp__sku { margin-left: 0; width: 100%; }

	.aura-fbt__row { gap: 18px; padding: 16px; }
	.aura-fbt__buy { margin-left: 0; width: 100%; text-align: left; }
	.aura-fbt__buy .aura-btn { width: 100%; }
	.aura-fbt__item { width: 96px; }

	/* The comparison keeps its columns and scrolls, rather than collapsing into an unreadable stack. */
	.aura-compare__table { min-width: 620px; }

	.aura-pdp-sticky__name { display: none; }
	.aura-pdp-sticky .aura-btn { flex: 1 1 auto; }
}


/* ------------------------------------------------------------------ reference alignment
 * The reference storefront's product page could not be captured - it is behind a bot block - so these
 * are aligned to the conventions its home page, header and footer DO show: the navy/cream palette,
 * uppercase section headings in the body face, cream section grounds, and square-cornered controls.
 * Anything that needs the real product page should be checked against it by hand before sign-off.
 */

/* Section headings on the reference are uppercase, centred and tracked out. */
.aura-fbt h2, .aura-compare h2, .aura-qa h2 {
	text-align: center;
	font-size: 32px; font-weight: 700; letter-spacing: normal; text-transform: uppercase;
}

/* Its panels sit on the cream ground rather than on white with a border. */
.aura-fbt__row {
	background: #F7F5F0;
	border: 1px solid rgba(0, 0, 0, .06);
	border-radius: 2px;
}
.aura-fulfil {
	background: #F7F5F0;
	border: 1px solid rgba(0, 0, 0, .06);
	border-radius: 2px;
}
.aura-addon { border-radius: 2px; }
.aura-btn { border-radius: 2px; }

/* The header keeps its buttons square, so the cart button should not be the one rounded thing. */
.aura-pdp-sticky .aura-btn { border-radius: 2px; }

/* Price treatment: the reference sets the live price large and navy-dark, with the saving in the
   sale red beside it rather than as a filled chip. */
.aura-pdp__now { color: var(--aura-sale, #C8102E); letter-spacing: -.01em; }
.aura-pdp__save { background: none; padding: 0; }

/* The comparison table's header row uses the cream ground, matching the mega panel. */
.aura-compare__table th[scope="row"] { background: #F7F5F0; }
.aura-compare__table .is-this { background: #EEF2F8; }