/**
 * JU Fashion — WordPress overrides on top of Shopify-export CSS.
 */

/* Soft corners on primary storefront buttons. */
.btn,
.rte .btn,
.btn--small,
.btn--large,
.btn--full,
.btn--inverse,
.cart__checkout,
.grid-product__see-all.btn,
.collection-marquee__view-all-btn,
.shopify-payment-button .shopify-payment-button__button--unbranded {
	border-radius: 6px;
}

body.ju-fashion .wp-site-blocks,
body.ju-fashion .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}

body.ju-fashion .entry-content,
body.ju-fashion main.main-content {
	margin: 0;
	padding: 0;
}

/* Reserve scrollbar space so opening the drawer does not shift layout. */
html:has(body.ju-fashion) {
	scrollbar-gutter: stable;
}

.chapel-marquee {
	width: 100%;
	background: #111;
	color: #fff;
	border-top: 1px solid rgba(255, 255, 255, 0.06);
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
	position: relative;
	z-index: 20;
}

.chapel-marquee__viewport {
	overflow: hidden;
	white-space: nowrap;
	width: 100%;
}

.chapel-marquee__track {
	display: inline-flex;
	align-items: center;
	width: max-content;
	min-width: max-content;
	animation: chapelMarqueeLoop 70s linear infinite;
	will-change: transform;
	padding: 14px 0;
}

.chapel-marquee__item {
	display: inline-flex;
	align-items: center;
	color: #fff;
	flex: 0 0 auto;
}

.chapel-marquee__text {
	display: inline-block;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 0.8px;
	text-transform: uppercase;
	line-height: 1;
}

.chapel-marquee__dot {
	display: inline-block;
	margin: 0 36px;
	font-size: 18px;
	line-height: 1;
	opacity: 0.75;
}

.chapel-marquee:hover .chapel-marquee__track {
	animation-play-state: paused;
}

@keyframes chapelMarqueeLoop {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

.hero__image.desktop-image { display: block; }
.hero__image.mobile-image { display: none; }

@media only screen and (max-width: 589px) {
	.hero__image.desktop-image { display: none !important; }
	.hero__image.mobile-image { display: block !important; }
}

@media only screen and (min-width: 590px) {
	.hero__image.desktop-image { display: block !important; }
	.hero__image.mobile-image { display: none !important; }
}

body.ju-fashion .index-section--hero {
	width: 100%;
	max-width: none;
}

.hero__image--ju-hero-0 {
	object-position: top center;
}

.drawer-overlay {
	display: none !important;
}

/* Keep drawer in DOM during open/close transitions (theme.css uses display:none on .drawer). */
#NavDrawer.drawer--right.drawer--is-visible,
#NavDrawer.drawer--right.drawer--is-open,
html.js-drawer-closing #NavDrawer.drawer--right.drawer--is-visible,
#CartDrawer.drawer--right.drawer--is-visible,
#CartDrawer.drawer--right.drawer--is-open,
html.js-drawer-closing #CartDrawer.drawer--right.drawer--is-visible {
	display: block !important;
	z-index: 30;
}

.ajaxcart__empty {
	padding: 2rem 0;
	text-align: center;
}

.ajaxcart__empty .btn {
	margin-top: 1rem;
	color: #fff;
}

.ajaxcart__empty .btn:hover,
.ajaxcart__empty .btn:focus,
.ajaxcart__empty .btn:visited {
	color: #fff;
}

#CartContainer.ju-cart-drawer--loading {
	opacity: 0.55;
	pointer-events: none;
	transition: opacity 0.2s ease;
}

/* Full-width cart: list scrolls, footer stays put (match ju-fashion.com). */
#CartDrawer.drawer--right {
	width: 400px;
	max-width: 95vw;
}

#CartDrawer > .drawer__inner {
	/* Absolute inner ignores .drawer padding — set gutters here. */
	padding-left: 20px;
	padding-right: 20px;
}

@media only screen and (min-width: 590px) {
	#CartDrawer > .drawer__inner {
		padding-left: 40px;
		padding-right: 40px;
	}
}

#CartContainer.drawer__cart {
	height: 100%;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	width: 100%;
	box-sizing: border-box;
}

#CartContainer .cart.ajaxcart {
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: 0;
	width: 100%;
}

#CartContainer .drawer__inner--has-fixed-footer {
	position: static;
	top: auto;
	right: auto;
	bottom: auto;
	left: auto;
	flex: 1 1 auto;
	min-height: 0;
	width: 100%;
	box-sizing: border-box;
	padding: 12px 0 0;
	overflow-x: hidden;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

#CartContainer .drawer__footer--fixed {
	position: static;
	top: auto;
	right: auto;
	bottom: auto;
	left: auto;
	flex: 0 0 auto;
	width: 100%;
	box-sizing: border-box;
	min-height: 0;
	padding: 16px 0 24px;
	background-color: #fff;
	border-top: 1px solid #e8e8e1;
	z-index: 2;
}

/* Cart line: image | details spanning remaining width (site gốc). */
#CartDrawer .ajaxcart__row {
	width: 100%;
	box-sizing: border-box;
}

#CartDrawer .ajaxcart__row > .grid {
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-start;
	gap: 14px;
	margin-left: 0;
	width: 100%;
}

#CartDrawer .ajaxcart__row > .grid > .grid__item {
	float: none;
	padding-left: 0;
	min-width: 0;
}

#CartDrawer .ajaxcart__row > .grid > .one-third {
	flex: 0 0 92px;
	width: 92px;
	max-width: 92px;
}

#CartDrawer .ajaxcart__row > .grid > .two-thirds {
	flex: 1 1 auto;
	width: auto;
}

#CartDrawer .ajaxcart__product-image,
#CartDrawer .ajaxcart__product-image img {
	display: block;
	width: 100%;
	height: auto;
}

#CartDrawer .ajaxcart__product-name--wrapper {
	width: 100%;
}

#CartDrawer .ajaxcart__row .grid.grid--full.display-table {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-left: 0;
	width: 100%;
	table-layout: auto;
}

#CartDrawer .ajaxcart__row .grid.grid--full.display-table > .grid__item {
	float: none;
	display: block;
	padding-left: 0;
	width: auto;
}

#CartDrawer .ajaxcart__row .grid.grid--full.display-table > .one-half {
	width: auto;
}

#CartDrawer .ajaxcart__row .grid.grid--full.display-table > .text-right {
	margin-left: auto;
	text-align: right;
}

#CartDrawer .drawer__footer--fixed .grid.grid--full {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-left: 0;
	width: 100%;
}

#CartDrawer .drawer__footer--fixed .grid.grid--full > .grid__item {
	float: none;
	padding-left: 0;
	width: auto;
}

@media only screen and (max-width: 589px) {
	#CartDrawer.drawer--right {
		width: 300px;
	}
}

.js-drawer-open .main-content:after,
.js-drawer-closing .main-content:after {
	display: none;
}

/* Full-viewport overlay (main-content:after misses header area). */
html.js-drawer-open::after,
html.js-drawer-closing::after {
	content: "";
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #17172c;
	opacity: 0;
	z-index: 26;
	pointer-events: auto;
}

html.js-drawer-open::after {
	animation: overlay-on 0.5s forwards;
}

html.js-drawer-closing::after {
	animation: overlay-off 0.4s forwards;
}

@media (min-width: 590px) {
	.site-footer .grid { display: flex; flex-wrap: wrap; gap: 2rem; }
	.footer__item--menu { width: 20%; }
	.footer__item--support { width: 25%; }
	.footer__item--newsletter { width: 40%; }
}

.footer__copyright { text-align: center; margin-top: 2rem; opacity: 0.8; font-size: 12px; }
.collapsible-content--small:not(.is-open) .collapsible-content__inner { display: none; }

@media (min-width: 750px) {
	.collapsible-content--small .collapsible-content__inner { display: block !important; }
	.collapsible-trigger-btn { display: none; }
}

.service-info-section { padding: 60px 0 5px; background: #17172c; color: #fff; }
.service-info-slider { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 2rem; }
.service-info-item__description { color: rgba(255, 255, 255, 0.85); line-height: 1.6; }
.service-info-item__icon { font-size: 2rem; margin-bottom: 0.75rem; }
.service-link { color: #fff; text-decoration: underline; }
.grid-product__see-all-wrapper { padding: 2rem 0 3rem; }
.grid-product__see-all.btn,
.grid-product__see-all.btn:hover,
.grid-product__see-all.btn:focus,
.grid-product__see-all.btn:visited {
	color: #fff;
}

/* Theme CSS keeps product images at opacity:0 until Shopify lazyload/AOS runs. */
html:not(.ju-product-fade-enabled) .grid-product .image-wrap img.grid-product__image,
html:not(.ju-product-fade-enabled) .grid-product .image-wrap img.lazyloaded,
html:not(.ju-product-fade-enabled) .grid-product__image-mask .image-wrap img {
	opacity: 1 !important;
	animation: none !important;
	transform: none !important;
	border-radius: 8px;
}

.grid-product .image-wrap img.grid-product__image,
.grid-product .image-wrap img.lazyloaded,
.grid-product__image-mask .image-wrap img {
	border-radius: 8px;
}

.grid-product .image-wrap,
.grid-product__image-mask {
	overflow: hidden;
	border-radius: 8px;
	/* Letterbox when image uses contain (card size stays fixed). */
	background: #fff;
}

/* Keep card aspect box; show full image without cover-crop. */
.grid-product__image-mask .image-wrap {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100% !important;
	padding-bottom: 0 !important;
	background: #fff;
}

.grid-product__image-mask .image-wrap img,
.grid-product .image-wrap img.grid-product__image,
.grid-product .grid-product__image {
	object-fit: contain !important;
	object-position: center center;
}

/* Sale badge above hover images (child z-index must not escape). */
.grid-product__tag {
	z-index: 5;
}

/* Hover swap — same card box, contain (not cover). */
.grid-product__image-mask .image-wrap--hover {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100% !important;
	padding-bottom: 0 !important;
	z-index: 0;
	background: #fff;
}

.grid-product .image-wrap--hover .grid-product__image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: contain !important;
	object-position: center center;
	border-radius: 8px;
}

.grid-product .image-wrap--hover .grid-product__image--primary {
	opacity: 1;
	visibility: visible;
	z-index: 1;
	transition: opacity 0s ease, visibility 0s;
}

.grid-product .image-wrap--hover .grid-product__image--secondary {
	opacity: 0;
	visibility: hidden;
	z-index: 2;
	/* White fill so different-sized hover image never shows primary underneath. */
	background: #fff;
	transition: opacity 0s ease, visibility 0s;
	pointer-events: none;
}

/* Only swap when hovering the image area, not the whole card. */
.grid-product--has-hover-image .grid-product__image-mask:hover .image-wrap--hover .grid-product__image--primary,
.grid-product--has-hover-image .grid-product__image-mask:focus-within .image-wrap--hover .grid-product__image--primary {
	opacity: 0 !important;
	visibility: hidden !important;
	animation: none !important;
	transition-duration: 0s;
}

.grid-product--has-hover-image .grid-product__image-mask:hover .image-wrap--hover .grid-product__image--secondary,
.grid-product--has-hover-image .grid-product__image-mask:focus-within .image-wrap--hover .grid-product__image--secondary {
	opacity: 1 !important;
	visibility: visible !important;
	transition-duration: 0.1s;
}

@media (hover: none) {
	.grid-product--has-hover-image .grid-product__image-mask:hover .image-wrap--hover .grid-product__image--primary {
		opacity: 1 !important;
		visibility: visible !important;
	}

	.grid-product--has-hover-image .grid-product__image-mask:hover .image-wrap--hover .grid-product__image--secondary {
		opacity: 0 !important;
		visibility: hidden !important;
	}
}

/* Product grids must not wait for missing AOS init (unless homepage fade is on). */
html:not(.ju-product-fade-enabled) .grid[data-aos="overflow__animation"],
html:not(.ju-product-fade-enabled) .grid-product[data-aos="row-of-6"],
html:not(.ju-product-fade-enabled) .grid-product[data-aos="row-of-4"] {
	opacity: 1 !important;
	transform: none !important;
	transition: none !important;
}

/* Chapel-style zoom-fade on homepage product images. */
@keyframes ju-zoom-fade {
	0% {
		opacity: 0;
		transform: scale(1.4);
	}
	100% {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes ju-zoom-fade-out {
	0% {
		opacity: 1;
		transform: scale(1);
	}
	100% {
		opacity: 0;
		transform: scale(1.15);
	}
}

.ju-product-fade-enabled .index-section .grid-product .image-wrap img.grid-product__image--primary,
.ju-product-fade-enabled .collection-marquee .grid-product .image-wrap img.grid-product__image--primary,
.ju-product-fade-enabled .index-section .grid-product .image-wrap:not(.image-wrap--hover) img,
.ju-product-fade-enabled .collection-marquee .grid-product .image-wrap:not(.image-wrap--hover) img {
	opacity: 0;
	transform: scale(1.4);
	animation: none;
	will-change: opacity, transform;
}

.ju-product-fade-enabled .index-section .grid-product.ju-product-visible .image-wrap img.grid-product__image--primary,
.ju-product-fade-enabled .collection-marquee .grid-product.ju-product-visible .image-wrap img.grid-product__image--primary,
.ju-product-fade-enabled .index-section .grid-product.ju-product-visible .image-wrap:not(.image-wrap--hover) img,
.ju-product-fade-enabled .collection-marquee .grid-product.ju-product-visible .image-wrap:not(.image-wrap--hover) img {
	animation: ju-zoom-fade 1.5s cubic-bezier(0.26, 0.54, 0.32, 1) var(--ju-product-delay, 0ms) forwards;
}

/* After intro zoom: lock final state so hover out never restarts animation. */
.ju-product-fade-enabled .index-section .grid-product.ju-product-zoom-done .image-wrap img.grid-product__image--primary,
.ju-product-fade-enabled .collection-marquee .grid-product.ju-product-zoom-done .image-wrap img.grid-product__image--primary,
.ju-product-fade-enabled .index-section .grid-product.ju-product-zoom-done .image-wrap:not(.image-wrap--hover) img,
.ju-product-fade-enabled .collection-marquee .grid-product.ju-product-zoom-done .image-wrap:not(.image-wrap--hover) img {
	opacity: 1 !important;
	transform: none !important;
	animation: none !important;
	will-change: auto;
}

.ju-product-fade-enabled .index-section .grid-product.ju-product-fading-out .image-wrap img.grid-product__image--primary,
.ju-product-fade-enabled .collection-marquee .grid-product.ju-product-fading-out .image-wrap img.grid-product__image--primary,
.ju-product-fade-enabled .index-section .grid-product.ju-product-fading-out .image-wrap:not(.image-wrap--hover) img,
.ju-product-fade-enabled .collection-marquee .grid-product.ju-product-fading-out .image-wrap:not(.image-wrap--hover) img {
	animation: ju-zoom-fade-out 0.7s cubic-bezier(0.26, 0.54, 0.32, 1) forwards;
}

/* Keep secondary hidden during zoom-fade; hover CSS controls it. */
.ju-product-fade-enabled .grid-product .image-wrap--hover .grid-product__image--secondary {
	opacity: 0;
	visibility: hidden;
	transform: none;
	animation: none !important;
}

.ju-product-fade-enabled .grid-product--has-hover-image .grid-product__image-mask:hover .image-wrap--hover .grid-product__image--primary,
.ju-product-fade-enabled .grid-product--has-hover-image .grid-product__image-mask:focus-within .image-wrap--hover .grid-product__image--primary {
	opacity: 0 !important;
	visibility: hidden !important;
	animation: none !important;
}

.ju-product-fade-enabled .grid-product--has-hover-image .grid-product__image-mask:hover .image-wrap--hover .grid-product__image--secondary,
.ju-product-fade-enabled .grid-product--has-hover-image .grid-product__image-mask:focus-within .image-wrap--hover .grid-product__image--secondary {
	opacity: 1 !important;
	visibility: visible !important;
}

@media (prefers-reduced-motion: reduce) {
	.ju-product-fade-enabled .index-section .grid-product .image-wrap img.grid-product__image--primary,
	.ju-product-fade-enabled .collection-marquee .grid-product .image-wrap img.grid-product__image--primary,
	.ju-product-fade-enabled .index-section .grid-product .image-wrap:not(.image-wrap--hover) img,
	.ju-product-fade-enabled .collection-marquee .grid-product .image-wrap:not(.image-wrap--hover) img {
		opacity: 1;
		transform: none;
		animation: none;
	}
}

.hidden-label,
.visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
}

@media (max-width: 768px) {
	.chapel-marquee__text { font-size: 10px; font-weight: 400; letter-spacing: 1.2px; }
}

.collection-marquee {
	overflow: hidden;
	width: 100%;
	mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
}

.collection-marquee-section .collection-marquee__track {
	display: flex;
	align-items: stretch;
	width: max-content;
	min-width: max-content;
	gap: 15px;
	animation: marqueeScroll var(--marquee-speed, 40s) linear infinite;
	will-change: transform;
}

.collection-marquee:hover .collection-marquee__track {
	animation-play-state: paused;
}

.collection-marquee__item {
	flex: 0 0 auto;
}

.collection-marquee__link {
	display: block;
}

.collection-marquee__item img {
	width: 180px;
	height: 240px;
	object-fit: cover;
	border-radius: 20px;
	display: block;
}

@keyframes marqueeScroll {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

.collection-marquee__footer { padding: 1.5rem 0 2rem; }

/* Product archive / collection — hide leftover WC chrome. */
#CollectionSection .woocommerce-result-count,
#CollectionSection .woocommerce-ordering,
#CollectionSection .woocommerce-notices-wrapper:empty {
	display: none !important;
}

#CollectionSection .pagination {
	margin: 2.5rem 0 1rem;
	text-align: center;
}

@media (max-width: 768px) {
	.collection-marquee__item img {
		width: 140px;
		height: 186px;
		border-radius: 14px;
	}

	.collection-marquee-section .collection-marquee__track {
		gap: 10px;
		animation-duration: var(--marquee-speed-mobile, 28s);
	}
}

/* Floating Messenger + phone (bottom-right). */
.ju-floating-contact {
	position: fixed;
	right: 18px;
	bottom: 22px;
	z-index: 40;
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: center;
	pointer-events: none;
}

.ju-floating-contact__btn {
	pointer-events: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	color: #fff;
	text-decoration: none;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ju-floating-contact__btn:hover,
.ju-floating-contact__btn:focus {
	transform: scale(1.08);
	box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
	color: #fff;
	outline: none;
}

.ju-floating-contact__btn--facebook {
	background: #1877f2;
}

.ju-floating-contact__btn--zalo {
	background: #0068ff;
	overflow: hidden;
	padding: 0;
}

.ju-floating-contact__btn--zalo svg {
	width: 100%;
	height: 100%;
	display: block;
}

.ju-floating-contact__btn--messenger {
	background: #0084ff;
}

.ju-floating-contact__btn--phone {
	background: #1aad19;
}

@media (max-width: 589px) {
	.ju-floating-contact {
		right: 12px;
		bottom: 16px;
		gap: 10px;
	}

	.ju-floating-contact__btn {
		width: 46px;
		height: 46px;
	}

	.ju-floating-contact__btn svg {
		width: 22px;
		height: 22px;
	}

	.ju-floating-contact__btn--zalo svg {
		width: 100%;
		height: 100%;
	}
}