/* ============================================
   慢慢小島 — Global Styles
   ============================================ */
:root {
  --cream: #faf7f0;
  --cream-2: #f3ede3;
  --brown-dark: #2a1f14;
  --brown: #8b5e3c;
  --brown-mid: #6b5744;
  --brown-light: #c9a87c;
  --brown-pale: #d4c5b5;
  --brown-muted: #9b8070;
  --ink: #5a4030;
  --white: #ffffff;
  --font-serif: 'Noto Serif TC', serif;
  --font-sans: 'Noto Sans TC', sans-serif;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  background: var(--cream);
  color: var(--brown-dark);
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--cream-2); }
::-webkit-scrollbar-thumb { background: var(--brown-light); border-radius: 3px; }

/* ============================================
   Utility
   ============================================ */
.page { display: none; min-height: 100vh; padding-top: 72px; }
.page.active { display: block; }

.serif { font-family: var(--font-serif); }
.container { max-width: 1100px; margin: 0 auto; padding: 0 40px; }

/* ============================================
   NAV
   ============================================ */
#nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  padding: 0 40px;
  transition: background 0.4s ease, border-bottom 0.4s ease, backdrop-filter 0.4s;
}
#nav.scrolled {
  background: rgba(250,247,240,0.96);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(139,94,60,0.12);
}
.nav-inner {
  max-width: 1100px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  height: 72px;
}
.nav-logo { cursor: pointer; line-height: 1; }
.nav-logo-main {
  font-family: var(--font-serif); font-size: 22px; font-weight: 700;
  color: var(--brown-dark); letter-spacing: 0.05em; display: block;
}
.nav-logo-sub {
  font-size: 10px; color: var(--brown); letter-spacing: 0.15em; margin-top: 2px; display: block;
}
.nav-links { display: flex; gap: 40px; align-items: center; }
.nav-link {
  font-size: 14px; letter-spacing: 0.08em; color: var(--brown-dark);
  cursor: pointer; border-bottom: 1.5px solid transparent;
  padding-bottom: 2px; transition: all 0.2s; background: none; border-left: none; border-right: none; border-top: none;
  font-family: var(--font-sans);
}
.nav-link:hover, .nav-link.active { color: var(--brown); border-bottom-color: var(--brown); font-weight: 600; }
.nav-icons { display: flex; gap: 16px; align-items: center; margin-left: 8px; }
.nav-icon { cursor: pointer; position: relative; background: none; border: none; padding: 0; }
.cart-badge {
  position: absolute; top: -6px; right: -6px;
  background: var(--brown); color: #fff; border-radius: 50%;
  width: 16px; height: 16px; font-size: 10px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-sans);
}
.cart-badge.hidden { display: none; }

/* ============================================
   PAGE HEADERS
   ============================================ */
.page-header {
  background: var(--cream-2); padding: 64px 40px 56px;
}
.page-header .overline {
  color: var(--brown); font-size: 12px; letter-spacing: 0.3em; margin-bottom: 16px;
}
.page-header h1 {
  font-family: var(--font-serif); font-size: 40px; font-weight: 700;
  color: var(--brown-dark); margin-bottom: 16px;
}
.page-header p { font-size: 14px; color: var(--brown-mid); line-height: 2; }

/* ============================================
   HOME — HERO
   ============================================ */
#page-home { padding-top: 0; }
.hero {
  position: relative; height: 100vh; min-height: 600px; overflow: hidden;
}
.hero-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 30%; filter: brightness(0.55);
}
.hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(30,15,5,0.1) 0%, rgba(30,15,5,0.55) 100%);
}
.hero-content {
  position: relative; z-index: 2; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 0 24px;
}
.hero-eyebrow {
  color: rgba(255,240,220,0.75); font-size: 12px; letter-spacing: 0.3em;
  margin-bottom: 24px; text-transform: uppercase;
}
.hero-title {
  font-family: var(--font-serif); font-size: clamp(48px, 8vw, 96px);
  font-weight: 700; color: #faf7f0; line-height: 1.1;
  letter-spacing: 0.04em; margin: 0 0 20px;
}
.hero-desc {
  color: rgba(255,240,220,0.85); font-size: clamp(14px, 2vw, 18px);
  letter-spacing: 0.12em; line-height: 2; max-width: 480px; margin: 0 0 48px;
}
.hero-btns { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }
.btn-primary {
  background: var(--brown); color: #faf7f0; border: none;
  padding: 14px 36px; font-size: 14px; letter-spacing: 0.15em;
  cursor: pointer; font-family: var(--font-sans); transition: background 0.2s;
}
.btn-primary:hover { background: #6d4a2e; }
.btn-ghost {
  background: transparent; color: #faf7f0;
  border: 1px solid rgba(255,240,220,0.5);
  padding: 14px 36px; font-size: 14px; letter-spacing: 0.15em;
  cursor: pointer; font-family: var(--font-sans); transition: border-color 0.2s;
}
.btn-ghost:hover { border-color: rgba(255,240,220,0.9); }
.hero-scroll {
  position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.hero-scroll span { color: rgba(255,240,220,0.6); font-size: 11px; letter-spacing: 0.2em; }
.hero-scroll-line { width: 1px; height: 40px; background: rgba(255,240,220,0.4); }

/* Brand Statement */
.brand-statement { background: var(--cream); padding: 100px 40px; text-align: center; }
.brand-statement .overline { color: var(--brown); font-size: 12px; letter-spacing: 0.3em; margin-bottom: 32px; }
.brand-statement h2 {
  font-family: var(--font-serif); font-size: clamp(28px, 4vw, 42px);
  font-weight: 600; color: var(--brown-dark); line-height: 1.6; margin-bottom: 32px;
}
.brand-statement p { color: var(--brown-mid); font-size: 16px; line-height: 2.2; letter-spacing: 0.06em; max-width: 680px; margin: 0 auto; }

/* Process */
.process { background: var(--cream-2); padding: 80px 40px; }
.process .overline { color: var(--brown); font-size: 12px; letter-spacing: 0.3em; text-align: center; margin-bottom: 16px; }
.process h2 { font-family: var(--font-serif); font-size: 32px; font-weight: 600; color: var(--brown-dark); text-align: center; margin-bottom: 64px; }
.process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; max-width: 1100px; margin: 0 auto; }
.process-step { text-align: center; }
.process-num { font-family: var(--font-serif); font-size: 48px; font-weight: 300; color: rgba(139,94,60,0.2); margin-bottom: 16px; line-height: 1; }
.process-step h3 { font-family: var(--font-serif); font-size: 18px; font-weight: 600; color: var(--brown-dark); margin-bottom: 12px; }
.process-step p { font-size: 13px; color: var(--brown-mid); line-height: 2; letter-spacing: 0.05em; }

/* Featured Products */
.featured { background: var(--cream); padding: 100px 40px; }
.section-header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 56px; max-width: 1100px; margin-left: auto; margin-right: auto; }
.section-header .overline { color: var(--brown); font-size: 12px; letter-spacing: 0.3em; margin-bottom: 12px; }
.section-header h2 { font-family: var(--font-serif); font-size: 32px; font-weight: 600; color: var(--brown-dark); }
.see-all { font-size: 13px; color: var(--brown); cursor: pointer; letter-spacing: 0.1em; border-bottom: 1px solid var(--brown); padding-bottom: 2px; background: none; border-top: none; border-left: none; border-right: none; font-family: var(--font-sans); }
.product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; max-width: 1100px; margin: 0 auto; }

/* Product Card */
.product-card {
  cursor: pointer; background: var(--white); overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s;
}
.product-card:hover { transform: translateY(-6px); box-shadow: 0 20px 50px rgba(42,31,20,0.1); }
.product-card-img { aspect-ratio: 4/3; overflow: hidden; position: relative; }
.product-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.product-card:hover .product-card-img img { transform: scale(1.05); }
.product-tag { position: absolute; top: 16px; left: 16px; background: var(--brown); color: #faf7f0; padding: 4px 12px; font-size: 11px; letter-spacing: 0.1em; }
.product-card-body { padding: 24px 28px 28px; }
.product-card-sub { font-size: 11px; color: var(--brown); letter-spacing: 0.2em; margin-bottom: 8px; }
.product-card-name { font-family: var(--font-serif); font-size: 20px; font-weight: 600; color: var(--brown-dark); margin-bottom: 8px; }
.product-card-meta { font-size: 12px; color: var(--brown-muted); margin-bottom: 16px; }
.product-card-footer { display: flex; align-items: center; justify-content: space-between; }
.product-price { font-family: var(--font-serif); font-size: 22px; font-weight: 600; color: var(--brown-dark); }
.product-card-link { font-size: 12px; color: var(--brown); letter-spacing: 0.1em; }
.btn-add-small {
  background: var(--brown-dark); color: #faf7f0; border: none;
  padding: 8px 16px; font-size: 12px; cursor: pointer;
  font-family: var(--font-sans); letter-spacing: 0.08em; transition: background 0.2s;
}
.btn-add-small:hover { background: var(--brown); }

/* Blog Dark Section */
.blog-dark { background: var(--brown-dark); padding: 100px 40px; }
.blog-dark .section-header .overline { color: var(--brown-light); }
.blog-dark .section-header h2 { color: #faf7f0; }
.blog-dark .see-all { color: var(--brown-light); border-bottom-color: var(--brown-light); }
.blog-preview-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; max-width: 1100px; margin: 0 auto; }
.blog-preview-card { position: relative; aspect-ratio: 3/2; overflow: hidden; cursor: pointer; }
.blog-preview-card img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.5); transition: transform 0.6s; }
.blog-preview-card:hover img { transform: scale(1.06); }
.blog-preview-content { position: absolute; inset: 0; padding: 40px; display: flex; flex-direction: column; justify-content: flex-end; }
.blog-preview-cat { font-size: 11px; color: var(--brown-light); letter-spacing: 0.2em; margin-bottom: 12px; }
.blog-preview-title { font-family: var(--font-serif); font-size: 20px; font-weight: 600; color: #faf7f0; line-height: 1.5; margin-bottom: 12px; }
.blog-preview-meta { font-size: 12px; color: rgba(250,247,240,0.6); letter-spacing: 0.08em; }

/* Footer */
footer { background: #1a1008; padding: 60px 40px; text-align: center; }
footer .logo-main { font-family: var(--font-serif); font-size: 28px; font-weight: 700; color: #faf7f0; margin-bottom: 8px; }
footer .logo-sub { font-size: 11px; color: var(--brown); letter-spacing: 0.25em; margin-bottom: 32px; }
footer p { font-size: 13px; color: rgba(250,247,240,0.4); letter-spacing: 0.05em; line-height: 2; }

/* ============================================
   PRODUCTS PAGE
   ============================================ */
.filter-bar { border-bottom: 1px solid #e8ddd0; padding: 0 40px; }
.filter-bar-inner { max-width: 1100px; margin: 0 auto; display: flex; gap: 32px; }
.filter-btn {
  background: none; border: none; border-bottom: 2px solid transparent;
  padding: 16px 0; font-size: 13px; color: var(--brown-mid);
  cursor: pointer; letter-spacing: 0.08em; font-family: var(--font-sans); transition: all 0.2s;
}
.filter-btn.active { color: var(--brown); border-bottom-color: var(--brown); font-weight: 600; }
.products-grid-wrap { max-width: 1100px; margin: 0 auto; padding: 56px 40px; }

/* Product Detail */
.product-detail { max-width: 1100px; margin: 0 auto; padding: 48px 40px; }
.back-btn {
  background: none; border: none; cursor: pointer; font-size: 13px;
  color: var(--brown); letter-spacing: 0.1em; margin-bottom: 40px;
  display: flex; align-items: center; gap: 8px; padding: 0; font-family: var(--font-sans);
}
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; }
.detail-main-img { aspect-ratio: 1; overflow: hidden; background: var(--cream-2); }
.detail-main-img img { width: 100%; height: 100%; object-fit: cover; }
.detail-gallery { display: flex; gap: 8px; margin-top: 8px; }
.detail-thumb { width: 72px; height: 72px; object-fit: cover; cursor: pointer; border: 1.5px solid transparent; transition: border-color 0.2s; }
.detail-thumb:hover { border-color: var(--brown); }
.detail-tag { display: inline-block; background: var(--brown); color: #faf7f0; padding: 4px 12px; font-size: 11px; letter-spacing: 0.1em; margin-bottom: 20px; }
.detail-sub { font-size: 12px; color: var(--brown); letter-spacing: 0.25em; margin-bottom: 12px; }
.detail-name { font-family: var(--font-serif); font-size: 40px; font-weight: 700; color: var(--brown-dark); margin-bottom: 8px; }
.detail-weight { font-size: 13px; color: var(--brown-muted); margin-bottom: 24px; letter-spacing: 0.05em; }
.detail-price { font-family: var(--font-serif); font-size: 28px; font-weight: 600; color: var(--brown-dark); margin-bottom: 32px; }
.detail-desc { font-size: 14px; color: var(--ink); line-height: 2.2; margin-bottom: 32px; letter-spacing: 0.05em; }
.detail-info { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 32px; background: var(--cream-2); padding: 20px; }
.detail-info-label { font-size: 11px; color: var(--brown); letter-spacing: 0.15em; margin-bottom: 6px; }
.detail-info-val { font-size: 12px; color: var(--brown-dark); line-height: 1.8; }
.detail-story { font-size: 13px; color: var(--ink); line-height: 2.2; font-style: italic; border-left: 2px solid var(--brown-light); padding-left: 16px; margin-bottom: 24px; }
.qty-row { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.qty-ctrl { display: flex; align-items: center; border: 1px solid var(--brown-pale); }
.qty-btn { width: 40px; height: 44px; border: none; background: none; cursor: pointer; font-size: 18px; color: var(--brown-dark); font-family: var(--font-sans); }
.qty-display { width: 48px; text-align: center; font-size: 15px; color: var(--brown-dark); }
.btn-add-main {
  flex: 1; height: 44px; background: var(--brown); color: #faf7f0; border: none;
  font-size: 14px; letter-spacing: 0.15em; cursor: pointer; font-family: var(--font-sans); transition: background 0.3s;
}
.btn-add-main:hover { background: #6d4a2e; }
.btn-add-main.added { background: var(--ink); }
.detail-note { font-size: 11px; color: var(--brown-muted); letter-spacing: 0.08em; }

/* ============================================
   BLOG PAGE
   ============================================ */
.blog-featured {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  margin-bottom: 64px; cursor: pointer; overflow: hidden; background: var(--white);
  max-width: 1100px; margin-left: auto; margin-right: auto; margin-bottom: 64px;
}
.blog-featured-img { aspect-ratio: 4/3; overflow: hidden; }
.blog-featured-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.blog-featured:hover .blog-featured-img img { transform: scale(1.04); }
.blog-featured-body { padding: 48px 40px; display: flex; flex-direction: column; justify-content: center; background: var(--brown-dark); }
.blog-featured-cat { font-size: 11px; color: var(--brown-light); letter-spacing: 0.25em; margin-bottom: 16px; }
.blog-featured-title { font-family: var(--font-serif); font-size: 26px; font-weight: 700; color: #faf7f0; line-height: 1.5; margin-bottom: 16px; }
.blog-featured-excerpt { font-size: 13px; color: rgba(250,247,240,0.65); line-height: 2; margin-bottom: 24px; letter-spacing: 0.05em; }
.blog-featured-meta { font-size: 12px; color: var(--brown); letter-spacing: 0.1em; }
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; max-width: 1100px; margin: 0 auto; }
.blog-card { cursor: pointer; }
.blog-card-img { aspect-ratio: 4/3; overflow: hidden; margin-bottom: 20px; }
.blog-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.blog-card:hover .blog-card-img img { transform: scale(1.05); }
.blog-card-cat { font-size: 11px; color: var(--brown); letter-spacing: 0.2em; }
.blog-card-title { font-family: var(--font-serif); font-size: 18px; font-weight: 600; color: var(--brown-dark); line-height: 1.6; margin: 10px 0 12px; }
.blog-card-meta { font-size: 12px; color: var(--brown-muted); letter-spacing: 0.05em; margin-bottom: 12px; }
.blog-card-excerpt { font-size: 13px; color: var(--ink); line-height: 2; letter-spacing: 0.03em; }

/* Blog Post */
.blog-post-hero { position: relative; height: 420px; overflow: hidden; }
.blog-post-hero img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.5); }
.blog-post-hero-content { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: 64px 40px; text-align: center; }
.blog-post-body { max-width: 720px; margin: 0 auto; padding: 64px 40px; }
.blog-post-cat { font-size: 11px; color: var(--brown-light); letter-spacing: 0.25em; margin-bottom: 16px; }
.blog-post-title { font-family: var(--font-serif); font-size: clamp(24px, 4vw, 40px); font-weight: 700; color: #faf7f0; line-height: 1.4; max-width: 700px; margin-bottom: 20px; }
.blog-post-meta-hero { font-size: 12px; color: rgba(250,247,240,0.6); letter-spacing: 0.1em; }
.blog-post-lead { font-size: 16px; color: var(--ink); line-height: 2.4; letter-spacing: 0.08em; margin-bottom: 40px; border-left: 3px solid var(--brown-light); padding-left: 20px; font-style: italic; }
.blog-post-body p { font-size: 15px; color: #3a2d20; line-height: 2.4; letter-spacing: 0.06em; margin-bottom: 24px; }
.blog-post-body h3 { font-family: var(--font-serif); font-size: 20px; font-weight: 600; color: var(--brown-dark); margin-top: 40px; margin-bottom: 16px; }
.blog-related { border-top: 1px solid #e8ddd0; margin-top: 64px; padding-top: 40px; }
.blog-related-label { font-size: 12px; color: var(--brown); letter-spacing: 0.2em; margin-bottom: 24px; }
.blog-related-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.blog-related-card { cursor: pointer; }
.blog-related-card-img { aspect-ratio: 3/2; overflow: hidden; margin-bottom: 12px; }
.blog-related-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; }
.blog-related-card:hover .blog-related-card-img img { transform: scale(1.05); }
.blog-related-cat { font-size: 11px; color: var(--brown); letter-spacing: 0.15em; margin-bottom: 8px; }
.blog-related-title { font-family: var(--font-serif); font-size: 15px; font-weight: 600; color: var(--brown-dark); line-height: 1.6; }

/* ============================================
   CART
   ============================================ */
.cart-wrap { max-width: 900px; margin: 0 auto; padding: 56px 40px; }
.cart-empty { text-align: center; padding: 80px 0; }
.cart-empty svg { margin-bottom: 24px; display: block; margin-left: auto; margin-right: auto; }
.cart-empty p { font-size: 16px; color: var(--brown-muted); margin-bottom: 32px; }
.cart-layout { display: grid; grid-template-columns: 1fr 340px; gap: 48px; }
.cart-item { display: flex; gap: 24px; padding-bottom: 32px; margin-bottom: 32px; border-bottom: 1px solid #e8ddd0; }
.cart-item-img { width: 120px; height: 120px; object-fit: cover; flex-shrink: 0; }
.cart-item-body { flex: 1; }
.cart-item-sub { font-size: 11px; color: var(--brown); letter-spacing: 0.2em; margin-bottom: 6px; }
.cart-item-name { font-family: var(--font-serif); font-size: 18px; font-weight: 600; color: var(--brown-dark); margin-bottom: 4px; }
.cart-item-weight { font-size: 12px; color: var(--brown-muted); margin-bottom: 16px; }
.cart-item-footer { display: flex; align-items: center; justify-content: space-between; }
.cart-item-price { font-family: var(--font-serif); font-size: 18px; font-weight: 600; color: var(--brown-dark); }
.cart-remove { background: none; border: none; cursor: pointer; color: var(--brown-muted); font-size: 12px; letter-spacing: 0.05em; font-family: var(--font-sans); }
.cart-summary { background: var(--cream-2); padding: 32px; position: sticky; top: 96px; }
.cart-summary h3 { font-family: var(--font-serif); font-size: 18px; font-weight: 600; color: var(--brown-dark); margin-bottom: 24px; }
.cart-row { display: flex; justify-content: space-between; font-size: 13px; color: var(--ink); margin-bottom: 12px; }
.cart-free { color: var(--brown); }
.cart-notice { font-size: 11px; color: var(--brown-muted); margin-bottom: 24px; line-height: 1.8; }
.cart-total { display: flex; justify-content: space-between; font-family: var(--font-serif); font-size: 22px; font-weight: 700; color: var(--brown-dark); border-top: 1px solid var(--brown-pale); padding-top: 20px; margin-bottom: 28px; }
.btn-checkout {
  width: 100%; padding: 16px; background: var(--brown); color: #faf7f0; border: none;
  font-size: 14px; letter-spacing: 0.15em; cursor: pointer; font-family: var(--font-sans); margin-bottom: 12px; transition: background 0.2s;
}
.btn-checkout:hover { background: #6d4a2e; }
.btn-continue {
  width: 100%; padding: 12px; background: none; border: 1px solid var(--brown-pale);
  color: var(--brown-mid); font-size: 13px; letter-spacing: 0.08em; cursor: pointer; font-family: var(--font-sans);
}

/* Checkout */
.checkout-wrap { max-width: 760px; margin: 0 auto; padding: 56px 40px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 24px; }
.form-group { display: flex; flex-direction: column; }
.form-group.full { grid-column: 1 / -1; }
.form-label { font-size: 12px; color: var(--brown); letter-spacing: 0.12em; margin-bottom: 8px; }
.form-input {
  padding: 12px 16px; border: 1px solid var(--brown-pale); background: var(--white);
  font-size: 14px; color: var(--brown-dark); outline: none; font-family: var(--font-sans);
  transition: border-color 0.2s;
}
.form-input:focus { border-color: var(--brown); }
.radio-group { display: flex; gap: 16px; margin-bottom: 28px; }
.radio-label { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; color: var(--brown-dark); }
.radio-label input[type="radio"] { accent-color: var(--brown); }
.order-summary-box { background: var(--cream-2); padding: 24px; margin-bottom: 32px; }
.order-summary-box h3 { font-family: var(--font-serif); font-size: 16px; color: var(--brown-dark); margin-bottom: 16px; }
.order-summary-row { display: flex; justify-content: space-between; font-size: 13px; color: var(--ink); margin-bottom: 8px; }
.order-summary-total { display: flex; justify-content: space-between; font-family: var(--font-serif); font-size: 18px; font-weight: 700; color: var(--brown-dark); border-top: 1px solid var(--brown-pale); padding-top: 12px; margin-top: 12px; }
.checkout-btns { display: flex; gap: 16px; }
.btn-back {
  flex: 1; padding: 14px; border: 1px solid var(--brown-pale); background: none;
  font-size: 14px; cursor: pointer; font-family: var(--font-sans); color: var(--brown-mid);
}
.btn-submit {
  flex: 2; padding: 14px; background: var(--brown); color: #faf7f0; border: none;
  font-size: 14px; letter-spacing: 0.12em; cursor: pointer; font-family: var(--font-sans); transition: background 0.2s;
}
.btn-submit:hover { background: #6d4a2e; }

/* Order Done */
.order-done { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 0 40px; }
.order-done-inner { text-align: center; max-width: 480px; }
.order-done-icon { width: 80px; height: 80px; border-radius: 50%; background: var(--cream-2); display: flex; align-items: center; justify-content: center; margin: 0 auto 32px; }
.order-done h2 { font-family: var(--font-serif); font-size: 32px; font-weight: 700; color: var(--brown-dark); margin-bottom: 16px; }
.order-done p { font-size: 14px; color: var(--brown-mid); line-height: 2.2; margin-bottom: 40px; }

/* ============================================
   MEMBER
   ============================================ */
.member-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 0 24px; }
.member-form-wrap { width: 100%; max-width: 440px; }
.member-header { text-align: center; margin-bottom: 48px; }
.member-header h1 { font-family: var(--font-serif); font-size: 32px; font-weight: 700; color: var(--brown-dark); margin-bottom: 8px; }
.member-header p { font-size: 13px; color: var(--brown); letter-spacing: 0.08em; }
.member-card { background: var(--white); padding: 40px; box-shadow: 0 4px 40px rgba(42,31,20,0.06); }
.member-benefit { background: var(--cream-2); padding: 24px; margin-top: 16px; text-align: center; }
.member-benefit p { font-size: 12px; color: var(--brown-mid); line-height: 2; letter-spacing: 0.05em; }
.member-benefit strong { color: var(--brown); }
.member-switch { text-align: center; margin-top: 16px; }
.member-switch span { font-size: 13px; color: var(--brown-mid); }
.member-switch button { background: none; border: none; color: var(--brown); font-size: 13px; cursor: pointer; font-family: var(--font-sans); text-decoration: underline; margin-left: 4px; }

/* Profile */
.profile-wrap { max-width: 900px; margin: 0 auto; padding: 56px 40px; }
.profile-header { display: flex; align-items: center; gap: 24px; margin-bottom: 56px; }
.profile-avatar { width: 72px; height: 72px; border-radius: 50%; background: var(--cream-2); display: flex; align-items: center; justify-content: center; }
.profile-avatar span { font-family: var(--font-serif); font-size: 28px; color: var(--brown); font-weight: 700; }
.profile-name { font-family: var(--font-serif); font-size: 28px; font-weight: 700; color: var(--brown-dark); margin-bottom: 4px; }
.profile-email { font-size: 13px; color: var(--brown); letter-spacing: 0.05em; }
.btn-logout { margin-left: auto; background: none; border: 1px solid var(--brown-pale); padding: 8px 20px; font-size: 12px; cursor: pointer; color: var(--brown-mid); font-family: var(--font-sans); letter-spacing: 0.08em; }
.profile-layout { display: grid; grid-template-columns: 240px 1fr; gap: 48px; }
.profile-sidebar { background: var(--cream-2); padding: 24px; }
.profile-sidebar-label { font-size: 11px; color: var(--brown); letter-spacing: 0.2em; margin-bottom: 20px; }
.profile-menu-item { padding: 12px 0; border-bottom: 1px solid rgba(139,94,60,0.12); font-size: 14px; color: var(--brown-dark); cursor: pointer; letter-spacing: 0.05em; }
.profile-menu-item.active { color: var(--brown); font-weight: 600; }
.profile-points { background: var(--brown-dark); padding: 24px; margin-top: 16px; }
.profile-points-label { font-size: 11px; color: var(--brown-light); letter-spacing: 0.2em; margin-bottom: 12px; }
.profile-points-val { font-family: var(--font-serif); font-size: 36px; font-weight: 700; color: #faf7f0; }
.profile-points-note { font-size: 11px; color: rgba(250,247,240,0.5); margin-top: 4px; }
.order-card { background: var(--white); padding: 28px; border: 1px solid #e8ddd0; margin-bottom: 16px; }
.order-card-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 16px; }
.order-id { font-size: 12px; color: var(--brown); letter-spacing: 0.15em; margin-bottom: 4px; }
.order-date { font-size: 13px; color: var(--brown-muted); }
.order-status { font-size: 12px; background: rgba(0,0,0,0.04); padding: 4px 12px; letter-spacing: 0.08em; }
.order-items { font-size: 14px; color: var(--brown-dark); margin-bottom: 16px; line-height: 1.8; }
.order-footer { display: flex; justify-content: space-between; align-items: center; }
.order-total { font-family: var(--font-serif); font-size: 18px; font-weight: 600; color: var(--brown-dark); }
.btn-rebuy { background: none; border: 1px solid var(--brown-pale); padding: 6px 16px; font-size: 12px; cursor: pointer; color: var(--brown-mid); font-family: var(--font-sans); }

/* ── Profile: account tab ── */
.profile-form-section { }
.profile-form-title { font-family: var(--font-serif); font-size: 15px; font-weight: 600; color: var(--brown-dark); margin-bottom: 20px; padding-bottom: 12px; border-bottom: 1px solid #e8ddd0; }
.profile-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 20px; }
.profile-field label { font-size: 12px; letter-spacing: 0.1em; color: var(--brown); }
.profile-field input { border: 1px solid #ddd2c4; padding: 10px 14px; font-family: var(--font-sans); font-size: 14px; color: var(--brown-dark); background: var(--white); outline: none; }
.profile-field input:focus { border-color: var(--brown); }
.profile-field input:disabled { background: var(--cream-2); color: var(--brown-mid); cursor: not-allowed; }
.btn-profile-save { background: var(--brown-dark); color: #faf7f0; border: none; padding: 10px 28px; font-family: var(--font-sans); font-size: 13px; letter-spacing: 0.08em; cursor: pointer; }
.btn-profile-save:hover { background: var(--brown); }
.profile-alert { padding: 12px 16px; font-size: 13px; margin-bottom: 24px; }
.profile-alert-success { background: #f0f7f0; color: #3a6b3a; border-left: 3px solid #5a8a5a; }
.profile-alert-error   { background: #fdf0f0; color: #7a3a3a; border-left: 3px solid #c14a4a; }
.profile-coming-soon { padding: 60px 0; text-align: center; color: var(--brown-mid); }
.profile-coming-soon p { font-family: var(--font-serif); font-size: 20px; font-weight: 600; color: var(--brown); margin-bottom: 12px; }
.profile-coming-soon span { font-size: 13px; letter-spacing: 0.05em; }

/* ============================================
   FERMENTATION CALCULATOR
   ============================================ */
.calc-layout { display: grid; grid-template-columns: 380px 1fr; gap: 48px; max-width: 1100px; margin: 0 auto; padding: 56px 40px; }
.calc-panel { background: var(--white); padding: 32px; margin-bottom: 24px; }
.calc-panel h2 { font-family: var(--font-serif); font-size: 18px; font-weight: 600; color: var(--brown-dark); margin-bottom: 28px; }
.slider-row { margin-bottom: 28px; }
.slider-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.slider-label { font-size: 13px; color: var(--brown-dark); letter-spacing: 0.06em; }
.slider-value { font-family: var(--font-serif); font-size: 20px; font-weight: 600; color: var(--brown); }
.slider-hint { font-size: 11px; color: var(--brown-muted); margin-top: 6px; letter-spacing: 0.04em; }
input[type="range"] { width: 100%; accent-color: var(--brown); height: 3px; cursor: pointer; }
.ferment-toggle { display: flex; gap: 12px; margin-bottom: 28px; }
.ferment-btn {
  flex: 1; padding: 12px; border: 1px solid var(--brown-pale); background: var(--white);
  color: var(--brown-mid); font-size: 13px; cursor: pointer; font-family: var(--font-sans);
  letter-spacing: 0.05em; transition: all 0.2s;
}
.ferment-btn.active { border: 1.5px solid var(--brown); background: var(--cream-2); color: var(--brown); font-weight: 600; }
.time-input {
  width: 100%; padding: 12px 16px; border: 1px solid var(--brown-pale);
  font-size: 18px; font-family: var(--font-serif); color: var(--brown-dark); outline: none;
  transition: border-color 0.2s; cursor: pointer; box-sizing: border-box;
}
.time-input:focus { border-color: var(--brown); }
.recipe-dark { background: var(--brown-dark); padding: 36px; margin-bottom: 24px; }
.recipe-dark h2 { font-family: var(--font-serif); font-size: 18px; font-weight: 600; color: #faf7f0; margin-bottom: 28px; }
.recipe-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.recipe-item { background: rgba(255,255,255,0.05); padding: 20px; }
.recipe-item-label { font-size: 11px; color: var(--brown-light); letter-spacing: 0.15em; margin-bottom: 8px; }
.recipe-item-val { font-family: var(--font-serif); font-size: 28px; font-weight: 700; color: #faf7f0; margin-bottom: 4px; }
.recipe-item-pct { font-size: 11px; color: rgba(250,247,240,0.4); }
.recipe-total { border-top: 1px solid rgba(255,255,255,0.1); margin-top: 20px; padding-top: 20px; display: flex; justify-content: space-between; align-items: center; }
.recipe-total-label { font-size: 13px; color: rgba(250,247,240,0.6); }
.recipe-total-val { font-family: var(--font-serif); font-size: 22px; font-weight: 700; color: var(--brown-light); }
.calc-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 24px; }
.calc-stat { background: var(--cream-2); padding: 24px; text-align: center; }
.calc-stat-label { font-size: 11px; color: var(--brown); letter-spacing: 0.12em; margin-bottom: 12px; }
.calc-stat-val { font-family: var(--font-serif); font-size: 20px; font-weight: 700; color: var(--brown-dark); }
.timeline-panel { background: var(--white); padding: 32px; }
.timeline-panel h2 { font-family: var(--font-serif); font-size: 18px; font-weight: 600; color: var(--brown-dark); margin-bottom: 28px; }
.timeline { position: relative; padding-left: 32px; }
.timeline-line { position: absolute; left: 8px; top: 8px; bottom: 8px; width: 1px; background: #e8ddd0; }
.timeline-step { position: relative; margin-bottom: 28px; display: flex; gap: 20px; }
.timeline-step:last-child { margin-bottom: 0; }
.timeline-dot { position: absolute; left: -32px; top: 4px; width: 14px; height: 14px; border-radius: 50%; background: #e8ddd0; flex-shrink: 0; }
.timeline-dot.last { background: var(--brown); border: 3px solid var(--cream-2); }
.timeline-time { min-width: 56px; font-family: var(--font-serif); font-size: 15px; font-weight: 600; color: var(--brown); }
.timeline-label { font-size: 14px; font-weight: 600; color: var(--brown-dark); margin-bottom: 4px; letter-spacing: 0.05em; }
.timeline-desc { font-size: 12px; color: var(--brown-muted); line-height: 1.8; }

/* ============================================
   MULTI-PAGE: Link Resets
   ============================================ */
a.nav-logo, a.nav-link, a.nav-icon, a.nav-dropdown-link, a.see-all, a.back-btn { text-decoration: none; }
.nav-link { display: inline-block; }
.nav-icon { display: inline-flex; align-items: center; }
.product-card { display: block; text-decoration: none; color: inherit; cursor: pointer; }
a.btn-checkout, a.btn-continue, a.btn-back, a.btn-primary, a.btn-ghost {
  display: block; text-decoration: none; text-align: center;
}
body { padding-top: 72px; }
body.body-home { padding-top: 0; }

/* ============================================
   NAV: Hamburger & Mobile Dropdown
   ============================================ */
.nav-right { display: flex; align-items: center; gap: 16px; }
.nav-icons { margin-left: 0; }

.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}
.nav-hamburger span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--brown-dark);
  transition: transform 0.3s, opacity 0.3s;
}
.nav-hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.nav-dropdown {
  display: none;
  background: rgba(250,247,240,0.98);
  backdrop-filter: blur(12px);
  border-top: 1px solid rgba(139,94,60,0.1);
  padding-bottom: 8px;
}
.nav-dropdown.open { display: block; }
.nav-dropdown-link {
  display: block;
  padding: 15px 24px;
  font-size: 15px;
  color: var(--brown-dark);
  text-decoration: none;
  border-bottom: 1px solid rgba(139,94,60,0.07);
  letter-spacing: 0.08em;
  font-family: var(--font-sans);
}
.nav-dropdown-link:last-child { border-bottom: none; }
.nav-dropdown-link.active { color: var(--brown); font-weight: 600; }

/* Blog wrap */
.blog-wrap { max-width: 1100px; margin: 0 auto; padding: 64px 40px; }

/* ============================================
   RESPONSIVE — TABLET  (≤ 768px)
   ============================================ */
@media (max-width: 768px) {
  /* Nav */
  #nav { padding: 0 24px; }
  .nav-links { display: none; }
  .nav-hamburger { display: flex; }

  /* General */
  .container { padding: 0 24px; }
  .page-header { padding: 48px 24px 40px; }
  .page-header h1 { font-size: 28px; }

  /* Home sections */
  .brand-statement { padding: 64px 24px; }
  .process { padding: 56px 24px; }
  .process-grid { grid-template-columns: repeat(2, 1fr); }
  .featured { padding: 64px 24px; }
  .product-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .blog-dark { padding: 64px 24px; }
  .blog-preview-grid { grid-template-columns: 1fr; }
  footer { padding: 48px 24px; }

  /* Products page */
  .filter-bar { padding: 0 24px; }
  .filter-bar-inner { gap: 20px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .products-grid-wrap { padding: 40px 24px; }

  /* Blog page */
  .blog-wrap { padding: 48px 24px; }
  .blog-featured { grid-template-columns: 1fr; margin-bottom: 40px; }
  .blog-featured-body { padding: 32px 24px; }
  .blog-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }

  /* Blog post */
  .blog-post-body { padding: 48px 24px; }
  .blog-post-hero-content { padding: 48px 24px; }

  /* Product detail */
  .product-detail { padding: 40px 24px; }
  .detail-grid { grid-template-columns: 1fr; gap: 32px; }

  /* Cart */
  .cart-wrap { padding: 40px 24px; }
  .cart-layout { grid-template-columns: 1fr; }
  .cart-summary { position: static; margin-top: 8px; }

  /* Checkout */
  .checkout-wrap { padding: 40px 24px; }

  /* Profile */
  .profile-wrap { padding: 40px 24px; }
  .profile-layout { grid-template-columns: 1fr; }

  /* Calc */
  .calc-layout { grid-template-columns: 1fr; padding: 48px 24px; }
}

/* ============================================
   RESPONSIVE — MOBILE  (≤ 480px)
   ============================================ */
@media (max-width: 480px) {
  /* Nav */
  #nav { padding: 0 16px; }

  /* General */
  .container { padding: 0 16px; }
  .page-header { padding: 36px 16px 28px; }
  .page-header h1 { font-size: 24px; }

  /* Home sections */
  .brand-statement { padding: 48px 16px; }
  .process { padding: 48px 16px; }
  .process-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .featured { padding: 48px 16px; }
  .product-grid { grid-template-columns: 1fr; }
  .section-header { flex-direction: column; align-items: flex-start; gap: 12px; }
  .blog-dark { padding: 48px 16px; }
  footer { padding: 40px 16px; }

  /* Products page */
  .filter-bar { padding: 0 16px; }
  .filter-bar-inner { gap: 16px; }
  .products-grid-wrap { padding: 32px 16px; }

  /* Blog page */
  .blog-wrap { padding: 32px 16px; }
  .blog-grid { grid-template-columns: 1fr; }
  .blog-featured-title { font-size: 20px; }
  .blog-post-hero { height: 280px; }
  .blog-post-hero-content { padding: 32px 16px; }
  .blog-post-body { padding: 36px 16px; }
  .blog-related-grid { grid-template-columns: 1fr; }

  /* Product detail */
  .product-detail { padding: 32px 16px; }
  .detail-name { font-size: 28px; }
  .detail-grid { gap: 24px; }
  .detail-info { grid-template-columns: 1fr; }

  /* Cart */
  .cart-wrap { padding: 32px 16px; }
  .cart-item { gap: 16px; }
  .cart-item-img { width: 88px; height: 88px; }

  /* Checkout */
  .checkout-wrap { padding: 32px 16px; }
  .form-grid { grid-template-columns: 1fr; }
  .checkout-btns { flex-direction: column; }

  /* Profile */
  .profile-wrap { padding: 32px 16px; }
  .profile-header { flex-wrap: wrap; gap: 16px; }
  .btn-logout { margin-left: 0; }

  /* Calc */
  .calc-layout { padding: 32px 16px; }
  .recipe-grid { grid-template-columns: 1fr 1fr; }
  .calc-stats { grid-template-columns: 1fr 1fr; }

  /* Schedule calendar */
  .schedule-section { margin-bottom: 24px; }
  .schedule-cal-head { grid-template-columns: repeat(7, 1fr); }
  .schedule-cal-grid { grid-template-columns: repeat(7, 1fr); }
}

/* ============================================
   Product Schedule Calendar (front-end)
   ============================================ */
.schedule-section {
  margin: 20px 0 24px;
  border: 1px solid var(--brown-pale);
  border-radius: 6px;
  padding: 16px;
  background: var(--cream-2);
}

.schedule-label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--brown-dark);
  margin-bottom: 10px;
}

.schedule-nav {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.schedule-nav-btn {
  background: none;
  border: 1px solid var(--brown-pale);
  color: var(--brown);
  width: 28px;
  height: 28px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.schedule-nav-btn:hover { background: var(--cream); }

.schedule-month-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--brown-dark);
}

.schedule-cal-head {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  font-size: 11px;
  color: var(--brown-muted);
  margin-bottom: 4px;
}

.schedule-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}

.sched-day {
  text-align: center;
  padding: 6px 2px;
  font-size: 12px;
  border-radius: 4px;
  color: var(--brown-muted);
  min-height: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

.sched-day.past { opacity: 0.4; }

.sched-day.available {
  background: #d6edd9;
  color: #2d6a35;
  cursor: pointer;
  font-weight: 600;
}

.sched-day.available:hover { background: #b8ddb9; }

.sched-day.available.selected {
  background: #2d6a35;
  color: #fff;
  box-shadow: 0 0 0 2px #2d6a35;
}

.sched-day.sold-out {
  background: #f0f0f0;
  color: #aaa;
}

.sched-day b { font-size: 13px; }
.sched-day small { font-size: 10px; }

.schedule-selected-label {
  margin-top: 10px;
  font-size: 13px;
  font-weight: 600;
  color: #2d6a35;
}

/* Cart item date */
.cart-item-date {
  font-size: 12px;
  color: var(--brown);
  margin: 2px 0 6px;
}