/* =========================================================
   style.css — LUNORA FINAL (bugfixes & mobile header + slide-cart)
   ========================================================= */

/* FONTS */
@font-face{
  font-family: "Flewur";
  src: url("/assets/fonts/Flewur-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "Brock";
  src: url("/assets/fonts/Brock.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* COLOR VARIABLES */
:root{
  --page-bg: #F9F4EF;
  --header-bg: #F9F4EF;
  --footer-bg: #020202;

  --headline: #331D13;
  --subheadline: #BF8D77;
  --body: #593526;

  --accent: #9E6F55;
  --accent-2: #CC9A81;

  --price: #6B3924;

  --quality-box: #F0E6DF;
  --about-quote-box: #EFE9E5;
  --white-box: #FFFFFF;

  --photo-text-on-shadow: #FFFFFF;

  --muted: #BDB6B0;

  --card-radius: 12px;
  --shadow-soft: 0 8px 28px rgba(0,0,0,0.07);
}

/* GLOBAL */
*{box-sizing:border-box}
html,body{
  margin:0;
  padding:0;
  background:var(--page-bg);
  color:var(--body);
  font-family:"Segoe UI",system-ui,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
.container{max-width:1140px;margin:0 auto;padding:1.25rem}

/* HEADER (grid: hamburger / logo / actions) */
.site-header{
  position:sticky;
  top:0;
  background:var(--header-bg);
  z-index:50;
  border-bottom:1px solid rgba(0,0,0,0.06);
}
.header-inner{
  display:grid;
  grid-template-columns:48px 1fr 120px;
  align-items:center;
  gap:8px;
  padding:.8rem 0;
}
.logo img{height:80px;display:block;margin:0 auto}
.hamburger{display:block;background:transparent;border:none;font-size:28px;cursor:pointer;color:var(--headline)}
.header-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px}
.icon-btn{background:transparent;border:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.icon-btn img{width:40px;height:40px}
.cart-count{display:inline-block;background:var(--accent);color:#fff;border-radius:999px;padding:2px 7px;font-size:12px;margin-left:6px}

/* MOBILE DROPDOWN MENU */
.mobile-dropdown {
  display: none;
  background: #fff;
  width: 100%;
  position: fixed;  /* Keep it fixed */
  top: 80px;  /* Adjust based on your header height */
  left: 0;
  padding: 15px 20px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  z-index: 500;
}

.mobile-dropdown.open {
  display: block;
}

.mobile-dropdown ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.mobile-dropdown a {
  color: var(--headline);
  font-size: 17px;
  font-weight: 600;
}


/* SEARCH OVERLAY */
.search-overlay{position:fixed;top:72px;right:16px;display:none;z-index:210}
.search-overlay.open{display:block}
.search-overlay input{width:220px;height:40px;border-radius:20px;border:1px solid rgba(0,0,0,0.08);padding:8px 12px}
.search-dropdown{background:white;border-radius:8px;border:1px solid rgba(0,0,0,0.08);margin-top:8px;max-width:260px}

/* HERO */
.hero{position:relative;overflow:hidden}
.hero-slider{
  height:560px;
  max-height:68vh;
  position:relative;
}
.viewport{height:100%;overflow:hidden}
.slide-track{display:flex;height:100%;transition:transform .7s ease}
.slide{min-width:100%;height:100%}
.slide img{width:100%;height:100%;object-fit:cover}

/* left dark gradient (reduced on small screens so it doesn't overflow image) */
.hero-shadow{
  position:relative;
  left:1;
  top:0;
  bottom:0;
  width:50%;
  background:linear-gradient(90deg, rgba(65,33,19,0.75), rgba(22,20,19,0));
  z-index:8;
  pointer-events:none;
}
@media (max-width:600px){ .hero-shadow{width:26%} }

/* hero text block */
.hero-overlay{position:absolute;left:6%;top:18%;z-index:20}
.hero-card{max-width:580px;padding:20px}
.hero-h1{
  font-family:"Flewur",serif;
  font-size:90px;
  color:white;
  margin:0 0 12px;
  line-height:.9;
  text-shadow:0 3px 26px rgba(0,0,0,0.6);
}
.hero-text{
  font-size:18px;
  color:white;
  max-width:460px;
  margin-bottom:18px;
}
.hero-controls{position:absolute;bottom:16px;right:16px;display:flex;gap:10px;z-index:30}
.h-arrow{background:rgba(0,0,0,0.45);padding:8px;border-radius:8px;cursor:pointer}

/* BUTTONS */
.btn{padding:.6rem .9rem;border-radius:8px;cursor:pointer;font-weight:700;border:none}
.btn.primary{background:var(--accent);color:white}
.btn:hover{opacity:.95}

/* SECTION BASICS */
.section{padding:2.2rem 0}
.section-title{
  text-align:center;
  font-family:"Brock",serif;
  color:var(--headline);
  font-size:32px;
  margin-bottom:8px;
}

/* CRAFTED FOR YOU */
.crafted .subtitle{
  color:var(--subheadline);
  text-align:center;
  margin:4px 0 36px;
}
.crafted-grid{
  max-width:1000px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:34px;
}
.crafted-item{
  display:flex;
  gap:26px;
  align-items:center;
}
.crafted-item .photo img{
  width:420px;
  height:300px;
  object-fit:cover;
  border-radius:10px;
}
.crafted-item .info{
  background:white;
  padding:22px;
  border-radius:10px;
  box-shadow:var(--shadow-soft);
}
.crafted-item .info h3{
  margin:0 0 8px;
  font-family:"Brock",serif;
  font-size:28px;
  color:var(--headline);
}
.crafted-item.alt{
  flex-direction:row-reverse;
}

/* BEST SELLERS */
.best-sub{
  color:var(--subheadline);
  font-size:15px;
  margin-bottom:16px;
}
.bestseller{
  overflow:hidden;
  max-width:900px;
  margin:0 auto;
}
.bestseller .track{
  display:flex;
  gap:14px;
  overflow-x:auto;
  padding:10px;
  scroll-snap-type:x mandatory;
}
.bs-card{
  min-width:220px;
  text-align:center;
  scroll-snap-align:start;
  background:white;
  padding:10px;
  border-radius:10px;
  box-shadow:var(--shadow-soft);
}
.bs-card img{
  width:220px;
  height:150px;
  object-fit:cover;
  border-radius:10px;
}
.bs-card h3{margin:8px 0 2px;font-size:18px;color:var(--headline)}
.bs-card .price{color:var(--price);font-weight:700;margin-bottom:6px}
.see-more{display:inline-block;padding:.6rem 1rem;border-radius:8px;border:2px solid var(--accent-2);color:var(--accent-2);font-weight:700}

/* QUALITY BOXES */
.qualities{display:flex;gap:20px;justify-content:center}
.quality-card{background:var(--quality-box);padding:22px;border-radius:12px;width:260px;text-align:center}
.quality-card img{width:48px;height:48px;margin-bottom:10px}

/* GALLERY PREVIEW */
.gallery-preview{display:flex;gap:20px;justify-content:center}
.gallery-preview img{width:300px;height:240px;object-fit:cover;border-radius:12px}

/* GALLERY PAGE FIX — make images fit phone screen */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 18px;
}

.gallery-grid figure {
  margin: 0;
  text-align: center;
}

.gallery-grid img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  object-fit: cover;
}

/* Mobile adjustments */
@media (max-width: 600px) {
  .gallery-grid {
    grid-template-columns: 1fr 1fr;
  }

  .gallery-grid img {
    width: 100%;
    height: auto;
  }
}

/* FOOTER */
.site-footer{background:var(--footer-bg);padding:40px 0;color:white}
.footer-grid{display:flex;justify-content:space-between;flex-wrap:wrap}
.footer-grid a{color:white}

/* SLIDE-OUT CART (styles) */
.slide-cart{position:fixed;right:-420px;top:0;height:100%;width:360px;background:#fff;z-index:300;box-shadow:-20px 0 40px rgba(0,0,0,0.18);transition:right .32s ease;padding:18px;display:flex;flex-direction:column;justify-content:space-between}
.slide-cart.open{right:0}
.slide-cart .cart-header{display:flex;justify-content:space-between;align-items:center}
.slide-cart .slide-cart-contents{overflow:auto;flex:1;margin-top:12px;padding-right:6px}
.slide-cart .cart-footer{border-top:1px solid rgba(0,0,0,0.06);padding-top:12px}
.slide-cart-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:290;opacity:0;pointer-events:none;transition:opacity .25s}
.slide-cart-overlay.visible{opacity:1;pointer-events:auto}

/* CART LINE */
.cart-line{display:flex;gap:10px;align-items:center;background:#fff;padding:10px;border-radius:8px;margin-bottom:10px;box-shadow:var(--shadow-soft)}
.cart-line img{width:72px;height:60px;object-fit:cover;border-radius:6px}
.cart-meta{flex:1}
.cart-name{font-weight:700}
.cart-category{color:var(--muted);font-size:13px}
.cart-right{text-align:right}
.cart-controls{display:flex;gap:6px;align-items:center;justify-content:flex-end;margin-top:8px}
.cart-lineprice{font-weight:700}

/* RESPONSIVE */
@media (max-width:900px){
  .crafted-item{flex-direction:column}
  .crafted-item.alt{flex-direction:column}
  .crafted-item .photo img{width:100%;height:260px}
  .about-quote{flex-direction:column}
  .gallery-preview{flex-direction:column}
}
@media (max-width:600px){
  .hero-h1{font-size:55px}
  .hero-text{font-size:16px}
  .quality-card{width:100%}
  .qualities{flex-direction:column}
  .gallery-preview img{width:100%;height:260px}

  .header-inner{grid-template-columns:44px 1fr 88px;padding:.6rem 0}
  .logo{justify-self:center}
  .slide-cart{width:92%;max-width:360px}
  .slide-cart.open{right:4%}
}