/* =========================================================
   FUN JOY FIGURES — WOOCOMMERCE STYLESHEET
   ========================================================= */

/* ---------- 1. Shop Layout ---------- */
.fjf-shop-main { padding: 40px 0 64px; }
.fjf-shop-banner {
	background: linear-gradient(120deg, var(--fjf-blue), var(--fjf-teal));
	padding: 48px 0;
	margin-bottom: 32px;
}
.fjf-shop-banner-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.fjf-shop-banner h1 { color: #fff; margin-bottom: 0.2em; }
.fjf-shop-banner p { color: rgba(255,255,255,0.85); margin: 0; }
.fjf-shop-banner-image { max-height: 140px; width: auto; }

.fjf-shop-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	padding: 0 0 24px;
	border-bottom: 1px solid var(--fjf-border);
	margin-bottom: 36px;
}
.fjf-result-count { color: var(--fjf-text-muted); font-size: 0.9rem; margin: 0; order: 2; flex: 1; text-align: left; }
.fjf-shop-sort select {
	border: 2px solid var(--fjf-border);
	border-radius: 999px;
	padding: 10px 18px;
	font-weight: 700;
	font-size: 0.9rem;
	color: var(--fjf-navy);
	background: #fff;
}
.fjf-filter-toggle { order: 0; }

@media (max-width: 700px) {
	.fjf-shop-toolbar { justify-content: space-between; }
	.fjf-result-count { order: 3; flex-basis: 100%; text-align: left; }
}

/* Filter drawer */
.fjf-filter-drawer {
	position: fixed;
	top: 0; right: 0;
	width: min(400px, 92vw);
	height: 100%;
	background: #fff;
	z-index: 1200;
	transform: translateX(100%);
	transition: transform 0.25s ease;
	display: flex;
	flex-direction: column;
}
.fjf-filter-drawer.is-open { transform: translateX(0); }
.fjf-filter-drawer-header { display: flex; align-items: center; justify-content: space-between; padding: 20px; border-bottom: 1px solid var(--fjf-border); }
.fjf-filter-drawer-body { flex: 1; overflow-y: auto; padding: 20px; }
.fjf-filter-drawer-footer { padding: 20px; border-top: 1px solid var(--fjf-border); }
.fjf-filter-drawer-footer .fjf-btn { width: 100%; }
.fjf-filter-group { margin-bottom: 1.5em; }
.fjf-filter-group h3 { font-size: 0.95rem; margin-bottom: 0.8em; }
.fjf-filter-list li { margin-bottom: 0.6em; }
.fjf-filter-list a { color: var(--fjf-text-muted); font-size: 0.92rem; }
.fjf-filter-list a:hover { color: var(--fjf-blue); }

.fjf-filter-drawer-overlay {
	position: fixed; inset: 0; background: rgba(6,42,98,0.5);
	z-index: 1150; opacity: 0; transition: opacity 0.25s ease;
}
.fjf-filter-drawer-overlay.is-open { opacity: 1; }

/* ---------- 2. Product Grid ---------- */
/* Higher-specificity, !important on margin only: WooCommerce core's own
   stylesheet applies negative margins to ul.products for its native grid
   system, which can fight our container padding and pull the first card
   flush against the site edge. This wins over that unconditionally. */
.woocommerce ul.products.fjf-product-grid,
.fjf-product-grid {
	display: grid;
	gap: 32px 24px;
	list-style: none;
	margin: 0 !important;
	padding: 0;
	width: 100%;
}
.fjf-product-grid-4 { grid-template-columns: repeat(4, minmax(0, 240px)); justify-content: center; }
.fjf-product-grid-3 { grid-template-columns: repeat(3, minmax(0, 260px)); justify-content: center; }
.fjf-product-grid-5 { grid-template-columns: repeat(5, minmax(0, 220px)); justify-content: center; }

@media (max-width: 1024px) {
	.fjf-product-grid-4, .fjf-product-grid-5 { grid-template-columns: repeat(3, minmax(0, 240px)); }
}
@media (max-width: 700px) {
	.fjf-product-grid-3, .fjf-product-grid-4, .fjf-product-grid-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.fjf-product-grid { gap: 16px; }
}
@media (max-width: 420px) {
	.fjf-product-grid-3, .fjf-product-grid-4, .fjf-product-grid-5 { grid-template-columns: minmax(0, 320px); }
}

/* Belt-and-suspenders reset against WooCommerce core's own ul.products
   list/grid rules, which can otherwise reintroduce edge-to-edge spacing. */
.woocommerce ul.products {
	margin: 0 !important;
	padding: 0 !important;
}

/* ---------- 3. Product Card ---------- */
ul.products li.product {
	background: #fff;
	border: 1px solid var(--fjf-border);
	border-radius: var(--fjf-radius);
	overflow: visible;
	box-shadow: none;
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
	position: relative;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
}
ul.products li.product:hover { transform: translateY(-3px); box-shadow: var(--fjf-shadow-sm); border-color: transparent; }

.fjf-product-media { position: relative; border-radius: var(--fjf-radius) var(--fjf-radius) 0 0; overflow: hidden; aspect-ratio: 1/1; background: var(--fjf-bg); }
.fjf-product-media-link { display: block; width: 100%; height: 100%; position: relative; }
.fjf-product-image-main, .fjf-product-image-alt {
	position: absolute; inset: 0; width: 100%; height: 100%;
	object-fit: cover; transition: opacity 0.3s ease, transform 0.3s ease;
}
.fjf-product-image-alt { opacity: 0; }
@media (hover: hover) {
	ul.products li.product:hover .fjf-product-image-main { transform: scale(1.05); opacity: 0; }
	ul.products li.product:hover .fjf-product-image-alt { opacity: 1; transform: scale(1.05); }
}

.fjf-product-badges { position: absolute; top: 12px; left: 12px; display: flex; flex-direction: column; gap: 6px; z-index: 2; }
.fjf-badge {
	display: inline-block;
	font-family: var(--fjf-font-heading);
	font-weight: 700;
	font-size: 0.68rem;
	letter-spacing: 0.03em;
	padding: 5px 10px;
	border-radius: 999px;
	color: #fff;
}
.fjf-badge-new { background: var(--fjf-blue); }
.fjf-badge-bestseller { background: var(--fjf-navy); }
.fjf-badge-limited { background: var(--fjf-red); }
.fjf-badge-sale { background: var(--fjf-green); color: var(--fjf-navy); }
.fjf-badge-madetoorder { background: var(--fjf-yellow); color: var(--fjf-navy); }
.fjf-badge-default { background: var(--fjf-teal); }

.fjf-wishlist-btn {
	position: absolute; top: 12px; right: 12px; z-index: 2;
	width: 34px; height: 34px;
	background: rgba(255,255,255,0.95);
	border: none; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	color: var(--fjf-navy);
	opacity: 0;
	transition: color 0.15s ease, transform 0.15s ease, opacity 0.15s ease;
}
.fjf-wishlist-btn:hover { color: var(--fjf-red); transform: scale(1.08); }
.fjf-wishlist-btn.is-active { color: var(--fjf-red); opacity: 1; }
.fjf-wishlist-btn.is-active svg path { fill: currentColor; }
@media (hover: hover) {
	ul.products li.product:hover .fjf-wishlist-btn { opacity: 1; }
}
@media (hover: none) {
	.fjf-wishlist-btn { opacity: 1; }
}

.fjf-quickview-btn {
	position: absolute;
	bottom: 12px; left: 50%;
	transform: translateX(-50%) translateY(8px);
	background: #fff;
	color: var(--fjf-navy);
	border: none;
	border-radius: 999px;
	padding: 8px 18px;
	font-family: var(--fjf-font-heading);
	font-weight: 700;
	font-size: 0.78rem;
	box-shadow: var(--fjf-shadow-sm);
	opacity: 0;
	transition: opacity 0.2s ease, transform 0.2s ease;
	z-index: 2;
}
@media (hover: hover) {
	ul.products li.product:hover .fjf-quickview-btn { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.fjf-product-info { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 4px; }
.fjf-product-title {
	font-size: 0.95rem;
	font-weight: 700;
	margin-bottom: 0;
	line-height: 1.35;
	/* Clamp to 2 lines so long figure names never push card heights out of alignment across a row. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.fjf-product-title a:hover { color: var(--fjf-blue); }
.fjf-product-rating { display: flex; align-items: center; gap: 6px; margin: 2px 0 0; }
.fjf-product-rating .fjf-stars { color: var(--fjf-yellow); display: inline-flex; gap: 1px; }
.fjf-product-rating .fjf-stars svg { width: 13px; height: 13px; }
.fjf-rating-count { font-size: 0.75rem; color: var(--fjf-text-muted); }

.fjf-product-price { font-family: var(--fjf-font-heading); font-weight: 700; color: var(--fjf-navy); margin: 4px 0 10px; font-size: 1rem; }
.fjf-product-price ins { text-decoration: none; color: var(--fjf-red); }
.fjf-product-price del { color: var(--fjf-text-muted); opacity: 0.6; margin-right: 6px; font-weight: 400; font-size: 0.85em; }

.fjf-quick-add, .fjf-product-info .fjf-btn { width: 100%; margin-top: auto; }

/* Quick View Modal */
.fjf-quickview-modal {
	position: fixed; inset: 0; z-index: 1300;
	display: flex; align-items: center; justify-content: center;
	padding: 24px;
	opacity: 0; pointer-events: none;
	transition: opacity 0.2s ease;
}
.fjf-quickview-modal.is-open { opacity: 1; pointer-events: auto; }
.fjf-quickview-modal-overlay { position: absolute; inset: 0; background: rgba(6,42,98,0.6); }
.fjf-quickview-modal-content {
	position: relative;
	background: #fff;
	border-radius: var(--fjf-radius-lg);
	max-width: 760px; width: 100%;
	max-height: 88vh; overflow-y: auto;
	padding: 32px;
}
.fjf-quickview-close {
	position: absolute; top: 16px; right: 16px;
	background: var(--fjf-bg); border: none; border-radius: 50%;
	width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
}
.fjf-quickview-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.fjf-quickview-image img { border-radius: var(--fjf-radius); }
.fjf-quickview-details h2 { margin-bottom: 0.3em; }
.fjf-quickview-details .fjf-price { font-family: var(--fjf-font-heading); font-weight: 700; font-size: 1.2rem; color: var(--fjf-navy); margin-bottom: 1em; }
@media (max-width: 600px) {
	.fjf-quickview-inner { grid-template-columns: 1fr; }
}

/* ---------- 4. Single Product ---------- */
.fjf-single-product-main { padding: 32px 0 72px; }
.woocommerce div.product {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	margin-bottom: 56px;
}
.woocommerce div.product .summary { grid-column: 2; grid-row: 1; }
.woocommerce div.product div.images { grid-column: 1; grid-row: 1 / span 2; }

.fjf-product-gallery { position: sticky; top: calc(var(--fjf-header-height) + 20px); }
.fjf-gallery-main { margin: 0; border-radius: var(--fjf-radius-lg); overflow: hidden; background: var(--fjf-bg); aspect-ratio: 1/1; }
.fjf-gallery-main img {
	width: 100% !important;
	height: 100% !important;
	max-width: 100% !important;
	object-fit: cover;
	display: block;
}
.fjf-gallery-main .woocommerce-product-gallery__image:not(:first-child) { display: none; }
.fjf-gallery-main.is-showing-index img { display: none; }
.fjf-gallery-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }

.fjf-gallery-thumbs { display: flex; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.fjf-gallery-thumb {
	width: 72px; height: 72px; border-radius: var(--fjf-radius-sm);
	overflow: hidden; border: 2px solid transparent; background: var(--fjf-bg);
	padding: 0; transition: border-color 0.15s ease;
}
.fjf-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; }
.fjf-gallery-thumb.is-active { border-color: var(--fjf-blue); }
.fjf-gallery-fullscreen {
	display: inline-flex; margin-top: 14px; background: none; border: none;
	color: var(--fjf-blue); font-weight: 700; font-size: 0.85rem; padding: 0;
}

.fjf-single-badges { margin-bottom: 12px; }
.woocommerce div.product .summary .product_title { font-size: clamp(1.5rem, 3vw, 2.1rem); margin-bottom: 0.3em; }
.woocommerce div.product .summary .woocommerce-product-rating { display: flex; align-items: center; gap: 8px; margin-bottom: 1em; }
.woocommerce div.product .summary p.price {
	font-family: var(--fjf-font-heading); font-weight: 700;
	font-size: 1.6rem; color: var(--fjf-navy); margin-bottom: 1em;
}
.woocommerce div.product .summary p.price ins { text-decoration: none; color: var(--fjf-red); }
.woocommerce div.product .summary p.price del { opacity: 0.5; font-size: 0.75em; }
.woocommerce-product-details__short-description { margin-bottom: 1.5em; color: var(--fjf-text-muted); }

.fjf-info-icons { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 1.75em; }
.fjf-info-icons li { display: flex; align-items: center; gap: 10px; font-size: 0.88rem; color: var(--fjf-navy); font-weight: 600; }
.fjf-info-icons svg { color: var(--fjf-blue); flex-shrink: 0; }

.woocommerce div.product form.cart {
	display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 1.5em;
}
.woocommerce div.product form.cart .quantity { margin: 0; }
.woocommerce div.product form.cart .quantity input.qty {
	width: 72px; height: 52px; text-align: center;
	border: 2px solid var(--fjf-border); border-radius: var(--fjf-radius-sm); font-size: 1rem;
}
.woocommerce div.product form.cart button.single_add_to_cart_button {
	font-family: var(--fjf-font-heading); font-weight: 700; font-size: 1rem;
	background: var(--fjf-blue); color: #fff; border: none;
	border-radius: 999px; padding: 1em 2em; box-shadow: var(--fjf-shadow-sm);
}
.woocommerce div.product form.cart button.single_add_to_cart_button:hover { background: #1279d6; }
.fjf-buy-now {
	font-family: var(--fjf-font-heading); font-weight: 700; font-size: 1rem;
	background: transparent; color: var(--fjf-navy); border: 2px solid var(--fjf-navy);
	border-radius: 999px; padding: calc(1em - 2px) calc(2em - 2px);
}
.fjf-buy-now:hover { background: var(--fjf-navy); color: #fff; }

.fjf-processing-notice {
	background: var(--fjf-bg); border-radius: var(--fjf-radius-sm);
	padding: 16px 20px; margin-bottom: 1.5em;
}
.fjf-processing-notice strong { display: block; color: var(--fjf-navy); font-size: 0.82rem; letter-spacing: 0.04em; margin-bottom: 0.3em; }
.fjf-processing-notice p { margin: 0; font-size: 0.9rem; }

.fjf-related-products { margin-top: 64px; }

@media (max-width: 900px) {
	.woocommerce div.product { grid-template-columns: 1fr; gap: 24px; }
	.woocommerce div.product .summary, .woocommerce div.product div.images { grid-column: 1; }
	.fjf-product-gallery { position: static; }
	.fjf-info-icons { grid-template-columns: 1fr; }
}

/* Sticky mobile add-to-cart */
.fjf-sticky-atc {
	position: fixed; bottom: 0; left: 0; right: 0;
	background: #fff; border-top: 1px solid var(--fjf-border);
	padding: 12px 16px; display: none;
	align-items: center; justify-content: space-between; gap: 12px;
	z-index: 900; box-shadow: 0 -4px 16px rgba(6,42,98,0.08);
}
.fjf-sticky-atc-price { font-family: var(--fjf-font-heading); font-weight: 700; color: var(--fjf-navy); }
@media (max-width: 782px) {
	body.fjf-single-product .fjf-sticky-atc.is-visible { display: flex; }
	body.fjf-single-product { padding-bottom: 76px; }
}

/* ---------- 5. Cart ---------- */
.woocommerce-cart table.cart, .woocommerce-cart .cart_totals {
	border-radius: var(--fjf-radius); overflow: hidden;
}
.woocommerce table.cart img { border-radius: var(--fjf-radius-sm); }
.woocommerce-cart .cart_totals { background: var(--fjf-bg); padding: 24px; border-radius: var(--fjf-radius); }
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button {
	font-family: var(--fjf-font-heading); font-weight: 700;
	background: var(--fjf-blue); color: #fff !important;
	border-radius: 999px; padding: 0.9em 1.75em; border: none;
}
.woocommerce a.button:hover, .woocommerce button.button:hover { background: #1279d6; }
.woocommerce #content table.cart td.actions .coupon .input-text {
	border: 2px solid var(--fjf-border); border-radius: var(--fjf-radius-sm); padding: 10px 14px;
}

/* Mini cart panel */
.fjf-mini-cart-panel {
	position: fixed; top: 0; right: 0; width: min(400px, 92vw); height: 100%;
	background: #fff; z-index: 1200; transform: translateX(100%);
	transition: transform 0.25s ease; display: flex; flex-direction: column;
}
.fjf-mini-cart-panel.is-open { transform: translateX(0); }
.fjf-mini-cart-header { display: flex; align-items: center; justify-content: space-between; padding: 20px; border-bottom: 1px solid var(--fjf-border); }
.fjf-mini-cart-body { flex: 1; overflow-y: auto; padding: 0 20px; }
.fjf-mini-cart-items { display: flex; flex-direction: column; gap: 16px; padding: 16px 0; }
.fjf-mini-cart-item { display: flex; gap: 12px; align-items: center; position: relative; }
.fjf-mini-cart-thumb { width: 64px; height: 64px; border-radius: var(--fjf-radius-sm); overflow: hidden; flex-shrink: 0; }
.fjf-mini-cart-thumb img { width: 100%; height: 100%; object-fit: cover; }
.fjf-mini-cart-details { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.fjf-mini-cart-name { font-weight: 700; font-size: 0.9rem; color: var(--fjf-navy); }
.fjf-mini-cart-qty { font-size: 0.8rem; color: var(--fjf-text-muted); }
.fjf-mini-cart-price { font-weight: 700; font-size: 0.85rem; }
.fjf-mini-cart-remove { color: var(--fjf-text-muted); font-size: 1.2rem; padding: 4px; }
.fjf-mini-cart-subtotal { display: flex; justify-content: space-between; padding: 16px 20px; border-top: 1px solid var(--fjf-border); }
.fjf-mini-cart-actions { display: flex; gap: 12px; padding: 20px; }
.fjf-mini-cart-actions .fjf-btn { flex: 1; }
.fjf-mini-cart-empty { text-align: center; padding: 2em 0; }

.fjf-mini-cart-overlay { position: fixed; inset: 0; background: rgba(6,42,98,0.5); z-index: 1150; opacity: 0; transition: opacity 0.25s ease; }
.fjf-mini-cart-overlay.is-open { opacity: 1; }

/* ---------- 6. Checkout ---------- */
.fjf-checkout-trust { display: flex; gap: 20px; flex-wrap: wrap; margin-bottom: 2em; }
.fjf-trust-badge {
	background: var(--fjf-bg); color: var(--fjf-navy);
	padding: 10px 16px; border-radius: 999px; font-size: 0.85rem; font-weight: 600;
}
.woocommerce-checkout #payment { background: var(--fjf-bg); border-radius: var(--fjf-radius); }
.woocommerce-checkout .form-row input.input-text, .woocommerce-checkout select {
	border: 2px solid var(--fjf-border); border-radius: var(--fjf-radius-sm); padding: 10px 14px;
}

/* ---------- 7. My Account ---------- */
.woocommerce-account .woocommerce-MyAccount-navigation ul { display: flex; flex-direction: column; gap: 4px; }
.woocommerce-account .woocommerce-MyAccount-navigation a {
	display: block; padding: 12px 16px; border-radius: var(--fjf-radius-sm); font-weight: 600;
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { background: var(--fjf-blue); color: #fff; }

/* ---------- 8. Sale flash removal (custom badge used instead) ---------- */
.onsale { display: none; }