/* Custom Font - Ningshu (Subset: 建良鵝肉 only) */
@font-face {
  font-family: 'Ningshu';
  src: url('fonts/ningshu-subset.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Global Reset & Typography */
:root {
  --primary-color: #B94E00;
  --primary-dark: #8B3A00;
  --accent-color: #D4AF37;
  /* Metallic Gold */
  --text-dark: #2C1810;
  --text-light: #5A4A42;
  --bg-color: #F9F5F0;
  --card-bg: #FFFFFF;
  --white: #FFFFFF;
  --error-color: #D32F2F;
  --success-color: #388E3C;
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 8px 16px rgba(44, 24, 16, 0.08);
  --shadow-lg: 0 12px 24px rgba(44, 24, 16, 0.12);
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --font-main: 'Outfit', 'Noto Sans TC', sans-serif;
}

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

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-main);
  background-color: var(--bg-color);
  color: var(--text-dark);
  line-height: 1.6;
}

/* Shop Closed State */
.shop-closed-banner {
  background: #dc3545;
  color: white;
  text-align: center;
  padding: 12px;
  font-weight: bold;
  position: sticky;
  top: 0;
  z-index: 9999;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  font-size: 1.1rem;
  letter-spacing: 0.5px;
}

.shop-closed-mode .qty-btn,
.shop-closed-mode .qty-input,
.shop-closed-mode .submit-btn {
  pointer-events: none;
  opacity: 0.6;
  filter: grayscale(1);
}

.shop-closed-mode .submit-btn {
  background: #999 !important;
  border-color: #999 !important;
  cursor: not-allowed !important;
}

.shop-closed-mode .product-card {
  opacity: 0.8;
}

h1,
h2,
h3,
h4,
h5 {
  font-weight: 700;
  line-height: 1.2;
}

button {
  cursor: pointer;
  font-family: inherit;
}

/* Container */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  position: relative;
  /* Context */
}

/* Spinner for Loading Buttons */
.spinner-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top-color: #fff;
  animation: spin 1s ease-in-out infinite;
  vertical-align: middle;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Header / Hero */
/* Hero Section Redesign - MAX CINEMATIC */
.hero-section {
  position: relative;
  /* Dark Cinematic Wood Table */
  background:
    linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.6) 100%),
    url('hero_table.jpg');
  background-size: cover;
  background-position: center;
  padding: 20px 0 0;
  /* Responsive Height Control */
  height: auto;
  min-height: 90vh;
  /* Ensure it's at least full screen but can grow */
  /* Remove max-height restriction */
  overflow: hidden;
  margin-bottom: 0;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
}

.hero-container {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
}

/* Top Bar */
.brand-bar {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: auto;
  /* Push to top */
  padding-top: 20px;
}

.brand-logo-small {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  border: none;
  /* Remove white border */
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.6);
}

.tracking-link-nav {
  /* margin-left: auto; Removed to allow flexible placement */
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  padding: 8px 15px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 20px;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  gap: 5px;
  background: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(5px);
}

.tracking-link-nav:hover {
  background: white;
  color: var(--accent-color);
}

/* Text Group for alignment */
.brand-text-group {
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Ensure the narrower text stretches to match the wider one */
  width: max-content;
}

.brand-name-mini {
  display: block;
  font-family: 'Ningshu', 'Noto Sans TC', sans-serif;
  font-weight: normal;
  /* Restore to original thin font */
  font-size: 1.6rem;
  color: #fff;
  letter-spacing: 12px;
  /* Widened to match English width */
  margin-right: -12px;
  /* Compensate for last char spacing */
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9);
  line-height: 1.1;
  text-align: center;
  /* Center align instead of huge justify */
}

.brand-name-en {
  display: block;
  font-family: 'Ningshu', 'Noto Sans TC', sans-serif;
  font-size: 0.85rem;
  /* Smaller size to match width */
  color: #fff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9);
  text-align: center;
  margin-top: 4px;
  /* Space between CH and EN */
  opacity: 0.9;
  letter-spacing: 1px;
  /* Natural spacing to match width roughly */
}

/* Footer Brand Group */
.footer-brand-group {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 20px;
}

.footer-logo {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: none;
}

.footer-text-group {
  display: flex;
  flex-direction: column;
}

.footer-brand-zh {
  font-family: 'Ningshu', 'Noto Sans TC', sans-serif;
  font-size: 2rem;
  font-weight: normal;
  color: #fff;
  letter-spacing: 12px;
  /* Widened to match English width */
  margin-right: -12px;
  /* Compensate for last char spacing */
  line-height: 1.1;
  text-align: center;
}

.footer-brand-en {
  font-family: 'Ningshu', 'Noto Sans TC', sans-serif;
  font-size: 1rem;
  color: #fff;
  /* Match accent color */
  opacity: 0.8;
  letter-spacing: 1px;
}

/* Content Layout */
.hero-content {
  display: grid;
  grid-template-columns: 45% 55%;
  align-items: center;
  /* Remove fixed height, let content drive it */
  min-height: 60vh;
  padding-bottom: 40px;
}

/* Text Side */
.hero-text {
  text-align: left;
  z-index: 20;
  /* Above images */
  position: relative;
  /* Ensure it stacks correctly */
}

h1.brand-title {
  /* Fluid Scalable Type: min 2rem, pref 5vw, max 5rem */
  font-size: clamp(2.5rem, 6vw, 5rem);
  color: #fff;
  margin-bottom: 20px;
  line-height: 1.2;
  /* More breathing room for wrapped lines */
  text-shadow: 0 5px 30px rgba(0, 0, 0, 0.9);
  letter-spacing: 2px;
  word-break: keep-all;
  /* CJK: try not to break words mid-phrase */
}

p.brand-tagline {
  font-size: clamp(1rem, 2vw, 1.5rem);
  color: #f0f0f0;
  margin-bottom: 40px;
  max-width: 90%;
  text-shadow: 0 3px 15px rgba(0, 0, 0, 0.9);
  font-weight: 500;
  line-height: 1.6;
}

.cta-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 15px 40px;
  background: linear-gradient(135deg, var(--primary-color), #8B3A00);
  color: white;
  text-decoration: none;
  border-radius: 60px;
  font-weight: 800;
  font-size: clamp(1.2rem, 3vw, 1.5rem);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  border: 3px solid rgba(255, 255, 255, 0.15);
  transition: all 0.3s;
  max-width: 100%;
  /* Prevent overflowing screen */
  text-align: center;
  white-space: nowrap;
  /* Try to keep single line */
}

.cta-button:hover {
  transform: scale(1.1);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.7);
  filter: brightness(1.2);
}

/* Visual Side - Explosive Scale */
.hero-visuals {
  position: relative;
  height: 100%;
  width: 100%;
  pointer-events: none;
  /* Allow clicks to pass through images to buttons behind/under */
}

.hero-plate {
  position: absolute;
  width: 180%;
  /* MASSIVE */
  top: 10%;
  left: -20%;
  object-fit: contain;
  /* Realistic Grounding Shadow: Dark black with high blur */
  filter: drop-shadow(0 30px 40px #000000);
  transform: rotate(-15deg);
  z-index: 10;
}

.hero-chopsticks {
  position: absolute;
  top: 5%;
  right: -25%;
  width: 800px;
  /* GIGANTIC */
  filter: drop-shadow(30px 40px 50px rgba(0, 0, 0, 0.6));
  z-index: 30;
  /* Higher than text z-index:20 */
  transform: rotate(15deg);
  animation: floatChopsticksCinematic 8s ease-in-out infinite;
}

@keyframes floatChopsticksCinematic {

  0%,
  100% {
    transform: translateY(0) rotate(15deg);
  }

  50% {
    transform: translateY(-30px) rotate(18deg);
  }
}

/* Mobile Responsive - The Vertical Poster Look */
@media (max-width: 900px) {
  .hero-section {
    height: auto;
    min-height: 90vh;
    /* Fill screen on mobile too */
    padding: 20px 20px 0;
    align-items: flex-start;
  }

  .hero-content {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    gap: 0;
    height: auto;
    width: 100%;
  }

  .brand-bar {
    justify-content: center;
    margin-bottom: 20px;
  }

  .hero-text {
    text-align: center;
    order: 1;
    margin-top: 20px;
  }

  h1.brand-title {
    /* Use VW to strictly bound width on mobile regardless of OS font setting */
    font-size: clamp(2rem, 12vw, 3.5rem);
    word-break: break-all;
    /* Ensure even long words break if needed */
  }

  p.brand-tagline {
    font-size: clamp(1rem, 4vw, 1.2rem);
    margin: 0 auto 30px;
  }

  .cta-button {
    white-space: normal;
    /* Allow text to wrap if huge */
    max-width: 90%;
    line-height: 1.2;
    padding: 15px 30px;
  }

  /* Visuals move to bottom and bleed out */
  .hero-visuals {
    order: 2;
    height: 360px;
    /* Reduced height to remove empty space below plate */
    overflow: visible;
    margin-bottom: -20px;
    /* Less negative margin to push board down */
  }

  .hero-plate {
    width: 200%;
    /* Bigger for dramatic effect */
    left: -50%;
    /* Center the 200% width plate */
    top: -60px;
    /* Move up for impact */
    max-width: none;
    transform: rotate(0deg);
  }
}

/* Additional breakpoint for mobile screens */
@media (max-width: 650px) {
  .hero-visuals {
    height: 400px;
    /* Taller to show more of the dramatic plate */
  }

  .hero-plate {
    width: 220%;
    /* Even bigger for maximum drama on mobile */
    left: -60%;
    /* Adjusted center */
    top: -30px;
  }

  .hero-chopsticks {
    /* Make left edge close to center */
    right: auto;
    left: 50%;
    /* Starts from near middle to avoid being too left */
    width: 380px;
    /* Slightly smaller to fit */
    top: -50px;
    transform: rotate(45deg);
  }
}

/* Breakpoint for medium tablets (650-850px) */
/* Breakpoint for medium tablets (650-850px) */
@media (min-width: 651px) and (max-width: 850px) {
  .hero-chopsticks {
    right: -50px;
    /* Anchor to right edge instead of trying to center via left */
    left: auto;
    /* Reset left */
    width: 450px;
    /* Make it long enough to reach in */
    top: -60px;
    transform: rotate(30deg);
    /* Slightly less rotation to reach further in */
  }
}

/* Notices & Countdown Board Redesign */
.notice-board {
  position: relative;
  background: rgba(255, 255, 255, 0.90);
  /* Transparent white */
  backdrop-filter: blur(8px);
  /* Glassmorphism effect */
  /* Clean white card */
  /* Replaces border-left with a top accent */
  border-top: 4px solid var(--primary-color);
  padding: 0;
  /* Clear padding, use inner elements */
  margin: -60px auto 60px;
  max-width: 900px;
  border-radius: var(--radius-md);
  /* Consistent rounding */
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  z-index: 50;
  overflow: hidden;
  /* For inner banner corners */
  display: flex;
  flex-direction: column;
}

.notice-header {
  padding: 24px 30px 10px;
  text-align: center;
}

.notice-title-text {
  color: var(--primary-color);
  font-size: 1.4rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  letter-spacing: 1px;
}

.notice-icon {
  color: var(--accent-color);
}

/* Timeline Layout for Dates */
.notice-timeline {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 20px 40px 30px;
  flex-wrap: wrap;
  /* Safe wrapping on small mobile */
  gap: 20px;
}

.timeline-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-width: 140px;
}

.timeline-label {
  font-size: 0.9rem;
  color: #888;
  margin-bottom: 6px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.timeline-date {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-dark);
  font-family: 'Outfit', sans-serif;
  /* Use number friendly font */
}

/* Vertical divider between dates */
.timeline-divider {
  width: 1px;
  height: 40px;
  background-color: #eee;
  display: block;
}

/* Shipping Banner at Bottom */
.notice-shipping-banner {
  background: #FFF8F0;
  /* Soft orange/cream background */
  padding: 16px 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  border-top: 1px solid #FFE0B2;
}

.shipping-icon-box {
  background: white;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-color);
  box-shadow: 0 2px 8px rgba(185, 78, 0, 0.1);
}

.shipping-text {
  font-size: 1.05rem;
  color: var(--text-dark);
}

.shipping-title {
  font-weight: 700;
  color: var(--primary-dark);
}

.price-highlight {
  color: #D32F2F;
  /* Red for emphasis */
  font-weight: 800;
  font-size: 1.2rem;
}

.sub-text {
  color: #777;
  font-size: 0.9rem;
  margin-left: 5px;
}

/* Mobile Adjustments */
@media (max-width: 768px) {
  .notice-timeline {
    flex-direction: column;
    gap: 15px;
    padding: 20px;
  }

  .timeline-divider {
    width: 60px;
    height: 1px;
    /* Horizontal line on mobile */
  }

  .notice-shipping-banner {
    flex-direction: column;
    text-align: center;
    padding: 20px;
  }

  .sub-text {
    display: block;
    /* Break line on mobile */
    margin: 5px 0 0;
  }

  .timeline-item {
    width: 100%;
    flex-direction: row;
    justify-content: space-between;
    border-bottom: 1px dashed #eee;
    padding-bottom: 8px;
  }

  .timeline-divider {
    display: none;
    /* Hide standard dividers in favor of border-bottom */
  }

  .timeline-item:last-child {
    border-bottom: none;
  }
}

/* Product Section */
.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
  margin-bottom: 60px;
}

.product-card {
  background: var(--card-bg);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border: 1px solid rgba(0, 0, 0, 0.02);
  display: flex;
  flex-direction: column;
}

.product-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
}

.product-image {
  width: 100%;
  height: 220px;
  object-fit: cover;
}

.product-info {
  padding: 24px;
  flex: 1;
  /* Pushes footer down */
  display: flex;
  flex-direction: column;
}

.product-title {
  font-size: 1.35rem;
  margin-bottom: 8px;
  color: var(--text-dark);
}

.product-price {
  font-size: 1.2rem;
  color: var(--primary-color);
  font-weight: 700;
  margin-bottom: 16px;
}

.price-original {
  text-decoration: line-through;
  color: #999;
  font-size: 0.9em;
  font-weight: 400;
  margin-left: 8px;
}

.product-desc {
  font-size: 0.9rem;
  color: var(--text-light);
  margin-bottom: 20px;
  flex-grow: 1;
}

/* Stock Warning - Low Inventory Alert */
.stock-warning {
  display: inline-block;
  font-size: 0.8rem;
  color: #E65100;
  background: linear-gradient(135deg, #FFF3E0 0%, #FFE0B2 100%);
  padding: 4px 12px;
  border-radius: 20px;
  font-weight: 600;
  margin-bottom: 12px;
  border: 1px solid #FFCC80;
  animation: pulse-stock 2s ease-in-out infinite;
}

@keyframes pulse-stock {

  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.85;
    transform: scale(1.02);
  }
}

/* Sold Out State */
.stock-soldout {
  display: inline-block;
  font-size: 0.85rem;
  color: #fff;
  background: linear-gradient(135deg, #757575 0%, #424242 100%);
  padding: 5px 14px;
  border-radius: 20px;
  font-weight: 700;
  margin-bottom: 12px;
  letter-spacing: 1px;
}

.product-card.sold-out {
  position: relative;
}

.product-card.sold-out .product-image {
  filter: grayscale(70%) brightness(0.9);
}

.product-card.sold-out .product-title,
.product-card.sold-out .product-price,
.product-card.sold-out .product-desc {
  opacity: 0.6;
}

.sold-out-control {
  background: #f0f0f0 !important;
  justify-content: center !important;
}

.sold-out-text {
  color: #888;
  font-weight: 500;
  font-size: 0.95rem;
}

/* Stock Alert Toast */
.stock-alert-toast {
  position: fixed;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: linear-gradient(135deg, #37474F 0%, #263238 100%);
  color: #fff;
  padding: 12px 20px;
  border-radius: 30px;
  font-size: 0.95rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
  z-index: 9999;
  opacity: 0;
  transition: all 0.3s ease;
}

.stock-alert-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.stock-alert-toast svg {
  color: #FFB74D;
  flex-shrink: 0;
}

.promo-tag {
  display: inline-block;
  background-color: #FFF3E0;
  color: #D35400;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: 10px;
}

/* Quantity Control */
.quantity-control {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #F5F5F5;
  border-radius: 30px;
  padding: 4px;
}

.qty-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: var(--white);
  color: var(--text-dark);
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.qty-btn:hover {
  background: var(--primary-color);
  color: white;
}

.qty-input {
  width: 50px;
  text-align: center;
  border: none;
  background: transparent;
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--text-dark);
}

/* Order Form Section */
.order-section {
  background: var(--card-bg);
  padding: 40px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  margin-bottom: 80px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.section-title {
  text-align: center;
  margin-bottom: 30px;
  font-size: 1.8rem;
  color: var(--text-dark);
}

.form-group {
  margin-bottom: 24px;
}

.form-label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: var(--text-dark);
}

.form-input,
.form-select {
  width: 100%;
  max-width: 100%;
  /* Prevent overflow on iOS */
  box-sizing: border-box;
  padding: 12px 16px;
  border: 1px solid #E0E0E0;
  border-radius: var(--radius-sm);
  font-size: 1rem;
  font-family: inherit;
  transition: border-color 0.2s;
  background-color: #fff;
  /* Ensure white background */
  appearance: none;
  /* Remove default styling */
  -webkit-appearance: none;
  /* Fix iOS styling */
}

.form-input:focus,
.form-select:focus {
  outline: none;
  border-color: var(--primary-color);
}

.radio-group {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

/* Improved Store Links */
.store-search-help {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.store-link {
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 20px;
  font-size: 0.85rem;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.2s ease;
  border: 1px solid transparent;
}

.link-711 {
  background-color: #fff0f0;
  color: #E11F26;
  border-color: #ffd0d0;
}

.link-711:hover {
  background-color: #ffe0e0;
  transform: translateY(-1px);
}

.link-fm {
  background-color: #f0fff4;
  color: #00A84D;
  border-color: #d0f0d8;
}

.link-fm:hover {
  background-color: #e0ffe8;
  transform: translateY(-1px);
}

/* Polished Radio Option */
.radio-option {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 12px 18px;
  background: #fff;
  border: 2px solid #EEE;
  /* Thicker border */
  border-radius: 12px;
  /* Smooth corners */
  transition: all 0.2s ease;
  font-weight: 500;
}

.radio-option:hover {
  background: #fffaf5;
  border-color: #FFDAB9;
}

.radio-option input[type="radio"]:checked+span {
  font-weight: 700;
  color: var(--primary-color);
}

/* Quantity Control - Tactile Feel */
.quantity-control {
  background: #f0f0f0;
  padding: 5px;
  border-radius: 40px;
  /* Capsule shape */
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
  /* Inner shadow depth */
}

.qty-btn {
  width: 38px;
  height: 38px;
  background: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  font-weight: bold;
}

.qty-btn:active {
  transform: scale(0.92);
}

/* Product Card Polish */
.product-card {
  border: none;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.08), 0 5px 10px -5px rgba(0, 0, 0, 0.04);
}

.product-image {
  transition: transform 0.5s ease;
}

.product-card:hover .product-image {
  transform: scale(1.05);
  /* Subtle zoom */
}

.radio-option input[type="radio"]:checked {
  accent-color: var(--primary-color);
}

.sub-options {
  margin-top: 15px;
  padding: 15px;
  background: #FAFAFA;
  border-radius: var(--radius-sm);
  border: 1px dashed #DDD;
  display: none;
  /* JS toggles this */
}

.sub-options.active {
  display: block;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Order Summary */
.order-summary {
  background: #FFF8F0;
  padding: 20px;
  border-radius: var(--radius-sm);
  margin-bottom: 30px;
}

.summary-items {
  margin-bottom: 15px;
}

.summary-item-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 0.95rem;
  color: var(--text-dark);
}

.summary-item-name {
  flex: 1;
}

.summary-item-price {
  margin-left: 10px;
  font-weight: 500;
}

.summary-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
  color: var(--text-light);
}

.summary-row.total {
  border-top: 2px dashed rgba(185, 78, 0, 0.2);
  padding-top: 15px;
  margin-top: 15px;
  color: var(--primary-dark);
  font-weight: 700;
  font-size: 1.3rem;
  align-items: flex-end;
}

.submit-btn {
  width: 100%;
  padding: 16px;
  background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
  color: white;
  border: none;
  border-radius: var(--radius-md);
  font-size: 1.2rem;
  font-weight: 700;
  box-shadow: 0 4px 15px rgba(185, 78, 0, 0.3);
  transition: transform 0.2s, box-shadow 0.2s;
}

.submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(185, 78, 0, 0.4);
}

.submit-btn:disabled {
  background: #ccc;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Footer */
footer {
  /* Replaced by .site-footer */
  padding: 0;
  border: none;
  color: inherit;
  background: transparent;
}

.site-footer {
  background: #2C1810;
  /* Dark brown matches brand */
  color: #e0e0e0;
  padding: 50px 0 30px;
  margin-top: 60px;
  font-size: 0.95rem;
  border-top: 5px solid var(--primary-color);
}

.footer-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 40px;
}

.footer-info {
  flex: 1;
  min-width: 250px;
}

.footer-info a {
  color: #fff;
  text-decoration: none;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.3);
  transition: all 0.2s;
}

.footer-info a:hover {
  color: var(--accent-color);
  border-bottom-color: var(--accent-color);
}

.footer-brand {
  font-family: 'Ningshu', 'Noto Sans TC', sans-serif;
  font-size: 2rem;
  font-weight: normal;
  /* Ensure thin font */
  margin-bottom: 15px;
  color: var(--accent-color);
  letter-spacing: 2px;
}

.footer-info p {
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.copyright {
  margin-top: 30px;
  font-size: 0.85rem;
  color: #888;
}

.footer-social {
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}





@media (max-width: 700px) {
  .footer-content {
    flex-direction: column;
    text-align: center;
    align-items: center;
  }

  .footer-info p {
    justify-content: center;
  }

  .footer-social {
    width: 100%;
    max-width: 300px;
  }
}

/* Developer Credit */
.developer-credit {
  width: 100%;
  text-align: center;
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.9rem;
  color: #aaa;
  letter-spacing: 0.5px;
  padding-bottom: 70px;
}

.developer-credit a {
  color: var(--accent-color);
  font-weight: 600;
  text-decoration: none;
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.3s ease;
  display: inline-block;
}

.developer-credit a:hover {
  background: var(--accent-color);
  color: #2C1810;
  /* Dark background color for contrast */
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.4);
  transform: translateY(-2px);
}

/* Compact Hero Mode for Success Page */
.hero-section.compact {
  min-height: auto !important;
  height: auto !important;
  padding: 15px 0;
  margin-bottom: 20px;
  background-image:
    linear-gradient(to bottom, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.85) 100%),
    url('hero_table.jpg');
  align-items: center;
}

.hero-section.compact .hero-content {
  display: none !important;
}

.hero-section.compact .brand-bar {
  padding-top: 0;
  margin-bottom: 0;
  justify-content: center;
  width: 100%;
}

.hero-section.compact .brand-name-mini {
  font-size: 1.5rem;
}

.hero-section.compact .brand-logo-small {
  width: 50px;
  height: 50px;
  border-width: 2px;
}

/* Responsive */
@media (max-width: 768px) {
  h1.brand-title {
    font-size: 2rem;
  }

  .order-section {
    padding: 25px;
  }
}

/* Ultra-Wide Screen Fix: Anchor chopsticks to the right edge of viewport */
@media (min-width: 1400px) {
  .hero-chopsticks {
    right: calc(50% - 900px);
    /* Keeps it anchored relative to center but pushes it further right as screen widens */
    /* Alternatively, anchor to viewport right but accounting for container max-width context if needed. 
       Actually, since .hero-chopsticks is absolute inside .hero-container (max 1200px), 
       but we want it relative to the SCREEN edge for ultra-wide feel?
       Wait, .hero-container is max-width: 1200px with overflow:visible usually?
       Let's check .hero-section overflow settings.
       .hero-section has overflow: hidden.
       .hero-container has width: 100% and max-width: 1200px.
       The chopsticks are absolute to .hero-container.
       On ultra-wide screens, the container is centered, so the "right: -25%" is relative to the 1200px container.
       This means it stays at a fixed distance from the center.
       If the user feels it's "floating" (悬空), it might be too far from the edge of the physical screen?
       OR too far left?
       The user image shows it floating in the middle of the wood texture on the right.
       
       Let's try to push it to the right edge of the viewport.
       To do this inside a centered container:
       right: calc( -1 * ( (100vw - 100%) / 2 ) - 50px );
       Explanation: (100vw - 100%) / 2 is the distance from container edge to viewport edge.
       We negate it to go outwards to the right.
    */
    right: calc(-1 * ((100vw - 1200px) / 2) + 50px);
    /* Fallback for when calc matches constraints, but let's be safe */
    max-width: 900px;
    /* Cap size if needed */
  }
}

/* Floating Cart Button Styles */
/* Floating Cart Button Styles */
.floating-cart {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
  color: white;
  padding: 8px 16px;
  border-radius: 50px;
  box-shadow: 0 8px 20px rgba(185, 78, 0, 0.4);
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  z-index: 9999;
  transition: all 0.3s ease;
  font-family: var(--font-main);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(5px);

  /* Entrance Animation */
  animation: floatUp 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) both;
}

@keyframes floatUp {
  from {
    opacity: 0;
    transform: translateY(100px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.floating-cart:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 25px rgba(185, 78, 0, 0.5);
}

.floating-cart:active {
  transform: scale(0.98);
}

/* Celebration Mode */
.floating-cart.celebrate {
  background: linear-gradient(135deg, #2E7D32, #43A047);
  /* Green Gradient */
  box-shadow: 0 10px 30px rgba(46, 125, 50, 0.5);
  animation: pulseCelebration 2s infinite;
}

@keyframes pulseCelebration {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.7);
  }

  50% {
    transform: scale(1.05);
    box-shadow: 0 0 0 15px rgba(76, 175, 80, 0);
  }

  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(76, 175, 80, 0);
  }
}

.cart-icon {
  font-size: 1.25rem;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.cart-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.cart-shipping-text {
  font-size: 0.95rem;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Mobile Responsiveness for Floating Cart */
@media (max-width: 768px) {
  .floating-cart {
    bottom: 15px;
    right: 15px;
    padding: 6px 14px;
    gap: 6px;
  }

  .cart-icon {
    font-size: 1.4rem;
  }

  .cart-shipping-text {
    font-size: 1rem;
  }
}

/* Update for Product Price Row */
.product-price-row {
  display: flex;
  align-items: baseline;
  /* Align text baselines */
  gap: 10px;
  margin-top: 5px;
  margin-bottom: 8px;
}

.product-price {
  font-size: 1.25rem;
  font-weight: 800;
  color: #bf360c;
}

/* Adjust promo tag to be inline */
.promo-tag {
  display: inline-block;
  background: #FFF3E0;
  color: #E65100;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 0;
  vertical-align: middle;
  line-height: normal;
}