/* ==========================================================================
   twbuystore.com - Christie's & Sotheby's Inspired Custom CSS
   WordPress + WooCommerce Theme Overrides
   ========================================================================== */

/* ==========================================================================
   🏆 台灣精品御茶 — Category Specialty Styling (ID: 1612)
   Adds visual distinction for the premium Taiwan tea category.
   Paste this block into WP Admin → Appearance → Customize → Additional CSS
   ========================================================================== */

/* 御茶 Category badge on product cards */
.product-cat-御茶 .woocommerce-loop-category__title::after,
.product_cat-台灣精品御茶 .woocommerce-loop-product__title::before,
.tax-product_cat-台灣精品御茶 .page-title::before {
    content: "🏆 ";
    font-size: 0.9em;
}

/* 御茶 category archive page description */
.tax-product_cat-台灣精品御茶 .term-description {
    border-left: 3px solid #34b382;
    padding: 12px 20px;
    background: rgba(52, 179, 130, 0.06);
    margin: 20px 0 30px 0;
    font-style: italic;
    color: #f1e6cf;
}

/* 御茶 product cards — subtle tea-green accent border */
.tax-product_cat-台灣精品御茶 ul.products li.product {
    border-left: 2px solid rgba(52, 179, 130, 0.3) !important;
}

/* Sub-category pills (阿里山, 鹿谷, 梨山) */
.term-1613 .page-title::after { content: " ⛰️ 阿里山高冷茶"; font-size: 0.6em; opacity: 0.7; display: block; }
.term-1614 .page-title::after { content: " 🍃 鹿谷凍頂烏龍"; font-size: 0.6em; opacity: 0.7; display: block; }
.term-1615 .page-title::after { content: " 🏔️ 梨山福壽山茶"; font-size: 0.6em; opacity: 0.7; display: block; }

/* ========================================================================== */

/* 1. Typography Core Setup (Auction House Editorial Pairing) */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Noto+Serif+TC:wght@400;600;700&family=Noto+Sans+TC:wght@400;500;700&display=swap');

:root {
    --bg-primary-override: #061513;
    --bg-secondary-override: #0a221f;
    --color-gold-override: #d9c5a0;
    --color-gold-light-override: #f1e6cf;
    --border-color-override: rgba(217, 197, 160, 0.15);
    --text-primary-override: #f3f4f6;
    --text-secondary-override: #c7cbd1;

    --bg-primary: #061513;
    --bg-secondary: #0a221f;
    --bg-card: rgba(217, 197, 160, 0.04);
    --bg-glass: rgba(6, 21, 19, 0.82);
    
    --color-gold-light: #f1e6cf;
    --color-gold: #d9c5a0;
    --color-gold-dark: #b8a278;
    --color-coral: #d45d4e;
    
    --color-mit: #1d7a58;
    --color-mit-light: #34b382;
    
    --text-primary: #f3f4f6;
    --text-secondary: #c7cbd1;
    --text-muted: #8c96a3;
    
    --border-color: rgba(217, 197, 160, 0.15);
    --border-glow: rgba(217, 197, 160, 0.35);
    
    --font-heading: 'Cormorant Garamond', 'Noto Serif TC', serif;
    --font-body: 'DM Sans', 'Noto Sans TC', sans-serif;
    
    --transition-smooth: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --shadow-premium: 0 4px 15px rgba(0, 0, 0, 0.15);
}

/* 1.1 Global Dark Mode Theme Overrides */
body, 
html, 
#page, 
.site, 
#content, 
.site-content, 
#primary, 
#main,
.ast-container,
.ast-row,
.site-header,
.main-header-bar,
.ast-primary-header-bar,
.ast-mobile-header-wrap,
.main-header-menu,
.ast-menu-toggle,
.site-footer,
.ast-small-footer,
.site-below-footer-wrap,
.entry-content,
.entry-card,
.ast-woocommerce-container,
#main .product {
    background-color: var(--bg-primary-override) !important;
    color: var(--text-primary-override) !important;
}

/* Links & Text Colors */
body, p, span, li, td, th, dt, dd {
    color: var(--text-secondary-override) !important;
}

a, 
.site-title a, 
.main-header-menu a, 
.ast-menu-toggle,
.woocommerce-loop-product__title,
.woocommerce-loop-category__title {
    color: var(--text-primary-override) !important;
    transition: all 0.3s ease !important;
}

a:hover, 
.main-header-menu a:hover, 
.woocommerce-loop-product__title:hover {
    color: var(--color-gold-override) !important;
}

/* Headings (Serif Font) */
h1, h2, h3, h4, h5, h6, 
.product_title, 
.woocommerce-loop-product__title, 
.entry-title,
.widget-title {
    font-family: 'Cormorant Garamond', 'Noto Serif TC', Georgia, serif !important;
    font-weight: 500 !important;
    color: var(--color-gold-light-override) !important;
}

/* Body & User Interface Elements (Sans-Serif Font) */
body, p, span, a, li, 
input, select, textarea, 
.woocommerce-product-details__short-description,
.price,
.amount {
    font-family: 'DM Sans', 'Noto Sans TC', sans-serif !important;
}

/* WooCommerce Price & Currencies */
.price, 
.amount, 
ins .amount {
    color: var(--color-gold-override) !important;
    font-weight: 600 !important;
}

del .amount {
    color: #8c96a3 !important;
}

/* Header Spacer and Borders */
.site-header {
    border-bottom: 1px solid var(--border-color-override) !important;
}

/* WooCommerce Cart & Checkout Elements */
.woocommerce-checkout,
.woocommerce-cart,
.shop_table,
.cart-collaterals,
.cart_totals,
.checkout_coupon,
.woocommerce-form-login,
.woocommerce-NoticeGroup,
.woocommerce-info,
.woocommerce-message,
.woocommerce-error {
    background-color: var(--bg-secondary-override) !important;
    border-color: var(--border-color-override) !important;
    color: var(--text-primary-override) !important;
}

/* 2. Zero-Radius Sharp Corner Elements (Scrubbing Rounded Edges) */
*, *::before, *::after {
    border-radius: 0px !important;
}

/* 3. WooCommerce Single Product Gallery & Multi-Photo Styles */
.woocommerce-product-gallery,
.woocommerce-product-gallery__wrapper,
.woocommerce-product-gallery__image,
.woocommerce-product-gallery__image img {
    border-radius: 0px !important;
    border: 1px solid var(--border-color-override) !important;
    box-shadow: none !important;
}

/* WooCommerce Gallery Thumbnails Row (Remember Multi-Photo) */
.woocommerce-product-gallery .flex-control-thumbs {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin-top: 15px !important;
    padding: 0 !important;
    list-style: none !important;
}

.woocommerce-product-gallery .flex-control-thumbs li {
    width: 70px !important;
    float: none !important;
    margin: 0 !important;
}

.woocommerce-product-gallery .flex-control-thumbs li img {
    border: 1px solid var(--border-color-override) !important;
    opacity: 0.6 !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    height: 70px !important;
    object-fit: cover !important;
}

.woocommerce-product-gallery .flex-control-thumbs li img.flex-active,
.woocommerce-product-gallery .flex-control-thumbs li img:hover {
    border-color: var(--color-gold-override) !important;
    opacity: 1 !important;
}

/* 4. Product Loops & Cards (Minimalist Borders, No Fuzzy Shadows) */
ul.products li.product, 
.wc-block-grid__product,
.product-card {
    border: 1px solid rgba(217, 197, 160, 0.05) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15) !important;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    background: rgba(217, 197, 160, 0.02) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    padding: 15px !important;
    margin-bottom: 20px !important;
}

ul.products li.product:hover,
.wc-block-grid__product:hover {
    border-color: var(--color-gold-override) !important;
    transform: translateY(-5px) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.3) !important;
}

/* Ensure image and titles stretch to fill card height, keeping button at bottom */
ul.products li.product a.woocommerce-LoopProduct-link {
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
}

ul.products li.product a.woocommerce-LoopProduct-link img {
    margin-bottom: 12px !important;
    object-fit: cover !important;
    width: 100% !important;
    height: 240px !important;
    background-color: transparent !important;
}

/* 5. Buttons (Christie's Editorial: Flat, Sharp Corners, Spaced Text) */
.button, 
button, 
input[type="submit"], 
.woocommerce-Button, 
.add_to_cart_button, 
.single_add_to_cart_button, 
.checkout-button {
    background-color: var(--color-gold-override) !important;
    color: #061513 !important;
    border-radius: 0px !important;
    border: 1px solid var(--color-gold-override) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.15em !important;
    font-weight: 500 !important;
    font-size: 0.85rem !important;
    box-shadow: none !important;
    transition: all 0.3s ease !important;
    width: 100% !important;
    text-align: center !important;
    margin-top: auto !important; /* Forces button to the bottom of the flex card */
}

.button:hover, 
button:hover, 
input[type="submit"]:hover, 
.add_to_cart_button:hover, 
.single_add_to_cart_button:hover {
    background-color: transparent !important;
    color: var(--color-gold-light-override) !important;
    border-color: var(--color-gold-light-override) !important;
}

/* Secondary Button overrides (e.g. View Cart, back buttons) */
.button.alt, 
.checkout-button {
    background-color: #0a221f !important;
    color: var(--color-gold-override) !important;
    border-color: var(--border-color-override) !important;
}

.button.alt:hover, 
.checkout-button:hover {
    background-color: var(--color-gold-override) !important;
    color: #061513 !important;
    border-color: var(--color-gold-override) !important;
}

/* 6. Form Inputs & Select Boxes */
input[type="text"], 
input[type="email"], 
input[type="tel"], 
select, 
textarea {
    border-radius: 0px !important;
    border: 1px solid var(--border-color-override) !important;
    background-color: rgba(255, 255, 255, 0.02) !important;
    box-shadow: none !important;
    color: #f3f4f6 !important;
}

input:focus, 
select:focus, 
textarea:focus {
    border-color: var(--color-gold-override) !important;
    box-shadow: none !important;
}

/* Select dropdown options — dark background + light text so they're readable */
select option,
.variations select option {
    background-color: #0a221f !important;
    color: #f3f4f6 !important;
    padding: 6px 8px !important;
}

/* WooCommerce product variations dropdown — explicit dark styling */
.variations select {
    background-color: #0a221f !important;
    color: #f3f4f6 !important;
    border-color: var(--border-color-override) !important;
}

.variations select option {
    background-color: #0a221f !important;
    color: #f3f4f6 !important;
}

/* Product description / brand story dark background */
.woocommerce-product-details__short-description,
.woocommerce-Tabs-panel--description,
#tab-description,
.entry-summary .description,
.variations,
.variations td,
.variations th,
.woocommerce-product-variation {
    background-color: #0a221f !important;
    color: #f3f4f6 !important;
}

/* Brand story inline-style override — bg:#fafafa → dark */
.twb-brand-story {
    background: #0a221f !important;
    color: #f3f4f6 !important;
    border-left-color: #d9c5a0 !important;
}
.twb-brand-story p {
    color: #f3f4f6 !important;
}
.twb-brand-story p:first-child {
    color: #d9c5a0 !important;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-size: 11px;
}

/* 7. Badges (Onsale / MIT / Design) */
span.onsale, 
.woocommerce span.onsale, 
.woocommerce-page span.onsale, 
.woocommerce-page ul.products li.product .onsale,
.wc-block-grid__product-onsale,
.onsale {
    border-radius: 0px !important;
    background-color: #d45d4e !important; /* Elegant Coral Red */
    color: #ffffff !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    font-size: 0.95rem !important; /* Increased from 0.75rem */
    padding: 6px 12px !important;
    height: auto !important;
    width: auto !important;
    top: 15px !important;
    left: 15px !important;
    right: auto !important;
    position: absolute !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1.2 !important;
}

/* 8. Navigation & Header Layout overrides */
.main-header-bar-navigation,
.ast-header-sections-navigation,
.ast-primary-menu-layout {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
}

.main-header-menu {
    display: flex !important;
    flex-wrap: nowrap !important;
}

.main-header-menu > li > a {
    font-size: 0.8rem !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    padding: 0 10px !important;
}

/* Hide Astra theme default box-shadows and container background lines */
.ast-separate-container .ast-article-post, 
.ast-separate-container .ast-article-single,
.ast-separate-container .ast-woocommerce-container {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}



   14. Membership & VIP Tiers Styling
   ========================================================================== */
.membership-section {
    padding: 8rem 0;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
}

.membership-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2.5rem;
    margin-top: 4rem;
}

.membership-card {
    background: rgba(6, 21, 19, 0.45);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(217, 197, 160, 0.1);
    border-radius: 0;
    padding: 1.8rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    transition: var(--transition-smooth);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.membership-card:hover {
    transform: translateY(-10px);
    border-color: rgba(217, 197, 160, 0.3);
    background: rgba(6, 21, 19, 0.65);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
}

.card-visual {
    width: 100%;
    height: 190px;
    border-radius: 0;
    padding: 1.5rem;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    transition: var(--transition-smooth);
}

.card-visual::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(255,255,255,0.18) 0%, transparent 60%, transparent 100%);
    pointer-events: none;
    z-index: 2;
}

/* Diagonal Glossy Sweep Animation */
.card-visual::after {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    width: 80%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22), transparent);
    transform: skewX(-25deg);
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
    z-index: 3;
}

.membership-card:hover .card-visual::after {
    left: 150%;
}

/* TIER METALLIC EFFECTS WITH NEON GLOW */
.bronze-tier .card-visual {
    background: linear-gradient(135deg, #092e20 0%, #02110a 100%);
    border: 1px solid rgba(52, 179, 130, 0.4);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.silver-tier .card-visual {
    background: linear-gradient(135deg, #7b8587 0%, #2f3b3c 100%);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.black-tier .card-visual {
    background: linear-gradient(135deg, #161616 0%, #020202 100%);
    border: 2px solid var(--color-gold);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4);
}

/* CARD DETAILS */
.card-chip {
    width: 42px;
    height: 32px;
    background: linear-gradient(135deg, #d9c5a0 0%, #b8a278 100%);
    border-radius: 0;
    position: relative;
    box-shadow: inset 0 1px 2px rgba(255,255,255,0.3);
}

.silver-tier .card-chip {
    background: linear-gradient(135deg, #e3e4e5 0%, #919396 100%);
}

.card-logo {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #fff;
    opacity: 0.85;
}

.card-tier-name {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    font-weight: 600;
    color: #fff;
    letter-spacing: 0.05em;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
    margin-top: auto;
    margin-bottom: 0.5rem;
}

.black-tier .card-tier-name {
    color: var(--color-gold-light);
}

.card-number {
    font-family: 'Courier New', monospace;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: 0.1em;
}

.black-tier .card-number {
    color: var(--color-gold);
}

.tier-title {
    font-family: var(--font-heading);
    font-size: 1.4rem;
    color: #fff;
    margin-bottom: 0.25rem;
}

.black-tier .tier-title {
    color: var(--color-gold-light);
}

.tier-threshold {
    font-size: 0.85rem;
    color: var(--color-gold);
    margin-bottom: 1rem;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.05em;
}

.tier-benefits {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    border-top: 1px solid var(--border-color);
    padding-top: 1rem;
}

.tier-benefits li {
    font-size: 0.9rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.tier-benefits li i {
    font-size: 1rem;
    color: var(--text-muted);
    width: 20px;
    text-align: center;
}

.black-tier .tier-benefits li {
    color: var(--text-primary);
}

/* ==========================================================================
   15. Responsive Design (Media Queries)
   ========================================================================== */

@media (max-width: 1024px) {
    .hero-title { font-size: 2.8rem; }
    .hero-container { gap: 2.5rem; }
    .main-art-frame img { height: 360px; }
    .contact-card-box { grid-template-columns: 1fr; }
    .contact-right { border-left: none; border-top: 1px solid rgba(217, 197, 160, 0.05); }
}

@media (max-width: 768px) {
    .navbar { top: 38px; padding: 0.9rem 0; }
    
    .mobile-toggle { display: block; }
    
    .nav-menu {
        position: fixed;
        top: 65px;
        left: -100%;
        width: 100%;
        height: calc(100vh - 65px);
        background: rgba(6, 21, 19, 0.99);
        backdrop-filter: blur(20px);
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3rem;
        transition: var(--transition-smooth);
        border-top: 1px solid rgba(217, 197, 160, 0.08);
    }
    
    .nav-menu.active { left: 0; }
    
    .nav-actions .btn-nav { display: none; }
    
    .floating-currency-bar { top: auto; bottom: 20px; right: 20px; flex-direction: row; border-radius: 0; border: 1px solid var(--border-color); }
    .currency-option { border-bottom: none; border-right: 1px solid rgba(217, 197, 160, 0.08); }
    .currency-option:last-child { border-right: none; }
    
    .hero-container { grid-template-columns: 1fr; text-align: center; padding-top: 2rem; }
    .hero-subtitle { margin: 0 auto 3rem auto; }
    .hero-buttons { justify-content: center; }
    .main-art-frame { max-width: 440px; margin: 0 auto; }
    
    .stitch-container { grid-template-columns: 1fr; }
    .stitch-visual-display { height: 300px; }
    
    .collections .section-header { flex-direction: column; align-items: center; gap: 2rem; }
    
    .story-container { grid-template-columns: 1fr; gap: 3.5rem; }
    .story-img-main { height: 300px; }
    
    .contact-left, .contact-right { padding: 2.5rem 1.5rem; }
    .footer-container { grid-template-columns: 1fr; gap: 3rem; }
}

/* ==========================================================================
   台灣製 Badge — Replace Astra Sale badge for ANDEN HUD products
   ========================================================================== */

/* On-sale ANDEN HUD: replace "Sale!" text with 台灣製 */
li.product_tag-anden-hud .ast-onsale-card {
    font-size: 0 !important;
    overflow: hidden !important;
}
li.product_tag-anden-hud .ast-onsale-card::after {
    content: "\53f0\7063\88fd" !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
}

/* Non-sale ANDEN HUD: inject badge via pseudo-element on the image link */
li.product_tag-anden-hud:not(.sale) .woocommerce-LoopProduct-link::after {
    content: "\53f0\7063\88fd" !important;
    position: absolute !important;
    top: 15px !important;
    left: 15px !important;
    background-color: #d45d4e !important;
    color: #ffffff !important;
    font-family: 'DM Sans', 'Noto Sans TC', sans-serif !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    padding: 6px 12px !important;
    line-height: 1.2 !important;
    z-index: 10 !important;
}
li.product_tag-anden-hud:not(.sale) .woocommerce-LoopProduct-link {
    position: relative !important;
}

/* ==========================================================================
   16. LUXURY GOLD & SHIMMER EFFECTS — Black Card / Private Banking aesthetic
   Added: enhance existing elements with gold gradients, traveling borders,
   sparkle overlays, premium gold frame, and animated shine.
   Paste-safe: 100% drop-in. Reduced-motion respected.
   ========================================================================== */

@keyframes twb-gold-travel { 0%{background-position:0% 0%} 100%{background-position:200% 0%} }
@keyframes twb-shine-sweep {
    0%   { transform: translateX(-120%) skewX(-18deg); }
    60%  { transform: translateX(220%)  skewX(-18deg); }
    100% { transform: translateX(220%)  skewX(-18deg); }
}
@keyframes twb-sparkle { 0%,100%{opacity:0;transform:scale(.4)} 50%{opacity:1;transform:scale(1)} }
@keyframes twb-pulse-gold {
    0%,100% { box-shadow: 0 0 0 0 rgba(217,177,74,.55), 0 0 18px rgba(217,177,74,.20); }
    50%     { box-shadow: 0 0 0 8px rgba(217,177,74,.00), 0 0 28px rgba(217,177,74,.40); }
}
@keyframes twb-gold-text-shine { 0%{background-position:0% 50%} 100%{background-position:200% 50%} }

:root {
    --twb-gold-hi:   #fff3c2;
    --twb-gold:      #d9b14a;
    --twb-gold-mid:  #f1d27a;
    --twb-gold-low:  #a17a26;
    --twb-ink:       #0a0805;
    --twb-champagne: #f6d978;
    --twb-grad-gold: linear-gradient(135deg, var(--twb-gold-hi) 0%, var(--twb-gold-mid) 28%, var(--twb-gold) 50%, var(--twb-champagne) 72%, var(--twb-gold-low) 100%);
    --twb-grad-gold-flat: linear-gradient(180deg, var(--twb-gold-hi) 0%, var(--twb-gold) 55%, var(--twb-gold-low) 100%);
    --twb-grad-shine: linear-gradient(115deg, transparent 30%, rgba(255,247,214,.55) 48%, rgba(255,247,214,.9) 50%, rgba(255,247,214,.55) 52%, transparent 70%);
}

/* 16.1  Body — subtle gold dust behind everything */
body {
    background:
        radial-gradient(circle at 12% 18%, rgba(255,243,194,.08) 0, transparent 1.4px),
        radial-gradient(circle at 78% 30%, rgba(255,243,194,.06) 0, transparent 1.2px),
        radial-gradient(circle at 22% 72%, rgba(255,243,194,.07) 0, transparent 1.3px),
        radial-gradient(circle at 88% 86%, rgba(255,243,194,.05) 0, transparent 1.1px),
        var(--bg-primary) !important;
    background-size: 380px 380px, 380px 380px, 380px 380px, 380px 380px, auto !important;
}

/* 16.2  Site header — gold underglow line */
.main-header-bar,
.ast-primary-header-bar {
    border-bottom: 1px solid rgba(217,177,74,.30) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.45) !important;
}
.main-header-bar::after {
    content: '';
    display: block;
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg, transparent 5%, rgba(217,177,74,.55) 25%, rgba(255,243,194,.85) 50%, rgba(217,177,74,.55) 75%, transparent 95%);
    pointer-events: none;
}

/* 16.3  Site title — gold gradient + emboss */
.site-title a,
.site-title a:visited {
    background: var(--twb-grad-gold) !important;
    -webkit-background-clip: text !important;
            background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    font-weight: 700 !important;
    letter-spacing: .04em !important;
    text-shadow: none !important;
}

/* 16.4  Top announcement / header top bar — gold gradient strip */
.announcement-bar,
.site-header .custom-html-widget,
.twbuystore-announcement {
    background: var(--twb-grad-gold-flat) !important;
    color: var(--twb-ink) !important;
    font-weight: 800 !important;
    letter-spacing: .08em !important;
    text-shadow: 0 1px 0 rgba(255,255,255,.35) !important;
    box-shadow: 0 2px 14px rgba(217,177,74,.40) !important;
    border-bottom: 1px solid rgba(0,0,0,.35) !important;
}

/* 16.5  Page header / page-title — gold under-bar */
.page-header,
.woocommerce-products-header,
.tax-product_cat .page-title,
.woocommerce-products-header__title {
    position: relative !important;
    padding-bottom: 1rem !important;
}
.page-header::after,
.woocommerce-products-header::after,
.tax-product_cat .page-title::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0; left: 50% !important;
    transform: translateX(-50%) !important;
    width: 120px !important;
    height: 2px !important;
    background: linear-gradient(90deg, transparent, var(--twb-gold-hi), var(--twb-gold), var(--twb-gold-low), transparent) !important;
}

/* 16.6  H1 / H2 / product_title — gold gradient text */
h1, h2, h3,
.product_title,
.woocommerce-products-header__title,
.entry-title {
    background: var(--twb-grad-gold) !important;
    background-size: 200% 100% !important;
    -webkit-background-clip: text !important;
            background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    text-shadow: none !important;
    animation: twb-gold-text-shine 8s linear infinite !important;
}
.widget-title,
.wc-block-product-search__label,
.woocommerce-widget-areas .widgettitle {
    color: var(--twb-gold-hi) !important;
    -webkit-text-fill-color: var(--twb-gold-hi) !important;
    background: none !important;
    animation: none !important;
    border-bottom: 1px solid rgba(217,177,74,.30) !important;
    padding-bottom: .5rem !important;
    letter-spacing: .1em !important;
    text-transform: uppercase !important;
}

/* 16.7  Primary button — premium gold with shine sweep */
.button,
button:not(.twb-passthrough),
input[type="submit"],
.woocommerce-Button,
.add_to_cart_button,
.single_add_to_cart_button,
.checkout-button {
    position: relative !important;
    overflow: hidden !important;
    background: var(--twb-grad-gold-flat) !important;
    color: var(--twb-ink) !important;
    border: 1px solid var(--twb-gold) !important;
    font-weight: 700 !important;
    text-shadow: 0 1px 0 rgba(255,255,255,.30) !important;
    box-shadow:
        0 0 0 1px rgba(255,243,194,.40) inset,
        0 6px 18px rgba(217,177,74,.30),
        0 0 18px rgba(217,177,74,.15) !important;
    animation: twb-pulse-gold 3.5s ease-in-out infinite !important;
}
.button::before,
button:not(.twb-passthrough)::before,
input[type="submit"]::before,
.woocommerce-Button::before,
.add_to_cart_button::before,
.single_add_to_cart_button::before {
    content: '' !important;
    position: absolute !important;
    top: 0; left: 0 !important;
    width: 60% !important;
    height: 100% !important;
    background: var(--twb-grad-shine) !important;
    transform: translateX(-150%) skewX(-20deg) !important;
    transition: transform .7s ease !important;
    pointer-events: none !important;
}
.button:hover,
.add_to_cart_button:hover,
.single_add_to_cart_button:hover {
    transform: translateY(-2px) !important;
}
.button:hover::before,
.add_to_cart_button:hover::before,
.single_add_to_cart_button:hover::before {
    transform: translateX(220%) skewX(-20deg) !important;
}

/* 16.8  Product cards — gold frame on hover */
ul.products li.product,
.wc-block-grid__product {
    position: relative !important;
    background: rgba(6,21,19,.55) !important;
    border: 1px solid rgba(217,177,74,.18) !important;
    box-shadow: 0 4px 18px rgba(0,0,0,.35) !important;
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease !important;
}
ul.products li.product::before,
.wc-block-grid__product::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    padding: 1px !important;
    background: linear-gradient(135deg, transparent 30%, rgba(217,177,74,.55) 50%, transparent 70%) !important;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
    -webkit-mask-composite: xor !important;
            mask-composite: exclude !important;
    pointer-events: none !important;
    opacity: 0 !important;
    transition: opacity .35s ease !important;
    z-index: 1 !important;
}
ul.products li.product:hover,
.wc-block-grid__product:hover {
    transform: translateY(-6px) !important;
    border-color: rgba(217,177,74,.55) !important;
    box-shadow: 0 0 30px rgba(217,177,74,.22), 0 18px 45px rgba(0,0,0,.55) !important;
}
ul.products li.product:hover::before,
.wc-block-grid__product:hover::before {
    opacity: 1 !important;
}

/* 16.9  Add-to-cart icon — gold pulse on hover */
ul.products li.product .add_to_cart_button::after,
.wc-block-grid__product .add_to_cart_button::after {
    content: '✦' !important;
    margin-left: .5em !important;
    color: rgba(0,0,0,.55) !important;
    font-size: .9em !important;
}

/* 16.10  Product image — gold corner brackets on hover */
.woocommerce-product-gallery__image,
ul.products li.product a.woocommerce-LoopProduct-link img {
    position: relative !important;
}
.woocommerce-product-gallery__image {
    border: 1px solid rgba(217,177,74,.40) !important;
    box-shadow: 0 0 22px rgba(217,177,74,.12) !important;
    padding: 6px !important;
    background: var(--bg-primary) !important;
}

/* 16.11  Sale / 台灣製 badge — gold-pill instead of plain coral */
span.onsale,
.product-badge-mit,
.product-badge-design,
.product-badge-quality {
    background: var(--twb-grad-gold-flat) !important;
    color: var(--twb-ink) !important;
    border: 1px solid var(--twb-gold) !important;
    text-shadow: 0 1px 0 rgba(255,255,255,.30) !important;
    box-shadow: 0 4px 14px rgba(217,177,74,.35) !important;
    position: relative !important;
    overflow: hidden !important;
}
span.onsale::before,
.product-badge-mit::before,
.product-badge-design::before,
.product-badge-quality::before {
    content: '' !important;
    position: absolute !important;
    top: 0; left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: var(--twb-grad-shine) !important;
    transform: translateX(-120%) skewX(-20deg) !important;
    animation: twb-shine-sweep 4s ease-in-out infinite !important;
    pointer-events: none !important;
    mix-blend-mode: overlay !important;
}

/* 16.12  Price — gold embossed */
.price,
.amount {
    color: var(--twb-gold-hi) !important;
    text-shadow: 0 0 12px rgba(217,177,74,.30) !important;
    font-weight: 700 !important;
    letter-spacing: .02em !important;
}
del .amount {
    color: #6c6c6c !important;
    text-shadow: none !important;
}
ins .amount {
    color: var(--twb-gold) !important;
    text-shadow: 0 0 12px rgba(217,177,74,.40) !important;
}

/* 16.13  Cart / Checkout tables — gold header row */
.shop_table thead th,
.woocommerce-checkout-review-order-table thead th,
.cart_totals table th,
.order_details thead th {
    background: linear-gradient(90deg, rgba(217,177,74,.12), rgba(217,177,74,.22), rgba(217,177,74,.12)) !important;
    color: var(--twb-gold-hi) !important;
    text-transform: uppercase !important;
    letter-spacing: .08em !important;
    font-size: .78rem !important;
    border-bottom: 1px solid rgba(217,177,74,.45) !important;
    text-shadow: 0 1px 0 rgba(0,0,0,.40) !important;
}
.shop_table tbody tr,
.cart_totals tr {
    transition: background .25s ease !important;
}
.shop_table tbody tr:hover {
    background: linear-gradient(90deg, transparent, rgba(217,177,74,.06), transparent) !important;
}
.shop_table td,
.cart_totals td {
    border-bottom: 1px solid rgba(217,177,74,.10) !important;
}

/* 16.14  Form inputs — gold focus ring */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus {
    border-color: var(--twb-gold) !important;
    box-shadow: 0 0 0 3px rgba(217,177,74,.20) !important;
    background-color: rgba(217,177,74,.04) !important;
    outline: none !important;
}

/* 16.15  Account / My Account dashboard — premium card */
.woocommerce-MyAccount-navigation,
.woocommerce-MyAccount-content,
.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-info,
.woocommerce-error {
    background: var(--bg-secondary) !important;
    border: 1px solid rgba(217,177,74,.30) !important;
    box-shadow: 0 0 0 1px rgba(255,243,194,.05) inset, 0 8px 24px rgba(0,0,0,.40) !important;
}
.woocommerce-MyAccount-navigation li a {
    color: var(--twb-gold-hi) !important;
    border-left: 2px solid transparent !important;
    transition: all .25s ease !important;
}
.woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-MyAccount-navigation li a:hover {
    color: var(--twb-gold) !important;
    border-left-color: var(--twb-gold) !important;
    background: rgba(217,177,74,.08) !important;
}

/* 16.16  Brand story (twb-brand-story) — premium gold ribbon */
.twb-brand-story {
    position: relative !important;
    background:
        linear-gradient(135deg, rgba(217,177,74,.06) 0%, transparent 60%),
        var(--bg-secondary) !important;
    border: 1px solid rgba(217,177,74,.35) !important;
    border-left: 3px solid var(--twb-gold) !important;
    color: #f3f4f6 !important;
    box-shadow: 0 0 0 1px rgba(255,243,194,.05) inset, 0 12px 30px rgba(0,0,0,.40) !important;
}
.twb-brand-story::before {
    content: '✦ MAISON · 品牌傳承' !important;
    display: block !important;
    color: var(--twb-gold) !important;
    letter-spacing: .25em !important;
    font-size: .68rem !important;
    text-transform: uppercase !important;
    margin-bottom: .5rem !important;
    text-shadow: 0 0 10px rgba(217,177,74,.40) !important;
}

/* 16.17  WooCommerce notice banner — gold accent */
.woocommerce-message,
.woocommerce-info {
    border-top: 2px solid var(--twb-gold) !important;
    border-right: 2px solid var(--twb-gold) !important;
    border-bottom: 2px solid var(--twb-gold) !important;
    color: var(--twb-gold-hi) !important;
}
.woocommerce-message::before,
.woocommerce-info::before {
    color: var(--twb-gold) !important;
}

/* 16.18  Stars rating — gold */
.woocommerce-product-rating .star-rating,
.star-rating {
    color: var(--twb-gold) !important;
    text-shadow: 0 0 8px rgba(217,177,74,.40) !important;
}

/* 16.19  Footer — gold top border */
.site-footer,
.ast-small-footer {
    border-top: 1px solid rgba(217,177,74,.35) !important;
    background: linear-gradient(180deg, var(--bg-primary) 0%, #050302 100%) !important;
}
.site-footer::before,
.ast-small-footer::before {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    top: -1px; left: 0; right: 0 !important;
    height: 1px !important;
    background: linear-gradient(90deg, transparent, var(--twb-gold-hi), var(--twb-gold), var(--twb-gold-low), transparent) !important;
}
.site-footer a,
.ast-small-footer a {
    color: var(--twb-gold-hi) !important;
}
.site-footer a:hover,
.ast-small-footer a:hover {
    color: var(--twb-gold) !important;
    text-shadow: 0 0 8px rgba(217,177,74,.50) !important;
}

/* 16.20  Scrollbar — gold track */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #050302; }
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--twb-gold-hi), var(--twb-gold), var(--twb-gold-low));
    border-radius: 5px;
    border: 1px solid rgba(0,0,0,.40);
}
::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, var(--twb-gold), var(--twb-gold-low));
    box-shadow: 0 0 8px rgba(217,177,74,.40);
}
* { scrollbar-color: var(--twb-gold) #050302; scrollbar-width: thin; }

/* 16.21  Reduced motion respect */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}