/* ============================================================
   NEXON STOREFRONT - Complete CSS Design System
   Extracted from the Next.js/Tailwind storefront
   ============================================================ */

/* ---- Google Font: DM Sans ---- */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');

/* ---- CSS Reset ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { line-height: 1.5; -webkit-font-smoothing: antialiased; }
img, picture, video, canvas, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }

/* ---- CSS Variables (Design Tokens) ---- */
:root {
  /* Primary Colors */
  --primary: #5AAFE2;
  --primary-hover: #4a9fd2;
  --primary-light: rgba(90, 175, 226, 0.1);
  --accent: #5AAFE2;

  /* Grey Scale */
  --grey-0: #FFFFFF;
  --grey-5: #F9FAFB;
  --grey-10: #F3F4F6;
  --grey-20: #E5E7EB;
  --grey-30: #D1D5DB;
  --grey-40: #9CA3AF;
  --grey-50: #6B7280;
  --grey-60: #4B5563;
  --grey-70: #374151;
  --grey-80: #1F2937;
  --grey-90: #111827;
  --grey-100: #0D1521;

  /* Cyan */
  --cyan-soft: #419BBE;
  --cyan-dark: #244A59;

  /* Farm Brand */
  --farm: #163C38;
  --farm-light: #1E4F4A;
  --farm-accent: #A08B5B;

  /* Status Colors */
  --success: #1DA553;
  --warning: #F97316;
  --error: #EF4444;

  /* Font */
  --font-sans: 'DM Sans', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Ubuntu, sans-serif;

  /* Container */
  --content-max-width: 1440px;
  --content-padding: 1.5rem;

  /* Breakpoints (for reference) */
  /* 2xsmall: 320px, xsmall: 512px, small: 1024px, medium: 1280px, large: 1440px */
}

/* ---- Base Styles ---- */
html { background-color: var(--grey-5); }
body {
  font-family: var(--font-sans);
  background-color: var(--grey-0);
  color: var(--grey-90);
  font-size: 14px;
  line-height: 1.6;
}
a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; background: none; font: inherit; }
ul, ol { list-style: none; }
img { height: auto; }

/* ---- Content Container ---- */
.content-container {
  max-width: var(--content-max-width);
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--content-padding);
  padding-right: var(--content-padding);
}

/* ---- Typography ---- */
.text-xsmall-regular { font-size: 10px; line-height: 1rem; font-weight: 400; }
.text-small-regular { font-size: 0.75rem; line-height: 1.25rem; font-weight: 400; }
.text-small-semi { font-size: 0.75rem; line-height: 1.25rem; font-weight: 600; }
.text-base-regular { font-size: 0.875rem; line-height: 1.5rem; font-weight: 400; }
.text-base-semi { font-size: 0.875rem; line-height: 1.5rem; font-weight: 600; }
.text-xl-semi { font-size: 1.5rem; line-height: 2.25rem; font-weight: 600; }
.text-2xl-semi { font-size: 1.875rem; line-height: 3rem; font-weight: 600; }
.text-3xl-regular { font-size: 2rem; line-height: 2.75rem; font-weight: 400; }

.text-cyan-dark { color: var(--cyan-dark); }
.text-primary { color: var(--primary); }

/* ---- Scrollbar Utilities ---- */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* ---- Animations ---- */
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes fade-in-right { 0% { opacity: 0; transform: translateX(10px); } 100% { opacity: 1; transform: translateX(0); } }
@keyframes fade-in-top { 0% { opacity: 0; transform: translateY(-10px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes ring { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@keyframes slide-in { 0% { transform: translateY(-100%); } 100% { transform: translateY(0); } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

.animate-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
.animate-fade-in-right { animation: fade-in-right 0.3s cubic-bezier(0.5, 0, 0.5, 1) forwards; }

/* ---- Line Clamp ---- */
.line-clamp-1, .line-clamp-2, .line-clamp-3, .line-clamp-6 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.line-clamp-1 { -webkit-line-clamp: 1; }
.line-clamp-2 { -webkit-line-clamp: 2; }
.line-clamp-3 { -webkit-line-clamp: 3; }
.line-clamp-6 { -webkit-line-clamp: 6; }

/* ============================================================
   COMPONENT: Discount Bar
   ============================================================ */
.discount-bar {
  width: 100%;
  background-color: var(--success);
  color: white;
  padding: 0.5rem 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.discount-bar .discount-bar-inner {
  display: flex;
  justify-content: space-between;
  width: 100%;
  align-items: center;
}
.discount-bar .discount-code-box {
  display: flex;
  align-items: center;
  height: 1.75rem;
  border: 1px solid white;
  border-radius: 0.375rem;
}
.discount-bar .discount-code-box span { font-weight: 500; padding: 0 1rem; }
.discount-bar .discount-code-box .divider { height: 100%; width: 1px; background: white; }
.discount-bar .discount-code-box button { display: flex; align-items: center; gap: 0.375rem; padding: 0 1rem; color: white; }

/* ============================================================
   COMPONENT: Sticky Navigation
   ============================================================ */
.nav-wrapper {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
}
.nav-wrapper header { position: relative; margin: 0 auto; }

.nav-main {
  background-color: var(--grey-100);
  transition: all 0.2s;
}
.nav-main nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 1.25rem 0;
  gap: 1rem;
  color: white;
}
/* Top bar */
.nav-topbar {
  display: flex;
  justify-content: space-between;
  padding: 0.5rem 0;
  font-size: 0.75rem;
}
.nav-topbar a { color: var(--primary); transition: color 0.2s; }
.nav-topbar a:hover { opacity: 0.8; }

/* Nav sections */
.nav-left, .nav-right { display: flex; align-items: center; gap: 1rem; flex: 1; }
.nav-left { justify-content: flex-start; }
.nav-right { justify-content: flex-end; }
.nav-center { display: flex; justify-content: center; }

/* Search Bar */
.search-input-wrapper { position: relative; max-width: 28rem; width: 100%; }
.search-input {
  width: 100%;
  padding: 0.75rem 2.5rem 0.75rem 1rem;
  background: rgba(255,255,255,0.9);
  border-radius: 0.375rem;
  border: 1px solid transparent;
  color: var(--grey-90);
  transition: all 0.2s;
  outline: none;
}
.search-input:focus { box-shadow: 0 0 0 2px var(--grey-20); }
.search-input::placeholder { color: var(--grey-40); }
.search-icon {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--grey-70);
  pointer-events: none;
}

/* Account Button */
.account-btn {
  display: flex;
  background: white;
  padding: 0.75rem;
  align-items: center;
  gap: 1.25rem;
  color: black;
  border-radius: 0.375rem;
  transition: background-color 0.2s;
  font-size: 0.875rem;
  white-space: nowrap;
}
.account-btn:hover { background: var(--grey-5); }

/* Cart Icon */
.cart-icon-wrapper { position: relative; display: flex; align-items: center; }
.cart-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  background: var(--primary);
  color: white;
  border-radius: 9999px;
  width: 1.25rem;
  height: 1.25rem;
  font-size: 0.625rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
}

/* Desktop Navigation Links */
.desktop-nav-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  padding: 1.25rem 0;
  flex-wrap: wrap;
  color: white;
}
.desktop-nav-links a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: white;
  padding: 0.5rem;
  border-radius: 0.375rem;
  white-space: nowrap;
  transition: all 0.2s;
  font-size: 0.875rem;
  font-weight: 500;
  max-width: max-content;
}
.desktop-nav-links a:hover { color: var(--accent); }
.desktop-nav-links a.active {
  color: var(--primary);
  font-weight: 700;
  background: white;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* ============================================================
   COMPONENT: Hero Slider
   ============================================================ */
.hero-slider {
  position: relative;
  height: 75vh;
  width: 100%;
  overflow: hidden;
  background: var(--grey-5);
}
.hero-slides-track {
  display: flex;
  height: 100%;
  transition: transform 0.5s ease-in-out;
}
.hero-slide {
  position: relative;
  min-width: 100%;
  height: 100%;
}
.hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 75% center;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(0,0,0,0.85), rgba(0,0,0,0.55), transparent);
}
.hero-content {
  position: absolute;
  bottom: 5rem;
  left: 10rem;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  max-width: 800px;
  color: white;
}
.hero-content h1 {
  font-size: 2.25rem;
  line-height: 1.2;
  font-weight: 700;
  margin-bottom: 1rem;
}
.hero-content p { font-size: 1.125rem; margin-bottom: 2rem; }
.hero-buttons { display: flex; gap: 1rem; }

/* Hero Navigation */
.hero-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  background: white;
  padding: 0.75rem;
  border-radius: 9999px;
  transition: background 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-nav-btn:hover { background: rgba(255,255,255,0.3); }
.hero-nav-btn.prev { left: 2rem; }
.hero-nav-btn.next { right: 2rem; }
.hero-dots {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  display: flex;
  gap: 0.25rem;
}
.hero-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  background: rgba(255,255,255,0.5);
  cursor: pointer;
  padding: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-dot span {
  display: block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  background: rgba(255,255,255,0.5);
}
.hero-dot.active span { background: white; }

/* ============================================================
   COMPONENT: Buttons
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.625rem 1.5rem;
  border-radius: 0.375rem;
  font-weight: 500;
  font-size: 0.875rem;
  transition: all 0.2s;
  cursor: pointer;
  border: none;
  gap: 0.5rem;
}
.btn-primary {
  background-color: var(--primary);
  color: white;
}
.btn-primary:hover { background-color: var(--primary-hover); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-secondary {
  background-color: white;
  color: var(--grey-90);
  border: 1px solid var(--grey-20);
}
.btn-secondary:hover { background-color: var(--grey-5); }

.btn-transparent {
  background: rgba(255,255,255,0.1);
  color: white;
}
.btn-transparent:hover { color: black; background: white; }

.btn-lg { padding: 0.875rem 2rem; font-size: 1rem; }
.btn-sm { padding: 0.375rem 1rem; font-size: 0.75rem; }

/* ============================================================
   COMPONENT: Category List (Homepage)
   ============================================================ */
.category-list-section { margin-top: 2rem; }
.category-list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}
.category-list-header h2 { color: var(--cyan-dark); }
.category-list-header a { color: var(--cyan-soft); }

.category-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
@media (min-width: 640px) { .category-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 768px) { .category-grid { grid-template-columns: repeat(5, 1fr); } }
@media (min-width: 1280px) { .category-grid { grid-template-columns: repeat(9, 1fr); } }

.category-card {
  border: 1px solid var(--grey-20);
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  border-radius: 0.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  overflow: hidden;
  transition: box-shadow 0.2s;
  margin-bottom: 10px;
}
.category-card:hover { box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
.category-card .category-img {
  position: relative;
  width: 100%;
  height: 3.5rem;
  padding: 0.25rem;
  flex-shrink: 0;
}
.category-card .category-img img { width: 100%; height: 100%; object-fit: contain; }
.category-card .category-name {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem;
  width: 100%;
}
.category-card .category-name span {
  font-size: 0.75rem;
  text-align: center;
  color: var(--cyan-dark);
}
@media (min-width: 640px) {
  .category-card { aspect-ratio: 1/1; border-radius: 1rem; }
  .category-card .category-img { height: auto; flex-grow: 1; padding: 0.5rem; }
  .category-card .category-name { padding: 0.5rem 0.75rem; flex-shrink: 0; }
  .category-card .category-name span { font-size: 0.875rem; }
}

/* ============================================================
   COMPONENT: Service Banner
   ============================================================ */
.service-banner {
  width: 100%;
  border: 1px solid var(--grey-20);
  border-radius: 1.25rem;
  padding: 1rem;
  display: flex;
  flex-direction: row;
}
.service-feature {
  display: flex;
  flex: 1;
  flex-direction: row;
  align-items: center;
  gap: 1rem;
}
.service-feature .feature-icon { flex: none; color: var(--cyan-dark); }
.service-feature .feature-text { display: flex; flex-direction: column; gap: 0.625rem; }
.service-feature .feature-text h3 { font-size: 1rem; font-weight: 500; }
.service-feature .feature-text p { font-size: 0.875rem; color: var(--grey-60); }
.service-divider {
  width: 1px;
  height: 95px;
  background: var(--grey-30);
  margin: 0 1rem;
  align-self: center;
}
@media (max-width: 1023px) {
  .service-banner { flex-direction: column; gap: 1.5rem; padding: 1.5rem; }
  .service-divider { display: none; }
}

/* ============================================================
   COMPONENT: Featured Product Cards (Feature Card with BG)
   ============================================================ */
.feature-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 1.5rem;
  gap: 1rem;
  border-radius: 1.25rem;
  overflow: hidden;
  min-height: 400px;
}
.feature-card .feature-card-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.feature-card .feature-card-bg img { width: 100%; height: 100%; object-fit: cover; }
.feature-card .feature-card-content {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}
.feature-card h3 { font-size: 1.5rem; font-weight: 500; color: white; margin-bottom: 0.5rem; }
.feature-card p { font-size: 0.875rem; color: white; margin-bottom: 2rem; }
.feature-card .feature-list {
  display: flex;
  flex-direction: column;
  max-width: 28rem;
  gap: 0.75rem;
  margin-top: auto;
  margin-bottom: 1.5rem;
}
.feature-card .feature-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem;
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(12px);
  border-radius: 0.375rem;
  color: white;
  font-size: 0.875rem;
  font-weight: 500;
}

/* ============================================================
   COMPONENT: Reviews Carousel
   ============================================================ */
.reviews-section { padding: 3rem 0; }
.reviews-section h2 {
  font-size: 1.875rem;
  font-weight: 700;
  text-align: center;
  color: var(--cyan-dark);
  margin-bottom: 2rem;
}
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  min-height: 360px;
}
@media (min-width: 768px) { .reviews-grid { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } }
@media (min-width: 1024px) { .reviews-grid { grid-template-columns: repeat(6, 1fr); } }

.review-card {
  background: white;
  border-radius: 1rem;
  box-shadow: 0 4px 6px rgba(0,0,0,0.07);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.2s, box-shadow 0.2s;
}
.review-card:hover { transform: scale(1.05); box-shadow: 0 10px 25px rgba(0,0,0,0.1); }
.review-avatar {
  width: 5rem;
  height: 5rem;
  border-radius: 9999px;
  background: var(--grey-20);
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.review-card h3 { font-size: 1.125rem; font-weight: 500; color: var(--cyan-dark); margin-bottom: 0.5rem; text-align: center; }
.review-card .review-product { color: var(--grey-50); font-size: 0.875rem; margin-bottom: 0.75rem; text-align: center; }
.review-card .review-text { color: var(--cyan-dark); font-size: 0.875rem; text-align: center; }

/* Star Rating */
.star-rating { display: flex; gap: 0.25rem; margin-bottom: 0.75rem; }
.star-rating .star { color: var(--grey-30); }
.star-rating .star.filled { color: black; }

/* Pagination Dots */
.pagination-dots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
}
.pagination-dots button {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 9999px;
  background: var(--grey-30);
  border: none;
  cursor: pointer;
  transition: background 0.2s;
}
.pagination-dots button.active { background: var(--primary); }

/* ============================================================
   COMPONENT: Product Card (Product Preview)
   ============================================================ */
.product-card {
  background: white;
  border-radius: 0.5rem;
  padding: 1rem;
  border: 1px solid var(--grey-20);
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: box-shadow 0.15s;
}
.product-card:hover { box-shadow: 0 10px 25px rgba(0,0,0,0.08); }
.product-card .product-thumbnail {
  position: relative;
  width: 100%;
  aspect-ratio: 1/1;
  overflow: hidden;
  border-radius: 0.25rem;
  background: var(--grey-5);
}
.product-card .product-thumbnail img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.product-card .product-info {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 1rem;
  flex-grow: 1;
  justify-content: space-around;
}
.product-card .product-sku { color: var(--grey-40); font-size: 0.75rem; }
.product-card .product-title {
  color: var(--cyan-dark);
  font-weight: 500;
  font-size: 0.875rem;
}
.product-card .product-features { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.75rem; }
.product-card .product-features .feature-badge {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.product-card .product-features .feature-badge .dot {
  width: 1rem;
  height: 1rem;
  border-radius: 9999px;
  flex-shrink: 0;
}
.product-card .product-features .feature-badge .dot.green { background: var(--success); }
.product-card .product-features .feature-badge .dot.orange { background: var(--warning); }
.product-card .product-features .feature-badge .check-dot {
  width: 1rem;
  height: 1rem;
  border-radius: 9999px;
  background: var(--success);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.product-card .product-features .feature-badge .check-dot svg { width: 0.625rem; height: 0.625rem; color: white; }

.product-card .product-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.product-card .product-price {
  color: var(--cyan-dark);
  font-size: 1.25rem;
  font-weight: 700;
}
.product-card .quick-add-btn {
  padding: 0.5rem;
  border-radius: 0.5rem;
  background: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  flex-shrink: 0;
  border: none;
  cursor: pointer;
  transition: background 0.2s;
}
.product-card .quick-add-btn:hover { background: var(--primary-hover); }

/* Product Grid */
.product-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
@media (min-width: 640px) { .product-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 768px) { .product-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .product-grid { grid-template-columns: repeat(4, 1fr); } }

/* Product Rail (Featured Horizontal) */
.product-rail { margin-top: 2rem; }
.product-rail h2 { margin-bottom: 1rem; color: var(--cyan-dark); }
.product-rail-scroll {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  padding-bottom: 1rem;
}
.product-rail-scroll .product-card {
  min-width: 220px;
  max-width: 260px;
  flex-shrink: 0;
}

/* ============================================================
   COMPONENT: Product Detail Page
   ============================================================ */
.product-detail-container {
  display: flex;
  flex-direction: column;
  padding: 0.75rem 1rem;
  gap: 1rem;
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}
@media (min-width: 768px) {
  .product-detail-container {
    flex-direction: row;
    padding: 1.5rem 100px;
    gap: 2.5rem;
  }
}
.product-detail-images { width: 100%; }
@media (min-width: 768px) { .product-detail-images { width: 50%; } }
.product-detail-info { width: 100%; display: flex; flex-direction: column; gap: 0.75rem; }
@media (min-width: 768px) { .product-detail-info { width: 50%; gap: 1rem; } }

/* Image Gallery */
.image-gallery { display: flex; flex-direction: column; gap: 1rem; position: relative; }
.image-gallery .main-image {
  position: relative;
  width: 100%;
  aspect-ratio: 4/3;
  border-radius: 0.5rem;
  overflow: hidden;
  background: var(--grey-5);
}
.image-gallery .main-image img { width: 100%; height: 100%; object-fit: contain; }
.image-gallery .gallery-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  background: rgba(255,255,255,0.8);
  border-radius: 9999px;
  padding: 0.375rem;
  color: var(--grey-70);
  transition: all 0.2s;
}
.image-gallery .gallery-nav-btn:hover { background: white; color: var(--grey-90); }
.image-gallery .gallery-nav-btn.prev { left: 0.5rem; }
.image-gallery .gallery-nav-btn.next { right: 0.5rem; }
.image-gallery .thumbs { display: flex; justify-content: center; gap: 0.625rem; }
.image-gallery .thumb {
  width: 70px;
  height: 70px;
  border-radius: 0.375rem;
  overflow: hidden;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.2s;
  background: var(--grey-5);
  position: relative;
}
.image-gallery .thumb:hover { opacity: 0.9; }
.image-gallery .thumb.active { opacity: 1; border: 2px solid var(--primary); }
.image-gallery .thumb img { width: 100%; height: 100%; object-fit: contain; }
@media (min-width: 768px) {
  .image-gallery .thumb { width: 100px; height: 100px; }
}

/* Product Info Section */
.product-sku-label { font-size: 0.875rem; color: var(--grey-40); }
.product-detail-title {
  font-size: 1.5rem;
  line-height: 1.3;
  color: var(--grey-90);
}
@media (min-width: 768px) {
  .product-detail-title { font-size: 1.875rem; line-height: 2.5rem; }
}

/* Shipping/Feature Badges (Detail Page) */
.info-badges { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 1rem; }
.info-badge {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.info-badge .badge-dot {
  width: 1rem;
  height: 1rem;
  border-radius: 9999px;
  flex-shrink: 0;
}
@media (min-width: 768px) { .info-badge .badge-dot { width: 1.25rem; height: 1.25rem; } }
.info-badge .badge-dot.green { background: var(--success); }
.info-badge .badge-dot.orange { background: var(--warning); }
.info-badge .badge-check {
  width: 1rem;
  height: 1rem;
  border-radius: 9999px;
  background: var(--success);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
@media (min-width: 768px) { .info-badge .badge-check { width: 1.25rem; height: 1.25rem; } }
.info-badge .badge-check svg { width: 0.625rem; height: 0.625rem; color: white; }
@media (min-width: 768px) { .info-badge .badge-check svg { width: 0.75rem; height: 0.75rem; } }

/* Variant Options Grid */
.variant-options-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin: 1.5rem 0;
}
@media (min-width: 640px) { .variant-options-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 768px) { .variant-options-grid { grid-template-columns: repeat(4, 1fr); } }
.variant-option {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem;
  border-radius: 0.5rem;
  border: 2px solid var(--grey-20);
  background: white;
  color: var(--grey-90);
  font-weight: 500;
  font-size: 0.875rem;
  text-align: center;
  min-height: 60px;
  cursor: pointer;
  transition: all 0.2s;
}
.variant-option:hover { border-color: var(--primary-hover); box-shadow: 0 4px 6px rgba(0,0,0,0.07); }
.variant-option.active {
  border-color: var(--primary);
  background: var(--primary-light);
  color: var(--primary);
}

/* Price Display */
.price-section { margin: 0.5rem 0; }
.price-original {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}
.price-original .label { font-size: 0.875rem; color: var(--grey-40); }
.price-original .old-price {
  text-decoration: line-through;
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--grey-40);
}
.price-original .discount-badge { color: var(--primary); font-size: 0.875rem; font-weight: 500; }
.price-current { font-size: 1.5rem; font-weight: 600; color: var(--cyan-dark); }
.price-from { font-size: 1.25rem; font-weight: 600; color: var(--cyan-dark); }

/* Quantity Selector */
.quantity-selector {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 1rem 0;
}
@media (min-width: 768px) { .quantity-selector { gap: 1rem; } }
.qty-btn {
  padding: 0.5rem;
  font-size: 1.125rem;
  font-weight: 500;
  flex: 1;
  display: flex;
  justify-content: center;
  border-radius: 0.375rem;
  border: 1px solid var(--grey-20);
  transition: background 0.2s;
}
.qty-btn.minus { background: var(--primary-light); color: var(--primary); }
.qty-btn.plus { background: var(--primary); color: white; }
.qty-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.qty-input {
  border: 1px solid var(--grey-20);
  border-radius: 0.5rem;
  text-align: center;
  padding: 0.5rem;
  width: 4rem;
  appearance: none;
  outline: none;
}

/* Action Buttons */
.action-buttons { display: flex; flex-direction: column; gap: 0.5rem; }
.action-buttons .btn { width: 100%; height: 2.5rem; }

/* ============================================================
   COMPONENT: Breadcrumb
   ============================================================ */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--grey-40);
  padding: 1.5rem 0 0;
}
.breadcrumb a { color: var(--grey-40); transition: color 0.2s; }
.breadcrumb a:hover { color: var(--primary); }
.breadcrumb .separator { color: var(--grey-30); }
.breadcrumb .current { color: var(--grey-60); }

/* ============================================================
   COMPONENT: Product Description (Markdown Content)
   ============================================================ */
.product-description h1 { color: var(--cyan-dark); font-size: 1.75rem; font-weight: 700; margin-top: 0; margin-bottom: 1.25rem; }
.product-description h2 { color: var(--cyan-dark); font-size: 1.5rem; font-weight: 600; margin-top: 1.5rem; margin-bottom: 1rem; }
.product-description h3 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-top: 1.25rem;
  margin-bottom: 0.75rem;
  background-color: var(--grey-5);
  color: var(--cyan-dark);
  border-bottom: 2px solid var(--grey-20);
  border-left: 5px solid var(--primary);
  padding-left: calc(1rem - 5px);
}
.product-description h4 { font-size: 1.125rem; font-weight: 600; margin-top: 1rem; margin-bottom: 0.5rem; }
.product-description p { margin-bottom: 1rem; }
.product-description ul { list-style-type: disc; padding-left: 1.5rem; margin-bottom: 1rem; }
.product-description ol { list-style-type: decimal; padding-left: 1.5rem; margin-bottom: 1rem; }
.product-description li { margin-bottom: 0.25rem; }
.product-description a { color: #3182ce; }
.product-description a:hover { text-decoration: underline; }
.product-description table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin-bottom: 1.5rem;
  border: 1px solid var(--grey-20);
  border-radius: 8px;
  overflow: hidden;
}
.product-description th, .product-description td { padding: 0.75rem 1rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--grey-20); }
.product-description tbody tr:last-child td { border-bottom: none; }
.product-description tbody tr:nth-child(even) { background-color: var(--grey-5); }
.product-description td strong { font-weight: 600; }

/* ============================================================
   COMPONENT: FAQ Accordion
   ============================================================ */
.faq-section { padding: 1rem 0 2rem; }
.faq-section h2 {
  font-size: 1.875rem;
  font-weight: 500;
  text-align: center;
  color: var(--grey-90);
  margin-bottom: 2rem;
}
@media (min-width: 768px) { .faq-section h2 { font-size: 2.25rem; } }
.faq-grid { display: flex; flex-direction: column; gap: 1rem; }
.faq-row { display: flex; flex-direction: column; gap: 1rem; }
@media (min-width: 768px) { .faq-row { flex-direction: row; } }
.faq-item { flex: 1; }
.faq-card {
  background: white;
  border: 1px solid var(--grey-20);
  border-radius: 0.5rem;
  padding: 1rem;
}
.faq-card.open { box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
}
.faq-question span { font-weight: 500; font-size: 0.875rem; color: var(--grey-90); }
.faq-question .faq-icon { color: black; flex-shrink: 0; }
.faq-answer {
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.3s ease;
  max-height: 0;
  opacity: 0;
  font-size: 0.875rem;
  color: var(--grey-90);
}
.faq-answer.open { max-height: 1000px; opacity: 1; }
.faq-answer .answer-content { padding-top: 1rem; }

/* ============================================================
   COMPONENT: Cart Overlay (Slide-in Sidebar)
   ============================================================ */
.cart-overlay-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.25);
  z-index: 50;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
.cart-overlay-backdrop.open { opacity: 1; pointer-events: auto; }

.cart-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: 597px;
  background: white;
  box-shadow: -4px 0 24px rgba(0,0,0,0.1);
  z-index: 51;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.5s ease;
}
.cart-overlay.open { transform: translateX(0); }

.cart-overlay-header { padding: 1rem 2rem; }
.cart-overlay-header .header-row { display: flex; align-items: center; justify-content: space-between; }
.cart-overlay-header h2 { font-size: 1.5rem; font-weight: 500; color: black; }
.cart-overlay-header .close-btn { color: var(--cyan-soft); cursor: pointer; }
.cart-overlay-header .divider { height: 1px; background: var(--grey-30); width: 100%; margin-top: 1rem; }

.cart-overlay-content { flex: 1; overflow-y: auto; padding: 0 2rem; }
.cart-item {
  border: 1px solid var(--grey-10);
  border-radius: 0.5rem;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.cart-item .cart-item-row { display: flex; gap: 0.75rem; align-items: center; }
.cart-item .cart-item-thumbnail {
  width: 5rem;
  height: 5rem;
  border-radius: 0.375rem;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--grey-5);
}
.cart-item .cart-item-thumbnail img { width: 100%; height: 100%; object-fit: cover; }
.cart-item .cart-item-title { font-size: 0.875rem; font-weight: 500; color: var(--cyan-dark); }
.cart-item .cart-item-variant { font-size: 0.75rem; color: var(--grey-40); margin-top: 0.25rem; }
.cart-item .cart-item-price { font-size: 1rem; font-weight: 600; color: var(--cyan-dark); }

.cart-item .cart-qty-controls { display: flex; align-items: center; gap: 0.5rem; }
.cart-item .cart-qty-btn {
  flex: 1;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.375rem;
  transition: opacity 0.2s;
}
.cart-item .cart-qty-btn:hover { opacity: 0.8; }
.cart-item .cart-qty-btn.minus { background: var(--primary-light); color: var(--primary); }
.cart-item .cart-qty-btn.plus { background: var(--primary); color: white; }
.cart-item .cart-qty-input {
  width: 4rem;
  height: 3rem;
  border: 1px solid var(--grey-20);
  border-radius: 0.375rem;
  text-align: center;
}
.cart-item .cart-delete-btn {
  flex-shrink: 0;
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.375rem;
  color: var(--grey-30);
  transition: color 0.2s;
}
.cart-item .cart-delete-btn:hover { color: var(--grey-50); }

.cart-overlay-footer { padding: 0 2rem 2rem; }
.cart-overlay-footer .divider { height: 1px; background: var(--grey-30); width: 100%; }
.cart-total-row { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; margin: 1rem 0; }
.cart-total-label { font-size: 1rem; font-weight: 500; color: var(--cyan-dark); }
.cart-total-note { font-size: 0.75rem; color: var(--grey-40); }
.cart-total-amount { font-size: 1.5rem; font-weight: 700; color: var(--cyan-dark); white-space: nowrap; }

/* Shipping Progress */
.shipping-progress { margin: 1rem 0; }
.shipping-progress .progress-info { display: flex; align-items: center; gap: 1rem; margin-bottom: 0.5rem; }
.shipping-progress .progress-label { font-size: 0.75rem; color: var(--primary); font-weight: 500; }
.shipping-progress .progress-message { font-size: 0.875rem; font-weight: 500; color: var(--cyan-dark); }
.shipping-progress .progress-bar { height: 1rem; background: var(--grey-10); border-radius: 9999px; padding: 0.25rem; }
.shipping-progress .progress-fill { height: 100%; background: var(--primary); border-radius: 9999px; transition: width 0.5s ease; }

/* ============================================================
   COMPONENT: Footer
   ============================================================ */
footer {
  background-color: var(--grey-100);
  color: white;
  padding: 4rem 0 2rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}
@media (max-width: 1023px) {
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
}
footer h3 { font-weight: 700; font-size: 1.125rem; color: rgba(255,255,255,0.8); margin-bottom: 0.75rem; }
footer .company-name { color: var(--accent); font-weight: 500; margin-bottom: 0.25rem; }
footer .footer-text { color: rgba(255,255,255,0.8); font-size: 0.875rem; }
footer ul { display: flex; flex-direction: column; gap: 0.25rem; }
footer ul a { font-size: 0.875rem; transition: color 0.2s; }
footer ul a:hover { color: var(--accent); }
.footer-bottom {
  margin-top: 3rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,0.1);
}
@media (max-width: 768px) { .footer-bottom { flex-direction: column; } }
.footer-copyright { color: var(--grey-40); font-size: 0.875rem; }
.payment-methods { display: flex; gap: 0.5rem; }
.payment-methods .payment-icon {
  width: 2.5rem;
  height: 1.5rem;
  background: rgba(255,255,255,0.1);
  border-radius: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.5rem;
  color: white;
}

/* ============================================================
   COMPONENT: Store/Category Page Layout
   ============================================================ */
.store-layout {
  display: flex;
  flex-direction: column;
  padding: 1.5rem 0;
}
@media (min-width: 1024px) {
  .store-layout { flex-direction: row; gap: 1.5rem; }
}
.store-sidebar { width: 100%; margin-bottom: 1.5rem; }
@media (min-width: 1024px) { .store-sidebar { width: 25%; margin-bottom: 0; } }
.store-main { width: 100%; }
@media (min-width: 1024px) { .store-main { width: 75%; } }

/* Filter Sidebar */
.filter-sidebar { display: flex; flex-direction: column; gap: 1.5rem; }
.filter-group h3 { font-weight: 600; font-size: 0.875rem; margin-bottom: 0.75rem; color: var(--grey-70); }
.filter-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0;
  font-size: 0.875rem;
  color: var(--grey-60);
  cursor: pointer;
}
.filter-option input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  accent-color: var(--primary);
}

/* Sort Dropdown */
.sort-dropdown { margin-bottom: 1rem; display: flex; justify-content: flex-end; }
.sort-dropdown select {
  padding: 0.5rem 1rem;
  border: 1px solid var(--grey-20);
  border-radius: 0.375rem;
  font-size: 0.875rem;
  color: var(--grey-60);
  background: white;
  outline: none;
}

/* Pagination */
.pagination {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 2rem;
}
.pagination button {
  padding: 0.5rem 0.875rem;
  border: 1px solid var(--grey-20);
  border-radius: 0.375rem;
  font-size: 0.875rem;
  color: var(--grey-60);
  background: white;
  transition: all 0.2s;
}
.pagination button:hover { border-color: var(--primary); color: var(--primary); }
.pagination button.active { background: var(--primary); color: white; border-color: var(--primary); }

/* ============================================================
   COMPONENT: Newsletter
   ============================================================ */
.newsletter {
  padding: 3rem 0;
  text-align: center;
}
.newsletter h2 { font-size: 1.5rem; font-weight: 600; color: var(--cyan-dark); margin-bottom: 0.5rem; }
.newsletter p { color: var(--grey-50); margin-bottom: 1.5rem; }
.newsletter-form {
  display: flex;
  max-width: 24rem;
  margin: 0 auto;
  gap: 0.5rem;
}
.newsletter-form input {
  flex: 1;
  padding: 0.75rem 1rem;
  border: 1px solid var(--grey-20);
  border-radius: 0.375rem;
  outline: none;
}
.newsletter-form input:focus { border-color: var(--primary); }

/* ============================================================
   COMPONENT: Review Form
   ============================================================ */
.review-form { margin-top: 2rem; }
.review-form h3 { font-size: 1.25rem; font-weight: 600; margin-bottom: 1rem; }
.form-group { margin-bottom: 1rem; }
.form-group label { display: block; font-size: 0.875rem; font-weight: 500; margin-bottom: 0.375rem; color: var(--grey-70); }
.form-group input, .form-group textarea, .form-group select {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid var(--grey-20);
  border-radius: 0.375rem;
  outline: none;
  font-size: 0.875rem;
}
.form-group input:focus, .form-group textarea:focus { border-color: var(--primary); }

/* ============================================================
   COMPONENT: Map Contact Section
   ============================================================ */
.map-section { padding: 3rem 0; }
.map-container {
  border-radius: 1rem;
  overflow: hidden;
  height: 400px;
  background: var(--grey-10);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--grey-40);
}

/* ============================================================
   UTILITY: Responsive hide/show
   On mobile (< 1024px): .hide-mobile is hidden, .hide-desktop is visible
   On desktop (>= 1024px): .hide-mobile is visible, .hide-desktop is hidden
   
   We use max-width for hiding so the element's own display value 
   (grid, flex, block, etc.) is never overridden on the visible breakpoint.
   ============================================================ */
@media (max-width: 1023px) {
  .hide-mobile { display: none !important; }
}
@media (min-width: 1024px) {
  .hide-desktop { display: none !important; }
}

/* ============================================================
   COMPONENT: Cookie Policy Banner
   ============================================================ */
.cookie-banner {
  position: fixed;
  bottom: 1rem;
  left: 1rem;
  right: 1rem;
  max-width: 48rem;
  margin: 0 auto;
  background: white;
  border: 1px solid var(--grey-20);
  box-shadow: 0 4px 24px rgba(0,0,0,0.15);
  padding: 0.75rem 1rem;
  border-radius: 0.375rem;
  z-index: 100;
}
@media (min-width: 768px) { .cookie-banner { padding: 0.75rem 1.5rem; } }
.cookie-banner-inner {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: flex-start;
}
@media (min-width: 768px) {
  .cookie-banner-inner { flex-direction: row; align-items: center; justify-content: space-between; }
}
.cookie-banner p { font-size: 0.875rem; color: var(--grey-60); flex: 1; }
.cookie-banner a { color: var(--primary); text-decoration: underline; }
.cookie-banner-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
  flex-wrap: wrap;
}

/* ============================================================
   COMPONENT: Mobile Side Menu
   ============================================================ */
.mobile-menu-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(3,7,18,0.5);
  backdrop-filter: blur(8px);
  z-index: 60;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease-out;
}
.mobile-menu-backdrop.open { opacity: 1; pointer-events: auto; }

.mobile-menu {
  position: fixed;
  top: 0.5rem;
  left: 0.5rem;
  bottom: 0.5rem;
  width: calc(100% - 1rem);
  max-width: 24rem;
  background: rgba(3,7,18,0.5);
  backdrop-filter: blur(24px);
  border-radius: 1rem;
  z-index: 61;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.5rem;
  color: white;
  transform: translateX(-110%);
  transition: transform 0.15s ease-out;
}
.mobile-menu.open { transform: translateX(0); }
.mobile-menu .close-btn {
  align-self: flex-end;
  color: white;
  padding: 0.5rem;
}
.mobile-menu-links {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  align-items: flex-start;
}
.mobile-menu-links a {
  font-size: 1.875rem;
  line-height: 2.5rem;
  color: white;
  transition: color 0.2s;
}
.mobile-menu-links a:hover { color: rgba(255,255,255,0.6); }
.mobile-menu-footer {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.mobile-menu-footer p { font-size: 0.75rem; color: rgba(255,255,255,0.6); }

/* ============================================================
   COMPONENT: Checkout Layout
   ============================================================ */
.checkout-header {
  height: 4rem;
  background: white;
  border-bottom: 1px solid var(--grey-20);
  display: flex;
  align-items: center;
}
.checkout-header nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  width: 100%;
}
.checkout-back-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--grey-50);
  font-size: 0.875rem;
  text-transform: uppercase;
  flex: 1;
}
.checkout-back-link:hover { color: var(--grey-90); }
.checkout-logo { display: flex; align-items: center; justify-content: center; }
.checkout-logo svg { fill: var(--cyan-dark); }
.checkout-spacer { flex: 1; }

.checkout-container {
  background: var(--grey-5);
  min-height: calc(100vh - 4rem);
}
.checkout-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  padding: 3rem 0;
}
@media (min-width: 768px) { .checkout-grid { grid-template-columns: 1fr 1fr; } }

.checkout-section {
  background: white;
  border: 1px solid var(--grey-20);
  border-radius: 0.5rem;
  padding: 1.5rem;
}
.checkout-section h3 {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--cyan-dark);
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--grey-10);
}

/* ============================================================
   COMPONENT: Account Pages
   ============================================================ */
.account-layout {
  min-height: 90vh;
  background: white;
  padding: 1.5rem 0 3rem;
}
@media (min-width: 768px) { .account-layout { padding: 2.5rem 0 5rem; } }
.account-layout h1 {
  font-size: 1.875rem;
  font-weight: 700;
  color: var(--cyan-dark);
  margin-bottom: 2.5rem;
}
.account-content {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
@media (min-width: 1024px) { .account-content { flex-direction: row; } }

/* Account Nav */
.account-sidebar { width: 100%; }
@media (min-width: 1024px) { .account-sidebar { width: 16.666%; } }
.account-sidebar h2 { font-weight: 600; font-size: 1.125rem; margin-bottom: 1rem; }
.account-sidebar p { font-size: 0.875rem; color: var(--grey-60); margin-bottom: 2rem; }

/* Desktop account nav */
.account-nav-desktop {
  border: 1px solid var(--grey-20);
  border-radius: 0.375rem;
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.account-nav-link {
  display: block;
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  color: var(--grey-70);
  transition: all 0.2s;
}
.account-nav-link:hover { background: var(--grey-5); }
.account-nav-link.active {
  background: var(--primary);
  color: white;
  font-weight: 500;
}

/* Mobile account nav */
.account-nav-mobile {
  display: flex;
  overflow-x: auto;
  gap: 0;
  padding: 0.5rem 0;
  margin-bottom: 1.5rem;
}
.account-nav-mobile a, .account-nav-mobile button {
  flex: 1;
  text-align: center;
  padding: 0.75rem;
  border-radius: 0.375rem;
  white-space: nowrap;
  font-size: 0.875rem;
  color: var(--grey-70);
}
.account-nav-mobile a.active { background: var(--primary); color: white; }

.account-main { width: 100%; }
@media (min-width: 1024px) { .account-main { width: 83.333%; } }

/* Overview Cards */
.overview-card {
  background: white;
  border: 1px solid var(--grey-20);
  border-radius: 0.5rem;
  padding: 1.5rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.overview-card-icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  background: var(--primary);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}
.overview-card-stat {
  font-size: 1.875rem;
  font-weight: 700;
  color: var(--grey-90);
}
.overview-card-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  color: var(--grey-50);
}

/* Order Row */
.order-row {
  padding: 1rem;
  background: white;
  border: 1px solid var(--grey-20);
  border-radius: 0.5rem;
  transition: all 0.2s;
}
.order-row:hover { border-color: var(--grey-40); box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
.order-row-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  flex: 1;
}
.order-row-label { font-size: 0.75rem; color: var(--grey-50); }
.order-row-value { font-weight: 500; }

/* ============================================================
   COMPONENT: Login / Register Forms
   ============================================================ */
.auth-layout {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 90vh;
  background: white;
  padding: 2rem 1rem;
}
.auth-card {
  max-width: 28rem;
  width: 100%;
  border: 1px solid var(--grey-20);
  border-radius: 0.5rem;
  padding: 1.25rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.auth-card h1 { font-size: 1.25rem; font-weight: 700; margin-bottom: 0.5rem; }
.auth-card .auth-desc { font-size: 0.875rem; color: var(--grey-60); margin-bottom: 1.5rem; }
.auth-field { margin-bottom: 0.75rem; }
.auth-field label {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  color: var(--grey-50);
  position: absolute;
  top: -0.5rem;
  left: 0.75rem;
  background: white;
  padding: 0 0.25rem;
}
.auth-field label .required { color: #E11D48; }
.auth-input-wrapper { position: relative; }
.auth-input {
  width: 100%;
  padding: 0.875rem 1rem 0.375rem;
  border: 1px solid var(--grey-20);
  border-radius: 0.375rem;
  font-size: 0.875rem;
  outline: none;
  transition: border-color 0.2s;
}
.auth-input:focus { border-color: var(--primary); }

.social-login { display: flex; gap: 0.5rem; width: 100%; }
.social-btn {
  flex: 1;
  padding: 0.5rem;
  border: 1px solid var(--grey-20);
  border-radius: 0.375rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
.social-btn.apple { background: black; color: white; border-color: black; }
.social-btn.apple:hover { background: var(--grey-90); }
.social-btn.google { background: white; }
.social-btn.google:hover { background: var(--grey-5); }
.social-btn.facebook { background: #3B82F6; color: white; border-color: #3B82F6; }
.social-btn.facebook:hover { background: #2563EB; }

.auth-divider {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 1rem 0;
}
.auth-divider span { font-size: 0.875rem; color: var(--grey-50); white-space: nowrap; }
.auth-divider::before, .auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--grey-20);
}

.auth-switch {
  text-align: center;
  margin-top: 1.5rem;
  padding: 0.75rem;
  background: var(--primary-light);
  border-radius: 0.375rem;
  font-size: 0.875rem;
  color: var(--grey-60);
}
.auth-switch button { color: var(--primary); text-decoration: underline; font-weight: 500; }

/* ============================================================
   COMPONENT: Contact Form
   ============================================================ */
.contact-form-card {
  background: white;
  border: 1px solid var(--grey-20);
  border-radius: 0.5rem;
  padding: 1.5rem 2rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.contact-form-card h2 { font-size: 1.25rem; font-weight: 600; color: var(--cyan-dark); margin-bottom: 0.5rem; }
.contact-form-card .desc { font-size: 0.875rem; color: var(--grey-60); margin-bottom: 1.5rem; }
.contact-form-card .field-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 0.25rem;
}
.contact-form-card .field-label .required { color: #E11D48; }
.contact-form-card input,
.contact-form-card textarea {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--grey-20);
  border-radius: 0.375rem;
  font-size: 0.875rem;
  outline: none;
}
.contact-form-card input:focus,
.contact-form-card textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-light); }
.contact-form-card .field-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 768px) { .contact-form-card .field-row { grid-template-columns: 1fr 1fr; } }
.contact-form-card .checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 1.5rem;
}
.contact-form-card .checkbox-row input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  margin-top: 0.125rem;
  accent-color: var(--primary);
}

/* ============================================================
   COMPONENT: Map + Contact Info (Proper Layout)
   ============================================================ */
.map-contact-section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 3rem 0;
  width: 100%;
}
@media (min-width: 768px) { .map-contact-section { flex-direction: row; } }
.map-contact-section .map-image {
  flex-grow: 1;
  width: 100%;
  height: 300px;
  border-radius: 1.5rem;
  overflow: hidden;
}
@media (min-width: 768px) {
  .map-contact-section .map-image { width: 75%; height: 491px; }
}
.map-contact-section .map-image a { display: block; width: 100%; height: 100%; }
.map-contact-section .map-image img { width: 100%; height: 100%; object-fit: cover; }

.map-contact-section .contact-card {
  width: 100%;
  background: white;
  border: 1px solid var(--grey-20);
  border-radius: 1.5rem;
  padding: 1rem;
  display: flex;
  flex-direction: column;
}
@media (min-width: 768px) {
  .map-contact-section .contact-card { width: 25%; height: 491px; }
}
.map-contact-section .contact-card h2 {
  font-weight: 500;
  font-size: 1.25rem;
  color: var(--grey-90);
  text-align: center;
  margin-bottom: 2rem;
}
.map-contact-section .contact-card-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  text-align: center;
  height: 100%;
}
.map-contact-section .contact-card-body p { font-size: 0.875rem; color: var(--grey-90); }

/* ============================================================
   COMPONENT: Search Results
   ============================================================ */
.search-header { margin-bottom: 2rem; }
.search-header h1 { font-size: 1.5rem; font-weight: 700; color: var(--cyan-dark); }
.search-header .result-count { font-size: 0.875rem; color: var(--grey-50); margin-top: 0.5rem; }
.search-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 0;
}
.search-empty h2 { font-size: 1.5rem; font-weight: 500; color: var(--grey-90); margin-bottom: 1rem; }
.search-empty p { color: var(--grey-50); text-align: center; max-width: 32rem; }

/* Loading skeleton */
.skeleton { background: var(--grey-20); border-radius: 0.5rem; animation: pulse 2s cubic-bezier(0.4,0,0.6,1) infinite; }

/* ============================================================
   COMPONENT: 404 Page
   ============================================================ */
.not-found-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  text-align: center;
  padding: 2rem;
}
.not-found-page h1 { font-size: 6rem; font-weight: 700; color: var(--grey-20); line-height: 1; }
.not-found-page h2 { font-size: 1.5rem; font-weight: 600; color: var(--cyan-dark); margin: 1rem 0 0.5rem; }
.not-found-page p { color: var(--grey-50); margin-bottom: 2rem; }

/* ============================================================
   COMPONENT: Free Shipping Nudge Popup
   ============================================================ */
.shipping-nudge {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  background: white;
  border: 1px solid var(--grey-20);
  border-radius: 0.75rem;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  padding: 1rem 1.25rem;
  z-index: 45;
  max-width: 22rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  animation: fade-in-right 0.3s ease-out;
}
.shipping-nudge .nudge-icon {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  background: var(--primary-light);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
}
.shipping-nudge .nudge-text { font-size: 0.875rem; color: var(--grey-70); }
.shipping-nudge .nudge-text strong { color: var(--cyan-dark); }
.shipping-nudge .nudge-close {
  position: absolute;
  top: 0.375rem;
  right: 0.375rem;
  color: var(--grey-40);
  padding: 0.25rem;
}

/* ============================================================
   COMPONENT: Discount Code Input
   ============================================================ */
.discount-code-section {
  background: white;
  border: 1px solid var(--grey-20);
  border-radius: 0.5rem;
  padding: 1rem;
}
.discount-code-section h3 { font-weight: 600; margin-bottom: 0.5rem; }
.discount-input-row {
  display: flex;
  gap: 0.75rem;
  width: 100%;
}
.discount-input-row input {
  flex: 5;
  min-width: 0;
  height: 2.75rem;
  padding: 0 1rem;
  border: 1px solid var(--grey-20);
  border-radius: 0.5rem;
  font-size: 0.875rem;
  outline: none;
}
.discount-input-row input:focus { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.discount-input-row button {
  flex: 1;
  height: 2.75rem;
  white-space: nowrap;
}
.discount-badge-applied {
  display: inline-flex;
  padding: 0.125rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
}
.discount-badge-applied.auto { background: #D1FAE5; color: #065F46; }
.discount-badge-applied.manual { background: var(--grey-10); color: var(--grey-70); }

/* ============================================================
   COMPONENT: Cart Totals
   ============================================================ */
.cart-totals { display: flex; flex-direction: column; gap: 0.5rem; }
.cart-totals-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.875rem;
}
.cart-totals-row.total {
  font-size: 1.125rem;
  font-weight: 600;
  padding-top: 0.5rem;
  border-top: 1px solid var(--grey-20);
  margin-top: 0.25rem;
}

/* ============================================================
   UTILITY: form-input — generic styled input/select/textarea
   ============================================================ */
.form-input {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid var(--grey-20);
  border-radius: 0.375rem;
  font-size: 0.875rem;
  outline: none;
  transition: border-color 0.2s;
  background: white;
  color: var(--grey-90);
}
.form-input:focus { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-light); }
label { display: block; font-size: 0.875rem; font-weight: 500; margin-bottom: 0.375rem; color: var(--grey-70); }

/* ============================================================
   UTILITY: tab-btn — product detail page tabs
   ============================================================ */
.tab-btn {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--grey-50);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: all 0.2s;
}
.tab-btn:hover { color: var(--cyan-dark); }
.tab-btn.active { color: var(--primary); border-bottom-color: var(--primary); }

/* ============================================================
   COMPONENT: Product Detail Two-Column Layout
   ============================================================ */
.product-detail-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  padding: 1.5rem 0;
}
@media (min-width: 768px) {
  .product-detail-layout { grid-template-columns: 1fr 1fr; gap: 3rem; }
}
.product-info-section { display: flex; flex-direction: column; gap: 0.75rem; }

/* Sale badge on product gallery */
.sale-badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  background: var(--primary);
  color: white;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  text-transform: uppercase;
  z-index: 5;
}

/* Discount bar */
.discount-bar {
  background: var(--primary);
  padding: 0.5rem 0;
  text-align: center;
  color: white;
  font-size: 0.875rem;
}
.discount-bar-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.discount-code-box {
  display: inline-flex;
  align-items: center;
  background: rgba(255,255,255,0.2);
  border-radius: 9999px;
  padding: 0.25rem 0.75rem;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
}
.discount-code-box .divider { width: 1px; height: 1rem; background: rgba(255,255,255,0.4); }
.discount-code-box button { display: flex; align-items: center; gap: 0.25rem; color: white; }