/* Shared styles across all pages */
body { overflow-x: hidden; color: #1A1A1A; background-color: #FAFAFA; }

/* WordPress 管理条兼容：把 fixed 顶部元素下推管理条的高度 */
.admin-bar #main-header,
.admin-bar #mobile-drawer,
.admin-bar #mobile-overlay { top: 32px; }
.admin-bar #mobile-drawer,
.admin-bar #mobile-overlay { height: calc(100% - 32px); }
@media screen and (max-width: 782px) {
    .admin-bar #main-header,
    .admin-bar #mobile-drawer,
    .admin-bar #mobile-overlay { top: 46px; }
    .admin-bar #mobile-drawer,
    .admin-bar #mobile-overlay { height: calc(100% - 46px); }
}
@media screen and (max-width: 600px) {
    /* WP 在 <= 600px 时管理条会变为非 fixed，仍占据文档顶部 46px */
    .admin-bar #main-header { top: 0; position: absolute; }
}
h1, h2, h3, h4, h5, h6, .font-serif { font-family: 'Playfair Display', serif; }

/* Header Scroll Effect */
#main-header { transition: all 0.4s ease; border-bottom: 1px solid transparent; }
#main-header.scrolled { background-color: rgba(255, 255, 255, 0.98); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(0,0,0,0.05); }
#main-header.scrolled .nav-link,
#main-header.scrolled .icon-btn,
#main-header.scrolled .logo-text { color: #1A1A1A; }
#main-header.transparent .nav-link,
#main-header.transparent .icon-btn,
#main-header.transparent .logo-text { color: #FFFFFF; }
#main-header.scrolled .header-inner { padding-top: 0.75rem; padding-bottom: 0.75rem; }

/* Custom Logo (WP 自定义器上传) */
.diy-custom-logo .custom-logo-link { display: inline-block; line-height: 0; }
.diy-custom-logo .custom-logo { max-height: 36px; width: auto; height: auto; }
@media (min-width: 768px) { .diy-custom-logo .custom-logo { max-height: 48px; } }

/* wp_nav_menu 输出 li 默认重置 —— 让我们的 ul flex/space-y 生效 */
.diy-page-content nav ul, header nav ul, footer .footer-acc ul { list-style: none; padding: 0; margin: 0; }
header nav li, footer .footer-acc li { list-style: none; }

/* Navigation Underline Animation */
.nav-link { position: relative; display: inline-block; }
.nav-link::before { content: ''; position: absolute; width: 0; height: 1px; bottom: -4px; left: 50%; background-color: currentColor; transition: all 0.3s ease; transform: translateX(-50%); }
.nav-link:hover::before, .nav-link.active::before { width: 100%; }

/* ============================================================
 * 主菜单二级下拉（桌面）
 * ========================================================== */
.diy-primary-nav .menu-item-has-children { position: relative; }
.diy-primary-nav .menu-item-has-children > a::after {
    content: ''; display: inline-block; width: 5px; height: 5px;
    margin-left: 6px; vertical-align: 2px;
    border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
    transform: rotate(45deg); transition: transform .25s;
    position: static; background: transparent;
}
.diy-primary-nav .menu-item-has-children:hover > a::after { transform: rotate(-135deg); }
.diy-primary-nav .sub-menu {
    position: absolute; top: 100%; left: 50%;
    transform: translateX(-50%) translateY(8px);
    min-width: 200px; padding: 14px 0; margin: 0;
    list-style: none;
    background: rgba(255,255,255,0.98);
    backdrop-filter: blur(10px);
    box-shadow: 0 18px 40px rgba(0,0,0,0.08);
    border: 1px solid rgba(0,0,0,0.04);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .25s ease, transform .25s ease, visibility .25s;
    z-index: 60;
}
.diy-primary-nav .menu-item-has-children:hover > .sub-menu,
.diy-primary-nav .menu-item-has-children:focus-within > .sub-menu {
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}
.diy-primary-nav .sub-menu li { display: block; list-style: none; }
.diy-primary-nav .sub-menu a {
    display: block; padding: 10px 24px;
    font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase;
    color: #1A1A1A !important; white-space: nowrap;
    transition: color .2s ease, background .2s ease;
}
.diy-primary-nav .sub-menu a:hover { color: #C1A68D !important; background: rgba(0,0,0,0.03); }
.diy-primary-nav .sub-menu a::after { display: none !important; }

/* 透明态页眉时下拉仍保持白底深字（不继承 header transparent 的白色） */
#main-header.transparent .diy-primary-nav .sub-menu a { color: #1A1A1A !important; }

/* ============================================================
 * 移动端抽屉二级菜单（点击展开）
 * ========================================================== */
.diy-mobile-menu, .diy-mobile-menu .sub-menu { list-style: none; padding: 0; margin: 0; }
.diy-mobile-menu .menu-item-has-children { position: relative; }
.diy-mobile-menu .menu-item-has-children > .diy-sub-toggle {
    position: absolute; top: 6px; right: 0;
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    background: transparent; border: 0; cursor: pointer;
    color: #1A1A1A; transition: transform .25s ease;
}
.diy-mobile-menu .menu-item-has-children.is-open > .diy-sub-toggle { transform: rotate(180deg); }
.diy-mobile-menu .sub-menu {
    max-height: 0; overflow: hidden;
    transition: max-height .35s ease;
    background: rgba(0,0,0,0.02);
}
.diy-mobile-menu .menu-item-has-children.is-open > .sub-menu { max-height: 600px; }
.diy-mobile-menu .sub-menu a {
    display: block; padding: 12px 16px;
    font-size: 12px; letter-spacing: 0.15em; text-transform: uppercase;
    color: #1A1A1A;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

/* ============================================================
 * 头部下滑搜索面板
 * ========================================================== */
.diy-search-panel {
    max-height: 0; overflow: hidden;
    transition: max-height .35s ease, opacity .35s ease, margin .35s ease;
    opacity: 0; margin-top: 0;
}
.diy-search-panel.is-open { max-height: 120px; opacity: 1; margin-top: 1.25rem; }
.diy-search-form {
    display: flex; align-items: center; gap: .75rem;
    border-bottom: 1px solid currentColor;
    padding: .5rem 0;
    max-width: 720px; margin: 0 auto;
}
.diy-search-form .diy-search-icon { width: 18px; height: 18px; opacity: .6; flex-shrink: 0; }
.diy-search-form .diy-search-input {
    flex: 1; min-width: 0;
    background: transparent; border: 0; outline: 0;
    padding: .5rem 0;
    color: currentColor;
    font-size: 14px; font-weight: 300;
    letter-spacing: .05em;
}
.diy-search-form .diy-search-input::placeholder { color: currentColor; opacity: .55; }
.diy-search-form .diy-search-submit {
    flex-shrink: 0;
    background: transparent; border: 0; cursor: pointer;
    color: currentColor;
    font-size: 11px; letter-spacing: .25em; text-transform: uppercase; font-weight: 500;
    padding: .25rem .25rem;
    transition: opacity .2s ease;
}
.diy-search-form .diy-search-submit:hover { opacity: .65; }
.diy-search-form .diy-search-close {
    flex-shrink: 0;
    background: transparent; border: 0; cursor: pointer;
    color: currentColor; opacity: .6;
}
.diy-search-form .diy-search-close:hover { opacity: 1; }

/* 移动抽屉里的搜索框始终为深色 */
#mobile-drawer .diy-search-form { color: #1A1A1A; }

/* Entry Animations */
.fade-in-up { opacity: 0; transform: translateY(40px); transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1); }
.fade-in-up.visible { opacity: 1; transform: translateY(0); }

/* ============================================================
 * WooCommerce 表单 / 购物车 / 结账 通用样式（不引用 WC 默认 CSS）
 * ============================================================ */

/* 输入控件 —— 极简边框风格，与品牌一致 */
.diy-cart-form input[type="text"],
.diy-cart-form input[type="email"],
.diy-cart-form input[type="tel"],
.diy-cart-form input[type="number"],
.diy-cart-form select,
.diy-checkout-form input[type="text"],
.diy-checkout-form input[type="email"],
.diy-checkout-form input[type="tel"],
.diy-checkout-form input[type="number"],
.diy-checkout-form input[type="password"],
.diy-checkout-form select,
.diy-checkout-form textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    background: transparent;
    border: 1px solid #D4D4D4;
    border-radius: 0;
    font-size: 0.875rem;
    line-height: 1.4;
    color: #1A1A1A;
    transition: border-color 0.25s ease;
    -webkit-appearance: none;
    appearance: none;
}
.diy-cart-form input:focus,
.diy-cart-form select:focus,
.diy-checkout-form input:focus,
.diy-checkout-form select:focus,
.diy-checkout-form textarea:focus {
    outline: none;
    border-color: #1A1A1A;
}
.diy-checkout-form select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%231A1A1A' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position: right 1rem center; padding-right: 2.5rem; }

/* 表单字段标签 */
.diy-checkout-form .form-row {
    margin-bottom: 1rem;
    display: block;
}
.diy-checkout-form label {
    display: block;
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #6B7280;
    margin-bottom: 0.5rem;
    font-weight: 500;
}
.diy-checkout-form .form-row .required { color: #C1A68D; text-decoration: none; }
.diy-checkout-form .form-row.form-row-first { width: calc(50% - 0.5rem); float: left; clear: left; margin-right: 1rem; }
.diy-checkout-form .form-row.form-row-last  { width: calc(50% - 0.5rem); float: left; clear: right; }
.diy-checkout-form .form-row.form-row-wide  { clear: both; width: 100%; }
.diy-checkout-form .woocommerce-input-wrapper { display: block; }
.diy-checkout-form .input-checkbox,
.diy-checkout-form .input-radio { width: auto; margin-right: 0.5rem; vertical-align: middle; }
.diy-checkout-form fieldset { border: 0; padding: 0; margin: 1.5rem 0 0 0; }
.diy-checkout-form fieldset legend { font-family: 'Playfair Display', serif; font-size: 1.25rem; color: #1A1A1A; margin-bottom: 1rem; }
.diy-checkout-form .col2-set::after { content: ''; display: block; clear: both; }

/* ============================================================
 * WooCommerce 通知 —— 右上角浮层 Toast（品牌极简风）
 * ============================================================ */
.woocommerce-notices-wrapper {
    position: fixed; top: 96px; right: 24px; z-index: 100;
    display: flex; flex-direction: column; gap: 12px;
    max-width: 380px; width: calc(100% - 48px);
    pointer-events: none;
}
@media (max-width: 767px) {
    .woocommerce-notices-wrapper { top: 80px; right: 16px; left: 16px; width: auto; max-width: none; }
}
.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-info,
.woocommerce-notices-wrapper .woocommerce-error {
    pointer-events: auto;
    position: relative;
    list-style: none;
    padding: 18px 44px 18px 22px;
    margin: 0;
    font-size: 13px; line-height: 1.55;
    background: #FFFFFF;
    color: #1A1A1A;
    border: 1px solid rgba(0,0,0,0.06);
    border-left: 3px solid #1A1A1A;
    box-shadow: 0 18px 40px rgba(0,0,0,0.10);
    backdrop-filter: blur(8px);
    transform: translateX(120%); opacity: 0;
    transition: transform .45s cubic-bezier(0.16, 1, 0.3, 1), opacity .35s ease;
}
.woocommerce-notices-wrapper .woocommerce-message.is-visible,
.woocommerce-notices-wrapper .woocommerce-info.is-visible,
.woocommerce-notices-wrapper .woocommerce-error.is-visible {
    transform: translateX(0); opacity: 1;
}
.woocommerce-notices-wrapper .woocommerce-message.is-leaving,
.woocommerce-notices-wrapper .woocommerce-info.is-leaving,
.woocommerce-notices-wrapper .woocommerce-error.is-leaving {
    transform: translateX(120%); opacity: 0;
}
.woocommerce-notices-wrapper .woocommerce-message { border-left-color: #C1A68D; }
.woocommerce-notices-wrapper .woocommerce-error   { border-left-color: #b45a5a; }
.woocommerce-notices-wrapper li { list-style: none; }

/* 内联按钮（如 View Cart） */
.woocommerce-notices-wrapper .button,
.woocommerce-notices-wrapper a.wc-forward,
.woocommerce-notices-wrapper a.button {
    display: inline-block;
    margin-top: 10px; margin-left: 0;
    padding: 0 0 2px 0;
    background: transparent !important; color: #1A1A1A !important;
    border: 0 !important; border-bottom: 1px solid #1A1A1A !important;
    border-radius: 0 !important;
    font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 500;
    text-decoration: none;
    transition: opacity .2s ease;
}
.woocommerce-notices-wrapper .button:hover,
.woocommerce-notices-wrapper a.wc-forward:hover { opacity: .65; }

/* 关闭按钮（由 JS 注入） */
.woocommerce-notices-wrapper .diy-notice-close {
    position: absolute; top: 10px; right: 10px;
    width: 28px; height: 28px;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; border: 0; cursor: pointer;
    color: #1A1A1A; opacity: .45;
    transition: opacity .2s ease;
}
.woocommerce-notices-wrapper .diy-notice-close:hover { opacity: 1; }
.woocommerce-notices-wrapper .diy-notice-close::before,
.woocommerce-notices-wrapper .diy-notice-close::after {
    content: ''; position: absolute; left: 50%; top: 50%;
    width: 12px; height: 1px; background: currentColor;
}
.woocommerce-notices-wrapper .diy-notice-close::before { transform: translate(-50%, -50%) rotate(45deg); }
.woocommerce-notices-wrapper .diy-notice-close::after  { transform: translate(-50%, -50%) rotate(-45deg); }

/* 数量输入容器（购物车页） */
.diy-qty-wrap input[type=number]::-webkit-inner-spin-button,
.diy-qty-wrap input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.diy-qty-wrap input[type=number] { -moz-appearance: textfield; appearance: textfield; border: 0 !important; }

/* ============================================================
 * Checkout 支付区块（#payment / .woocommerce-checkout-payment）
 * ============================================================ */
.woocommerce-checkout-payment { background: #FAFAFA; padding: 1.25rem 1.25rem 1.5rem; margin-top: 1rem; border: 1px solid rgba(0,0,0,0.06); }
.woocommerce-checkout-payment ul.payment_methods { list-style: none; padding: 0; margin: 0 0 1.25rem; }
.woocommerce-checkout-payment ul.payment_methods > li { list-style: none; }

/* 支付区块内的 info / 提示 —— 小号、淡灰、无装饰 */
.woocommerce-checkout-payment .woocommerce-info,
.woocommerce-checkout-payment .woocommerce-notice {
    background: transparent !important;
    border: 0 !important;
    padding: .5rem 0 !important;
    margin: 0 !important;
    font-size: 12px !important;
    line-height: 1.6;
    color: #888 !important;
    font-weight: 300;
    box-shadow: none !important;
    transform: none !important; opacity: 1 !important;
    pointer-events: auto;
}
.woocommerce-checkout-payment .woocommerce-info::before,
.woocommerce-checkout-payment .woocommerce-info::after { content: none !important; display: none !important; }

/* 隐私政策 / 条款 文字块 */
.woocommerce-terms-and-conditions-wrapper,
.woocommerce-privacy-policy-text { margin: 0 0 1.25rem; }
.woocommerce-privacy-policy-text p,
.woocommerce-terms-and-conditions-wrapper p {
    font-size: 11px !important;
    line-height: 1.7;
    color: #999 !important;
    font-weight: 300;
    margin: 0;
}
.woocommerce-privacy-policy-text a,
.woocommerce-terms-and-conditions-wrapper a {
    color: #1A1A1A;
    text-decoration: none;
    border-bottom: 1px solid rgba(0,0,0,0.2);
    padding-bottom: 1px;
    transition: border-color .2s ease;
}
.woocommerce-privacy-policy-text a:hover,
.woocommerce-terms-and-conditions-wrapper a:hover { border-bottom-color: #1A1A1A; }

/* Place Order 按钮 —— 全宽、品牌深色、极简 */
.woocommerce-checkout-payment #place_order,
button[name="woocommerce_checkout_place_order"] {
    display: block; width: 100%;
    background: #1A1A1A !important; color: #FFFFFF !important;
    border: 0 !important;
    padding: 16px 24px !important;
    font-size: 11px !important;
    letter-spacing: 0.3em !important;
    text-transform: uppercase;
    font-weight: 500;
    line-height: 1;
    border-radius: 0 !important;
    cursor: pointer;
    transition: background .25s ease, color .25s ease;
}
.woocommerce-checkout-payment #place_order:hover,
button[name="woocommerce_checkout_place_order"]:hover { background: #C1A68D !important; }
.woocommerce-checkout-payment #place_order:disabled,
button[name="woocommerce_checkout_place_order"]:disabled { opacity: .55; cursor: not-allowed; }

/* noscript / 更新合计提示文字 */
.woocommerce-checkout-payment .form-row.place-order noscript {
    display: block;
    font-size: 11px; color: #999; line-height: 1.6;
    margin-bottom: .75rem;
}

/* 支付方式列表 */
.diy-payment .wc_payment_methods { padding: 0; margin: 0; list-style: none; }
.diy-payment .wc_payment_method { padding: 0.875rem 1rem; border: 1px solid #E5E7EB; background: #fff; transition: border-color 0.2s ease; }
.diy-payment .wc_payment_method:has(> input:checked) { border-color: #1A1A1A; }
.diy-payment .wc_payment_method label { display: inline-flex !important; align-items: center; gap: 0.5rem; margin: 0 !important; font-size: 0.875rem; letter-spacing: normal !important; text-transform: none !important; color: #1A1A1A !important; cursor: pointer; }
.diy-payment .wc_payment_method label img { max-height: 24px; margin-left: 0.5rem; vertical-align: middle; }
.diy-payment .payment_box { padding: 1rem; margin-top: 0.5rem; background: #F9F6F0; font-size: 0.8rem; color: #6B7280; line-height: 1.6; }
.diy-payment .payment_box p:last-child { margin-bottom: 0; }
.diy-payment .terms-and-conditions { margin: 1rem 0; }

/* 隐藏 WC 默认表格头/标签（被我们自己的 ul 替代） */
.diy-review-table .shop_table { display: none; }

/* Marquee */
.marquee-container { overflow: hidden; white-space: nowrap; border-top: 1px solid rgba(0,0,0,0.05); border-bottom: 1px solid rgba(0,0,0,0.05); }
.marquee-content { display: inline-block; animation: marquee 30s linear infinite; }
@keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* Category Hover */
.category-card { overflow: hidden; position: relative; cursor: pointer; }
.category-img { transition: transform 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.category-card:hover .category-img { transform: scale(1.05); }
.category-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.25); opacity: 0; transition: opacity 0.6s ease; display: flex; align-items: center; justify-content: center; }
.category-card:hover .category-overlay { opacity: 1; }
.category-text { transform: translateY(10px); transition: transform 0.6s ease; color: white; letter-spacing: 0.05em; font-size: 1.5rem; font-style: italic; }
.category-card:hover .category-text { transform: translateY(0); }

/* Product Card Hover */
.product-card .img-wrapper { overflow: hidden; position: relative; background-color: #F3F3F3; }
.product-card .img-wrapper img { transition: transform 1s ease, opacity 0.7s ease; }
.product-card:hover .img-wrapper img { transform: scale(1.03); }
.product-card .img-wrapper .img-hover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.product-card:hover .img-wrapper .img-hover { opacity: 1; }
.product-card:hover .img-wrapper .img-main { opacity: 0; }
.btn-quick-add { opacity: 0; transform: translateY(10px); transition: all 0.4s ease; width: calc(100% - 2rem); left: 1rem; bottom: 1rem; position: absolute; }
.product-card:hover .btn-quick-add { opacity: 1; transform: translateY(0); }

/* Hide scrollbar */
.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Button Outline */
.btn-outline { border: 1px solid #1A1A1A; color: #1A1A1A; transition: all 0.4s ease; }
.btn-outline:hover { background-color: #1A1A1A; color: #FFFFFF; }

/* Solid Button */
.btn-solid { background: #1A1A1A; color: #FFFFFF; transition: all 0.4s ease; }
.btn-solid:hover { background: #C1A68D; }

/* Thin SVG Icon Adjustments */
.lucide { stroke-width: 1.2px; width: 22px; height: 22px; }

/* Footer Accordion (mobile) */
.footer-acc .acc-body { display: none; }
.footer-acc.open .acc-body { display: block; }
.footer-acc .acc-icon { transition: transform 0.3s ease; }
.footer-acc.open .acc-icon { transform: rotate(45deg); }
@media (min-width: 768px) {
    .footer-acc .acc-body { display: block !important; }
    .footer-acc .acc-toggle { pointer-events: none; cursor: default; }
    .footer-acc .acc-icon { display: none; }
}

/* Page Hero (for subpages) */
.page-hero { position: relative; width: 100%; height: 45vh; min-height: 320px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
@media (min-width: 768px) { .page-hero { height: 55vh; min-height: 420px; } }
.page-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.page-hero::after { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,0.5); }
.page-hero .page-hero-text { position: relative; z-index: 10; text-align: center; color: #fff; padding: 0 1.5rem; }

/* Breadcrumb */
.breadcrumb a { color: #6b7280; transition: color 0.3s; }
.breadcrumb a:hover { color: #C1A68D; }
.breadcrumb .sep { margin: 0 0.5rem; color: #9ca3af; }
.breadcrumb .current { color: #1A1A1A; }

/* FAQ Item */
.faq-item .faq-icon { transition: transform 0.3s ease; }
.faq-item.open .faq-icon { transform: rotate(45deg); }
.faq-item .faq-content { max-height: 0; overflow: hidden; transition: max-height 0.4s ease, padding 0.4s ease; padding: 0 0 0 0; }
.faq-item.open .faq-content { max-height: 400px; padding: 0 0 1.5rem 0; }

/* Thumbnail gallery (product page) */
.thumb { cursor: pointer; opacity: 0.65; transition: opacity 0.3s, border-color 0.3s; border: 1px solid transparent; }
.thumb:hover { opacity: 1; }
.thumb.active { opacity: 1; border-color: #1A1A1A; }

/* Form input */
.form-input { width: 100%; background: transparent; border: none; border-bottom: 1px solid rgba(0,0,0,0.2); padding: 0.75rem 0.25rem; font-size: 0.875rem; transition: border-color 0.3s; }
.form-input:focus { outline: none; border-color: #1A1A1A; }
.form-input::placeholder { color: rgba(0,0,0,0.35); }
textarea.form-input { resize: vertical; min-height: 120px; }