/* Single product page: tabs (Description/Additional information/Reviews) and
   the review form/list beneath them. These render through WooCommerce's
   classic templates and default woocommerce.css, which styles the tabs as
   dated 2010s "file folder" tabs (beige boxes, drop shadows) and leaves the
   review form as bare, unstyled fields. Every selector here is prefixed with
   ".single-product div.product" (body class + the real product wrapper) for
   extra specificity margin -- core's own selectors here run 2-3 classes deep,
   so a plain 1-2 class override risks losing that fight depending on
   stylesheet load order (confirmed the hard way once already on the My
   Account nav). Loaded only on product pages (see copper_ink_enqueue_assets()
   in inc/theme-setup.php). */

/* Tabs: dated inline "folder tab" boxes -> a clean underline row. */
.single-product div.product .woocommerce-tabs ul.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 28px;
	list-style: none;
	margin: 0 0 32px;
	padding: 0;
	border-bottom: 1px solid var(--wp--preset--color--hairline);
}
.single-product div.product .woocommerce-tabs ul.tabs li {
	margin: 0;
	padding: 0;
	border: none;
	background: none;
	border-radius: 0;
}
.single-product div.product .woocommerce-tabs ul.tabs li::before,
.single-product div.product .woocommerce-tabs ul.tabs li::after {
	display: none;
}
.single-product div.product .woocommerce-tabs ul.tabs li a {
	display: inline-block;
	padding: 12px 0;
	margin-bottom: -1px;
	font-size: 14px;
	font-weight: 600;
	color: var(--wp--preset--color--text-muted);
	border-bottom: 2px solid transparent;
}
.single-product div.product .woocommerce-tabs ul.tabs li a:hover {
	color: var(--wp--preset--color--ink);
}
.single-product div.product .woocommerce-tabs ul.tabs li.active {
	background: none;
}
.single-product div.product .woocommerce-tabs ul.tabs li.active a {
	color: var(--wp--preset--color--ink);
	border-bottom-color: var(--wp--preset--color--terracotta);
}
.single-product div.product .woocommerce-tabs .panel {
	padding-top: 8px;
}

/* Read-only star rating (e.g. under the price, and inside each review). */
.single-product div.product .star-rating {
	font-size: 16px;
	color: var(--wp--preset--color--terracotta);
}
.single-product div.product .star-rating::before {
	color: var(--wp--preset--color--hairline);
}

/* Review section headings/intro copy. */
.single-product div.product .woocommerce-Reviews-title {
	font-family: var(--wp--preset--font-family--display);
	font-size: 30px;
	margin-bottom: 8px;
}
.single-product div.product p.woocommerce-noreviews {
	color: var(--wp--preset--color--text-muted);
	margin-bottom: 32px;
}

/* Review form. */
.single-product div.product #respond .comment-reply-title {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-size: 26px;
	margin-bottom: 8px;
}
.single-product div.product #respond p.comment-notes {
	font-size: 13px;
	color: var(--wp--preset--color--text-muted);
	margin-bottom: 28px;
}
.single-product div.product #respond p.comment-form-rating,
.single-product div.product #respond p.comment-form-comment,
.single-product div.product #respond p.comment-form-author,
.single-product div.product #respond p.comment-form-email {
	margin-bottom: 22px;
}
.single-product div.product #respond label {
	display: block;
	margin-bottom: 8px;
	font-size: 14px;
	font-weight: 600;
	color: var(--wp--preset--color--ink);
}

/* The interactive "Your rating" widget -- still WooCommerce's own icon-font
   star toggling (content swaps between outline/filled glyphs via its own
   .selected/.active classes and ~ sibling rules), just recolored and given
   real size/spacing instead of tiny, cramped, uncolored glyphs. */
.single-product div.product #respond p.stars {
	margin: 0;
}
.single-product div.product #respond p.stars a {
	width: 1.3em;
	height: 1.3em;
	margin-right: 2px;
	font-size: 22px;
	color: var(--wp--preset--color--terracotta);
	transition: transform 0.1s ease;
}
.single-product div.product #respond p.stars a:hover {
	transform: scale(1.15);
}

.single-product div.product #respond textarea,
.single-product div.product #respond input[type="text"],
.single-product div.product #respond input[type="email"] {
	width: 100%;
	max-width: 480px;
	padding: 12px 14px;
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: 4px;
	font-family: inherit;
	font-size: 14px;
	color: var(--wp--preset--color--ink);
}
.single-product div.product #respond textarea:focus,
.single-product div.product #respond input[type="text"]:focus,
.single-product div.product #respond input[type="email"]:focus {
	outline: none;
	border-color: var(--wp--preset--color--copper);
	box-shadow: 0 0 0 1px var(--wp--preset--color--copper);
}
.single-product div.product #respond p.comment-form-cookies-consent {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 24px;
	font-size: 13px;
	color: var(--wp--preset--color--text-secondary);
}
.single-product div.product #respond p.comment-form-cookies-consent label {
	margin: 0;
	font-size: 13px;
	font-weight: 400;
}

/* Populated review list (once reviews exist). WooCommerce's own classic
   template absolutely-positions the avatar and wraps the text in a bordered,
   left-indented "card" (ol.commentlist li .comment-text: margin-left:50px,
   1px border, radius) via selectors scoped to the real #reviews #comments
   IDs on the page -- an ID beats any number of classes, so the flex layout
   below is re-declared on that same #reviews #comments prefix everywhere it
   must win against those rules, not just given extra classes. */
.single-product div.product #reviews #comments .commentlist {
	list-style: none;
	margin: 0 0 40px;
	padding: 0;
}
.single-product div.product #reviews #comments .commentlist .comment_container {
	display: flex;
	gap: 16px;
	padding: 24px 0;
	border-bottom: 1px solid var(--wp--preset--color--hairline);
}
.single-product div.product #reviews #comments .commentlist img.avatar {
	position: static;
	float: none;
	width: 48px;
	height: 48px;
	padding: 0;
	margin: 0;
	background: none;
	border: none;
	box-shadow: none;
	border-radius: 50%;
	flex-shrink: 0;
}
.single-product div.product #reviews #comments .commentlist .comment-text {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: none;
	border-radius: 0;
}
.single-product div.product #reviews #comments .commentlist .comment-text .star-rating {
	float: none;
	display: block;
	margin-bottom: 6px;
}
.single-product div.product #reviews #comments .commentlist .comment-text p.meta {
	margin: 0 0 8px;
	font-size: 13px;
}
.single-product div.product #reviews #comments .commentlist .woocommerce-review__author {
	font-weight: 600;
	font-size: 14px;
	color: var(--wp--preset--color--ink);
}
.single-product div.product #reviews #comments .commentlist .woocommerce-review__dash {
	display: none;
}
.single-product div.product #reviews #comments .commentlist .woocommerce-review__published-date {
	color: var(--wp--preset--color--text-muted);
}
.single-product div.product #reviews #comments .commentlist .comment-text .description p {
	margin: 0;
	color: var(--wp--preset--color--text-secondary);
}