/* ==========================================================================
   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;
}