/*
Theme Name: xizhou
Theme URI: https://github.com/awwwards-wp-studio/xizhou
Author: Sanctuary Living Studio
Description: Mindful editorial living, boutique organic hospitality, and slow-crafted spatial architecture.
Version: 1.0.0
Text Domain: xizhou
Tested up to: 6.7
Requires at least: 6.2
Requires PHP: 7.4
*/

:root {
--color-p: #e29a28;
--color-p-hover: #ffb12e;
--color-p-subtle: rgba(226, 154, 40, 0.12);
--color-p-glow: rgba(226, 154, 40, 0.28);
--color-s: #23211D;
--color-bg: #171616;
--color-txt: #ede8df;
--color-txt-muted: rgba(245, 245, 247, 0.65);
--border-subtle: rgba(255, 255, 255, 0.08);
--border-card: rgba(255, 255, 255, 0.12);
--surface-glass: rgba(255, 255, 255, 0.025);
--surface-card: rgba(255, 255, 255, 0.035);

--font-h: 'Playfair Display', serif;
--font-b: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
--site-max-w: 1360px;
--header-height: 76px;
--header-padding-y: 18px;
--header-border-color: rgba(255, 255, 255, 0.08);
--header-shadow: 0 10px 30px rgba(0,0,0,0.6);
--color-link: #937710;
--color-link-hover: #ffffff;
--color-header-link: #ede8df;
--color-header-link-hover: #ceb792;
}

*, *::before, *::after { box-sizing: border-box; }

html, body, .wp-site-blocks, .awwwards-main, .awwwards-canvas-page, article.hentry, .entry-content {
background-color: transparent !important;
color: var(--color-txt) !important;
font-family: var(--font-b) !important;
font-size: 15px !important;
line-height: 1.65 !important;
margin: 0 !important;
padding: 0 !important;
overflow-x: clip !important;
-webkit-font-smoothing: antialiased !important;
}

body:not(.wp-admin) {
background-color: var(--color-bg) !important;
position: relative !important;
min-height: 100vh !important;
}

/* 反 Gutenberg 默认间距重置 */
.entry-content :where(.is-layout-flow, .is-layout-constrained) > *,
.awwwards-main :where(.is-layout-flow, .is-layout-constrained) > *,
.wp-site-blocks :where(.is-layout-flow, .is-layout-constrained) > * {
margin-block-start: 0 !important;
margin-block-end: 0 !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
}

h1:where(.wp-block-heading), h2:where(.wp-block-heading), h3:where(.wp-block-heading),
h4:where(.wp-block-heading), h5:where(.wp-block-heading), h6:where(.wp-block-heading),
.wp-block-heading {
padding: 0 !important;
margin: 0 !important;
font-family: var(--font-h) !important;
}

figure.wp-block-image { margin: 0 !important; }

.alignfull,
.awwwards-main > .alignfull,
.entry-content > .alignfull,
.awwwards-section.alignfull,
.marquee-track.alignfull {
width: 100vw !important;
max-width: 100vw !important;
margin-left: calc(-50vw + 50%) !important;
margin-right: calc(-50vw + 50%) !important;
padding-left: 0 !important;
padding-right: 0 !important;
}

.section-container {
width: 100% !important;
max-width: var(--site-max-w) !important;
margin: 0 auto !important;
padding: 0 clamp(1rem, 4vw, 3.5rem) !important;
box-sizing: border-box !important;
}

.text-left { text-align: left !important; }
.text-center { text-align: center !important; }
.text-right { text-align: right !important; }

a { color: var(--color-link); text-decoration: none; transition: color 0.2s ease; }
a:hover, a:active { color: var(--color-link-hover); }

/* 导航栏排版与色彩系统 */
.awwwards-site-header {
position: sticky !important; top: 0 !important; left: 0 !important; width: 100% !important; z-index: 9999 !important;
backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important;
background: rgba(11, 11, 13, 0.88) !important; border-bottom: 1px solid var(--border-subtle) !important;
padding: 1rem 5vw !important; box-sizing: border-box !important; transition: all 0.3s ease !important;
}
.awwwards-site-header.is-shrunk { padding: 0.65rem 5vw !important; background: rgba(11, 11, 13, 0.96) !important; box-shadow: var(--header-shadow) !important; }
body.admin-bar .awwwards-site-header { top: 32px !important; }

.wp-site-brand, .wp-site-brand a {
font-size: 1.15rem !important; font-weight: 900 !important; font-family: var(--font-h) !important;
letter-spacing: 0.12em !important; text-transform: uppercase !important; color: var(--color-p) !important;
text-decoration: none !important; white-space: nowrap !important;
}

.wp-primary-menu ul {
display: flex !important; flex-direction: row !important; align-items: center !important;
gap: 1.5rem !important; list-style: none !important; margin: 0 !important; padding: 0 !important;
flex-wrap: nowrap !important;
}
.wp-primary-menu li { display: inline-flex !important; margin: 0 !important; padding: 0 !important; list-style: none !important; }
.wp-primary-menu a {
font-family: monospace !important; font-size: 0.78rem !important; font-weight: 700 !important;
letter-spacing: 0.08em !important; text-transform: uppercase !important;
color: var(--color-header-link) !important; opacity: 0.9 !important;
text-decoration: none !important; white-space: nowrap !important; transition: all 0.2s ease !important;
}
.wp-primary-menu a:hover, .wp-primary-menu a:active {
color: var(--color-header-link-hover) !important; opacity: 1 !important;
}

.header-action-btn {
background: transparent !important; border: none !important; color: var(--color-header-link) !important;
cursor: pointer !important; font-size: 1.1rem !important; padding: 4px !important;
display: inline-flex !important; align-items: center !important; position: relative !important;
opacity: 0.85 !important; transition: opacity 0.2s ease !important;
}
.header-action-btn:hover { opacity: 1 !important; color: var(--color-header-link-hover) !important; }
.header-action-btn img.emoji { width: 1.15rem !important; height: 1.15rem !important; vertical-align: middle !important; }

.awwwards-cart-badge {
position: absolute !important; top: -6px !important; right: -8px !important;
background: var(--color-p) !important; color: #fff !important; font-size: 0.62rem !important;
font-weight: 900 !important; font-family: monospace !important; border-radius: 999px !important;
padding: 1px 6px !important; line-height: 1.2 !important;
}

.wp-header-cta {
padding: 0.5rem 1.25rem !important; border-radius: 999px !important;
background-color: var(--color-p) !important; color: #ffffff !important;
font-weight: 700 !important; font-size: 0.72rem !important; letter-spacing: 0.06em !important;
text-transform: uppercase !important; text-decoration: none !important; white-space: nowrap !important;
display: inline-flex !important; align-items: center !important;
box-shadow: 0 4px 15px var(--color-p-glow) !important; transition: all 0.25s ease !important;
}
.wp-header-cta:hover { background-color: var(--color-p-hover) !important; transform: translateY(-1px) !important; }

.wp-mobile-toggle { display: none; background: transparent; border: none; cursor: pointer; flex-direction: column; gap: 5px; }
@media (max-width: 860px) {
.wp-primary-menu { display: none !important; }
.wp-mobile-toggle { display: flex !important; }
}

/* 按钮强制主色与大厂动效 */
.wp-block-button.btn-primary .wp-block-button__link,
.wp-block-button.btn-primary a,
:root :where(.wp-block-button.btn-primary .wp-block-button__link),
:root .btn-primary a, .btn-primary .wp-element-button {
background-color: var(--color-p) !important; background: var(--color-p) !important;
color: #ffffff !important; border: 1px solid var(--color-p) !important; border-radius: 6px !important;
padding: 0.85rem 2rem !important; font-weight: 700 !important; text-transform: uppercase !important;
font-size: 0.78rem !important; letter-spacing: 0.05em !important; box-shadow: 0 8px 20px var(--color-p-glow) !important;
display: inline-flex !important; align-items: center !important; justify-content: center !important; text-decoration: none !important;
transition: all 0.25s ease !important;
}
.wp-block-button.btn-primary .wp-block-button__link:hover,
.btn-primary .wp-element-button:hover {
background-color: var(--color-p-hover) !important; transform: translateY(-2px) !important;
}

.wp-block-button.btn-outline .wp-block-button__link,
.wp-block-button.btn-outline a,
:root :where(.wp-block-button.btn-outline .wp-block-button__link),
:root .btn-outline a, .btn-outline .wp-element-button {
background-color: transparent !important; background: transparent !important; color: #ffffff !important;
border: 1px solid var(--color-p) !important; border-radius: 6px !important; padding: 0.85rem 2rem !important;
font-weight: 700 !important; text-transform: uppercase !important; font-size: 0.78rem !important; letter-spacing: 0.05em !important;
display: inline-flex !important; align-items: center !important; justify-content: center !important; text-decoration: none !important;
transition: all 0.25s ease !important;
}
.wp-block-button.btn-outline .wp-block-button__link:hover,
.btn-outline .wp-element-button:hover {
background-color: var(--color-p-subtle) !important; transform: translateY(-2px) !important;
}

.badge-pill, p.badge-pill {
display: inline-block !important; padding: 4px 14px !important; border: 1px solid var(--border-card) !important;
border-radius: 999px !important; font-family: monospace !important; font-size: 0.72rem !important;
letter-spacing: 0.12em !important; text-transform: uppercase !important; background: var(--surface-glass) !important;
color: var(--color-txt) !important; margin: 0 0 1.25rem 0 !important; width: fit-content !important;
}

.hero-title, h1.hero-title {
font-size: clamp(2.4rem, 5.2vw, 4.4rem) !important; line-height: 1.02 !important; font-weight: 800 !important;
letter-spacing: -0.02em !important; text-transform: uppercase !important; color: var(--color-txt) !important;
margin: 0 0 1.25rem 0 !important;
}
.hero-desc {
font-size: clamp(0.95rem, 1.25vw, 1.1rem) !important; max-width: 620px !important; line-height: 1.65 !important;
color: var(--color-txt-muted) !important; margin: 0 0 1.8rem 0 !important;
}

#webgl-bg {
position: fixed !important; top: 0 !important; left: 0 !important; width: 100vw !important; height: 100vh !important;
pointer-events: none !important; z-index: 0 !important; opacity: 0.45 !important; mix-blend-mode: screen !important;
}
.awwwards-main { position: relative !important; z-index: 1 !important; }

.custom-cursor {
position: fixed !important; top: 0 !important; left: 0 !important; width: 20px !important; height: 20px !important;
margin-left: -10px !important; margin-top: -10px !important; border-radius: 50% !important; pointer-events: none !important;
z-index: 99999 !important; mix-blend-mode: difference !important; background-color: var(--color-p) !important;
}

/* 19 类区块排版规范 */
.awwwards-section { padding: clamp(3.5rem, 7vw, 6rem) 0 !important; position: relative !important; background: transparent !important; }
.section-hero { position: relative !important; padding: clamp(4.5rem, 9vw, 7.5rem) 0 !important; background: linear-gradient(180deg, rgba(11,11,13,0.72) 0%, rgba(11,11,13,0.96) 100%), var(--hero-custom-bg, var(--hero-bg, transparent)) center/cover no-repeat !important; }

.surface-glass { background: rgba(255, 255, 255, 0.025) !important; backdrop-filter: blur(16px) !important; border-top: 1px solid var(--border-subtle) !important; border-bottom: 1px solid var(--border-subtle) !important; }
.surface-border { border-top: 1px solid var(--border-subtle) !important; border-bottom: 1px solid var(--border-subtle) !important; background: rgba(24, 24, 27, 0.25) !important; }
.surface-gradient { background: radial-gradient(circle at 50% 0%, rgba(255,255,255,0.06) 0%, transparent 70%) !important; border-top: 1px solid var(--border-subtle) !important; border-bottom: 1px solid var(--border-subtle) !important; }

.marquee-track { overflow: hidden !important; white-space: nowrap !important; padding: 1.5rem 0 !important; border-top: 1px solid var(--border-subtle) !important; border-bottom: 1px solid var(--border-subtle) !important; background: rgba(0,0,0,0.4) !important; }
.marquee-inner { display: inline-block !important; width: max-content !important; }
.marquee-content { display: inline-block !important; animation: marquee 20s linear infinite !important; font-size: clamp(1.1rem, 2.5vw, 1.8rem) !important; font-weight: 900 !important; font-family: var(--font-h) !important; color: rgba(255,255,255,0.9) !important; }
.marquee-track.is-outline .marquee-content, .stroke-text { -webkit-text-stroke: 1.5px rgba(255,255,255,0.4) !important; color: transparent !important; }
@keyframes marquee { 0% { transform: translateX(0%); } 100% { transform: translateX(-50%); } }

.stack-cards-stream { display: flex !important; flex-direction: column !important; gap: 2rem !important; margin: 2.5rem 0 !important; width: 100% !important; }
.stack-card-item {
position: sticky !important; top: 120px !important; background: var(--surface-card) !important;
border: 1px solid var(--border-subtle) !important; border-radius: 16px !important; padding: 2.5rem !important;
backdrop-filter: blur(20px) !important; box-shadow: 0 20px 50px rgba(0,0,0,0.6) !important; box-sizing: border-box !important;
}
.stack-card-num { font-family: monospace !important; font-size: 0.85rem !important; color: var(--color-p) !important; font-weight: 700 !important; margin-bottom: 0.5rem !important; }
.stack-card-title { font-size: clamp(1.4rem, 2.5vw, 2rem) !important; font-weight: 800 !important; margin-bottom: 0.8rem !important; font-family: var(--font-h) !important; }
.stack-card-desc { font-size: 0.95rem !important; color: var(--color-txt-muted) !important; max-width: 680px !important; }
.stack-card-img { width: 100% !important; height: 260px !important; border-radius: 10px !important; overflow: hidden !important; margin-bottom: 1.5rem !important; }
.stack-card-img img { width: 100% !important; height: 100% !important; object-fit: cover !important; }

.awards-stream-wrap { display: flex !important; flex-direction: column !important; border-top: 1px solid var(--border-subtle) !important; margin: 2rem 0 !important; width: 100% !important; }
.award-row { display: grid !important; grid-template-columns: 80px 1fr auto !important; align-items: center !important; padding: 1.6rem 0.5rem !important; border-bottom: 1px solid var(--border-subtle) !important; transition: all 0.25s ease !important; cursor: pointer !important; }
.award-row:hover { padding-left: 1.2rem !important; padding-right: 1.2rem !important; background: var(--surface-glass) !important; border-color: rgba(255,255,255,0.2) !important; }
.award-year { font-family: monospace !important; font-size: 0.85rem !important; color: var(--color-p) !important; font-weight: 700 !important; margin: 0 !important; }
.award-title { font-family: var(--font-h) !important; font-size: 1.25rem !important; font-weight: 700 !important; margin: 0 !important; }
.award-client { font-family: monospace !important; font-size: 0.78rem !important; color: var(--color-txt-muted) !important; text-transform: uppercase !important; margin: 0 !important; }
.award-hover-floater {
position: fixed !important; pointer-events: none !important; width: 260px !important; height: 180px !important;
border-radius: 12px !important; overflow: hidden !important; z-index: 99999 !important; display: none;
box-shadow: 0 20px 40px rgba(0,0,0,0.8) !important; border: 1px solid var(--border-card) !important; background: #141418 !important;
}

.section-scrub-text { padding: clamp(5rem, 10vw, 9rem) 0 !important; }
.scrub-manifesto-p {
font-family: var(--font-h) !important; font-size: clamp(2rem, 4.5vw, 3.8rem) !important; font-weight: 800 !important;
line-height: 1.2 !important; text-transform: uppercase !important; margin: 0 auto 2rem auto !important; max-width: 1050px !important;
}
.scrub-word { display: inline-block !important; color: rgba(255,255,255,0.22) !important; transition: color 0.25s ease !important; }
.scrub-word.is-active, .scrub-word:hover { color: #ffffff !important; }

.bento-grid, .gallery-grid, .pricing-grid, .clients-grid, .stats-grid, .team-grid { display: grid !important; width: 100% !important; }
.bento-grid { grid-template-columns: 1fr !important; gap: 1.25rem !important; margin: 1.5rem 0 !important; }
@media (min-width: 900px) { .bento-grid { grid-template-columns: repeat(3, 1fr) !important; } .bento-span-2 { grid-column: span 2 !important; } }
.bento-card, .team-card { padding: 1.5rem 1.6rem !important; background: var(--surface-card) !important; border: 1px solid var(--border-subtle) !important; border-radius: 12px !important; backdrop-filter: blur(12px) !important; transition: transform 0.3s ease, border-color 0.3s ease !important; }
.bento-card:hover, .team-card:hover { transform: translateY(-4px) !important; border-color: rgba(255,255,255,0.2) !important; }
.bento-img-wrap, .team-img-wrap { height: 180px !important; margin-bottom: 1rem !important; border-radius: 8px !important; overflow: hidden !important; }
.bento-img-wrap img, .team-img-wrap img { width: 100% !important; height: 100% !important; object-fit: cover !important; }

.pricing-grid { gap: 1.5rem !important; margin: 2rem 0 !important; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important; align-items: stretch !important; }
.pricing-card { padding: 2.2rem 2rem !important; background: rgba(24, 24, 27, 0.35) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; border-radius: 16px !important; display: flex !important; flex-direction: column !important; justify-content: space-between !important; position: relative !important; backdrop-filter: blur(12px) !important; transition: all 0.3s ease !important; }
.pricing-card.is-popular { background: rgba(30, 20, 22, 0.65) !important; border: 1px solid var(--color-p) !important; box-shadow: 0 15px 45px var(--color-p-glow) !important; transform: scale(1.02) !important; }
.pricing-popular-badge { position: absolute !important; top: -12px !important; right: 24px !important; background: var(--color-p) !important; color: #fff !important; font-size: 0.65rem !important; font-weight: 900 !important; padding: 4px 12px !important; border-radius: 999px !important; }
.pricing-amount { font-size: 2.3rem !important; font-weight: 900 !important; color: var(--color-p) !important; margin-bottom: 1.5rem !important; }
.pricing-features { list-style: none !important; padding: 0 !important; margin: 1.25rem 0 2rem 0 !important; border-top: 1px solid var(--border-subtle) !important; padding-top: 1.25rem !important; display: flex !important; flex-direction: column !important; gap: 0.75rem !important; }
.pricing-features li { position: relative !important; padding-left: 1.4rem !important; font-size: 0.85rem !important; color: var(--color-txt-muted) !important; }
.pricing-features li::before { content: "✔" !important; position: absolute !important; left: 0 !important; color: var(--color-p) !important; }

/* WooCommerce Atelier Pro 高定暗黑系统 */
.woocommerce-main-container, .woocommerce-site-wrapper {
width: 100% !important; max-width: var(--site-max-w) !important; margin: 0 auto !important;
padding: clamp(2.5rem, 5vw, 4.5rem) clamp(1rem, 4vw, 3.5rem) !important; box-sizing: border-box !important;
}

.woocommerce h1.page-title {
font-family: var(--font-h) !important; font-size: clamp(2.2rem, 4vw, 3.5rem) !important; font-weight: 800 !important;
text-transform: uppercase !important; color: var(--color-txt) !important; margin: 0 0 2rem 0 !important;
padding-bottom: 1rem !important; border-bottom: 1px solid var(--border-subtle) !important;
}

.woocommerce ul.products, .woocommerce .products.columns-3 {
display: grid !important; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
gap: 2rem !important; margin: 2.5rem 0 !important; padding: 0 !important; list-style: none !important;
}
.woocommerce ul.products::before, .woocommerce ul.products::after { display: none !important; }

.woocommerce ul.products li.product {
float: none !important; width: 100% !important; margin: 0 !important; background: var(--surface-card) !important;
border: 1px solid var(--border-subtle) !important; border-radius: 14px !important; padding: 1.25rem !important;
display: flex !important; flex-direction: column !important; justify-content: space-between !important;
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important; position: relative !important; box-sizing: border-box !important;
}
.woocommerce ul.products li.product:hover {
border-color: rgba(255, 255, 255, 0.25) !important; transform: translateY(-4px) !important;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5) !important;
}

.awwwards-product-thumb-box {
position: relative !important; overflow: hidden !important; border-radius: 10px !important;
aspect-ratio: 1 / 1 !important; background: #141418 !important;
}
.awwwards-product-thumb-box img { width: 100% !important; height: 100% !important; object-fit: cover !important; }

.woocommerce-loop-product__title {
font-family: var(--font-h) !important; font-size: 1.15rem !important; font-weight: 700 !important;
color: var(--color-txt) !important; margin: 1rem 0 0.4rem 0 !important;
}
.woocommerce-Price-amount {
font-family: monospace !important; color: var(--color-p) !important; font-size: 1.1rem !important; font-weight: 700 !important;
}

/* 单品页双列网格 & Sticky 吸顶跟手 */
.woocommerce div.product {
display: grid !important; grid-template-columns: 1.05fr 0.95fr !important;
gap: clamp(2rem, 5vw, 4.5rem) !important; align-items: start !important;
}
@media (max-width: 860px) { .woocommerce div.product { grid-template-columns: 1fr !important; } }

.woocommerce div.product div.images, .woocommerce-product-gallery {
width: 100% !important; float: none !important; margin: 0 !important; opacity: 1 !important;
visibility: visible !important; border-radius: 16px !important; overflow: hidden !important;
border: 1px solid var(--border-subtle) !important; background: var(--surface-card) !important;
}

.woocommerce div.product div.summary {
width: 100% !important; float: none !important; margin: 0 !important;
position: sticky !important; top: 120px !important;
}

.product_title {
font-family: var(--font-h) !important; font-size: clamp(2rem, 3.5vw, 3rem) !important;
font-weight: 800 !important; line-height: 1.1 !important; margin: 0 0 1rem 0 !important;
}

.single_add_to_cart_button {
background: var(--color-p) !important; color: #fff !important; border: none !important;
border-radius: 8px !important; padding: 1rem 2.5rem !important; font-weight: 800 !important;
font-size: 0.85rem !important; text-transform: uppercase !important; letter-spacing: 0.06em !important;
box-shadow: 0 8px 25px var(--color-p-glow) !important; cursor: pointer !important;
}
.single_add_to_cart_button:hover { background: var(--color-p-hover) !important; transform: translateY(-2px) !important; }

/* 底部 Sticky Purchase Bar */
.awwwards-sticky-cart-bar {
position: fixed !important; bottom: 0 !important; left: 0 !important; width: 100% !important;
background: rgba(11, 11, 13, 0.96) !important; backdrop-filter: blur(20px) !important;
border-top: 1px solid var(--border-subtle) !important; z-index: 99998 !important;
transform: translateY(100%) !important; transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
box-shadow: 0 -10px 30px rgba(0,0,0,0.6) !important;
}
body.scrolled-past-cart .awwwards-sticky-cart-bar { transform: translateY(0) !important; }

/* 全屏模态框与抽屉 */
.header-search-modal {
position: fixed !important; inset: 0 !important; background: rgba(0, 0, 0, 0.92) !important;
backdrop-filter: blur(20px) !important; z-index: 999999 !important; display: none !important;
align-items: center !important; justify-content: center !important; padding: 2rem !important;
}
.header-search-modal.is-active { display: flex !important; }
.header-search-input {
width: 100% !important; background: transparent !important; border: none !important;
border-bottom: 2px solid var(--color-p) !important; color: #fff !important;
font-size: clamp(1.8rem, 3.5vw, 2.5rem) !important; font-family: var(--font-h) !important;
padding: 1rem 0 !important; outline: none !important;
}

.offcanvas-cart-backdrop {
position: fixed !important; inset: 0 !important; background: rgba(0, 0, 0, 0.75) !important;
backdrop-filter: blur(12px) !important; z-index: 99998 !important; display: none !important;
}
.offcanvas-cart-backdrop.is-active { display: block !important; }
.offcanvas-cart-drawer {
position: fixed !important; top: 0 !important; right: 0 !important; width: 440px !important; max-width: 90vw !important;
height: 100vh !important; background: var(--color-bg) !important; border-left: 1px solid var(--border-subtle) !important;
padding: 2rem !important; display: flex !important; flex-direction: column !important;
transform: translateX(100%) !important; transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
z-index: 99999 !important;
}
.offcanvas-cart-backdrop.is-active .offcanvas-cart-drawer { transform: translateX(0) !important; }

.mobile-nav-backdrop {
position: fixed !important; inset: 0 !important; background: rgba(0, 0, 0, 0.75) !important;
backdrop-filter: blur(12px) !important; z-index: 99998 !important; display: none !important;
}
.mobile-nav-backdrop.is-active { display: block !important; }
.mobile-nav-drawer {
position: fixed !important; top: 0 !important; right: 0 !important; width: 340px !important; max-width: 85vw !important;
height: 100vh !important; background: var(--color-bg) !important; border-left: 1px solid var(--border-subtle) !important;
padding: 2.5rem 2rem !important; display: flex !important; flex-direction: column !important;
justify-content: space-between !important; transform: translateX(100%) !important;
transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important; z-index: 99999 !important;
}
.mobile-nav-backdrop.is-active .mobile-nav-drawer { transform: translateX(0) !important; }
.mobile-nav-list { list-style: none !important; padding: 0 !important; margin: 0 !important; display: flex !important; flex-direction: column !important; gap: 1.25rem !important; }
.mobile-nav-list a { font-family: var(--font-h) !important; font-size: 1.2rem !important; font-weight: 700 !important; text-transform: uppercase !important; color: var(--color-header-link) !important; }
.mobile-nav-list a:hover { color: var(--color-header-link-hover) !important; }