:root{
  --cream:#FFF7E6;
  --cream-2:#FDEFD3;
  --paper:#FFFDF8;
  --brown:#4A3223;
  --brown-soft:#7A5C46;
  --orange:#EE9B5C;
  --orange-deep:#E67E4D;
  --green:#7EB07E;
  --green-deep:#579A66;
  --yellow:#F5C542;
  --pink:#FF9FAE;
  --sky:#79C6D6;
  --purple:#B48EDE;
  --shadow: 0 10px 0 rgba(74,50,35,0.12);
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:'Vazirmatn', sans-serif;
  background:var(--cream);
  color:var(--brown);
  overflow-x:hidden;
  position:relative;
}

h1,h2,h3,h4,.display{
  font-family:'Baloo Bhaijaan 2', 'Vazirmatn', sans-serif;
  font-weight:700;
}

.confetti-bg{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  opacity:0.5;
}
.confetti-bg span{
  position:absolute;
  border-radius:50%;
  opacity:.55;
}

a{text-decoration:none;color:inherit;}
ul{list-style:none;}
img{display:block;max-width:100%;}
button{font-family:inherit;cursor:pointer;border:none;}

.wrap{
  width:100%;
  max-width:1500px;
  margin:0 auto;
  padding:0 24px;
  position:relative;
  z-index:2;
}

.blob{
  position:absolute;
  border-radius:50%;
  z-index:0;
  animation:float 7s ease-in-out infinite;
}
@keyframes float{
  0%,100%{transform:translateY(0) rotate(0deg);}
  50%{transform:translateY(-22px) rotate(6deg);}
}
@keyframes floatSlow{
  0%,100%{transform:translateY(0) translateX(0);}
  50%{transform:translateY(-16px) translateX(10px);}
}
@keyframes bob{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-14px);}
}
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important;}
}

 /* ---------- NAV ---------- */

header {
  position: sticky;
  top: 0;
  z-index: 50;
  width: 100%;
  background: rgba(255, 247, 230, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 3px dashed rgba(74, 50, 35, 0.15);
}

/* فقط Navbar عریض‌تر از سایر بخش‌های سایت */
header nav.wrap {
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
  padding: 14px 20px;

  /* brand | links | bell: the two side columns are equal (1fr) so the
     links land in the exact centre of the page. minmax(max-content,1fr)
     stops a side column from shrinking below the brand / bell itself. */
  display: grid;
  grid-template-columns: minmax(max-content, 1fr) max-content minmax(max-content, 1fr);
  align-items: center;
  gap: 20px;

  position: relative;
  z-index: 2;
}

header nav.wrap > .brand               { grid-column: 1; grid-row: 1; justify-self: start; }
header nav.wrap > .nav-links           { grid-column: 2; grid-row: 1; }
header nav.wrap > .notification-center { grid-column: 3; grid-row: 1; justify-self: end; }

/* ---------- BRAND ---------- */

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.brand img {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--paper);
  padding: 3px;
  box-shadow: 0 4px 0 rgba(74, 50, 35, 0.15);
  animation: bob 4s ease-in-out infinite;
}

.brand-name {
  font-size: 1.5rem;
  color: var(--orange-deep);
  line-height: 1;
}

.brand-tag {
  font-size: 0.7rem;
  color: var(--brown-soft);
  margin-top: 2px;
}

/* ---------- NAV LINKS ---------- */

.nav-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;

  white-space: nowrap;
}

.nav-links li {
  flex-shrink: 0;
}

.nav-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 8px 11px;
  border-radius: 999px;

  font-weight: 600;
  font-size: 0.88rem;

  white-space: nowrap;

  transition:
    background 0.25s ease,
    transform 0.25s ease,
    color 0.25s ease;
}

.nav-links a:hover {
  background: var(--yellow);
  transform: translateY(-2px) rotate(-1deg);
}

/* ---------- SEARCH ---------- */

.nav-search {
  font-size: 1.05rem !important;
  padding: 8px 10px !important;
}

/* ---------- CART ---------- */

.nav-links .nav-cart {
  position: relative;
}

.nav-cart-badge {
  position: absolute;
  top: -7px;
  left: -7px;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 18px;
  height: 18px;
  border-radius: 50%;

  background: var(--orange-deep);
  color: #fff;
  font-size: 0.7rem;
}

/* ---------- CTA ---------- */

.nav-cta {
  background: var(--green);
  color: var(--paper) !important;

  box-shadow: 0 5px 0 var(--green-deep);

  padding-left: 14px !important;
  padding-right: 14px !important;
}

.nav-cta:hover {
  background: var(--green) !important;
  transform: translateY(-2px);
}

/* ---------- DASHBOARD LINKS ---------- */

.nav-links .nav-link--strong {
  font-weight: 700;
  color: var(--orange-deep);
  padding-left: 10px;
  padding-right: 10px;
}

/* long user names get an ellipsis in the desktop bar */
.nav-links .nav-link--strong > span:last-child {
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- ICONS / MOBILE-ONLY PIECES (hidden on desktop) ---------- */

.nav-links a {
  gap: 4px;   /* ≈ the word-space it replaces between emoji and label */
}

.nav-ico {
  display: none;
}

.nav-ico--keep {
  display: inline;
}

.nav-search-label,
.nav-drawer-head,
.nav-overlay {
  display: none;
}

/* ---------- BURGER ---------- */

.burger {
  display: none;
  flex-shrink: 0;

  width: 44px;
  height: 44px;

  border: 1px solid rgba(126, 91, 66, 0.16);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 4px 12px rgba(74, 50, 35, 0.08);

  transition: 0.2s ease;
}

.burger:hover {
  background: #fff;
}

.burger:focus-visible,
.nav-close:focus-visible {
  outline: 3px solid rgba(238, 155, 92, 0.35);
  outline-offset: 2px;
}

.burger-lines {
  display: grid;
  gap: 4px;
  width: 20px;
}

.burger-lines i {
  display: block;
  height: 2.5px;
  border-radius: 2px;
  background: var(--brown);
}

.burger-lines i:nth-child(2) {
  width: 70%;
  justify-self: start;
}

/* ---------- HERO ---------- */
.hero{position:relative;padding:80px 0 40px;overflow:hidden;}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--paper);padding:8px 18px;border-radius:999px;
  font-weight:700;font-size:.85rem;color:var(--orange-deep);
  box-shadow:var(--shadow);margin-bottom:22px;
}
.hero h1{font-size:3.4rem;line-height:1.25;color:var(--brown);margin-bottom:20px;}
.hero h1 .hl{color:var(--brown);}
.hero h1 .hl .word-highlight{color:var(--orange-deep);font-weight:800;}
.hero p{font-size:1.15rem;color:var(--brown-soft);line-height:2;max-width:520px;margin-bottom:30px;}
.hero-actions{display:flex;gap:16px;flex-wrap:wrap;}
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:16px 30px;border-radius:999px;font-weight:700;font-size:1.05rem;
  transition:transform .2s ease;
}
.btn-primary{background:var(--orange);color:var(--paper);box-shadow:0 6px 0 var(--orange-deep);}
.btn-primary:hover{transform:translateY(-3px);}
.btn-primary:active{transform:translateY(3px); box-shadow:0 2px 0 var(--orange-deep);}
.btn-ghost{background:var(--paper);color:var(--brown);box-shadow:0 6px 0 rgba(74,50,35,0.15);}
.btn-ghost:hover{transform:translateY(-3px);}

.hero-stats{display:flex;gap:26px;margin-top:38px;}
.hero-stats div{text-align:center;}
.hero-stats b{display:block;font-family:'Baloo Bhaijaan 2';font-size:1.6rem;color:var(--green-deep);}
.hero-stats span{font-size:.8rem;color:var(--brown-soft);}

.hero-art{position:relative;display:flex;align-items:center;justify-content:center;height:460px;}
.hero-cup-wrap{
  position:relative;width:320px;height:320px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #fff, var(--cream-2));
  box-shadow:0 20px 0 rgba(74,50,35,0.1), inset 0 0 0 8px #fff;
  display:flex;align-items:center;justify-content:center;
  animation:bob 5s ease-in-out infinite;
}
.hero-cup-wrap img{width:78%;}
.orbit-icon{
  position:absolute;font-size:2rem;background:var(--paper);border-radius:50%;
  width:60px;height:60px;display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow);
}
.orbit-icon.i1{top:0;right:10px;background:var(--yellow); animation:float 5s ease-in-out infinite;}
.orbit-icon.i2{bottom:20px;left:0;background:var(--sky); animation:float 6s ease-in-out infinite .5s;}
.orbit-icon.i3{top:40%;left:-20px;background:var(--pink); animation:float 5.5s ease-in-out infinite 1s;}
.orbit-icon.i4{bottom:0;right:40px;background:var(--purple); animation:float 6.5s ease-in-out infinite .3s;}

.wave-divider{display:block;width:100%;line-height:0;}
.wave-divider svg{width:100%;height:80px;display:block;}

/* ---------- SECTION shared ---------- */
section{position:relative;padding:90px 0;z-index:1;}
.section-head{text-align:center;max-width:640px;margin:0 auto 56px;}
.section-head .eyebrow{margin-bottom:16px;}
.section-head h2{font-size:2.4rem;color:var(--brown);}
.section-head p{margin-top:16px;color:var(--brown-soft);font-size:1.05rem;line-height:2;}

/* ---------- ABOUT ---------- */
.about{background:var(--paper);}
.about-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:60px;align-items:center;}
.about-art{position:relative;display:flex;align-items:center;justify-content:center;}
.about-art .blob-shape{
  width:340px;height:340px;
  border-radius:42% 58% 65% 35% / 45% 40% 60% 55%;
  background:var(--cream-2);
  display:flex;align-items:center;justify-content:center;
  animation:blobmorph 8s ease-in-out infinite;
}
@keyframes blobmorph{
  0%,100%{border-radius:42% 58% 65% 35% / 45% 40% 60% 55%;}
  50%{border-radius:58% 42% 35% 65% / 55% 60% 40% 45%;}
}
.about-art img{width:60%;}
.about-copy p{color:var(--brown-soft);line-height:2;font-size:1.02rem;margin-bottom:16px;}
.about-copy h2{font-size:1.5rem;margin:32px 0 12px;}
.about-copy h2:first-child{margin-top:0;font-size:2.1rem;}
.about-copy strong{color:var(--brown);}
.about-list{margin-top:26px;display:grid;gap:14px;}
.about-list li{
  display:flex;align-items:center;gap:14px;
  background:var(--cream);padding:14px 18px;border-radius:18px;font-weight:600;
}
.about-list li .ic{
  width:38px;height:38px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:1.2rem;flex-shrink:0;
}

/* ---------- PROGRAMS ---------- */
.programs{background:var(--cream);}
.prog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.prog-card{
  background:var(--paper);border-radius:28px;padding:30px 22px;text-align:center;
  box-shadow:var(--shadow);transition:transform .3s ease;position:relative;
}
.prog-card:hover{transform:translateY(-10px) rotate(-1deg);}
.prog-icon{
  width:74px;height:74px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:2.1rem;margin:0 auto 18px;
}
.prog-card h3{font-size:1.15rem;margin-bottom:10px;color:var(--brown);}
.prog-card p{font-size:.92rem;color:var(--brown-soft);line-height:1.8;}
.c1{background:#FDE4CE;} .c2{background:#DCEFDC;} .c3{background:#FCE9B4;} .c4{background:#FFE0E4;} .c5{background:#F0E5FF;} .c6{background:#FFE5F5;}

/* ---------- SCHEDULE ---------- */
.schedule{background:var(--paper);}
.timeline{
  max-width:720px;margin:0 auto;position:relative;
  padding-right:36px;border-right:4px dashed var(--orange);
}
.t-item{position:relative;padding-bottom:36px;}
.t-item:last-child{padding-bottom:0;}
.t-item::before{
  content:'';position:absolute;right:-46px;top:2px;width:20px;height:20px;border-radius:50%;
  background:var(--orange);border:4px solid var(--paper);box-shadow:0 0 0 3px var(--orange);
}
.t-time{font-family:'Baloo Bhaijaan 2';color:var(--orange-deep);font-size:1.1rem;margin-bottom:4px;}
.t-title{font-weight:700;margin-bottom:4px;}
.t-desc{color:var(--brown-soft);font-size:.92rem;}

/* ---------- GALLERY ---------- */
.gallery{background:var(--cream);}
.gal-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:150px;gap:18px;}
.gal-item{
  border-radius:26px;display:flex;align-items:center;justify-content:center;
  font-size:2.6rem;color:#fff;position:relative;overflow:hidden;transition:transform .3s ease;
}
.gal-item:hover{transform:scale(1.05) rotate(-1deg);}
.gal-item:nth-child(1){grid-column:span 2;grid-row:span 2;background:linear-gradient(135deg,var(--orange),var(--yellow));}
.gal-item:nth-child(2){background:linear-gradient(135deg,var(--sky),#bfe6ee);}
.gal-item:nth-child(3){background:linear-gradient(135deg,var(--pink),#ffd1d8);}
.gal-item:nth-child(4){background:linear-gradient(135deg,var(--green),#c9e8c4);}
.gal-item:nth-child(5){background:linear-gradient(135deg,var(--purple),#dcc7f2);}
.gal-item:nth-child(6){grid-column:span 2;background:linear-gradient(135deg,var(--yellow),#fff2c2);}

/* ---------- TESTIMONIALS ---------- */
.testi{background:var(--paper);}
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
.testi-card{background:var(--cream);border-radius:28px;padding:28px;position:relative;}
.testi-quote{color:var(--brown-soft);line-height:1.9;margin-bottom:18px;font-size:.96rem;}
.testi-person{display:flex;align-items:center;gap:12px;}
.testi-avatar{
  width:46px;height:46px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:1.3rem;color:#fff;font-weight:700;
}
.testi-name{font-weight:700;font-size:.92rem;}
.testi-kid{font-size:.78rem;color:var(--brown-soft);}

/* ---------- CONTACT TEASER (on homepage) ---------- */
.contact{
  background:var(--brown);color:var(--cream);border-radius:48px;margin:0 20px;
  position:relative;overflow:hidden;
}
.contact .wrap{position:relative;z-index:2;}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center;}
.contact h2{font-size:2.2rem;color:#fff;margin-bottom:16px;}
.contact p{color:#E8D9C7;line-height:2;margin-bottom:26px;}
.contact-info{display:grid;gap:14px;margin-bottom:10px;}
.contact-info li{display:flex;align-items:center;gap:12px;font-weight:600;}
.contact-info .ic{
  width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,0.12);
  display:flex;align-items:center;justify-content:center;
}
.contact-cta-box{
  background:var(--paper);border-radius:28px;padding:40px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:20px;
}
.contact-cta-box h3{color:var(--brown);font-size:1.3rem;}
.contact-cta-box p{color:var(--brown-soft);margin:0;}

/* ---------- FOOTER ---------- */
footer{margin-top:80px;padding:50px 0 26px;text-align:center;color:var(--brown-soft);}
.footer-brand{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:14px;}
.footer-brand img{width:42px;height:42px;border-radius:50%;}
.footer-brand span{font-family:'Baloo Bhaijaan 2';color:var(--orange-deep);font-size:1.2rem;}
.footer-links{display:flex;gap:20px;justify-content:center;margin:18px 0;flex-wrap:wrap;}
.footer-links a{font-weight:600;font-size:.9rem;}
.footer-links a:hover{color:var(--orange-deep);}
footer .copy{font-size:.8rem;opacity:.7;margin-top:10px;}

/* ---------- responsive ---------- */
@media (max-width:960px){
  .hero-grid, .about-grid, .contact-grid{grid-template-columns:1fr;}
  .hero-art{order:-1;height:320px;}
  .prog-grid{grid-template-columns:repeat(2,1fr);}
  .testi-grid{grid-template-columns:1fr;}
  .gal-grid{grid-template-columns:repeat(2,1fr);}
  .gal-item:nth-child(1){grid-column:span 2;}
  .gal-item:nth-child(6){grid-column:span 1;}
}
@media (max-width:720px){
  .hero h1{font-size:2.3rem;}
  .hero-stats{gap:16px;flex-wrap:wrap;}
  .contact{margin:0 12px;border-radius:32px;}
}





/* ==========================================
   Gardner List (لیست هوش‌های چندگانه در About)
========================================== */
.gardner-list{
    margin:18px 0;
    padding-right:22px;
    color:var(--brown);
    line-height:2.1;
}

.gardner-list li{
    margin-bottom:12px;
}

.gardner-list li::marker{
    color:var(--orange-deep);
}

.gardner-list strong{
    color:var(--orange-deep);
    font-weight:700;
}



/* ==========================================
   Page Intro (برای صفحاتی مثل About, Contact, Blog)
========================================== */
.page-hero{
  position:relative;
  padding:70px 0 50px;
  text-align:center;
  overflow:hidden;
}
.page-hero h1{
  font-size:2.4rem;
  color:var(--brown);
  margin-bottom:14px;
}
.page-hero p{
  color:var(--brown-soft);
  font-size:1.05rem;
  max-width:560px;
  margin:0 auto;
}

/* ==========================================
   Values (کارت‌های ارزش‌ها در About)
========================================== */
.values-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:26px;
}

/* ==========================================
   Contact Page (فرم واقعی)
========================================== */
.contact-page{background:var(--paper);}
.contact-page-grid{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:50px;
  align-items:start;
}
.contact-page-info{
  background:var(--cream);
  border-radius:28px;
  padding:32px;
}
.contact-page-info h3{color:var(--brown);margin-bottom:20px;font-size:1.2rem;}
.contact-page-info ul{display:grid;gap:14px;}
.contact-page-info li{display:flex;align-items:center;gap:12px;font-weight:600;color:var(--brown);}
.contact-page-info .ic{
  width:40px;height:40px;border-radius:50%;
  background:var(--paper);
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow);
  flex-shrink:0;
}

.contact-page-form{
  background:var(--paper);
  border-radius:28px;
  padding:36px;
  box-shadow:var(--shadow);
}
.form-group{margin-bottom:18px;}
.form-input, .form-textarea{
  width:100%;
  padding:13px 18px;
  border:3px solid var(--cream-2);
  border-radius:16px;
  font-family:'Vazirmatn', sans-serif;
  font-size:.95rem;
  background:var(--cream);
  color:var(--brown);
  transition:border-color .2s ease;
}
.form-input:focus, .form-textarea:focus{
  outline:none;
  border-color:var(--orange);
}
.form-textarea{resize:vertical;min-height:110px;}
.form-error{
  color:#c0392b;
  font-size:.82rem;
  display:block;
  margin-top:6px;
}
.form-submit-btn{
  width:100%;
  justify-content:center;
  border:none;
}
.alert-success{
  background:#DCEFDC;
  color:var(--green-deep);
  padding:16px 22px;
  border-radius:18px;
  margin-bottom:20px;
  font-weight:600;
}
.alert-error{
  background:#FBE3E3;
  color:#c0392b;
  padding:16px 22px;
  border-radius:18px;
  margin-bottom:20px;
  font-weight:600;
  border:1px solid #f1b4b4;
}

/* ---------- HEADER NOTIFICATION CENTER ---------- */
.notification-center{position:relative;flex:0 0 auto;z-index:70}
.notification-bell{position:relative;display:grid;place-items:center;width:44px;height:44px;border:1px solid rgba(126,91,66,.16);border-radius:14px;background:rgba(255,255,255,.78);font-size:1.18rem;box-shadow:0 4px 12px rgba(74,50,35,.08);transition:.2s ease}
.notification-bell:hover,.notification-bell[aria-expanded="true"]{background:#fff;transform:translateY(-1px);box-shadow:0 7px 18px rgba(74,50,35,.13)}
.notification-bell:focus-visible{outline:3px solid rgba(238,155,92,.35);outline-offset:2px}
.notification-badge{position:absolute;top:-6px;inset-inline-start:-6px;display:grid;place-items:center;min-width:21px;height:21px;padding:0 5px;border:2px solid #fff7e6;border-radius:999px;background:#d9534f;color:#fff;font:800 .67rem/1 Vazirmatn,sans-serif}
.notification-badge.is-empty{display:none}
.notification-panel{position:absolute;top:calc(100% + 12px);left:0;right:auto;width:min(390px,calc(100vw - 24px));border:1px solid #eadfd5;border-radius:18px;background:#fff;box-shadow:0 22px 55px rgba(46,34,25,.22);overflow:hidden;text-align:right;white-space:normal}
.notification-panel[hidden]{display:none!important}
.notification-panel__head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 16px;border-bottom:1px solid #eee7e1;background:#fffaf6}
.notification-panel__head>div{display:grid;gap:2px}
.notification-panel__head strong{font-size:.95rem;color:#352b25}
.notification-panel__head small{font-size:.7rem;color:#88786c}
.notification-read-all{padding:7px 10px;border-radius:9px;background:#fff0e5;color:#d96f30;font-size:.72rem;font-weight:800}
.notification-read-all:hover{background:#ffe4d1}
.notification-list{max-height:min(480px,65vh);overflow:auto;overscroll-behavior:contain}
.notification-item{position:relative;display:grid!important;grid-template-columns:38px minmax(0,1fr) 8px;align-items:start!important;gap:10px;width:100%;padding:13px 14px!important;border-radius:0!important;border-bottom:1px solid #f1ece8;color:#493d35!important;background:#fff;transition:background .18s ease!important}
.notification-item:last-child{border-bottom:0}
.notification-item:hover{background:#fffaf6!important;transform:none!important}
.notification-item.is-unread{background:#fff7ef}
.notification-item__icon{display:grid;place-items:center;width:36px;height:36px;border-radius:11px;background:#f6f1ec;font-size:1rem}
.notification-item__content{display:grid;gap:3px;min-width:0}
.notification-item__content strong{overflow:hidden;color:#3b312b;font-size:.81rem;text-overflow:ellipsis;white-space:nowrap}
.notification-item__content>span{display:-webkit-box;overflow:hidden;color:#6f645c;font-size:.72rem;line-height:1.65;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.notification-item__content time{color:#9a8e85;font-size:.65rem}
.notification-item>i{align-self:center;width:7px;height:7px;border-radius:50%;background:#e97938}
.notification-empty{display:grid;justify-items:center;gap:5px;padding:30px 18px;color:#776b63;text-align:center}
.notification-empty>span{font-size:1.5rem}
.notification-empty strong{font-size:.86rem;color:#493d35}
.notification-empty small{font-size:.72rem}
@media(max-width:900px){
  .notification-center{margin-inline-start:auto}
  .notification-panel{position:fixed;top:calc(var(--site-header-height,82px) + 8px);right:12px;left:12px;width:auto;max-height:calc(100vh - var(--site-header-height,82px) - 24px)}
  .notification-list{max-height:calc(100vh - var(--site-header-height,82px) - 100px)}
}

/* Global transient notifications */
.toast-stack{
  position:fixed;
  top:92px;
  left:24px;
  z-index:1000;
  width:min(390px,calc(100vw - 32px));
  display:grid;
  gap:12px;
  pointer-events:none;
}
.toast-message{
  --toast-color:#4d7a91;
  --toast-bg:#eff7fb;
  position:relative;
  display:grid;
  grid-template-columns:38px minmax(0,1fr) 30px;
  align-items:center;
  gap:10px;
  min-height:72px;
  padding:13px 14px 17px;
  overflow:hidden;
  color:var(--brown);
  background:var(--paper);
  border:1px solid color-mix(in srgb,var(--toast-color) 28%,transparent);
  border-inline-start:5px solid var(--toast-color);
  border-radius:17px;
  box-shadow:0 14px 38px rgba(50,35,24,.18);
  pointer-events:auto;
  animation:toastEnter .3s ease both;
}
.toast-success{--toast-color:#4f9561;--toast-bg:#edf8ef;}
.toast-error{--toast-color:#c94f4f;--toast-bg:#fff0f0;}
.toast-warning{--toast-color:#b77a24;--toast-bg:#fff7e3;}
.toast-info{--toast-color:#4d7a91;--toast-bg:#eff7fb;}
.toast-icon{
  width:36px;height:36px;display:flex;align-items:center;justify-content:center;
  color:var(--toast-color);background:var(--toast-bg);border-radius:50%;font-weight:900;
}
.toast-body{font-size:.86rem;line-height:1.75;font-weight:650;overflow-wrap:anywhere;}
.toast-close{width:30px;height:30px;border-radius:9px;background:transparent;color:var(--brown-soft);font-size:1.25rem;line-height:1;}
.toast-close:hover{background:rgba(74,50,35,.08);}
.toast-progress{position:absolute;right:0;bottom:0;width:100%;height:4px;background:var(--toast-color);transform-origin:right;animation:toastProgress 10s linear forwards;}
.toast-message:hover .toast-progress{animation-play-state:paused;}
.toast-message.is-leaving{animation:toastLeave .28s ease forwards;}
@keyframes toastEnter{from{opacity:0;transform:translateX(-24px) scale(.97)}to{opacity:1;transform:none}}
@keyframes toastLeave{to{opacity:0;transform:translateX(-18px) scale(.97)}}
@keyframes toastProgress{to{transform:scaleX(0)}}
@media(max-width:600px){
  .toast-stack{top:78px;left:16px;right:16px;width:auto;}
  .toast-message{min-height:64px;padding:11px 12px 15px;}
}

/* ==========================================
   Blog Pages
========================================== */
.blog-page{background:var(--cream);}

.category-filter{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:center;
  margin-bottom:48px;
}
.category-filter a{
  padding:9px 22px;
  border-radius:999px;
  background:var(--paper);
  font-weight:600;
  font-size:.9rem;
  box-shadow:var(--shadow);
  transition:all .2s ease;
}
.category-filter a.active,
.category-filter a:hover{
  background:var(--orange);
  color:var(--paper);
}

.posts-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:28px;
}
.post-card{
  background:var(--paper);
  border-radius:28px;
  overflow:hidden;
  box-shadow:var(--shadow);
  transition:transform .3s ease;
}
.post-card:hover{transform:translateY(-8px) rotate(-0.5deg);}
.post-image{aspect-ratio:1/1;background:var(--cream-2);overflow:hidden;}
.post-image img{width:100%;height:100%;object-fit:cover;}
.post-image .img-placeholder{
  height:100%;display:flex;align-items:center;justify-content:center;font-size:2.8rem;
}
.post-info{padding:22px;}
.post-category{
  display:inline-block;
  background:var(--yellow);
  color:var(--brown);
  padding:5px 14px;
  border-radius:999px;
  font-size:.78rem;
  font-weight:700;
  margin-bottom:12px;
}
.post-info h3{color:var(--brown);margin-bottom:10px;font-size:1.1rem;}
.post-info p{color:var(--brown-soft);font-size:.9rem;line-height:1.7;}
.post-date{font-size:.8rem;color:var(--brown-soft);opacity:.7;}
.no-posts{text-align:center;padding:60px;color:var(--brown-soft);}

/* ---------- Public store ---------- */
.shop-page{padding:42px 0 80px;min-height:70vh;background:linear-gradient(180deg,#fffaf0 0,var(--cream) 42%);}
.shop-wrap{max-width:1240px;}
.shop-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;padding:28px 32px;margin-bottom:22px;background:rgba(255,253,248,.88);border:1px solid rgba(74,50,35,.08);border-radius:28px;box-shadow:0 10px 28px rgba(74,50,35,.07);}
.shop-kicker{display:inline-flex;padding:6px 13px;border-radius:999px;background:#fff0df;color:var(--orange-deep);font-size:.8rem;font-weight:800;}
.shop-hero h1{font-size:clamp(1.75rem,3vw,2.5rem);line-height:1.3;margin:10px 0 4px;}
.shop-hero p{color:var(--brown-soft);line-height:1.8;max-width:650px;}
.shop-benefits{display:flex;gap:8px;flex-wrap:wrap;flex-shrink:0;}
.shop-benefits span{padding:9px 13px;border-radius:14px;background:#eef7ec;color:#3f7650;font-size:.78rem;font-weight:700;}
.shop-filter{display:grid;grid-template-columns:minmax(260px,1fr) minmax(190px,.45fr) auto auto;align-items:end;gap:12px;padding:18px;background:var(--paper);border:1px solid rgba(74,50,35,.09);border-radius:22px;box-shadow:0 7px 22px rgba(74,50,35,.06);}
.shop-filter-field{position:relative;}
.shop-filter-field label{display:block;margin:0 4px 7px;font-size:.78rem;font-weight:700;}
.shop-filter-field .form-input{width:100%;height:48px;border-radius:14px;background:#fff;border:1px solid #e7d9c6;padding:0 14px;}
.shop-search-field>span{position:absolute;right:15px;bottom:10px;font-size:1.35rem;color:var(--brown-soft);}
.shop-search-field .form-input{padding-right:44px;}
.shop-filter-submit{height:48px;padding:0 24px;border-radius:14px;box-shadow:none;white-space:nowrap;}
.shop-filter-clear{height:48px;display:flex;align-items:center;padding:0 8px;color:var(--brown-soft);font-size:.8rem;font-weight:700;white-space:nowrap;}
.shop-results-head{display:flex;align-items:end;justify-content:space-between;margin:34px 2px 16px;}
.shop-results-head h2{font-size:1.45rem;}
.shop-results-head p{font-size:.8rem;color:var(--brown-soft);}
.shop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,280px));justify-content:start;gap:20px;}
.shop-card{display:flex;flex-direction:column;min-width:0;background:var(--paper);border:1px solid rgba(74,50,35,.08);border-radius:22px;overflow:hidden;box-shadow:0 7px 20px rgba(74,50,35,.08);transition:transform .2s ease,box-shadow .2s ease;}
.shop-card:hover{transform:translateY(-4px);box-shadow:0 13px 28px rgba(74,50,35,.12);}
.shop-card-media{position:relative;display:block;aspect-ratio:1/1;overflow:hidden;background:#f5eee3;}
.shop-card-media img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease;}
.shop-card:hover .shop-card-media img{transform:scale(1.035);}
.shop-image-placeholder{display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:4rem;background:linear-gradient(145deg,#fff8ea,#f4ead9);}
.shop-stock-badge{position:absolute;top:12px;right:12px;padding:5px 10px;border-radius:999px;background:rgba(255,255,255,.92);color:#3f7650;font-size:.7rem;font-weight:800;box-shadow:0 3px 10px rgba(0,0,0,.08);}
.shop-stock-badge.is-out{color:#a74747;}
.shop-card-body{display:flex;flex-direction:column;flex:1;padding:16px;}
.shop-card-category{color:var(--orange-deep);font-size:.72rem;font-weight:700;}
.shop-card h3{font-size:1.12rem;margin:4px 0 5px;line-height:1.55;}
.shop-card-description{display:-webkit-box;min-height:43px;overflow:hidden;color:var(--brown-soft);font-size:.79rem;line-height:1.7;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.shop-card-footer{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding-top:16px;margin-top:auto;border-top:1px solid rgba(74,50,35,.08);}
.shop-card-price{display:flex;align-items:baseline;gap:4px;flex-wrap:wrap;}
.shop-card-price small{width:100%;color:var(--brown-soft);font-size:.65rem;}
.shop-card-price strong{font-size:1.02rem;color:var(--brown);}
.shop-card-price span{font-size:.65rem;color:var(--brown-soft);}
.shop-card-action{display:flex;align-items:center;gap:5px;padding:9px 12px;border-radius:12px;background:var(--orange);color:white;font-size:.75rem;font-weight:800;white-space:nowrap;}
.shop-empty{text-align:center;padding:55px 24px;background:var(--paper);border-radius:24px;border:1px solid rgba(74,50,35,.08);}
.shop-empty>span{font-size:2.2rem;}.shop-empty h3{margin:8px 0 4px}.shop-empty p{color:var(--brown-soft);margin-bottom:18px;}

.shop-detail-page{padding-top:24px;}
.shop-breadcrumb{display:flex;gap:9px;align-items:center;margin:0 4px 16px;color:var(--brown-soft);font-size:.82rem;}
.shop-breadcrumb a{color:var(--orange-deep);font-weight:700;}
.shop-product-layout{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(380px,.85fr);gap:34px;align-items:start;}
.shop-product-gallery,.shop-product-info{min-width:0;}
.shop-main-image{aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;overflow:hidden;background:white;border:1px solid rgba(74,50,35,.08);border-radius:26px;box-shadow:0 9px 25px rgba(74,50,35,.08);}
.shop-main-image img{width:100%;height:100%;object-fit:contain;}
.shop-thumbnails{display:flex;gap:10px;margin-top:12px;overflow-x:auto;padding:2px 2px 8px;}
.shop-thumbnail{width:76px;height:76px;flex:0 0 76px;padding:3px;background:white;border:2px solid transparent;border-radius:14px;overflow:hidden;}
.shop-thumbnail img{width:100%;height:100%;object-fit:cover;border-radius:9px;}
.shop-thumbnail.is-active{border-color:var(--orange);}
.shop-product-info{padding:16px 4px;}
.shop-product-meta{display:flex;align-items:center;justify-content:space-between;gap:14px;}
.shop-availability{color:#438153;font-size:.8rem;font-weight:800;}.shop-availability.is-out{color:#ac4d4d;}
.shop-product-info h1{font-size:clamp(1.8rem,3.5vw,2.65rem);line-height:1.35;margin:16px 0 4px;}
.shop-sku{font-size:.78rem;color:var(--brown-soft);}
.shop-product-description{margin:20px 0;color:var(--brown-soft);font-size:.93rem;line-height:2;}
.shop-purchase-card{padding:20px;background:var(--paper);border:1px solid rgba(74,50,35,.09);border-radius:22px;box-shadow:0 9px 24px rgba(74,50,35,.08);}
.shop-detail-price{display:flex;align-items:baseline;gap:7px;padding-bottom:15px;margin-bottom:15px;border-bottom:1px solid rgba(74,50,35,.09);}
.shop-detail-price span{margin-left:auto;color:var(--brown-soft);font-size:.78rem;}.shop-detail-price strong{font-size:1.55rem;}.shop-detail-price small{font-size:.75rem;color:var(--brown-soft);}
.shop-variant-field label{display:block;margin-bottom:7px;font-size:.85rem;font-weight:800;}
.shop-variant-field .form-input{width:100%;height:52px;border-radius:14px;background:#fff;border:1px solid #e3d5c1;}
.shop-variant-field small{display:block;margin-top:6px;color:var(--brown-soft);font-size:.7rem;}
.shop-add-button{width:100%;display:flex;justify-content:center;gap:8px;margin-top:16px;padding:13px;border-radius:14px;box-shadow:0 4px 0 var(--orange-deep);}
.shop-purchase-notes{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:18px;}
.shop-purchase-notes span{padding:9px;text-align:center;background:#f4f8f0;color:#55735b;border-radius:11px;font-size:.68rem;font-weight:700;}
.shop-out-message{padding:13px;text-align:center;border-radius:12px;background:#fff0ef;color:#a74747;font-weight:700;}

@media(max-width:900px){
  .shop-hero{align-items:flex-start;flex-direction:column;}
  .shop-filter{grid-template-columns:1fr 1fr;}.shop-filter-submit{width:100%;}.shop-filter-clear{justify-content:center;}
  .shop-product-layout{grid-template-columns:1fr;gap:22px;}.shop-product-info{padding:0;}
}
@media(max-width:600px){
  .shop-page{padding:20px 0 55px;}.shop-wrap{padding:0 14px;}
  .shop-hero{padding:22px 18px;border-radius:22px;}.shop-benefits{width:100%;}.shop-benefits span{flex:1;text-align:center;}
  .shop-filter{grid-template-columns:1fr;padding:14px;}.shop-filter-clear{height:auto;padding:3px;}
  .shop-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
  .shop-card{border-radius:17px;}.shop-card-body{padding:11px;}.shop-card h3{font-size:.9rem;}
  .shop-card-description{display:none;}.shop-card-footer{display:block;padding-top:10px;}.shop-card-action{justify-content:center;margin-top:10px;padding:8px 5px;}
  .shop-main-image{aspect-ratio:1/1;border-radius:20px;}.shop-thumbnail{width:62px;height:62px;flex-basis:62px;}
  .shop-product-info h1{font-size:1.8rem;}.shop-purchase-card{padding:16px;}.shop-purchase-notes{grid-template-columns:1fr;}
}

.pagination{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:20px;
  margin-top:50px;
}
.pagination a{
  padding:11px 24px;
  background:var(--orange);
  color:var(--paper);
  border-radius:999px;
  font-weight:700;
  box-shadow:0 5px 0 var(--orange-deep);
}
.current-page{font-weight:600;color:var(--brown);}

/* Post Detail */
.post-detail{max-width:800px;margin:0 auto;padding:60px 24px 20px;}
.post-detail-header{text-align:center;margin-bottom:32px;}
.post-detail-header h1{font-size:2rem;margin:14px 0;color:var(--brown);}
.post-meta{display:flex;justify-content:center;gap:20px;color:var(--brown-soft);font-size:.9rem;}
.post-detail-image{border-radius:28px;overflow:hidden;margin-bottom:32px;}
.post-detail-image img{width:100%;}
.post-detail-content{font-size:1.05rem;line-height:2;color:var(--brown);}
.post-detail-content p{margin-bottom:20px;}
.related-posts{max-width:1100px;margin:60px auto;padding:0 40px;}

@media (max-width:900px){
  .contact-page-grid{grid-template-columns:1fr;}
  .values-grid{grid-template-columns:1fr;}
}
/* ================= SEARCH ================= */
.nav-search{font-size:1.05rem;padding:9px 13px !important;}
.search-page{padding-bottom:60px;}
.search-bar{
  display:flex;gap:10px;align-items:center;
  max-width:640px;margin:0 auto 30px;position:relative;
}
.search-bar .form-input{flex:1;padding:14px 18px;border-radius:999px;font-size:1rem;}

/* live-suggest dropdown */
.search-suggest-panel{
  position:absolute;top:calc(100% + 10px);right:0;left:0;z-index:40;
  background:var(--paper);border-radius:20px;
  box-shadow:0 12px 32px rgba(74,50,35,.18);
  border:2px dashed rgba(74,50,35,.15);
  overflow:hidden;text-align:right;
}
.suggest-head{
  padding:10px 18px 4px;font-weight:800;font-size:.85rem;color:var(--orange-deep);
  font-family:'Baloo Bhaijaan 2','Vazirmatn',sans-serif;
}
.suggest-item{
  display:flex;flex-direction:column;gap:2px;padding:9px 18px;
  transition:background .15s ease;
}
.suggest-item:hover{background:var(--cream);}
.suggest-item strong{color:var(--brown);font-size:.95rem;}
.suggest-item span{color:var(--brown-soft);font-size:.78rem;}
.suggest-more,.suggest-all{
  display:block;width:100%;text-align:center;padding:11px;font-weight:700;
  color:var(--green-deep);background:var(--cream-2);border:none;cursor:pointer;
  font-family:inherit;font-size:.88rem;
}
.suggest-more:hover,.suggest-all:hover{background:var(--yellow);}
.suggest-loading{
  height:52px;margin:6px 14px;border-radius:16px;
  background:linear-gradient(90deg,var(--cream) 25%,var(--cream-2) 50%,var(--cream) 75%);
  background-size:200% 100%;animation:suggestShimmer 1s infinite;
}
@keyframes suggestShimmer{from{background-position:200% 0;}to{background-position:-200% 0;}}
.suggest-none,.suggest-error{padding:18px;text-align:center;color:var(--brown-soft);}

/* results header + tabs */
.search-results-title{margin-bottom:14px;font-size:1.3rem;}
.search-tabs{
  display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px;
}
.search-tab{
  padding:7px 16px;border-radius:999px;background:var(--paper);
  font-size:.88rem;font-weight:600;color:var(--brown-soft);
  box-shadow:0 4px 0 rgba(74,50,35,.1);transition:all .2s ease;
}
.search-tab span{opacity:.65;font-size:.78rem;}
.search-tab:hover{transform:translateY(-2px);}
.search-tab.active{background:var(--orange);color:var(--paper);box-shadow:0 4px 0 var(--orange-deep);}

/* per-section filters */
.search-filters{
  display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:22px;
}
.search-filter{
  width:auto;min-width:160px;padding:8px 14px;border-radius:999px;font-size:.85rem;
}
.search-filter-check{
  display:inline-flex;align-items:center;gap:6px;padding:8px 14px;
  background:var(--paper);border-radius:999px;font-size:.85rem;font-weight:600;
  box-shadow:0 4px 0 rgba(74,50,35,.1);cursor:pointer;
}

/* "همه" groups */
.search-group{margin-bottom:34px;}
.search-group-head{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  margin-bottom:14px;
}
.search-group-head h3{color:var(--brown);font-size:1.15rem;}
.search-group-head small{color:var(--brown-soft);font-size:.75rem;font-family:'Vazirmatn';font-weight:400;}
.search-more-link{font-size:.85rem;font-weight:700;color:var(--orange-deep);white-space:nowrap;}
.search-more-link:hover{text-decoration:underline;}

/* initial / no-results states */
.search-empty-state,.search-no-result{
  text-align:center;background:var(--paper);border-radius:24px;
  padding:38px 24px;box-shadow:var(--shadow);
}
.search-no-result{max-width:640px;margin:26px auto 0;}
.search-no-result h3{margin:6px 0 8px;}
.search-chips,.search-quick-links{
  display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:14px;
}
.search-chip{
  padding:8px 18px;border-radius:999px;background:var(--cream-2);
  font-size:.88rem;font-weight:600;color:var(--brown);
  transition:all .2s ease;
}
.search-chip:hover{background:var(--yellow);transform:translateY(-2px);}
.search-chip-soft{background:transparent;border:2px dashed rgba(74,50,35,.25);}

@media (max-width:720px){
  .search-bar{flex-direction:column;gap:10px;}
  .search-bar .form-input{width:100%;}
  .search-bar .btn{width:100%;}
  .search-suggest-panel{position:fixed;top:auto;right:12px;left:12px;bottom:12px;max-height:70vh;overflow-y:auto;}
  .search-tabs{overflow-x:auto;flex-wrap:nowrap;padding-bottom:6px;-webkit-overflow-scrolling:touch;}
  .search-tab{white-space:nowrap;flex-shrink:0;}
}

/* ---- search v2: recent searches + did-you-mean ---- */
.recent-searches{margin-bottom:22px;padding-bottom:16px;border-bottom:2px dashed rgba(74,50,35,.12);}
.recent-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px;}
.recent-clear{
  background:none;color:var(--brown-soft);font-size:.78rem;font-weight:600;
  padding:4px 10px;border-radius:999px;transition:all .2s ease;
}
.recent-clear:hover{background:var(--cream-2);color:var(--orange-deep);}
.did-you-mean{
  margin:8px 0 14px;font-size:1rem;color:var(--brown);
}
.did-you-mean a{
  color:var(--orange-deep);font-weight:800;
  border-bottom:2px dashed var(--orange);
}
.search-suggest-panel{
  max-height:420px;overflow-y:auto;   /* desktop scroll safety too */
}
@media (max-width:720px){
  .search-suggest-panel{padding-bottom:env(safe-area-inset-bottom,0);}
}


/* ==========================================
   Mobile / tablet sidebar navigation  (<= 1279px)
   - the burger opens .nav-links as a right-hand sidebar (RTL)
   - toggled by body.nav-open  (see base.html)
   - 1279px because the full desktop menu needs ~1190px (manager
     role) to ~1265px (very long user name) to fit without overlap.
     Keep it in sync with the matchMedia() call in base.html.
========================================== */
@media (max-width:1279px){

  /* backdrop-filter would make the header the containing block of the
     fixed sidebar, so it is dropped here in favour of a near-opaque bg */
  header{
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
    background:rgba(255,247,230,.97);
  }
  /* sit above the dashboard sidebar (z 80) and its overlay (z 70) */
  body.nav-open header{z-index:900;}
  body.nav-open{overflow:hidden;}

  header nav.wrap{
    display:flex;
    justify-content:flex-start;
    gap:12px;
    padding:14px 16px;
  }

  .burger{display:grid;place-items:center;}
  .notification-center{margin-inline-start:auto;}
  .brand{gap:10px;min-width:0;flex-shrink:1;}
  .brand-name{font-size:1.35rem;}
  .brand-tag{white-space:nowrap;}

  /* ---- backdrop ---- */
  .nav-overlay{
    display:block;
    position:fixed;inset:0;z-index:100;   /* above .notification-center (70) */
    background:rgba(74,50,35,.45);
    opacity:0;visibility:hidden;
    transition:opacity .3s ease, visibility 0s linear .3s;
  }
  body.nav-open .nav-overlay{
    opacity:1;visibility:visible;
    transition:opacity .3s ease;
  }

  /* ---- sidebar ---- */
  .nav-links{
    position:fixed;
    top:0;bottom:0;right:0;            /* RTL: opens from the right edge */
    z-index:101;
    flex:none;

    width:min(320px,86vw);
    height:100vh;height:100dvh;

    display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;
    gap:2px;
    padding:0 14px;

    background:var(--paper);
    border-radius:28px 0 0 28px;
    box-shadow:-14px 0 40px rgba(74,50,35,.25);

    overflow-y:auto;
    overscroll-behavior:contain;
    white-space:normal;

    transform:translateX(100%);
    visibility:hidden;                 /* also removes closed links from tab order */
    transition:transform .3s cubic-bezier(.22,.8,.3,1), visibility 0s linear .3s;
  }
  body.nav-open .nav-links{
    transform:none;
    visibility:visible;
    transition:transform .3s cubic-bezier(.22,.8,.3,1);
  }

  .nav-drawer-head{
    position:sticky;top:0;z-index:1;
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    margin:0 -14px 8px;
    padding:calc(16px + env(safe-area-inset-top,0px)) 18px 12px;
    background:var(--paper);
    border-bottom:2px dashed rgba(74,50,35,.12);
  }
  .nav-drawer-title{                   /* same font/weight as .brand-name in the header */
    display:flex;align-items:center;gap:10px;
    font-size:1.35rem;line-height:1;color:var(--orange-deep);
  }
  .nav-drawer-title img{
    width:38px;height:38px;border-radius:50%;
    background:var(--paper);padding:2px;
    box-shadow:0 3px 0 rgba(74,50,35,.15);
  }
  .nav-close{
    display:grid;place-items:center;
    width:40px;height:40px;border-radius:12px;
    background:var(--cream-2);color:var(--brown);
    font-size:1.05rem;line-height:1;
    transition:background .2s ease;
  }
  .nav-close:hover{background:var(--yellow);}

  /* ---- rows ---- */
  .nav-links a{
    display:flex;justify-content:flex-start;gap:12px;
    width:100%;
    padding:8px 10px;
    border-radius:16px;
    font-size:1rem;
  }
  .nav-links a:hover,
  .nav-links a:focus-visible{background:var(--cream-2);transform:none;}
  .nav-links a:active{background:var(--yellow);}

  .nav-links .nav-ico{
    display:inline-grid;place-items:center;flex:none;
    width:34px;height:34px;border-radius:11px;
    background:var(--cream);
    font-size:1.1rem;line-height:1;
  }
  .nav-links a.nav-search{padding:8px 10px !important;font-size:1rem !important;}
  .nav-search-label{display:inline;}

  .nav-links .nav-link--strong{padding:8px 10px;}
  .nav-links .nav-link--strong > span:last-child{max-width:none;white-space:normal;}

  .nav-links .nav-cart-badge{
    position:static;
    margin-inline-start:auto;
    width:auto;min-width:22px;height:22px;padding:0 6px;
    border-radius:999px;
    font-size:.75rem;font-weight:700;
  }

  .nav-links .nav-sep{
    margin-top:6px;padding-top:8px;
    border-top:2px dashed rgba(74,50,35,.12);
  }

  /* login / logout button pinned to the bottom of the sidebar */
  .nav-links > li:last-child{
    position:sticky;bottom:0;
    margin-top:auto;
    padding:14px 0 calc(16px + env(safe-area-inset-bottom,0px));
    background:linear-gradient(to bottom,rgba(255,253,248,0),var(--paper) 14px);
  }
  .nav-links a.nav-cta{
    justify-content:center;
    padding-top:13px !important;padding-bottom:13px !important;
    font-size:1.02rem;
  }
  .nav-links a.nav-cta:hover{transform:none;}
}

@media (max-width:340px){
  .brand-tag{display:none;}
}

@media (prefers-reduced-motion:reduce){
  .nav-links,
  .nav-overlay{transition:none !important;}
}