/**
 * 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. */
.grid-product .image-wrap img.grid-product__image,
.grid-product .image-wrap img.lazyloaded,
.grid-product__image-mask .image-wrap img {
	opacity: 1 !important;
	animation: none !important;
	transform: none !important;
	border-radius: 8px;
}

.grid-product .image-wrap,
.grid-product__image-mask {
	overflow: hidden;
	border-radius: 8px;
	background: transparent;
}

/* Product grids must not wait for missing AOS init. */
.grid[data-aos="overflow__animation"],
.grid-product[data-aos="row-of-6"] {
	opacity: 1 !important;
	transform: none !important;
	transition: none !important;
}

.ju-product-fade-enabled .grid-product {
	opacity: 0;
	transform: translateY(24px);
	transition:
		opacity 700ms ease-out var(--ju-product-delay, 0ms),
		transform 700ms ease-out var(--ju-product-delay, 0ms);
}

.ju-product-fade-enabled .grid-product.ju-product-visible {
	opacity: 1;
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	.ju-product-fade-enabled .grid-product {
		opacity: 1;
		transform: none;
		transition: 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);
	}
}