/* ===========================================================
   COMPONENTS — shared across every page (editorial / gallery)
=========================================================== */

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.7rem;
  font-family:var(--font-body);font-weight:var(--fw-medium);font-size:var(--fs-xs);
  letter-spacing:var(--tracking-mid);text-transform:uppercase;
  padding:1rem 2rem;border:1px solid var(--c-ink);
  transition:background var(--dur-fast) var(--ease-organic),color var(--dur-fast) var(--ease-organic),border-color var(--dur-fast);
  white-space:nowrap;
}
.btn svg{width:15px;height:15px;stroke-width:1.4;}
.btn-primary{background:var(--c-ink);color:var(--c-cream);}
.btn-primary:hover{background:var(--accent-strong);border-color:var(--accent-strong);}
.btn-accent{background:var(--accent);color:#fff;border-color:var(--accent);}
.btn-accent:hover{background:var(--accent-strong);border-color:var(--accent-strong);}
.btn-outline{background:transparent;color:var(--c-ink);border-color:var(--c-ink);}
.btn-outline:hover{background:var(--c-ink);color:var(--c-cream);}
.btn-ghost{background:transparent;color:var(--c-ink);border:none;padding:.6rem 0;letter-spacing:var(--tracking-mid);position:relative;}
.btn-ghost::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--c-ink);transform:scaleX(1);transform-origin:left;transition:transform var(--dur-mid) var(--ease-organic);}
.btn-ghost:hover::after{transform:scaleX(.4);}
.btn-block{width:100%;}
.btn-sm{padding:.7rem 1.4rem;}

/* ---------- Form-submit popup (replaces plain-text toast for real form submissions) ---------- */
.form-modal-overlay{
  position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center;
  padding:var(--sp-5); background:var(--c-ink-70);
  opacity:0; visibility:hidden; transition:opacity var(--dur-fast) var(--ease-organic), visibility 0s linear var(--dur-fast);
}
.form-modal-overlay.open{ opacity:1; visibility:visible; transition:opacity var(--dur-fast) var(--ease-organic); }
.form-modal{
  position:relative; width:100%; max-width:440px; background:var(--bg-surface);
  border-top:3px solid var(--accent); box-shadow:var(--shadow-lift);
  padding:var(--sp-8) var(--sp-6) var(--sp-6); text-align:center;
  transform:translateY(16px); transition:transform var(--dur-mid) var(--ease-organic);
}
.form-modal-overlay.open .form-modal{ transform:translateY(0); }
.form-modal-close{
  position:absolute; top:var(--sp-3); right:var(--sp-3); width:32px; height:32px;
  display:flex; align-items:center; justify-content:center; color:var(--text-muted);
  transition:color var(--dur-fast);
}
.form-modal-close:hover{ color:var(--c-ink); }
.form-modal-close svg{ width:16px; height:16px; stroke-width:1.4; }
.form-modal-icon{
  width:52px; height:52px; margin:0 auto var(--sp-4); border-radius:var(--r-circle);
  background:var(--accent); color:var(--c-cream); display:flex; align-items:center; justify-content:center;
}
.form-modal-icon svg{ width:22px; height:22px; stroke-width:1.6; }
.form-modal .eyebrow{ justify-content:center; margin-bottom:var(--sp-3); }
.form-modal h2{ font-size:var(--fs-xl); margin-bottom:var(--sp-3); }
.form-modal p{ color:var(--text-muted); line-height:var(--lh-loose); max-width:34ch; margin-inline:auto; }
.form-modal .btn{ margin-top:var(--sp-6); }

/* ---------- Site header / nav ---------- */
.site-header{
  position:sticky;top:0;z-index:500;
  background:var(--bg-page);
  border-bottom:1px solid var(--border-soft);
}
.nav-row{
  display:flex;align-items:center;justify-content:space-between;
  padding-block:1.35rem;gap:var(--sp-5);
}
.brand{
  display:flex;align-items:center;gap:.7rem;
  font-family:var(--font-display);font-size:1.6rem;font-weight:500;color:var(--c-ink);
  letter-spacing:.02em;
}
.brand-mark{
  width:30px;height:30px;flex:none;
  border:1px solid var(--c-ink);
  display:flex;align-items:center;justify-content:center;color:var(--c-ink);
}
.brand-mark svg{width:15px;height:15px;stroke-width:1.2;}

.nav-links{display:flex;align-items:center;gap:var(--sp-6);}
.nav-links a{
  font-size:var(--fs-xs);font-weight:var(--fw-medium);color:var(--text-primary);
  letter-spacing:var(--tracking-wide);text-transform:uppercase;
  position:relative;padding-block:.25rem;
}
.nav-links a::after{
  content:"";position:absolute;left:0;bottom:-3px;width:0;height:1px;background:var(--c-ink);
  transition:width var(--dur-mid) var(--ease-organic);
}
.nav-links a:hover::after,.nav-links a.active::after{width:100%;}
.nav-links a.active{color:var(--accent-strong);}

.nav-actions{display:flex;align-items:center;gap:1.4rem;}
.icon-btn{
  width:38px;height:38px;display:flex;align-items:center;justify-content:center;
  background:transparent;color:var(--c-ink);transition:opacity var(--dur-fast);
  position:relative;
}
.icon-btn:hover{opacity:.55;}
.icon-btn svg{width:18px;height:18px;stroke-width:1.3;}
.cart-count{
  position:absolute;top:-2px;right:-2px;background:var(--accent);color:#fff;
  font-size:.62rem;font-weight:600;width:16px;height:16px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
}
.nav-toggle{display:none;background:none;border:none;color:var(--c-ink);}
.nav-toggle svg{width:24px;height:24px;}

@media (max-width:920px){
  .nav-links{
    position:fixed;inset:0 0 0 auto;height:100dvh;width:min(340px,86vw);
    background:var(--c-cream);flex-direction:column;align-items:flex-start;
    padding:6.5rem var(--sp-6) var(--sp-6);gap:var(--sp-6);
    box-shadow:-24px 0 60px -20px rgba(28,27,24,.35);
    transform:translateX(100%);transition:transform var(--dur-mid) var(--ease-organic);
    z-index:600;border-left:1px solid var(--c-line);
  }
  .nav-links.open{transform:translateX(0);}
  .nav-links a{font-size:var(--fs-lg);font-family:var(--font-display);text-transform:none;letter-spacing:0;}
  .nav-toggle{display:flex;align-items:center;justify-content:center;}
  .nav-scrim{
    position:fixed;inset:0;background:rgba(28,27,24,.4);z-index:590;
    opacity:0;pointer-events:none;transition:opacity var(--dur-mid) var(--ease-organic);
  }
  .nav-scrim.open{opacity:1;pointer-events:auto;}
}

/* ---------- Mega menu (category dropdown) ---------- */
.nav-item-mega{position:relative;}
.nav-mega-trigger{
  display:flex;align-items:center;gap:.4rem;background:none;border:none;color:var(--text-primary);
  font-size:var(--fs-xs);font-weight:var(--fw-medium);letter-spacing:var(--tracking-wide);text-transform:uppercase;
  padding-block:.25rem;position:relative;font-family:inherit;
}
.nav-mega-trigger::after{
  content:"";position:absolute;left:0;bottom:-3px;width:0;height:1px;background:var(--c-ink);
  transition:width var(--dur-mid) var(--ease-organic);
}
.nav-mega-trigger:hover::after,.nav-mega-trigger[aria-expanded="true"]::after{width:100%;}
.nav-mega-trigger.active{color:var(--accent-strong);}
.nav-mega-trigger svg{width:11px;height:11px;stroke-width:1.6;transition:transform var(--dur-fast) var(--ease-organic);}
.nav-mega-trigger[aria-expanded="true"] svg{transform:rotate(180deg);}

.mega-menu{
  position:fixed;top:0;left:0;right:0;
  background:var(--bg-page);border-bottom:1px solid var(--border-soft);
  box-shadow:0 24px 48px -28px rgba(28,27,24,.35);
  padding:6.5rem 0 var(--sp-8);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity var(--dur-mid) var(--ease-organic),transform var(--dur-mid) var(--ease-organic),visibility 0s linear var(--dur-mid);
  z-index:450;
}
.mega-menu.open{opacity:1;visibility:visible;transform:translateY(0);transition:opacity var(--dur-mid) var(--ease-organic),transform var(--dur-mid) var(--ease-organic);}
.mega-menu-inner{max-width:var(--container-max);margin-inline:auto;padding-inline:var(--gutter);display:grid;grid-template-columns:1fr 1fr 1fr auto auto;gap:var(--sp-8);}
.mega-col h5{font-size:var(--fs-2xs);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--text-muted);margin-bottom:var(--sp-4);font-weight:var(--fw-medium);}
.mega-col ul{display:flex;flex-direction:column;gap:.75rem;}
.mega-col a{font-size:var(--fs-sm);color:var(--text-primary);transition:opacity var(--dur-fast),padding-left var(--dur-fast);}
.mega-col a:hover{opacity:.55;padding-left:.35rem;}
.mega-col a.mega-all{font-weight:var(--fw-semibold);}
.mega-tile{position:relative;width:180px;aspect-ratio:3/4;overflow:hidden;display:block;flex:none;}
.mega-tile img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-slow) var(--ease-organic);}
.mega-tile:hover img{transform:scale(1.06);}
.mega-tile span{
  position:absolute;left:0;right:0;bottom:0;padding:.9rem;z-index:1;color:var(--c-cream);
  background:linear-gradient(0deg,rgba(28,27,24,.75) 0%,rgba(28,27,24,0) 100%);
  font-size:var(--fs-2xs);letter-spacing:var(--tracking-wide);text-transform:uppercase;
}
.mega-scrim{position:fixed;inset:0;background:rgba(28,27,24,.28);z-index:440;opacity:0;pointer-events:none;transition:opacity var(--dur-mid) var(--ease-organic);}
.mega-scrim.open{opacity:1;pointer-events:auto;}

@media (max-width:1080px){
  .mega-menu-inner{grid-template-columns:1fr 1fr;grid-auto-flow:row;}
  .mega-tile{width:100%;aspect-ratio:16/8;}
}
@media (max-width:920px){
  .nav-item-mega{width:100%;}
  .nav-mega-trigger{font-size:var(--fs-lg);font-family:var(--font-display);text-transform:none;letter-spacing:0;}
  .mega-menu{position:static;box-shadow:none;border-bottom:none;padding:var(--sp-4) 0 0;opacity:1;visibility:visible;transform:none;display:none;transition:none;}
  .mega-menu.open{display:block;}
  .mega-menu-inner{grid-template-columns:1fr;padding-inline:0;gap:var(--sp-6);}
  .mega-tile{display:none;}
  .mega-scrim{display:none;}
}

/* ---------- Search panel ---------- */
.nav-search-trigger[aria-expanded="true"]{opacity:.55;}
.search-panel{
  position:fixed;top:0;left:0;right:0;
  background:var(--bg-page);border-bottom:1px solid var(--border-soft);
  box-shadow:0 24px 48px -28px rgba(28,27,24,.35);
  padding:2.4rem 0;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity var(--dur-mid) var(--ease-organic),transform var(--dur-mid) var(--ease-organic),visibility 0s linear var(--dur-mid);
  z-index:650;
}
.search-panel.open{opacity:1;visibility:visible;transform:translateY(0);transition:opacity var(--dur-mid) var(--ease-organic),transform var(--dur-mid) var(--ease-organic);}
.search-panel-inner{
  max-width:640px;margin-inline:auto;padding-inline:var(--gutter);
  display:flex;align-items:center;gap:var(--sp-4);
}
.search-form{
  flex:1;display:flex;align-items:center;gap:.8rem;
  border-bottom:1px solid var(--c-ink);padding-bottom:.6rem;
}
.search-form-icon{width:18px;height:18px;stroke-width:1.3;color:var(--text-muted);flex:none;}
.search-form input{
  flex:1;border:none;background:none;font-family:var(--font-display);
  font-size:var(--fs-lg);color:var(--c-ink);padding:.2rem 0;
}
.search-form input::placeholder{color:var(--text-muted);}
.search-form input:focus{outline:none;}
.search-panel-close{
  width:38px;height:38px;flex:none;display:flex;align-items:center;justify-content:center;
  background:transparent;border:none;color:var(--c-ink);transition:opacity var(--dur-fast);
}
.search-panel-close:hover{opacity:.55;}
.search-panel-close svg{width:18px;height:18px;stroke-width:1.3;}
.search-scrim{position:fixed;inset:0;background:rgba(28,27,24,.28);z-index:640;opacity:0;pointer-events:none;transition:opacity var(--dur-mid) var(--ease-organic);}
.search-scrim.open{opacity:1;pointer-events:auto;}
@media (max-width:600px){
  .search-panel{padding:1.8rem 0;}
  .search-form input{font-size:var(--fs-md);}
  .search-form button.btn{display:none;}
}


/* ---------- Footer ---------- */
.site-footer{
  background:var(--c-ink);color:var(--c-cream);
  padding-block:var(--sp-9) var(--sp-6);
}
.footer-grid{
  display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:var(--sp-7);
}
.footer-col h4{
  font-family:var(--font-body);font-size:var(--fs-2xs);letter-spacing:var(--tracking-wide);text-transform:uppercase;
  color:var(--c-stone);margin-bottom:var(--sp-4);font-weight:var(--fw-medium);
}
.footer-col ul{display:flex;flex-direction:column;gap:.65rem;}
.footer-col a{color:var(--c-cream);opacity:.8;font-size:var(--fs-sm);transition:opacity var(--dur-fast);}
.footer-col a:hover{opacity:1;}
.footer-brand p{color:var(--c-cream);opacity:.65;font-size:var(--fs-sm);margin-top:var(--sp-3);max-width:32ch;line-height:var(--lh-loose);}
.footer-bottom{
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;
  border-top:1px solid #3A372F;margin-top:var(--sp-8);padding-top:var(--sp-5);
  font-size:var(--fs-2xs);letter-spacing:.02em;opacity:.6;
}
.footer-bottom .legal-links{display:flex;gap:1.5rem;flex-wrap:wrap;}

@media (max-width:920px){
  .footer-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:560px){
  .footer-grid{grid-template-columns:1fr;}
}

/* ---------- Cards ---------- */
.card{background:var(--bg-surface);overflow:hidden;transition:opacity var(--dur-mid) var(--ease-organic);}

.product-card{background:transparent;position:relative;display:block;}
.product-media{aspect-ratio:4/4.6;overflow:hidden;position:relative;background:var(--c-sand);}
.product-media img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-slow) var(--ease-organic);}
.product-card:hover .product-media img{transform:scale(1.045);}
.product-tag{
  position:absolute;top:.9rem;left:.9rem;background:var(--c-ink);color:#fff;
  font-size:var(--fs-2xs);font-weight:500;letter-spacing:var(--tracking-mid);text-transform:uppercase;
  padding:.4rem .8rem;
}
.product-wish{
  position:absolute;top:.9rem;right:.9rem;width:34px;height:34px;
  background:rgba(255,255,255,.92);display:flex;align-items:center;justify-content:center;color:var(--c-ink);
  opacity:0;transition:opacity var(--dur-fast);
}
.product-card:hover .product-wish{opacity:1;}
.product-wish:hover{background:var(--c-ink);color:#fff;}
.product-wish svg{width:15px;height:15px;stroke-width:1.4;}
.product-body{padding-top:var(--sp-4);}
.product-cat{font-size:var(--fs-2xs);text-transform:uppercase;letter-spacing:var(--tracking-wide);color:var(--text-muted);}
.product-name{font-family:var(--font-display);font-size:var(--fs-lg);margin-top:.4rem;font-weight:500;}
.product-foot{display:flex;align-items:center;justify-content:space-between;margin-top:var(--sp-3);}
.product-price{font-weight:var(--fw-medium);color:var(--text-primary);font-size:var(--fs-sm);letter-spacing:.02em;}
.product-price del{color:var(--text-muted);font-weight:var(--fw-regular);font-size:var(--fs-xs);margin-right:.4rem;}
.product-foot .product-add{
  width:36px;height:36px;border:1px solid var(--c-ink);color:var(--c-ink);
  display:flex;align-items:center;justify-content:center;transition:background var(--dur-fast),color var(--dur-fast);
}
.product-foot .product-add:hover{background:var(--c-ink);color:#fff;}
.product-foot .product-add svg{width:15px;height:15px;stroke-width:1.5;}
.stars{display:flex;gap:2px;color:var(--accent);}
.stars svg{width:12px;height:12px;}

/* ---------- Forms ---------- */
.field{margin-bottom:var(--sp-5);}
.field label{display:block;font-size:var(--fs-2xs);font-weight:var(--fw-medium);letter-spacing:var(--tracking-wide);
  text-transform:uppercase;color:var(--text-muted);margin-bottom:.6rem;}
.field input,.field textarea,.field select{
  width:100%;border:none;border-bottom:1px solid var(--border-soft);background:transparent;
  padding:.85rem 0;font-size:var(--fs-sm);color:var(--text-primary);
  transition:border-color var(--dur-fast);
}
.field input:focus,.field textarea:focus,.field select:focus{
  border-color:var(--c-ink);outline:none;
}
.field textarea{resize:vertical;min-height:120px;}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-5);}
@media (max-width:600px){.field-row{grid-template-columns:1fr;}}

/* ---------- Section heading ---------- */
.section-head{max-width:640px;}
.section-head h2{font-size:var(--fs-3xl);margin-top:.7rem;font-weight:400;}
.section-head p{margin-top:var(--sp-4);color:var(--text-muted);font-size:var(--fs-md);line-height:var(--lh-loose);}
.section-head.center{margin-inline:auto;text-align:center;}
.section-head.center .eyebrow::before{display:none;}

/* ---------- decorative frames — flattened ---------- */
.blob-frame{overflow:hidden;position:relative;}
.arch-frame{overflow:hidden;position:relative;}
.deco-blob{display:none;}

/* ---------- Badges / chips ---------- */
.chip{
  display:inline-flex;align-items:center;gap:.4rem;padding:.6rem 1.2rem;
  background:transparent;border:1px solid var(--border-soft);font-size:var(--fs-xs);font-weight:var(--fw-medium);
  letter-spacing:var(--tracking-mid);text-transform:uppercase;
  transition:background var(--dur-fast),color var(--dur-fast),border-color var(--dur-fast);
}
.chip.active,.chip:hover{background:var(--c-ink);color:#fff;border-color:var(--c-ink);}

/* ---------- Breadcrumb ---------- */
.breadcrumb{display:flex;align-items:center;gap:.5rem;font-size:var(--fs-2xs);letter-spacing:var(--tracking-mid);text-transform:uppercase;color:var(--text-muted);flex-wrap:wrap;}
.breadcrumb a:hover{color:var(--accent-strong);}
.breadcrumb svg{width:11px;height:11px;}

/* ---------- Page hero banner ---------- */
.page-banner{position:relative;overflow:hidden;background:var(--c-sand);}

/* ---------- Reveal-on-scroll ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity var(--dur-slow) var(--ease-organic),transform var(--dur-slow) var(--ease-organic);}
.reveal.in{opacity:1;transform:translateY(0);}

/* ---------- Back to top ---------- */
.back-top{
  position:fixed;bottom:1.5rem;right:1.5rem;width:44px;height:44px;
  background:var(--c-ink);color:#fff;display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transform:translateY(10px);
  transition:opacity var(--dur-fast),transform var(--dur-fast),background var(--dur-fast);
  z-index:400;
}
.back-top.show{opacity:1;pointer-events:auto;transform:translateY(0);}
.back-top:hover{background:var(--accent-strong);}
.back-top svg{width:16px;height:16px;}