/*
Theme Name: Elessi Theme Child
Theme URI: https://elessi.nasatheme.com/demo/
Description: This is a child theme for Elessi Theme
Author: NasaTheme team
Author URI: https://nasatheme.com
Template: elessi-theme
Version: 1.0
*/
/*************** ADD YOUR CUSTOM CSS IN THIS AREA ***************/


/* ============================================================
   WAJD FRAGRANCES — MASTER CSS
   Child Theme: Elessi Child
   Last updated: June 2026
   All selectors verified against live HTML source
   ============================================================ */


/* ─────────────────────────────────────────────────────────────
   1. GLOBAL — Box model & overflow
   ───────────────────────────────────────────────────────────── */

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

html, body {
  overflow-x: hidden;
  max-width: 100%;
}

@media (max-width: 767px) {
  .wpb_row,
  section,
  .container {
    max-width: 100% !important;
    overflow-x: hidden;
  }
}


/* ─────────────────────────────────────────────────────────────
   2. GLOBAL — CSS Variables
   ───────────────────────────────────────────────────────────── */

:root {
  --gold:       #C4A96A;
  --gold-light: #D4BC8A;
  --bg:         #080808;
  --surface:    #111111;
  --border:     rgba(196, 169, 106, 0.18);
  --text:       #F0EDE6;
  --text-muted: rgba(240, 237, 230, 0.5);
  --serif:      'Cormorant Garamond', Georgia, serif;
  --sans:       'Montserrat', system-ui, sans-serif;
}


/* ─────────────────────────────────────────────────────────────
   3. GLOBAL — Typography
   ───────────────────────────────────────────────────────────── */

body, p, span, div, li, a, td, th,
label, input, textarea, select, button,
.nasa-main-nav a, footer, .nasa-footer,
.woocommerce-Price-amount, .price,
.widget, .widget-title, .footer-widget {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 300 !important;
}

h1, h2, h3, h4, h5, h6,
.product-title,
.woocommerce-loop-product__title,
.entry-title {
  font-family: 'Cormorant Garamond', serif !important;
  font-weight: 400 !important;
}

button, .button, input[type="submit"],
.nasa-btn, .wc-proceed-to-checkout,
.single_add_to_cart_button {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}

.badge.new-label {
  background-color: transparent !important;
  border: 1px solid #C4A96A !important;
  color: #C4A96A !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 300 !important;
  font-size: 10px !important;
  letter-spacing: 0.1em !important;
  border-radius: 0 !important;
}


/* ─────────────────────────────────────────────────────────────
   4. GLOBAL — Slider Revolution
   ───────────────────────────────────────────────────────────── */

.rev_slider_wrapper,
.rev_slider {
  width: 100% !important;
}


/* ─────────────────────────────────────────────────────────────
   5. MOBILE — Top bar
   Selector: #top-bar (ID, not .topbar or .top-bar which are wrong/too broad)
   ───────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
  #top-bar {
    display: none !important;
  }
}


/* ─────────────────────────────────────────────────────────────
   6. MOBILE — Hero slider text layers
   ───────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
  .rev_slider .tp-caption {
    font-size: 14px !important;
    white-space: normal !important;
  }

  .rev_slider .tp-caption a {
    padding: 10px 20px !important;
    font-size: 12px !important;
  }

  .rev_slider img,
  .rev_slider svg {
    width: 100% !important;
    height: auto !important;
    object-fit: cover;
  }
}


/* ─────────────────────────────────────────────────────────────
   7. MOBILE — Editorial sections (LAYL / SABAH / BARR)
   HTML: .nasa-row.fullwidth > .large-6.nasa-col.columns
   These are Foundation grid columns, NOT WPBakery Bootstrap columns
   ───────────────────────────────────────────────────────────── */

@media (max-width: 767px) {

  /* Stack Foundation columns into a single flex column */
  .nasa-row.fullwidth {
    display: flex !important;
    flex-direction: column !important;
  }

  /* All large-6 columns go full width */
  .nasa-row.fullwidth > .large-6.nasa-col.columns {
    width: 100% !important;
    float: none !important;
    clear: both;
  }

  /* Image column always renders first on mobile */
  .nasa-row.fullwidth > .large-6.nasa-col.columns:has(img) {
    order: 1 !important;
  }

  /* Text column always renders second */
  .nasa-row.fullwidth > .large-6.nasa-col.columns:has(.wpb_text_column) {
    order: 2 !important;
  }

  /* Images fill full width */
  .nasa-row.fullwidth > .large-6.nasa-col.columns img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
  }

  /* Remove figure padding */
  .nasa-row.fullwidth figure.wpb_wrapper.vc_figure {
    padding: 0 !important;
  }

  /* Collapse WPBakery vertical spacers (height: 100px inline) */
  .nasa-row.fullwidth .vc_empty_space {
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Outer text column wrapper */
  .nasa-row.fullwidth .wpb_text_column.wpb_content_element {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* Override the hardcoded inline styles:
     LAYL/BARR: style="padding: 48px 40px; margin-right: 150px;"
     SABAH:     style="padding: 40px 48px; margin-left: 150px;"
     Attribute selectors beat inline styles when combined with !important */
  .nasa-row.fullwidth .wpb_text_column div[style*="margin-right: 150px"],
  .nasa-row.fullwidth .wpb_text_column div[style*="margin-right:150px"],
  .nasa-row.fullwidth .wpb_text_column div[style*="margin-left: 150px"],
  .nasa-row.fullwidth .wpb_text_column div[style*="margin-left:150px"],
  .nasa-row.fullwidth .wpb_text_column > div {
    margin-right: 0 !important;
    margin-left: 0 !important;
    padding: 24px 28px 32px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Center all editorial text on mobile */
  .nasa-row.fullwidth .wpb_text_column,
  .nasa-row.fullwidth .wpb_text_column * {
    text-align: center !important;
  }

  /* Scale down the 48px inline headings */
  .nasa-row.fullwidth h1[style*="font-size: 48px"],
  .nasa-row.fullwidth h1[style*="font-size:48px"] {
    font-size: 30px !important;
    line-height: 1.2 !important;
  }

}


/* ─────────────────────────────────────────────────────────────
   8. MOBILE — Gifting section
   Scoped to: .vc_custom_1779119353504 (confirmed from live HTML)
   Avoids .row:not(.row-inner) which is too broad and breaks footer
   ───────────────────────────────────────────────────────────── */

@media (max-width: 767px) {

  .vc_custom_1779119353504 .row {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  .vc_custom_1779119353504 .large-6.nasa-col.columns {
    width: 100% !important;
    float: none !important;
    text-align: center !important;
  }

  /* Collapse the 170px spacer */
  .vc_custom_1779119353504 .vc_empty_space {
    height: 16px !important;
    min-height: 0 !important;
  }

  /* Text padding */
  .vc_custom_1779119353504 .wpb_text_column > div {
    padding: 28px 24px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  .vc_custom_1779119353504 .wpb_text_column,
  .vc_custom_1779119353504 .wpb_text_column * {
    text-align: center !important;
  }

  /* Gift image */
  .vc_custom_1779119353504 .wpb_single_image img {
    display: block !important;
    margin: 0 auto !important;
    max-width: 85% !important;
    height: auto !important;
  }

}


/* ─────────────────────────────────────────────────────────────
   9. MOBILE — Footer
   Selector: #nasa-footer (NOT .footer-area — that class does not exist)
   ───────────────────────────────────────────────────────────── */

@media (max-width: 767px) {

  #nasa-footer .nasa-col {
    width: 100% !important;
    float: none !important;
    clear: both;
    text-align: center;
    margin-bottom: 20px;
  }

  #nasa-footer .header_logo {
    max-width: 140px;
    margin: 0 auto 16px;
    display: block;
  }

  #nasa-footer .ns-social .follow-icon {
    justify-content: center !important;
  }

  #nasa-footer .nasa-footer-bottom-left,
  #nasa-footer .nasa-footer-bottom-right {
    width: 100% !important;
    float: none !important;
    text-align: center;
    margin-bottom: 12px;
  }

  /* Newsletter: stack input + button */
  #nasa-footer .wpcf7-form p {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  #nasa-footer input.nasa-footer-contact-mail {
    width: 100% !important;
    margin-bottom: 8px;
  }

}


/* ─────────────────────────────────────────────────────────────
   10. MOBILE — Touch targets (44px minimum)
   ───────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
  .header-cart a,
  .header-wishlist a,
  .header-search a,
  .nasa-bot-icons {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}


/* ─────────────────────────────────────────────────────────────
   11. MOBILE — Instagram feed
   Selector: .nasa-instagram-grid (Elessi native widget class)
   ───────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
  .nasa-instagram-grid .instagram-pics {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 4px !important;
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .nasa-instagram-grid .instagram-li {
    width: 100% !important;
    float: none !important;
  }
}


/* ─────────────────────────────────────────────────────────────
   12. WOOCOMMERCE — Shop page product grid
   ───────────────────────────────────────────────────────────── */

@media (max-width: 599px) {
  .products.columns-3,
  .products.columns-4 {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  .woocommerce-loop-product__link img {
    width: 100%;
    height: auto;
  }
}


/* ─────────────────────────────────────────────────────────────
   13. WOOCOMMERCE — Single product page
   ───────────────────────────────────────────────────────────── */

@media (max-width: 767px) {

  .woocommerce div.product {
    display: block !important;
  }

  .woocommerce div.product .woocommerce-product-gallery,
  .woocommerce div.product .summary {
    width: 100% !important;
    float: none !important;
    padding: 0 16px !important;
  }

  .woocommerce div.product .woocommerce-product-gallery {
    margin-bottom: 24px;
  }

  .woocommerce .single_add_to_cart_button {
    width: 100% !important;
    padding: 16px !important;
    font-size: 16px !important;
  }

}


/* ─────────────────────────────────────────────────────────────
   14. OUR STORY PAGE — Mobile fixes
   ───────────────────────────────────────────────────────────── */

@media (max-width: 767px) {

  /* Declaration section: add side padding */
  .section-element.nasa-row-cols-equal-height .wpb_text_column.wpb_content_element {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  .section-element.nasa-row-cols-equal-height .wpb_text_column > div {
    padding-left: 24px !important;
    padding-right: 24px !important;
    margin-right: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Restraint H2: reduce font size */
  .vc_custom_1779195772545 h2 {
    font-size: 36px !important;
    line-height: 1.3 !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  /* THE COLLECTION: reduce inline bottom padding */
  .vc_custom_1779203959301 .wpb_text_column > div {
    padding-bottom: 28px !important;
  }

  /* Footer Arabic logo */
  .footer-contact img.nasa-image,
  .row-inner .large-6 img.nasa-image {
    max-width: 160px !important;
    width: 160px !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto 16px !important;
  }

}


/* ─────────────────────────────────────────────────────────────
   15. PAGE ID 4013 — /start page
   Fully scoped to body.page-id-4013
   ───────────────────────────────────────────────────────────── */

body.page-id-4013 {
  min-height: 100%;
  background-color: var(--bg) !important;
  color: var(--text);
  font-family: var(--sans);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  padding: 48px 24px 64px;
}

body.page-id-4013 .page {
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

body.page-id-4013 .logo-wrap {
  margin-bottom: 28px;
}

body.page-id-4013 .logo-wrap img {
  height: 36px;
  width: auto;
  display: block;
  filter: brightness(0) invert(1);
}

body.page-id-4013 .logo-fallback {
  font-family: var(--serif) !important;
  font-size: 28px;
  font-weight: 400;
  letter-spacing: 0.18em;
  color: var(--text);
  text-align: center;
}

body.page-id-4013 .tagline {
  text-align: center;
  margin-bottom: 44px;
}

body.page-id-4013 .tagline-ar {
  font-family: var(--serif) !important;
  font-size: 18px;
  font-weight: 300;
  font-style: italic;
  color: var(--gold);
  letter-spacing: 0.04em;
  display: block;
  margin-bottom: 8px;
  direction: rtl;
}

body.page-id-4013 .tagline-en {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-muted);
  display: block;
}

body.page-id-4013 .section-label {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  margin-top: 32px;
}

body.page-id-4013 .section-label span {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}

body.page-id-4013 .section-label::after {
  content: '';
  flex: 1;
  height: 0.5px;
  background: var(--border);
}

body.page-id-4013 .links {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

body.page-id-4013 .btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 16px 20px;
  background: var(--surface);
  border: 0.5px solid var(--border);
  text-decoration: none;
  color: var(--text);
  transition: border-color 0.2s ease, background 0.2s ease;
  cursor: pointer;
}

body.page-id-4013 .btn:hover {
  border-color: rgba(196, 169, 106, 0.5);
  background: #161616;
}

body.page-id-4013 .btn:active {
  background: #1c1c1c;
}

body.page-id-4013 .btn-inner {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

body.page-id-4013 .btn-title {
  font-family: var(--serif) !important;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--text);
  line-height: 1;
}

body.page-id-4013 .btn-sub {
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
}

body.page-id-4013 .btn-arrow {
  font-size: 14px;
  color: var(--gold);
  opacity: 0.7;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

body.page-id-4013 .btn:hover .btn-arrow {
  opacity: 1;
  transform: translateX(3px);
}

body.page-id-4013 .scent-pill {
  display: inline-block;
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  border: 0.5px solid rgba(196, 169, 106, 0.3);
  padding: 3px 8px;
  margin-top: 4px;
}

body.page-id-4013 .btn-location .btn-title {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.08em;
}

body.page-id-4013 .divider {
  width: 100%;
  height: 0.5px;
  background: var(--border);
  margin: 40px 0;
}

body.page-id-4013 .social-row {
  display: flex;
  gap: 10px;
  width: 100%;
}

body.page-id-4013 .social-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px;
  background: var(--surface);
  border: 0.5px solid var(--border);
  text-decoration: none;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition: border-color 0.2s ease, color 0.2s ease;
}

body.page-id-4013 .social-btn:hover {
  border-color: rgba(196, 169, 106, 0.5);
  color: var(--text);
}

body.page-id-4013 .social-btn svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
  flex-shrink: 0;
}

body.page-id-4013 .footer {
  margin-top: 56px;
  text-align: center;
}

body.page-id-4013 .footer-logo {
  font-family: var(--serif) !important;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.22em;
  color: var(--text-muted);
  margin-bottom: 8px;
  text-transform: uppercase;
}

body.page-id-4013 .footer-copy {
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.14em;
  color: rgba(240, 237, 230, 0.25);
}

/* Gold accent bar at top of /start page */
body.page-id-4013 .top-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--gold);
  opacity: 0.6;
}