/*
Theme Name: House of Salene
Theme URI: https://houseofsalene.com
Author: House of Salene
Description: 1950s Old Hollywood glamorous mansion. Luxury lingerie & fashion boutique theme with room-based navigation. WooCommerce ready. No page builder required.
Version: 12.3
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
WC tested up to: 9.0
License: Private
Text Domain: houseofsalene
*/

/* ============================================================
   CSS VARIABLES
============================================================ */
:root {
    --purple:        #2d1b4e;
    --purple-mid:    #3d2566;
    --purple-light:  #5a3a8a;
    --gold:          #c9a84c;
    --gold-light:    #e8c97a;
    --gold-dark:     #a07830;
    --cream:         #f9f5ee;
    --cream-dark:    #ede4d3;
    --charcoal:      #1a1a1a;
    --white:         #ffffff;

    /* Room accent colors */
    --boudoir:       #3d1a2e;
    --boudoir-mid:   #7a2a4a;
    --pool:          #0d3d4a;
    --pool-mid:      #1a6a7e;
    --garage:        #141414;
    --garage-mid:    #2a2a2a;
    --study:         #2a1a08;
    --study-mid:     #5a3a10;
    --dressing:      #1e1430;
    --dressing-mid:  #3a2a5a;
    --vanity:        #3a2010;
    --vanity-mid:    #5a3a1a;
    --cellar:        #0a0505;
    --cellar-mid:    #1a0a0a;
    --dungeon:       #080510;
    --dungeon-mid:   #0d0a14;

    --font-display:  'Cormorant Garamond', Georgia, serif;
    --font-body:     'Jost', 'Helvetica Neue', sans-serif;
    --transition:    all 0.3s ease;
    --shadow:        0 4px 24px rgba(45,27,78,0.15);
}

/* ============================================================
   RESET & BASE
============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 16px;
    line-height: 1.7;
    color: var(--charcoal);
    background: var(--cream);
    overflow-x: hidden;
}
/* ── Room Category Pages — override body cream background ──────────── */
body.tax-product_cat                 { background: #0d030a !important; }
body.tax-product_cat.term-lingerie   { background: #1a0714 !important; }
body.tax-product_cat.term-swimwear   { background: #040e12 !important; }
body.tax-product_cat.term-menswear   { background: #080808 !important; }
body.tax-product_cat.term-accessories{ background: #0c0700 !important; }
body.tax-product_cat.term-costumes   { background: #08040f !important; }
body.tax-product_cat.term-hosiery    { background: #0f0602 !important; }
body.tax-product_cat.term-leather    { background: #050101 !important; }
body.tax-product_cat.term-vinyl      { background: #020105 !important; }

a { color: inherit; text-decoration: none; transition: var(--transition); }
img { max-width: 100%; height: auto; display: block; }
ul { list-style: none; }

h1,h2,h3,h4,h5,h6 {
    font-family: var(--font-display);
    font-weight: 300;
    line-height: 1.15;
}

.eyebrow {
    display: block;
    font-family: var(--font-body);
    font-size: 0.6rem;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 0.6rem;
}

/* ============================================================
   BUTTONS
============================================================ */
.btn-primary {
    display: inline-block;
    background: var(--gold);
    color: var(--purple);
    padding: 0.75rem 2.2rem;
    font-family: var(--font-body);
    font-size: 0.6rem;
    font-weight: 400;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    transition: var(--transition);
    border: none;
    cursor: pointer;
}
.btn-primary:hover {
    background: var(--gold-dark);
    color: var(--cream);
}
.btn-outline {
    display: inline-block;
    border: 1px solid var(--gold);
    color: var(--gold);
    padding: 0.7rem 2rem;
    font-family: var(--font-body);
    font-size: 0.6rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    transition: var(--transition);
    cursor: pointer;
}
.btn-outline:hover {
    background: var(--gold);
    color: var(--purple);
}

/* ============================================================
   MARQUEE STRIP
============================================================ */
.hos-marquee {
    background: var(--purple);
    padding: 9px 0;
    overflow: hidden;
    position: relative;
    z-index: 200;
    border-bottom: 1px solid rgba(201,168,76,0.2);
}
.hos-marquee-track {
    display: flex;
    white-space: nowrap;
    animation: marqueeScroll 35s linear infinite;
}
.hos-marquee-track span {
    font-family: var(--font-body);
    font-size: 0.6rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--gold);
    padding: 0 3rem;
}
.hos-marquee-track span::before {
    content: '✦';
    margin-right: 3rem;
    color: var(--gold-light);
    opacity: 0.6;
}
@keyframes marqueeScroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ============================================================
   HEADER
============================================================ */
#hos-header {
    background: var(--purple);
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 1px solid rgba(201,168,76,0.15);
}
.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 2.5rem;
    height: 72px;
    max-width: 1400px;
    margin: 0 auto;
}
.nav-left, .nav-right {
    display: flex;
    align-items: center;
    gap: 2rem;
    flex: 1;
}
.nav-right { justify-content: flex-end; }
.header-nav a {
    font-size: 0.58rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(249,245,238,0.85);
    transition: color 0.2s;
}
.header-nav a:hover { color: var(--gold); }
.site-logo {
    text-align: center;
    flex-shrink: 0;
    padding: 0 2rem;
}
.site-logo a {
    font-family: var(--font-display);
    font-size: 1.65rem;
    font-weight: 300;
    color: var(--gold);
    letter-spacing: 0.08em;
    font-style: italic;
    line-height: 1;
    display: block;
}
.site-logo small {
    display: block;
    font-family: var(--font-body);
    font-size: 0.45rem;
    letter-spacing: 0.5em;
    color: rgba(249,245,238,0.5);
    text-transform: uppercase;
    margin-top: 3px;
    font-style: normal;
}
.nav-icon {
    font-size: 0.58rem;
    letter-spacing: 0.15em;
    color: rgba(249,245,238,0.85);
    text-transform: uppercase;
    cursor: pointer;
    transition: color 0.2s;
    position: relative;
}
.nav-icon:hover { color: var(--gold); }
.cart-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--gold);
    color: var(--purple);
    width: 16px;
    height: 16px;
    border-radius: 50%;
    font-size: 0.45rem;
    font-weight: 600;
    margin-left: 4px;
}

/* ============================================================
   HERO — PILLARS + CENTER
============================================================ */
.hos-hero {
    display: grid;
    grid-template-columns: 150px 1fr 150px;
    height: 600px;
    background: var(--purple);
    position: relative;
    overflow: hidden;
}

/* — Pillar Panel — */
.pillar-panel {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(45,27,78,0.9) 0%, rgba(30,18,55,1) 100%);
}
.pillar-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    width: 64px;
    position: relative;
}
.pillar-capital {
    width: 84px;
    height: 26px;
    margin-top: 36px;
    background: linear-gradient(180deg, var(--gold-light) 0%, var(--gold) 50%, var(--gold-dark) 100%);
    box-shadow: 0 6px 18px rgba(0,0,0,0.5);
    position: relative;
    flex-shrink: 0;
}
.pillar-capital::before {
    content: '';
    position: absolute;
    bottom: -9px;
    left: -10px;
    right: -10px;
    height: 9px;
    background: linear-gradient(180deg, var(--gold), var(--gold-dark));
}
.pillar-capital::after {
    content: '';
    position: absolute;
    top: -12px;
    left: -14px;
    right: -14px;
    height: 12px;
    background: linear-gradient(180deg, #f0e090, var(--gold-light));
    box-shadow: 0 -4px 10px rgba(0,0,0,0.3);
}
.pillar-shaft {
    width: 58px;
    flex: 1;
    background: linear-gradient(90deg,
        rgba(160,120,48,0.5) 0%,
        rgba(232,201,122,0.75) 18%,
        rgba(249,245,238,0.92) 38%,
        rgba(255,255,255,0.98) 50%,
        rgba(232,201,122,0.88) 62%,
        rgba(201,168,76,0.6) 82%,
        rgba(130,90,30,0.5) 100%
    );
    box-shadow: 4px 0 16px rgba(0,0,0,0.35), -4px 0 16px rgba(0,0,0,0.35);
    position: relative;
}
.pillar-shaft::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        90deg,
        transparent 0px,
        transparent 5px,
        rgba(0,0,0,0.06) 5px,
        rgba(0,0,0,0.06) 6px
    );
}
.pillar-base-wrap { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; }
.pillar-base-1 { width: 68px; height: 10px; background: linear-gradient(180deg, var(--gold), var(--gold-dark)); }
.pillar-base-2 { width: 80px; height: 20px; background: linear-gradient(180deg, var(--gold-light), var(--gold)); }
.pillar-base-3 { width: 92px; height: 10px; background: linear-gradient(180deg, var(--gold), #7a5a18); }

/* Promo card on pillar panel */
.pillar-promo {
    position: absolute;
    top: 50%;
    transform: translateY(-65%);
    z-index: 20;
    text-align: center;
    padding: 1.4rem 1rem;
    background: rgba(45,27,78,0.88);
    border: 1px solid rgba(201,168,76,0.35);
    width: 128px;
    backdrop-filter: blur(6px);
}
.pillar-promo .eyebrow { font-size: 0.42rem; margin-bottom: 0.5rem; }
.pillar-promo .promo-big {
    font-family: var(--font-display);
    font-size: 2.2rem;
    color: var(--gold);
    line-height: 1;
    display: block;
    font-style: italic;
}
.pillar-promo .promo-label {
    font-size: 0.42rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(249,245,238,0.75);
    margin-top: 0.3rem;
    display: block;
}
.pillar-promo .promo-cta {
    display: inline-block;
    margin-top: 1rem;
    font-size: 0.42rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--purple);
    background: var(--gold);
    padding: 6px 12px;
    transition: var(--transition);
}
.pillar-promo .promo-cta:hover { background: var(--gold-light); }

/* — Chandelier — */
.chandelier {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 30;
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
}
.chandelier-chain {
    width: 2px;
    height: 32px;
    background: linear-gradient(180deg, var(--gold), rgba(201,168,76,0.3));
}
.chandelier-body {
    width: 64px;
    height: 22px;
    background: radial-gradient(ellipse, #f5e090 0%, var(--gold-light) 40%, var(--gold) 70%, var(--gold-dark) 100%);
    border-radius: 50%;
    box-shadow: 0 0 24px rgba(201,168,76,0.7), 0 0 50px rgba(201,168,76,0.25);
    animation: chandelierGlow 3s ease-in-out infinite;
}
.chandelier-drops {
    display: flex;
    gap: 4px;
    margin-top: 3px;
}
.chandelier-drops span {
    width: 3px;
    background: linear-gradient(180deg, var(--gold), transparent);
    border-radius: 0 0 50% 50%;
}
.chandelier-drops span:nth-child(1) { height: 16px; }
.chandelier-drops span:nth-child(2) { height: 22px; }
.chandelier-drops span:nth-child(3) { height: 28px; }
.chandelier-drops span:nth-child(4) { height: 22px; }
.chandelier-drops span:nth-child(5) { height: 16px; }
@keyframes chandelierGlow {
    0%,100% { box-shadow: 0 0 24px rgba(201,168,76,0.7), 0 0 50px rgba(201,168,76,0.25); }
    50%      { box-shadow: 0 0 36px rgba(201,168,76,0.95), 0 0 80px rgba(201,168,76,0.4); }
}

/* — Hero Slides — */
.hero-center {
    position: relative;
    overflow: hidden;
}
.hero-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none; /* inactive slides not clickable */
    transition: opacity 1.4s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center top;
}
.hero-slide.active {
    opacity: 1;
    pointer-events: auto; /* only active slide is clickable */
}
.hero-slide-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(45,27,78,0.65) 0%, rgba(45,27,78,0.3) 100%);
}
.slide-content {
    position: relative;
    z-index: 5;
    text-align: center;
    padding: 2rem;
}
.slide-content .eyebrow {
    font-size: 0.58rem;
    letter-spacing: 0.4em;
    animation: slideUp 0.9s ease both;
}
.slide-content h1 {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 300;
    color: var(--cream);
    line-height: 1.05;
    font-style: italic;
    margin-bottom: 0.5rem;
    animation: slideUp 0.9s ease 0.15s both;
}
.slide-content p {
    font-size: 0.6rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: rgba(249,245,238,0.65);
    margin-bottom: 1.8rem;
    animation: slideUp 0.9s ease 0.3s both;
}
.slide-content .btn-primary {
    animation: slideUp 0.9s ease 0.45s both;
}
@keyframes slideUp {
    from { opacity:0; transform:translateY(24px); }
    to   { opacity:1; transform:translateY(0); }
}

/* Hero dots */
.hero-dots {
    position: absolute;
    bottom: 1.8rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.6rem;
    z-index: 20;
}
.hero-dots button {
    width: 28px;
    height: 2px;
    background: rgba(249,245,238,0.25);
    border: none;
    cursor: pointer;
    transition: background 0.3s;
    padding: 0;
}
.hero-dots button.active { background: var(--gold); }

/* ============================================================
   SECTION HEADER
============================================================ */
.section-head {
    text-align: center;
    padding: 3.5rem 2rem 2rem;
}
.section-head h2 {
    font-family: var(--font-display);
    font-size: clamp(1.8rem,3vw,2.6rem);
    font-weight: 300;
    color: var(--purple);
    font-style: italic;
}
.section-head.light h2 { color: var(--cream); }
.section-head.light .eyebrow { color: var(--gold); }
.section-divider {
    width: 60px;
    height: 1px;
    background: var(--gold);
    margin: 1rem auto 0;
    opacity: 0.5;
}

/* ============================================================
   PRODUCT GRID — NEW ARRIVALS / FEATURED
============================================================ */
.products-row {
    background: var(--cream);
    padding: 0 2rem 3.5rem;
}
.woo-product-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.2rem;
    max-width: 1200px;
    margin: 0 auto;
}
/* WooCommerce product card overrides */
.woo-product-grid .product,
.product-card {
    background: var(--white);
    border: 1px solid rgba(45,27,78,0.07);
    transition: transform 0.25s, box-shadow 0.25s;
    position: relative;
    overflow: hidden;
}
.woo-product-grid .product:hover,
.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 32px rgba(45,27,78,0.12);
}
.woo-product-grid .product img,
.product-card-img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    object-position: center top;
    display: block;
}
.woo-product-grid .woocommerce-loop-product__title,
.product-card-name {
    font-family: var(--font-body);
    font-size: 0.72rem;
    color: var(--purple);
    padding: 0.8rem 0.8rem 0.2rem;
    font-weight: 300;
    letter-spacing: 0.03em;
}
.woo-product-grid .price,
.product-card-price {
    font-family: var(--font-display);
    font-size: 1.15rem;
    color: var(--gold);
    padding: 0 0.8rem 0.8rem;
    display: block;
}
.woo-product-grid .button {
    display: block;
    width: calc(100% - 1.6rem);
    margin: 0 0.8rem 0.8rem;
    text-align: center;
    background: var(--purple);
    color: var(--cream);
    font-size: 0.55rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    padding: 0.6rem;
    transition: var(--transition);
    border: none;
    cursor: pointer;
}
.woo-product-grid .button:hover { background: var(--gold); color: var(--purple); }
.product-badge {
    position: absolute;
    top: 0.6rem;
    left: 0.6rem;
    background: var(--gold);
    color: var(--purple);
    font-size: 0.42rem;
    letter-spacing: 0.15em;
    padding: 3px 9px;
    text-transform: uppercase;
    font-family: var(--font-body);
    z-index: 2;
}
.product-badge.sale { background: #8a2020; color: var(--cream); }

/* ============================================================
   THE ROOMS
============================================================ */
.hos-rooms {
    background: var(--purple);
    padding-bottom: 4rem;
}

.floor-label {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem 2rem 0.6rem;
    font-size: 0.5rem;
    letter-spacing: 0.45em;
    text-transform: uppercase;
    color: rgba(201,168,76,0.45);
}
.floor-label::before, .floor-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(201,168,76,0.15);
}

.floor-divider {
    max-width: 900px;
    margin: 0 auto;
    border: none;
    border-top: 1px solid rgba(201,168,76,0.1);
    margin-top: 0.5rem;
}

.room-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    max-width: 900px;
    margin: 0 auto;
    gap: 0;
}

.room {
    position: relative;
    min-height: 260px;
    overflow: hidden;
    cursor: pointer;
    border: 1px solid rgba(201,168,76,0.08);
    transition: border-color 0.3s;
}
.room:hover { border-color: rgba(201,168,76,0.35); }
.room:hover .room-bg { transform: scale(1.06); }
.room:hover .room-overlay { opacity: 1; }
.room:hover .room-label h3 { color: var(--gold); }

.room-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform 0.7s ease;
}

/* Room scene gradients — replace with real WP featured images */
.room-boudoir   .room-bg { background: radial-gradient(ellipse at 30% 60%, #7a2a4a 0%, #3d1a2e 55%, #1a0a18 100%); }
.room-pool      .room-bg { background: radial-gradient(ellipse at 70% 40%, #1a6a7e 0%, #0d3d4a 55%, #051820 100%); }
.room-garage    .room-bg { background: radial-gradient(ellipse at 50% 70%, #2a2a2a 0%, #141414 55%, #080808 100%); }
.room-study     .room-bg { background: radial-gradient(ellipse at 40% 50%, #5a3a10 0%, #2a1a08 55%, #120c02 100%); }
.room-dressing  .room-bg { background: radial-gradient(ellipse at 60% 40%, #3a2a5a 0%, #1e1430 55%, #0e0818 100%); }
.room-vanity    .room-bg { background: radial-gradient(ellipse at 50% 30%, #5a3a1a 0%, #3a2010 55%, #1a0e06 100%); }
.room-cellar    .room-bg { background: radial-gradient(ellipse at 30% 70%, #2a0808 0%, #0a0505 55%, #050202 100%); }
.room-dungeon   .room-bg { background: radial-gradient(ellipse at 50% 80%, #0d0a14 0%, #080510 55%, #030205 100%); }

/* Grid line texture */
.room-wall {
    position: absolute;
    inset: 0;
    background-image:
        repeating-linear-gradient(0deg,  transparent, transparent 24px, rgba(255,255,255,0.025) 24px, rgba(255,255,255,0.025) 25px),
        repeating-linear-gradient(90deg, transparent, transparent 24px, rgba(255,255,255,0.025) 24px, rgba(255,255,255,0.025) 25px);
    pointer-events: none;
}

/* Product frames on wall */
.room-frames {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 0.5rem;
    padding: 1.2rem 1.4rem 0.5rem;
    position: relative;
    z-index: 2;
}
.room-frame {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}
.room-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.75;
}
.room-frame .frame-placeholder {
    font-family: var(--font-display);
    font-style: italic;
    color: rgba(255,255,255,0.15);
    font-size: 0.65rem;
}
.room-frame-badge {
    position: absolute;
    top: 3px;
    right: 3px;
    background: var(--gold);
    color: var(--purple);
    font-size: 0.35rem;
    letter-spacing: 0.1em;
    padding: 2px 5px;
    text-transform: uppercase;
    font-family: var(--font-body);
}

/* Enter overlay */
.room-overlay {
    position: absolute;
    inset: 0;
    background: rgba(45,27,78,0.65);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.35s;
    z-index: 10;
}
.enter-btn {
    font-size: 0.55rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--purple);
    background: var(--gold);
    padding: 0.65rem 1.6rem;
    transition: var(--transition);
}
.enter-btn:hover { background: var(--gold-light); }

/* Room label */
.room-label {
    position: relative;
    z-index: 3;
    padding: 0.5rem 1.4rem 1.2rem;
}
.room-icon { font-size: 1.3rem; margin-bottom: 0.15rem; }
.room-label h3 {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 300;
    color: var(--cream);
    font-style: italic;
    margin-bottom: 0.1rem;
    transition: color 0.3s;
}
.room-label p {
    font-size: 0.48rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(201,168,76,0.65);
}

/* ============================================================
   FOOTER
============================================================ */
#hos-footer {
    background: var(--charcoal);
    color: rgba(249,245,238,0.6);
    padding: 3rem 2rem 2rem;
}
.footer-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.footer-logo-col .footer-logo {
    font-family: var(--font-display);
    font-size: 1.6rem;
    color: var(--gold);
    font-style: italic;
    margin-bottom: 0.5rem;
}
.footer-logo-col p { font-size: 0.55rem; letter-spacing: 0.1em; line-height: 1.9; }
.footer-col h4 {
    font-size: 0.55rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 1rem;
    font-family: var(--font-body);
    font-weight: 400;
}
.footer-col ul li { margin-bottom: 0.5rem; }
.footer-col ul li a { font-size: 0.6rem; color: rgba(249,245,238,0.5); transition: color 0.2s; }
.footer-col ul li a:hover { color: var(--gold); }
.footer-bottom {
    text-align: center;
    padding-top: 1.5rem;
    font-size: 0.5rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(249,245,238,0.2);
    max-width: 1100px;
    margin: 0 auto;
}

/* ============================================================
   WOOCOMMERCE GLOBAL OVERRIDES
============================================================ */
.woocommerce-breadcrumb { display: none; }
.woocommerce .woocommerce-ordering select,
.woocommerce .woocommerce-ordering { font-family: var(--font-body); }
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button {
    background: var(--purple) !important;
    color: var(--cream) !important;
    font-family: var(--font-body) !important;
    font-size: 0.6rem !important;
    letter-spacing: 0.2em !important;
    text-transform: uppercase !important;
    border-radius: 0 !important;
    padding: 0.7rem 1.5rem !important;
    transition: var(--transition) !important;
}
.woocommerce a.button:hover, .woocommerce button.button:hover { background: var(--gold) !important; color: var(--purple) !important; }
.woocommerce span.onsale {
    background: var(--gold) !important;
    color: var(--purple) !important;
    font-family: var(--font-body) !important;
    border-radius: 0 !important;
    font-size: 0.55rem !important;
    letter-spacing: 0.1em !important;
}
.woocommerce .price { color: var(--gold) !important; font-family: var(--font-display) !important; }

/* ============================================================
   RESPONSIVE
============================================================ */
@media (max-width: 900px) {
    .hos-hero { grid-template-columns: 80px 1fr 80px; height: 480px; }
    .pillar-shaft { width: 40px; }
    .pillar-capital, .pillar-base-2 { width: 56px; }
    .pillar-promo { width: 74px; padding: 0.8rem 0.5rem; }
    .pillar-promo .promo-big { font-size: 1.4rem; }
    .woo-product-grid { grid-template-columns: repeat(2,1fr); }
    .footer-inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
    .hos-hero { grid-template-columns: 0 1fr 0; }
    .pillar-panel { display: none; }
    .room-grid { grid-template-columns: 1fr; }
    .header-inner { padding: 0 1rem; }
    .nav-left { display: none; }
    .woo-product-grid { grid-template-columns: 1fr 1fr; gap: 0.6rem; }
    .footer-inner { grid-template-columns: 1fr; }
}

/* ============================================================
   FULL WIDTH OVERRIDES — Force site to fill screen
============================================================ */
html, body { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; }

/* Kill any leftover theme wrappers */
#page, #content, .site, .site-content,
.content-area, .container, .wrapper,
#primary, #main, .main-content,
.blossom-container, .blossom-wrapper,
.elementor-section-boxed > .elementor-container {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    float: none !important;
}

/* Kill sidebar */
#secondary, .widget-area, .sidebar { display: none !important; }

/* Full width sections */
.hos-hero,
.hos-marquee,
.hos-rooms,
.products-row,
#hos-header,
#hos-footer { width: 100% !important; max-width: 100% !important; }

/* Inner content max-width for readability */
.woo-product-grid { max-width: 1400px; margin: 0 auto; }
.room-grid        { max-width: 1200px; }
.floor-label      { max-width: 1200px; }
.floor-divider    { max-width: 1200px; }

/* ============================================================
   IMAGE FIXES — No cut off, full model visible
============================================================ */
.product-card-img,
.woo-product-grid .product img {
    width: 100% !important;
    height: 280px !important;
    object-fit: cover !important;
    object-position: center 15% !important; /* Shows from shoulders down */
    display: block !important;
}

/* Room frame images */
.room-frame img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center 20% !important;
}

/* ============================================================
   ROOMS — Fix to always show 2 columns
============================================================ */
.room-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    width: 100% !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
}
.room { min-height: 280px !important; }

/* ============================================================
   HERO — Full width fix
============================================================ */
.hos-hero {
    width: 100% !important;
    grid-template-columns: 160px 1fr 160px !important;
}
.hero-center { width: 100% !important; }

/* ============================================================
   HEADER — Full width
============================================================ */
.header-inner {
    max-width: 100% !important;
    padding: 0 3rem !important;
}

/* ============================================================
   PRODUCT GRID — 4 columns full width
============================================================ */
.woo-product-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    padding: 0 2rem !important;
}

/* ============================================================
   HERO SLIDE — Background image support
============================================================ */
.hero-slide {
    background-size: cover !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
}
/* Fallback gradient colors when no image */
.hero-slide:nth-child(1) { background-color: #3d1a2e; }
.hero-slide:nth-child(2) { background-color: #0d3d4a; }
.hero-slide:nth-child(3) { background-color: #1a0a0a; }

/* Darker overlay so text is always readable over photos */
.hero-slide-overlay {
    background: linear-gradient(
        135deg,
        rgba(45,27,78,0.72) 0%,
        rgba(20,10,35,0.45) 60%,
        rgba(45,27,78,0.55) 100%
    ) !important;
}

/* Product image sizing - use larger WC size */
.product-card-img {
    height: 320px !important;
    object-fit: cover !important;
    object-position: center 10% !important;
}

/* ============================================================
   IMAGE POSITION FIX — show body not just head
============================================================ */
.product-card-img,
.woo-product-grid .product img {
    object-position: center 20% !important;
    height: 320px !important;
}
/* Room frame images — show full body */
.room-frame img {
    object-fit: cover !important;
    object-position: center 25% !important;
    width: 100% !important;
    height: 100% !important;
}

/* ============================================================
   FOOTER FIX — make sure it always shows
============================================================ */
#hos-footer {
    display: block !important;
    width: 100% !important;
    background: var(--charcoal) !important;
    padding: 3rem 2rem 2rem !important;
}
.footer-inner {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    gap: 2rem !important;
    padding-bottom: 2rem !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}

/* ============================================================
   NAV MENU — Force horizontal row
============================================================ */
.nav-left ul,
.nav-right ul {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 2rem !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
.nav-left ul li,
.nav-right ul li {
    display: inline-flex !important;
    margin: 0 !important;
    padding: 0 !important;
}
.nav-left ul li a,
.nav-right ul li a {
    font-size: 0.58rem !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
    color: rgba(249,245,238,0.85) !important;
    white-space: nowrap !important;
}
.nav-left ul li a:hover,
.nav-right ul li a:hover { color: var(--gold) !important; }

/* Hide any sub-menus */
.nav-left ul ul,
.nav-right ul ul { display: none !important; }

/* ============================================================
   WOOCOMMERCE PAGE LAYOUT — shop, category, product pages
============================================================ */
.hos-woo-wrap {
    max-width: 100% !important;
    width: 100% !important;
    background: var(--cream) !important;
    min-height: 60vh !important;
    padding: 0 !important;
}
.hos-woo-inner {
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding: 2rem !important;
}

/* Page title */
.hos-woo-inner h1.page-title,
.hos-woo-inner h1 {
    font-family: var(--font-display) !important;
    font-size: 2.2rem !important;
    font-weight: 300 !important;
    color: var(--purple) !important;
    font-style: italic !important;
    margin-bottom: 1.5rem !important;
    padding-bottom: 1rem !important;
    border-bottom: 1px solid var(--gold) !important;
}

/* Product grid on category/shop pages */
.hos-woo-inner ul.products {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 1.2rem !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.hos-woo-inner ul.products li.product {
    background: var(--white) !important;
    border: 1px solid rgba(45,27,78,0.07) !important;
    transition: transform 0.25s, box-shadow 0.25s !important;
    margin: 0 !important;
}
.hos-woo-inner ul.products li.product:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 8px 24px rgba(45,27,78,0.12) !important;
}
.hos-woo-inner ul.products li.product img {
    width: 100% !important;
    height: 280px !important;
    object-fit: cover !important;
    object-position: center 20% !important;
    display: block !important;
}
.hos-woo-inner ul.products li.product .woocommerce-loop-product__title {
    font-family: var(--font-body) !important;
    font-size: 0.75rem !important;
    color: var(--purple) !important;
    padding: 0.8rem 0.8rem 0.2rem !important;
    font-weight: 300 !important;
}
.hos-woo-inner ul.products li.product .price {
    color: var(--gold) !important;
    font-family: var(--font-display) !important;
    font-size: 1.1rem !important;
    padding: 0 0.8rem !important;
}
.hos-woo-inner ul.products li.product .button {
    display: block !important;
    margin: 0.5rem 0.8rem 0.8rem !important;
    text-align: center !important;
    background: var(--purple) !important;
    color: var(--cream) !important;
    font-size: 0.55rem !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    padding: 0.6rem !important;
    border-radius: 0 !important;
}
.hos-woo-inner ul.products li.product .button:hover {
    background: var(--gold) !important;
    color: var(--purple) !important;
}

/* Hide Quick View and Compare buttons */
.hos-woo-inner .yith-wcqv-button,
.hos-woo-inner .compare { display: none !important; }

/* Affirm payment notice — hide on listing pages */
.hos-woo-inner ul.products .affirm-as-low-as { display: none !important; }

/* Toolbar */
.hos-woo-inner .woocommerce-ordering select {
    border: 1px solid rgba(45,27,78,0.2) !important;
    padding: 0.4rem 0.8rem !important;
    font-family: var(--font-body) !important;
    font-size: 0.7rem !important;
    color: var(--purple) !important;
}

/* Pagination */
.hos-woo-inner .woocommerce-pagination ul {
    display: flex !important;
    gap: 0.5rem !important;
    list-style: none !important;
    padding: 2rem 0 !important;
    justify-content: center !important;
}
.hos-woo-inner .woocommerce-pagination ul li a,
.hos-woo-inner .woocommerce-pagination ul li span {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    border: 1px solid rgba(45,27,78,0.2) !important;
    color: var(--purple) !important;
    font-size: 0.7rem !important;
}
.hos-woo-inner .woocommerce-pagination ul li span.current {
    background: var(--purple) !important;
    color: var(--cream) !important;
    border-color: var(--purple) !important;
}

/* Kill old widget footer on inner pages */
.widget-area,
#secondary,
.site-footer .widget-area { display: none !important; }

/* ============================================================
   AFFIRM — Hide on products under $35
   (CSS fallback — functions.php handles the logic)
============================================================ */
.affirm-as-low-as,
.affirm-product-modal,
[data-affirm-type],
.affirm-modal-trigger { display: none !important; }

/* ============================================================
   CATEGORY PAGE GRID — Nuclear override
============================================================ */
.hos-woo-inner .woocommerce,
.hos-woo-inner .woocommerce-page { width: 100% !important; }

/* Kill any float/column layout from old theme */
.hos-woo-inner ul.products li.product,
.woocommerce ul.products li.product {
    float: none !important;
    width: auto !important;
    min-width: 0 !important;
    clear: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Force proper grid */
.hos-woo-inner ul.products,
.woocommerce ul.products {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 1.2rem !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    width: 100% !important;
}

/* Images — proper size, no sliver */
.hos-woo-inner ul.products li.product a img,
.woocommerce ul.products li.product a img {
    width: 100% !important;
    height: 280px !important;
    object-fit: cover !important;
    object-position: center 20% !important;
    display: block !important;
    float: none !important;
}

/* Product card */
.hos-woo-inner ul.products li.product a,
.woocommerce ul.products li.product a {
    display: block !important;
    width: 100% !important;
}

/* Product title */
.hos-woo-inner ul.products li.product .woocommerce-loop-product__title {
    font-size: 0.75rem !important;
    padding: 0.8rem !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    width: 100% !important;
    display: block !important;
}

/* Price */
.hos-woo-inner ul.products li.product .price {
    padding: 0 0.8rem 0.5rem !important;
    display: block !important;
    width: 100% !important;
}

/* Hide Quick View and Compare completely */
.hos-woo-inner .yith-wcqv-button,
.hos-woo-inner .compare,
.hos-woo-inner .button.yith-wcqv-button,
ul.products .compare,
ul.products .yith-wcqv-button { display: none !important; }

/* Add to Cart button — full width, not cut off */
.hos-woo-inner ul.products li.product .button,
.woocommerce ul.products li.product .button.add_to_cart_button {
    display: block !important;
    width: calc(100% - 1.6rem) !important;
    margin: 0 0.8rem 0.8rem !important;
    text-align: center !important;
    background: var(--purple) !important;
    color: var(--cream) !important;
    font-size: 0.55rem !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    padding: 0.65rem !important;
    border-radius: 0 !important;
    float: none !important;
}
.hos-woo-inner ul.products li.product .button:hover {
    background: var(--gold) !important;
    color: var(--purple) !important;
}

@media (max-width: 900px) {
    .hos-woo-inner ul.products,
    .woocommerce ul.products { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 480px) {
    .hos-woo-inner ul.products,
    .woocommerce ul.products { grid-template-columns: 1fr !important; }
}

/* ============================================================
   CATEGORY PAGE — Fix 3-column first row & stray products
============================================================ */

/* Force ALL products into the same grid — no exceptions */
.hos-woo-inner .woocommerce ul.products,
.hos-woo-inner .woocommerce-page ul.products,
body.woocommerce ul.products,
body.woocommerce-page ul.products,
body.tax-product_cat ul.products {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 1.2rem !important;
    width: 100% !important;
    float: none !important;
    clear: both !important;
    list-style: none !important;
    margin: 1.5rem 0 0 0 !important;
    padding: 0 !important;
}

/* Every single li — same size, no exceptions */
.hos-woo-inner .woocommerce ul.products li.product,
.hos-woo-inner .woocommerce-page ul.products li.product,
body.woocommerce ul.products li.product,
body.woocommerce-page ul.products li.product,
body.tax-product_cat ul.products li.product {
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    float: none !important;
    clear: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    background: white !important;
    border: 1px solid rgba(45,27,78,0.07) !important;
}

/* Images */
body.woocommerce ul.products li.product img,
body.woocommerce-page ul.products li.product img,
body.tax-product_cat ul.products li.product img {
    width: 100% !important;
    height: 280px !important;
    object-fit: cover !important;
    object-position: center 15% !important;
    display: block !important;
    flex-shrink: 0 !important;
}

/* KILL Quick View & Compare — every possible selector */
.yith-wcqv-button,
.yith_compare_button,
.compare.button,
a.compare,
button.compare,
.woocommerce ul.products li .yith-wcqv-button,
.woocommerce ul.products li a.button.yith-wcqv-button,
.woocommerce ul.products li .compare,
body.woocommerce .yith-wcqv-button,
body.woocommerce .compare { 
    display: none !important; 
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* Responsive */
@media (max-width: 768px) {
    body.woocommerce ul.products,
    body.woocommerce-page ul.products,
    body.tax-product_cat ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ============================================================
   FORCE 4 COLUMNS — target WooCommerce columns-4 class
============================================================ */
ul.products.columns-4,
.woocommerce ul.products.columns-4,
.woocommerce-page ul.products.columns-4 {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 1.2rem !important;
    width: 100% !important;
    margin: 1.5rem 0 0 0 !important;
    padding: 0 !important;
    list-style: none !important;
    float: none !important;
    clear: both !important;
}
ul.products.columns-4 li.product,
.woocommerce ul.products.columns-4 li.product {
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    clear: none !important;
}
ul.products.columns-4 li.product img {
    width: 100% !important;
    height: 280px !important;
    object-fit: cover !important;
    object-position: center 15% !important;
}
/* Kill the phantom first empty column */
ul.products.columns-4::before,
ul.products.columns-4::after { display: none !important; content: none !important; }

/* ============================================================
   HERO ARROWS — Replace dots for 8 slides
============================================================ */
.hero-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 30;
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    transition: var(--transition);
    padding: 0.5rem;
}
/* Doorknob SVG styling */
.hero-arrow .doorknob {
    width: 48px;
    height: 48px;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.5));
    transition: transform 0.2s, filter 0.2s;
}
.hero-arrow:hover .doorknob {
    transform: rotate(25deg) scale(1.1);
    filter: drop-shadow(0 4px 12px rgba(201,168,76,0.6));
}
.hero-arrow .door-label {
    font-size: 0.42rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: rgba(201,168,76,0.7);
}
.hero-prev { left: 1.2rem; }
.hero-next { right: 1.2rem; }

/* Slide counter — elegant x of 8 */
.hero-counter {
    position: absolute;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    font-size: 0.55rem;
    letter-spacing: 0.3em;
    color: rgba(201,168,76,0.7);
    text-transform: uppercase;
}
/* Hide old dots if any remain */
.hero-dots { display: none !important; }

/* ============================================================
   HERO SLIDE — Show full body not just face
============================================================ */
.hero-slide {
    background-size: auto 100% !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-color: var(--purple) !important;
}

/* ============================================================
   HERO — Multi-monitor responsive fix
   27" standard + 35" ultrawide LG
============================================================ */
/* All screens — auto height keeps full model visible */
.hero-slide {
    background-size: auto 110% !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-color: var(--purple) !important;
}
/* 27" 1920x1080 */
@media screen and (min-width: 1800px) and (max-width: 2400px) {
    .hos-hero   { height: 620px !important; }
    .hero-slide { background-size: auto 100% !important; }
}
/* 35" ultrawide */
@media screen and (min-width: 2400px) {
    .hos-hero   { height: 680px !important; }
    .hero-slide { background-size: auto 95% !important; }
}
/* Laptop/smaller */
@media screen and (max-width: 1799px) {
    .hos-hero   { height: 560px !important; }
    .hero-slide { background-size: auto 100% !important; }
}


/* ============================================================
   HERO SLIDE — FINAL DEFINITIVE RULE — DO NOT OVERRIDE
   cover fills full width, position top 30% shows body not face
============================================================ */
.hero-slide,
.hos-hero .hero-slide {
    background-size: cover !important;
    background-position: center 30% !important;
    background-repeat: no-repeat !important;
}
.hos-hero { height: 600px !important; }

@media screen and (min-width: 2200px) {
    .hos-hero { height: 650px !important; }
    .hero-slide, .hos-hero .hero-slide {
        background-position: center 35% !important;
    }
}
@media screen and (max-width: 1200px) {
    .hos-hero { height: 500px !important; }
}

/* ============================================================
   HERO — PORTRAIT IMAGE FIX
   Make hero taller so portrait product photos fit properly
   Shows full body instead of cropping to face
============================================================ */
.hos-hero {
    height: 85vh !important;
    min-height: 500px !important;
    max-height: 800px !important;
}
.hero-center,
.hero-slide {
    height: 100% !important;
}
.hero-slide {
    background-size: cover !important;
    background-position: center 15% !important;
    background-repeat: no-repeat !important;
}
/* Taller on ultrawide so portrait images show more body */
@media screen and (min-width: 2200px) {
    .hos-hero { height: 90vh !important; }
    .hero-slide { background-position: center 10% !important; }
}

/* ============================================================
   HERO COLLAGE — 3 models side by side filling full width
============================================================ */
.hero-collage {
    position: absolute !important;
    inset: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 2px !important;
    z-index: 0 !important;
}
.collage-panel {
    background-size: cover !important;
    background-position: center 15% !important;
    background-repeat: no-repeat !important;
    background-color: var(--purple) !important;
    height: 100% !important;
}
/* Middle panel slightly larger for emphasis */
.collage-1 {
    background-position: center 10% !important;
}
/* Overlay sits above collage */
.hero-slide-overlay {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    background: linear-gradient(
        135deg,
        rgba(45,27,78,0.55) 0%,
        rgba(20,10,35,0.35) 50%,
        rgba(45,27,78,0.55) 100%
    ) !important;
}
/* Text sits above overlay */
.slide-content {
    position: relative !important;
    z-index: 5 !important;
}
/* Hero height — tall enough to show full body */
.hos-hero {
    height: 85vh !important;
    min-height: 520px !important;
    max-height: 820px !important;
}

/* ============================================================
   HERO EYEBROW TEXT — Make readable over any image
============================================================ */
.slide-content .eyebrow {
    display: inline-block !important;
    background: rgba(45,27,78,0.65) !important;
    padding: 4px 14px !important;
    letter-spacing: 0.3em !important;
    color: var(--gold) !important;
    font-size: 0.58rem !important;
    margin-bottom: 0.8rem !important;
    backdrop-filter: blur(4px) !important;
    text-shadow: none !important;
}
.slide-content h1 {
    text-shadow: 0 2px 12px rgba(0,0,0,0.8), 0 1px 3px rgba(0,0,0,0.9) !important;
}
.slide-content p {
    text-shadow: 0 1px 6px rgba(0,0,0,0.9) !important;
    background: rgba(45,27,78,0.4) !important;
    padding: 3px 12px !important;
    display: inline-block !important;
    backdrop-filter: blur(2px) !important;
}

/* ============================================================
   HERO SLIDE CONTENT — Sub text and button stacked vertically
============================================================ */
.slide-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 0.8rem !important;
}
.slide-content .eyebrow { margin-bottom: 0 !important; }
.slide-content h1       { margin-bottom: 0 !important; }
.slide-content p        { margin-bottom: 0 !important; }
.slide-content .btn-primary {
    margin-top: 0.5rem !important;
    display: inline-block !important;
    width: auto !important;
}


/* ============================================================
   ROOM CATEGORY PAGES — Immersive 1950s Mansion Backgrounds
   Each room has its own atmospheric backdrop.
   Products sit on top like you're shopping inside the room.
============================================================ */

/* ── Shared Room Page Structure ───────────────────────────── */

.room-page-wrap {
    min-height: 100vh;
    background-attachment: fixed;
    background-size: cover;
    background-position: center center;
}

/* HERO — the atmospheric room banner at top */
.room-page-hero {
    position: relative;
    width: 100%;
    min-height: 420px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    text-align: center;
}

.room-page-hero-inner {
    position: relative;
    z-index: 2;
    padding: 4rem 2rem 3rem;
    max-width: 700px;
    margin: 0 auto;
}

.room-page-hero-content { }

/* Breadcrumb */
.room-page-breadcrumb {
    font-family: var(--font-body);
    font-size: 0.75rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(201,168,76,0.7);
    margin-bottom: 1.5rem;
}
.room-page-breadcrumb a {
    color: rgba(201,168,76,0.55);
    text-decoration: none;
    transition: color 0.3s;
}
.room-page-breadcrumb a:hover { color: var(--gold); }
.rp-sep { margin: 0 0.5rem; }

/* Room Icon */
.room-page-icon {
    font-size: 2.4rem;
    margin-bottom: 0.75rem;
    filter: drop-shadow(0 0 20px rgba(201,168,76,0.4));
}

/* Room Title */
.room-page-title {
    font-family: var(--font-heading);
    font-size: clamp(2.4rem, 6vw, 4.5rem);
    font-weight: 300;
    letter-spacing: 0.12em;
    color: var(--gold-light);
    margin: 0 0 0.5rem;
    text-shadow: 0 2px 30px rgba(0,0,0,0.6), 0 0 60px rgba(201,168,76,0.15);
    line-height: 1.1;
}

/* Sub heading */
.room-page-sub {
    font-family: var(--font-body);
    font-size: 0.85rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(201,168,76,0.65);
    margin: 0 0 1.5rem;
}

/* Decorative divider */
.room-page-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: 1.2rem;
}
.rpd-line {
    display: block;
    width: 60px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(201,168,76,0.5), transparent);
}
.rpd-diamond {
    font-size: 0.5rem;
    color: rgba(201,168,76,0.6);
}

/* Quote */
.room-page-quote {
    font-family: var(--font-heading);
    font-style: italic;
    font-size: 1.1rem;
    color: rgba(245,235,215,0.55);
    letter-spacing: 0.04em;
    margin: 0;
}

/* Category description */
.room-page-desc {
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: rgba(245,235,215,0.45);
    margin-top: 1rem;
    line-height: 1.7;
}

/* Atmospheric particles overlay (CSS-only shimmer) */
.room-page-particles {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background-image:
        radial-gradient(1px 1px at 20% 30%, rgba(201,168,76,0.25) 0%, transparent 100%),
        radial-gradient(1px 1px at 75% 20%, rgba(201,168,76,0.2)  0%, transparent 100%),
        radial-gradient(1px 1px at 50% 70%, rgba(201,168,76,0.15) 0%, transparent 100%),
        radial-gradient(1px 1px at 85% 55%, rgba(201,168,76,0.2)  0%, transparent 100%),
        radial-gradient(1px 1px at 10% 65%, rgba(201,168,76,0.15) 0%, transparent 100%);
}

/* ── Products Stage ────────────────────────────────────────── */

.room-page-stage {
    position: relative;
    z-index: 2;
    padding: 2.5rem 0 4rem;
}

.room-page-stage-inner {
    max-width: 1360px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* Toolbar */
.room-page-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2rem;
    padding: 0.85rem 1.4rem;
    background: rgba(0,0,0,0.35);
    border: 1px solid rgba(201,168,76,0.15);
    backdrop-filter: blur(8px);
}
.rpt-count {
    font-family: var(--font-body);
    font-size: 0.8rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(201,168,76,0.65);
}
.rpt-sort select {
    background: transparent;
    border: 1px solid rgba(201,168,76,0.25);
    color: rgba(245,235,215,0.75);
    font-family: var(--font-body);
    font-size: 0.8rem;
    padding: 0.3rem 0.6rem;
    cursor: pointer;
}
.rpt-sort select option {
    background: #1a0a18;
    color: #f5ebd7;
}

/* Pagination */
.room-page-pagination {
    margin-top: 3rem;
    text-align: center;
}
.room-page-pagination .woocommerce-pagination a,
.room-page-pagination .woocommerce-pagination span {
    display: inline-block;
    padding: 0.45rem 0.9rem;
    margin: 0 0.15rem;
    border: 1px solid rgba(201,168,76,0.3);
    color: rgba(201,168,76,0.7);
    font-family: var(--font-body);
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-decoration: none;
    transition: all 0.3s;
    background: rgba(0,0,0,0.2);
}
.room-page-pagination .woocommerce-pagination a:hover,
.room-page-pagination .woocommerce-pagination span.current {
    background: rgba(201,168,76,0.15);
    border-color: var(--gold);
    color: var(--gold);
}

/* Empty state */
.room-page-empty {
    text-align: center;
    padding: 5rem 2rem;
}
.rpe-icon { font-size: 3rem; margin-bottom: 1rem; }
.room-page-empty p {
    color: rgba(245,235,215,0.55);
    font-family: var(--font-body);
    font-size: 0.95rem;
    letter-spacing: 0.08em;
}
.rpe-link {
    display: inline-block;
    margin-top: 1.5rem;
    padding: 0.7rem 2rem;
    border: 1px solid rgba(201,168,76,0.4);
    color: rgba(201,168,76,0.8);
    font-family: var(--font-body);
    font-size: 0.8rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    transition: all 0.3s;
}
.rpe-link:hover {
    background: rgba(201,168,76,0.12);
    border-color: var(--gold);
    color: var(--gold);
}

/* Product cards on room pages — lighter card on dark room bg */
.room-page-stage ul.products li.product {
    background: rgba(255,255,255,0.96) !important;
    border: 1px solid rgba(201,168,76,0.12) !important;
    box-shadow: 0 4px 24px rgba(0,0,0,0.35) !important;
    transition: transform 0.3s, box-shadow 0.3s !important;
}
.room-page-stage ul.products li.product:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 40px rgba(0,0,0,0.5) !important;
}


/* ============================================================
   🌸  THE BOUDOIR  — Lingerie
   Soft candlelit boudoir: deep plum, rose gold, satin shadows
============================================================ */

.room-page-boudoir {
    background-color: #1a0714;
    /* Layered: atmospheric boudoir gradient */
    background-image:
        /* Vignette darkening edges */
        radial-gradient(ellipse 120% 80% at 50% 100%, rgba(0,0,0,0.85) 0%, transparent 60%),
        radial-gradient(ellipse 80% 60% at 50% 0%,   rgba(0,0,0,0.7)  0%, transparent 60%),
        /* Soft rose glow centre */
        radial-gradient(ellipse 70% 50% at 50% 40%,  rgba(122,42,74,0.55) 0%, transparent 70%),
        /* Deep plum room walls */
        linear-gradient(180deg, #0d030a 0%, #1a0714 25%, #2d0f22 55%, #1a0714 80%, #0d030a 100%);
    background-attachment: fixed;
}

.room-page-boudoir .room-page-hero {
    background-image:
        /* Chandelier glow from above */
        radial-gradient(ellipse 60% 40% at 50% 0%, rgba(201,168,76,0.18) 0%, transparent 55%),
        /* Warm satin reflections */
        radial-gradient(ellipse 90% 70% at 30% 60%, rgba(180,80,100,0.25) 0%, transparent 60%),
        radial-gradient(ellipse 70% 60% at 70% 40%, rgba(122,42,74,0.35)  0%, transparent 65%),
        /* Floor darkness */
        radial-gradient(ellipse 100% 40% at 50% 100%, rgba(0,0,0,0.8) 0%, transparent 60%),
        linear-gradient(180deg, #0a0208 0%, #200b1a 40%, #3d1a2e 70%, #1a0714 100%);
    border-bottom: 1px solid rgba(201,168,76,0.18);
}

.room-page-boudoir .room-page-stage {
    background: linear-gradient(180deg, rgba(61,26,46,0.15) 0%, rgba(10,2,8,0.45) 100%);
}


/* ============================================================
   🏊  THE POOL HOUSE  — Swimwear
   Sunlit 1950s Hollywood poolside: teal water, warm sunlight
============================================================ */

.room-page-pool {
    background-color: #040e12;
    background-image:
        radial-gradient(ellipse 120% 80% at 50% 100%, rgba(0,0,0,0.9) 0%, transparent 55%),
        radial-gradient(ellipse 60% 50% at 50% 30%,  rgba(13,61,74,0.6) 0%, transparent 70%),
        linear-gradient(180deg, #020b0f 0%, #0a2530 30%, #0d3d4a 60%, #071a22 100%);
    background-attachment: fixed;
}

.room-page-pool .room-page-hero {
    background-image:
        /* Sun glare from top */
        radial-gradient(ellipse 50% 35% at 50% -5%, rgba(255,230,150,0.22) 0%, transparent 55%),
        /* Water light reflections */
        radial-gradient(ellipse 80% 60% at 30% 70%, rgba(26,106,126,0.45) 0%, transparent 60%),
        radial-gradient(ellipse 70% 50% at 75% 50%, rgba(13,61,74,0.5)   0%, transparent 65%),
        /* Caustic water shimmer bottom */
        radial-gradient(ellipse 100% 30% at 50% 100%, rgba(0,30,45,0.85) 0%, transparent 60%),
        linear-gradient(180deg, #030c10 0%, #0a2d3d 35%, #1a5a6e 65%, #0a2530 100%);
    border-bottom: 1px solid rgba(26,106,126,0.35);
}

.room-page-pool .room-page-stage {
    background: linear-gradient(180deg, rgba(13,61,74,0.18) 0%, rgba(3,12,18,0.5) 100%);
}


/* ============================================================
   🚗  THE GARAGE  — Menswear
   Sleek 1950s luxury garage: polished concrete, chrome, shadow
============================================================ */

.room-page-garage {
    background-color: #070707;
    background-image:
        radial-gradient(ellipse 100% 60% at 50% 100%, rgba(0,0,0,0.95) 0%, transparent 50%),
        radial-gradient(ellipse 70% 50% at 50% 40%,  rgba(35,35,35,0.5) 0%, transparent 70%),
        linear-gradient(180deg, #030303 0%, #0f0f0f 30%, #1a1a1a 60%, #080808 100%);
    background-attachment: fixed;
}

.room-page-garage .room-page-hero {
    background-image:
        /* Overhead workshop light */
        radial-gradient(ellipse 40% 30% at 50% 0%, rgba(180,180,160,0.15) 0%, transparent 55%),
        /* Chrome reflections */
        radial-gradient(ellipse 60% 40% at 20% 50%, rgba(60,60,55,0.3)  0%, transparent 60%),
        radial-gradient(ellipse 50% 35% at 80% 60%, rgba(40,40,38,0.35) 0%, transparent 60%),
        /* Floor oil-stain darkness */
        radial-gradient(ellipse 100% 35% at 50% 100%, rgba(0,0,0,0.95) 0%, transparent 55%),
        linear-gradient(180deg, #020202 0%, #111111 40%, #1f1f1f 65%, #0a0a0a 100%);
    border-bottom: 1px solid rgba(100,100,90,0.2);
}

.room-page-garage .room-page-stage {
    background: linear-gradient(180deg, rgba(25,25,25,0.2) 0%, rgba(5,5,5,0.6) 100%);
}

/* Chrome/silver accents for Garage */
.room-page-garage .room-page-title { color: #d8d8d0; text-shadow: 0 2px 30px rgba(0,0,0,0.8), 0 0 40px rgba(180,180,160,0.1); }
.room-page-garage .room-page-breadcrumb a,
.room-page-garage .room-page-breadcrumb { color: rgba(160,160,150,0.6); }
.room-page-garage .room-page-sub { color: rgba(160,160,150,0.55); }
.room-page-garage .room-page-quote { color: rgba(200,200,190,0.45); }
.room-page-garage .rpt-count { color: rgba(160,160,150,0.6); }


/* ============================================================
   📚  THE STUDY  — Accessories
   Rich 1950s gentleman's library: mahogany, old books, firelight
============================================================ */

.room-page-study {
    background-color: #0c0700;
    background-image:
        radial-gradient(ellipse 110% 70% at 50% 100%, rgba(0,0,0,0.9) 0%, transparent 55%),
        radial-gradient(ellipse 60% 45% at 40% 50%,  rgba(90,58,16,0.45) 0%, transparent 70%),
        linear-gradient(180deg, #060400 0%, #120a02 30%, #2a1a08 60%, #0f0700 100%);
    background-attachment: fixed;
}

.room-page-study .room-page-hero {
    background-image:
        /* Fireplace glow lower left */
        radial-gradient(ellipse 50% 55% at 15% 85%, rgba(200,100,30,0.22) 0%, transparent 60%),
        /* Warm desk lamp top */
        radial-gradient(ellipse 35% 30% at 70% 15%, rgba(201,168,76,0.18) 0%, transparent 50%),
        /* Mahogany room warmth */
        radial-gradient(ellipse 80% 60% at 50% 50%, rgba(90,58,16,0.4)  0%, transparent 65%),
        /* Floor darkness */
        radial-gradient(ellipse 100% 35% at 50% 100%, rgba(0,0,0,0.88) 0%, transparent 55%),
        linear-gradient(180deg, #050300 0%, #180e03 40%, #2a1a08 65%, #0d0701 100%);
    border-bottom: 1px solid rgba(201,168,76,0.15);
}

.room-page-study .room-page-stage {
    background: linear-gradient(180deg, rgba(42,26,8,0.2) 0%, rgba(8,4,0,0.5) 100%);
}


/* ============================================================
   🎭  THE DRESSING ROOM  — Costumes
   Theatrical 1950s backstage: purple velvet, spotlight, mirrors
============================================================ */

.room-page-dressing {
    background-color: #08040f;
    background-image:
        radial-gradient(ellipse 110% 70% at 50% 100%, rgba(0,0,0,0.9) 0%, transparent 55%),
        radial-gradient(ellipse 65% 50% at 50% 40%,  rgba(58,42,90,0.5) 0%, transparent 70%),
        linear-gradient(180deg, #050208 0%, #100818 30%, #1e1430 60%, #0a0512 100%);
    background-attachment: fixed;
}

.room-page-dressing .room-page-hero {
    background-image:
        /* Stage spotlight from above */
        radial-gradient(ellipse 35% 45% at 50% 0%, rgba(255,255,220,0.15) 0%, transparent 55%),
        /* Velvet curtain purples */
        radial-gradient(ellipse 50% 70% at 5% 50%,  rgba(80,40,120,0.35) 0%, transparent 55%),
        radial-gradient(ellipse 50% 70% at 95% 50%, rgba(80,40,120,0.35) 0%, transparent 55%),
        /* Mirror reflections centre */
        radial-gradient(ellipse 70% 50% at 50% 55%, rgba(58,42,90,0.4)  0%, transparent 65%),
        /* Floor darkness */
        radial-gradient(ellipse 100% 35% at 50% 100%, rgba(0,0,0,0.9) 0%, transparent 55%),
        linear-gradient(180deg, #030105 0%, #120a1e 40%, #1e1430 65%, #080412 100%);
    border-bottom: 1px solid rgba(80,40,120,0.25);
}

.room-page-dressing .room-page-stage {
    background: linear-gradient(180deg, rgba(30,20,48,0.2) 0%, rgba(5,2,8,0.55) 100%);
}


/* ============================================================
   💄  THE VANITY  — Hosiery & Legwear
   1950s Hollywood vanity: warm bulb lights, champagne, satin
============================================================ */

.room-page-vanity {
    background-color: #0f0602;
    background-image:
        radial-gradient(ellipse 110% 70% at 50% 100%, rgba(0,0,0,0.9) 0%, transparent 55%),
        radial-gradient(ellipse 60% 45% at 50% 35%,  rgba(90,58,26,0.5) 0%, transparent 70%),
        linear-gradient(180deg, #080401 0%, #160a03 30%, #3a2010 60%, #100602 100%);
    background-attachment: fixed;
}

.room-page-vanity .room-page-hero {
    background-image:
        /* Vanity bulb ring glow */
        radial-gradient(ellipse 55% 35% at 50% 10%, rgba(255,220,140,0.2) 0%, transparent 55%),
        /* Warm champagne reflections */
        radial-gradient(ellipse 70% 55% at 35% 60%, rgba(180,120,50,0.28) 0%, transparent 60%),
        radial-gradient(ellipse 60% 45% at 65% 45%, rgba(140,90,30,0.3)  0%, transparent 60%),
        /* Satin table darkness */
        radial-gradient(ellipse 100% 35% at 50% 100%, rgba(0,0,0,0.88) 0%, transparent 55%),
        linear-gradient(180deg, #060300 0%, #1a0c04 40%, #3a2010 65%, #0f0601 100%);
    border-bottom: 1px solid rgba(201,168,76,0.18);
}

.room-page-vanity .room-page-stage {
    background: linear-gradient(180deg, rgba(58,32,16,0.2) 0%, rgba(6,3,0,0.5) 100%);
}


/* ============================================================
   🍷  THE WINE CELLAR  — Leather
   Stone-walled 1950s cellar: crimson, candlelight, aged oak
============================================================ */

.room-page-cellar {
    background-color: #050101;
    background-image:
        radial-gradient(ellipse 110% 70% at 50% 100%, rgba(0,0,0,0.95) 0%, transparent 50%),
        radial-gradient(ellipse 55% 45% at 35% 55%,  rgba(60,8,8,0.5)  0%, transparent 65%),
        linear-gradient(180deg, #030000 0%, #0a0202 30%, #180404 60%, #070101 100%);
    background-attachment: fixed;
}

.room-page-cellar .room-page-hero {
    background-image:
        /* Candle glow — warm amber pinpoint top */
        radial-gradient(ellipse 20% 30% at 50% 5%,  rgba(220,140,40,0.18) 0%, transparent 50%),
        /* Deep crimson wine racks */
        radial-gradient(ellipse 55% 65% at 20% 60%, rgba(80,10,10,0.5)  0%, transparent 60%),
        radial-gradient(ellipse 55% 55% at 80% 45%, rgba(60,8,8,0.45)   0%, transparent 60%),
        /* Stone floor blackness */
        radial-gradient(ellipse 100% 35% at 50% 100%, rgba(0,0,0,0.97) 0%, transparent 55%),
        linear-gradient(180deg, #020000 0%, #0d0202 40%, #1a0404 65%, #060101 100%);
    border-bottom: 1px solid rgba(80,10,10,0.4);
}

.room-page-cellar .room-page-stage {
    background: linear-gradient(180deg, rgba(24,4,4,0.25) 0%, rgba(4,0,0,0.65) 100%);
}

/* Crimson accents for Cellar */
.room-page-cellar .rpd-diamond { color: rgba(180,20,20,0.6); }
.room-page-cellar .room-page-breadcrumb a,
.room-page-cellar .room-page-breadcrumb { color: rgba(180,80,80,0.55); }


/* ============================================================
   🔒  THE DUNGEON  — Vinyl
   Gothic 1950s basement: near-black, indigo shadows, mystery
============================================================ */

.room-page-dungeon {
    background-color: #020105;
    background-image:
        radial-gradient(ellipse 110% 70% at 50% 100%, rgba(0,0,0,0.97) 0%, transparent 50%),
        radial-gradient(ellipse 50% 40% at 50% 45%,  rgba(15,10,30,0.6) 0%, transparent 70%),
        linear-gradient(180deg, #010004 0%, #060310 30%, #0d0a1a 60%, #040208 100%);
    background-attachment: fixed;
}

.room-page-dungeon .room-page-hero {
    background-image:
        /* Single cold light source top */
        radial-gradient(ellipse 25% 30% at 50% 0%, rgba(100,80,180,0.15) 0%, transparent 50%),
        /* Indigo stone walls */
        radial-gradient(ellipse 55% 65% at 15% 55%, rgba(20,10,45,0.55) 0%, transparent 60%),
        radial-gradient(ellipse 50% 55% at 85% 45%, rgba(15,8,35,0.5)   0%, transparent 60%),
        /* Black stone floor */
        radial-gradient(ellipse 100% 35% at 50% 100%, rgba(0,0,0,1)     0%, transparent 55%),
        linear-gradient(180deg, #010003 0%, #080412 40%, #0d0a1a 65%, #030108 100%);
    border-bottom: 1px solid rgba(80,50,160,0.2);
}

.room-page-dungeon .room-page-stage {
    background: linear-gradient(180deg, rgba(13,10,26,0.3) 0%, rgba(2,1,5,0.75) 100%);
}

/* Subtle purple accents for Dungeon */
.room-page-dungeon .rpd-diamond { color: rgba(120,80,200,0.5); }
.room-page-dungeon .room-page-breadcrumb a,
.room-page-dungeon .room-page-breadcrumb { color: rgba(120,80,200,0.5); }
.room-page-dungeon .room-page-sub { color: rgba(120,80,200,0.45); }


/* ============================================================
   RESPONSIVE — Room Pages
============================================================ */

@media (max-width: 768px) {
    .room-page-hero { min-height: 320px; }
    .room-page-hero-inner { padding: 3rem 1.5rem 2.5rem; }
    .room-page-toolbar {
        flex-direction: column;
        gap: 0.75rem;
        text-align: center;
    }
    .room-page-stage-inner { padding: 0 1rem; }
}

@media (max-width: 480px) {
    .room-page-hero { min-height: 260px; }
    .room-page-hero-inner { padding: 2.5rem 1rem 2rem; }
}


/* ── Room Page Label (above products, no hero banner) ── */
.room-page-label {
    text-align: center;
    padding: 2.5rem 1rem 1.5rem;
}
.room-page-icon-sm {
    font-size: 1.8rem;
    display: block;
    margin-bottom: 0.4rem;
}
.room-page-title-sm {
    font-family: var(--font-heading);
    font-size: clamp(1.8rem, 4vw, 3rem);
    font-weight: 300;
    letter-spacing: 0.12em;
    color: var(--gold-light);
    margin: 0 0 0.3rem;
    text-shadow: 0 2px 20px rgba(0,0,0,0.5);
}
.room-page-sub-sm {
    font-family: var(--font-body);
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(201,168,76,0.55);
    margin: 0 0 1rem;
}


/* =========================================================
   DIRECT ROOM BACKGROUND FIX v11.3
========================================================= */

.room-page-wrap{
    position:relative;
    overflow:hidden;
    min-height:100vh;
}

.room-page-wrap::before{
    content:'';
    position:fixed;
    inset:0;
    z-index:0;
    background-size:cover !important;
    background-position:center center !important;
    background-repeat:no-repeat !important;
    opacity:1;
    pointer-events:none;
}

.room-page-wrap > *{
    position:relative;
    z-index:2;
}

/* Dark overlay so products stay readable over the photo */
.room-page-wrap::after{
    content:'';
    position:fixed;
    inset:0;
    z-index:1;
    background:rgba(0,0,0,0.55);
    pointer-events:none;
}
.room-page-wrap > * { z-index:2; }

.room-page-boudoir::before{background-image:var(--hos-boudoir-bg);}
.room-page-pool::before{background-image:var(--hos-pool-bg);}
.room-page-garage::before{background-image:var(--hos-garage-bg);}
.room-page-study::before{background-image:var(--hos-study-bg);}
.room-page-dressing::before{background-image:var(--hos-dressing-bg);}
.room-page-vanity::before{background-image:var(--hos-vanity-bg);}
.room-page-cellar::before{background-image:var(--hos-cellar-bg);}
.room-page-dungeon::before{background-image:var(--hos-dungeon-bg);}