/* ============================================================
   NOORY LIFESTYLE — Site Chrome (header / footer / nav / buttons)
============================================================ */

/* ---------- Announcement strip ---------- */
.announce{
  background:var(--forest-950);
  color:var(--ivory-100);
  text-align:center;
  font-size:0.74rem;
  letter-spacing:0.07em;
  text-transform:uppercase;
  padding:8px var(--gutter);
  font-weight:500;
}
.announce strong{color:var(--gold-300);font-weight:600;}

/* ---------- Header ---------- */
.site-header{
  position:sticky;
  top:0;
  z-index:60;
  background:rgba(251,248,242,0.94);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(20,22,19,0.07);
}
.header-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding-block:12px;
}

.brand{
  display:flex;
  align-items:center;
}
.brand-logo{
  height:36px;
  width:auto;
  display:block;
}
.brand-logo--footer{height:34px;}

.main-nav{display:flex;align-items:center;gap:0;}
.main-nav a{
  position:relative;
  padding:8px 13px;
  font-size:0.82rem;
  letter-spacing:0.04em;
  text-transform:uppercase;
  font-weight:500;
  color:var(--ink-soft);
  transition:color .15s ease;
}
.main-nav a::after{
  content:"";
  position:absolute;
  left:50%;right:50%;bottom:4px;
  height:1px;
  background:var(--gold-500);
  transition:left .2s ease, right .2s ease;
}
.main-nav a:hover,
.main-nav a.is-active{color:var(--forest-950);}
.main-nav a:hover::after,
.main-nav a.is-active::after{left:18px;right:18px;}

.header-actions{display:flex;align-items:center;gap:4px;}

.icon-btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;height:34px;
  border:none;
  background:transparent;
  color:var(--forest-950);
  border-radius:50%;
  transition:background .15s ease;
}
.icon-btn:hover{background:rgba(20,22,19,0.05);}
.icon-btn svg{width:17px;height:17px;stroke-width:1.5;}

.cart-count{
  position:absolute;
  top:0;right:0;
  min-width:15px;height:15px;
  padding:0 3px;
  border-radius:50%;
  background:var(--gold-500);
  color:var(--forest-950);
  font-size:0.6rem;
  font-weight:700;
  display:flex;align-items:center;justify-content:center;
  line-height:1;
}

.nav-toggle{
  display:none;
  border:none;background:transparent;
  width:38px;height:38px;
  align-items:center;justify-content:center;
  color:var(--forest-950);
}
.nav-toggle svg{width:20px;height:20px;stroke-width:1.5;}

.search-box{
  display:flex;align-items:center;
  gap:10px;
  border:none;
  border-bottom:1px solid rgba(20,22,19,0.15);
  background:transparent;
  padding:6px 2px;
  min-width:190px;
  transition:border-color .15s ease;
}
.search-box:focus-within{border-color:var(--forest-950);}
.search-box svg{width:15px;height:15px;color:var(--ink-soft);flex-shrink:0;stroke-width:1.5;}
.search-box input{
  border:none;outline:none;background:transparent;
  width:100%;font-size:0.86rem;color:var(--ink);
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:16px 34px;
  font-size:0.8rem;
  font-weight:600;
  letter-spacing:0.1em;
  text-transform:uppercase;
  border-radius:0;
  border:1px solid transparent;
  transition:background .2s ease, color .2s ease, border-color .2s ease, transform .1s ease;
  white-space:nowrap;
}
.btn:active{transform:translateY(1px);}

.btn-primary{
  background:var(--forest-950);
  color:var(--ivory-100);
}
.btn-primary:hover{background:var(--forest-800);}

.btn-gold{
  background:var(--gold-500);
  color:var(--forest-950);
}
.btn-gold:hover{background:var(--gold-300);}

.btn-outline{
  background:transparent;
  border-color:var(--forest-950);
  color:var(--forest-950);
}
.btn-outline:hover{background:var(--forest-950);color:var(--ivory-100);}

.btn-outline-light{
  background:transparent;
  border-color:var(--line-dark);
  color:var(--ivory-100);
}
.btn-outline-light:hover{background:var(--line-dark);}

.btn-block{width:100%;}
.btn-sm{padding:10px 18px;font-size:0.84rem;}
.btn[disabled]{opacity:0.45;cursor:not-allowed;}

.btn-text{
  background:none;border:none;color:var(--forest-950);
  font-weight:600;font-size:0.9rem;
  border-bottom:1px solid var(--gold-500);
  padding:2px 0;
  display:inline-flex;align-items:center;gap:6px;
  white-space:nowrap;
  flex-shrink:0;
}

/* ---------- Badges ---------- */
.badge{
  display:inline-flex;
  align-items:center;
  font-size:0.64rem;
  font-weight:600;
  letter-spacing:0.08em;
  text-transform:uppercase;
  padding:0;
  border-radius:0;
  background:none !important;
  white-space:nowrap;
}
.badge-gold{color:var(--gold-700);}
.badge-forest{color:var(--forest-800);}
.badge-dark{color:var(--ivory-100);}

/* ---------- Breadcrumb ---------- */
.breadcrumb{
  display:flex;flex-wrap:wrap;gap:6px;
  font-size:0.82rem;
  color:var(--ink-soft);
  padding-block:18px;
}
.breadcrumb a:hover{color:var(--forest-950);}
.breadcrumb span{color:var(--line);}

/* ---------- Footer ---------- */
.site-footer{
  background:var(--forest-950);
  color:var(--ivory-200);
}
.footer-top{
  padding-block:clamp(64px,9vw,110px) clamp(48px,6vw,72px);
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr 1.2fr;
  gap:48px;
}
.footer-brand p{
  margin-top:18px;
  color:rgba(251,248,242,0.6);
  font-size:0.92rem;
  max-width:32ch;
  line-height:1.7;
}
.footer-col h4{
  font-family:var(--font-body);
  font-size:0.7rem;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--gold-300);
  margin-bottom:20px;
  font-weight:600;
}
.footer-col ul{display:flex;flex-direction:column;gap:13px;}
.footer-col a{
  color:rgba(251,248,242,0.72);
  font-size:0.92rem;
  transition:color .15s ease;
}
.footer-col a:hover{color:var(--gold-300);}

.footer-social{display:flex;gap:10px;margin-top:22px;}
.footer-social a{
  width:36px;height:36px;
  border:1px solid rgba(251,248,242,0.18);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
}
.footer-social a:hover{border-color:var(--gold-500);background:rgba(201,162,75,0.1);}
.footer-social svg{width:15px;height:15px;stroke-width:1.5;}

.footer-bottom{
  border-top:1px solid rgba(251,248,242,0.1);
  padding-block:26px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
  font-size:0.78rem;
  letter-spacing:0.03em;
  color:rgba(251,248,242,0.5);
}
.footer-bottom .payment-note{
  display:flex;align-items:center;gap:8px;
}

@media (max-width: 980px){
  .main-nav,.search-box{display:none;}
  .nav-toggle{display:inline-flex;}
  .footer-top{grid-template-columns:1fr 1fr;}
}
@media (max-width: 560px){
  .footer-top{grid-template-columns:1fr;}
}

/* ---------- Mobile nav drawer ---------- */
.mobile-nav{
  position:fixed;inset:0;
  background:rgba(5,42,32,0.5);
  z-index:80;
  display:none;
}
.mobile-nav.is-open{display:block;}
.mobile-nav-panel{
  position:absolute;top:0;right:0;
  width:min(320px,86vw);height:100%;
  background:var(--ivory-100);
  padding:20px;
  display:flex;flex-direction:column;gap:4px;
  box-shadow:var(--shadow-pop);
}
.mobile-nav-panel a{
  padding:14px 6px;
  font-size:1.05rem;
  border-bottom:1px solid var(--line);
  color:var(--forest-950);
}
.mobile-nav-close{
  align-self:flex-end;
  background:none;border:none;
  width:36px;height:36px;
  color:var(--forest-950);
}
.mobile-search{
  margin-top:14px;
}