/* ==========================================================================
   LG-Akure — single product page
   Loaded only on a product (see lgakure_enqueue_product_styles).

   Same surface language as the front page: pale ground, white cards, generous
   radii, pill buttons, navy for solid surfaces and gold for emphasis. The
   variables are redeclared here rather than shared, so a product page never
   depends on home.css being present.
   ========================================================================== */

.lga-product {
	--lga-fill: #0B1220;
	--lga-fill-hover: #1F2C46;
	--lga-accent-700: #8F5E0E;
	--lga-accent: #B47814;
	--lga-accent-100: #FDF3DF;
	--lga-page: #F5F7FA;
	--lga-card: #FFFFFF;
	--lga-cta: #D99425;
	--lga-cta-hover: #EFB13F;
	--lga-r-card: 20px;
	--lga-r-inner: 14px;
	--lga-r-pill: 999px;
	--lga-sh-card: 0 2px 10px rgba(11, 18, 32, .06);
	--lga-sh-lift: 0 12px 30px rgba(11, 18, 32, .12);
	--lga-pad-x: clamp(18px, 4vw, 44px);

	background: var(--lga-page);
	padding: 0 var(--lga-pad-x) clamp(30px, 4vw, 54px);
}

.lga-product > * {
	max-width: var(--wp--style--global--wide-size, 1240px);
	margin-inline: auto;
}

.lga-product__crumbs {
	padding: 16px 0 14px;
	font-size: 12.5px;
	color: var(--wp--preset--color--ink-400);
}

.lga-product__crumbs a {
	color: var(--wp--preset--color--ink-400);
	text-decoration: none;
}

.lga-product__crumbs a:hover { color: var(--lga-accent-700); }

/* ==========================================================================
   TOP HALF — gallery and buy box
   ========================================================================== */

.lga-pdp {
	display: grid;
	grid-template-columns: 1.05fr .95fr;
	gap: clamp(18px, 2.4vw, 34px);
	align-items: start;
	margin-block: 0;
}

.lga-pdp > * { margin-block: 0; }

.lga-pdp__media {
	background: var(--lga-card);
	border-radius: var(--lga-r-card);
	box-shadow: var(--lga-sh-card);
	padding: clamp(14px, 1.8vw, 22px);
	position: sticky;
	top: 96px;
}

.lga-pdp__media img {
	border-radius: var(--lga-r-inner);
	background: var(--lga-page);
}

/* Woo's gallery thumbnails, given the same card treatment as everything else. */
.lga-pdp__media .flex-control-thumbs {
	display: flex;
	gap: 10px;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}

.lga-pdp__media .flex-control-thumbs li {
	width: auto;
	flex: 0 0 76px;
	margin: 0;
}

.lga-pdp__media .flex-control-thumbs img {
	border: 1.5px solid var(--wp--preset--color--line);
	border-radius: 12px;
	opacity: 1;
	padding: 4px;
}

.lga-pdp__media .flex-control-thumbs img.flex-active,
.lga-pdp__media .flex-control-thumbs img:hover {
	border-color: var(--lga-fill);
}

.lga-pdp__buy {
	background: var(--lga-card);
	border-radius: var(--lga-r-card);
	box-shadow: var(--lga-sh-card);
	padding: clamp(20px, 2.4vw, 30px);
}

.lga-pdp__buy > * { margin-block: 0; }

.lga-pdp__brand {
	margin: 0 0 8px;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--lga-accent-700);
}

.lga-pdp__brand a { color: inherit; text-decoration: none; }

.lga-pdp__title {
	margin: 0 0 10px;
	color: var(--wp--preset--color--ink-900);
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(23px, 2.8vw, 32px);
	line-height: 1.14;
	font-weight: 800;
	letter-spacing: -.028em;
}

.lga-pdp__buy .wp-block-woocommerce-product-rating { margin: 0 0 14px; }

.lga-pdp__pricing {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin: 0 0 14px;
	padding: 0 0 16px;
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.lga-pdp__pricing > * { margin-block: 0; }

.lga-pdp__pricing .price,
.lga-pdp__pricing .wc-block-components-product-price {
	font-size: clamp(26px, 3vw, 34px);
	line-height: 1.1;
	color: var(--wp--preset--color--ink-900);
}

/* The struck-through original sits above the payable figure, never beside it,
   so the number actually being asked for owns the largest line. */
.lga-pdp__pricing del {
	display: block;
	font-size: 14px;
	margin-bottom: 2px;
}

.lga-pdp__pricing ins { display: block; }

.lga-save {
	display: inline-flex;
	align-items: center;
	padding: 6px 12px;
	border-radius: var(--lga-r-pill);
	background: var(--wp--preset--color--green-100);
	color: var(--wp--preset--color--green-700, #0C6247);
	font-family: var(--wp--preset--font-family--display);
	font-size: 12.5px;
	font-weight: 800;
	white-space: nowrap;
}

.lga-save .woocommerce-Price-amount { font-size: inherit; color: inherit; }

.lga-pdp__spec {
	margin: 0 0 20px;
	color: var(--wp--preset--color--ink-500);
	font-size: 14px;
	line-height: 1.6;
}

/* ==========================================================================
   BUY BOX
   ========================================================================== */

.lga-buy { margin: 0 0 18px; }

.lga-buy .quantity {
	display: inline-flex;
	margin: 0 10px 10px 0;
}

.lga-buy .quantity input {
	width: 74px;
	min-height: 52px;
	padding: 0 10px;
	border: 1.5px solid var(--wp--preset--color--ink-200);
	border-radius: var(--lga-r-pill);
	text-align: center;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	color: var(--wp--preset--color--ink-900);
}

/* The primary action is gold on white here, where the promo panels use gold
   on navy. Same rule either way: the gold thing is the thing to press. */
.lga-buy .single_add_to_cart_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 54px;
	padding: 0 26px;
	border: none;
	border-radius: var(--lga-r-pill);
	background: var(--lga-cta);
	color: var(--wp--preset--color--ink-900);
	font-family: var(--wp--preset--font-family--display);
	font-size: 15px;
	font-weight: 800;
	letter-spacing: -.01em;
	cursor: pointer;
	box-shadow: 0 10px 24px rgba(217, 148, 37, .32);
}

.lga-buy .single_add_to_cart_button:hover { background: var(--lga-cta-hover); }

.lga-buy--both .lga-buy__cart { margin-bottom: 10px; }

.lga-buy__wa {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	min-height: 54px;
	padding: 0 24px;
	border-radius: var(--lga-r-pill);
	background: var(--wp--preset--color--green-600);
	color: #fff;
	font-family: var(--wp--preset--font-family--display);
	font-size: 15px;
	font-weight: 800;
	text-decoration: none;
	box-shadow: 0 10px 24px rgba(12, 98, 71, .28);
}

.lga-buy__wa:hover { background: var(--wp--preset--color--green-700, #0C6247); color: #fff; }

/* On a "both" product the cart is the default and WhatsApp is the quieter
   alternative, so it drops to an outline. On an "enquire" product WhatsApp IS
   the action and keeps the solid fill. */
.lga-buy--both .lga-buy__wa {
	background: transparent;
	border: 1.5px solid var(--wp--preset--color--green-600);
	color: var(--wp--preset--color--green-600);
	box-shadow: none;
	min-height: 48px;
	font-size: 14px;
}

.lga-buy--both .lga-buy__wa:hover {
	background: var(--wp--preset--color--green-600);
	color: #fff;
}

.lga-buy__wa::before {
	content: "";
	width: 17px;
	height: 17px;
	flex-shrink: 0;
	background-color: currentColor;
	-webkit-mask: var(--lga-i-chat) center / contain no-repeat;
	mask: var(--lga-i-chat) center / contain no-repeat;
}

.lga-buy__note,
.lga-buy__why {
	margin: 12px 0 0;
	font-size: 12px;
	line-height: 1.5;
	color: var(--wp--preset--color--ink-400);
	text-align: center;
}

.lga-buy__why { text-align: left; }

/* ==========================================================================
   TRUST GRID
   ========================================================================== */

.lga-ptrust {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1px;
	margin: 0;
	padding: 0;
	list-style: none;
	background: var(--wp--preset--color--line);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--lga-r-inner);
	overflow: hidden;
}

.lga-ptrust__item {
	position: relative;
	margin: 0;
	padding: 14px 14px 14px 46px;
	background: var(--lga-card);
}

.lga-ptrust__item::before {
	content: "";
	position: absolute;
	left: 14px;
	top: 15px;
	width: 22px;
	height: 22px;
	border-radius: 7px;
	background-color: var(--lga-accent-100);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 13px 13px;
}

.lga-ptrust__item--delivery::before { background-image: var(--lga-i-truck); }
.lga-ptrust__item--pay::before      { background-image: var(--lga-i-phone); }
.lga-ptrust__item--warranty::before { background-image: var(--lga-i-shield-b); }
.lga-ptrust__item--install::before  { background-image: var(--lga-i-tool); }

.lga-ptrust__item b {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-size: 12px;
	font-weight: 700;
	color: var(--wp--preset--color--ink-900);
	line-height: 1.3;
}

.lga-ptrust__item span {
	display: block;
	margin-top: 2px;
	font-size: 11px;
	line-height: 1.4;
	color: var(--wp--preset--color--ink-400);
}

/* ==========================================================================
   SECTIONS BELOW
   ========================================================================== */

.lga-why,
.lga-specs,
.lga-faq,
.lga-reviews,
.lga-pdp__desc,
.lga-related {
	margin-top: clamp(22px, 3vw, 34px);
}

.lga-why__head,
.lga-specs__head,
.lga-faq__head,
.lga-reviews__head,
.lga-related__head {
	margin: 0 0 16px;
	color: var(--wp--preset--color--ink-900);
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(19px, 2.2vw, 23px);
	line-height: 1.2;
	font-weight: 800;
	letter-spacing: -.024em;
}

.lga-why__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
}

.lga-why__card {
	position: relative;
	padding: 20px 18px 20px 62px;
	background: var(--lga-card);
	border-radius: var(--lga-r-card);
	box-shadow: var(--lga-sh-card);
}

.lga-why__card::before {
	content: "";
	position: absolute;
	left: 18px;
	top: 18px;
	width: 32px;
	height: 32px;
	border-radius: 10px;
	background-color: var(--lga-accent-100);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 17px 17px;
	background-image: var(--lga-i-check);
}

.lga-why__card b {
	font-family: var(--wp--preset--font-family--display);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--wp--preset--color--ink-900);
}

.lga-pdp__desc {
	background: var(--lga-card);
	border-radius: var(--lga-r-card);
	box-shadow: var(--lga-sh-card);
	padding: clamp(20px, 2.4vw, 30px);
	font-size: 14.5px;
	line-height: 1.7;
	color: var(--wp--preset--color--ink-500);
}

.lga-pdp__desc > * { margin-block: 0; }

.lga-specs__table {
	width: 100%;
	border-collapse: collapse;
	background: var(--lga-card);
	border-radius: var(--lga-r-card);
	box-shadow: var(--lga-sh-card);
	overflow: hidden;
}

.lga-specs__table th,
.lga-specs__table td {
	padding: 13px 18px;
	border-bottom: 1px solid var(--wp--preset--color--line);
	font-size: 13.5px;
	text-align: left;
	vertical-align: top;
}

.lga-specs__table tr:last-child th,
.lga-specs__table tr:last-child td { border-bottom: none; }

.lga-specs__table th {
	width: 38%;
	color: var(--wp--preset--color--ink-400);
	font-weight: 600;
}

.lga-specs__table td {
	color: var(--wp--preset--color--ink-900);
	font-weight: 600;
}

/* --- FAQ: native <details>, so it works with no JavaScript ---------------- */

.lga-faq__item {
	background: var(--lga-card);
	border-radius: var(--lga-r-inner);
	box-shadow: var(--lga-sh-card);
	margin-bottom: 8px;
	overflow: hidden;
}

.lga-faq__item summary {
	position: relative;
	list-style: none;
	cursor: pointer;
	padding: 16px 52px 16px 18px;
	font-family: var(--wp--preset--font-family--display);
	font-size: 14px;
	font-weight: 700;
	color: var(--wp--preset--color--ink-900);
}

.lga-faq__item summary::-webkit-details-marker { display: none; }

.lga-faq__item summary::after {
	content: "";
	position: absolute;
	right: 18px;
	top: 50%;
	width: 12px;
	height: 12px;
	transform: translateY(-50%) rotate(90deg);
	background-color: var(--wp--preset--color--ink-400);
	-webkit-mask: var(--lga-i-chev) center / contain no-repeat;
	mask: var(--lga-i-chev) center / contain no-repeat;
	transition: transform .18s ease;
}

.lga-faq__item[open] summary::after { transform: translateY(-50%) rotate(-90deg); }

.lga-faq__a {
	padding: 0 18px 18px;
	font-size: 13.5px;
	line-height: 1.65;
	color: var(--wp--preset--color--ink-500);
}

.lga-faq__a p { margin: 0; }

/* --- related products ----------------------------------------------------- */

.lga-related ul.products {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.lga-related ul.products::before,
.lga-related ul.products::after { content: none; }

.lga-related ul.products li.product {
	width: auto;
	margin: 0;
	padding: 10px 10px 14px;
	float: none;
	display: flex;
	flex-direction: column;
	background: var(--lga-card);
	border-radius: var(--lga-r-card);
	box-shadow: var(--lga-sh-card);
}

.lga-related ul.products li.product img {
	margin: 0 0 12px;
	border-radius: var(--lga-r-inner);
	aspect-ratio: 1 / 1;
	object-fit: contain;
	background: var(--lga-page);
	padding: 10px;
}

.lga-related ul.products li.product .woocommerce-loop-product__title {
	padding: 0 4px;
	margin: 0 0 6px;
	font-family: var(--wp--preset--font-family--display);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.32;
	color: var(--wp--preset--color--ink-900);
}

.lga-related ul.products li.product .price { margin: 0 4px 10px; font-size: 16px; }

.lga-related ul.products li.product .button {
	margin-top: auto;
	min-height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--lga-r-pill);
	background: var(--lga-fill);
	color: #fff;
	font-family: var(--wp--preset--font-family--display);
	font-size: 12.5px;
	font-weight: 700;
}

.lga-related ul.products li.product .button:hover { background: var(--lga-fill-hover); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 980px) {
	.lga-pdp { grid-template-columns: 1fr; }
	.lga-pdp__media { position: static; }
	.lga-why__grid { grid-template-columns: 1fr; }
	.lga-related ul.products { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
	.lga-ptrust { grid-template-columns: 1fr; }
	.lga-specs__table th { width: 46%; }
}

@media (prefers-reduced-motion: reduce) {
	.lga-faq__item summary::after { transition: none; }
}

/* ==========================================================================
   ICONS
   Redeclared rather than shared with home.css, so a product page never
   depends on the front page's stylesheet being loaded.
   ========================================================================== */

.lga-product {
	--lga-i-chat:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.4 8.4 0 0 1-12.6 7.3L3 20.5l1.8-5.3A8.4 8.4 0 1 1 21 11.5Z'/%3E%3C/svg%3E");
	--lga-i-chev:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E");
	--lga-i-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238F5E0E' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
	--lga-i-truck: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238F5E0E' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7h11v10H3zM14 10h4l3 3v4h-7z'/%3E%3Ccircle cx='7' cy='18' r='2'/%3E%3Ccircle cx='17.5' cy='18' r='2'/%3E%3C/svg%3E");
	--lga-i-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238F5E0E' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h6l2 4-3 2a12 12 0 0 0 5 5l2-3 4 2v6a15 15 0 0 1-16-16Z'/%3E%3C/svg%3E");
	--lga-i-tool:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238F5E0E' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m14 7 3 3-8 8H6v-3z'/%3E%3Cpath d='M18 3.5 20.5 6'/%3E%3Cpath d='M3 21h18'/%3E%3C/svg%3E");
	--lga-i-shield-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238F5E0E' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2 3 6v6c0 5 3.8 9.2 9 10 5.2-.8 9-5 9-10V6z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
}