/* =========================================================================
   Reviews
   -------------------------------------------------------------------------
   Covers three surfaces, all of which read from WooCommerce's native review
   table — so they work whether a review came from CusRev, from the import, or
   from a customer typing it straight into the comment form:

     1. WooCommerce's own .star-rating (product page + anywhere else)
     2. The Reviews tab on the product page
     3. CusRev's widget output (.cr-* classes)

   Why this file exists at all: WooCommerce ships its star rating in its own
   accent purple (#7f54b3), the same colour that hijacked the Add to Cart
   button. Left alone it would put purple stars on a cream-and-gold storefront.
   ====================================================================== */

/* --- WooCommerce's star rating ------------------------------------------
   .star-rating is a font-based widget: a full row of ☆ with a ★ row absolutely
   positioned over it, clipped to a percentage width. Only the colour and size
   are ours; the mechanism stays WooCommerce's.                            */

.woocommerce .star-rating,
.woocommerce-page .star-rating,
.star-rating {
	color: var(--auris-gold);
	font-size: 1em;
	letter-spacing: 0.08em;
}

.woocommerce .star-rating::before,
.star-rating::before {
	color: var(--auris-beige);
}

/* --- Rating line under the product title -------------------------------- */

.woocommerce div.product .woocommerce-product-rating {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0 0 1rem;
	font-family: var(--font-body-family, inherit);
}

.woocommerce div.product .woocommerce-product-rating .woocommerce-review-link {
	color: var(--auris-muted);
	font-size: 0.875rem;
	text-decoration: none;
	border-bottom: 1px solid var(--auris-beige);
	padding-bottom: 1px;
	transition: color 0.2s ease, border-color 0.2s ease;
}

.woocommerce div.product .woocommerce-product-rating .woocommerce-review-link:hover,
.woocommerce div.product .woocommerce-product-rating .woocommerce-review-link:focus-visible {
	color: var(--auris-gold-dark);
	border-color: var(--auris-gold);
}

/* --- Product card rating ------------------------------------------------- */

.auris-product-card__rating {
	color: var(--auris-gold);
	font-size: 0.8125rem;
	letter-spacing: 0.1em;
	line-height: 1;
	margin-bottom: 0.5rem;
	display: flex;
	align-items: center;
	gap: 0.4rem;
}

.auris-product-card__rating .auris-product-card__rating-empty {
	color: var(--auris-beige);
}

.auris-product-card__rating-count {
	color: var(--auris-muted);
	font-size: 0.75rem;
	letter-spacing: 0.02em;
}

/* --- The Reviews tab ----------------------------------------------------- */

.woocommerce #reviews h2,
.woocommerce #reviews h3 {
	font-family: var(--font-heading-family);
	font-weight: 500;
	color: var(--auris-wood);
	letter-spacing: 0.01em;
}

.woocommerce #reviews #comments ol.commentlist {
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce #reviews #comments ol.commentlist li {
	margin: 0 0 1.25rem;
	padding: 0;
	border: 0;
	background: none;
}

.woocommerce #reviews #comments ol.commentlist li .comment_container {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
	padding: 1.5rem;
	border: 1px solid var(--auris-beige);
	border-radius: 4px;
	background: var(--auris-paper);
}

.woocommerce #reviews #comments ol.commentlist li img.avatar {
	position: static;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid var(--auris-beige);
	padding: 0;
	background: var(--auris-cream-soft);
	float: none;
}

.woocommerce #reviews #comments ol.commentlist li .comment-text {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	flex: 1;
}

.woocommerce #reviews #comments ol.commentlist li .comment-text p.meta {
	font-size: 0.8125rem;
	color: var(--auris-muted);
	margin-bottom: 0.5rem;
}

.woocommerce #reviews #comments ol.commentlist li .comment-text p.meta strong {
	color: var(--auris-ink);
	font-weight: 600;
}

.woocommerce #reviews #comments ol.commentlist li .comment-text .description p:last-child {
	margin-bottom: 0;
}

/* --- The "leave a review" form ------------------------------------------ */

.woocommerce #review_form #respond {
	padding: 1.75rem;
	border: 1px solid var(--auris-beige);
	border-radius: 4px;
	background: var(--auris-cream-soft);
}

.woocommerce #review_form #respond input[type="text"],
.woocommerce #review_form #respond input[type="email"],
.woocommerce #review_form #respond textarea {
	width: 100%;
	padding: 0.7rem 0.85rem;
	border: 1px solid var(--auris-beige);
	border-radius: 3px;
	background: #fff;
	color: var(--auris-ink);
	font: inherit;
}

.woocommerce #review_form #respond input:focus-visible,
.woocommerce #review_form #respond textarea:focus-visible {
	outline: 2px solid var(--auris-gold);
	outline-offset: 1px;
	border-color: var(--auris-gold);
}

.woocommerce #review_form #respond p.stars a {
	color: var(--auris-gold);
}

.woocommerce #review_form #respond .form-submit input[type="submit"] {
	background: var(--auris-wood) !important;
	color: var(--auris-paper) !important;
	border: 1px solid var(--auris-wood) !important;
	border-radius: 2px;
	padding: 0.8rem 2rem;
	font-size: 0.8125rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}

.woocommerce #review_form #respond .form-submit input[type="submit"]:hover,
.woocommerce #review_form #respond .form-submit input[type="submit"]:focus-visible {
	background: var(--auris-gold-dark) !important;
	border-color: var(--auris-gold-dark) !important;
}

/* --- Homepage slider header ---------------------------------------------
   The summary line and the arrows sit together on the right of the heading. */

.auris-reviews__aside {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.9rem;
}

.auris-reviews__arrows button:disabled {
	opacity: 0.35;
	cursor: default;
}

.auris-reviews__arrows button:disabled:hover {
	border-color: var(--auris-line);
	background: transparent;
	color: var(--auris-wood);
}

.auris-reviews__more {
	margin: 1.75rem 0 0;
	text-align: center;
}

.auris-reviews__more a {
	color: var(--auris-gold-dark);
	font-size: 0.8125rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
	border-bottom: 1px solid var(--auris-beige);
	padding-bottom: 3px;
	transition: border-color 0.2s ease;
}

.auris-reviews__more a:hover,
.auris-reviews__more a:focus-visible {
	border-color: var(--auris-gold);
}

@media (max-width: 899px) {
	.auris-reviews__aside {
		align-items: flex-start;
	}
}

/* --- The Reviews page ----------------------------------------------------
   [auris_reviews] — same card as the homepage, laid out as a grid rather than
   a scroll track, with review photos.                                      */

.auris-reviewspage__summary {
	display: flex;
	align-items: baseline;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 0 0 2.5rem;
	padding-bottom: 2rem;
	border-bottom: 1px solid var(--auris-beige);
}

.auris-reviewspage__score {
	font-family: var(--font-heading-family);
	font-size: 3rem;
	line-height: 1;
	color: var(--auris-wood);
}

.auris-reviewspage__summary .auris-review-card__stars {
	font-size: 1.125rem;
}

.auris-reviewspage__count {
	color: var(--auris-muted);
	font-size: 0.875rem;
	letter-spacing: 0.04em;
}

.auris-reviewspage__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 20px;
	align-items: start;
}

/* The card is shared with the homepage, where it is a fixed-width slide.
   In the grid it should fill its column instead. */
.auris-review-card--full {
	flex: 1 1 auto;
	min-height: 0;
}

.auris-review-card--full blockquote {
	margin: 22px 0;
	font-size: 19px;
}

.auris-review-card__photos {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 20px;
}

.auris-review-card__photos img {
	width: 82px;
	height: 82px;
	object-fit: cover;
	border-radius: 3px;
	border: 1px solid var(--auris-beige);
}

.auris-reviewspage__empty {
	padding: 3rem 0;
	text-align: center;
	color: var(--auris-muted);
}

@media (max-width: 599px) {
	.auris-reviewspage__grid {
		grid-template-columns: 1fr;
	}
	.auris-reviewspage__score {
		font-size: 2.25rem;
	}
}

/* --- CusRev widgets ------------------------------------------------------
   CusRev ships its own layout, which is fine — what it does not know is the
   palette. These rules recolour it and leave its structure alone. Anything
   below is deliberately low-specificity so CusRev's own responsive rules
   still win where they matter.                                            */

.cr-reviews-grid,
.cr-reviews-slider,
.cr-all-reviews,
.cr-reviews-rating {
	--cr-primary-color: var(--auris-gold);
	--cr-star-color: var(--auris-gold);
	--cr-border-color: var(--auris-beige);
	color: var(--auris-ink);
	font-family: inherit;
}

.cr-reviews-grid .cr-star-rating,
.cr-reviews-slider .cr-star-rating,
.cr-all-reviews .cr-star-rating,
.cr-review-rating,
.cr-average-rating-stars {
	color: var(--auris-gold);
}

.cr-review,
.cr-reviews-grid-item,
.cr-review-card {
	background: var(--auris-paper);
	border: 1px solid var(--auris-beige);
	border-radius: 4px;
}

.cr-review-author,
.cr-review-name {
	color: var(--auris-ink);
	font-weight: 600;
}

.cr-review-date,
.cr-review-product {
	color: var(--auris-muted);
	font-size: 0.8125rem;
}

.cr-review-title {
	font-family: var(--font-heading-family);
	font-weight: 500;
	color: var(--auris-wood);
}

/* Verified badge — Shopify's Judge.me showed one, so keep the signal. */
.cr-verified-badge,
.cr-review-verified {
	color: var(--auris-success);
	font-size: 0.75rem;
	letter-spacing: 0.04em;
}

/* Review photos: keep them inside the card. */
.cr-review-images img,
.cr-review-media img {
	max-width: 100%;
	height: auto;
	border-radius: 3px;
	border: 1px solid var(--auris-beige);
}

/* Inside the homepage testimonials section the cards sit on cream already,
   so drop the second background and let the section breathe. */
.auris-reviews .cr-review,
.auris-reviews .cr-reviews-grid-item,
.auris-reviews .cr-review-card {
	background: var(--auris-cream-soft);
}

/* =========================================================================
   Contact page + form
   -------------------------------------------------------------------------
   Lives in this stylesheet rather than its own file so the Contact page does
   not pay for a second request. It is roughly 80 lines.
   ====================================================================== */

.auris-contactpage__grid {
	display: grid;
	grid-template-columns: minmax(240px, 320px) 1fr;
	gap: clamp(28px, 5vw, 64px);
	align-items: start;
	margin-top: 3rem;
}

.auris-contactpage__details {
	padding: 1.75rem;
	border: 1px solid var(--auris-beige);
	border-radius: 4px;
	background: var(--auris-cream-soft);
}

.auris-title--xs {
	font-size: clamp(20px, 2.4vw, 26px);
	margin: 0 0 1.25rem;
}

.auris-contactpage__link {
	display: block;
	padding: 0.85rem 0;
	border-bottom: 1px solid var(--auris-beige);
	text-decoration: none;
}

.auris-contactpage__link:last-of-type {
	border-bottom: 0;
}

.auris-contactpage__link span {
	display: block;
	color: var(--auris-muted);
	font-size: 0.6875rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	margin-bottom: 4px;
}

.auris-contactpage__link strong {
	color: var(--auris-wood);
	font-size: 0.9375rem;
	font-weight: 500;
	transition: color 0.2s ease;
}

.auris-contactpage__link:hover strong,
.auris-contactpage__link:focus-visible strong {
	color: var(--auris-gold-dark);
}

.auris-contactpage__hours {
	margin: 1.5rem 0 0;
	color: var(--auris-muted);
	font-size: 0.8125rem;
	line-height: 1.6;
}

/* --- The form ----------------------------------------------------------- */

.auris-contactform__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}

.auris-field {
	margin: 0 0 1.1rem;
}

.auris-field label {
	display: block;
	margin-bottom: 0.4rem;
	color: var(--auris-muted);
	font-size: 0.6875rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.auris-field label span {
	color: var(--auris-gold-dark);
}

.auris-field input,
.auris-field textarea {
	width: 100%;
	padding: 0.75rem 0.9rem;
	border: 1px solid var(--auris-beige);
	border-radius: 3px;
	background: #fff;
	color: var(--auris-ink);
	font: inherit;
	font-size: 0.9375rem;
}

.auris-field textarea {
	resize: vertical;
	min-height: 150px;
}

.auris-field input:focus-visible,
.auris-field textarea:focus-visible {
	outline: 2px solid var(--auris-gold);
	outline-offset: 1px;
	border-color: var(--auris-gold);
}

.auris-field--submit {
	margin-top: 1.5rem;
}

/* The honeypot must be genuinely invisible but still reachable by a bot's
   DOM parser — display:none is a giveaway some bots check for. */
.auris-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.auris-formnotice {
	margin: 0 0 1.5rem;
	padding: 0.9rem 1.1rem;
	border-radius: 3px;
	border-left: 3px solid;
	font-size: 0.9375rem;
}

.auris-formnotice--ok {
	border-color: var(--auris-success);
	background: rgba(33, 79, 59, 0.07);
	color: var(--auris-success);
}

.auris-formnotice--err {
	border-color: #9c3b28;
	background: rgba(156, 59, 40, 0.07);
	color: #7d2f20;
}

@media (max-width: 899px) {
	.auris-contactpage__grid {
		grid-template-columns: 1fr;
	}
	.auris-contactform__row {
		grid-template-columns: 1fr;
		gap: 0;
	}
}

/* =========================================================================
   Breadcrumbs
   -------------------------------------------------------------------------
   Rank Math renders the trail (inc/breadcrumbs.php) — this only styles it.
   Deliberately generic selectors: Rank Math's internal markup isn't part of
   its public API, so rather than target class names that could change on
   update, this colours whatever text and links land inside the wrapper.
   ====================================================================== */

.auris-breadcrumbs {
	padding: 14px 0;
	border-bottom: 1px solid var(--auris-line, var(--auris-beige));
	background: var(--auris-cream-soft);
	font-size: 0.8125rem;
	letter-spacing: 0.01em;
	color: var(--auris-muted);
}

.auris-breadcrumbs a {
	color: var(--auris-muted);
	text-decoration: none;
	transition: color 0.2s ease;
}

.auris-breadcrumbs a:hover,
.auris-breadcrumbs a:focus-visible {
	color: var(--auris-gold-dark);
	text-decoration: underline;
}

/* The current (non-linked) page name, whatever element Rank Math wraps it
   in — <span>, <strong>, or plain text — reads in the ink colour. */
.auris-breadcrumbs span:last-child,
.auris-breadcrumbs strong {
	color: var(--auris-wood);
	font-weight: 500;
}

.auris-breadcrumbs p {
	margin: 0;
}

@media (max-width: 599px) {
	.auris-breadcrumbs {
		font-size: 0.75rem;
		padding: 11px 0;
	}
}