/*
Theme Name: Lubaan
Theme URI: https://example.com/lubaan
Author: Your Brand
Author URI: https://example.com
Description: Lubaan is a warm, elegant WooCommerce theme crafted for artisanal frankincense, incense, and natural wellness brands. Inspired by the calm of wellness spaces and the soul of handmade craft, it pairs serif elegance with earthy, resin-warm tones. Fully customizable through the WordPress Customizer.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
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: lubaan
Tags: e-commerce, custom-colors, custom-logo, custom-menu, featured-images, full-width-template, theme-options, translation-ready, woocommerce
WC requires at least: 7.0
WC tested up to: 9.0
*/

/* ============================================================
   LUBAAN — DESIGN TOKENS
   These map to Customizer settings (see inc/customizer.php),
   with sensible defaults. Override colors live from the
   WordPress Customizer without touching code.
   ============================================================ */

:root {
  /* Colors — warm, resin-amber, smoke, sand. Default palette. */
  --lub-resin:        #b07c4f; /* amber resin — primary accent  */
  --lub-resin-deep:   #8a5a32; /* darker amber for hovers        */
  --lub-charcoal:     #2b2723; /* smoke / near-black text        */
  --lub-ink:          #1a1714; /* deepest ink                    */
  --lub-sand:         #f3ece1; /* warm paper background          */
  --lub-sand-soft:    #faf6ef; /* lightest cream                 */
  --lub-clay:         #d8c4a8; /* muted clay borders             */
  --lub-sage:         #7c8466; /* botanical sage secondary       */
  --lub-cream:        #fffdf9;
  --lub-muted:        #756c5f; /* muted body text                */
  --lub-line:         #e4d9c8; /* hairline borders               */

  /* Typography */
  --lub-font-display: "Cormorant Garamond", "Playfair Display", Georgia, serif;
  --lub-font-body:    "Jost", "Outfit", "Helvetica Neue", Arial, sans-serif;
  --lub-font-accent:  "Jost", sans-serif;

  /* Scale & rhythm */
  --lub-maxw: 1280px;
  --lub-gutter: clamp(1.25rem, 4vw, 4rem);
  --lub-radius: 2px;
  --lub-radius-lg: 10px;
  --lub-shadow: 0 18px 50px -22px rgba(43, 39, 35, 0.35);
  --lub-shadow-soft: 0 10px 30px -18px rgba(43, 39, 35, 0.25);
  --lub-transition: 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Reset-ish base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--lub-font-body);
  font-size: 17px;
  line-height: 1.75;
  color: var(--lub-charcoal);
  background-color: var(--lub-sand-soft);
  font-weight: 300;
  letter-spacing: 0.01em;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--lub-resin-deep); text-decoration: none; transition: color var(--lub-transition); }
a:hover { color: var(--lub-charcoal); }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--lub-font-display);
  font-weight: 500;
  line-height: 1.12;
  color: var(--lub-ink);
  margin: 0 0 0.5em;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2.6rem, 6vw, 5rem); }
h2 { font-size: clamp(2rem, 4.4vw, 3.4rem); }
h3 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
p  { margin: 0 0 1.2em; }

.lub-eyebrow {
  font-family: var(--lub-font-accent);
  text-transform: uppercase;
  letter-spacing: 0.32em;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--lub-resin);
  display: inline-block;
  margin-bottom: 1.1rem;
}

/* ---------- Layout helpers ---------- */
.lub-container { width: 100%; max-width: var(--lub-maxw); margin: 0 auto; padding-inline: var(--lub-gutter); }
.lub-section { padding-block: clamp(4rem, 9vw, 8.5rem); }
.lub-narrow { max-width: 720px; }
.lub-center { text-align: center; margin-inline: auto; }

/* ---------- Buttons ---------- */
.lub-btn,
.button,
button,
input[type="submit"],
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  font-family: var(--lub-font-accent);
  font-size: 0.78rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  line-height: 1;
  padding: 1.15em 2.4em;
  border: 1px solid var(--lub-resin);
  border-radius: var(--lub-radius);
  background: var(--lub-resin);
  color: var(--lub-cream);
  cursor: pointer;
  transition: background var(--lub-transition), color var(--lub-transition), border-color var(--lub-transition), transform var(--lub-transition);
}

.lub-btn:hover,
.button:hover,
button:hover,
input[type="submit"]:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
  background: var(--lub-charcoal);
  border-color: var(--lub-charcoal);
  color: var(--lub-cream);
  transform: translateY(-2px);
}

.lub-btn--ghost {
  background: transparent;
  color: var(--lub-charcoal);
  border-color: var(--lub-clay);
}
.lub-btn--ghost:hover { background: var(--lub-charcoal); color: var(--lub-cream); border-color: var(--lub-charcoal); }

.lub-btn--light { background: var(--lub-cream); color: var(--lub-charcoal); border-color: var(--lub-cream); }
.lub-btn--light:hover { background: transparent; color: var(--lub-cream); border-color: var(--lub-cream); }

/* ============================================================
   HEADER
   ============================================================ */
.lub-topbar {
  background: var(--lub-ink);
  color: var(--lub-sand);
  font-family: var(--lub-font-accent);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.lub-topbar .lub-container { display: flex; justify-content: space-between; align-items: center; min-height: 42px; gap: 1rem; }
.lub-topbar a { color: var(--lub-sand); opacity: 0.85; }
.lub-topbar a:hover { opacity: 1; color: var(--lub-cream); }
.lub-topbar__social { display: flex; gap: 1.4rem; }

.lub-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250, 246, 239, 0.86);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--lub-line);
  transition: background var(--lub-transition), box-shadow var(--lub-transition);
}
.lub-header.is-scrolled { box-shadow: var(--lub-shadow-soft); }
.lub-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 88px;
  gap: 2rem;
}
.lub-logo { font-family: var(--lub-font-display); font-size: 1.85rem; font-weight: 600; letter-spacing: 0.02em; color: var(--lub-ink); }
.lub-logo span { color: var(--lub-resin); }
.lub-logo img { max-height: 52px; width: auto; }

/* Primary nav */
.lub-nav ul { list-style: none; display: flex; align-items: center; gap: 2.2rem; margin: 0; padding: 0; }
.lub-nav a {
  font-family: var(--lub-font-accent);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--lub-charcoal);
  position: relative;
  padding-block: 0.4rem;
}
.lub-nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1px;
  background: var(--lub-resin);
  transition: width var(--lub-transition);
}
.lub-nav a:hover::after,
.lub-nav .current-menu-item > a::after { width: 100%; }
.lub-nav .sub-menu {
  position: absolute;
  top: 100%; left: 0;
  flex-direction: column;
  gap: 0;
  background: var(--lub-cream);
  min-width: 220px;
  padding: 0.6rem 0;
  border: 1px solid var(--lub-line);
  box-shadow: var(--lub-shadow-soft);
  opacity: 0; visibility: hidden;
  transform: translateY(10px);
  transition: all var(--lub-transition);
}
.lub-nav li { position: relative; }
.lub-nav li:hover > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.lub-nav .sub-menu a { display: block; padding: 0.6rem 1.4rem; letter-spacing: 0.08em; }

.lub-header__actions { display: flex; align-items: center; gap: 1.4rem; }
.lub-icon-btn { background: none; border: none; cursor: pointer; color: var(--lub-charcoal); display: flex; align-items: center; padding: 0; position: relative; transition: color var(--lub-transition); }
.lub-icon-btn:hover { color: var(--lub-resin); transform: none; }
.lub-cart-count {
  position: absolute;
  top: -8px; right: -10px;
  background: var(--lub-resin);
  color: var(--lub-cream);
  font-family: var(--lub-font-accent);
  font-size: 0.62rem;
  min-width: 18px; height: 18px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  letter-spacing: 0;
}

.lub-burger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 4px; }
.lub-burger span { width: 26px; height: 2px; background: var(--lub-charcoal); transition: all var(--lub-transition); }

/* Mobile nav */
.lub-mobile-nav {
  position: fixed;
  inset: 0;
  background: var(--lub-ink);
  color: var(--lub-sand);
  z-index: 200;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1.4rem;
  transform: translateX(100%);
  transition: transform var(--lub-transition);
}
.lub-mobile-nav.is-open { transform: translateX(0); }
.lub-mobile-nav ul { list-style: none; padding: 0; margin: 0; text-align: center; }
.lub-mobile-nav a { font-family: var(--lub-font-display); font-size: 1.8rem; color: var(--lub-sand); display: block; padding: 0.5rem; }
.lub-mobile-nav__close { position: absolute; top: 2rem; right: 2rem; background: none; border: none; color: var(--lub-sand); font-size: 2rem; cursor: pointer; }

/* ============================================================
   HERO
   ============================================================ */
.lub-hero {
  position: relative;
  min-height: clamp(560px, 86vh, 880px);
  display: flex;
  align-items: center;
  overflow: hidden;
  background: linear-gradient(115deg, #211c17 0%, #3a2f24 55%, #5a4129 100%);
  color: var(--lub-sand);
}
.lub-hero__bg { position: absolute; inset: 0; z-index: 0; }
.lub-hero__bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.55; }
.lub-hero::after {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background: radial-gradient(ellipse at 70% 30%, rgba(176,124,79,0.28), transparent 60%),
              linear-gradient(180deg, rgba(26,23,20,0.2), rgba(26,23,20,0.65));
}
.lub-hero__inner { position: relative; z-index: 2; max-width: 720px; }
.lub-hero h1 { color: var(--lub-cream); margin-bottom: 0.4em; }
.lub-hero p { font-size: 1.18rem; max-width: 50ch; color: rgba(243,236,225,0.9); margin-bottom: 2.2rem; }
.lub-hero .lub-eyebrow { color: var(--lub-clay); }

/* Smoke wisp animation */
.lub-smoke {
  position: absolute; z-index: 1;
  right: 12%; bottom: 0;
  width: 3px; height: 280px;
  background: linear-gradient(to top, rgba(243,236,225,0.5), transparent);
  filter: blur(4px);
  animation: lub-rise 6s ease-in-out infinite;
  opacity: 0.6;
}
@keyframes lub-rise {
  0%   { transform: translateY(20px) scaleX(1); opacity: 0; }
  30%  { opacity: 0.7; }
  100% { transform: translateY(-120px) scaleX(2.4); opacity: 0; }
}

/* Staggered load reveal */
.lub-reveal { opacity: 0; transform: translateY(28px); }
.lub-reveal.is-in { opacity: 1; transform: none; transition: opacity 1s ease, transform 1s cubic-bezier(0.22,1,0.36,1); }
.lub-hero .lub-reveal:nth-child(1) { transition-delay: 0.05s; }
.lub-hero .lub-reveal:nth-child(2) { transition-delay: 0.2s; }
.lub-hero .lub-reveal:nth-child(3) { transition-delay: 0.35s; }
.lub-hero .lub-reveal:nth-child(4) { transition-delay: 0.5s; }

/* ============================================================
   MARQUEE / TRUST STRIP
   ============================================================ */
.lub-marquee { background: var(--lub-resin); color: var(--lub-cream); overflow: hidden; padding-block: 1rem; }
.lub-marquee__track { display: flex; gap: 3rem; white-space: nowrap; animation: lub-scroll 28s linear infinite; }
.lub-marquee span { font-family: var(--lub-font-accent); text-transform: uppercase; letter-spacing: 0.22em; font-size: 0.78rem; display: inline-flex; align-items: center; gap: 3rem; }
@keyframes lub-scroll { to { transform: translateX(-50%); } }

/* ============================================================
   FEATURE / STORY SECTIONS
   ============================================================ */
.lub-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.lub-split--reverse .lub-split__media { order: 2; }
.lub-split__media { position: relative; }
.lub-split__media img { border-radius: var(--lub-radius-lg); box-shadow: var(--lub-shadow); width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.lub-split__media::before {
  content: ""; position: absolute; inset: -18px -18px auto auto;
  width: 70%; height: 70%; border: 1px solid var(--lub-clay); border-radius: var(--lub-radius-lg); z-index: -1;
}

.lub-feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.lub-feature-card {
  background: var(--lub-cream);
  border: 1px solid var(--lub-line);
  border-radius: var(--lub-radius-lg);
  padding: 2.6rem 2rem;
  text-align: center;
  transition: transform var(--lub-transition), box-shadow var(--lub-transition);
}
.lub-feature-card:hover { transform: translateY(-6px); box-shadow: var(--lub-shadow); }
.lub-feature-card__icon {
  width: 64px; height: 64px; margin: 0 auto 1.4rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--lub-sand); color: var(--lub-resin);
}
.lub-feature-card h3 { font-size: 1.4rem; }

/* ============================================================
   SECTION HEADINGS
   ============================================================ */
.lub-section-head { text-align: center; max-width: 640px; margin: 0 auto clamp(2.5rem, 5vw, 4rem); }
.lub-section-head p { color: var(--lub-muted); }

/* ============================================================
   PRODUCT GRID (front page showcase + woo)
   ============================================================ */
.lub-products { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; }
.lub-product-card { background: transparent; text-align: left; }
.lub-product-card__media {
  position: relative; overflow: hidden;
  border-radius: var(--lub-radius-lg);
  background: var(--lub-sand);
  aspect-ratio: 3/4;
  margin-bottom: 1.1rem;
}
.lub-product-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s cubic-bezier(0.22,1,0.36,1); }
.lub-product-card:hover .lub-product-card__media img { transform: scale(1.06); }
.lub-product-card__badge {
  position: absolute; top: 1rem; left: 1rem;
  background: var(--lub-charcoal); color: var(--lub-cream);
  font-family: var(--lub-font-accent); font-size: 0.62rem;
  text-transform: uppercase; letter-spacing: 0.18em;
  padding: 0.45em 0.9em; border-radius: var(--lub-radius);
}
.lub-product-card__title { font-family: var(--lub-font-display); font-size: 1.35rem; margin: 0 0 0.2rem; }
.lub-product-card__price { font-family: var(--lub-font-accent); color: var(--lub-resin); letter-spacing: 0.04em; }
.lub-product-card__cat { font-family: var(--lub-font-accent); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.2em; color: var(--lub-muted); margin-bottom: 0.5rem; }

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.lub-testimonials { background: var(--lub-ink); color: var(--lub-sand); }
.lub-testimonials .lub-eyebrow { color: var(--lub-clay); }
.lub-testimonials h2 { color: var(--lub-cream); }
.lub-quote { max-width: 760px; margin: 0 auto; text-align: center; }
.lub-quote blockquote { font-family: var(--lub-font-display); font-size: clamp(1.6rem, 3.2vw, 2.4rem); line-height: 1.4; font-style: italic; margin: 0 0 1.4rem; color: var(--lub-cream); }
.lub-quote cite { font-family: var(--lub-font-accent); font-style: normal; text-transform: uppercase; letter-spacing: 0.2em; font-size: 0.78rem; color: var(--lub-clay); }

/* ============================================================
   NEWSLETTER / CTA
   ============================================================ */
.lub-cta { position: relative; background: linear-gradient(120deg, var(--lub-resin), var(--lub-resin-deep)); color: var(--lub-cream); text-align: center; }
.lub-cta h2 { color: var(--lub-cream); }
.lub-cta__form { display: flex; gap: 0.6rem; max-width: 480px; margin: 1.8rem auto 0; }
.lub-cta__form input[type="email"] { flex: 1; padding: 1.1em 1.4em; border: 1px solid rgba(255,255,255,0.4); background: rgba(255,255,255,0.12); color: var(--lub-cream); border-radius: var(--lub-radius); font-family: var(--lub-font-body); }
.lub-cta__form input::placeholder { color: rgba(255,255,255,0.7); }

/* ============================================================
   FOOTER
   ============================================================ */
.lub-footer { background: var(--lub-ink); color: var(--lub-sand); padding-block: clamp(3.5rem, 7vw, 6rem) 0; }
.lub-footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 3rem; padding-bottom: 3.5rem; }
.lub-footer h4 { color: var(--lub-cream); font-family: var(--lub-font-accent); font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.2em; margin-bottom: 1.4rem; }
.lub-footer__brand .lub-logo { color: var(--lub-cream); margin-bottom: 1rem; }
.lub-footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.7rem; }
.lub-footer a { color: rgba(243,236,225,0.78); font-size: 0.92rem; }
.lub-footer a:hover { color: var(--lub-cream); }
.lub-footer__bottom { border-top: 1px solid rgba(243,236,225,0.14); padding-block: 1.6rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; font-size: 0.8rem; color: rgba(243,236,225,0.6); }

/* ============================================================
   PAGE / POST CONTENT
   ============================================================ */
.lub-page-hero { background: var(--lub-sand); text-align: center; padding-block: clamp(3.5rem, 8vw, 6.5rem); border-bottom: 1px solid var(--lub-line); }
.lub-breadcrumb { font-family: var(--lub-font-accent); font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--lub-muted); margin-bottom: 1rem; }
.lub-breadcrumb a { color: var(--lub-resin); }

.lub-entry { max-width: 760px; margin: 0 auto; }
.lub-entry img { border-radius: var(--lub-radius-lg); margin-block: 2rem; }
.lub-entry h2, .lub-entry h3 { margin-top: 1.8em; }
.lub-entry blockquote { border-left: 3px solid var(--lub-resin); padding-left: 1.6rem; font-family: var(--lub-font-display); font-style: italic; font-size: 1.4rem; color: var(--lub-charcoal); margin-inline: 0; }

/* Posts grid */
.lub-post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.4rem; }
.lub-post-card { background: var(--lub-cream); border: 1px solid var(--lub-line); border-radius: var(--lub-radius-lg); overflow: hidden; transition: transform var(--lub-transition), box-shadow var(--lub-transition); }
.lub-post-card:hover { transform: translateY(-5px); box-shadow: var(--lub-shadow); }
.lub-post-card__media { aspect-ratio: 16/10; overflow: hidden; }
.lub-post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s ease; }
.lub-post-card:hover .lub-post-card__media img { transform: scale(1.05); }
.lub-post-card__body { padding: 1.8rem; }
.lub-post-card__meta { font-family: var(--lub-font-accent); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--lub-muted); margin-bottom: 0.7rem; }
.lub-post-card h3 { font-size: 1.4rem; }

/* ============================================================
   SIDEBAR / WIDGETS
   ============================================================ */
.lub-widget { margin-bottom: 2.4rem; }
.lub-widget-title { font-family: var(--lub-font-accent); font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.18em; padding-bottom: 0.8rem; border-bottom: 1px solid var(--lub-line); margin-bottom: 1.2rem; }

/* ============================================================
   FORMS
   ============================================================ */
input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="tel"], input[type="url"], input[type="number"], textarea, select {
  width: 100%;
  padding: 0.95em 1.1em;
  border: 1px solid var(--lub-line);
  border-radius: var(--lub-radius);
  background: var(--lub-cream);
  font-family: var(--lub-font-body);
  font-size: 1rem;
  color: var(--lub-charcoal);
  transition: border-color var(--lub-transition);
}
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--lub-resin); }

/* ============================================================
   PAGINATION
   ============================================================ */
.lub-pagination { display: flex; justify-content: center; gap: 0.6rem; margin-top: 3.5rem; }
.lub-pagination a, .lub-pagination span { font-family: var(--lub-font-accent); padding: 0.7em 1.1em; border: 1px solid var(--lub-line); border-radius: var(--lub-radius); font-size: 0.85rem; }
.lub-pagination .current { background: var(--lub-resin); color: var(--lub-cream); border-color: var(--lub-resin); }

/* ============================================================
   FULL-WIDTH CANVAS (Elementor / block landing pages)
   ============================================================ */
.lub-fullwidth-canvas { width: 100%; }
.lub-fullwidth-canvas > .alignfull { margin-inline: 0; }
.lub-elementor-active .lub-site-content { overflow-x: clip; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .lub-products { grid-template-columns: repeat(2, 1fr); }
  .lub-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 880px) {
  .lub-nav, .lub-header__actions .lub-search-toggle { display: none; }
  .lub-burger { display: flex; }
  .lub-split { grid-template-columns: 1fr; }
  .lub-split--reverse .lub-split__media { order: 0; }
  .lub-feature-grid { grid-template-columns: 1fr; }
  .lub-post-grid { grid-template-columns: 1fr; }
  .lub-topbar__left { display: none; }
}
@media (max-width: 560px) {
  .lub-products { grid-template-columns: 1fr 1fr; gap: 1.2rem; }
  .lub-footer__grid { grid-template-columns: 1fr; }
  .lub-cta__form { flex-direction: column; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}