/* ============================================================
   assets/css/matte.css — Matte Boutique
   ============================================================ */

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: 'DM Sans', sans-serif; color: #111; background: #fff; margin: 0; }
h1, h2, h3, h4, h5 { font-family: 'Cormorant Garamond', serif; }
img { display: block; max-width: 100%; }
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: #f8f7f5; }
::-webkit-scrollbar-thumb { background: #d1d1cf; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #549437; }

/* ── Keyframes ── */
@keyframes heroFadeIn  { from { opacity:0; transform:translateY(24px); } to { opacity:1; transform:none; } }
@keyframes marqueeAnim { from { transform:translateX(0); } to { transform:translateX(-50%); } }
@keyframes brandsAnim  { from { transform:translateX(0); } to { transform:translateX(-50%); } }
@keyframes waPulseRing { 0%,100% { transform:scale(0.8); opacity:.8; } 100% { transform:scale(1.7); opacity:0; } }
@keyframes fadeSlideUp { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } }
@keyframes fadeIn      { from { opacity:0; } to { opacity:1; } }
@keyframes spin        { to { transform:rotate(360deg); } }

/* ── Animation utilities ── */
.animate-heroFadeIn  { animation: heroFadeIn  0.9s cubic-bezier(.25,.46,.45,.94) forwards; }
.animate-fadeSlideUp { animation: fadeSlideUp 0.5s cubic-bezier(.25,.46,.45,.94) forwards; }
.animate-fadeIn      { animation: fadeIn .35s ease forwards; }
.animate-spin        { animation: spin 0.8s linear infinite; }
.delay-100  { animation-delay:.10s; opacity:0; }
.delay-200  { animation-delay:.20s; opacity:0; }
.delay-300  { animation-delay:.30s; opacity:0; }
.delay-400  { animation-delay:.40s; opacity:0; }
.delay-600  { animation-delay:.60s; opacity:0; }
.delay-800  { animation-delay:.80s; opacity:0; }

/* ── Marquee ── */
.marquee-track  { display:flex; width:max-content; animation:marqueeAnim 28s linear infinite; }
.marquee-track:hover { animation-play-state:paused; }
.brands-track   { display:flex; width:max-content; animation:brandsAnim 32s linear infinite; }
.brands-track:hover  { animation-play-state:paused; }

/* ── WhatsApp floating button ── */
.wa-pulse-btn { position:relative; }
.wa-pulse-btn::before {
  content:''; position:absolute; inset:0; border-radius:50%;
  background:#25D366; animation:waPulseRing 2s ease-out infinite;
}

/* ── Header ── */
#site-header { transition: background .35s, box-shadow .35s, border-color .35s; }
#site-header.scrolled { background:#fff!important; border-bottom:1px solid #f0eeeb; box-shadow:0 2px 12px rgba(0,0,0,.06); }
#site-header.scrolled .nav-link,
#site-header.scrolled .hdr-icon { color:#111!important; }
#site-header.scrolled #logo-text { color:#111!important; }

/* Nav underline */
.nav-link { position:relative; padding-bottom:2px; }
.nav-link::after { content:''; display:block; height:1px; background:#549437; transform:scaleX(0); transform-origin:left; transition:transform .3s; position:absolute; bottom:-2px; left:0; right:0; }
.nav-link:hover::after, .nav-link.active::after { transform:scaleX(1); }

/* ── Cart drawer ── */
#cart-drawer   { transition:transform 350ms cubic-bezier(.25,.46,.45,.94); }

/* ── Search overlay ── */
#search-overlay.open { transform:translateY(0)!important; opacity:1!important; pointer-events:all; }

/* ── Mobile nav ── */
#mobile-nav.open { display:flex!important; animation:fadeIn .25s ease; }

/* ── Product card ── */
.product-card { transition:box-shadow .3s; }
.product-card:hover { box-shadow:0 8px 32px rgba(0,0,0,.08); }
.line-clamp-1 { display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; }
.line-clamp-2 { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.line-clamp-3 { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }

/* ── Category circles ── */
.cat-circle { position:relative; overflow:hidden; border-radius:50%; }
.cat-circle-overlay { position:absolute; inset:0; background:rgba(84,148,55,.72); border-radius:50%; opacity:0; transition:opacity .35s; display:flex; align-items:center; justify-content:center; }
.cat-circle:hover .cat-circle-overlay { opacity:1; }
.cat-circle img { transition:transform .5s; }
.cat-circle:hover img { transform:scale(1.1); }

/* ── Collection card ── */
.coll-card { overflow:hidden; position:relative; }
.coll-card img { transition:transform .6s cubic-bezier(.25,.46,.45,.94); }
.coll-card:hover img { transform:scale(1.06); }

/* ── Instagram grid ── */
.ig-item { position:relative; overflow:hidden; aspect-ratio:1; }
.ig-item img { transition:transform .5s; width:100%; height:100%; object-fit:cover; }
.ig-item:hover img { transform:scale(1.08); }
.ig-overlay { position:absolute; inset:0; background:rgba(84,148,55,.65); opacity:0; transition:opacity .35s; display:flex; align-items:center; justify-content:center; }
.ig-item:hover .ig-overlay { opacity:1; }

/* ── Tabs ── */
.tab-btn { transition:all .3s; }
.tab-btn.active { color:#111; border-bottom:2px solid #549437; }
.product-tab-btn { transition:all .3s; }
.product-tab-btn.active { color:#111; border-bottom:2px solid #549437; }

/* ── Size button ── */
.size-btn { min-width:42px; padding:6px 10px; text-align:center; border:1px solid #e5e5e5; border-radius:4px; font-size:12px; cursor:pointer; transition:all .25s; }
.size-btn:hover   { border-color:#549437; color:#549437; }
.size-btn.selected { border-color:#111; background:#111; color:#fff; }
.size-btn.oos  { opacity:.35; cursor:not-allowed; text-decoration:line-through; }

/* ── Color swatch ── */
.color-swatch { width:28px; height:28px; border-radius:50%; cursor:pointer; border:2px solid transparent; transition:border-color .25s, transform .25s; }
.color-swatch:hover  { transform:scale(1.15); }
.color-swatch.selected { border-color:#111; transform:scale(1.15); }

/* ── Gallery thumb ── */
.gallery-thumb { opacity:.6; cursor:pointer; transition:opacity .25s, border-color .25s; }
.gallery-thumb:hover, .gallery-thumb.active { opacity:1; border-color:#549437!important; }
.gallery-main-img { transition:opacity .35s; }

/* ── Qty stepper ── */
.qty-stepper { display:flex; align-items:center; border:1px solid #e5e5e5; border-radius:6px; overflow:hidden; }
.qty-stepper button { width:34px; height:34px; display:flex; align-items:center; justify-content:center; font-size:18px; background:#f8f7f5; border:none; cursor:pointer; transition:background .2s; }
.qty-stepper button:hover { background:#e8e8e8; }
.qty-stepper input  { width:42px; height:34px; text-align:center; border:none; outline:none; font-size:13px; font-family:'DM Sans',sans-serif; }

/* ── Form elements ── */
.form-input { width:100%; border:1px solid #e5e5e5; border-radius:6px; padding:11px 14px; font-size:14px; font-family:'DM Sans',sans-serif; color:#111; outline:none; background:#fff; transition:border-color .25s, box-shadow .25s; }
.form-input:focus { border-color:#549437; box-shadow:0 0 0 3px rgba(84,148,55,.1); }
.form-input::placeholder { color:#aaa; }
.form-label { display:block; font-size:11px; font-weight:500; letter-spacing:.15em; text-transform:uppercase; color:#6b6b6b; margin-bottom:5px; }

/* ── Buttons ── */
.btn-primary { display:inline-flex; align-items:center; justify-content:center; gap:8px; background:#549437; color:#fff; font-size:11px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; padding:13px 28px; border-radius:50px; border:none; cursor:pointer; text-decoration:none; transition:all .3s; }
.btn-primary:hover { opacity:.88; transform:translateY(-1px); }
.btn-secondary { display:inline-flex; align-items:center; justify-content:center; gap:8px; background:transparent; color:#fff; font-size:11px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; padding:12px 28px; border-radius:50px; border:1.5px solid rgba(255,255,255,.6); cursor:pointer; text-decoration:none; transition:all .3s; }
.btn-secondary:hover { background:rgba(255,255,255,.15); border-color:#fff; }
.btn-dark { display:inline-flex; align-items:center; justify-content:center; gap:8px; background:#111; color:#fff; font-size:11px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; padding:13px 28px; border-radius:50px; border:none; cursor:pointer; text-decoration:none; transition:all .3s; }
.btn-dark:hover { background:#549437; }

/* ── Spinner ── */
.spinner { width:18px; height:18px; border:2px solid rgba(255,255,255,.35); border-top-color:#fff; border-radius:50%; animation:spin .7s linear infinite; display:inline-block; vertical-align:middle; }

/* ── Toast ── */
#toast-container { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); z-index:9999; display:flex; flex-direction:column; gap:8px; pointer-events:none; min-width:260px; }
.toast { background:#111; color:#fff; padding:11px 18px; border-radius:8px; font-size:13px; font-family:'DM Sans',sans-serif; box-shadow:0 4px 20px rgba(0,0,0,.25); animation:fadeSlideUp .35s ease forwards; pointer-events:auto; display:flex; align-items:center; gap:9px; }
.toast.success { border-left:3px solid #549437; }
.toast.error   { border-left:3px solid #e04343; }
.toast.info    { border-left:3px solid #135fa4; }

/* ── Pagination ── */
.page-link { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border:1px solid #e5e5e5; border-radius:6px; font-size:13px; color:#6b6b6b; text-decoration:none; transition:all .25s; }
.page-link:hover  { border-color:#549437; color:#549437; }
.page-link.active { background:#549437; border-color:#549437; color:#fff; }

/* ── Admin sidebar ── */
.admin-sidebar-link { display:flex; align-items:center; gap:10px; padding:9px 14px; font-size:13px; color:rgba(255,255,255,.65); border-radius:6px; text-decoration:none; transition:all .25s; }
.admin-sidebar-link:hover  { background:rgba(255,255,255,.08); color:#fff; }
.admin-sidebar-link.active { background:rgba(84,148,55,.22); color:#549437; }

/* ── Step indicator ── */
.step-indicator { display:flex; align-items:center; justify-content:center; }
.step { display:flex; flex-direction:column; align-items:center; }
.step-num { width:32px; height:32px; border-radius:50%; border:2px solid #e5e5e5; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:600; color:#aaa; background:#fff; transition:all .3s; position:relative; z-index:1; }
.step.active .step-num { border-color:#549437; color:#549437; }
.step.done   .step-num { border-color:#549437; background:#549437; color:#fff; }
.step-label { font-size:10px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:#aaa; margin-top:5px; white-space:nowrap; }
.step.active .step-label, .step.done .step-label { color:#549437; }
.step-line { flex:1; height:1px; background:#e5e5e5; margin:0 8px 18px; min-width:36px; }
.step-line.done { background:#549437; }

/* ── Payment method cards ── */
.payment-card { border:1.5px solid #e5e5e5; border-radius:10px; padding:14px 18px; cursor:pointer; transition:all .25s; }
.payment-card:hover   { border-color:#549437; }
.payment-card.selected { border-color:#549437; background:rgba(84,148,55,.04); }

/* ── Blog card ── */
.blog-card img { transition:transform .5s; }
.blog-card:hover img { transform:scale(1.04); }

/* ── Prose (blog content) ── */
.prose h2 { font-family:'Cormorant Garamond',serif; font-size:1.75rem; font-weight:500; margin:2rem 0 1rem; }
.prose h3 { font-family:'Cormorant Garamond',serif; font-size:1.4rem; font-weight:500; margin:1.5rem 0 .75rem; }
.prose p  { margin-bottom:1.25rem; color:#3a3a3a; line-height:1.8; }
.prose img { border-radius:.75rem; margin:2rem auto; max-width:100%; }
.prose ul, .prose ol { margin:1rem 0 1.25rem 1.25rem; }
.prose li  { margin-bottom:.5rem; color:#3a3a3a; line-height:1.7; }
.prose blockquote { border-left:3px solid #549437; padding:.75rem 1rem .75rem 1.5rem; margin:1.5rem 0; background:#f8f7f5; border-radius:0 .5rem .5rem 0; }
.prose blockquote p { color:#549437; font-family:'Cormorant Garamond',serif; font-size:1.2rem; font-style:italic; margin:0; }
.prose a   { color:#549437; text-decoration:underline; }
.prose strong { font-weight:600; color:#111; }

/* ── Scrollbar hide ── */
.scrollbar-hide { -ms-overflow-style:none; scrollbar-width:none; }
.scrollbar-hide::-webkit-scrollbar { display:none; }

/* ── Utility ── */
.object-cover { object-fit:cover; width:100%; height:100%; }
.aspect-4-5   { aspect-ratio:4/5; }

@media (max-width:640px) {
  .marquee-track { animation-duration:18s; }
}

/* ── Scroll reveal animations ────────────────────────────────── */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s cubic-bezier(.25,.46,.45,.94), transform 0.65s cubic-bezier(.25,.46,.45,.94);
}
.reveal-on-scroll.revealed {
  opacity: 1;
  transform: none;
}
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }

/* ── Free shipping progress bar ──────────────────────────────── */
/* (uses Tailwind bg-brand, no extra CSS needed) */

/* ── Sticky ATC bar ──────────────────────────────────────────── */
#sticky-atc { will-change: transform; }

/* ── Scroll to top ───────────────────────────────────────────── */
#scroll-top { will-change: opacity; }

/* ── Product page improvements ───────────────────────────────── */
.product-title {}
.product-sale-price {}

/* ── WA float pulse ─────────────────────────────────────────── */
@keyframes waPulse { 0%,100%{ box-shadow:0 4px 20px rgba(37,211,102,.4); } 50%{ box-shadow:0 4px 32px rgba(37,211,102,.7); } }

/* ============================================================
   PRODUCT COLOR SWATCHES — auto-appended
   ============================================================ */

/* Shop / listing card swatches */
.pc-swatch {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.85);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.15);
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
  flex-shrink: 0;
  display: inline-block;
  padding: 0;
}
.pc-swatch:hover,
.pc-swatch.active {
  transform: scale(1.28);
  box-shadow: 0 0 0 2px var(--brand, #b08060);
}
.pc-swatches {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 8px;
}

/* Single product page swatches */
.sp-swatch {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.9);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.15);
  cursor: pointer;
  transition: transform .15s, outline .15s;
  padding: 0;
}
.sp-swatch:hover {
  transform: scale(1.1);
}
#product-colors {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}
#gallery-thumbs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: thin;
}
.gallery-main-img {
  transition: opacity .15s ease;
}