/* ─── Shared styles — Chiang Mai Craft House ─── */

html { scroll-behavior: smooth; }
body { font-family: 'Raleway', sans-serif; background-color: #faf8f4; color: #2c2420; -webkit-font-smoothing: antialiased; }

/* Fade-in on scroll */
.fade-up { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease; }
.fade-up.visible { opacity: 1; transform: translateY(0); }

/* Buttons */
.btn-outline {
  display: inline-block; padding: 12px 32px;
  border: 1px solid #2c2420; font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; font-family: 'Raleway', sans-serif; font-weight: 500;
  color: #2c2420; text-decoration: none; cursor: pointer; background: transparent;
  transition: background 0.3s ease, color 0.3s ease;
}
.btn-outline:hover { background: #2c2420; color: #faf8f4; }
.btn-outline:focus-visible { outline: 2px solid #8a7060; outline-offset: 3px; }
.btn-muted { border-color: #8a7060; color: #6b5c4e; }
.btn-muted:hover { background: #6b5c4e; color: #faf8f4; }
.btn-dark { border-color: #c9bba8; color: #e8e0d4; }
.btn-dark:hover { background: #e8e0d4; color: #1e1612; }
.btn-sm { padding: 8px 18px; font-size: 10px; }
.btn-half { flex: 1; text-align: center; padding: 9px 6px; font-size: 9px; letter-spacing: 0.12em; }

/* Nav */
.nav-link { position: relative; }
.nav-link::after { content:''; position:absolute; bottom:-2px; left:0; width:0; height:1px; background:#2c2420; transition: width 0.3s ease; }
.nav-link:hover::after, .nav-link.active::after { width: 100%; }
.nav-link.active { color: #2c2420; }

/* Product cards */
.product-card { transition: transform 0.4s ease; }
.product-card:hover { transform: translateY(-4px); }
.product-img { transition: filter 0.4s ease; }
.product-card:hover .product-img { filter: brightness(1.03); }

/* Cart sidebar */
#cart-overlay {
  position: fixed; inset: 0; background: rgba(30,22,18,0.45);
  z-index: 100; opacity: 0; pointer-events: none;
  transition: opacity 0.35s ease;
}
#cart-overlay.open { opacity: 1; pointer-events: all; }

#cart-sidebar {
  position: fixed; top: 0; right: 0; bottom: 0; width: 100%; max-width: 400px;
  background: #faf8f4; z-index: 101;
  transform: translateX(100%); transition: transform 0.4s cubic-bezier(0.4,0,0.2,1);
  display: flex; flex-direction: column;
  border-left: 0.5px solid #d9cfc2;
}
#cart-sidebar.open { transform: translateX(0); }

.cart-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px; border-bottom: 0.5px solid #d9cfc2;
}
.cart-items { flex: 1; overflow-y: auto; padding: 0 24px; }
.cart-items::-webkit-scrollbar { width: 3px; }
.cart-items::-webkit-scrollbar-thumb { background: #c9bba8; }
.cart-footer { padding: 20px 24px; border-top: 0.5px solid #d9cfc2; background: #faf8f4; }

.cart-item {
  display: grid; grid-template-columns: 72px 1fr auto;
  gap: 14px; align-items: start;
  padding: 18px 0; border-bottom: 0.5px solid #e8e0d4;
}
.cart-item:last-child { border-bottom: none; }

.qty-control {
  display: flex; align-items: center; gap: 10px; margin-top: 8px;
}
.qty-btn {
  width: 24px; height: 24px; border: 0.5px solid #c9bba8;
  background: transparent; cursor: pointer; font-size: 14px; color: #6b5c4e;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s ease, color 0.2s ease;
}
.qty-btn:hover { background: #2c2420; color: #faf8f4; border-color: #2c2420; }

.cart-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 100%; gap: 16px; color: #9c8070; padding: 40px;
  text-align: center;
}

/* Mobile menu */
#mobile-menu { transition: max-height 0.4s ease, opacity 0.4s ease; max-height: 0; opacity: 0; overflow: hidden; }
#mobile-menu.open { max-height: 300px; opacity: 1; }

/* Scrollbar */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: #f2ede5; }
::-webkit-scrollbar-thumb { background: #c9bba8; border-radius: 2px; }

/* Lamp animation */
.lamp-sway { transform-origin: top center; animation: sway 6s ease-in-out infinite; }
@keyframes sway { 0%,100%{transform:rotate(-1deg)} 50%{transform:rotate(1deg)} }
@media (prefers-reduced-motion: reduce) { .lamp-sway { animation: none; } .fade-up { transition: none; } }

/* Tag/badge */
.tag {
  display: inline-block; padding: 4px 10px;
  font-family: 'Raleway', sans-serif; font-size: 9px; letter-spacing: 0.18em;
  text-transform: uppercase; font-weight: 500;
  border: 0.5px solid #c9bba8; color: #6b5c4e; background: transparent;
}
.tag-active { background: #2c2420; color: #e8e0d4; border-color: #2c2420; }

/* Product image carousel */
.pc-carousel { position: relative; width: 100%; height: 100%; overflow: hidden; touch-action: pan-y; }
.pc-track { display: flex; width: 100%; height: 100%; transition: transform 0.35s ease; }
.pc-slide { flex: 0 0 100%; height: 100%; }
.pc-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pc-dots {
  position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 6px; z-index: 5;
}
.pc-dot {
  width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.55);
  cursor: pointer; transition: background 0.2s ease, transform 0.2s ease; border: none; padding: 0;
}
.pc-dot.active { background: #fff; transform: scale(1.3); }
.pc-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,0.85);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  opacity: 0; transition: opacity 0.25s ease; z-index: 5; border: none; color: #2c2420;
}
.pc-carousel:hover .pc-arrow { opacity: 1; }
.pc-arrow.prev { left: 8px; }
.pc-arrow.next { right: 8px; }