/*
 * Block WP Portal — WooCommerce shop chrome.
 *
 * Loaded only on WooCommerce screens. The product card itself (.prod) lives in
 * style.css because the homepage sections use the same markup; everything here
 * is shop-only furniture: the filter sidebar, the toolbar, the single-product
 * layout and the cart / checkout / account screens.
 */

/* ===========================================================
   SHOP LAYOUT — filters aside + product column
   =========================================================== */
.bwp-woocommerce { padding: 30px 0 90px; border-top: 1px solid var(--line); }

.bwp-shop-layout {
	display: grid;
	grid-template-columns: 268px minmax(0, 1fr);
	grid-template-rows: auto 1fr;
	column-gap: 44px;
	align-items: start;
}
/* Left column stacks filters over promo; product grid spans both rows. */
.bwp-shop-filters    { grid-column: 1; grid-row: 1; }
.bwp-shop-promo-card { grid-column: 1; grid-row: 2; }
.bwp-shop-main       { grid-column: 2; grid-row: 1 / span 2; min-width: 0; }

.bwp-shop-filters {
	position: sticky;
	top: 100px;
	background: var(--cream);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 26px 24px;
}
.bwp-shop-filters--static { position: static; top: auto; }

.bwp-filters-head { display: none; }

.bwp-filter { padding-bottom: 22px; margin-bottom: 22px; border-bottom: 1px solid var(--line); }
.bwp-filter:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.bwp-filter__title {
	font-family: var(--display);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: -.01em;
	margin: 0 0 14px;
}

.bwp-filter__cats { list-style: none; margin: 0; padding: 0; }
.bwp-filter__cats li { margin-bottom: 9px; }
.bwp-filter__cats a {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	font-size: 14px;
	color: var(--char);
	transition: color .2s;
}
.bwp-filter__cats a:hover,
.bwp-filter__cats a.is-active { color: var(--orange); font-weight: 600; }
.bwp-cat-count { color: var(--muted); font-size: 12.5px; }

.bwp-pill {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 14px;
	border: 1.5px solid var(--line);
	border-radius: 99px;
	font-size: 13px;
	font-weight: 500;
	margin: 0 6px 8px 0;
	transition: all .2s;
	background: #fff;
}
.bwp-pill:hover { border-color: var(--ink); color: var(--ink); }
.bwp-pill.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }

.bwp-swatch { display: inline-flex; align-items: center; gap: 8px; }
.bwp-swatch__dot { width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(10, 10, 10, .12); }

.bwp-filter-actions { margin-top: 20px; }
.bwp-filter-clear {
	font-size: 13px;
	font-weight: 600;
	color: var(--orange);
	display: inline-flex;
	align-items: center;
	gap: 7px;
}

/* Mobile filter drawer */
.bwp-filter-toggle {
	display: none;
	align-items: center;
	gap: 9px;
	border: 1.5px solid var(--ink);
	border-radius: 99px;
	padding: 11px 22px;
	font-size: 14px;
	font-weight: 600;
	margin-bottom: 22px;
}
.bwp-filter-overlay {
	position: fixed;
	inset: 0;
	background: rgba(10, 10, 10, .45);
	opacity: 0;
	pointer-events: none;
	transition: opacity .25s;
	z-index: 88;
}
.bwp-filters-lock { overflow: hidden; }
.bwp-filter-overlay.is-open { opacity: 1; pointer-events: auto; }

/* ===========================================================
   SHOP TOOLBAR
   =========================================================== */
.bwp-shop-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	margin-bottom: 26px;
}
.woocommerce .woocommerce-result-count,
.woocommerce-page .woocommerce-result-count { margin: 0; float: none; }

/* Search box — sits where WooCommerce's sorting dropdown used to. */
.bwp-shop-search {
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 0 auto;
	max-width: 100%;
	flex-wrap: wrap;
}
.bwp-shop-search__ic {
	position: absolute;
	left: 16px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--muted);
	display: grid;
	place-items: center;
	pointer-events: none;
}
.bwp-shop-search input[type=search] {
	width: 260px;
	max-width: 100%;
	padding: 11px 16px 11px 42px;
	border: 1.5px solid var(--line);
	border-radius: 99px;
	font-size: 14px;
	background: #fff;
}
.bwp-shop-search input[type=search]:focus { border-color: var(--ink); }
.bwp-shop-search button[type=submit] {
	background: var(--ink);
	color: #fff;
	border-radius: 99px;
	padding: 11px 22px;
	font-size: 13.5px;
	font-weight: 600;
	transition: background .25s;
}
.bwp-shop-search button[type=submit]:hover { background: var(--orange); }
.bwp-shop-search__clear { font-size: 13px; font-weight: 600; color: var(--orange); white-space: nowrap; }
.woocommerce nav.woocommerce-pagination ul { border: none; display: flex; gap: 8px; justify-content: center; padding-top: 30px;}
.woocommerce nav.woocommerce-pagination ul li { border: none; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	min-width: 42px;
	height: 42px;
	line-height: 42px;
	padding: 0 14px;
	border-radius: 99px;
	border: 1.5px solid var(--line);
	font-weight: 600;
	font-size: 14px;
}
.woocommerce nav.woocommerce-pagination ul li span.current,
.woocommerce nav.woocommerce-pagination ul li a:hover {
	background: var(--ink);
	color: #fff;
	border-color: var(--ink);
}

.bwp-no-products { grid-column: 1 / -1; }

/* While an AJAX filter / search request is in flight. */
.bwp-shop-layout.is-loading .bwp-shop-main {
	opacity: .55;
	transition: opacity .2s ease;
	pointer-events: none;
}

/* ===========================================================
   SINGLE PRODUCT
   =========================================================== */
.woocommerce div.product { padding-top: 10px; }

/* Gallery + summary share one flex row; the wrapper is only as tall as the
   gallery, so the sticky summary releases at the gallery's bottom. */
.woocommerce div.product .bwp-product-top {
	display: flex;
	align-items: flex-start;
	gap: 44px;
}
.woocommerce div.product .bwp-product-top::before,
.woocommerce div.product .bwp-product-top::after { display: none; } /* kill WC clearfix inside flex */

.woocommerce div.product .woocommerce-product-gallery {
	width: 58% !important;
	float: none;
	margin: 0;
}
.woocommerce div.product div.summary.entry-summary {
	width: 39%;
	float: none;
	margin: 0;
	padding-left: 0;
	position: sticky;
	top: 100px;
	align-self: flex-start;
}

/* Feature image sits in a 150vh window and scrolls down while the gallery is
   hovered, so long full-page screenshots reveal their footer without a
   lightbox. Hovering the gallery — not the whole product — drives it. */
.woocommerce div.product .woocommerce-product-gallery__wrapper { margin: 0; }
.woocommerce div.product .woocommerce-product-gallery__image {
	height: 150vh;
	overflow: hidden;
	border-radius: var(--radius);
	border: 1px solid var(--line);
	margin: 0;
}
.woocommerce div.product .woocommerce-product-gallery__image a {
	display: block;
	height: 100%;
}
.woocommerce div.product .woocommerce-product-gallery__image img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 0;
	/* translateY % is relative to the image's own height, so this reveals the
	   bottom edge exactly regardless of how tall the screenshot is. */
	transition: transform 9s ease;
}
.woocommerce div.product .woocommerce-product-gallery:hover .woocommerce-product-gallery__image img {
	transform: translateY(calc(150vh - 100%));
}
/* The zoom magnifier is removed in PHP; hide any trigger it may have left. */
.woocommerce div.product .woocommerce-product-gallery__trigger { display: none; }

.woocommerce div.product .product_title { margin-bottom: 6px; }
.woocommerce div.product .woocommerce-product-rating { margin-bottom: 18px; }
.woocommerce div.product .woocommerce-product-details__short-description {
	color: var(--muted);
	font-size: 15.5px;
	line-height: 1.7;
	margin-bottom: 22px;
}
.woocommerce div.product .product_meta {
	font-size: 13px;
	color: var(--muted);
	border-top: 1px solid var(--line);
	margin-top: 22px;
	padding-top: 18px;
}
.woocommerce div.product .product_meta a { color: var(--char); }
.woocommerce div.product .product_meta a:hover { color: var(--orange); }

/* ---- Theme details ---- */
.bwp-theme-details { margin: 6px 0 22px; }
.bwp-detail-list {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1px;
	background: var(--line);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	overflow: hidden;
	margin: 0 0 16px;
}
.bwp-detail-row { background: var(--cream); padding: 12px 16px; }
.bwp-detail-row dt {
	font-size: 11.5px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--muted);
	font-weight: 600;
	margin: 0 0 3px;
}
.bwp-detail-row dd { margin: 0; font-size: 14.5px; font-weight: 600; color: var(--ink); }
.bwp-detail-links { display: flex; gap: 18px; flex-wrap: wrap; }
.bwp-detail-link { font-size: 13.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; }
.bwp-detail-link i { color: var(--orange); }

/* ---- Purchase buttons ---- */
.bwp-buy-row { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 14px; }
.bwp-buy-row .btn { flex: 1 1 0; justify-content: center; padding: 15px 26px; min-width: 0; }
.bwp-buy-now { font-size: 15px; }
/* Free-theme stacked layout: premium (line 1), bundle (line 2), download + demo (line 3). */
.bwp-buy-stack { display: flex; flex-direction: column; gap: 10px; }
.bwp-buy-stack .bwp-buy-block { display: flex; width: 100%; justify-content: center; padding: 15px 26px; font-size: 15px; }
.bwp-buy-stack .bwp-buy-row { margin: 0; }
/* Live demo reads as a real call-to-action beside Buy now. */
.bwp-demo-btn { border-color: var(--orange); color: var(--orange); font-size: 15px; }
.bwp-demo-btn:hover { background: var(--orange); border-color: var(--orange); color: #fff; }
.bwp-bundle-row {
	padding: 16px 0 6px;
	border-top: 1px solid var(--line);
	margin-top: 18px;
}
.bwp-buy-bundle { display: flex; width: 100%; justify-content: center; }

.payment-img-group { margin-top: 20px; }
.payment-img-group img { max-width: 100%; height: auto; }

/* ---- Single-product Q&A accordions ---- */
.bwp-product-faq { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); }
.bwp-faq-title { font-size: 18px; margin-bottom: 14px; }
.bwp-product-faq .faq-list { gap: 10px; }
.bwp-product-faq .faq-q { padding: 15px 18px; font-size: 14.5px; }
.bwp-product-faq .faq-a { padding: 0 18px 16px; font-size: 14px; }

/* ---- Second buy-now block, after the tabs ---- */
.bwp-after-buy {
	clear: both;
	width: 100%;
	text-align: center;
	background: var(--cream);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 44px 30px;
	margin-top: 20px;
}
.bwp-after-buy h3 { font-size: clamp(24px, 3vw, 34px); margin-bottom: 22px; }
.bwp-after-buy .bwp-buy-row { max-width: 420px; margin: 0 auto; }
.bwp-after-bundle { display: inline-flex; margin-top: 12px; }

/* ---- Changelog tab ---- */
.bwp-changelog { font-size: 14.5px; line-height: 1.7; }
.bwp-changelog h1, .bwp-changelog h2, .bwp-changelog h3, .bwp-changelog h4 { margin-top: 22px; }
.bwp-changelog ul { margin: 0 0 18px; }

.bwp-qty { display: inline-flex; align-items: center; border: 1.5px solid var(--line); border-radius: 99px; overflow: hidden; }
.bwp-qty__btn { width: 38px; height: 44px; font-size: 16px; color: var(--muted); }
.bwp-qty__btn:hover { color: var(--ink); }
.bwp-qty input.qty { border: none; box-shadow: none; width: 46px; }

/* ===========================================================
   CART / CHECKOUT / ACCOUNT
   =========================================================== */
.woocommerce-cart table.cart img { width: 74px; border-radius: 10px; }
.woocommerce-cart table.cart td.actions .coupon .input-text { width: 190px; border-radius: 99px; padding: 12px 18px; }
.woocommerce .cart-collaterals h2,
.woocommerce-checkout h3 { font-size: 22px; }
.woocommerce-checkout .woocommerce-checkout-review-order-table th,
.woocommerce-checkout .woocommerce-checkout-review-order-table td { padding: 12px 14px; }
.woocommerce-account .woocommerce-MyAccount-content {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 30px;
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { color: var(--orange); font-weight: 700; }
.woocommerce form.login,
.woocommerce form.register,
.woocommerce-form-login,
.woocommerce-form-register {
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 30px;
	background: var(--cream);
}

/* ===========================================================
   RESPONSIVE
   =========================================================== */
@media (max-width: 1024px) {
	.bwp-shop-layout { display: flex; flex-direction: column; grid-template-columns: 1fr; grid-template-rows: none; gap: 0; }
	.bwp-shop-filters,
	.bwp-shop-promo-card,
	.bwp-shop-main { grid-column: 1; grid-row: auto; }
	/* Order: products first, promo banner last. Filters are a fixed drawer. */
	.bwp-shop-main       { order: 1; }
	.bwp-shop-promo-card { order: 2; margin-top: 28px; }
	.bwp-filter-toggle { display: inline-flex; }
	.bwp-shop-filters {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		width: min(330px, 88vw);
		border-radius: 0;
		border: none;
		z-index: 90;
		overflow-y: auto;
		transform: translateX(-100%);
		transition: transform .3s ease;
		background: #fff;
	}
	.bwp-shop-layout.is-filters-open .bwp-shop-filters { transform: translateX(0); }
	.bwp-filters-head {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20px;
	}
	.bwp-filters-head__title { font-family: var(--display); font-size: 18px; font-weight: 700; }
	.bwp-filters-close { font-size: 26px; line-height: 1; color: var(--muted); }
}

@media (max-width: 980px) {
	/* Stack the gallery over the summary; the summary stops sticking. */
	.woocommerce div.product .bwp-product-top { display: block; }
	.woocommerce div.product .woocommerce-product-gallery,
	.woocommerce div.product div.summary.entry-summary {
		width: 100% !important;
		float: none;
		position: static;
	}
	.woocommerce div.product div.summary.entry-summary { margin-top: 30px; }
	.woocommerce div.product .woocommerce-product-gallery__image {
		height: auto;
		aspect-ratio: 16 / 10;
	}
	.woocommerce div.product .woocommerce-product-gallery__image img { height: 100%; object-fit: cover; object-position: top; }
	.woocommerce div.product .woocommerce-product-gallery:hover .woocommerce-product-gallery__image img { transform: none; }
}

@media (max-width: 820px) {
	.bwp-woocommerce { padding: 40px 0 70px; }
	.woocommerce div.product div.summary { padding-left: 0; }
	.bwp-shop-search { width: 100%; margin-left: 0; }
	.bwp-shop-search input[type=search] { flex: 1; width: auto; min-width: 0; }
	.bwp-detail-list { grid-template-columns: 1fr; }
	.bwp-buy-row { flex-direction: column; }
}