/* 大榮行 Tai Wing Hong - 主要樣式文件 */
/* 基於原始設計稿提取並整合 */

/* ==============================
   CSS 變量
============================== */
:root {
  --twh-purple: #24103f;
  --twh-purple-2: #34204f;
  --twh-gold: #e7b84f;
  --twh-gold-2: #f7d985;
  --ink: #211833;
  --muted: #665e72;
  --line: #e9e2ef;
  --surface: #ffffff;
  --soft: #f7f5fa;
  --warm: #fbf5e8;
  --green: #dcebd3;
  --mint: #e5f3ed;
  --blue: #e5f1f6;
  --max: 1180px;
}

/* ==============================
   基礎重置
============================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--surface);
  font-family: "Noto Sans TC", "Microsoft JhengHei", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.75;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
h1, h2, h3, h4, p { margin-top: 0; }

/* ==============================
   佈局工具
============================== */
.container {
  width: min(var(--max), calc(100% - 64px));
  margin: 0 auto;
}

.section { padding: 82px 0; }
.section.soft  { background: var(--soft); }
.section.warm  { background: var(--warm); }
.section.green { background: #edf7dc; }
.section.mint  { background: var(--mint); }
.section.blue  { background: var(--blue); }
.section.dark  { background: var(--twh-purple); color: #fff; }

.section-head {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(340px, 0.7fr);
  gap: 36px;
  align-items: end;
  margin-bottom: 34px;
}
.section-title {
  margin-bottom: 0;
  color: var(--twh-purple);
  font-size: 34px;
  line-height: 1.22;
  font-weight: 900;
}
.section-note {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 17px;
}
.eyebrow {
  margin: 0 0 12px;
  color: var(--twh-gold);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

/* ==============================
   按鈕
============================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 22px;
  border-radius: 8px;
  border: 1px solid transparent;
  font-weight: 900;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.15s;
}
.btn:hover { opacity: 0.88; transform: translateY(-1px); }
.btn.primary {
  color: var(--twh-purple);
  background: var(--twh-gold);
  box-shadow: 0 16px 32px rgba(180,126,36,0.22);
}
.btn.secondary {
  color: var(--twh-purple);
  border-color: rgba(36,16,63,0.28);
  background: #fff;
}
.btn.outline {
  color: var(--twh-purple);
  border-color: rgba(36,16,63,0.22);
  background: #fff;
}
.btn.danger {
  color: #fff;
  background: #e53e3e;
}
.btn.sm {
  min-height: 36px;
  padding: 0 14px;
  font-size: 13px;
}

/* ==============================
   導航頭部
============================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: 88px;
  background: rgba(255,255,255,0.96);
  border-bottom: 1px solid rgba(36,16,63,0.08);
  backdrop-filter: blur(14px);
}
.nav-wrap {
  width: min(var(--max), calc(100% - 64px));
  height: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}
.brand-mark {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 255px;
}
.brand-mark img {
  width: 58px;
  height: 58px;
  object-fit: contain;
}
.brand-name {
  display: grid;
  color: var(--twh-purple);
  font-weight: 900;
  line-height: 1.1;
}
.brand-name span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}
.main-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 24px;
  color: var(--twh-purple);
  font-size: 15px;
  font-weight: 800;
  white-space: nowrap;
}
.main-nav a {
  position: relative;
  padding: 10px 0;
}
.main-nav a.active::after,
.main-nav a:hover::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 2px;
  height: 3px;
  background: var(--twh-gold);
}
.mobile-menu-btn {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  background: none;
  border: none;
  cursor: pointer;
}
.mobile-menu-btn span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--twh-purple);
  border-radius: 2px;
  transition: all 0.3s;
}
.mobile-nav {
  display: none;
  flex-direction: column;
  background: #fff;
  border-top: 1px solid var(--line);
  padding: 12px 0;
}
.mobile-nav a {
  padding: 12px 24px;
  font-weight: 700;
  color: var(--twh-purple);
  border-bottom: 1px solid var(--line);
}
.mobile-nav a:last-child { border-bottom: none; }
.mobile-nav.open { display: flex; }

/* ==============================
   Hero 橫幅
============================== */
.hero {
  position: relative;
  min-height: 640px;
  overflow: hidden;
  background: #fff;
}
.hero-slider {
  position: absolute;
  top: 0;
  right: calc((100% - min(var(--max), calc(100% - 64px))) / 2);
  bottom: 0;
  left: calc(50% - 20px);
  background: #fff;
}
.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  animation: heroSlide 18s infinite;
  background: #22133a;
}
.slide:nth-child(2) { animation-delay: 6s; }
.slide:nth-child(3) { animation-delay: 12s; }
.slide img { width: 100%; height: 100%; object-fit: cover; }
.slide:nth-child(1) img { object-position: 78% center; }
.slide:nth-child(2) img { object-position: 74% center; }
.slide:nth-child(3) img { object-position: 46% center; }
@keyframes heroSlide {
  0%, 30% { opacity: 1; }
  36%, 100% { opacity: 0; }
}
.hero-inner {
  position: relative;
  z-index: 3;
  min-height: 640px;
  display: flex;
  align-items: center;
  padding: 80px 0 118px;
}
.hero-copy { width: min(500px, 100%); }
.hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  padding: 8px 12px;
  border: 1px solid rgba(36,16,63,0.14);
  border-radius: 8px;
  color: var(--twh-purple);
  background: var(--warm);
  font-size: 13px;
  font-weight: 900;
}
h1 {
  margin-bottom: 22px;
  font-size: 41px;
  line-height: 1.08;
  font-weight: 900;
}
h1 span { display: block; }
.hero-lead {
  margin-bottom: 30px;
  max-width: 500px;
  color: var(--muted);
  font-size: 19px;
  line-height: 1.85;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.banner-dots {
  position: absolute;
  left: calc((100% - min(var(--max), calc(100% - 64px))) / 2);
  bottom: 64px;
  z-index: 4;
  display: flex;
  gap: 10px;
}
.banner-dots span {
  width: 42px;
  height: 4px;
  border-radius: 999px;
  background: rgba(36,16,63,0.16);
  animation: dotSlide 18s infinite;
}
.banner-dots span:nth-child(2) { animation-delay: 6s; }
.banner-dots span:nth-child(3) { animation-delay: 12s; }
@keyframes dotSlide {
  0%, 30% { background: var(--twh-gold); }
  36%, 100% { background: rgba(36,16,63,0.16); }
}

/* ==============================
   簡介區塊
============================== */
.intro-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(390px, 0.82fr);
  gap: 52px;
  align-items: center;
}
.intro-copy { grid-column: 2; }
.intro-copy h2 {
  margin-bottom: 18px;
  color: var(--twh-purple);
  font-size: 38px;
  line-height: 1.2;
  font-weight: 900;
}
.intro-copy p { color: var(--muted); font-size: 17px; }
.intro-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 28px;
}
.metric {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}
.metric strong {
  display: block;
  color: var(--twh-purple);
  font-size: 26px;
  line-height: 1.1;
}
.metric span { color: var(--muted); font-size: 13px; font-weight: 800; }
.intro-media {
  position: relative;
  grid-column: 1;
  grid-row: 1;
  min-height: 430px;
}
.intro-media-main {
  position: absolute;
  inset: 0;
  border-radius: 8px;
  overflow: hidden;
  background: var(--soft);
  box-shadow: 0 24px 60px rgba(36,16,63,0.16);
}
.intro-media-main img { width: 100%; height: 100%; object-fit: cover; }

/* ==============================
   品類卡片
============================== */
.category-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 16px;
}
.category-card {
  min-height: 245px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  display: grid;
  align-content: space-between;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
}
.category-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 34px rgba(36,16,63,0.12);
}
.category-image {
  height: 126px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 2px 0 18px;
}
.category-image img { width: 100%; height: 100%; object-fit: contain; }
.category-card h3 {
  margin-bottom: 5px;
  color: var(--twh-purple);
  font-size: 19px;
  line-height: 1.25;
}
.category-card p { margin-bottom: 0; color: var(--muted); font-size: 13px; line-height: 1.55; }

/* ==============================
   SKU 產品卡片
============================== */
.sku-slider {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(250px, 290px);
  gap: 18px;
  overflow-x: auto;
  padding: 4px 4px 18px;
  scroll-snap-type: x mandatory;
  scrollbar-color: var(--twh-gold) rgba(36,16,63,0.12);
}
.sku-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 18px;
}
.sku-card {
  min-height: 392px;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  scroll-snap-align: start;
  transition: transform 0.2s, box-shadow 0.2s;
}
.sku-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 34px rgba(36,16,63,0.12);
}
.sku-image {
  height: 236px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: #f8f5fb;
  cursor: zoom-in;
  position: relative;
}
.sku-image img { width: 100%; height: 100%; object-fit: contain; }
.sku-image .zoom-hint {
  position: absolute;
  bottom: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  background: rgba(255,255,255,0.9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  opacity: 0;
  transition: opacity 0.2s;
}
.sku-image:hover .zoom-hint { opacity: 1; }
.sku-body {
  min-height: 154px;
  padding: 16px 18px 18px;
  border-top: 1px solid var(--line);
}
.sku-code {
  display: inline-flex;
  margin-bottom: 8px;
  padding: 3px 8px;
  border-radius: 7px;
  color: var(--twh-purple);
  background: var(--warm);
  font-size: 11px;
  font-weight: 900;
}
.sku-body h3 {
  display: block;
  overflow: hidden;
  margin-bottom: 8px;
  color: var(--twh-purple);
  font-size: 18px;
  line-height: 1.18;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sku-body p {
  display: -webkit-box;
  overflow: hidden;
  margin-bottom: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.sku-brand {
  display: block;
  margin-top: 10px;
  color: var(--twh-gold);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

/* ==============================
   品牌卡片
============================== */
.brand-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}
.brand-card {
  height: 420px;
  min-height: 0;
  display: grid;
  grid-template-rows: 3fr 2fr;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  transition: transform 0.2s, box-shadow 0.2s;
}
.brand-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 34px rgba(36,16,63,0.12);
}
.brand-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--soft);
}
.brand-visual.green { background: #edf7dc; }
.brand-visual.blue  { background: #e7f2f8; }
.brand-visual.gold  { background: #fff1c7; }
.brand-visual.mint  { background: #e8f5ed; }
.brand-visual.clean { background: #f7f7f8; }
.brand-visual.warm  { background: var(--warm); }
.brand-visual img { max-width: 82%; max-height: 108px; object-fit: contain; }
.brand-copy { min-height: 0; padding: 16px 18px 18px; }
.brand-copy h3 {
  overflow: hidden;
  margin-bottom: 6px;
  color: var(--twh-purple);
  font-size: 19px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.brand-tag {
  display: inline-flex;
  margin-bottom: 10px;
  color: var(--twh-gold);
  font-size: 12px;
  font-weight: 900;
}
.brand-copy p {
  display: -webkit-box;
  overflow: hidden;
  margin-bottom: 14px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.brand-copy a { color: var(--twh-purple); font-weight: 900; }

/* ==============================
   CTA 橫幅
============================== */
.cta-band {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 32px;
  align-items: center;
  padding: 42px 46px;
  border-radius: 8px;
  color: #fff;
  background: var(--twh-purple);
  box-shadow: 0 22px 60px rgba(36,16,63,0.16);
}
.cta-band .eyebrow { color: var(--twh-gold-2); }
.cta-band h2 {
  margin-bottom: 12px;
  font-size: 34px;
  line-height: 1.22;
  font-weight: 900;
}
.cta-band p:not(.eyebrow) {
  max-width: 720px;
  margin-bottom: 0;
  color: rgba(255,255,255,0.78);
  font-size: 16px;
}

/* ==============================
   頁腳
============================== */
.site-footer {
  padding: 24px 0;
  color: #756c80;
  background: #fff;
  border-top: 1px solid var(--line);
  font-size: 13px;
  font-weight: 700;
}
.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.footer-brand { display: flex; flex-direction: column; gap: 4px; }
.footer-brand-name { color: var(--twh-purple); font-weight: 900; font-size: 15px; }
.footer-tagline { color: var(--muted); font-size: 12px; }
.footer-links { display: flex; gap: 20px; flex-wrap: wrap; }
.footer-links a { color: var(--muted); transition: color 0.2s; }
.footer-links a:hover { color: var(--twh-purple); }
.footer-copy { margin: 0; }

/* ==============================
   燈箱 (Lightbox)
============================== */
.lightbox-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,0.88);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
}
.lightbox-overlay img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 32px 80px rgba(0,0,0,0.5);
}
.lightbox-close {
  position: absolute;
  top: 20px;
  right: 24px;
  width: 44px;
  height: 44px;
  background: rgba(255,255,255,0.15);
  border: none;
  border-radius: 50%;
  color: #fff;
  font-size: 28px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
.lightbox-close:hover { background: rgba(255,255,255,0.3); }

/* ==============================
   表單樣式
============================== */
.form-group { margin-bottom: 20px; }
.form-group label {
  display: block;
  margin-bottom: 6px;
  color: var(--twh-purple);
  font-size: 14px;
  font-weight: 800;
}
.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-family: inherit;
  font-size: 15px;
  color: var(--ink);
  background: #fff;
  transition: border-color 0.2s;
  outline: none;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  border-color: var(--twh-purple);
  box-shadow: 0 0 0 3px rgba(36,16,63,0.08);
}
.form-group textarea { min-height: 120px; resize: vertical; }
.form-error { color: #e53e3e; font-size: 13px; margin-top: 4px; }
.form-success {
  padding: 16px 20px;
  border-radius: 8px;
  background: #e8f5e9;
  color: #2e7d32;
  font-weight: 700;
  margin-bottom: 20px;
}
.form-alert {
  padding: 16px 20px;
  border-radius: 8px;
  background: #fff3cd;
  color: #856404;
  font-weight: 700;
  margin-bottom: 20px;
}

/* ==============================
   地圖
============================== */
#stores-map {
  width: 100%;
  height: 480px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--soft);
}
.store-list { display: grid; gap: 14px; margin-top: 28px; }
.store-card {
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.store-card:hover, .store-card.active {
  border-color: var(--twh-purple);
  box-shadow: 0 4px 16px rgba(36,16,63,0.1);
}
.store-card h3 {
  margin-bottom: 4px;
  color: var(--twh-purple);
  font-size: 16px;
}
.store-card p { margin: 0; color: var(--muted); font-size: 14px; }

/* ==============================
   產品詳情頁
============================== */
.product-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 52px;
  align-items: start;
}
.product-image-main {
  border-radius: 8px;
  overflow: hidden;
  background: #f8f5fb;
  padding: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  cursor: zoom-in;
}
.product-image-main img { max-height: 360px; object-fit: contain; }
.product-info h1 {
  font-size: 32px;
  color: var(--twh-purple);
  margin-bottom: 12px;
}
.product-sku-badge {
  display: inline-flex;
  padding: 4px 10px;
  border-radius: 7px;
  background: var(--warm);
  color: var(--twh-purple);
  font-size: 12px;
  font-weight: 900;
  margin-bottom: 16px;
}
.product-brand-badge {
  display: inline-flex;
  padding: 4px 10px;
  border-radius: 7px;
  background: var(--soft);
  color: var(--twh-gold);
  font-size: 12px;
  font-weight: 900;
  margin-bottom: 16px;
  margin-left: 8px;
}
.product-desc { color: var(--muted); font-size: 16px; line-height: 1.8; }
.product-actions { margin-top: 28px; display: flex; gap: 14px; flex-wrap: wrap; }

/* ==============================
   頁面標題橫幅
============================== */
.page-hero {
  padding: 64px 0 52px;
  background: var(--twh-purple);
  color: #fff;
}
.page-hero .eyebrow { color: var(--twh-gold-2); }
.page-hero h1 { color: #fff; font-size: 42px; margin-bottom: 12px; }
.page-hero p { color: rgba(255,255,255,0.78); font-size: 18px; max-width: 600px; margin: 0; }

/* ==============================
   篩選器
============================== */
.filter-bar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}
.filter-btn {
  padding: 8px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
}
.filter-btn:hover, .filter-btn.active {
  background: var(--twh-purple);
  border-color: var(--twh-purple);
  color: #fff;
}

/* ==============================
   麵包屑
============================== */
.breadcrumb {
  display: flex;
  gap: 8px;
  align-items: center;
  color: var(--muted);
  font-size: 14px;
  margin-bottom: 28px;
}
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--twh-purple); }
.breadcrumb span { color: var(--line); }

/* ==============================
   會員/登錄頁面
============================== */
.auth-page {
  min-height: calc(100vh - 88px);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--soft);
  padding: 40px 20px;
}
.auth-card {
  width: 100%;
  max-width: 440px;
  padding: 40px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 24px 60px rgba(36,16,63,0.12);
}
.auth-card h2 {
  color: var(--twh-purple);
  font-size: 28px;
  margin-bottom: 8px;
}
.auth-card p { color: var(--muted); margin-bottom: 28px; }

/* ==============================
   通知提示
============================== */
.toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9998;
  padding: 14px 20px;
  border-radius: 8px;
  background: var(--twh-purple);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  box-shadow: 0 8px 24px rgba(36,16,63,0.24);
  transform: translateY(100px);
  opacity: 0;
  transition: all 0.3s;
}
.toast.show { transform: translateY(0); opacity: 1; }
.toast.success { background: #2e7d32; }
.toast.error { background: #c62828; }

/* ==============================
   響應式
============================== */
@media (max-width: 1160px) {
  .main-nav { gap: 16px; font-size: 14px; }
  .category-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .brand-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product-detail-grid { gap: 32px; }
}

@media (max-width: 880px) {
  .site-header { height: auto; }
  .nav-wrap {
    width: min(100% - 34px, var(--max));
    min-height: 82px;
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px 0;
  }
  .brand-mark { min-width: 0; }
  .main-nav { display: none; }
  .mobile-menu-btn { display: flex; }
  .container, .footer-inner { width: min(100% - 34px, var(--max)); }
  h1 { font-size: 40px; }
  .hero { min-height: 0; display: flex; flex-direction: column; }
  .hero-slider { position: relative; inset: auto; width: 100%; height: 330px; order: 1; }
  .hero-inner { min-height: 0; order: 2; padding: 44px 0 76px; }
  .section-head, .intro-grid, .cta-band { grid-template-columns: 1fr; }
  .intro-copy, .intro-media { grid-column: auto; grid-row: auto; }
  .intro-media { min-height: 360px; }
  .intro-media-main { inset: 0; }
  .intro-metrics, .category-grid, .brand-grid { grid-template-columns: 1fr; }
  .footer-inner { flex-direction: column; }
  .product-detail-grid { grid-template-columns: 1fr; }
  .page-hero h1 { font-size: 32px; }
}

@media (max-width: 560px) {
  .brand-name { display: none; }
  .hero-inner { padding-top: 36px; }
  .banner-dots { left: 17px; }
  .section { padding: 62px 0; }
  .cta-band { padding: 32px 24px; }
  .auth-card { padding: 28px 20px; }
  .category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .hero {
    display: grid !important;
    min-height: 0 !important;
    padding: 0 0 34px !important;
  }
  .hero-inner {
    order: 3 !important;
    width: min(100% - 32px, var(--max)) !important;
    min-height: 0 !important;
    padding: 16px 0 24px !important;
  }
  .hero-copy { width: 100% !important; }
  .hero-copy h1 { max-width: 100% !important; font-size: 31px !important; line-height: 1.18 !important; }
  .hero-lead { max-width: none !important; margin-top: 16px !important; margin-bottom: 22px !important; font-size: 15px !important; }
  .hero-actions { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; width: 100% !important; }
  .hero-slider {
    order: 1 !important;
    position: relative !important;
    inset: auto !important;
    width: min(100% - 32px, var(--max)) !important;
    height: 210px !important;
    margin: 24px auto 0 !important;
    border-radius: 8px !important;
  }
  .banner-dots {
    position: static !important;
    order: 2 !important;
    width: min(100% - 32px, var(--max)) !important;
    margin: 10px auto 0 !important;
  }
  .mobile-optional-video { display: none !important; }
}

/* ==============================
   導航下拉選單
============================== */
.nav-dropdown-wrap {
  position: relative;
}
.nav-dropdown-wrap > a {
  display: flex;
  align-items: center;
  gap: 5px;
}
.nav-arrow {
  transition: transform 0.2s;
  flex-shrink: 0;
}
.nav-dropdown-wrap:hover .nav-arrow {
  transform: rotate(180deg);
}
.nav-dropdown {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  min-width: 240px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 16px 48px rgba(36,16,63,0.14);
  padding: 8px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
  z-index: 200;
}
.nav-dropdown-wrap:hover .nav-dropdown,
.nav-dropdown-wrap:focus-within .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  color: var(--twh-purple);
  font-size: 14px;
  font-weight: 700;
  transition: background 0.15s;
  gap: 12px;
}
.nav-dropdown-item:hover,
.nav-dropdown-item.active {
  background: var(--soft);
}
.nav-dropdown-item.active {
  color: var(--twh-gold);
}
.dropdown-brand-name { flex: 1; }
.dropdown-brand-abbr {
  flex-shrink: 0;
  padding: 2px 7px;
  border-radius: 5px;
  background: var(--warm);
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.03em;
}

/* 手機版導航群組 */
.mobile-nav-group { border-bottom: 1px solid var(--line); }
.mobile-nav-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 12px 24px;
  background: none;
  border: none;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  color: var(--twh-purple);
  cursor: pointer;
  text-align: left;
}
.mobile-nav-toggle svg { transition: transform 0.2s; }
.mobile-nav-toggle.open svg { transform: rotate(180deg); }
.mobile-subnav {
  display: none;
  flex-direction: column;
  background: var(--soft);
  padding: 4px 0;
}
.mobile-subnav.open { display: flex; }
.mobile-subnav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 24px 10px 36px;
  font-size: 14px;
  font-weight: 700;
  color: var(--twh-purple);
  border-bottom: none;
}
.mobile-subnav a:hover { background: var(--line); }
.mobile-abbr {
  padding: 2px 7px;
  border-radius: 5px;
  background: var(--warm);
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

/* ==============================
   品牌內頁 - Hero
============================== */
.brand-hero {
  position: relative;
  min-height: 540px;
  overflow: hidden;
  background: #e7f3d8;
}
.brand-hero::before {
  content: "";
  position: absolute;
  inset: -28px;
  z-index: 0;
  background-size: cover;
  background-position: center;
  filter: blur(8px) saturate(1.1) brightness(1.02);
  transform: scale(1.08);
  pointer-events: none;
}
.brand-hero.has-hero-bg::before {
  background-image: var(--hero-bg);
}
.brand-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.72) 50%, rgba(255,255,255,0.12) 100%);
  pointer-events: none;
}
.brand-hero .hero-inner {
  position: relative;
  z-index: 2;
  width: min(var(--max), calc(100% - 64px));
  margin: 0 auto;
  min-height: 540px;
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 52px;
  align-items: center;
  padding: 72px 0;
}
.brand-hero .hero-copy { }
.brand-label.logo-label {
  display: flex;
  align-items: center;
  min-height: 72px;
  margin-bottom: 20px;
}
.brand-label.logo-label img {
  max-height: 72px;
  max-width: 240px;
  object-fit: contain;
  object-position: left center;
}
.brand-hero .crumb {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  color: var(--twh-gold);
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.brand-hero h1 {
  margin-bottom: 18px;
  color: var(--twh-purple);
  font-size: 42px;
  line-height: 1.1;
  font-weight: 900;
}
.brand-hero .hero-copy p {
  margin-bottom: 28px;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.78;
  max-width: 520px;
}
.button-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 24px;
  border-radius: 8px;
  border: none;
  background: #5b8531;
  color: #fff;
  font-weight: 900;
  font-size: 15px;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.15s;
}
.btn-primary:hover { opacity: 0.88; transform: translateY(-1px); }
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 24px;
  border-radius: 8px;
  border: 1px solid rgba(36,16,63,0.24);
  background: rgba(255,255,255,0.88);
  color: var(--twh-purple);
  font-weight: 900;
  font-size: 15px;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.15s;
}
.btn-secondary:hover { opacity: 0.88; transform: translateY(-1px); }
.btn-twh {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 28px;
  border-radius: 8px;
  border: none;
  background: var(--twh-gold);
  color: var(--twh-purple);
  font-weight: 900;
  font-size: 15px;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.15s;
}
.btn-twh:hover { opacity: 0.88; transform: translateY(-1px); }

/* Hero 右側卡片 */
.hero-card {
  background: rgba(255,255,255,0.88);
  border: 1px solid rgba(91,133,49,0.18);
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 16px 48px rgba(36,16,63,0.1);
}
.hero-family-stage { }
.hero-family-main {
  width: 100%;
  height: 200px;
  object-fit: contain;
  object-position: center bottom;
  border-radius: 8px;
  background: #edf7dc;
  padding: 12px;
}
.hero-family-strip {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 8px;
}
.hero-family-strip img {
  width: 100%;
  height: 96px;
  object-fit: contain;
  object-position: center bottom;
  border-radius: 6px;
  background: #edf7dc;
  padding: 8px;
}
.hero-caption {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(91,133,49,0.14);
}
.hero-caption strong {
  display: block;
  color: var(--twh-purple);
  font-size: 14px;
  font-weight: 900;
  margin-bottom: 4px;
}
.hero-caption span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}
.hero-series-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}
.hero-series-pills span {
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(91,133,49,0.1);
  color: #3d6320;
  font-size: 12px;
  font-weight: 700;
}

/* ==============================
   Quick Strip
============================== */
.quick-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  border-bottom: 1px solid var(--line);
  background: #fff;
}
.quick-item {
  padding: 18px 24px;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.quick-item:last-child { border-right: none; }
.quick-item strong {
  color: var(--twh-purple);
  font-size: 14px;
  font-weight: 900;
  line-height: 1.3;
}
.quick-item span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

/* ==============================
   Brand Story
============================== */
.story-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.story-logo-lockup {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 18px;
}
.story-logo-lockup img {
  max-height: 52px;
  max-width: 160px;
  object-fit: contain;
}
.story-logo-lockup .eyebrow { margin: 0; }
.story-copy h2 {
  color: var(--twh-purple);
  font-size: 34px;
  font-weight: 900;
  line-height: 1.2;
  margin-bottom: 18px;
}
.story-copy p { color: var(--muted); font-size: 17px; line-height: 1.8; }
.story-media {
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 20px 52px rgba(36,16,63,0.12);
  cursor: zoom-in;
}
.story-media img {
  width: 100%;
  height: 380px;
  object-fit: cover;
  display: block;
  transition: transform 0.4s;
}
.story-media:hover img { transform: scale(1.03); }

/* ==============================
   Brand Mission
============================== */
.mission-panel {
  display: grid;
  grid-template-columns: minmax(280px, 0.7fr) 1fr;
  gap: 52px;
  align-items: start;
}
.mission-main .eyebrow { margin-bottom: 10px; }
.mission-main h2 {
  color: var(--twh-purple);
  font-size: 36px;
  font-weight: 900;
  line-height: 1.18;
  margin-bottom: 14px;
}
.mission-main p { color: var(--muted); font-size: 17px; line-height: 1.8; }
.mission-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.mission-card {
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 4px 16px rgba(36,16,63,0.06);
}
.mission-card-img {
  width: 100%;
  height: 126px;
  object-fit: cover;
  display: block;
  background: var(--soft);
}
.mission-card-body { padding: 16px 18px 20px; }
.mission-card-icon {
  font-size: 28px;
  margin-bottom: 10px;
  display: block;
}
.mission-card strong {
  display: block;
  color: var(--twh-purple);
  font-size: 15px;
  font-weight: 900;
  margin-bottom: 8px;
}
.mission-card p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
  margin: 0;
}

/* ==============================
   Product Lines
============================== */
.range-overview {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 28px;
  background: #f3faea;
}
.range-overview-copy {
  padding: 36px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.range-overview-copy .eyebrow { color: #5b8531; }
.range-overview-copy h3 {
  color: var(--twh-purple);
  font-size: 22px;
  font-weight: 900;
  line-height: 1.3;
  margin-bottom: 12px;
}
.range-overview-copy p { color: var(--muted); font-size: 15px; line-height: 1.7; margin: 0; }
.range-overview-media {
  background: #dcefd1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  min-height: 200px;
}
.range-family-image {
  max-width: 100%;
  max-height: 220px;
  object-fit: contain;
  cursor: zoom-in;
}
.range-story-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.range-story {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid rgba(91,133,49,0.2);
  border-radius: 10px;
  overflow: hidden;
  background: #f4faec;
  transition: box-shadow 0.2s;
}
.range-story:hover { box-shadow: 0 8px 28px rgba(91,133,49,0.14); }
.range-story.wide {
  grid-column: span 2;
  grid-template-columns: 280px 1fr;
}
.range-story.reverse .range-media { order: 2; }
.range-story.reverse .range-copy { order: 1; }
.range-media {
  background: #dcefd1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 16px;
  min-height: 180px;
}
.range-media img {
  max-width: 100%;
  max-height: 160px;
  object-fit: contain;
  cursor: zoom-in;
}
.range-copy {
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.range-kicker {
  display: block;
  color: #5b8531;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}
.range-copy h3 {
  color: var(--twh-purple);
  font-size: 18px;
  font-weight: 900;
  line-height: 1.25;
  margin-bottom: 10px;
}
.range-copy p {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.65;
  margin-bottom: 12px;
}
.range-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.tag {
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(91,133,49,0.12);
  color: #3d6320;
  font-size: 12px;
  font-weight: 700;
}

/* ==============================
   Daily Feeding Showcase
============================== */
.showcase-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  border: 1px solid rgba(96,121,69,0.16);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 18px 46px rgba(42,66,24,0.12);
  background: #fffdf6;
}
.showcase-media {
  position: relative;
  min-height: 368px;
  overflow: hidden;
  cursor: zoom-in;
}
.showcase-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s;
}
.showcase-media:hover img { transform: scale(1.04); }
.showcase-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, transparent 84%, rgba(255,253,246,0.96) 100%);
  pointer-events: none;
}
.showcase-copy {
  min-height: 368px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 42px 52px;
  background: linear-gradient(135deg, #f4fbec, #fffdf6);
}
.showcase-copy .eyebrow { color: #5b8531; }
.showcase-copy h2 {
  color: var(--twh-purple);
  font-size: 28px;
  font-weight: 900;
  line-height: 1.2;
  margin-bottom: 14px;
  max-width: 420px;
}
.showcase-copy p {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.78;
  margin-bottom: 20px;
}
.showcase-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}
.showcase-list-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
}
.showcase-list-item span {
  flex-shrink: 0;
  padding: 2px 8px;
  border-radius: 5px;
  background: rgba(91,133,49,0.12);
  color: #3d6320;
  font-size: 12px;
  font-weight: 900;
}

/* ==============================
   Brand CTA
============================== */
.brand-cta {
  padding: 64px 0;
  background: var(--twh-purple);
}
.cta-inner {
  width: min(var(--max), calc(100% - 64px));
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.cta-inner h2 {
  color: #fff;
  font-size: 30px;
  font-weight: 900;
  margin-bottom: 8px;
}
.cta-inner p {
  color: rgba(255,255,255,0.78);
  font-size: 16px;
  margin: 0;
}

/* ==============================
   品牌內頁響應式
============================== */
@media (max-width: 1100px) {
  .brand-hero .hero-inner { grid-template-columns: 1fr 360px; gap: 36px; }
  .range-story-list { grid-template-columns: repeat(2, 1fr); }
  .range-story.wide { grid-column: span 2; }
  .mission-cards { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 900px) {
  .brand-hero .hero-inner {
    grid-template-columns: 1fr;
    min-height: 0;
    padding: 48px 0 36px;
  }
  .hero-card { display: none; }
  .quick-strip {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: repeat(2, 1fr);
  }
  .quick-item { border-right: none; border-bottom: 1px solid var(--line); }
  .story-grid { grid-template-columns: 1fr; gap: 32px; }
  .story-media img { height: 260px; }
  .mission-panel { grid-template-columns: 1fr; gap: 28px; }
  .mission-cards { grid-template-columns: 1fr; }
  .range-overview { grid-template-columns: 1fr; }
  .range-overview-media { min-height: 180px; }
  .range-story-list { grid-template-columns: 1fr; }
  .range-story, .range-story.wide, .range-story.reverse {
    grid-template-columns: 1fr;
    grid-template-rows: 160px 1fr;
  }
  .range-story.wide { grid-column: auto; }
  .range-story .range-media, .range-story.reverse .range-media { order: 1; height: 160px; }
  .range-story .range-copy, .range-story.reverse .range-copy { order: 2; }
  .showcase-grid { grid-template-columns: 1fr; }
  .showcase-media { min-height: 240px; }
  .showcase-copy { min-height: auto; padding: 28px 24px 32px; }
  .cta-inner { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 560px) {
  .brand-hero h1 { font-size: 30px; }
  .quick-strip { grid-template-columns: 1fr; }
  .quick-item { border-right: none; }
  .mission-cards { grid-template-columns: 1fr; }
  .range-story-list { grid-template-columns: 1fr; }
}

/* ==============================
   Local Commerce UI
============================== */
.shop-nav-actions { display:flex; align-items:center; gap:8px; margin-left:6px; }
.shop-nav-link { display:inline-flex; align-items:center; gap:6px; padding:8px 10px; border:1px solid var(--line); border-radius:999px; color:var(--twh-purple); font-size:13px; font-weight:800; white-space:nowrap; }
.shop-nav-link:hover { background:var(--soft); border-color:var(--twh-purple); }
.shop-nav-link b { display:inline-grid; place-items:center; min-width:18px; height:18px; padding:0 5px; background:var(--twh-purple); color:#fff; border-radius:999px; font-size:11px; }
.mobile-shop-actions { border-top:1px solid var(--line); margin-top:8px; padding-top:8px; }
.mobile-shop-actions a { display:flex; justify-content:space-between; align-items:center; }
.mobile-shop-actions b { background:var(--twh-purple); color:#fff; padding:1px 7px; border-radius:999px; font-size:12px; }
.shop-page { padding:52px 0 74px; min-height:55vh; }
.shop-shell { width:min(1180px,calc(100% - 48px)); margin:0 auto; }
.shop-page-head { margin-bottom:28px; }
.shop-page-head .eyebrow { margin-bottom:8px; }
.shop-page-head h1 { font-size:clamp(28px,4vw,40px); margin:0; color:var(--twh-purple); }
.shop-page-head p { color:var(--muted); margin:10px 0 0; }
.shop-grid { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(300px,.75fr); gap:24px; align-items:start; }
.shop-card { background:#fff; border:1px solid var(--line); box-shadow:0 14px 38px rgba(49,27,75,.06); border-radius:16px; padding:24px; }
.shop-card h2,.shop-card h3 { color:var(--twh-purple); margin-top:0; }
.shop-summary { position:sticky; top:92px; }
.shop-summary-row { display:flex; justify-content:space-between; gap:16px; padding:10px 0; color:var(--muted); }
.shop-summary-row.total { padding-top:16px; margin-top:8px; border-top:1px solid var(--line); font-size:19px; font-weight:900; color:var(--twh-purple); }
.shop-alert { display:none; padding:12px 14px; border-radius:10px; margin:0 0 16px; font-size:14px; }
.shop-alert.error { display:block; background:#fff1f2; color:#b42318; border:1px solid #fecdd3; }
.shop-alert.success { display:block; background:#effaf2; color:#166534; border:1px solid #bbf7d0; }
.cart-line { display:grid; grid-template-columns:76px minmax(0,1fr) auto; gap:16px; align-items:center; padding:16px 0; border-bottom:1px solid var(--line); }
.cart-line:last-child { border-bottom:0; }
.cart-thumb { width:76px; height:76px; border:1px solid var(--line); border-radius:10px; object-fit:contain; padding:5px; background:#fff; }
.cart-line-title { font-weight:800; color:var(--twh-purple); display:block; }
.cart-line-meta { font-size:13px; color:var(--muted); margin-top:4px; }
.cart-line-actions { display:flex; flex-direction:column; align-items:flex-end; gap:9px; }
.qty-control { display:inline-flex; align-items:center; border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.qty-control button { border:0; background:var(--soft); width:28px; height:30px; cursor:pointer; color:var(--twh-purple); font-weight:900; }
.qty-control input { border:0; width:38px; text-align:center; height:30px; font:inherit; }
.text-btn { background:none; border:0; padding:0; color:#a32929; font-size:13px; text-decoration:underline; cursor:pointer; }
.shop-form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.shop-form-grid .full { grid-column:1/-1; }
.shop-field { display:flex; flex-direction:column; gap:7px; }
.shop-field label { font-size:14px; font-weight:800; color:var(--twh-purple); }
.shop-field input,.shop-field select,.shop-field textarea { font:inherit; border:1px solid var(--line); background:#fff; border-radius:8px; padding:11px 12px; color:var(--ink); }
.shop-field textarea { min-height:92px; resize:vertical; }
.shop-radio-list { display:grid; gap:10px; }
.shop-radio { display:flex; gap:10px; align-items:flex-start; padding:13px; border:1px solid var(--line); border-radius:10px; cursor:pointer; }
.shop-radio:has(input:checked) { border-color:var(--twh-purple); background:var(--soft); }
.shop-radio strong { display:block; color:var(--twh-purple); }
.shop-radio span { display:block; color:var(--muted); font-size:13px; line-height:1.55; margin-top:3px; }
.coupon-box { display:flex; gap:8px; margin-top:8px; }
.coupon-box input { flex:1; min-width:0; }
.checkout-section { margin-bottom:26px; padding-bottom:26px; border-bottom:1px solid var(--line); }
.checkout-section:last-child { margin-bottom:0; border-bottom:0; padding-bottom:0; }
.purchase-price { font-size:26px; font-weight:900; color:var(--twh-purple); margin:18px 0 8px; }
.stock-status { font-size:14px; font-weight:800; margin:8px 0; }
.stock-status.in-stock { color:#15803d; }
.stock-status.out-stock { color:#b42318; }
.sku-options { display:flex; gap:8px; flex-wrap:wrap; margin:12px 0; }
.sku-choice { border:1px solid var(--line); background:#fff; border-radius:8px; padding:9px 12px; cursor:pointer; font:inherit; color:var(--ink); }
.sku-choice.active { border-color:var(--twh-purple); background:var(--soft); color:var(--twh-purple); font-weight:800; }
.sku-choice.disabled { opacity:.5; cursor:not-allowed; text-decoration:line-through; }
.product-purchase-controls { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:20px; }
.auth-layout { max-width:520px; margin:0 auto; }
.account-tabs { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:20px; }
.account-tabs a { padding:8px 12px; border:1px solid var(--line); border-radius:999px; color:var(--twh-purple); font-weight:800; font-size:14px; }
.account-tabs a.active,.account-tabs a:hover { background:var(--twh-purple); border-color:var(--twh-purple); color:#fff; }
.order-status { display:inline-block; padding:4px 8px; border-radius:999px; background:var(--soft); color:var(--twh-purple); font-size:12px; font-weight:900; }
.table-scroll { overflow:auto; }
.shop-table { width:100%; border-collapse:collapse; font-size:14px; }
.shop-table th,.shop-table td { text-align:left; padding:12px; border-bottom:1px solid var(--line); vertical-align:top; }
.shop-table th { color:var(--muted); font-size:12px; white-space:nowrap; }
.empty-state { padding:46px 18px; text-align:center; color:var(--muted); }
.empty-state h3 { color:var(--twh-purple); margin:0 0 8px; }
.shop-note { margin-top:12px; padding:12px; background:var(--soft); border-radius:8px; color:var(--muted); font-size:13px; line-height:1.6; }
@media(max-width:1100px) { .main-nav { gap:14px; } .shop-nav-actions .shop-nav-link span { display:none; } .shop-nav-actions { margin-left:0; } }
@media(max-width:820px) { .shop-nav-actions { display:none; } .shop-grid { grid-template-columns:1fr; } .shop-summary { position:static; } .shop-shell { width:min(100% - 32px,1180px); } .shop-page { padding:32px 0 48px; } .shop-form-grid { grid-template-columns:1fr; } .shop-form-grid .full { grid-column:auto; } .cart-line { grid-template-columns:58px minmax(0,1fr); } .cart-thumb { width:58px; height:58px; } .cart-line-actions { grid-column:2; align-items:flex-start; flex-direction:row; justify-content:space-between; } .shop-card { padding:18px; } }


/* ==============================
   Stage A: original handoff design restoration
   Presentation-only. Commerce, cart and checkout selectors remain unchanged.
============================== */
.home-brand-feature {
  padding: 0;
  overflow: hidden;
  background: #f7f5fa;
}
.home-brand-feature-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, .86fr);
  min-height: 440px;
}
.home-brand-feature-media { min-height: 440px; background: #183c2d; }
.home-brand-feature-media img { width: 100%; height: 100%; object-fit: cover; }
.home-brand-feature-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 64px max(32px, calc((100vw - var(--max)) / 2));
  padding-left: 56px;
  background: #193d2e;
  color: #fff;
}
.home-brand-feature-copy .eyebrow { color: #f0c964; }
.home-brand-feature-copy h2 { margin-bottom: 16px; font-size: 36px; line-height: 1.2; }
.home-brand-feature-copy p:not(.eyebrow) { max-width: 470px; color: rgba(255,255,255,.8); font-size: 17px; }
.home-brand-feature-copy .btn { align-self: flex-start; margin-top: 10px; }
.brand-portfolio-scroll .brand-grid {
  grid-auto-flow: column;
  grid-auto-columns: minmax(260px, 290px);
  grid-template-columns: none;
  overflow-x: auto;
  padding: 4px 4px 20px;
  scroll-snap-type: x mandatory;
  scrollbar-color: var(--twh-gold) rgba(36,16,63,.12);
}
.brand-portfolio-scroll .brand-card { height: 380px; scroll-snap-align: start; }

.about-hero { position: relative; overflow: hidden; background: #24103f; color: #fff; }
.about-hero-inner { display: grid; grid-template-columns: minmax(0, .9fr) minmax(360px, .8fr); min-height: 430px; }
.about-hero-copy { display: flex; flex-direction: column; justify-content: center; padding: 70px max(32px, calc((100vw - var(--max)) / 2)); padding-right: 56px; }
.about-hero-copy .eyebrow { color: #f7d985; }
.about-hero-copy h1 { margin-bottom: 18px; color: #fff; font-size: 45px; }
.about-hero-copy p:not(.eyebrow) { max-width: 600px; color: rgba(255,255,255,.8); font-size: 18px; }
.about-hero-media { min-height: 430px; }
.about-hero-media img { width: 100%; height: 100%; object-fit: cover; }
.about-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.about-content-card { padding: 36px; border-radius: 10px; background: #fff; border: 1px solid var(--line); }
.about-content-card h2 { color: var(--twh-purple); font-size: 30px; line-height: 1.24; }
.about-content-card p { color: var(--muted); }
.about-category-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.about-category-card { min-height: 198px; padding: 24px; border-radius: 10px; background: #fff; border: 1px solid var(--line); }
.about-category-card .category-index { display: inline-flex; margin-bottom: 18px; color: var(--twh-gold); font-weight: 900; font-size: 13px; }
.about-category-card h3 { margin-bottom: 8px; color: var(--twh-purple); font-size: 19px; line-height: 1.25; }
.about-category-card p { margin-bottom: 0; color: var(--muted); font-size: 14px; line-height: 1.65; }
.about-brand-wall { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.about-brand-logo { display: flex; align-items: center; justify-content: center; min-height: 130px; padding: 24px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.about-brand-logo img { width: 100%; max-height: 60px; object-fit: contain; }
.wholesale-panel { position: relative; overflow: hidden; padding: 56px; border-radius: 12px; background: linear-gradient(110deg, #24103f, #3b195d); color: #fff; }
.wholesale-panel::after { content:""; position:absolute; inset:0; opacity:.14; background:url('/twh/assets/images/about-us/about-product-warm-pets-v01.png') center/cover no-repeat; }
.wholesale-panel > * { position: relative; z-index: 1; }
.wholesale-panel .eyebrow { color: #f7d985; }
.wholesale-panel h2 { max-width: 650px; margin-bottom: 14px; font-size: 34px; line-height: 1.22; }
.wholesale-panel p:not(.eyebrow) { max-width: 680px; color: rgba(255,255,255,.82); font-size: 17px; }
.about-contact-grid { display: grid; grid-template-columns: minmax(0,.7fr) minmax(400px,1fr); gap: 52px; align-items: start; }
.contact-note { padding: 26px; border-left: 4px solid var(--twh-gold); background: var(--warm); color: var(--muted); }

.brand-design-section { padding: 82px 0; background: var(--brand-display-soft, #f7f5fa); }
.brand-design-head { display: grid; grid-template-columns: minmax(0, .95fr) minmax(320px, .7fr); gap: 36px; align-items: end; margin-bottom: 32px; }
.brand-design-head .eyebrow { color: var(--brand-display-accent, var(--twh-gold)); }
.brand-design-head h2 { margin: 0; color: var(--brand-display-ink, var(--twh-purple)); font-size: 35px; line-height: 1.2; }
.brand-design-head > p { margin: 0; color: var(--muted); font-size: 16px; }
.brand-design-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.brand-design-card { overflow: hidden; min-height: 320px; border: 1px solid var(--brand-display-border, var(--line)); border-radius: 11px; background: #fff; box-shadow: 0 6px 18px rgba(36,16,63,.05); }
.brand-design-media { height: 208px; padding: 16px; display:flex; align-items:center; justify-content:center; background: #fff; }
.brand-design-media img { width: 100%; height: 100%; object-fit: contain; cursor: zoom-in; }
.brand-design-copy { padding: 16px 18px 20px; border-top: 1px solid var(--brand-display-border, var(--line)); }
.brand-design-copy h3 { margin: 0 0 7px; color: var(--brand-display-ink, var(--twh-purple)); font-size: 17px; line-height: 1.3; }
.brand-design-copy p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.brand-page--meadow { --brand-display-accent:#527a2b; --brand-display-soft:#f0f7e8; --brand-display-ink:#35521d; --brand-display-border:rgba(82,122,43,.18); }
.brand-page--hypro { --brand-display-accent:#213d78; --brand-display-soft:#f1f5ff; --brand-display-ink:#152d60; --brand-display-border:rgba(33,61,120,.18); }
.brand-page--labivet { --brand-display-accent:#008da4; --brand-display-soft:#e9f9fb; --brand-display-ink:#006b7f; --brand-display-border:rgba(0,141,164,.18); }
.brand-page--fera { --brand-display-accent:#1f573f; --brand-display-soft:#edf6ef; --brand-display-ink:#143b2c; --brand-display-border:rgba(31,87,63,.18); }
.brand-page--go { --brand-display-accent:#f28c28; --brand-display-soft:#111; --brand-display-ink:#fff; --brand-display-border:rgba(242,140,40,.45); }
.brand-page--yumguard { --brand-display-accent:#5d9b4b; --brand-display-soft:#f3faea; --brand-display-ink:#3d6d34; --brand-display-border:rgba(93,155,75,.2); }
.brand-page--germagic { --brand-display-accent:#087c7b; --brand-display-soft:#eaf8f7; --brand-display-ink:#075c5c; --brand-display-border:rgba(8,124,123,.18); }
.brand-page--germagic-pet { --brand-display-accent:#bf3c56; --brand-display-soft:#fff1f4; --brand-display-ink:#8d243b; --brand-display-border:rgba(191,60,86,.18); }
.brand-page--go .brand-hero::after { background:linear-gradient(90deg,rgba(0,0,0,.92),rgba(0,0,0,.66),rgba(0,0,0,.18)); }
.brand-page--go .brand-hero h1, .brand-page--go .brand-hero .hero-copy p { color: #fff; }
.brand-page--go .brand-hero .hero-card { background:rgba(255,255,255,.95); }
.brand-page--go .brand-design-card { background:#161616; border-color:rgba(242,140,40,.42); box-shadow:none; }
.brand-page--go .brand-design-media { background:#0d0d0d; }
.brand-page--go .brand-design-copy { border-color:rgba(242,140,40,.25); }
.brand-page--go .brand-design-copy p { color:rgba(255,255,255,.7); }
.brand-page--fera .brand-design-card:nth-child(4) .brand-design-media,
.brand-page--fera .brand-design-card:nth-child(5) .brand-design-media { background:#1f573f; }
.brand-page--fera .brand-design-card:nth-child(4) .brand-design-media img,
.brand-page--fera .brand-design-card:nth-child(5) .brand-design-media img { max-width:96px; }

@media (max-width: 1000px) {
  .brand-design-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .about-category-grid, .about-brand-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .home-brand-feature-inner, .about-hero-inner, .about-split, .about-contact-grid, .brand-design-head { grid-template-columns: 1fr; }
  .home-brand-feature-media, .about-hero-media { min-height: 290px; }
  .home-brand-feature-copy, .about-hero-copy { padding: 44px 24px; }
  .home-brand-feature-copy h2, .about-hero-copy h1 { font-size: 32px; }
  .about-contact-grid { gap: 28px; }
  .wholesale-panel { padding: 36px 26px; }
  .brand-design-section { padding: 62px 0; }
  .brand-design-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .brand-design-media { height: 160px; padding: 12px; }
  .brand-design-copy { padding: 13px; }
  .brand-design-copy h3 { font-size: 15px; }
  .brand-design-copy p { font-size: 12px; }
}
@media (max-width: 460px) {
  .about-category-grid, .about-brand-wall, .brand-design-grid { grid-template-columns: 1fr; }
  .brand-design-media { height: 220px; }
}

/* GO! Solutions uses the original black / white / orange action contrast. */
.brand-page--go .btn-primary { background:#f28c28; color:#111; }
.brand-page--go .btn-secondary { border-color:rgba(255,255,255,.58); background:#fff; color:#111; }