/**
 * Single product page — netmeds.com layout.
 *
 * Loaded only on single products. Shoptimizer supplies the two-column
 * gallery/summary split already, so this restyles the summary column into the
 * reference's order and density, then handles the stacked sections below it.
 */

/* --------------------------------------------------------------------------
   1. Summary column
   The reference runs brand → title → category → price → blurb → dosage → cart,
   tightly spaced, with the price as the only large type.
   -------------------------------------------------------------------------- */

.single-product div.product .summary {
	font-size: 15px;
}

.single-product .pct-brand {
	margin: 0 0 4px;
	color: var(--pct-green-dark, #4d7317);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.single-product div.product .summary .product_title {
	margin: 0 0 6px;
	font-size: 24px;
	font-weight: 600;
	line-height: 1.3;
}

/* The compound after the name in the H1, a step lighter than the name. */
.pct-title-compound {
	color: #667085;
	font-weight: 500;
}

.single-product .pct-cat {
	margin: 0 0 16px;
	font-size: 14px;
}

.single-product .pct-cat a {
	color: var(--pct-muted, #667085);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Price block. The reference sets the amount large and the tax note small and
   grey immediately beneath it, with no gap between them. */
.single-product div.product .summary p.price,
.single-product div.product .summary span.price {
	display: block;
	margin: 0;
	font-size: 26px;
	font-weight: 600;
	line-height: 1.2;
}

.single-product div.product .summary p.price del {
	margin-right: 8px;
	color: var(--pct-muted, #667085);
	font-size: 17px;
	font-weight: 400;
}

.single-product div.product .summary p.price ins {
	text-decoration: none;
}

.single-product .pct-tax-note {
	margin: 2px 0 18px;
	color: var(--pct-muted, #667085);
	font-size: 13px;
}

.single-product div.product .woocommerce-product-details__short-description {
	margin-bottom: 20px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--pct-line, #e4e7ec);
}

/* --------------------------------------------------------------------------
   2. Dosage selector
   Named "Dosage" via the woocommerce_attribute_label filter. The reference
   shows pack options as a row of chips, so the label sits above, not beside.
   -------------------------------------------------------------------------- */

.single-product div.product form.cart .variations {
	margin-bottom: 18px;
	border: 0;
}

.single-product div.product form.cart .variations tr {
	display: block;
	margin-bottom: 12px;
}

.single-product div.product form.cart .variations th.label,
.single-product div.product form.cart .variations td.value {
	display: block;
	width: auto;
	padding: 0;
	text-align: left;
}

.single-product div.product form.cart .variations th.label label {
	display: block;
	margin-bottom: 6px;
	color: var(--pct-ink, #1d2327);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.single-product div.product form.cart .variations select {
	min-width: 14em;
	padding: 10px 12px;
	border: 1px solid var(--pct-line, #e4e7ec);
	border-radius: var(--pct-radius, 6px);
	font-size: 15px;
}

/* Click-to-select boxes. variation-chips.js builds these alongside the native
   select and hides the select — so the dropdown is what you get without JS. */
.pct-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.pct-chip {
	min-width: 64px;
	padding: 10px 16px;
	border: 1px solid var(--pct-line, #e4e7ec);
	border-radius: var(--pct-radius, 6px);
	background: #fff;
	color: var(--pct-ink, #1d2327);
	font: inherit;
	font-size: 15px;
	line-height: 1.2;
	cursor: pointer;
	transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.pct-chip:hover:not(:disabled) {
	border-color: var(--pct-green, #5f8f1d);
}

.pct-chip:focus-visible {
	outline: 2px solid var(--pct-green, #5f8f1d);
	outline-offset: 2px;
}

.pct-chip.is-selected {
	border-color: var(--pct-green, #5f8f1d);
	box-shadow: inset 0 0 0 1px var(--pct-green, #5f8f1d);
	background: var(--pct-green-50, #f2f9e8);
	font-weight: 600;
}

/* A combination Woo has ruled out — struck through rather than removed, so the
   row doesn't reflow as you narrow the selection. */
.pct-chip.is-unavailable,
.pct-chip:disabled {
	border-style: dashed;
	color: var(--pct-muted, #667085);
	text-decoration: line-through;
	cursor: not-allowed;
	opacity: 0.6;
}

/* Kept in the accessibility tree and still focusable for keyboard users who
   prefer it, but out of the visual flow. */
.single-product div.product form.cart .variations select.pct-chips-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
   3. Quantity + add to cart
   One row at every width: the stepper keeps its own size and the button
   takes whatever is left.
   -------------------------------------------------------------------------- */

.single-product div.product form.cart {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
}

.single-product div.product form.cart .variations,
.single-product div.product form.cart .single_variation_wrap,
.single-product div.product form.cart .woocommerce-variation-description,
.single-product div.product form.cart .woocommerce-variation-price,
.single-product div.product form.cart .woocommerce-variation-availability {
	flex: 0 0 100%;
}

/* A variable product wraps its quantity and button in a block of their own,
   below the dosage chips, so that block is the row there. */
.single-product div.product form.cart .woocommerce-variation-add-to-cart {
	display: flex;
	flex: 0 0 100%;
	flex-wrap: nowrap;
	gap: 12px;
	align-items: center;
}

.single-product div.product form.cart .quantity {
	flex: 0 0 auto;
}

.single-product div.product form.cart .quantity input.qty {
	height: 48px;
	padding: 0 8px;
	border: 1px solid var(--pct-line, #e4e7ec);
	border-radius: var(--pct-radius, 6px);
	font-size: 15px;
}

/* Basis 0 rather than a width, so the button never asks for more room than
   the row has and wraps under the stepper. The parent's 40px left margin
   stays: it is the space its up/down arrows sit in. */
.single-product div.product form.cart button.single_add_to_cart_button {
	flex: 1 1 0;
	min-width: 0;
	min-height: 48px;
	border-radius: var(--pct-radius, 6px);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.02em;
}

/* --------------------------------------------------------------------------
   4. Stacked sections
   The reference's Description / Key Benefits / Directions for Use / Safety
   Information blocks, built from the description's own H2/H3 headings.
   -------------------------------------------------------------------------- */

/* Everything hooked to woocommerce_after_single_product_summary renders
   outside the constrained wrapper the gallery and summary sit in, so these
   blocks ran the full width of the viewport while the summary above them
   stayed on the grid. Same numbers as .pctmart-inner, so the whole page lines
   up on one column. */
.pct-sections,
.pct-sec--details {
	box-sizing: content-box;
	max-width: 1170px;
	margin-right: auto;
	margin-left: auto;
	padding-right: 2.617924em;
	padding-left: 2.617924em;
}

.pct-sections {
	margin-top: 40px;
}

/* The details block is its own hook, so its rule above already centres it;
   this only removes the double gap where the two meet. */
.pct-sections + .pct-sec--details {
	margin-top: 0;
}

@media (max-width: 768px) {
	.pct-sections,
	.pct-sec--details {
		padding-right: 1em;
		padding-left: 1em;
	}
}

.pct-sec {
	padding: 24px 0;
	border-top: 1px solid var(--pct-line, #e4e7ec);
}

.pct-sec:first-child {
	border-top: 0;
}

.pct-sec__title {
	margin: 0 0 12px;
	font-size: 19px;
	font-weight: 600;
	line-height: 1.3;
}

.pct-sec__body {
	color: var(--pct-ink, #1d2327);
	font-size: 15px;
	line-height: 1.7;
}

.pct-sec__body > :first-child {
	margin-top: 0;
}

.pct-sec__body > :last-child {
	margin-bottom: 0;
}

.pct-sec__body ul,
.pct-sec__body ol {
	margin: 0 0 1em;
	padding-left: 1.3em;
}

.pct-sec__body li {
	margin-bottom: 6px;
}

/* Collapsed state — only ever applied by product.js once it has measured that
   the body actually overflows, so a short section never gets clipped. */
.pct-sec.is-collapsed .pct-sec__body {
	position: relative;
	max-height: 190px;
	overflow: hidden;
}

.pct-sec.is-collapsed .pct-sec__body::after {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 64px;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff);
	content: "";
	pointer-events: none;
}

.pct-sec__toggle {
	margin-top: 10px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--pct-green-dark, #4d7317);
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}

.pct-sec__toggle:hover,
.pct-sec__toggle:focus-visible {
	text-decoration: underline;
}

/* Product details table — two columns, label left, value right. */
.pct-details {
	display: grid;
	grid-template-columns: minmax(8em, 14em) 1fr;
	margin: 0;
	font-size: 15px;
}

.pct-details dt,
.pct-details dd {
	margin: 0;
	padding: 10px 0;
	border-top: 1px solid var(--pct-line, #e4e7ec);
	line-height: 1.5;
}

.pct-details dt:first-of-type,
.pct-details dt:first-of-type + dd {
	border-top: 0;
}

.pct-details dt {
	color: var(--pct-muted, #667085);
	font-weight: 500;
}

/* The details block sits outside .pct-sections, so it needs its own rule to
   line up with the sections above it. */
.pct-sec--details {
	border-top: 1px solid var(--pct-line, #e4e7ec);
}

/* --------------------------------------------------------------------------
   5. Assurance badges
   Two rows: the policy badges (expiry, returns) read as quiet inline notes
   between the blurb and the cart, and the trust strip is a boxed three-up
   panel under the add-to-cart button.
   -------------------------------------------------------------------------- */

.pct-badge__icon {
	flex: none;
	color: #111;
}

.pct-policy {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 24px;
	margin: 0 0 18px;
	padding: 0;
	list-style: none;
}

.pct-policy li {
	display: flex;
	gap: 8px;
	align-items: center;
	margin: 0;
	color: var(--pct-ink, #1d2327);
	font-size: 14px;
	line-height: 1.35;
}

.pct-policy .pct-badge__icon {
	width: 20px;
	height: 20px;
}

.pct-trust {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px 10px;
	margin: 22px 0 0;
	padding: 18px 12px;
	border: 1px solid var(--pct-line, #e4e7ec);
	border-radius: var(--pct-radius, 6px);
	background: var(--pct-green-50, #f2f9e8);
	list-style: none;
}

.pct-trust li {
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-items: center;
	margin: 0;
	color: var(--pct-ink, #1d2327);
	font-size: 12.5px;
	font-weight: 500;
	line-height: 1.35;
	text-align: center;
}

.pct-trust .pct-badge__icon {
	width: 26px;
	height: 26px;
}

/* --------------------------------------------------------------------------
   6. Narrow screens
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
	.single-product div.product .summary .product_title {
		font-size: 20px;
	}

	.single-product div.product .summary p.price,
	.single-product div.product .summary span.price {
		font-size: 22px;
	}

	.pct-sec__title {
		font-size: 17px;
	}

	/* One badge per line reads better than two half-width columns. */
	.pct-policy {
		gap: 8px;
	}

	.pct-policy li {
		flex: 0 0 100%;
		font-size: 13.5px;
	}

	.pct-trust {
		padding: 16px 8px;
		gap: 12px 6px;
	}

	.pct-trust li {
		font-size: 12px;
	}

	/* Stack the details table rather than squeezing two columns. */
	.pct-details {
		grid-template-columns: 1fr;
	}

	.pct-details dd {
		padding-top: 0;
		border-top: 0;
	}

	.pct-details dt:first-of-type + dd {
		border-top: 0;
	}
}

/* --------------------------------------------------------------------------
   Manufacturer

   The logo sits inline with the name rather than replacing it: a logo alone
   identifies a maker only to someone who already knows the mark, and the name
   is what the sheet guarantees is present.
   -------------------------------------------------------------------------- */

.woocommerce div.product .pct-brand {
	display: flex;
	align-items: center;
	gap: 10px;
}

.pct-brand-logo {
	display: block;
	width: auto;
	/* Fixed height, free width: manufacturer marks are wildly different
	   proportions and a box would letterbox most of them. */
	height: 28px;
	max-width: 120px;
	object-fit: contain;
}

.pct-brand-name {
	display: inline-block;
}

/* Linked attribute values — manufacturer and active ingredient both have
   archives, and the link is the point of the row. */
.pct-details dd a,
.pct-brand-name[href] {
	color: var(--pct-green-dark, var(--pct-brand-deep));
	text-decoration: none;
}

.pct-details dd a:hover,
.pct-details dd a:focus,
.pct-brand-name[href]:hover,
.pct-brand-name[href]:focus {
	text-decoration: underline;
	text-underline-offset: 2px;
}

.pct-brand-name[href] {
	color: inherit;
}

/* --------------------------------------------------------------------------
   Warehouse

   Plain crawlable text under the price — the warehouse has no page of its own,
   so this line is what puts it in front of a search engine.
   -------------------------------------------------------------------------- */

.woocommerce div.product .pct-warehouse {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 12px;
	padding: 4px 10px;
	border-radius: 25rem;
	background: var(--pct-brand-tint-soft);
	color: var(--pct-brand-deep);
	font-size: 13px;
	font-weight: 500;
}

.woocommerce div.product .pct-warehouse::before {
	content: "";
	flex: 0 0 auto;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
}

/* The EU line is the exception in this catalogue, so it reads differently
   enough to be noticed before the basket refuses to mix. */
.woocommerce div.product .pct-warehouse[data-warehouse="eu"] {
	background: #fdf4e7;
	color: #92500a;
}

/* "Free shipping" after the warehouse name, set off by a hairline so the
   pill still reads as one line. */
.woocommerce div.product .pct-warehouse-free {
	padding-left: 8px;
	border-left: 1px solid currentColor;
	font-weight: 700;
}

/* Warehouse pill and the delivery guarantee beside it (inc/warehouse.php). */
.woocommerce div.product .pct-ship-line {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 14px;
	margin: 0 0 12px;
}

.woocommerce div.product .pct-ship-line .pct-warehouse {
	margin: 0;
}

.woocommerce div.product .pct-guarantee {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 12px;
	margin: 0;
	font-size: 13px;
}

.pct-guarantee-wrap {
	position: relative;
}

.pct-guarantee-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 0;
	border: 0;
	background: none;
	color: #067647;
	font: inherit;
	font-weight: 600;
	cursor: help;
}

.pct-guarantee-info {
	color: #667085;
}

.pct-guarantee-btn:focus-visible {
	outline: 2px solid var(--pct-brand-deep);
	outline-offset: 2px;
	border-radius: 4px;
}

.pct-guarantee-tip {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	z-index: 30;
	width: min(300px, 80vw);
	padding: 10px 12px;
	border-radius: 8px;
	background: #1d2327;
	box-shadow: 0 8px 24px rgba(16, 24, 40, 0.2);
	color: #fff;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.5;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.12s ease, visibility 0.12s;
}

.pct-guarantee-wrap:hover .pct-guarantee-tip,
.pct-guarantee-wrap:focus-within .pct-guarantee-tip {
	opacity: 1;
	visibility: visible;
}

.pct-guarantee-link {
	color: var(--pct-brand-deep);
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Delivery estimate for the visitor's country (inc/country-shipping.php),
   under the expiry and returns badges and in the same quiet register. */
.woocommerce div.product .pct-delivery {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 8px;
	margin: -6px 0 18px;
	color: var(--pct-ink, #1d2327);
	font-size: 14px;
	line-height: 1.4;
}

/* The sentence wraps beside the flag rather than dropping under it. */
.pct-delivery-text {
	flex: 1 1 0;
	min-width: 0;
}

.pct-delivery-flag {
	display: block;
	flex: 0 0 auto;
	width: auto;
	height: 14px;
	border-radius: 2px;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.pct-delivery-link {
	color: var(--pct-green-dark, var(--pct-brand-deep));
	font-size: 13px;
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Second breadcrumb trails for a product in several branches. Sits right
   under the main breadcrumb in the same quiet type. */
.pctmart-crumbs-alt {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 14px;
	margin: -10px 0 18px;
	color: #667085;
	font-size: 13px;
}

.pctmart-crumbs-alt a {
	color: #667085;
	text-decoration: none;
}

.pctmart-crumbs-alt a:hover,
.pctmart-crumbs-alt a:focus {
	color: var(--pct-brand-deep);
	text-decoration: underline;
}

.pctmart-crumbs-alt-sep {
	margin: 0 6px;
	color: #98a2b3;
}

/* "Free shipping on orders over $249" under the warehouse pill. */
.woocommerce div.product .pct-free-ship {
	margin: -8px 0 16px;
	color: #067647;
	font-size: 14px;
	font-weight: 500;
}

/* "Questions about this product?" link to the request panel, where the
   parent's call-back button used to sit. */
.woocommerce div.product .pct-questions {
	margin: 4px 0 16px;
	font-size: 14px;
}

.pct-questions a {
	color: var(--pct-brand-deep);
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Deal of the week flash on a discounted product. */
.woocommerce div.product .pct-deal-flash {
	display: inline-block;
	margin: 0 0 10px;
	padding: 4px 12px;
	border-radius: 25rem;
	background: #fdf4e7;
	color: #92500a;
	font-size: 13px;
	font-weight: 600;
}