/* ========================================
   Responsive Design - Mobile Adaptations
   Max-width: 768px
======================================== */

/* Fix: Hide Mobile Drawer on Desktop */
.mobile-drawer,
.mobile-drawer-backdrop {
  display: none !important;
}

@media (max-width: 768px) {

  /* --- Navigation --- */
  /* Hide standard nav elements */
  .header .nav,
  .nav-activity-link,
  .header .header-actions {
    display: none !important;
  }

  /* Show Nav Toggle (Hamburger) */
  .nav-toggle {
    display: block !important;
    position: relative;
    z-index: 1100;
    /* Above drawer backdrop */
  }

  /* Global Overflow Fix */
  html,
  body {
    width: 100%;
    overflow-x: hidden;
    padding: 0;
    margin: 0;
  }

  /* Reset Header padding for mobile */
  .header-inner {
    padding: 0 1rem;
    height: 60px;
  }

  /* Hero Section - 4:5 Aspect Ratio & Full Width */
  /* Hero Section - 85vh Height & Full Width */
  .hero {
    padding-top: 60px !important;
    /* Offset for fixed header */
    width: 100%;
    overflow: hidden;
  }

  .hero-fullscreen {
    height: auto !important;
    min-height: auto !important;
  }

  .hero-bg {
    width: 100%;
    height: 85vh !important;
    aspect-ratio: auto !important;
    position: relative;
  }

  .hero-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
  }

  .hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    /* Ensure readability */
  }

  /* Centered Content */
  .hero-content,
  .hero-fullscreen .hero-content {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    bottom: auto !important;
    right: auto !important;
    width: 100%;
    text-align: center;
    padding: 0 1rem;
    z-index: 2;
  }

  /* Scroll Indicator - Bottom 20px */
  .scroll-indicator {
    bottom: 20px !important;
    z-index: 10;
  }

  /* --- Typography Scaling (Mobile -40%) --- */
  .hero-title {
    font-size: 2.4rem !important;
    /* ~38px */
    margin-bottom: 0.25rem !important;
  }

  .hero-subtitle {
    font-size: 0.9rem !important;
    letter-spacing: 0.2em !important;
    margin-bottom: 0.5rem !important;
  }

  .hero-description {
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
    letter-spacing: 0.15em !important;
    padding: 0 0.5rem;
    margin-bottom: 1.5rem !important;
  }

  .hero-tagline {
    font-size: 0.9rem !important;
    margin-bottom: 0.5rem !important;
  }

  /* Global Headings override */
  h1 {
    font-size: 1.8rem !important;
  }

  h2 {
    font-size: 1.5rem !important;
  }

  /* --- Section Spacing Optimization (Mobile Compact view) --- */
  .about,
  .brand-story,
  .philosophy,
  .testimonials,
  .contact {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }

  .about-inner {
    gap: 1.5rem !important;
  }

  .about-content,
  .story-content {
    padding: 1rem !important;
    text-align: center;
  }

  /* Remove bottom margin from last element to ensure visual symmetry */
  .about-content>*:last-child,
  .story-content>*:last-child {
    margin-bottom: 0 !important;
  }

  /* --- Content Typography Optimization --- */
  /* Title: "THE ART OF INDULGENCE" */
  .about-title,
  .story-title {
    font-size: 1.5rem !important;
    line-height: 1.2 !important;
    margin-bottom: 1.5rem !important;
    /* Reduced from 5rem (Critical Fix for Green Box) */
  }

  /* Text: "推開這扇門..." */
  .about-text,
  .story-text {
    font-size: 0.9rem !important;
    /* ~14px */
    line-height: 1.6 !important;
    /* Reduced from 4.0 */
    letter-spacing: 0.1em !important;
  }

  .section-tag {
    margin-bottom: 0.5rem !important;
  }

  /* --- Brand Story specific --- */
  .story-grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }

  .story-image {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto 1.5rem !important;
    /* Center and Gap */
    float: none !important;
  }

  /* --- Video Toggle Button (Mobile Circle) --- */
  .video-toggle-btn {
    top: 90px !important;
    /* Slightly below header */
    left: 15px !important;
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    /* Circle */
    justify-content: center !important;
    text-align: center;
    background: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid var(--color-gold) !important;
  }

  /* --- Hero / Page Header Compact (Mobile) --- */
  .page-hero {
    padding: 60px 0 20px !important;
    /* Extremely Compact */
    min-height: auto !important;
  }

  .page-hero .section-title {
    font-size: 1.35rem !important;
    /* Smaller title */
    line-height: 1.1 !important;
    margin-bottom: 0.25rem !important;
    /* Tighter gap to subtitle */
  }

  .page-hero .section-subtitle {
    font-size: 0.9rem !important;
    line-height: 1.3 !important;
    /* Tighter line height */
    margin-bottom: 0 !important;
  }

  .all-products {
    padding-top: 10px !important;
  }

  .all-products .container {
    padding-left: 4px !important;
    padding-right: 4px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .products-grid {
    gap: 8px !important;
    margin: 0 !important;
    /* align-items: stretch (default) enforces equal height */
  }

  .product-card {
    margin: 0 !important;
    padding: 15px 10px 5px 10px !important;
    /* Force tight padding */
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    /* Fill the grid cell */
  }

  .product-name {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    padding: 0 4px !important;
    height: 2.8rem !important;
    /* Reserve space for 2 lines */
    line-height: 1.3 !important;
    margin-bottom: 4px !important;
  }

  .product-card .btn-add-cart {
    margin-top: auto !important;
    /* Push button to bottom edge */
    margin-bottom: 0 !important;
  }

  /* --- Floating Nav (Mobile Optimization) --- */
  .floating-nav {
    display: flex !important;
    position: fixed !important;
    /* Fixed positioning */
    visibility: visible !important;
    /* Force visibility */
    opacity: 1 !important;
    /* Force opacity */
    bottom: 20px !important;
    right: 15px !important;
    gap: 0 !important;
    flex-direction: column !important;
    z-index: 2147483647 !important;
    /* Max Z-Index */
  }

  .floating-nav button {
    width: 40px !important;
    height: 40px !important;
    font-size: 1.1rem !important;
    margin-top: 8px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
  }


  .floating-nav-btn {
    width: 40px !important;
    height: 40px !important;
    padding: 8px !important;
    /* Smaller icon padding */
  }

  .floating-nav-btn svg {
    width: 20px !important;
    height: 20px !important;
  }

  /* --- Final Mobile Floating Nav Styles --- */
  #floatingNav.floating-nav {
    display: flex !important;
    position: fixed !important;
    bottom: 20px !important;
    right: 15px !important;
    z-index: 2147483647 !important;
    flex-direction: column !important;
    gap: 0 !important;
    background: transparent !important;
  }

  /* Target both button elements and anchor tags with .floating-nav-btn class */
  #floatingNav button,
  #floatingNav .floating-nav-btn {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 45px !important;
    height: 45px !important;
    border-radius: 50% !important;
    background: #fff !important;
    color: var(--color-gold-dark, #b8860b) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    border: none !important;
    justify-content: center !important;
    align-items: center !important;
    margin-top: 10px !important;
    padding: 0 !important;
  }

  /* Ensure SVG is sized correctly within the button */
  #floatingNav .floating-nav-btn svg,
  #floatingNav button svg {
    width: 20px !important;
    height: 20px !important;
    stroke-width: 2px !important;
  }

  .floating-nav-label {
    display: none !important;
    /* Ensure labels hidden on mobile if any */
  }

  /* --- Price Typography Fix --- */
  .product-price-container {
    align-items: center !important;
    /* Center align for clean look */
    min-height: 40px !important;
    /* Reserve space for 2 price lines to avoid zigzag */
    justify-content: center !important;
    /* Center vertically if only 1 line */
  }

  .product-price {
    font-size: 1.15rem !important;
    /* Larger Sale Price */
    color: var(--color-gold, #C9A962) !important;
    font-weight: 600 !important;
    line-height: 1.2;
    /* Relax line height */
    margin-bottom: 2px !important;
    /* Slightly separate prices */
  }

  .product-original-price {
    font-size: 0.85rem !important;
    /* Smaller Original Price */
    color: #999 !important;
    text-decoration: line-through !important;
    text-decoration-color: #ff0000 !important;
    /* Explicit Red Line */
    -webkit-text-decoration-color: #ff0000 !important;
    /* Webkit support */
    line-height: 1;
    margin-top: 0 !important;
  }

  .video-toggle-text {
    display: none !important;
  }

  .video-toggle-icon {
    font-size: 1.2rem !important;
    margin: 0 !important;
    transform: translateY(1px);
    /* Optical center */
  }

  /* --- Philosophy Section (Horizontal Scroll Snap) --- */
  .philosophy-grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory;
    gap: 1rem !important;
    padding: 0 1rem 2rem 1rem !important;
    /* Bottom padding to avoid cut */
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE/Edge */
    margin-top: 1rem !important;
  }

  .philosophy-grid::-webkit-scrollbar {
    display: none;
  }

  .philosophy-item {
    min-width: 85vw !important;
    /* 85% Width */
    flex: 0 0 auto;
    scroll-snap-align: center;
    margin-bottom: 0 !important;
    padding: 2rem 1.5rem !important;
  }

  /* --- Mobile Drawer Menu --- */
  .mobile-drawer-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
    display: block !important;
    /* Override global hide */
  }

  .mobile-drawer-backdrop.active {
    opacity: 1;
    visibility: visible;
  }

  .mobile-drawer {
    position: fixed;
    top: 100px;
    right: 0;
    /* Align to right edge */
    width: 130px;
    /* 30% of mobile screen (approx) */
    max-width: 40%;
    height: auto;
    max-height: 70vh;
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    z-index: 1001;
    transform: translateX(110%);
    /* Start hidden (move right) */
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: -8px 8px 30px rgba(0, 0, 0, 0.15);
    display: flex !important;
    /* Override global hide */
    flex-direction: column;
    padding-top: 0;
    border-radius: 20px 0 0 20px;
    /* Flat on right */
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-right: none;
    overflow: hidden;
  }

  .mobile-drawer.active {
    transform: translateX(0);
    /* Move to visible position */
  }

  .mobile-drawer-header {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 1rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  }

  .mobile-drawer-close {
    background: none;
    border: none;
    font-size: 2rem;
    color: var(--color-text, #333);
    cursor: pointer;
    line-height: 1;
  }

  .mobile-drawer-content {
    flex: 1;
    overflow-y: auto;
    padding: 70px 0 1rem;
    /* Top padding > header height (60px) */
  }

  /* --- Mobile Drawer Navigation List --- */
  /* --- Mobile Drawer Navigation List --- */
  .mobile-drawer ul {
    display: flex !important;
    flex-direction: column !important;
    padding: 0 8px 20px !important;
    /* Reduced padding further */
    list-style: none !important;
    width: 100%;
  }

  .mobile-drawer li {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    padding: 0;
    /* Reset padding, handle in link/summary */
  }

  .mobile-drawer li:last-child {
    border-bottom: none;
  }

  /* Main Links */
  .mobile-drawer a.mobile-nav-link {
    display: block !important;
    width: 100%;
    font-size: 1rem !important;
    color: #333 !important;
    text-decoration: none !important;
    display: block !important;
    width: 100%;
    font-size: 1rem !important;
    color: #333 !important;
    text-decoration: none !important;
    padding: 15px 5px !important;
    /* Touch area */
    border: none !important;
    white-space: nowrap;
    /* Prevent wrapping */
    overflow: hidden;
    text-overflow: ellipsis;
    /* Ellipsis just in case */
    font-weight: 500;
  }

  .mobile-drawer a.mobile-nav-link:hover {
    color: var(--color-gold, #C9A962) !important;
  }

  /* Collapsible (Accordion) */
  .mobile-nav-summary {
    padding: 15px 5px;
    font-size: 0.9rem;
    color: #cb2027 !important;
    /* Red for Activity Zone */
    font-weight: 600;
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .mobile-nav-summary::-webkit-details-marker {
    display: none;
    /* Hide Chrome/Safari marker */
  }

  /* Arrow Icon */
  .mobile-nav-summary::after {
    content: '▾';
    font-size: 1.2rem;
    transition: transform 0.3s ease;
  }

  details[open] .mobile-nav-summary::after {
    transform: rotate(180deg);
  }

  /* Sublist */
  .mobile-nav-sublist {
    padding: 0 0 10px 15px !important;
    /* Indent */
    margin: 0 !important;
    gap: 0 !important;
  }

  .mobile-nav-sublist li {
    border-bottom: none !important;
    /* No borders for sub-items */
    padding: 0 !important;
  }

  .mobile-nav-sublist a.mobile-nav-link {
    padding: 10px 0 !important;
    font-size: 0.95rem !important;
    color: #555 !important;
    font-weight: 400;
  }

  .mobile-drawer-footer {
    padding: 1rem 2rem;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
  }

  /* --- Product Grid --- */
  .products-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    /* 2 Columns */
    gap: 12px !important;
    padding: 0 8px;
    /* Small padding on edges */
  }

  .product-card {
    padding: 12px !important;
  }

  .product-name {
    font-size: 1rem !important;
  }

  .product-desc {
    display: none;
    /* Hide description on mobile to save space */
  }

  .btn-add-cart {
    padding: 0.5rem !important;
    font-size: 0.85rem !important;
  }

  /* Adjust Section Titles */
  .section-title {
    font-size: 1.8rem !important;
  }

  /* Hide Floating Nav (the side bar) on mobile if standard drawer is enough, 
      OR keep it. Task requirement says: "display: none" for standard header nav, 
      but Floating component usually stays or adapts. 
      Let's keep floating nav hidden if drawer covers everything, OR adjust. 
      Usually floating nav (side shortcuts) is annoying on mobile. */
  .floating-nav {
    display: none !important;
  }
}

/* Extra small screens */
@media (max-width: 380px) {
  .products-grid {
    grid-template-columns: 1fr !important;
    /* 1 Column for very small screens if needed, but requirements said 2 is preferred. Keep 2 unless broken. */
    /* Let's stick to 2 columns as requested for standard mobile */
  }
}