/**
 * OGPP — Product Page widget styles.
 *
 * Every value an Elementor control writes arrives as a custom property on the
 * element the control targets. This file therefore never DECLARES those
 * properties locally (a local declaration outranks an inherited one and would
 * silently swallow the editor's value) — it only reads them with a fallback:
 * var(--ogpp-thing, default).
 */

/* ------------------------------------------------------------------ *
 * Containment
 * A widget dropped into an Elementor flex container must never make
 * that container scroll: min-width:auto on a flex item is what usually
 * does, so it is reset at every level that can hold wide content.
 * ------------------------------------------------------------------ */

.ogpp-product-page,
.ogpp-product-page *,
.ogpp-product-page *::before,
.ogpp-product-page *::after {
	box-sizing: border-box;
}

.ogpp-product-page {
	max-width: 100%;
	min-width: 0;
	font-family: inherit;
	color: #15181c;
}

.ogpp-product-page__main,
.ogpp-product-page__col,
.ogpp-product-page__info,
.ogpp-product-page__gallery,
.ogpp-product-page__stage,
.ogpp-product-page__card,
.ogpp-product-page__row,
.ogpp-product-page__actions,
.ogpp-product-page__variations {
	min-width: 0;
	max-width: 100%;
}

.ogpp-product-page__notice {
	padding: 18px 20px;
	border: 1px dashed #c9d2de;
	border-radius: 10px;
	background: #f7f9fc;
	color: #5a6675;
	font-size: 14px;
}

/* ------------------------------------------------------------------ *
 * Breadcrumb
 * ------------------------------------------------------------------ */

.ogpp-product-page__breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin-bottom: 18px;
	font-size: 13px;
	line-height: 1.4;
	color: #6b7685;
}

.ogpp-product-page__crumb {
	color: inherit;
	text-decoration: none;
}

a.ogpp-product-page__crumb:hover {
	text-decoration: underline;
}

.ogpp-product-page__crumb--current {
	color: #15181c;
	font-weight: 600;
}

.ogpp-product-page__crumb-sep {
	display: inline-flex;
	align-items: center;
	opacity: 0.6;
}

.ogpp-product-page__crumb-sep svg {
	width: 12px;
	height: 12px;
	display: block;
}

/* ------------------------------------------------------------------ *
 * Main two-column layout
 * ------------------------------------------------------------------ */

.ogpp-product-page__main {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var(--ogpp-stack-gap, 40px);
}

.ogpp-product-page__col {
	min-width: 0;
}

.ogpp-product-page__col--gallery {
	flex: 0 0 auto;
	width: var(--ogpp-gallery-w, 50%);
	max-width: 100%;
	position: sticky;
	top: 24px;
}

.ogpp-product-page__col--info {
	flex: 1 1 320px;
	min-width: 0;
}

.ogpp-product-page__col--info,
.ogpp-product-page__info {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

/* The gap participates in the column width, so subtract it. */
.ogpp-product-page__main > .ogpp-product-page__col--gallery {
	width: calc(var(--ogpp-gallery-w, 50%) - (var(--ogpp-stack-gap, 40px) / 2));
}

/* ------------------------------------------------------------------ *
 * Gallery
 * ------------------------------------------------------------------ */

.ogpp-product-page__gallery {
	display: flex;
	gap: var(--ogpp-thumb-gap, 12px);
	align-items: flex-start;
	width: 100%;
}

.ogpp-product-page__gallery--left {
	flex-direction: row;
}

.ogpp-product-page__gallery--right {
	flex-direction: row-reverse;
}

.ogpp-product-page__gallery--bottom {
	flex-direction: column-reverse;
}

.ogpp-product-page__thumbs {
	display: flex;
	gap: var(--ogpp-thumb-gap, 12px);
	flex: 0 0 auto;
	min-width: 0;
	min-height: 0;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.ogpp-product-page__thumbs::-webkit-scrollbar {
	display: none;
}

.ogpp-product-page__gallery--left .ogpp-product-page__thumbs,
.ogpp-product-page__gallery--right .ogpp-product-page__thumbs {
	flex-direction: column;
	overflow-y: auto;
	max-height: calc(
		(var(--ogpp-thumb-size, 76px) * var(--ogpp-thumb-count, 5)) +
		(var(--ogpp-thumb-gap, 12px) * (var(--ogpp-thumb-count, 5) - 1))
	);
}

.ogpp-product-page__gallery--bottom .ogpp-product-page__thumbs {
	flex-direction: row;
	width: 100%;
	overflow-x: auto;
}

.ogpp-product-page .ogpp-product-page__thumb {
	flex: 0 0 auto;
	width: var(--ogpp-thumb-size, 76px);
	height: var(--ogpp-thumb-size, 76px);
	padding: 4px;
	border: var(--ogpp-thumb-border-w, 1px) solid var(--ogpp-thumb-border, #e4e9f0);
	border-radius: var(--ogpp-thumb-radius, 14px);
	background: #f6f8fb;
	box-shadow: none;
	cursor: pointer;
	overflow: hidden;
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.ogpp-product-page__thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.ogpp-product-page .ogpp-product-page__thumb:hover {
	border-color: var(--ogpp-thumb-border-on, #c4cddb);
}

/* Selected reads as a slightly firmer version of the same quiet border the
   main image sits in — not a ring in a different colour. */
.ogpp-product-page .ogpp-product-page__thumb.is-active {
	border-color: var(--ogpp-thumb-border-on, #c4cddb);
	box-shadow: none;
}

.ogpp-product-page__stage {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	height: var(--ogpp-stage-h, 460px);
	max-height: 100%;
	border: var(--ogpp-thumb-border-w, 1px) solid var(--ogpp-thumb-border, #e4e9f0);
	border-radius: 16px;
	background: #f6f8fb;
	overflow: hidden;
}

.ogpp-product-page__gallery--bottom .ogpp-product-page__stage {
	width: 100%;
}

.ogpp-product-page__image {
	width: 100%;
	height: 100%;
	object-fit: var(--ogpp-img-fit, contain);
	display: block;
	transition: opacity 0.2s ease;
}

.ogpp-product-page__image.is-swapping {
	opacity: 0;
}

.ogpp-product-page__arrow,
.ogpp-product-page__zoom {
	position: absolute;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--ogpp-arrow-size, 40px);
	height: var(--ogpp-arrow-size, 40px);
	padding: 0;
	border: 1px solid #e4e9f0;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.94);
	color: #15181c;
	cursor: pointer;
	z-index: 2;
	transition: background 0.18s ease, color 0.18s ease, opacity 0.18s ease;
}

.ogpp-product-page__arrow svg,
.ogpp-product-page__zoom svg {
	width: 46%;
	height: 46%;
	display: block;
}

.ogpp-product-page__arrow:hover,
.ogpp-product-page__zoom:hover {
	background: #15181c;
	color: #fff;
}

.ogpp-product-page__arrow--prev {
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
}

.ogpp-product-page__arrow--next {
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
}

.ogpp-product-page__arrow[hidden],
.ogpp-product-page__arrow.is-hidden {
	opacity: 0;
	pointer-events: none;
}

.ogpp-product-page__zoom {
	right: 12px;
	bottom: 12px;
	width: 36px;
	height: 36px;
}

/* ------------------------------------------------------------------ *
 * Lightbox
 * ------------------------------------------------------------------ */

.ogpp-lightbox {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba(12, 15, 20, 0.88);
	opacity: 0;
	transition: opacity 0.2s ease;
}

.ogpp-lightbox.is-open {
	opacity: 1;
}

.ogpp-lightbox__img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	border-radius: 10px;
}

.ogpp-lightbox__close {
	position: absolute;
	top: 18px;
	right: 18px;
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}

.ogpp-lightbox__close:hover {
	background: rgba(255, 255, 255, 0.28);
}

.ogpp-lightbox__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
}

.ogpp-lightbox__nav:hover {
	background: rgba(255, 255, 255, 0.28);
}

.ogpp-lightbox__nav--prev {
	left: 18px;
}

.ogpp-lightbox__nav--next {
	right: 18px;
}

/* ------------------------------------------------------------------ *
 * Information card
 * ------------------------------------------------------------------ */

.ogpp-product-page__card {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.ogpp-product-page__card-top {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
}

.ogpp-product-page__headings {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
	flex: 1 1 240px;
}

.ogpp-product-page__brand {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #7a8494;
}

.ogpp-product-page__title {
	margin: 0;
	font-size: 30px;
	line-height: 1.22;
	font-weight: 700;
	color: #15181c;
	overflow-wrap: anywhere;
}

/* Prices */

.ogpp-product-page__prices {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 6px;
	flex: 0 0 auto;
}

.ogpp-product-page__price-row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: flex-end;
	gap: 8px;
}

.ogpp-product-page__price {
	font-size: 26px;
	font-weight: 700;
	line-height: 1.2;
	color: #e8442a;
	white-space: nowrap;
}

.ogpp-product-page__price-regular {
	font-size: 15px;
	font-weight: 500;
	color: #9aa3b0;
	text-decoration: line-through;
	white-space: nowrap;
}

.ogpp-product-page__price [hidden],
.ogpp-product-page__price-regular[hidden],
.ogpp-product-page__savings[hidden] {
	display: none;
}

.ogpp-product-page__savings {
	display: inline-block;
	vertical-align: middle;
	padding: 4px 10px;
	border-radius: 999px;
	background: #e8f7ee;
	color: #147a45;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
	white-space: nowrap;
}

/* Currency symbols get a little air so "Tk1,000" reads as "Tk 1,000".
   The gap is a control, and it pads whichever side the symbol sits on. */
.ogpp-cur-left .woocommerce-Price-currencySymbol {
	margin-right: var(--ogpp-currency-gap, 0);
}

.ogpp-cur-right .woocommerce-Price-currencySymbol {
	margin-left: var(--ogpp-currency-gap, 0);
}

/* Stock + rating */

.ogpp-product-page__meta-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 18px;
}

.ogpp-product-page__stock {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 14px;
	font-weight: 600;
	color: #147a45;
}

.ogpp-product-page__stock-dot {
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background: currentColor;
	flex: 0 0 auto;
}

.ogpp-product-page__stock--outofstock {
	color: #c0392b;
}

.ogpp-product-page__stock--backorder,
.ogpp-product-page__stock--preorder {
	color: #b3761a;
}

.ogpp-product-page__rating {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 14px;
	color: #5a6675;
}

.ogpp-product-page__stars {
	position: relative;
	display: inline-block;
	width: 5.3em;
	height: 1em;
	font-size: 15px;
	line-height: 1;
	overflow: hidden;
	color: var(--ogpp-star-empty, #d9dee6);
}

.ogpp-product-page__stars::before,
.ogpp-product-page__stars-fill::before {
	content: "\2605\2605\2605\2605\2605";
	display: block;
	letter-spacing: 0.08em;
	white-space: nowrap;
}

.ogpp-product-page__stars-fill {
	position: absolute;
	inset: 0;
	overflow: hidden;
	color: var(--ogpp-star, #f5a623);
}

.ogpp-product-page__rating-value {
	font-weight: 600;
	color: #15181c;
}

/* SKU / categories */

.ogpp-product-page__product-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
	font-size: 13px;
	color: #6b7685;
}

.ogpp-product-page__meta-label {
	font-weight: 600;
	color: #15181c;
}

.ogpp-product-page__product-meta a {
	color: inherit;
}

/* ------------------------------------------------------------------ *
 * Features + info boxes
 * ------------------------------------------------------------------ */

.ogpp-product-page__row {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	align-items: flex-start;
}

.ogpp-product-page__features {
	flex: 1 1 260px;
	min-width: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.ogpp-product-page__feature {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	font-size: 14px;
	line-height: 1.5;
	color: #3c4653;
}

.ogpp-product-page__feature a {
	color: inherit;
	text-decoration: underline;
}

/* The stand-in text takes the feature list's place in the row, so it keeps
   the same class for layout and only changes how it reads. */
.ogpp-product-page__features--note {
	display: block;
	margin: 0;
	font-size: 14.5px;
	line-height: 1.7;
	color: #5a6675;
}

.ogpp-product-page__feature-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin-top: 2px;
	color: #147a45;
}

.ogpp-product-page__feature-icon svg {
	width: 100%;
	height: 100%;
	display: block;
}

.ogpp-product-page__boxes {
	flex: 1 1 220px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.ogpp-product-page__box {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 12px 14px;
	border: 1px solid #e4e9f0;
	border-radius: 12px;
	background: #fff;
	color: inherit;
	text-decoration: none;
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

a.ogpp-product-page__box:hover {
	border-color: #c4cddb;
	box-shadow: 0 6px 18px rgba(21, 24, 28, 0.06);
}

.ogpp-product-page__box-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: var(--ogpp-box-icon, 22px);
	height: var(--ogpp-box-icon, 22px);
	/* Font icons render as an <i> that takes its size from the font, so the
	   size control has to reach them too, not just the SVG below. */
	font-size: calc(var(--ogpp-box-icon, 22px) * 0.82);
	line-height: 1;
	color: #15181c;
}

/* currentColor is what lets the colour controls reach an SVG icon; without
   it an uploaded SVG keeps whatever fill it was drawn with. */
.ogpp-product-page__box-icon svg {
	width: 100%;
	height: 100%;
	display: block;
	fill: currentColor;
}

.ogpp-product-page__box-icon i {
	display: block;
	color: inherit;
}

/* The starting colours for the two built-in box types. These live here
   rather than as control defaults so the "all boxes" colour can override
   them; setting the per-type control still wins over both. */
.ogpp-product-page__box--warranty .ogpp-product-page__box-icon {
	color: #16a34a;
}

.ogpp-product-page__box--delivery .ogpp-product-page__box-icon {
	color: #d97706;
}

.ogpp-product-page__box-body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.ogpp-product-page__box-title {
	font-size: 14px;
	font-weight: 600;
	color: #15181c;
}

.ogpp-product-page__box-text {
	font-size: 12.5px;
	color: #6b7685;
}

/* ------------------------------------------------------------------ *
 * Variations
 * ------------------------------------------------------------------ */

.ogpp-product-page__variations {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.ogpp-product-page__variation {
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.ogpp-product-page__var-head {
	font-size: 14px;
	color: #6b7685;
}

.ogpp-product-page__var-label {
	font-weight: 600;
	color: #15181c;
}

.ogpp-product-page__var-value:empty {
	display: none;
}

.ogpp-product-page__var-options {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.ogpp-product-page__var-option {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	padding: 8px 16px;
	border: 1px solid #d9dee6;
	border-radius: 10px;
	background: #fff;
	color: #15181c;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.2;
	cursor: pointer;
	transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease,
		box-shadow 0.18s ease, opacity 0.18s ease;
}

.ogpp-product-page__var-option:hover {
	border-color: #15181c;
}

.ogpp-product-page__var-option[aria-pressed="true"] {
	border-color: #f05a28;
	color: #f05a28;
	box-shadow: 0 0 0 1px #f05a28 inset;
}

/* A swatch has no text to recolour, so it gets a ring with a gap instead,
   which reads clearly over any colour including white. */
.ogpp-product-page__var-option--swatch[aria-pressed="true"] {
	border-color: #fff;
	box-shadow: 0 0 0 2px #f05a28;
}

.ogpp-product-page__var-option.is-unavailable {
	opacity: 0.4;
	cursor: not-allowed;
	text-decoration: line-through;
}

.ogpp-product-page__var-option--swatch {
	width: var(--ogpp-swatch, 44px);
	height: var(--ogpp-swatch, 44px);
	min-height: 0;
	padding: 3px;
	border-radius: 999px;
	overflow: hidden;
}

.ogpp-product-page__var-option--swatch img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 999px;
	display: block;
}

.ogpp-product-page__var-dot {
	width: 100%;
	height: 100%;
	border-radius: 999px;
	display: block;
	box-shadow: 0 0 0 1px rgba(21, 24, 28, 0.08) inset;
}

.ogpp-product-page__var-option--swatch.is-unavailable {
	text-decoration: none;
	position: relative;
}

.ogpp-product-page__var-option--swatch.is-unavailable::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 120%;
	height: 1px;
	background: #c0392b;
	transform: translate(-50%, -50%) rotate(-45deg);
}

.ogpp-product-page__var-select {
	width: 100%;
	max-width: 340px;
	min-height: 44px;
	padding: 10px 14px;
	border: 1px solid #d9dee6;
	border-radius: 10px;
	background: #fff;
	color: #15181c;
	font-size: 14px;
}

.ogpp-product-page__var-reset {
	align-self: flex-start;
	padding: 0;
	border: 0;
	background: none;
	color: #6b7685;
	font-size: 13px;
	text-decoration: underline;
	cursor: pointer;
}

.ogpp-product-page__var-reset[hidden] {
	display: none;
}

.ogpp-product-page__var-message {
	margin: 0;
	font-size: 13.5px;
	font-weight: 500;
	color: #c0392b;
}

.ogpp-product-page__var-message[hidden] {
	display: none;
}

/* ------------------------------------------------------------------ *
 * Short description
 * ------------------------------------------------------------------ */

.ogpp-product-page__short {
	font-size: 14.5px;
	line-height: 1.65;
	color: #5a6675;
}

.ogpp-product-page__short p:last-child {
	margin-bottom: 0;
}

/* ------------------------------------------------------------------ *
 * Quantity + buttons
 * ------------------------------------------------------------------ */

.ogpp-product-page__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 12px;
}

/* One row: the stepper takes only the width it needs and the buttons share
   what is left, so the quantity control stops eating button space. */
.ogpp-product-page__actions--one_row {
	flex-wrap: nowrap;
}

.ogpp-product-page__actions--one_row .ogpp-product-page__qty {
	flex: 0 0 auto;
}

.ogpp-product-page__actions--one_row .ogpp-product-page__btn {
	flex: 1 1 0;
	min-width: 0;
	padding-left: 12px;
	padding-right: 12px;
	white-space: nowrap;
}

/* Two rows: quantity and the cart buttons, then WhatsApp across the bottom. */
.ogpp-product-page__actions--two_rows {
	flex-wrap: wrap;
}

.ogpp-product-page__actions--two_rows .ogpp-product-page__btn--wa {
	flex: 1 1 100%;
}

.ogpp-product-page .ogpp-product-page__qty {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	width: auto;
	max-width: max-content;
	border: 1px solid #d9dee6;
	border-radius: 10px;
	background: #fff;
	overflow: hidden;
}

/* Scoped and fully specified: themes style bare buttons and number inputs,
   and a theme's padding was enough to squeeze the number out of sight. */
.ogpp-product-page .ogpp-product-page__qty-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: var(--ogpp-qty-btn, 34px);
	min-width: var(--ogpp-qty-btn, 34px);
	height: 48px;
	min-height: 48px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	background-image: none;
	box-shadow: none;
	color: #15181c;
	font-family: inherit;
	font-size: 18px;
	font-weight: 600;
	line-height: 1;
	text-transform: none;
	cursor: pointer;
	transition: background 0.16s ease;
}

.ogpp-product-page .ogpp-product-page__qty-btn:hover:not(:disabled) {
	background: #f1f4f8;
}

.ogpp-product-page .ogpp-product-page__qty-btn:disabled {
	opacity: 0.35;
	cursor: not-allowed;
}

.ogpp-product-page .ogpp-product-page__qty-input {
	flex: 0 0 auto;
	width: var(--ogpp-qty-input, 44px);
	min-width: var(--ogpp-qty-input, 44px);
	max-width: var(--ogpp-qty-input, 44px);
	height: 48px;
	min-height: 48px;
	margin: 0;
	padding: 0 2px;
	border: 0;
	border-left: 1px solid #eef1f6;
	border-right: 1px solid #eef1f6;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: #15181c;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	line-height: 48px;
	text-align: center;
	-moz-appearance: textfield;
	appearance: textfield;
}

.ogpp-product-page__qty-input::-webkit-outer-spin-button,
.ogpp-product-page__qty-input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.ogpp-product-page__qty-input:focus {
	outline: none;
}

.ogpp-product-page__btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	flex: 1 1 160px;
	min-height: 48px;
	padding: 12px 22px;
	border: 1px solid transparent;
	border-radius: 10px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease,
		box-shadow 0.18s ease, transform 0.18s ease;
}

.ogpp-product-page__btn--buy {
	background: #f05a28;
	color: #fff;
}

.ogpp-product-page__btn--cart {
	background: #15181c;
	color: #fff;
}

.ogpp-product-page__btn--wa {
	background: #25d366;
	color: #fff;
}

.ogpp-product-page__btn:hover:not(.is-disabled):not(:disabled) {
	box-shadow: 0 8px 20px rgba(21, 24, 28, 0.16);
	transform: translateY(-1px);
}

.ogpp-product-page__btn:disabled,
.ogpp-product-page__btn.is-disabled {
	opacity: 0.5;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

.ogpp-product-page__btn-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
}

.ogpp-product-page__btn-icon svg {
	width: 100%;
	height: 100%;
	display: block;
	fill: currentColor;
}

.ogpp-product-page__spinner {
	display: none;
	width: 15px;
	height: 15px;
	border: 2px solid currentColor;
	border-top-color: transparent;
	border-radius: 999px;
	animation: ogpp-spin 0.7s linear infinite;
}

.ogpp-product-page__btn.is-loading .ogpp-product-page__spinner {
	display: inline-block;
}

.ogpp-product-page__btn.is-loading {
	pointer-events: none;
	opacity: 0.82;
}

@keyframes ogpp-spin {
	to {
		transform: rotate(360deg);
	}
}

/* ------------------------------------------------------------------ *
 * Benefits
 * ------------------------------------------------------------------ */

.ogpp-product-page__benefits {
	display: grid;
	grid-template-columns: repeat(var(--ogpp-benefit-cols, 3), minmax(0, 1fr));
	gap: 12px;
	/* Sitting directly under the gallery, the row had nothing above it. */
	margin-top: var(--ogpp-benefit-top, 20px);
}

.ogpp-product-page__benefit {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 13px 15px;
	border: 1px solid #e4e9f0;
	border-radius: 12px;
	background: #fff;
	color: inherit;
	text-decoration: none;
	min-width: 0;
}

a.ogpp-product-page__benefit:hover {
	border-color: #c4cddb;
}

.ogpp-product-page__benefit-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: var(--ogpp-benefit-icon, 22px);
	height: var(--ogpp-benefit-icon, 22px);
	/* Font icons take their size from the font, so the size control reaches
	   them through font-size as well as the box below. */
	font-size: calc(var(--ogpp-benefit-icon, 22px) * 0.82);
	line-height: 1;
	color: #15181c;
	transition: color 0.18s ease, background-color 0.18s ease;
}

/* currentColor is what lets the colour controls reach an SVG icon. */
.ogpp-product-page__benefit-icon svg {
	width: 100%;
	height: 100%;
	display: block;
	fill: currentColor;
}

.ogpp-product-page__benefit-icon i {
	display: block;
	color: inherit;
}

.ogpp-product-page__benefit-body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.ogpp-product-page__benefit-title {
	font-size: 13.5px;
	font-weight: 600;
	color: #15181c;
}

.ogpp-product-page__benefit-text {
	font-size: 12.5px;
	color: #6b7685;
}

/* ------------------------------------------------------------------ *
 * Long description
 * ------------------------------------------------------------------ */

.ogpp-product-page__description {
	margin-top: 36px;
}

.ogpp-product-page__description-title {
	margin: 0 0 12px;
	font-size: 22px;
	font-weight: 700;
	color: #15181c;
}

.ogpp-product-page__description-body {
	font-size: 15px;
	line-height: 1.7;
	color: #3c4653;
}

.ogpp-product-page__description-body img {
	max-width: 100%;
	height: auto;
}

.ogpp-product-page__description-body table {
	width: 100%;
	max-width: 100%;
	border-collapse: collapse;
	display: block;
	overflow-x: auto;
}

/* ------------------------------------------------------------------ *
 * Toast
 * ------------------------------------------------------------------ */

.ogpp-product-page__toast {
	position: fixed;
	z-index: 99998;
	max-width: min(360px, calc(100vw - 32px));
	padding: 12px 18px;
	border-radius: 10px;
	background: #15181c;
	color: #fff;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.45;
	box-shadow: 0 12px 34px rgba(12, 15, 20, 0.26);
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 0.22s ease, transform 0.22s ease;
	pointer-events: none;
}

.ogpp-product-page__toast[hidden] {
	display: none;
}

.ogpp-product-page__toast.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.ogpp-product-page__toast--error {
	background: #c0392b;
}

.ogpp-product-page__toast--bottom-center {
	left: 50%;
	bottom: 24px;
	transform: translate(-50%, 10px);
}

.ogpp-product-page__toast--bottom-center.is-visible {
	transform: translate(-50%, 0);
}

.ogpp-product-page__toast--bottom-right {
	right: 24px;
	bottom: 24px;
}

.ogpp-product-page__toast--top-right {
	right: 24px;
	top: 24px;
	transform: translateY(-10px);
}

.ogpp-product-page__toast--top-right.is-visible {
	transform: translateY(0);
}

.ogpp-product-page__toast--top-center {
	left: 50%;
	top: 24px;
	transform: translate(-50%, -10px);
}

.ogpp-product-page__toast--top-center.is-visible {
	transform: translate(-50%, 0);
}

/* ------------------------------------------------------------------ *
 * Focus visibility (never removed, only restyled)
 * ------------------------------------------------------------------ */

.ogpp-product-page button:focus-visible,
.ogpp-product-page a:focus-visible,
.ogpp-product-page select:focus-visible,
.ogpp-product-page input:focus-visible {
	outline: 2px solid #f05a28;
	outline-offset: 2px;
}

/* ------------------------------------------------------------------ *
 * Responsive
 * ------------------------------------------------------------------ */

@media (max-width: 1024px) {
	.ogpp-product-page--stack-tablet .ogpp-product-page__col--gallery {
		position: static;
		width: 100%;
	}

	.ogpp-product-page--stack-tablet .ogpp-product-page__main > .ogpp-product-page__col--gallery {
		width: 100%;
	}

	.ogpp-product-page--stack-tablet .ogpp-product-page__col--info {
		flex: 1 1 100%;
	}

	.ogpp-product-page__title {
		font-size: 26px;
	}
}

@media (max-width: 767px) {
	.ogpp-product-page__col--gallery {
		position: static;
		width: 100%;
	}

	.ogpp-product-page__main > .ogpp-product-page__col--gallery {
		width: 100%;
	}

	.ogpp-product-page__col--info {
		flex: 1 1 100%;
	}

	.ogpp-product-page--stack-never .ogpp-product-page__main > .ogpp-product-page__col--gallery {
		width: var(--ogpp-gallery-w, 50%);
	}

	.ogpp-product-page--stack-never .ogpp-product-page__col--info {
		flex: 1 1 140px;
	}

	.ogpp-product-page__title {
		font-size: 22px;
	}

	/* The price sits under the title rather than beside it. */
	.ogpp-product-page__card-top {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
	}

	.ogpp-product-page__prices {
		align-items: flex-start;
		flex-direction: row;
		flex-wrap: wrap;
		gap: 8px 12px;
	}

	.ogpp-product-page__price-row {
		justify-content: flex-start;
	}

	.ogpp-product-page__price {
		font-size: 23px;
	}

	/* Thumbnails move under the image and scroll sideways. */
	.ogpp-product-page__gallery--m-horizontal {
		flex-direction: column;
	}

	.ogpp-product-page__gallery--m-horizontal .ogpp-product-page__thumbs {
		flex-direction: row;
		width: 100%;
		max-height: none;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
	}

	.ogpp-product-page__gallery--m-hide .ogpp-product-page__thumbs {
		display: none;
	}

	/* A fixed height on a narrow screen makes the stage short and wide, which
	   leaves a tall product photo shrunk into a letterbox. Giving the stage a
	   shape instead lets the image use the full width. */
	.ogpp-product-page__stage {
		height: min(var(--ogpp-stage-h, 460px), 62vw);
	}

	.ogpp-product-page__gallery--r-1-1 .ogpp-product-page__stage,
	.ogpp-product-page__gallery--r-4-3 .ogpp-product-page__stage,
	.ogpp-product-page__gallery--r-3-4 .ogpp-product-page__stage,
	.ogpp-product-page__gallery--r-16-9 .ogpp-product-page__stage {
		height: auto;
		max-height: none;
		aspect-ratio: var(--ogpp-stage-ratio, 1 / 1);
	}

	.ogpp-product-page__gallery--r-1-1 {
		--ogpp-stage-ratio: 1 / 1;
	}

	.ogpp-product-page__gallery--r-4-3 {
		--ogpp-stage-ratio: 4 / 3;
	}

	.ogpp-product-page__gallery--r-3-4 {
		--ogpp-stage-ratio: 3 / 4;
	}

	.ogpp-product-page__gallery--r-16-9 {
		--ogpp-stage-ratio: 16 / 9;
	}

	/* Whatever Image Fit says for the desktop, a phone shows the whole thing. */
	.ogpp-product-page__gallery--m-nocrop .ogpp-product-page__image {
		object-fit: contain;
	}

	.ogpp-product-page__benefits {
		grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	}

	.ogpp-product-page__actions {
		gap: 10px;
	}

	.ogpp-product-page__btn {
		flex: 1 1 100%;
	}

	.ogpp-product-page__actions--one_row .ogpp-product-page__btn {
		flex: 1 1 130px;
	}

	.ogpp-product-page__qty {
		flex: 1 1 100%;
		justify-content: space-between;
	}

	.ogpp-product-page__qty-input {
		flex: 1 1 auto;
		width: auto;
	}

	/* One row does not survive a phone, so it becomes two: the stepper keeps
	   its natural width next to Buy Now, and the rest share the line below. */
	.ogpp-product-page__actions--one_row .ogpp-product-page__qty {
		flex: 0 0 auto;
		justify-content: flex-start;
	}

	.ogpp-product-page__actions--one_row .ogpp-product-page__qty-input {
		flex: 0 0 auto;
		width: var(--ogpp-qty-input, 34px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ogpp-product-page *,
	.ogpp-lightbox * {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}

/* ================================================================== *
 * Lower page: tab bar, panels, specification, reviews, similar
 * ================================================================== */

.ogpp-product-page__lower {
	margin-top: 48px;
	min-width: 0;
}

/* ---- Tab bar ---- */

.ogpp-product-page__tabs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-bottom: 26px;
	padding: 8px;
	border-radius: 14px;
	background: #f2f5f9;
	min-width: 0;
}

.ogpp-product-page__tabs.is-sticky {
	position: sticky;
	top: var(--ogpp-tabs-offset, 0px);
	z-index: 20;
	box-shadow: 0 6px 18px rgba(21, 24, 28, 0.06);
}

/* On a narrow screen the bar scrolls rather than wrapping into three rows. */
.ogpp-product-page__tabs.is-scrollable {
	flex-wrap: nowrap;
	overflow-x: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
	-webkit-overflow-scrolling: touch;
}

.ogpp-product-page__tabs.is-scrollable::-webkit-scrollbar {
	display: none;
}

.ogpp-product-page__tab {
	flex: 0 0 auto;
	padding: 10px 20px;
	border: 1px solid transparent;
	border-radius: 10px;
	background: transparent;
	color: #5a6675;
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	cursor: pointer;
	transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.ogpp-product-page__tab:hover {
	color: #15181c;
	background: rgba(255, 255, 255, 0.7);
}

.ogpp-product-page__tab.is-active {
	background: #f05a28;
	color: #fff;
	border-color: #f05a28;
}

/* ---- Grid: panels + sidebar ---- */

.ogpp-product-page__lower-grid {
	display: flex;
	align-items: flex-start;
	gap: 28px;
	min-width: 0;
}

.ogpp-product-page__panels {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--ogpp-panel-gap, 36px);
}

.ogpp-product-page__panel {
	min-width: 0;
	padding: 22px 24px;
	border: 1px solid #e4e9f0;
	border-radius: 16px;
	background: #fff;
	scroll-margin-top: calc(var(--ogpp-tabs-offset, 0px) + 80px);
}

/* The panel heading sits on its own line above a hairline, which is what
   makes a long description read as a section rather than loose text. */
.ogpp-product-page__panel-title {
	padding-bottom: 12px;
	border-bottom: 1px solid #eef1f6;
}

/* Reviews and comments are already cards in their own right, so the panel
   around them stays plain rather than boxing a box. */
.ogpp-product-page__panel--reviews,
.ogpp-product-page__panel--comment {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
}

.ogpp-product-page__panel--reviews .ogpp-product-page__panel-title,
.ogpp-product-page__panel--comment .ogpp-product-page__panel-title {
	padding-bottom: 0;
	border-bottom: 0;
}

.ogpp-product-page__panel[hidden] {
	display: none;
}

.ogpp-product-page__panel-title {
	margin: 0 0 14px;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
	color: #15181c;
}

.ogpp-product-page__panel-body {
	font-size: 15px;
	line-height: 1.7;
	color: #3c4653;
}

.ogpp-product-page__panel-body > :first-child {
	margin-top: 0;
}

.ogpp-product-page__panel-body > :last-child {
	margin-bottom: 0;
}

.ogpp-product-page__panel-body img {
	max-width: 100%;
	height: auto;
	border-radius: 12px;
}

.ogpp-product-page__panel-body table {
	width: 100%;
	max-width: 100%;
	border-collapse: collapse;
	display: block;
	overflow-x: auto;
}

.ogpp-product-page__overview {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.ogpp-product-page__empty {
	margin: 0;
	padding: 22px;
	border: 1px dashed #d9dee6;
	border-radius: 12px;
	background: #f9fbfd;
	color: #6b7685;
	font-size: 14px;
	text-align: center;
}

/* ---- Reviews ---- */

.ogpp-product-page__reviews {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* Themes style bare <button> elements heavily, so this one is pinned down
   explicitly and scoped to the widget so the theme cannot repaint it. */
.ogpp-product-page .ogpp-product-page__review-btn {
	align-self: flex-end;
	margin: -46px 0 0;
	padding: 9px 18px;
	border: 1px solid #f05a28;
	border-radius: 10px;
	background: transparent;
	background-image: none;
	box-shadow: none;
	color: #f05a28;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: normal;
	text-transform: none;
	text-decoration: none;
	text-shadow: none;
	cursor: pointer;
	transition: background 0.18s ease, color 0.18s ease;
}

.ogpp-product-page .ogpp-product-page__review-btn:hover,
.ogpp-product-page .ogpp-product-page__review-btn:focus {
	background: #f05a28;
	background-image: none;
	color: #fff;
}

.ogpp-product-page__review-list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.ogpp-product-page__review {
	display: flex;
	gap: 14px;
	padding: 16px 18px;
	border: 1px solid #e4e9f0;
	border-radius: 12px;
	background: #fff;
	min-width: 0;
}

.ogpp-product-page__review-avatar {
	flex: 0 0 auto;
}

.ogpp-product-page__review-avatar img {
	width: 44px;
	height: 44px;
	border-radius: 999px;
	display: block;
	object-fit: cover;
}

.ogpp-product-page__review-body {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.ogpp-product-page__review-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px 14px;
}

.ogpp-product-page__review-author {
	font-size: 14.5px;
	font-weight: 600;
	color: #15181c;
}

.ogpp-product-page__review-date {
	font-size: 12.5px;
	color: #9aa3b0;
}

.ogpp-product-page__review-stars {
	display: inline-flex;
	align-items: center;
	gap: 7px;
}

.ogpp-product-page__review-rating {
	font-size: 13px;
	font-weight: 600;
	color: #6b7685;
}

.ogpp-product-page__review-text {
	font-size: 14px;
	line-height: 1.65;
	color: #5a6675;
}

.ogpp-product-page__review-text p:last-child {
	margin-bottom: 0;
}

/* A reply to a review nests inside the review's own body, so the exchange
   reads as one conversation rather than two separate cards. */
.ogpp-product-page__review-list--d1 {
	gap: 12px;
}

.ogpp-product-page__review-body > .ogpp-product-page__review-list {
	margin-top: 10px;
	padding-left: 14px;
	border-left: 2px solid #eef1f6;
	gap: 8px;
}

.ogpp-product-page__review--reply {
	padding: 12px 14px;
	border: 1px solid #eef1f6;
	border-radius: 10px;
	background: #f9fbfd;
	gap: 10px;
}

.ogpp-product-page__review--reply .ogpp-product-page__review-avatar img {
	width: 34px;
	height: 34px;
}

.ogpp-product-page__review--reply .ogpp-product-page__review-author {
	font-size: 13.5px;
}

.ogpp-product-page__review.is-pending {
	border-style: dashed;
	opacity: 0.85;
}

.ogpp-product-page__review-staff {
	margin-left: 8px;
	padding: 2px 8px;
	border-radius: 999px;
	background: #eef2ff;
	color: #3b5bdb;
	font-size: 11.5px;
	font-weight: 600;
}

.ogpp-product-page__review-verified {
	margin-left: 8px;
	padding: 2px 8px;
	border-radius: 999px;
	background: #e8f7ee;
	color: #147a45;
	font-size: 11.5px;
	font-weight: 600;
}

.ogpp-product-page__review-who {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
}

/* ---- Pre-Order Info ---- */

.ogpp-product-page__preorder-info {
	padding: 14px 16px;
	border-left: 3px solid #f0a028;
	border-radius: 0 10px 10px 0;
	background: #fff8ef;
	color: #6a4a18;
}

.ogpp-product-page__preorder-info > :first-child {
	margin-top: 0;
}

.ogpp-product-page__preorder-info > :last-child {
	margin-bottom: 0;
}

/* ---- Box Items ---- */

.ogpp-product-page__boxitems {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(var(--ogpp-box-cols, 2), minmax(0, 1fr));
	gap: 10px 22px;
}

.ogpp-product-page__boxitem {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	min-width: 0;
	font-size: 14.5px;
	line-height: 1.55;
	color: #3c4653;
}

.ogpp-product-page__boxitem-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin-top: 2px;
	color: #147a45;
}

.ogpp-product-page__boxitem-icon svg {
	width: 100%;
	height: 100%;
	display: block;
}

.ogpp-product-page__boxitem-text {
	min-width: 0;
	overflow-wrap: anywhere;
}

/* ---- Review form ---- */

.ogpp-product-page__review-form {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 18px;
	border: 1px solid #e4e9f0;
	border-radius: 14px;
	background: #fbfcfe;
}

.ogpp-product-page__review-form[hidden] {
	display: none;
}

.ogpp-product-page__review-note {
	margin: 0;
	padding: 14px 16px;
	border: 1px dashed #d9dee6;
	border-radius: 12px;
	background: #f9fbfd;
	color: #6b7685;
	font-size: 13.5px;
}

/* A reply to a review nests inside the review's own body, so the exchange
   reads as one conversation rather than two separate cards. */
/* Star picker.
   The radios are laid out highest-first and reversed visually, so plain CSS
   sibling selectors can light up every star up to the one being hovered or
   chosen — no JavaScript, and it still works from the keyboard. */

.ogpp-product-page__rate {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

.ogpp-product-page__rate-label {
	font-size: 14px;
	font-weight: 600;
	color: #15181c;
}

.ogpp-product-page__rate-stars {
	display: inline-flex;
	flex-direction: row-reverse;
	justify-content: flex-end;
	gap: 3px;
}

.ogpp-product-page__rate-input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.ogpp-product-page__rate-star {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	color: #d9dee6;
	cursor: pointer;
	transition: color 0.14s ease, transform 0.14s ease;
}

.ogpp-product-page__rate-star svg {
	width: 100%;
	height: 100%;
	flex: 0 0 auto;
	display: block;
	fill: currentColor;
}

/* Our own visually-hidden helper. Themes define .screen-reader-text and most
   get it right, but a theme that does not would push the star out of its
   label — so the plugin never depends on the theme for this. */
.ogpp-product-page__sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.ogpp-product-page__rate-star:hover,
.ogpp-product-page__rate-star:hover ~ .ogpp-product-page__rate-star,
.ogpp-product-page__rate-input:checked ~ .ogpp-product-page__rate-star,
.ogpp-product-page__rate-input:checked + .ogpp-product-page__rate-star {
	color: #f5a623;
}

.ogpp-product-page__rate-star:hover {
	transform: scale(1.08);
}

.ogpp-product-page__rate-input:focus-visible + .ogpp-product-page__rate-star {
	outline: 2px solid #f05a28;
	outline-offset: 2px;
	border-radius: 4px;
}

/* ---- Shared form furniture ---- */

.ogpp-product-page__form-fields {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.ogpp-product-page__review-form input,
.ogpp-product-page__review-form textarea,
.ogpp-product-page__comment-form input,
.ogpp-product-page__comment-form textarea {
	flex: 1 1 200px;
	min-width: 0;
	padding: 11px 14px;
	border: 1px solid #d9dee6;
	border-radius: 10px;
	background: #fff;
	color: #15181c;
	font-family: inherit;
	font-size: 14px;
	resize: vertical;
}

.ogpp-product-page__form-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

.ogpp-product-page__form-submit,
.ogpp-product-page__comment-submit {
	flex: 0 0 auto;
	min-width: 120px;
	padding: 11px 24px;
	border: 0;
	border-radius: 10px;
	background: #f05a28;
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: opacity 0.16s ease;
}

.ogpp-product-page__form-submit:hover,
.ogpp-product-page__comment-submit:hover {
	opacity: 0.88;
}

.ogpp-product-page__form-cancel {
	padding: 0;
	border: 0;
	background: none;
	color: #6b7685;
	font-size: 13.5px;
	text-decoration: underline;
	cursor: pointer;
}

.ogpp-product-page__form-note {
	margin: 0;
	font-size: 12.5px;
	color: #9aa3b0;
}

/* ---- Comments ---- */

.ogpp-product-page__comments {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.ogpp-product-page__comment-list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* Replies nest inside their parent's card rather than as separate cards, so
   the thread reads as one conversation. */
.ogpp-product-page__comment-list--d1 {
	gap: 12px;
}

.ogpp-product-page__comment {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 16px 18px;
	border: 1px solid #e4e9f0;
	border-radius: 12px;
	background: #fff;
	min-width: 0;
}

.ogpp-product-page__comment .ogpp-product-page__comment-list {
	margin-top: 4px;
	padding-left: 16px;
	border-left: 2px solid #eef1f6;
}

.ogpp-product-page__comment--reply {
	padding: 12px 14px;
	border-color: #eef1f6;
	background: #f9fbfd;
}

.ogpp-product-page__comment.is-pending {
	border-style: dashed;
	opacity: 0.85;
}

.ogpp-product-page__comment-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 14px;
}

.ogpp-product-page__comment-who {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	min-width: 0;
}

.ogpp-product-page__comment-author {
	font-size: 14.5px;
	font-weight: 600;
	color: #15181c;
}

.ogpp-product-page__comment-date {
	font-size: 12.5px;
	color: #9aa3b0;
}

.ogpp-product-page__comment-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	border-radius: 999px;
	background: #fdece5;
	color: #f05a28;
	font-size: 11px;
	font-weight: 700;
}

.ogpp-product-page__comment-mark--a {
	background: #e8f7ee;
	color: #147a45;
}

.ogpp-product-page__comment-mark svg {
	width: 11px;
	height: 11px;
	display: block;
}

.ogpp-product-page__comment-text {
	font-size: 14px;
	line-height: 1.65;
	color: #3c4653;
}

.ogpp-product-page__comment-text p:last-child {
	margin-bottom: 0;
}

.ogpp-product-page__comment-pending {
	margin: 0;
	font-size: 12.5px;
	font-style: italic;
	color: #b3761a;
}

.ogpp-product-page .ogpp-product-page__comment-reply {
	align-self: flex-start;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	background-image: none;
	box-shadow: none;
	color: #f05a28;
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: normal;
	text-transform: none;
	text-shadow: none;
	min-height: 0;
	width: auto;
	cursor: pointer;
}

.ogpp-product-page .ogpp-product-page__comment-reply:hover,
.ogpp-product-page .ogpp-product-page__comment-reply:focus {
	background: none;
	color: #f05a28;
	text-decoration: underline;
}

.ogpp-product-page__comment-formwrap {
	min-width: 0;
}

.ogpp-product-page__comment-form {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 10px;
	padding: 14px;
	border: 1px solid #e4e9f0;
	border-radius: 12px;
	background: #fff;
}

.ogpp-product-page__comment-form .ogpp-product-page__form-fields {
	flex: 1 1 100%;
}

.ogpp-product-page__comment-form textarea {
	flex: 1 1 260px;
}

.ogpp-product-page__replying {
	flex: 1 1 100%;
	margin: 0;
	padding: 9px 12px;
	border-radius: 9px;
	background: #fdece5;
	color: #15181c;
	font-size: 13px;
}

.ogpp-product-page__replying[hidden] {
	display: none;
}

/* A reply form sits inside the comment it answers. */
.ogpp-product-page__comment > .ogpp-product-page__comment-formwrap {
	margin-top: 4px;
}

/* ---- Similar products ---- */

.ogpp-product-page__related {
	min-width: 0;
}

.ogpp-product-page__related--sidebar {
	flex: 0 0 auto;
	width: var(--ogpp-aside-w, 300px);
	max-width: 100%;
	position: sticky;
	top: calc(var(--ogpp-tabs-offset, 0px) + 80px);
	padding: 18px;
	border: 1px solid #e4e9f0;
	border-radius: 16px;
	background: #fff;
}

.ogpp-product-page__related--below {
	margin-top: 40px;
}

.ogpp-product-page__related-head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 14px;
	min-width: 0;
}

.ogpp-product-page__related-line {
	flex: 0 0 auto;
	width: var(--ogpp-rel-line-w, 4px);
	height: var(--ogpp-rel-line-h, 20px);
	border-radius: 2px;
	background-color: #f05a28;
}

.ogpp-product-page__related-title {
	margin: 0;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
	color: #15181c;
	min-width: 0;
}

.ogpp-product-page__related-accent {
	color: #f05a28;
}

.ogpp-product-page__related-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
}

.ogpp-product-page__related--below .ogpp-product-page__related-list {
	display: grid;
	grid-template-columns: repeat(var(--ogpp-rel-cols, 4), minmax(0, 1fr));
}

.ogpp-product-page__related-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px;
	border: 1px solid #eef1f6;
	border-radius: 12px;
	background: #fff;
	color: inherit;
	text-decoration: none;
	min-width: 0;
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.ogpp-product-page__related-item:hover {
	border-color: #c4cddb;
	box-shadow: 0 6px 18px rgba(21, 24, 28, 0.07);
}

.ogpp-product-page__related-image {
	flex: 0 0 auto;
	width: var(--ogpp-rel-img, 62px);
	height: var(--ogpp-rel-img, 62px);
	border-radius: 10px;
	background: #f6f8fb;
	overflow: hidden;
}

.ogpp-product-page__related-image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.ogpp-product-page__related-body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.ogpp-product-page__related-name {
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.4;
	color: #15181c;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.ogpp-product-page__related-prices {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 7px;
}

.ogpp-product-page__related-price {
	font-size: 14px;
	font-weight: 700;
	color: #f05a28;
	white-space: nowrap;
}

.ogpp-product-page__related-regular {
	font-size: 12px;
	color: #9aa3b0;
	text-decoration: line-through;
	white-space: nowrap;
}

/* ================================================================== *
 * Responsive behaviour for the lower page and the new mobile rules
 * ================================================================== */

@media (max-width: 1024px) {
	.ogpp-product-page--crumb-hide-t .ogpp-product-page__breadcrumb {
		display: none;
	}

	.ogpp-product-page__lower-grid {
		flex-direction: column;
	}

	.ogpp-product-page__related--sidebar {
		position: static;
		width: 100%;
	}

	.ogpp-product-page__related--sidebar .ogpp-product-page__related-list {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	}
}

@media (max-width: 767px) {
	.ogpp-product-page--crumb-hide-m .ogpp-product-page__breadcrumb {
		display: none;
	}

	/* These three carry a flex-basis meant for a ROW: `flex: 1 1 240px` on the
	   headings, 260px on the features, 220px on the boxes. Once the card and
	   the info column stack, those containers become COLUMNS — where a basis
	   is a HEIGHT, not a width. That is what produced the tall empty gap
	   under the product title, under the feature list and under the info
	   boxes. Width comes from the container here, and height from content. */
	.ogpp-product-page__headings,
	.ogpp-product-page__features,
	.ogpp-product-page__boxes {
		flex: 0 1 auto;
		width: 100%;
	}

	/* Thumbnails belong UNDER the main image, not above it — the markup
	   puts them first for keyboard order, so the visual order is reversed. */
	.ogpp-product-page__gallery--m-horizontal {
		flex-direction: column-reverse;
	}

	/* The features/boxes row dissolves, so its two children become direct
	   children of the info column and can be ordered independently. */
	.ogpp-product-page--boxes-m-after_actions .ogpp-product-page__row {
		display: contents;
	}

	.ogpp-product-page--boxes-m-after_actions .ogpp-product-page__boxes {
		order: 9;
	}

	.ogpp-product-page--boxes-m-hide .ogpp-product-page__boxes {
		display: none;
	}

	.ogpp-product-page__lower {
		margin-top: 34px;
	}

	.ogpp-product-page__tabs {
		gap: 8px;
		padding: 6px;
		margin-bottom: 20px;
	}

	.ogpp-product-page__tab {
		padding: 9px 15px;
		font-size: 13.5px;
	}

	.ogpp-product-page__panel-title {
		font-size: 18px;
	}

	.ogpp-product-page__panel {
		padding: 16px 16px 18px;
		border-radius: 14px;
	}

	.ogpp-product-page__boxitems {
		grid-template-columns: 1fr;
	}

	.ogpp-product-page__review-btn {
		align-self: stretch;
		margin-top: 0;
		text-align: center;
	}

	.ogpp-product-page__review,
	.ogpp-product-page__comment {
		padding: 14px;
	}

	.ogpp-product-page__form-fields {
		flex-wrap: wrap;
	}

	.ogpp-product-page__form-fields input {
		flex: 1 1 100%;
	}

	.ogpp-product-page__comment-submit,
	.ogpp-product-page__form-submit {
		flex: 1 1 100%;
	}

	.ogpp-product-page__comment .ogpp-product-page__comment-list {
		padding-left: 10px;
	}

	/* On one row the four controls would each be ~70px wide, so the row
	   becomes two: quantity + Buy Now, then the rest. */
	.ogpp-product-page__actions--one_row {
		flex-wrap: wrap;
	}

	.ogpp-product-page__actions--one_row .ogpp-product-page__btn {
		flex: 1 1 130px;
	}

	.ogpp-product-page__related--sidebar,
	.ogpp-product-page__related--below {
		padding: 0;
		border: 0;
		background: none;
	}

	.ogpp-product-page__related-list,
	.ogpp-product-page__related--below .ogpp-product-page__related-list,
	.ogpp-product-page__related--sidebar .ogpp-product-page__related-list {
		display: flex;
		flex-direction: column;
		grid-template-columns: none;
	}

	/* Sideways instead of a tall stack, when that is what was chosen. */
	.ogpp-product-page--rel-m-scroll .ogpp-product-page__related-list {
		flex-direction: row;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
		padding-bottom: 4px;
	}

	.ogpp-product-page--rel-m-scroll .ogpp-product-page__related-list::-webkit-scrollbar {
		display: none;
	}

	.ogpp-product-page--rel-m-scroll .ogpp-product-page__related-item {
		flex: 0 0 78%;
		scroll-snap-align: start;
	}

	.ogpp-product-page--rel-m-hide .ogpp-product-page__related {
		display: none;
	}
}