/* =========================================================================
   Neda course page -- WooCommerce's single product, in the house style
   Loaded only on a course (src/CoursePage.php), after course-card.css.

   Owner, 2026-09-14: Neda link colours on the breadcrumb and category, no
   zoom on the course image, "Related Courses" as a Neda title over four
   front-page cards, and the page as a whole brought into line.
   ========================================================================= */

.single-product {
	--neda-cp-blue: #2F80ED;
	--neda-cp-cherry: #D7263D;
	--neda-cp-lime: #C4C40E;
	--neda-cp-meta: rgba(0, 0, 0, 0.72);
	--neda-cp-rule: rgba(0, 0, 0, 0.10);
	/* Boxes -- the gallery image, the empty-description note -- keep 10px;
	   controls take the 8px control corner (Design Rules §4, 2026-10-13). */
	--neda-cp-radius: 10px;
	--neda-cp-control: 8px;
	--neda-cp-shadow: 0 1px 2px rgba(0, 0, 0, 0.10), 0 8px 18px -6px rgba(0, 0, 0, 0.14);
}

/* ---- the category link ------------------------------------------------------
 * Same treatment as every WooCommerce breadcrumb (course-card.css): black
 * text on a Professional Blue underline, cherry on hover. See there for why
 * the blue moved from the text to the underline.
 */
.single-product .wp-block-woocommerce-product-meta a,
.single-product .wp-block-post-terms a {
	color: #000000;
	font-weight: 700;
	text-decoration: underline;
	text-decoration-color: var(--neda-cp-blue);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
	transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

.single-product .wp-block-woocommerce-product-meta a:hover,
.single-product .wp-block-post-terms a:hover,
.single-product .wp-block-woocommerce-product-meta a:focus-visible,
.single-product .wp-block-post-terms a:focus-visible {
	color: var(--neda-cp-cherry);
	text-decoration-color: var(--neda-cp-cherry);
}

.single-product .wp-block-woocommerce-product-meta a:focus-visible,
.single-product .wp-block-post-terms a:focus-visible {
	outline: 2px solid var(--neda-cp-cherry);
	outline-offset: 3px;
	border-radius: 2px;
}

/* ---- the breadcrumb -------------------------------------------------------- */
.single-product .woocommerce-breadcrumb {
	margin-block: 24px 20px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--neda-cp-meta);
}

/* ---- the top of the page: image and summary ------------------------------- */
.single-product main > .wp-block-columns {
	gap: clamp(24px, 4vw, 48px);
	align-items: flex-start;
	margin-block-end: clamp(32px, 5vw, 56px);
}

/*
 * The course image as a card: 10px corners and the card's shadow, so it
 * belongs to the same family as everything under it.
 *
 * NO ZOOM AND NO FOCUS EFFECT ON HOVER (owner). WooCommerce's hover zoom is
 * switched off at source (CoursePage.php); the rules here make sure nothing
 * else scales, filters or fades the picture under the pointer.
 */
.single-product .woocommerce-product-gallery {
	position: relative;
}

.single-product .woocommerce-product-gallery__image {
	overflow: hidden;
	border-radius: var(--neda-cp-radius);
	box-shadow: var(--neda-cp-shadow);
}

.single-product .woocommerce-product-gallery__image img,
.single-product .woocommerce-product-gallery__image:hover img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	transform: none !important;
	filter: none;
	opacity: 1;
	transition: none;
}

/* WooCommerce's zoom overlay, if an old cached script still draws one. */
.single-product .woocommerce-product-gallery .zoomImg {
	display: none !important;
}

/*
 * With the zoom off, WooCommerce draws no magnifier button: the picture itself
 * is the way into the full-screen view, so it keeps the pointer a link has.
 */

/* ---- the summary column --------------------------------------------------- */
.single-product main > .wp-block-columns > .wp-block-column:last-child {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.single-product main > .wp-block-columns > .wp-block-column:last-child > * {
	margin-block: 0;
}

/*
 * The course name in the Neda title style: the front page's section title,
 * one step larger because it is the page's h1. The card rules that used to
 * reach it -- a fixed two-line box and a clamp -- are gone, so a long name
 * wraps instead of being cut.
 */
.single-product main > .wp-block-columns .neda-card__titlerow .wp-block-post-title {
	margin: 0;
	font-size: clamp(28px, 3vw, 36px) !important;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: 0;
	color: #000000;
	text-align: start;
	overflow-wrap: anywhere;
}

.single-product main > .wp-block-columns .neda-card__org:empty {
	display: none;
}

.single-product main > .wp-block-columns .neda-card__logo {
	block-size: 40px;
	inline-size: auto;
	max-inline-size: 100%;
	object-fit: contain;
	object-position: left center;
}

/*
 * Language first, then the offer: the price wording at the start and the
 * button beside it. Same pieces as the card, laid out for a page.
 */
.single-product main > .wp-block-columns .neda-card__footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 16px;
	padding-block: 16px;
	border-block: 1px solid var(--neda-cp-rule);
}

.single-product main > .wp-block-columns .neda-card__actions {
	display: contents;
}

.single-product main > .wp-block-columns .neda-card__lang {
	order: -1;
	flex-basis: 100%;
}

.single-product main > .wp-block-columns .neda-card__enrol {
	margin-inline-start: auto;
}

.single-product main > .wp-block-columns .neda-card__free {
	font-size: 17px;
}

.single-product main > .wp-block-columns .neda-card__unpriced {
	font-size: 15px;
}

.single-product .wp-block-post-excerpt__excerpt {
	font-size: 17px;
	line-height: 1.5;
	color: var(--neda-cp-meta);
}

/* ---- category ------------------------------------------------------------- */
.single-product .wp-block-woocommerce-product-meta {
	font-size: 14px;
	color: var(--neda-cp-meta);
}

.single-product .wp-block-woocommerce-product-meta .wp-block-post-terms__prefix {
	font-weight: 700;
	color: #000000;
}

/* ---- the reviews tab ------------------------------------------------------ */
.single-product .wp-block-woocommerce-product-details {
	margin-block: 0 clamp(32px, 5vw, 56px);
}

/*
 * WooCommerce styles these tabs with
 * `html body .wp-block-woocommerce-product-details.is-style-minimal ul.tabs.wc-tabs li`
 * -- dimmed to 65% when inactive, and a 2px bar beside the active tab under
 * 768px. Each rule below repeats that chain with `.single-product` added, so
 * it outranks the stock one by one class rather than by !important.
 */
html body.single-product .wp-block-woocommerce-product-details.is-style-minimal ul.tabs.wc-tabs {
	display: flex;
	gap: 8px;
	margin: 0 0 24px;
	padding: 0;
	border-block-end: 1px solid var(--neda-cp-rule);
	list-style: none;
}

html body.single-product .wp-block-woocommerce-product-details.is-style-minimal ul.tabs.wc-tabs li,
html body.single-product .wp-block-woocommerce-product-details.is-style-minimal ul.tabs.wc-tabs li.active,
html body.single-product .wp-block-woocommerce-product-details.is-style-minimal ul.tabs.wc-tabs li:hover,
html body.single-product .wp-block-woocommerce-product-details.is-style-minimal ul.tabs.wc-tabs li:focus-within {
	display: inline-block;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	opacity: 1;
}

html body.single-product .wp-block-woocommerce-product-details.is-style-minimal ul.tabs.wc-tabs li a {
	display: inline-block;
	padding: 10px 4px;
	margin-block-end: -1px;
	font-size: 15px;
	font-weight: 700;
	color: #000000;
	text-decoration: none;
	border: 0;
	border-block-end: 3px solid transparent;
	transition: color 0.15s ease;
}

html body.single-product .wp-block-woocommerce-product-details.is-style-minimal ul.tabs.wc-tabs li.active a {
	border-block-end-color: #000000;
}

html body.single-product .wp-block-woocommerce-product-details.is-style-minimal ul.tabs.wc-tabs li a:hover,
html body.single-product .wp-block-woocommerce-product-details.is-style-minimal ul.tabs.wc-tabs li a:focus-visible {
	color: var(--neda-cp-cherry);
	border-block-end-color: var(--neda-cp-cherry);
	outline: none;
}

.single-product .woocommerce-Reviews-title,
.single-product #reviews h2 {
	margin: 0 0 12px;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.2;
	color: #000000;
}

.single-product #review_form .comment-reply-title {
	display: block;
	margin-block: 24px 12px;
	font-size: 17px;
	font-weight: 700;
	color: #000000;
}

.single-product #review_form textarea {
	box-sizing: border-box;
	inline-size: 100%;
	border: 1px solid rgba(0, 0, 0, 0.24);
	border-radius: var(--neda-cp-control);
	padding: 12px 14px;
	font: inherit;
}

/* ---- the fields: 35px with 8px corners ------------------------------------
 * Design Rules §4 (estate-wide 2026-10-13): every text field is 35px tall with
 * 8px corners; a textarea keeps the border, corners and side padding and takes
 * its own height. Until then the reviewer's name and email had no rule here
 * and fell to the theme's 26px square boxes, and the quantity box beside "Add
 * to basket" to 40px. One line by construction, so the height is stated.
 *
 * Focus is the canonical field geometry: the 3px cherry ring 3px OUTSIDE the
 * field, drawn as two box-shadow layers so it follows the corner, with the
 * border left as it is. The textarea used to take an outline at 1px and blank
 * its border; it now answers the same way as the fields beside it.
 */
.single-product #review_form :is(input[type="text"], input[type="email"]),
.single-product form.cart .quantity input.qty {
	box-sizing: border-box;
	block-size: 35px;
	padding: 0 12px;
	border: 1px solid rgba(0, 0, 0, 0.24);
	border-radius: var(--neda-cp-control);
	background-color: #FFFFFF;
	color: #000000;
	font: inherit;
	font-weight: 400;
	line-height: 1.4;
}

/* Under their labels, like "Your review" above them, rather than butted
   against the label's asterisk on the same line. */
.single-product #review_form :is(input[type="text"], input[type="email"]) {
	display: block;
	inline-size: min(100%, 360px);
	margin-block-start: 6px;
}

.single-product #review_form :is(textarea, input[type="text"], input[type="email"]):focus-visible,
.single-product form.cart .quantity input.qty:focus-visible {
	outline: none;
	box-shadow:
		0 0 0 3px #FFFFFF,
		0 0 0 6px var(--neda-cp-cherry);
}

@media (forced-colors: active) {
	.single-product #review_form :is(textarea, input[type="text"], input[type="email"]):focus-visible,
	.single-product form.cart .quantity input.qty:focus-visible {
		outline: 3px solid Highlight !important;
		outline-offset: 3px !important;
	}
}

/* ---- related courses ------------------------------------------------------
 * A Neda section: the front page's disc and title, then four cards. The cards
 * are the catalogue's (course-card.css); only the row is laid out here.
 */
.single-product .neda-related {
	margin-block: 0 clamp(40px, 6vw, 72px);
	padding-block-start: clamp(32px, 5vw, 48px);
	border-block-start: 1px solid var(--neda-cp-rule);
}

.neda-related__head {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-block-end: clamp(20px, 2.5vw, 28px);
}

.neda-related__disc {
	flex: none;
	display: grid;
	place-items: center;
	inline-size: 44px;
	block-size: 44px;
	border-radius: 999px;
	background: var(--neda-cp-lime, #C4C40E);
	color: #000000;
}

.single-product .neda-related .neda-related__title {
	margin: 0;
	font-size: clamp(26px, 2.6vw, 32px);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: 0;
	color: #000000;
}

/*
 * FOUR ACROSS. The related template is WooCommerce's flex layout, not the
 * catalogue's responsive grid, so it is replaced with a grid of its own and
 * steps down on narrower screens.
 */
.single-product .neda-related .wc-block-product-template {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.single-product .neda-related .wc-block-product-template > .wc-block-product {
	inline-size: auto !important;
	max-inline-size: none !important;
	margin: 0 !important;
}

@media (max-width: 1024px) {
	.single-product .neda-related .wc-block-product-template {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.single-product .neda-related .wc-block-product-template {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (forced-colors: active) {
	.single-product .woocommerce-product-gallery__image,
	.neda-related__disc {
		border: 1px solid CanvasText;
	}
}

@media (prefers-reduced-motion: reduce) {
	.single-product .woocommerce-breadcrumb a,
	.single-product .wp-block-post-terms a,
	html body.single-product .wp-block-woocommerce-product-details.is-style-minimal ul.tabs.wc-tabs li a {
		transition: none;
	}
}

/* ---- the rating stars ------------------------------------------------------
 * The stars ARE the rating control (radios in a labelled group), so their
 * glyph is a user-interface component under WCAG 2.2 SC 1.4.11 Non-text
 * Contrast (AA, 3:1). WooCommerce paints them in the theme's cyan: measured
 * 2.16:1 on white on 2026-09-14. Black is 21:1; the cherry hover and the
 * chosen state are 4.9:1. Keyboard focus gets a ring, because WooCommerce
 * draws none on these anchors.
 */
.single-product #review_form p.stars a,
.single-product #review_form p.stars a::before,
.single-product .star-rating,
.single-product .star-rating::before,
.single-product .star-rating span::before {
	color: #000000;
}

.single-product #review_form p.stars:hover a::before,
.single-product #review_form p.stars.selected a.active::before,
.single-product #review_form p.stars.selected a:not(.active)::before,
.single-product #review_form p.stars a:hover::before,
.single-product #review_form p.stars a:focus-visible::before {
	color: var(--neda-cp-cherry);
}

.single-product #review_form p.stars a:hover ~ a::before,
.single-product #review_form p.stars.selected a.active ~ a::before {
	color: #000000;
}

.single-product #review_form p.stars a:focus-visible {
	outline: 2px solid var(--neda-cp-cherry);
	outline-offset: 2px;
	border-radius: 2px;
}

/* ---- about this course -----------------------------------------------------
 * The description's own section (CoursePage::about_section()), titled like
 * "Related Courses". A readable measure, the body size, and the page's text
 * colour -- not the grey meta tone, because this is the content, not a label.
 */
.single-product .neda-about {
	margin-block: 0 clamp(32px, 5vw, 48px);
	padding-block-start: clamp(28px, 4vw, 40px);
	border-block-start: 1px solid var(--neda-cp-rule);
}

.single-product .neda-about .neda-related__title {
	margin: 0;
	font-size: clamp(26px, 2.6vw, 32px);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: 0;
	color: #000000;
}

.single-product .neda-about__body {
	max-inline-size: 72ch;
	font-size: 17px;
	line-height: 1.6;
	color: #000000;
}

.single-product .neda-about__body > :first-child {
	margin-block-start: 0;
}

.single-product .neda-about__body > :last-child {
	margin-block-end: 0;
}

/* The body's own links follow the house link rule: black, underlined, cherry. */
.single-product .neda-about__body a {
	color: #000000;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.single-product .neda-about__body a:hover,
.single-product .neda-about__body a:focus-visible {
	color: var(--neda-cp-cherry);
}

/* Only an editor sees this; it is a note, not content. */
.single-product .neda-about__empty {
	margin: 0;
	padding: 14px 16px;
	border-radius: var(--neda-cp-radius);
	background: #F8F9EA;
	font-size: 15px;
	color: #000000;
}

.single-product .neda-about__empty a {
	color: #000000;
	font-weight: 700;
	text-decoration: underline;
}

.single-product .neda-about__empty a:hover,
.single-product .neda-about__empty a:focus-visible {
	color: var(--neda-cp-cherry);
}

/* ---- the space package's course-type picker (Commerce::course_type_field) --
 * The Neda select draws the list (neda-select.css); the FIELD look belongs to
 * the page, so it is here: a 35px field, 8px corners, Black @45% 1.5px edge,
 * focus = the cherry ring 3px outside with the resting border untouched,
 * 14px rows in the open list (neda-select.css). Never the OS select.
 */
.single-product .neda-course-type-field {
	display: grid;
	gap: 6px;
	margin: 0 0 16px;
	max-inline-size: 420px;
}

.single-product .neda-course-type-field select,
.single-product .neda-course-type-field .neda-select__button {
	box-sizing: border-box;
	min-block-size: 35px;
	padding-block: 6px;
	padding-inline-start: 12px;
	border: 1.5px solid rgba(0, 0, 0, 0.45);
	border-radius: 8px;
	background-color: #FFFFFF;
	color: #000000;
	font: inherit;
	font-size: 15px;
	line-height: 20px;
}

.single-product .neda-course-type-field .neda-select__button:hover {
	border-color: rgba(0, 0, 0, 0.7);
}

.single-product .neda-course-type-field select:focus-visible,
.single-product .neda-course-type-field .neda-select__button:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px #FFFFFF, 0 0 0 6px #D7263D;
}

.single-product .neda-course-type-hint {
	font-size: 14px;
	line-height: 20px;
	color: rgba(0, 0, 0, 0.72);
}