/* ============================================
   NR SKIN — main.css
   Dual-theme luxury design system
   ============================================ */

/* === THEMES === */
:root, [data-theme="midnight"] {
    --color-bg: #0A0A0A; --color-bg-alt: #0F0F0F;
    --color-surface: #141414; --color-surface-hover: #222;
    --color-text: #F5F0EB; --color-text-heading: #F5F0EB;
    --color-text-muted: #A0A0A0; --color-text-body: #C8C0B8;
    --color-gold: #C9A96E; --color-gold-hover: #D4B97A;
    --color-gold-subtle: rgba(201,169,110,0.15);
    --color-border: #2A2A2A;
    --color-input-bg: #1A1A1A; --color-input-border: #333;
    --color-input-focus: #C9A96E;
    --color-success: #4CAF50; --color-error: #E57373;
    --nav-bg: rgba(10,10,10,0.95); --nav-border: #2A2A2A;
}

[data-theme="clinical"] {
    --color-bg: #FAFAFA; --color-bg-alt: #F0F0F0;
    --color-surface: #FFFFFF; --color-surface-hover: #F2F2F2;
    --color-text: #1A1A1A; --color-text-heading: #0D0D0D;
    --color-text-muted: #555; --color-text-body: #333;
    --color-gold: #8B6914; --color-gold-hover: #7A5C12;
    --color-gold-subtle: rgba(139,105,20,0.12);
    --color-border: #D4D4D4;
    --color-input-bg: #FFF; --color-input-border: #BBB;
    --color-input-focus: #8B6914;
    --color-success: #3D9140; --color-error: #CF3434;
    --nav-bg: rgba(250,250,250,0.97); --nav-border: #D4D4D4;
}

/* === RESET === */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{font-family:'Inter',-apple-system,Helvetica Neue,sans-serif;font-weight:300;font-size:1rem;line-height:1.7;color:var(--color-text-body);background-color:var(--color-bg);overflow-x:hidden;transition:background-color 0.3s,color 0.3s}
h1,h2,h3,h4,h5,h6{font-family:'Cormorant Garamond',Georgia,serif;font-weight:300;line-height:1.15;letter-spacing:0.02em;color:var(--color-text-heading)}
a{color:inherit;text-decoration:none;transition:color 0.2s}
a:hover{color:var(--color-gold)}
img{max-width:100%;height:auto;display:block}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,textarea,select{font-family:inherit;color:inherit}
::selection{background:var(--color-gold);color:var(--color-bg)}

/* === TYPE === */
.heading-hero{font-size:clamp(2.5rem,6vw,5.5rem);font-weight:300;letter-spacing:0.03em;line-height:1.05}
.heading-xl{font-size:clamp(2rem,4vw,4rem);font-weight:300;line-height:1.1}
.heading-lg{font-size:clamp(1.75rem,3vw,3rem);font-weight:300}
.heading-md{font-size:clamp(1.25rem,2vw,1.75rem);font-weight:400}
.heading-sm{font-size:1.15rem;font-weight:400}
.section-title{font-size:clamp(1.75rem,3vw,2.75rem);text-align:center;margin-bottom:0.5rem}
.section-subtitle{font-family:'Inter',sans-serif;font-size:0.75rem;font-weight:500;letter-spacing:0.2em;text-transform:uppercase;color:var(--color-gold);text-align:center;margin-bottom:0.5rem}
.text-gold{color:var(--color-gold)}
.text-muted{color:var(--color-text-muted)}
.text-center{text-align:center}

/* === LAYOUT === */
.container{max-width:1200px;margin:0 auto;padding:0 2rem}
.container--narrow{max-width:720px}
.section { padding: 9rem 0 }
.section:first-of-type { padding-top: 10rem }
html { scroll-padding-top: 100px }
@media(max-width:768px) { .section { padding: 5rem 0 } .section:first-of-type { padding-top: 9rem } .container { padding: 0 1.25rem } }

/* === DIVIDER === */
.gold-line{display:block;width:60px;height:1px;background:var(--color-gold);margin:1.5rem auto}
.gold-line--left{margin-left:0}

/* === BUTTONS === */
.btn{display:inline-flex;align-items:center;justify-content:center;padding:0.85rem 2.5rem;font-size:0.7rem;font-weight:500;letter-spacing:0.2em;text-transform:uppercase;transition:all 0.3s;cursor:pointer;white-space:nowrap}
.btn-primary{background:var(--color-gold);color:var(--color-bg);border:1px solid var(--color-gold)}
.btn-primary:hover{background:var(--color-gold-hover);transform:translateY(-1px)}
.btn-outline{border:1px solid var(--color-gold);color:var(--color-gold);background:transparent}
.btn-outline:hover{background:var(--color-gold);color:var(--color-bg)}
.btn-ghost{color:var(--color-gold);border-bottom:1px solid transparent;padding:0.25rem 0;font-size:0.75rem}
.btn-ghost:hover{border-bottom-color:var(--color-gold)}
.btn-sm{padding:0.5rem 1.25rem;font-size:0.6rem}

/* ============================================
   NAVIGATION
   ============================================ */
.site-nav{
    position:fixed;top:0;left:0;right:0;height:120px;
    display:grid;align-items:center;
    z-index:1100;
    background:var(--nav-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
    border-bottom:1px solid var(--nav-border);transition:background 0.3s;
    grid-template-columns: min-content 1fr min-content;
    padding:0 2rem;
}

/* Hamburger - far left */
.nav-toggle{
    display:none;flex-direction:column;justify-content:center;align-items:center;
    width:36px;height:36px;cursor:pointer;gap:5px;z-index:1110;
}
.nav-toggle span{display:block;width:22px;height:1px;background:var(--color-text);transition:all 0.3s}
.nav-toggle.is-active span:nth-child(1){transform:rotate(45deg) translate(4px,4px)}
.nav-toggle.is-active span:nth-child(2){opacity:0}
.nav-toggle.is-active span:nth-child(3){transform:rotate(-45deg) translate(4px,-4px)}

/* Logo - center */
.nav-logo{
    display:flex;flex-direction:column;align-items:center;
    transition:opacity 0.2s;text-decoration:none;
    justify-self:center;
}
.nav-logo:hover{opacity:0.8}
.nav-logo-img{
    height:120px;width:120px;display:block;flex-shrink:0;max-width:120px !important;
}
@media (max-width: 960px) {
    .nav-logo-img { height: 90px; width: 90px; max-width: 90px !important; }
}
@media (max-width: 640px) {
    .nav-logo-img { height: 70px; width: 70px; max-width: 70px !important; }
}

/* Default: show white logo (for dark/midnight theme), hide black logo */
.logo-for-light{ display: none; }
.logo-for-dark{ display: block; }

/* Light clinical theme: show black logo, hide white */
[data-theme="clinical"] .logo-for-light{ display: block; }
[data-theme="clinical"] .logo-for-dark{ display: none; }

/* Ensure footer logo reacts to theme too */
.footer-logo-img.logo-for-light{ display: none; }
.footer-logo-img.logo-for-dark{ display: block; }
[data-theme="clinical"] .footer-logo-img.logo-for-light{ display: block; }
[data-theme="clinical"] .footer-logo-img.logo-for-dark{ display: none; }

/* Nav center links */
.nav-center{display:flex;align-items:center;gap:2rem;padding-left:3rem}
.nav-center a{white-space:nowrap}

/* Footer logo — same theme-reactive treatment as nav logo */
.footer-logo-img{
    max-width:160px;height:auto;display:block;margin-bottom:1rem;
}
/* Right side (Book Now + theme toggle) */
.nav-right-desktop{display:flex;align-items:center;gap:1.5rem;justify-self:end;flex-wrap:nowrap;white-space:nowrap}

/* Desktop nav links */
.nav-link{font-size:0.65rem;font-weight:400;letter-spacing:0.18em;text-transform:uppercase;position:relative;padding:0.25rem 0}
.nav-link::after{content:'';position:absolute;bottom:0;left:0;width:0;height:1px;background:var(--color-gold);transition:width 0.3s}
.nav-link:hover{color:var(--color-gold)}
.nav-link:hover::after{width:100%}

/* Theme toggle */
.theme-toggle{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;border:1px solid var(--color-border);font-size:0.9rem;cursor:pointer;color:var(--color-text-muted);flex-shrink:0}
.theme-toggle:hover{border-color:var(--color-gold);color:var(--color-gold)}

/* Mobile menu overlay — full screen above nav */
.mobile-menu{
    display:none;position:fixed;
    top:0;left:0;right:0;bottom:0;
    background-color:var(--color-bg);z-index:1200;
    padding-top:72px;
    flex-direction:column;align-items:center;justify-content:center;
    overflow-y:auto;
    transition:background-color 0.3s;
}
.mobile-menu.is-open{display:flex}
.mobile-link{font-family:'Cormorant Garamond',serif;font-size:2rem;font-weight:300;letter-spacing:0.03em;padding:1rem 0;border-bottom:1px solid var(--color-border);width:100%;max-width:400px;text-align:center;display:block}
.mobile-link:hover{color:var(--color-gold)}
.mobile-link--gold{color:var(--color-gold);border-bottom:none}
/* Close button for mobile menu */
.mobile-close{position:fixed;top:1rem;right:1.25rem;width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:transparent;border:1px solid var(--color-border);color:var(--color-text);font-size:1.2rem;cursor:pointer;border-radius:50%;z-index:1300;transition:all 0.2s}
.mobile-close:hover{border-color:var(--color-gold);color:var(--color-gold)}
.mobile-theme-row{margin-top:2rem;display:flex;align-items:center;gap:0.75rem;font-size:0.8rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--color-text-muted)}

/* === MOBILE RESPONSIVE === */
@media(max-width:960px){
    .nav-center{display:none}
    .nav-right-desktop{display:none}
    .nav-toggle{display:flex}
    .site-nav{padding:0 1.25rem}
    /* Logo stays centered via grid justify-self:center */
}

/* === HERO === */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;text-align:center;padding:6rem 2rem;overflow:hidden}
.hero-image{position:absolute;inset:0;background-size:cover;background-position:center;z-index:0}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,10,0.7)0%,rgba(10,10,10,0.85)50%,rgba(10,10,10,0.95)100%);z-index:1}
.hero-content{position:relative;z-index:2;max-width:800px}
.hero-tagline{font-size:0.7rem;font-weight:500;letter-spacing:0.3em;text-transform:uppercase;color:var(--color-gold);margin-bottom:1.5rem}
.hero-heading{margin-bottom:1.5rem}
.hero-heading .gold{color:var(--color-gold);font-style:italic}
.hero-subtitle{font-size:1.1rem;font-weight:300;color:var(--color-text-muted);max-width:520px;margin:0 auto 2.5rem;line-height:1.8}
.hero-actions{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}

/* === CLINICAL THEME HERO READABILITY === */
[data-theme="clinical"] .hero-heading{
    color:#000000;font-weight:400;
    text-shadow:0 2px 24px rgba(0,0,0,0.5),0 0 40px rgba(0,0,0,0.2);
}
[data-theme="clinical"] .hero-heading .gold{
    color:#5C4400;font-weight:600;
    text-shadow:0 2px 16px rgba(0,0,0,0.5),0 0 24px rgba(0,0,0,0.3);
}
[data-theme="clinical"] .hero-tagline{
    color:#5C4400;text-shadow:0 2px 12px rgba(0,0,0,0.4);font-weight:600;
}
[data-theme="clinical"] .hero-subtitle{
    color:#1A1A1A;text-shadow:0 2px 12px rgba(0,0,0,0.3);font-weight:400;
}

/* === SERVICE ROWS === */
.services-section-title{font-size:0.7rem;font-weight:500;letter-spacing:0.25em;text-transform:uppercase;color:var(--color-gold);padding:2rem 0 0.75rem;border-bottom:1px solid var(--color-border)}
.services-section-title:first-child{padding-top:0}
.service-row{display:flex;align-items:flex-start;padding:1.75rem 0;border-bottom:1px solid var(--color-border);gap:1.5rem}
.service-row:hover{border-bottom-color:var(--color-gold)}
.service-info{display:flex;gap:1rem;align-items:flex-start;flex:1;min-width:0}
.service-thumbnail{width:80px;height:80px;flex-shrink:0;border-radius:50%;border:1px solid var(--color-border);background:var(--color-surface);background-size:cover;background-position:center}
.service-text{flex:1;min-width:0}
.service-name{font-family:'Cormorant Garamond',serif;font-size:clamp(1.1rem,3vw,1.4rem);font-weight:400;color:var(--color-text-heading);margin-bottom:0.25rem}
.service-price{font-size:0.85rem;font-weight:400;color:var(--color-gold);margin-bottom:0.5rem}
.service-price .price-90min{color:var(--color-text-muted);font-weight:300}
.service-desc{font-size:0.8rem;font-weight:300;color:var(--color-text-muted);line-height:1.55;max-width:600px;word-break:normal;overflow-wrap:break-word}
.service-duration{font-size:0.75rem;color:var(--color-text-muted);margin-top:0.25rem;letter-spacing:0.05em}
.service-action{flex-shrink:0;padding-top:0.25rem}
.btn-book{background:transparent;border:1px solid var(--color-gold);color:var(--color-gold);padding:0.5rem 1.5rem;font-size:0.65rem;letter-spacing:0.15em;transition:all 0.25s;white-space:nowrap}
.btn-book:hover{background:var(--color-gold);color:var(--color-bg)}

@media(max-width:640px){
    .service-row{gap:1rem;padding:1.25rem 0}
    .service-info{gap:0.75rem}
    .service-thumbnail{width:60px;height:60px}
    .service-desc{font-size:0.75rem;line-height:1.5}
}
@media(max-width:480px){
    .service-row{flex-direction:column;gap:0.75rem}
    .service-action{align-self:flex-start}
}

/* === PRODUCT CARDS === */
.products-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:2rem}
.product-card{display:flex;flex-direction:column;background:var(--color-surface);border:1px solid var(--color-border);overflow:hidden;transition:all 0.3s}
.product-card:hover{border-color:var(--color-gold);transform:translateY(-2px)}
.product-card-image{position:relative;aspect-ratio:3/4;background:var(--color-bg-alt);display:flex;align-items:center;justify-content:center;overflow:hidden}
.product-card-image img{width:100%;height:100%;object-fit:cover;transition:transform 0.5s}
.product-card:hover .product-card-image img{transform:scale(1.03)}
.product-card-image .placeholder-img{font-size:3rem;opacity:0.15;color:var(--color-gold)}
.product-card-content{padding:1.25rem;display:flex;flex-direction:column;gap:0.75rem;flex:1}
.product-card-content h4{font-family:'Cormorant Garamond',serif;font-size:1.15rem;font-weight:400;color:var(--color-text-heading)}
.product-card-content h4 a:hover{color:var(--color-gold)}
.product-price-row{display:flex;align-items:baseline;gap:0.75rem}
.product-current-price{font-size:0.95rem;font-weight:500;color:var(--color-text)}
.product-compare-price{font-size:0.85rem;color:var(--color-text-muted);text-decoration:line-through}
.btn-add-bag{width:100%;padding:0.65rem;font-size:0.65rem;font-weight:500;letter-spacing:0.15em;text-transform:uppercase;background:var(--color-text-heading);color:var(--color-bg);border:1px solid var(--color-text-heading);transition:all 0.25s}
.btn-add-bag:hover:not(:disabled){background:var(--color-gold);border-color:var(--color-gold);color:var(--color-bg)}
.btn-add-bag:disabled{opacity:0.4;cursor:not-allowed}
.sale-badge{position:absolute;top:0.75rem;left:0.75rem;background:var(--color-gold);color:var(--color-bg);font-size:0.6rem;font-weight:600;letter-spacing:0.15em;padding:0.3rem 0.6rem;text-transform:uppercase}

/* === FORMS === */
.form-group{margin-bottom:1.5rem}
.form-label{display:block;font-size:0.7rem;font-weight:400;letter-spacing:0.12em;text-transform:uppercase;margin-bottom:0.5rem;color:var(--color-text-muted)}
.form-input,.form-textarea,.form-select{width:100%;padding:0.75rem 1rem;font-size:0.95rem;font-weight:300;background:var(--color-input-bg);border:1px solid var(--color-input-border);color:var(--color-text);outline:none;transition:border-color 0.2s}
.form-input:focus,.form-textarea:focus{border-color:var(--color-input-focus);box-shadow:0 0 0 1px var(--color-input-focus)}
.form-textarea{min-height:120px;resize:vertical;line-height:1.7}
.form-input::placeholder,.form-textarea::placeholder{color:var(--color-text-muted);opacity:0.6}

/* === FOOTER === */
.site-footer{border-top:1px solid var(--color-border);padding:4rem 2rem 2rem;background:var(--color-bg-alt)}
.footer-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:3rem;max-width:1200px;margin:0 auto}
@media(max-width:768px){.footer-grid{grid-template-columns:1fr 1fr;gap:2rem}}
@media(max-width:480px){.footer-grid{grid-template-columns:1fr}}
.footer-brand p{margin-top:1rem;font-size:0.85rem;color:var(--color-text-muted);line-height:1.8}
.footer-heading{font-family:'Inter',sans-serif;font-size:0.65rem;font-weight:500;letter-spacing:0.2em;text-transform:uppercase;color:var(--color-gold);margin-bottom:1rem}
.footer-links{display:flex;flex-direction:column;gap:0.5rem}
.footer-links a{font-size:0.85rem;color:var(--color-text-muted)}
.footer-links a:hover{color:var(--color-gold)}
.footer-bottom{text-align:center;padding-top:2rem;margin-top:3rem;border-top:1px solid var(--color-border);max-width:1200px;margin-left:auto;margin-right:auto;font-size:0.75rem;color:var(--color-text-muted);display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:0.5rem 1.5rem}
.footer-legal{display:flex;gap:1.5rem;align-items:center}
.footer-legal a{color:var(--color-text-muted);text-decoration:underline;font-size:0.75rem}
.footer-legal a:hover{color:var(--color-gold)}
.ccpa-link{font-weight:500}
@media(max-width:640px){.footer-bottom{flex-direction:column;gap:0.5rem}}

/* === NEWSLETTER === */
.newsletter-form{display:flex;gap:0.75rem;max-width:480px;margin:0 auto}
.newsletter-form input{flex:1}
@media(max-width:480px){.newsletter-form{flex-direction:column}}

/* === CTA === */
.cta-section{padding:5rem 2rem;text-align:center;background:radial-gradient(ellipse at center,var(--color-gold-subtle)0%,transparent 70%)}
.cta-section h2{margin-bottom:1rem}
.cta-section p{max-width:480px;margin:0 auto 2rem;color:var(--color-text-muted)}

/* === ABOUT === */
.about-preview{display:flex;flex-direction:column;gap:2rem;align-items:center}
.about-header{text-align:center}
.about-row{display:grid;grid-template-columns:300px 1fr;gap:3rem;align-items:start;width:100%;max-width:900px}
.about-image{width:100%}
.about-image .image-frame{border-radius:4px;overflow:hidden}
.stats-bar{display:flex;gap:2rem;margin-bottom:1.5rem;flex-wrap:wrap}
.about-body{text-align:left}
@media(max-width:768px){.about-preview{display:flex!important;flex-direction:column!important;gap:1rem!important;align-items:center!important}.about-header{text-align:center!important;width:100%!important}.about-row{display:flex!important;flex-direction:column!important;gap:1rem!important;align-items:center!important;order:2!important}.about-image{width:100%!important;text-align:center!important;display:block!important;float:none!important;margin:0!important}.about-image .image-frame{width:min(85vw,280px)!important;margin:0 auto!important;aspect-ratio:3/4!important}.about-image .image-frame img{width:100%!important;height:100%!important;object-fit:cover!important;display:block!important}.about-row .gold-line{margin:1rem auto!important}.stats-bar{justify-content:center!important;gap:1.5rem!important}.stats-bar>div{text-align:center!important}.about-body{text-align:center!important;width:100%!important}}
.about-body p{font-size:0.95rem;line-height:1.8;color:var(--color-text);margin-bottom:1.5rem}
.about-image .image-frame{aspect-ratio:3/4;background:var(--color-surface);overflow:hidden}
.about-image .image-frame img{width:100%;height:100%;object-fit:cover;display:block}
.image-placeholder{font-size:5rem;opacity:0.15;color:var(--color-gold)}

/* === GALLERY === */
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem}
.gallery-item{aspect-ratio:1;background:var(--color-surface);overflow:hidden;position:relative;cursor:pointer;border:1px solid var(--color-border)}
.gallery-item img{width:100%;height:100%;object-fit:cover;transition:transform 0.5s}
.gallery-item:hover img{transform:scale(1.05)}
.gallery-item-overlay{position:absolute;bottom:0;left:0;right:0;padding:1.5rem 1rem;background:linear-gradient(transparent,rgba(0,0,0,0.8));opacity:0;transition:opacity 0.3s}
.gallery-item:hover .gallery-item-overlay{opacity:1}
.gallery-item-overlay span{font-size:0.75rem;color:white;letter-spacing:0.05em}

/* === TESTIMONIAL === */
.testimonial{max-width:640px;margin:0 auto;text-align:center}
.testimonial-text{font-family:'Cormorant Garamond',serif;font-size:clamp(1.1rem,2vw,1.4rem);font-weight:300;font-style:italic;line-height:1.8;color:var(--color-text);margin-bottom:1.5rem}
.testimonial-author{font-size:0.85rem;font-weight:400;color:var(--color-text-heading)}
.testimonial-stars{margin-top:0.75rem;letter-spacing:4px;font-size:0.9rem}

/* === FAQ === */
.faq-item{border-bottom:1px solid var(--color-border)}
.faq-question{width:100%;display:flex;align-items:center;justify-content:space-between;padding:1.25rem 0;font-family:'Cormorant Garamond',serif;font-size:1.15rem;font-weight:400;color:var(--color-text-heading);text-align:left}
.faq-question:hover{color:var(--color-gold)}
.faq-icon{color:var(--color-gold);font-size:1.2rem;margin-left:1rem;transition:transform 0.3s}
.faq-item.is-open .faq-icon{transform:rotate(45deg)}
.faq-answer{max-height:0;overflow:hidden;transition:max-height 0.4s}
.faq-item.is-open .faq-answer{max-height:500px;padding-bottom:1.25rem}
.faq-answer p{font-size:0.9rem;color:var(--color-text-muted);line-height:1.8;padding-right:2rem}

/* === SCROLL ANIMATIONS === */
.fade-in{opacity:0;transform:translateY(24px);transition:opacity 0.7s,transform 0.7s}
.fade-in.is-visible{opacity:1;transform:translateY(0)}
.fade-in-delay-1{transition-delay:0.1s}
.fade-in-delay-2{transition-delay:0.2s}
.fade-in-delay-3{transition-delay:0.3s}

/* Clinical theme hero readability fix */
[data-theme="clinical"] .hero-overlay {
    background: linear-gradient(180deg, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0.75) 50%, rgba(255,255,255,0.9) 100%);
}
[data-theme="clinical"] .hero-heading .gold {
    color: #6B5000;
    text-shadow: 0 0 20px rgba(255,255,255,0.5);
}
[data-theme="clinical"] .hero-heading {
    color: #1a1a1a;
    text-shadow: 0 1px 10px rgba(255,255,255,0.3);
}


[data-theme="clinical"] .hero-overlay {
    background: linear-gradient(180deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.7) 50%, rgba(255,255,255,0.85) 100%);
}
[data-theme="clinical"] .hero-heading { color: #111; }
[data-theme="clinical"] .hero-heading .gold { color: #5C4200; }
[data-theme="clinical"] .hero-tagline { color: #5C4200; }
/* =============================================
   Product Detail — Accordion Tabs Layout
   ============================================= */

/* === Hero === */
.pd-hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    align-items: start;
    margin-bottom: 1.5rem;
}


.pd-hero-image img {
    width: 100%;
    max-height: 520px;
    object-fit: cover;
    border-radius: 12px;
    display: block;
}

.pd-hero-placeholder {
    width: 100%;
    min-height: 380px;
    max-height: 520px;
    background: var(--color-surface);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pd-hero-placeholder span {
    font-size: 3rem;
    color: var(--color-gold);
    opacity: 0.15;
}

.pd-hero-desc {
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--color-text-body);
}

.pd-price-row {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
}

.product-current-price {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--color-text-heading);
}

.product-compare-price {
    font-size: 1rem;
    color: var(--color-text-muted);
    text-decoration: line-through;
}

.pd-hero-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    margin-top: 1rem;
}

.pd-hero-badges .pd-badge {
    font-size: 0.82rem;
    color: var(--color-gold);
    font-weight: 500;
    letter-spacing: 0.3px;
    padding: 0.25rem 0.6rem;
    background: rgba(201, 169, 110, 0.06);
    border-radius: 50px;
}

/* === Notify Me === */
.notify-me-form { max-width: 360px; }
.notify-text { font-size: 0.8rem; color: var(--color-text-muted); margin: 0 0 0.5rem; }
.notify-row { display: flex; gap: 0.5rem; }
.notify-input { flex: 1; padding: 0.55rem 0.8rem; background: var(--color-input-bg); border: 1px solid var(--color-input-border); border-radius: 6px; color: var(--color-text); font-size: 0.85rem; }
.notify-btn { padding: 0.55rem 1rem; background: var(--color-gold); color: #1a1a1a; border: none; border-radius: 6px; font-size: 0.75rem; font-weight: 600; cursor: pointer; letter-spacing: 0.5px; }
.notify-ok { font-size: 0.8rem; color: #22c55e; margin-top: 0.5rem; }

/* === Quantity === */
.quantity-selector { display: inline-flex; align-items: center; gap: 0; }
.qty-btn { width: 36px; height: 36px; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); font-size: 1.1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.qty-btn:first-child { border-radius: 8px 0 0 8px; }
.qty-btn:last-child { border-radius: 0 8px 8px 0; }
.qty-val { width: 44px; height: 36px; text-align: center; line-height: 36px; font-size: 0.9rem; font-weight: 600; color: var(--color-text-heading); background: var(--color-surface); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }

/* === Accordion Tabs === */
.pd-accordion {
    max-width: 720px;
    margin: 0 auto;
    border-top: 1px solid var(--color-border);
}

.pd-accordion-item {
    border-bottom: 1px solid var(--color-border);
}

.pd-accordion-toggle {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.1rem 0;
    background: none;
    border: none;
    color: var(--color-text);
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    font-family: 'Inter', sans-serif;
    letter-spacing: 0.3px;
    transition: color 0.2s;
}

.pd-accordion-toggle:hover {
    color: var(--color-gold);
}

.pd-chevron {
    color: var(--color-gold);
    font-size: 0.8rem;
    transition: transform 0.3s;
}

.pd-accordion-body {
    max-height: 0;
    overflow: hidden;
    padding: 0;
    font-size: 0.9rem;
    line-height: 1.7;
    color: var(--color-text-body);
    transition: max-height 0.4s ease, padding 0.4s ease;
}

.pd-accordion-open .pd-accordion-body {
    padding-bottom: 1.25rem;
    padding-top: 0.25rem;
}

.pd-accordion-open .pd-chevron {
    transform: rotate(180deg);
    transition: transform 0.4s ease-out;
}

.pd-accordion-sub {
    font-size: 0.83rem;
    color: var(--color-text-muted);
    font-style: italic;
    margin: 0 0 0.75rem;
}

/* Benefits grid */
.pd-benefits-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem 1.25rem;
}

.pd-benefit-item {
    display: flex;
    gap: 0.5rem;
    font-size: 0.88rem;
    line-height: 1.45;
    color: var(--color-text-body);
}

.pd-benefit-star {
    color: var(--color-gold);
    font-size: 0.75rem;
    flex-shrink: 0;
    margin-top: 0.15rem;
}

/* Checklist (Is This For You) */
.pd-checklist {
    list-style: none;
    padding: 0;
    margin: 0;
}

.pd-checklist li {
    display: flex;
    gap: 0.6rem;
    padding: 0.4rem 0;
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--color-text-body);
}

.pd-checklist li + li { border-top: 1px solid rgba(255,255,255,0.03); }

.pd-check-icon {
    color: var(--color-gold);
    font-size: 0.65rem;
    flex-shrink: 0;
    margin-top: 0.3rem;
}

/* Ingredient items */
.pd-ingredient {
    padding: 0.5rem 0;
}

.pd-ingredient + .pd-ingredient { border-top: 1px solid rgba(255,255,255,0.03); }

.pd-ingredient strong {
    color: var(--color-gold);
    font-size: 0.9rem;
    font-weight: 600;
}

.pd-ingredient p {
    margin: 0.2rem 0 0;
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--color-text-body);
}

/* Nikki section */
.pd-nikki-text {
    font-size: 0.9rem;
    line-height: 1.7;
    color: var(--color-text-body);
    font-style: italic;
    margin: 0;
}

.pd-nikki-sig {
    font-size: 0.82rem;
    color: var(--color-gold);
    font-style: italic;
    margin: 0.75rem 0 0;
}

/* How To Use list */
.pd-howto {
    padding-left: 1.2rem;
    margin: 0;
}

.pd-howto li {
    font-size: 0.88rem;
    line-height: 1.6;
    color: var(--color-text-body);
    margin-bottom: 0.4rem;
}

/* Common Mistakes */
.pd-mistake {
    display: flex;
    gap: 0.6rem;
    padding: 0.5rem 0;
    align-items: flex-start;
}

.pd-mistake + .pd-mistake { border-top: 1px solid rgba(255,255,255,0.03); }

.pd-mistake-x {
    color: #dc3545;
    font-size: 0.85rem;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.pd-mistake > div { flex: 1; }

.pd-mistake > div strong {
    font-size: 0.88rem;
    color: var(--color-text);
}

.pd-mistake > div p {
    font-size: 0.82rem;
    color: var(--color-text-muted);
    margin: 0.15rem 0 0;
    line-height: 1.4;
}

/* Skip if */
.pd-skip-if {
    font-size: 0.82rem;
    color: var(--color-text-muted);
    padding: 0.6rem 0.8rem;
    background: rgba(220, 53, 69, 0.04);
    border-left: 2px solid rgba(220, 53, 69, 0.3);
    border-radius: 0 6px 6px 0;
}

/* Reviews */
.pd-review {
    background: var(--color-surface);
    border-radius: 8px;
    padding: 0.8rem 1rem;
    margin-bottom: 0.6rem;
}

/* Star selector */
.pd-star-selector { margin-bottom: 0.25rem; }
.pd-star { cursor: pointer; font-size: 1.3rem; margin-right: 0.2rem; color: #444; transition: color 0.15s; }
.pd-star:hover { color: var(--color-gold); }

/* Form inputs */
.pd-form-input {
    width: 100%;
    background: var(--color-input-bg);
    border: 1px solid var(--color-input-border);
    border-radius: 6px;
    color: var(--color-text);
    padding: 0.5rem 0.7rem;
    font-size: 0.85rem;
    font-family: 'Inter', sans-serif;
}

.pd-form-input:focus {
    outline: none;
    border-color: var(--color-gold);
}

/* FAQ inside reviews */
.pd-faq-q {
    width: 100%;
    background: none;
    border: none;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    padding: 0.75rem 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    color: var(--color-text);
    font-size: 0.88rem;
    text-align: left;
}

.pd-faq-q:hover { color: var(--color-gold); }
.pd-faq-chevron { color: var(--color-gold); font-size: 0.75rem; transition: transform 0.2s; }
.pd-faq-q.open .pd-faq-chevron { transform: rotate(180deg); }

.pd-faq-a {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--color-text-muted);
    padding: 0;
}

.pd-faq-a.open {
    max-height: 500px;
    padding: 0.5rem 0;
}

/* === Responsive === */
@media (max-width: 768px) {
    .pd-hero {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .pd-hero-image img {
        max-width: 100%;
    }

    .pd-benefits-grid {
        grid-template-columns: 1fr;
    }
}