/* ============================================================
   main.css — Closed Eyes Art | closedeyesart.com
   Public-facing styles
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,600&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500&display=swap');

/* ── TOKENS ─────────────────────────────────────────────────── */
:root {
  --dark:   #0d1f14;
  --dark2:  #162a1e;
  --dark3:  #1e3828;
  --green:  #2d6a4f;
  --green-l:#52b788;
  --gold:   #c9952a;
  --gold-l: #f0d58c;
  --orange: #e8724a;
  --cream:  #fdf8f0;
  --cream2: #f5ede0;
  --text:   #1a2e1f;
  --text-m: #4a6a54;
  --text-l: #8aaa94;
  --r-sm:   8px;
  --r-md:   14px;
  --r-lg:   22px;
  --shadow:    0 4px 24px rgba(0,0,0,.10);
  --shadow-lg: 0 12px 40px rgba(0,0,0,.18);
}

/* ── RESET ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html  { scroll-behavior: smooth; }
body  { font-family: 'DM Sans', sans-serif; background: var(--cream); color: var(--text); overflow-x: hidden; -webkit-font-smoothing: antialiased; }
img   { max-width: 100%; display: block; }
a     { text-decoration: none; color: inherit; }
button{ cursor: pointer; border: none; font-family: inherit; background: none; }
input, select, textarea { font-family: inherit; }

/* ── NAV ────────────────────────────────────────────────────── */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 300;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.15rem 1.5rem;
  background: rgba(13,31,20,.94);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(201,149,42,.14);
  min-height: 72px;
}
.nav-brand       { display: flex; flex-direction: column; line-height: 1; }
.nav-brand-main  { font-family: 'Cormorant Garamond', serif; font-size: 1.55rem; font-weight: 400; color: var(--gold-l); letter-spacing: .06em; }
.nav-brand-sub   { font-size: .72rem; letter-spacing: .26em; text-transform: uppercase; color: var(--green-l); margin-top: 3px; font-weight: 500; }
.nav-right       { display: flex; align-items: center; gap: .6rem; }
.nav-links       { display: none; list-style: none; gap: 1.5rem; align-items: center; }
.nav-links a     { color: rgba(255,255,255,.55); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; padding: .2rem 0; border-bottom: 1px solid transparent; transition: color .2s, border-color .2s; }
.nav-links a:hover { color: var(--gold-l); border-bottom-color: rgba(240,213,140,.3); }
.hamburger       { display: flex; flex-direction: column; gap: 4px; padding: 4px; }
.hamburger span  { width: 19px; height: 1.5px; background: var(--gold-l); border-radius: 2px; display: block; transition: all .3s; }

/* Mobile drawer */
.nav-drawer {
  display: none; position: fixed; top: 58px; left: 0; right: 0; z-index: 290;
  background: rgba(13,31,20,.98);
  flex-direction: column;
  border-bottom: 1px solid rgba(201,149,42,.12);
}
.nav-drawer.open { display: flex; }
.nav-drawer a {
  color: rgba(255,255,255,.7); font-size: .82rem; letter-spacing: .1em;
  text-transform: uppercase; padding: 1rem 1.5rem;
  border-bottom: 1px solid rgba(255,255,255,.05);
  display: flex; align-items: center; justify-content: space-between;
  transition: color .2s, background .2s;
}
.nav-drawer a:hover { color: var(--gold-l); background: rgba(255,255,255,.03); }

/* Show nav links on wider screens */
@media (min-width: 680px) {
  .nav-links  { display: flex; }
  .hamburger  { display: none; }
}

/* ── HERO ───────────────────────────────────────────────────── */
.hero {
  min-height: 100svh; position: relative; overflow: hidden;
  display: flex; align-items: flex-end;
  background: var(--dark); padding-top: 58px;
}
.hero-slides       { position: absolute; inset: 0; }
.hero-slide        { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity 1.4s ease; filter: brightness(.38) saturate(1.25); }
.hero-slide.active { opacity: 1; }
.hero-overlay      { position: absolute; inset: 0; background: linear-gradient(to top, rgba(13,31,20,.97) 0%, rgba(13,31,20,.2) 60%, transparent 100%); z-index: 1; }
.hero-content      { position: relative; z-index: 2; padding: 2.5rem 1.5rem 4.5rem; width: 100%; }
.hero-eyebrow      { margin-bottom: 1rem; }
.hero-tag          { font-size: .65rem; letter-spacing: .24em; text-transform: uppercase; color: var(--gold); border: 1px solid rgba(201,149,42,.3); padding: .28rem .8rem; border-radius: 50px; }
.hero-name         { font-family: 'Cormorant Garamond', serif; font-size: clamp(3rem,13vw,7.5rem); font-weight: 300; line-height: .88; color: var(--cream); margin: 1rem 0 .4rem; }
.hero-name em      { font-style: italic; color: var(--gold-l); display: block; }
.hero-sub          { font-size: .75rem; letter-spacing: .24em; text-transform: uppercase; color: var(--green-l); margin-bottom: 1.75rem; }
.hero-btns         { display: flex; gap: .65rem; flex-wrap: wrap; }
.btn-p  { background: var(--orange); color: white; padding: .68rem 1.4rem; border-radius: 50px; font-size: .8rem; font-weight: 500; letter-spacing: .05em; transition: all .25s; display: inline-flex; align-items: center; gap: .4rem; }
.btn-p:hover { background: #d45e38; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(232,114,74,.35); }
.btn-o  { background: transparent; color: var(--gold-l); padding: .68rem 1.4rem; border-radius: 50px; border: 1px solid rgba(240,213,140,.3); font-size: .8rem; transition: all .25s; display: inline-flex; align-items: center; gap: .4rem; }
.btn-o:hover { border-color: var(--gold-l); background: rgba(240,213,140,.07); }
.hero-dots   { position: absolute; bottom: 1.5rem; left: 50%; transform: translateX(-50%); z-index: 2; display: flex; gap: 5px; align-items: center; }
.hero-dot    { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.22); transition: all .35s; padding: 0; cursor: pointer; }
.hero-dot.active { background: var(--gold); width: 22px; border-radius: 3px; }
.hero-scroll { position: absolute; bottom: 1.5rem; right: 1.5rem; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 5px; color: rgba(255,255,255,.3); font-size: .6rem; letter-spacing: .15em; text-transform: uppercase; }
.scroll-bar  { width: 1px; height: 36px; background: linear-gradient(to bottom, transparent, var(--gold)); animation: scrollAnim 2s ease-in-out infinite; }
@keyframes scrollAnim { 0%,100%{opacity:.3;transform:scaleY(.6)} 50%{opacity:1;transform:scaleY(1)} }

/* ── ABOUT STRIP ─────────────────────────────────────────────── */
.about-strip  { background: var(--dark2); padding: 2.75rem 1.5rem; display: flex; flex-direction: column; gap: 1.5rem; }
.about-quote  { font-family: 'Cormorant Garamond', serif; font-size: clamp(1.35rem,5vw,2.1rem); font-weight: 300; font-style: italic; color: var(--cream); line-height: 1.3; }
.about-quote span { color: var(--gold); }
.about-text   { font-size: .86rem; line-height: 1.85; color: rgba(255,255,255,.48); }
.about-stats  { display: flex; gap: 1.75rem; flex-wrap: wrap; }
.stat-num     { font-family: 'Cormorant Garamond', serif; font-size: 2.1rem; font-weight: 600; color: var(--gold-l); line-height: 1; }
.stat-label   { font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--green-l); margin-top: 3px; }

@media (min-width: 700px) {
  .about-strip { flex-direction: row; align-items: flex-start; gap: 3rem; }
  .about-quote { flex: 1; }
  .about-right { flex: 1; }
}

/* ── SECTION HEADINGS ────────────────────────────────────────── */
.sec-label { font-size: .63rem; letter-spacing: .26em; text-transform: uppercase; color: var(--orange); display: flex; align-items: center; gap: .5rem; margin-bottom: .4rem; }
.sec-label::before { content: ''; width: 18px; height: 1px; background: var(--orange); flex-shrink: 0; }
.sec-title { font-family: 'Cormorant Garamond', serif; font-size: clamp(1.75rem,6vw,3rem); font-weight: 300; color: var(--text); line-height: 1.05; margin-bottom: 1.5rem; }
.sec-title em { font-style: italic; color: var(--green); }

/* ── FILTER TABS ─────────────────────────────────────────────── */
.ftabs { display: flex; gap: .45rem; overflow-x: auto; padding-bottom: 3px; scrollbar-width: none; margin-bottom: 1.5rem; }
.ftabs::-webkit-scrollbar { display: none; }
.ftab { background: transparent; border: 1px solid rgba(45,106,79,.22); color: var(--text-m); padding: .38rem .95rem; border-radius: 50px; font-size: .76rem; white-space: nowrap; transition: all .22s; font-family: inherit; }
.ftab.active, .ftab:hover { background: var(--green); color: white; border-color: var(--green); }

/* ── GALLERY ─────────────────────────────────────────────────── */
.gallery-section { padding: 3rem 1.25rem 4rem; }
.gallery-grid    { columns: 2; column-gap: .65rem; }
.g-item          { break-inside: avoid; margin-bottom: .65rem; border-radius: var(--r-md); overflow: hidden; position: relative; cursor: pointer; background: var(--cream2); transition: transform .3s, box-shadow .3s; }
.g-item:hover    { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.g-item img      { width: 100%; height: auto; display: block; transition: transform .5s ease; }
.g-item:hover img{ transform: scale(1.05); }
.g-overlay       { position: absolute; inset: 0; background: linear-gradient(to top, rgba(13,31,20,.9) 0%, transparent 55%); opacity: 0; transition: opacity .3s; display: flex; align-items: flex-end; padding: .85rem; }
.g-item:hover .g-overlay { opacity: 1; }
.g-item-title    { font-family: 'Cormorant Garamond', serif; font-size: .95rem; color: white; line-height: 1.2; }
.g-item-cat      { font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-l); margin-top: 2px; }

@media (min-width: 680px) { .gallery-grid { columns: 3; } }
@media (min-width: 1024px){ .gallery-grid { columns: 4; } }

/* ── SHOP ────────────────────────────────────────────────────── */
.shop-section  { padding: 3rem 1.25rem 4rem; background: var(--cream2); }
.shop-grid     { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.s-card        { background: white; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow); cursor: pointer; transition: transform .3s, box-shadow .3s; }
.s-card:hover  { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.s-card-img    { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.s-card-body   { padding: .75rem; }
.s-card-title  { font-family: 'Cormorant Garamond', serif; font-size: 1rem; font-weight: 400; color: var(--text); line-height: 1.2; }
.s-card-cat    { font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-l); margin-top: 2px; }
.s-card-price  { font-size: .9rem; font-weight: 500; color: var(--green); margin-top: .35rem; }
.s-card-footer { display: flex; align-items: center; justify-content: space-between; margin-top: .6rem; }
.btn-buy       { background: var(--green); color: white; border-radius: 50px; padding: .36rem .85rem; font-size: .72rem; font-weight: 500; transition: background .2s; }
.btn-buy:hover { background: var(--dark3); }

@media (min-width: 600px)  { .shop-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .shop-grid { grid-template-columns: repeat(4, 1fr); } }

/* ── LIGHTBOX ────────────────────────────────────────────────── */
.lightbox       { display: none; position: fixed; inset: 0; z-index: 500; background: rgba(13,31,20,.97); }
.lightbox.open  { display: flex; flex-direction: column; }
.lb-backdrop    { position: absolute; inset: 0; z-index: 0; cursor: pointer; }
.lb-bar         { display: flex; align-items: center; justify-content: space-between; padding: .75rem 1rem; flex-shrink: 0; border-bottom: 1px solid rgba(255,255,255,.06); position: relative; z-index: 2; }
.lb-counter     { color: rgba(255,255,255,.45); font-size: .75rem; letter-spacing: .1em; }
.lb-close       { color: rgba(255,255,255,.6); font-size: 1.2rem; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: background .2s; }
.lb-close:hover { background: rgba(255,255,255,.08); color: white; }

/* zoom button — prominent gold pill */
.lb-zoom-btn    { background: var(--gold); color: var(--dark); font-size: .75rem; font-weight: 700; letter-spacing: .08em; padding: .45rem 1.1rem; border-radius: 50px; transition: all .2s; box-shadow: 0 2px 10px rgba(201,149,42,.4); }
.lb-zoom-btn:hover { background: var(--gold-l); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(201,149,42,.5); }

/* zoom mode bottom bar */
.lb-zoom-bar    { display: none; align-items: center; justify-content: space-between; padding: .7rem 1.2rem; flex-shrink: 0; background: rgba(13,31,20,.95); border-top: 1px solid rgba(82,183,136,.2); position: relative; z-index: 2; }
.lb-zoom-hint   { font-size: .72rem; color: rgba(255,255,255,.45); letter-spacing: .06em; }
.lb-zoom-exit   { background: var(--orange); color: white; font-size: .75rem; font-weight: 600; padding: .45rem 1.1rem; border-radius: 50px; transition: all .2s; }
.lb-zoom-exit:hover { opacity: .85; }

/* zoom mode state: hide nav, show zoom bar, expand image */
.lightbox.zoom-mode .lb-nav      { display: none; }
.lightbox.zoom-mode .lb-zoom-btn { display: none; }
.lightbox.zoom-mode .lb-zoom-bar { display: flex; }
.lightbox.zoom-mode .lb-slide    { padding: .25rem; }
.lightbox.zoom-mode .lb-slide-img { max-height: 80vh; }
.lightbox.zoom-mode .lb-slide-img img { max-height: 80vh; cursor: crosshair; }
.lightbox.zoom-mode .lb-slide-meta { display: none; }

/* mobile zoom mode — maximise image, bigger touch targets */
@media (max-width: 600px) {
  .lb-zoom-btn   { font-size: .7rem; padding: .4rem .85rem; }
  .lb-zoom-hint  { font-size: .65rem; }
  .lb-zoom-exit  { font-size: .7rem; padding: .4rem .85rem; }
  .lightbox.zoom-mode .lb-slide-img     { max-height: 85vh; width: 100%; }
  .lightbox.zoom-mode .lb-slide-img img { max-height: 85vh; max-width: 100%; }
  .lightbox.zoom-mode .lb-bar   { padding: .5rem .75rem; }
  .lightbox.zoom-mode .lb-zoom-bar { padding: .5rem .75rem; }
}

.lb-track       { flex: 1; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; position: relative; z-index: 1; touch-action: pan-x; }
.lb-track::-webkit-scrollbar { display: none; }
.lb-slide       { flex: 0 0 100%; scroll-snap-align: start; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1rem; gap: 1rem; overflow-y: auto; touch-action: pan-x; }
.lb-slide-img   { max-height: 60vh; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: var(--r-md); }
.lb-slide-img img { max-height: 60vh; max-width: 100%; object-fit: contain; border-radius: var(--r-md); transform-origin: center center; will-change: transform; user-select: none; -webkit-user-select: none; touch-action: none; }
.lb-slide-meta  { text-align: center; max-width: 480px; }
.lb-slide-title { font-family: 'Cormorant Garamond', serif; font-size: 1.4rem; color: var(--cream); margin-bottom: .4rem; }
.lb-slide-caption { font-size: .82rem; color: rgba(255,255,255,.48); line-height: 1.7; }
.lb-slide-footer  { display: flex; justify-content: center; gap: 1rem; margin-top: .75rem; }
.lb-slide-cat   { font-size: .65rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); border: 1px solid rgba(201,149,42,.3); padding: .22rem .7rem; border-radius: 50px; }
.lb-slide-price { font-size: .9rem; font-weight: 500; color: var(--green-l); }
.lb-nav         { display: flex; align-items: center; justify-content: center; gap: 1rem; padding: .75rem; flex-shrink: 0; position: relative; z-index: 1; }
.lb-arrow       { color: rgba(255,255,255,.55); font-size: 1.1rem; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid rgba(255,255,255,.14); transition: all .2s; }
.lb-arrow:hover { background: rgba(255,255,255,.08); color: white; }
.lb-dots        { display: flex; gap: 5px; align-items: center; }
.lb-dot         { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.2); padding: 0; transition: all .25s; }
.lb-dot.active  { background: var(--gold); width: 18px; border-radius: 3px; }

/* ── CONTACT ─────────────────────────────────────────────────── */
.contact-section { padding: 5rem 1.5rem 6rem; background: var(--dark); text-align: center; }
.contact-title   { font-family: 'Cormorant Garamond', serif; font-size: clamp(2.4rem,7vw,4rem); font-weight: 300; color: var(--cream); margin-bottom: 1.1rem; }
.contact-title em{ color: var(--gold-l); font-style: italic; }
.contact-text    { font-size: 1rem; color: rgba(255,255,255,.65); line-height: 1.85; max-width: 520px; margin: 0 auto 2rem; }
.contact-email   { display: inline-block; color: var(--gold-l); font-size: 1.05rem; letter-spacing: .04em; border-bottom: 1px solid rgba(240,213,140,.35); padding-bottom: 3px; transition: border-color .2s; margin-bottom: 2.25rem; }
.contact-email:hover { border-color: var(--gold-l); }
.social-links    { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; margin-top: 2.5rem; }
.social-link     { color: rgba(255,255,255,.65); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; border: 1px solid rgba(255,255,255,.18); padding: .55rem 1.4rem; border-radius: 50px; transition: all .2s; font-weight: 500; }
.social-link:hover { color: var(--gold-l); border-color: rgba(240,213,140,.4); background: rgba(240,213,140,.06); }
.contact-form-wrap { max-width: 520px; margin: 2.25rem auto 0; display: flex; flex-direction: column; gap: 1rem; text-align: left; }
.cf-input    { width: 100%; padding: .9rem 1.1rem; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.15); border-radius: 10px; color: white; font-size: .95rem; transition: border-color .2s; box-sizing: border-box; font-family: inherit; }
.cf-textarea { width: 100%; padding: .9rem 1.1rem; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.15); border-radius: 10px; color: white; font-size: .95rem; transition: border-color .2s; box-sizing: border-box; font-family: inherit; resize: vertical; min-height: 130px; }
.cf-input::placeholder, .cf-textarea::placeholder { color: rgba(255,255,255,.35); }
.cf-input:focus, .cf-textarea:focus { outline: none; border-color: rgba(240,213,140,.5); background: rgba(255,255,255,.1); }
.cf-btn { align-self: flex-start; }

/* ── FOOTER ──────────────────────────────────────────────────── */
footer { background: var(--dark); border-top: 1px solid rgba(255,255,255,.05); padding: 1.5rem; text-align: center; color: rgba(255,255,255,.22); font-size: .7rem; letter-spacing: .08em; }
footer span { color: var(--gold); }

/* ── TOAST ───────────────────────────────────────────────────── */
.toast { position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%) translateY(60px); background: var(--dark3); color: var(--gold-l); padding: .65rem 1.4rem; border-radius: 50px; font-size: .8rem; opacity: 0; transition: all .35s; z-index: 9999; white-space: nowrap; border: 1px solid rgba(201,149,42,.2); pointer-events: none; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── EMPTY STATE ─────────────────────────────────────────────── */
.empty-state { color: var(--text-l); font-size: .82rem; text-align: center; padding: 3rem 1rem; }

@keyframes shake {
  0%,100%{transform:translateX(0)}
  25%{transform:translateX(-5px)}
  75%{transform:translateX(5px)}
}