/*
Theme Name: Noir Essence
Theme URI: https://noiressence.example.com
Author: Noir Essence
Author URI: https://noiressence.example.com
Description: A luxury perfume brand theme for WordPress + WooCommerce. Cream-and-gold editorial design with Playfair Display headings, white rounded-card surfaces and pill buttons. Includes styled WooCommerce shop, product, cart, checkout and account pages plus one-click starter content.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: noir-essence
Tags: e-commerce, custom-menu, featured-images, full-width-template, translation-ready
WC requires at least: 7.0
WC tested up to: 8.7
*/

/* ===========================================================
   Design tokens — Noir Essence
   =========================================================== */
:root {
  --ne-bg: #F5F0EB;
  --ne-surface: #ffffff;
  --ne-foreground: #2b2b2b;
  --ne-muted: #7a736b;
  --ne-accent: #8B7355;
  --ne-accent-dark: #735d44;
  --ne-error: #b3261e;
  --ne-border: #E8E2DB;
  --ne-soft: #F5F0EB;
  --ne-radius-lg: 28px;
  --ne-radius-md: 18px;
  --ne-radius-sm: 12px;
  --ne-font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --ne-font-sans: 'Geist', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --ne-maxw: 1152px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ne-bg);
  color: var(--ne-foreground);
  font-family: var(--ne-font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-family: var(--ne-font-serif); font-weight: 500; color: var(--ne-foreground); line-height: 1.12; margin: 0 0 .5em; }
.ne-serif { font-family: var(--ne-font-serif); }
.ne-muted { color: var(--ne-muted); }

/* Layout helpers */
.ne-container { max-width: var(--ne-maxw); margin: 0 auto; }
.ne-section { padding: 48px 16px; }
@media (min-width: 768px){ .ne-section { padding: 64px 24px; } }
@media (min-width: 1024px){ .ne-section { padding: 64px 48px; } }
.ne-card { background: var(--ne-surface); border-radius: var(--ne-radius-lg); padding: 32px; }
@media (min-width: 768px){ .ne-card { padding: 48px; } }
@media (min-width: 1024px){ .ne-card { padding: 64px; } }

/* Eyebrow + divider */
.ne-eyebrow { display: block; color: var(--ne-accent); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; margin-bottom: 12px; }
.ne-divider { width: 32px; height: 1px; background: var(--ne-accent); border: 0; margin: 0 0 24px; }
.ne-section-head { text-align: center; margin-bottom: 48px; }
.ne-section-head .ne-divider { margin-left: auto; margin-right: auto; }
.ne-section-head h1, .ne-section-head h2 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 16px; }
.ne-section-head p { color: var(--ne-muted); max-width: 32rem; margin: 0 auto; }

/* Buttons (pill) */
.ne-btn, a.ne-btn, button.ne-btn {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--ne-foreground); color: #fff; padding: 16px 32px; border-radius: 999px;
  border: 1px solid var(--ne-foreground); font-size: 13px; letter-spacing: .1em; text-transform: uppercase;
  cursor: pointer; transition: opacity .2s ease, background .2s ease, color .2s ease; font-family: var(--ne-font-sans);
}
.ne-btn:hover { background: #000; color: #fff; }
.ne-btn--outline { background: transparent; color: var(--ne-foreground); border-color: rgba(43,43,43,.2); }
.ne-btn--outline:hover { background: rgba(43,43,43,.05); color: var(--ne-foreground); }
.ne-btn .ne-arrow { font-size: 16px; line-height: 1; }

/* Header */
.ne-header { max-width: 100%; padding: 20px 24px; }
@media (min-width:768px){ .ne-header { padding: 24px 48px; } }
@media (min-width:1024px){ .ne-header { padding: 24px 64px; } }
.ne-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.ne-logo { font-family: var(--ne-font-serif); font-size: 22px; font-weight: 500; letter-spacing: -.01em; color: var(--ne-foreground); }
@media (min-width:768px){ .ne-logo { font-size: 26px; } }
.ne-nav { display: none; align-items: center; gap: 40px; }
@media (min-width:768px){ .ne-nav { display: flex; } }
.ne-nav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 40px; }
.ne-nav a { font-size: 14px; color: var(--ne-foreground); transition: color .2s ease; }
.ne-nav a:hover { color: var(--ne-muted); }
.ne-nav .current-menu-item > a, .ne-nav .current_page_item > a, .ne-nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; }
.ne-header__icons { display: flex; align-items: center; gap: 20px; }
.ne-icon-link { position: relative; display: inline-flex; color: var(--ne-foreground); transition: opacity .2s ease; }
.ne-icon-link:hover { opacity: .7; }
.ne-cart-count { position: absolute; top: -6px; right: -8px; min-width: 16px; height: 16px; padding: 0 3px; background: var(--ne-foreground); color: #fff; font-size: 10px; line-height: 16px; text-align: center; border-radius: 999px; font-family: var(--ne-font-sans); }
.ne-menu-toggle { background: none; border: 0; padding: 0; cursor: pointer; color: var(--ne-foreground); display: inline-flex; }
@media (min-width:768px){ .ne-menu-toggle { display: none; } }
.ne-search-toggle { background: none; border: 0; padding: 0; cursor: pointer; }

/* Inline header search bar (desktop) */
.ne-header__search { display: none; align-items: center; gap: 6px; flex: 1 1 auto; min-width: 0; margin: 0 40px; background: #fff; border: 1px solid var(--ne-border); border-radius: 999px; padding: 8px 8px 8px 20px; transition: border-color .2s ease, box-shadow .2s ease; }
@media (min-width: 1024px) { .ne-header__search { display: flex; } }
@media (min-width: 1024px) { .ne-search-toggle { display: none; } }
.ne-header__search:focus-within { border-color: var(--ne-accent); box-shadow: 0 0 0 3px rgba(139,115,85,.12); }
.ne-header__search-input { flex: 1; min-width: 0; border: 0; background: transparent; font-family: var(--ne-font-sans); font-size: 14px; color: var(--ne-foreground); }
.ne-header__search-input:focus { outline: none; }
.ne-header__search-input::placeholder { color: var(--ne-muted); opacity: 1; }
.ne-header__search-btn { flex: 0 0 auto; width: 36px; height: 36px; border: 0; border-radius: 999px; background: var(--ne-foreground); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background .2s ease; }
.ne-header__search-btn:hover { background: #000; }

/* Site-wide search overlay */
.ne-search-overlay { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-start; justify-content: center; padding: 18vh 24px 24px; background: rgba(245,240,235,.97); opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s ease; }
@supports (backdrop-filter: blur(4px)) { .ne-search-overlay { backdrop-filter: blur(6px); } }
.ne-search-overlay.is-open { opacity: 1; visibility: visible; }
.ne-search-overlay__close { position: absolute; top: 24px; right: 24px; background: none; border: 0; cursor: pointer; color: var(--ne-foreground); display: inline-flex; transition: opacity .2s ease; }
.ne-search-overlay__close:hover { opacity: .6; }
.ne-search-overlay__inner { width: 100%; max-width: 640px; text-align: center; }
.ne-search-overlay__inner .ne-eyebrow { margin-bottom: 16px; }
.ne-search-form { display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--ne-accent); padding-bottom: 14px; }
.ne-search-form__input { flex: 1; min-width: 0; border: 0; background: transparent; font-family: var(--ne-font-serif); font-size: clamp(1.5rem, 4vw, 2.25rem); color: var(--ne-foreground); }
.ne-search-form__input:focus { outline: none; }
.ne-search-form__input::placeholder { color: var(--ne-muted); opacity: 1; }
.ne-search-form__submit { background: none; border: 0; cursor: pointer; color: var(--ne-accent); display: inline-flex; padding: 0; }
.ne-search-form__hint { margin: 16px 0 0; font-size: 13px; letter-spacing: .04em; }

/* Drawer */
.ne-drawer-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.3); opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s ease; z-index: 40; }
.ne-drawer-overlay.is-open { opacity: 1; visibility: visible; }
.ne-drawer { position: fixed; top: 0; right: 0; height: 100%; width: 100%; max-width: 28rem; background: #fff; z-index: 50; transform: translateX(100%); transition: transform .3s ease; display: flex; flex-direction: column; padding: 32px; }
@media (min-width:768px){ .ne-drawer { padding: 48px; } }
.ne-drawer.is-open { transform: translateX(0); }
.ne-drawer__close { align-self: flex-end; background: none; border: 0; cursor: pointer; margin-bottom: 32px; color: var(--ne-foreground); }
.ne-drawer__nav { flex: 1; }
.ne-drawer__nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 24px; }
.ne-drawer__nav a { font-family: var(--ne-font-serif); font-size: 30px; color: var(--ne-foreground); transition: color .2s ease; }
@media (min-width:768px){ .ne-drawer__nav a { font-size: 36px; } }
.ne-drawer__nav a:hover { color: var(--ne-muted); }
.ne-drawer__footer { padding-top: 32px; border-top: 1px solid var(--ne-border); }
.ne-drawer__footer .ne-social { display: flex; gap: 16px; margin-top: 8px; }
.ne-drawer__footer .ne-social a:hover { opacity: .7; }

/* Hero */
.ne-hero .ne-hero__card { background: #fff; border-radius: var(--ne-radius-lg); overflow: hidden; }
.ne-hero__grid { display: grid; grid-template-columns: 1fr; }
@media (min-width:768px){ .ne-hero__grid { grid-template-columns: 1fr 1fr; } }
.ne-hero__content { padding: 32px; display: flex; flex-direction: column; justify-content: center; }
@media (min-width:768px){ .ne-hero__content { padding: 48px; } }
@media (min-width:1024px){ .ne-hero__content { padding: 64px; } }
.ne-hero__content h1 { font-size: clamp(2.25rem, 5vw, 3.75rem); line-height: 1.1; margin-bottom: 24px; }
.ne-hero__content p { color: var(--ne-muted); max-width: 28rem; margin-bottom: 40px; }
.ne-hero__actions { display: flex; flex-direction: column; gap: 16px; }
@media (min-width:640px){ .ne-hero__actions { flex-direction: row; } }
.ne-hero__actions .ne-btn { width: 100%; }
@media (min-width:640px){ .ne-hero__actions .ne-btn { width: 200px; } }
.ne-hero__media { position: relative; min-height: 320px; }
@media (min-width:768px){ .ne-hero__media { min-height: 460px; } }
.ne-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; position: absolute; inset: 0; }

/* Product grid */
.ne-collection-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 40px; gap: 16px; }
.ne-collection-head h2 { font-size: clamp(1.75rem, 3vw, 2.25rem); margin: 8px 0 0; }
.ne-viewall { font-size: 14px; text-decoration: underline; text-underline-offset: 4px; color: var(--ne-foreground); white-space: nowrap; }
.ne-viewall:hover { color: var(--ne-muted); }
.ne-grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width:640px){ .ne-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width:1024px){ .ne-grid { grid-template-columns: repeat(3, 1fr); } }
.ne-product-card { display: block; }
.ne-product-card__media { background: #fff; border-radius: var(--ne-radius-md); overflow: hidden; aspect-ratio: 1 / 1; }
.ne-product-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.ne-product-card:hover .ne-product-card__media img { transform: scale(1.05); }
.ne-product-card__body { padding: 20px 4px 0; }
.ne-product-card__title { font-family: var(--ne-font-serif); font-size: 18px; margin: 0; }
.ne-product-card__meta { color: var(--ne-muted); font-size: 14px; margin: 4px 0 0; }
.ne-product-card__price { color: var(--ne-foreground); font-weight: 500; margin-top: 12px; }
.ne-product-card__price del { color: var(--ne-muted); font-weight: 400; margin-right: 8px; }

/* Content / page */
.ne-prose p { color: var(--ne-muted); margin: 0 0 16px; }
.ne-prose h2, .ne-prose h3 { color: var(--ne-foreground); margin-top: 32px; }
.ne-two-col { display: grid; grid-template-columns: 1fr; gap: 48px; align-items: center; }
@media (min-width:768px){ .ne-two-col { grid-template-columns: 1fr 1fr; } }
.ne-figure { position: relative; aspect-ratio: 4/5; border-radius: var(--ne-radius-md); overflow: hidden; background: var(--ne-soft); }
.ne-figure img { width: 100%; height: 100%; object-fit: cover; }
.ne-values { border-top: 1px solid var(--ne-border); padding-top: 48px; margin-top: 16px; }
.ne-values__grid { display: grid; grid-template-columns: 1fr; gap: 32px; }
@media (min-width:640px){ .ne-values__grid { grid-template-columns: repeat(3,1fr); } }
.ne-value { text-align: center; }
.ne-value__icon { width: 64px; height: 64px; border-radius: 999px; background: var(--ne-soft); display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; }
.ne-value h3 { font-family: var(--ne-font-sans); font-weight: 500; font-size: 16px; margin-bottom: 8px; }
.ne-value p { color: var(--ne-muted); font-size: 14px; margin: 0; }

/* Contact form */
.ne-form { max-width: 32rem; margin: 0 auto; }
.ne-field { margin-bottom: 24px; }
.ne-field label { display: block; font-size: 14px; font-weight: 500; margin-bottom: 8px; }
.ne-input, .ne-textarea { width: 100%; padding: 12px 16px; border: 1px solid var(--ne-border); background: #fff; border-radius: 999px; font-family: inherit; font-size: 15px; color: var(--ne-foreground); transition: border-color .2s ease, box-shadow .2s ease; }
.ne-textarea { border-radius: var(--ne-radius-sm); resize: vertical; min-height: 140px; }
.ne-input:focus, .ne-textarea:focus { outline: none; border-color: var(--ne-accent); box-shadow: 0 0 0 3px rgba(139,115,85,.15); }
.ne-form .ne-btn { width: 100%; margin-top: 8px; }
.ne-contact-info { border-top: 1px solid var(--ne-border); margin-top: 48px; padding-top: 48px; }
.ne-contact-info__grid { display: grid; grid-template-columns: 1fr; gap: 32px; text-align: center; }
@media (min-width:640px){ .ne-contact-info__grid { grid-template-columns: repeat(3,1fr); } }
.ne-contact-info h3 { font-family: var(--ne-font-sans); font-weight: 500; font-size: 16px; margin-bottom: 8px; }
.ne-contact-info p { color: var(--ne-muted); font-size: 14px; margin: 0; }

/* Footer */
.ne-footer { padding: 56px 24px; }
@media (min-width:768px){ .ne-footer { padding: 72px 48px; } }
.ne-footer__inner { max-width: var(--ne-maxw); margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 40px; }
@media (min-width:768px){ .ne-footer__inner { grid-template-columns: 2fr 1fr 1fr; } }
.ne-footer__brand .ne-logo { display: inline-block; margin-bottom: 16px; }
.ne-footer__brand p { color: var(--ne-muted); max-width: 22rem; font-size: 14px; }
.ne-footer h4 { font-family: var(--ne-font-sans); font-weight: 500; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 16px; }
.ne-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ne-footer ul a { color: var(--ne-muted); font-size: 14px; }
.ne-footer ul a:hover { color: var(--ne-foreground); }
.ne-footer__bottom { max-width: var(--ne-maxw); margin: 40px auto 0; padding-top: 24px; border-top: 1px solid var(--ne-border); display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: center; }
.ne-footer__bottom p { color: var(--ne-muted); font-size: 13px; margin: 0; }
.ne-footer__social { display: flex; gap: 16px; }
.ne-footer__social a { color: var(--ne-foreground); }
.ne-footer__social a:hover { opacity: .7; }

/* Accessibility */
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 16px; top: 16px; background: #fff; padding: 8px 16px; border-radius: 8px; z-index: 100; }