/* ---- Short description bullet list ---- */
/*
 * The theme resets `ul, li { list-style: none; }` sitewide (needed for its
 * own nav/footer menus), which also strips bullets from a genuine content
 * list a vendor writes into the short description
 * (`.product-infor-desc ul`, right under the price). Restore real bullets
 * there specifically, plus the indent the same reset zeroed out.
 */
.product-infor-desc ul {
	list-style: disc;
	margin: 0 0 0 1.2em;
	padding: 0;
}

.product-infor-desc li {
	list-style: disc;
}

/* ---- Full-width gallery for single-image products ---- */
/*
 * template-parts/product/gallery.php always renders `.product-media-thumbs`
 * (the vertical thumbnail rail) even for a single-image product — it just
 * adds a `d-none` class to hide it, since the theme's own zoom.js
 * unconditionally initializes a Swiper on it and would break if the
 * element were missing outright. The theme's row layout still reserves
 * 100px of width for that now-hidden column (`calc(100% - 100px)`),
 * leaving a dead gap next to the main image. Only actually widen it when
 * the thumbs are hidden — a product with a real gallery still needs that
 * reserved width for its visible thumbnail rail.
 */
@media (min-width: 1200px) {
	.product-thumbs-slider.style-row .flat-wrap-media-product:has(~ .product-media-thumbs.d-none) {
		width: 100% !important;
	}
}

/* ---- Product video slide (appended by assets/product-video.js) ---- */

.bigbaa-product-video-slide {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
	background: #000;
}

.bigbaa-product-video-slide video {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.bigbaa-video-thumb {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	background-color: #101010;
	background-size: cover;
	background-position: center;
}

.bigbaa-video-thumb__play {
	position: relative;
	z-index: 1;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 6px 0 6px 9px;
	border-color: transparent transparent transparent #fff;
}

/* Once a real frame loads in as the background, the plain triangle needs
   a backdrop of its own to stay legible against a busy photo. */
.bigbaa-video-thumb.has-frame::before {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.28);
}

.bigbaa-video-thumb.has-frame .bigbaa-video-thumb__play {
	width: 22px;
	height: 22px;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	display: flex;
	align-items: center;
	justify-content: center;
}

.bigbaa-video-thumb.has-frame .bigbaa-video-thumb__play::after {
	content: '';
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 5px 0 5px 8px;
	border-color: transparent transparent transparent #101010;
	margin-left: 2px;
}

/* ---- Description collapse / View More ---- */

.tab-content_desc {
	overflow: hidden;
	transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.bigbaa-desc-fade {
	position: relative;
	margin-top: -64px;
	height: 64px;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 85%);
	pointer-events: none;
	transition: opacity 0.3s ease;
}

.bigbaa-desc-fade--hidden {
	opacity: 0;
	pointer-events: none;
}

.bigbaa-desc-toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 4px;
	padding: 10px 20px;
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: 999px;
	font-size: 0.95em;
	font-weight: 600;
	cursor: pointer;
	transition: border-color 0.2s ease, background 0.2s ease;
}

.bigbaa-desc-toggle:hover {
	border-color: rgba(0, 0, 0, 0.35);
	background: #fafafa;
}

.bigbaa-desc-toggle::after {
	content: "";
	width: 8px;
	height: 8px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform 0.25s ease;
}

.bigbaa-desc-toggle.is-expanded::after {
	transform: rotate(-135deg);
}

/* ---- Standalone reviews section (relocated out of the tabs) ---- */
/*
 * `.box-comment` is used by the theme for two different things that
 * happen to share one class name: the whole "heading + review list"
 * wrapper (`<div class="box-comment cancel-review-wrap">`) *and* each
 * individual review `<li>`. A single `.box-comment` card rule caught both,
 * nesting a card inside a card — the doubled-up boxed look this is fixing.
 * Flat list instead: no backgrounds, no shadows, just a divider line
 * between reviews, sitting directly on the section's own background.
 */

.bigbaa-reviews-section {
	padding: 56px 0;
	border-top: 1px solid rgba(0, 0, 0, 0.08);
	background: #fafafa;
}

.bigbaa-reviews-section .box-comment.cancel-review-wrap {
	background: none;
	border: none;
	box-shadow: none;
	border-radius: 0;
	padding: 0;
}

.bigbaa-reviews-section .comment-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* No avatar (Gravatar fallback is just a generic gray placeholder — not
   a real photo of the reviewer) or review date shown per request. */
.bigbaa-reviews-section .info_image,
.bigbaa-reviews-section .author_date {
	display: none;
}

.bigbaa-reviews-section .comment-list > li.box-comment {
	background: none;
	border: none;
	box-shadow: none;
	border-radius: 0;
	padding: 16px 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

/* Avatar/date removal (above) left this with less content than the
   theme's own 12px gap was tuned for — tighten it to match. */
.bigbaa-reviews-section .comment_info {
	margin-bottom: 8px;
}

.bigbaa-reviews-section .comment-list > li.box-comment:first-child {
	padding-top: 0;
}

.bigbaa-reviews-section .comment-list > li.box-comment:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.bigbaa-reviews-section .box-comment .children {
	list-style: none;
	margin: 18px 0 0;
	padding: 0 0 0 24px;
	border-left: 2px solid rgba(0, 0, 0, 0.08);
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.bigbaa-reviews-section .box-comment .children li.box-comment {
	padding: 0;
	border-bottom: none;
}

.bigbaa-reviews-section .write-review-wrap {
	background: none;
	border: none;
	box-shadow: none;
	border-radius: 0;
	padding: 24px 0 0;
	margin-top: 24px;
	border-top: 1px solid rgba(0, 0, 0, 0.08);
}

@media (max-width: 576px) {
	.bigbaa-reviews-section {
		padding: 40px 0;
	}

	.bigbaa-reviews-section .comment-list > li.box-comment {
		padding: 14px 0;
	}
}

/* ---- Reviews pagination (woocommerce/single-product-reviews.php's
   paginate_comments_links(), type=list — a plain <ul class="page-numbers">
   with no styling of its own beyond the theme's generic link color) ---- */

.bigbaa-reviews-section .woocommerce-pagination {
	margin-top: 32px;
}

.bigbaa-reviews-section .woocommerce-pagination ul.page-numbers {
	display: flex;
	align-items: center;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
	/* The theme's own generic `.page-numbers` rule puts a border around
	   this whole <ul> (meant for a different pagination style elsewhere)
	   — each button below already draws its own complete border, so this
	   outer one just adds a stray line above/below the row. */
	border: none;
}

.bigbaa-reviews-section .woocommerce-pagination .page-numbers {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 4px;
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: 8px;
	background: transparent;
	color: #6b6b6b;
	font-weight: 600;
	font-size: 0.95em;
	text-decoration: none;
	transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.bigbaa-reviews-section .woocommerce-pagination a.page-numbers:hover {
	border-color: #f96812;
	color: #f96812;
}

.bigbaa-reviews-section .woocommerce-pagination .page-numbers.current {
	background: #f96812;
	border-color: #f96812;
	color: #fff;
}

.bigbaa-reviews-section .woocommerce-pagination .page-numbers.dots {
	border: none;
	background: none;
	color: #f96812;
	min-width: auto;
	letter-spacing: 1px;
}

.bigbaa-reviews-section .woocommerce-pagination .page-numbers.prev,
.bigbaa-reviews-section .woocommerce-pagination .page-numbers.next {
	color: #333;
	font-size: 1.1em;
}

.bigbaa-reviews-section .woocommerce-pagination a.page-numbers.prev:hover,
.bigbaa-reviews-section .woocommerce-pagination a.page-numbers.next:hover {
	border-color: #f96812;
	color: #f96812;
}

/* "You May Also Like" (template-parts/product/related.php) carries a
   `flat-spacing-25` class that was never actually defined anywhere in the
   theme's CSS — a pre-existing gap, not something the reviews relocation
   caused, just one it makes obvious since reviews now sits directly above
   it with nothing else in between. Matches the padding scale the theme's
   own numbered `.flat-spacing-*` variants use. */
.flat-spacing-25 {
	padding-top: 60px;
	padding-bottom: 60px;
}

@media (max-width: 576px) {
	.flat-spacing-25 {
		padding-top: 40px;
		padding-bottom: 40px;
	}
}