/*
Theme Name: The 12th Masterpiece - Midnight Noir
Description: Dark/Light Mode + Seamless JPEG Blending + 3D Showroom
Version: 9.0.0
*/


/* ==========================================================================
   Design Tokens — Midnight Noir
   True black base for maximum gold contrast. Surfaces stay deep navy
   so the gold accents (#D4AF37) hit with cinematic weight.
   ========================================================================== */

:root {
    --bg-color:          #000000;          /* True black — Massar foundation */
    --surface-color:     #0B121D;          /* Deep navy — cards, containers  */
    --text-main:         #ffffff;
    --text-dim:          #666666;
    --accent-color:      #D4AF37;          /* Deep Gold                       */
    --accent-dark:       #B8860B;          /* Muted gold for light mode       */
    --accent-glow:       rgba(212, 175, 55, 0.15);
    --transition-premium: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    --spacing-section:   240px;            /* Massar 'Black Space' rhythm      */
    --spacing-hero-top:  200px;            /* Clearance above hero title       */
}

[data-theme="light"] {
    --bg-color:      #ffffff;
    --surface-color: #f8f9fa;
    --text-main:     #000000;
    --text-dim:      #666666;
    --accent-color:  #B8860B;
    --accent-glow:   rgba(184, 134, 11, 0.10);
}

/* ==========================================================================
   WooCommerce Variable Override
   woocommerce.css injects --wc-content-bg: #fff and --wc-secondary: #e9e6ed
   at :root level. Any WooCommerce-generated element (tabs, breadcrumbs,
   related products) that uses those variables will bleed white onto our
   black canvas. Override them here so they inherit our dark surface.
   ========================================================================== */

:root {
    --wc-content-bg:     #0B121D !important;
    --wc-secondary:      #0B121D !important;
    --wc-secondary-text: #888888 !important;
    --wc-subtext:        #666666 !important;
}

/* ==========================================================================
   Base
   ========================================================================== */

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

/* ==========================================================================
   True Black — High-Specificity Override
   Uses html body + WooCommerce body-class variants to guarantee #000000
   wins over any plugin or WooCommerce stylesheet loaded after ours.
   ========================================================================== */

html body,
html body.woocommerce,
html body.woocommerce-page,
html body.single-product,
html body #page-wrapper,
html body div.woocommerce,
html body .woocommerce {
    background-color: #000000 !important;
    background:       #000000 !important;
}

body {
    background:             var(--bg-color);
    color:                  var(--text-main);
    margin:                 0;
    padding:                0;
    overflow-x:             hidden;
    font-family:            'Inter', sans-serif;
    font-weight:            300;
    line-height:            1.6;
    -webkit-font-smoothing: antialiased;
    transition:             background-color 1s ease, color 1s ease;
}

/* WooCommerce product page — prevent any column or div from going white */
.woocommerce div.product,
.woocommerce #content div.product,
.woocommerce-page div.product {
    background: transparent !important;
}

/* Product summary and tab panels — most visible white-bleed zones */
.woocommerce-tabs ul.tabs,
.woocommerce-tabs .panel,
.woocommerce-product-details__short-description,
.woocommerce div.product .woocommerce-tabs {
    background:   transparent !important;
    border-color: rgba(212, 175, 55, 0.10) !important;
}

/* WooCommerce tab buttons — WC sets li.active a { background-color: #fff } */
.woocommerce-tabs ul.tabs li a,
.woocommerce-tabs ul.tabs li.active a,
.woocommerce-tabs ul.tabs li:hover a {
    background:   #0B121D !important;
    color:        #ffffff !important;
    border-color: rgba(212, 175, 55, 0.12) !important;
}

.woocommerce-tabs ul.tabs li.active a {
    color:         var(--accent-color) !important;
    border-bottom: 1px solid #0B121D !important;
}

/* Gallery — Restored for Massar Elite 2-column layout.
   Visibility is controlled by the nuclear CSS in functions.php. */
.woocommerce-product-gallery,
.woocommerce div.product .woocommerce-product-gallery {
    display: block;
    opacity: 1;
    visibility: visible;
}

/* Product meta (SKU, categories) — keep text on dark bg */
.woocommerce div.product .product_meta,
.woocommerce div.product .product_meta a,
.woocommerce div.product .product_meta span {
    color: var(--text-dim) !important;
}

/* Related products section */
.related.products,
.upsells.products {
    background: transparent !important;
}

/* ==========================================================================
   The Noir Enforcer — WooCommerce Sub-Pages
   WooCommerce's legacy stylesheet hardcodes background colors directly on
   specific elements, bypassing our CSS variable overrides. These rules use
   high-specificity selectors to enforce True Black (#000) and Deep Navy
   (#0B121D) everywhere the brand appears.
   Covers: Cart, Checkout, Account, Order Confirmation, all form inputs.
   ========================================================================== */

/* ── Cart ─────────────────────────────────────────────────────────────────── */

body.woocommerce-cart .woocommerce,
body.woocommerce-cart table.cart,
body.woocommerce-cart table.cart td,
body.woocommerce-cart table.cart th,
body.woocommerce-cart .cart-collaterals,
body.woocommerce-cart .cart_totals,
body.woocommerce-cart .cross-sells,
body.woocommerce-cart .shipping-calculator-form {
    background:       transparent !important;
    background-color: transparent !important;
}

body.woocommerce-cart table.cart tr,
body.woocommerce-cart table.cart td {
    border-color: rgba(212, 175, 55, 0.08) !important;
    color:        var(--text-main) !important;
}

/* ── Checkout ─────────────────────────────────────────────────────────────── */

body.woocommerce-checkout .woocommerce,
body.woocommerce-checkout #customer_details,
body.woocommerce-checkout #order_review_heading,
body.woocommerce-checkout .woocommerce-billing-fields,
body.woocommerce-checkout .woocommerce-shipping-fields,
body.woocommerce-checkout .woocommerce-additional-fields {
    background:       transparent !important;
    background-color: transparent !important;
}

/* Payment box — WC hardcodes #e2e2e2 / #f5f5f5 here */
body.woocommerce-checkout #payment,
.woocommerce-checkout #payment,
.woocommerce #payment {
    background:       #0B121D !important;
    background-color: #0B121D !important;
    border-color:     rgba(212, 175, 55, 0.12) !important;
    border-radius:    6px !important;
}

.woocommerce-checkout #payment ul.payment_methods,
.woocommerce #payment ul.payment_methods {
    border-color: rgba(212, 175, 55, 0.08) !important;
}

.woocommerce-checkout #payment label,
.woocommerce #payment label,
.woocommerce-checkout #payment .payment_box {
    color:      var(--text-dim) !important;
    background: #0B121D !important;
}

/* ── My Account ───────────────────────────────────────────────────────────── */

body.woocommerce-account .woocommerce,
body.woocommerce-account .entry-content,
body.woocommerce-account .woocommerce-MyAccount-content {
    background:       transparent !important;
    background-color: transparent !important;
}

body.woocommerce-account .woocommerce-MyAccount-navigation ul {
    background:   #0B121D !important;
    border-color: rgba(212, 175, 55, 0.08) !important;
    border-radius: 4px !important;
}

body.woocommerce-account .woocommerce-MyAccount-navigation li a {
    color: var(--text-dim) !important;
}

body.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
body.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
    color: var(--accent-color) !important;
}

/* ── Order Confirmation / Pay ─────────────────────────────────────────────── */

body.woocommerce-order-pay .woocommerce,
body.woocommerce-order-received .woocommerce,
body.woocommerce-order-received .woocommerce-order {
    background:       transparent !important;
    background-color: transparent !important;
}

/* ── Global Form Inputs (all WC pages) ────────────────────────────────────── */

.woocommerce input[type="text"],
.woocommerce input[type="email"],
.woocommerce input[type="tel"],
.woocommerce input[type="number"],
.woocommerce input[type="password"],
.woocommerce input[type="search"],
.woocommerce textarea,
.woocommerce select,
.woocommerce-page input[type="text"],
.woocommerce-page input[type="email"],
.woocommerce-page input[type="tel"],
.woocommerce-page input[type="number"],
.woocommerce-page input[type="password"],
.woocommerce-page input[type="search"],
.woocommerce-page textarea,
.woocommerce-page select {
    background-color: #0A0A0A !important;
    color:            #ffffff !important;
    border:           1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius:    3px !important;
}

.woocommerce input[type="text"]:focus,
.woocommerce input[type="email"]:focus,
.woocommerce input[type="tel"]:focus,
.woocommerce input[type="number"]:focus,
.woocommerce input[type="password"]:focus,
.woocommerce textarea:focus,
.woocommerce select:focus,
.woocommerce-page input[type="text"]:focus,
.woocommerce-page input[type="email"]:focus,
.woocommerce-page input[type="tel"]:focus,
.woocommerce-page input[type="number"]:focus,
.woocommerce-page input[type="password"]:focus,
.woocommerce-page textarea:focus,
.woocommerce-page select:focus {
    border-color: #D4AF37 !important;
    outline:      none !important;
    box-shadow:   0 0 0 1px rgba(212, 175, 55, 0.2) !important;
}

.woocommerce input::placeholder,
.woocommerce-page input::placeholder,
.woocommerce textarea::placeholder,
.woocommerce-page textarea::placeholder {
    color: rgba(255, 255, 255, 0.2) !important;
}

/* ── WC Notices ───────────────────────────────────────────────────────────── */

.woocommerce-message,
.woocommerce-info {
    background:     #0B121D !important;
    border-top-color: var(--accent-color) !important;
    color:          var(--text-dim) !important;
}

.woocommerce-error {
    background:       #0B121D !important;
    border-top-color: #d63638 !important;
    color:            var(--text-dim) !important;
}

/* Light mode — restore white surfaces */
body[data-theme="light"],
html body[data-theme="light"],
html body.woocommerce[data-theme="light"],
html body.woocommerce-page[data-theme="light"] {
    background-color: #ffffff !important;
    background:       #ffffff !important;
}

body[data-theme="light"] .woocommerce-tabs .panel,
body[data-theme="light"] .woocommerce-product-details__short-description {
    background: var(--surface-color) !important;
    color:      var(--text-dim) !important;
}

body.is-locked-splash { overflow: hidden; }

/* Headings — tight tracking for Massar editorial weight */
h1, h2, h3, h4, h5, h6 {
    font-family:    'Playfair Display', serif;
    text-transform: uppercase;
    line-height:    0.85;
    margin:         0;
    font-weight:    700;
    letter-spacing: -0.05em;
}

/* Body copy and descriptions — thin weight creates contrast with bold headings */
p,
.woocommerce-product-details__short-description,
.product-description,
.entry-summary p {
    font-weight: 400;
    font-size:   1rem;
    color:       var(--text-dim);
    line-height: 1.75;
}

/* ==========================================================================
   Logo — Massar Finish (Blend Mode System)
   screen   → dark mode  : dark logo JPEG square disappears into black bg
   multiply → light mode : white logo JPEG square disappears into white bg
   ========================================================================== */

.logo-dark-variant {
    mix-blend-mode: screen;
    filter:         contrast(1.2);
}

.logo-light-variant {
    mix-blend-mode: multiply;
}

/* Smart dual-logo visibility — only the correct variant is shown per theme */
body[data-theme="light"] .logo-dark-variant {
    opacity:    0 !important;
    visibility: hidden !important;
}

body:not([data-theme="light"]) .logo-light-variant {
    opacity:    0 !important;
    visibility: hidden !important;
}

/* ==========================================================================
   Header — Fixed Architecture
   position: fixed + flex row. Logo lives in normal flex flow (position:
   relative) so it participates in align-items: center and stays at the
   correct visual height on every page without any absolute offset tricks.

   GSAP handoff: the splash logo animates to top:"20px" left:"40px"
   width:"60px" in front-page.php — matching this header's padding (20px)
   and the logo's max-height (60px). The header logo fades in at the same
   viewport position, making the transition seamless.
   ========================================================================== */

#site-header {
    position:        fixed;
    top:             0;
    left:            0;
    right:           0;
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         20px 40px;
    background:      transparent;
    z-index:         9999 !important;
    transition:      background-color 0.5s ease;
    pointer-events:  none;
}

#site-header > * {
    pointer-events: auto;
}

#site-header.is-scrolled {
    background-color: #000000;
}

/* site-title is an h1 — zero out its default heading metrics */
#site-header .site-title {
    margin:      0;
    line-height: 1;
    font-size:   0; /* prevents phantom line-height gap around the logo image */
}

#site-header .site-title a {
    display:     block;
    line-height: 0;
}

/* Theme toggle — flex child on the right */
#theme-toggle {
    cursor:         pointer;
    color:          var(--accent-color);
    font-family:    'Inter', sans-serif;
    font-size:      0.8rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    transition:     opacity 0.3s;
    white-space:    nowrap;
}

#theme-toggle:hover {
    opacity: 0.6;
}

/* Logo — in flex flow, no absolute positioning */
.header-logo-image {
    position:   relative !important;
    top:        auto !important;
    left:       auto !important;
    display:    block;
    max-height: 60px;
    width:      auto;
    transition: opacity 0.5s ease;
}

/* ==========================================================================
   Content Safe Zone
   100px = 20px top padding + 60px logo + 20px bottom padding.
   Ensures no WooCommerce element renders under the fixed header.
   Front page exempt: GSAP + .unified-vibe-block padding-top handles it.
   ========================================================================== */

#content {
    padding-top: 100px;
}

body.is-locked-splash #content {
    padding-top: 0;
}

/* ==========================================================================
   Hero Section — Massar Black Space
   var(--spacing-hero-top) pushes the title below the logo.
   Extra bottom padding keeps breathing room before the vibe strip.
   ========================================================================== */

.unified-vibe-block,
.editorial-hero-v2 {
    background:  transparent;
    padding-top: var(--spacing-hero-top);
    padding-bottom: 160px;
}

.hero-caption {
    position:      relative;
    z-index:       2;
    padding:       0 5vw;
    margin-bottom: 80px;
}

.hero-main-title {
    font-size:      clamp(3.5rem, 11vw, 7rem);
    letter-spacing: -0.05em;
    line-height:    0.82;
}

/* Gold accent tag — wide spacing for stamp-like authority */
.hero-tag {
    color:          var(--accent-color);
    letter-spacing: 0.25em;
    font-family:    'Inter', sans-serif;
    font-weight:    600;
    font-size:      0.75rem;
    text-transform: uppercase;
    margin-top:     28px;
}

.hero-video-full {
    width:        100%;
    height:       100%;
    object-fit:   cover;
    position:     absolute;
    top:          0;
    left:         0;
    z-index:      -1;
    filter:       brightness(0.35);
}

/* ==========================================================================
   Vibe Strip (Video Carousel)
   ========================================================================== */

.vibe-container-v2 { padding: 0; }

.vibe-label {
    text-align:     center;
    letter-spacing: 0.25em;
    font-size:      0.65rem;
    color:          var(--text-dim);
    margin-bottom:  60px;
    text-transform: uppercase;
    font-weight:    600;
}

.vibe-wrapper-inner {
    display:       flex;
    gap:           12px;
    width:         100vw;
    padding:       0 5vw;
    box-sizing:    border-box;
}

.vibe-slide {
    flex:          1;
    aspect-ratio:  9/16;
    background:    var(--surface-color);
    overflow:      hidden;
    position:      relative;
    transition:    flex 0.8s cubic-bezier(0.16, 1, 0.3, 1), filter 0.8s;
    filter:        grayscale(1) brightness(0.5);
}

.vibe-slide:hover {
    flex:   1.5;
    filter: grayscale(0) brightness(1);
}

.vibe-slide video {
    width:       100%;
    height:      100%;
    object-fit:  cover;
}

/* ==========================================================================
   Product Sections — Editorial Grid
   Massar spacing: generous padding, wide gutters, maximum breathing room.
   ========================================================================== */

.editorial-cat-block {
    padding:    12vw 5vw;
    border-top: 1px solid var(--accent-glow);
}

.cat-header-v2 {
    display:         flex;
    justify-content: space-between;
    align-items:     flex-end;
    margin-bottom:   140px;
}

.cat-title-v2 {
    font-size:      clamp(3rem, 8vw, 6.5rem);
    letter-spacing: -0.05em;
}

/* Gold pill label with wide stamp spacing */
.cat-explore {
    color:          var(--accent-color);
    text-decoration: none;
    font-weight:    600;
    font-size:      0.72rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    border-bottom:  1px solid var(--accent-color);
    padding-bottom: 10px;
    transition:     opacity 0.3s ease;
}

.cat-explore:hover {
    opacity: 0.7;
}

/* Product grid — breathable Massar gap */
.editorial-product-grid-v2 {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap:                   80px 40px;
}

/* Legacy product card (non-3D fallback) */
.product-card-v2 {
    text-decoration: none;
    color:           inherit;
    display:         block;
}

.product-img-v2 {
    aspect-ratio:  3/4;
    background:    var(--surface-color);
    border:        1px solid transparent;
    overflow:      hidden;
    position:      relative;
    margin-bottom: 30px;
    transition:    var(--transition-premium);
}

.product-img-v2 img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.product-card-v2:hover .product-img-v2 {
    border-color: var(--accent-color);
    box-shadow:   0 10px 30px var(--accent-glow);
}

.product-card-v2:hover .product-img-v2 img {
    transform: scale(1.05);
}

.price-v2 {
    color:       var(--accent-color);
    font-family: 'Playfair Display', serif;
    font-size:   1.2rem;
}

/* ==========================================================================
   Reveal-on-Scroll
   ========================================================================== */

.reveal-on-scroll {
    opacity:    0;
    transform:  translateY(60px);
    transition: var(--transition-premium);
}

.reveal-on-scroll.is-visible {
    opacity:   1;
    transform: translateY(0);
}

/* ==========================================================================
   3D Container — base shadow (refined by 3d-showroom.css)
   ========================================================================== */

.premium-3d-container {
    box-shadow: 0 16px 60px rgba(0, 0, 0, 0.7);
}

[data-theme="light"] .premium-3d-container {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}


/* Final Polish for Massar Elite */
.woocommerce-cart .woocommerce-cart-form, 
.woocommerce-cart .cart-collaterals,
.woocommerce-cart .shop_table,
.woocommerce-cart .cart_totals {
    animation: fadeInLuxury 1.2s ease-out;
}

@keyframes fadeInLuxury {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Fix for potential white background bleed */
#primary, #main, .site-content, article {
    background-color: #000000 !important;
}

/* ==========================================================================
   PREMIUM GOLD LOOP BUTTONS — Global WooCommerce product grids
   Targets shop pages, front page, archives — anywhere ul.products renders.
   ========================================================================== */

/* 1. Title and price alignment */
ul.products li.product .woocommerce-loop-product__title {
    text-align: center !important;
    margin-bottom: 10px !important;
}
ul.products li.product .price {
    text-align: center !important;
    display: block !important;
    margin-bottom: 15px !important;
    color: #D4AF37 !important;
}

/* 2. Transform the default link into a Premium Gold Button */
ul.products li.product a.button {
    display: block !important;
    width: 100% !important;
    max-width: 250px !important;
    margin: 0 auto !important;
    background: #D4AF37 !important;
    color: #000 !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    padding: 12px 10px !important;
    border-radius: 0 !important;
    text-align: center !important;
    transition: all 0.3s ease !important;
    line-height: 1 !important;
}

/* 3. Hover */
ul.products li.product a.button:hover {
    background: #fff !important;
    color: #000 !important;
}

/* ==========================================================================
   FINAL PIVOT: STYLE THE NATIVE RIGHT-COLUMN BLOCK (PURE CSS)
   ========================================================================== */

/* 1. Reset the wrapper so it fits perfectly in the right sidebar */
body.single-product .woocommerce div.product .summary .the12th-collection-section {
    width: 100% !important;
    margin-top: 30px !important;
    padding: 0 !important;
    clear: none !important; 
    display: block !important;
}


/* 2. Kill the horizontal scroll / Netflix style */
body.single-product .the12th-carousel-viewport {
    overflow: hidden !important;
    padding: 0 !important;
}

/* 3. Force Vertical Stack */
body.single-product .the12th-carousel-track {
    display: flex !important;
    flex-direction: column !important;
    gap: 15px !important;
    width: 100% !important;
}

/* 4. Premium Mini-Card Styling (Image Left, Text Right) */
body.single-product .the12th-coll-card {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 15px !important;
    width: 100% !important;
    border-bottom: 1px solid rgba(212, 175, 55, 0.1) !important;
    padding-bottom: 15px !important;
}

/* 5. Image Sizing */
body.single-product .the12th-coll-card__img-wrap {
    width: 70px !important;
    height: 70px !important;
    max-width: 70px !important;
    flex-shrink: 0 !important;
    margin-bottom: 0 !important;
    aspect-ratio: auto !important;
}

/* 6. Typography */
body.single-product .the12th-coll-card__title {
    font-size: 0.8rem !important;
    margin: 0 0 4px 0 !important;
}
body.single-product .the12th-coll-card__price {
    font-size: 0.8rem !important;
}
body.single-product .the12th-coll-card__price del {
    font-size: 0.65rem !important;
}