/* ==========================================================================
   SEN ĐÁ CHÂU CHÂU - CENTRAL DESIGN SYSTEM & ROOT VARIABLES
   ========================================================================== */

/* 1. @FONT-FACE DEFINITIONS (GILROY FONT FAMILY) */
@font-face {
  font-family: 'Gilroy';
  src: url('../fonts/gilroy/Gilroy-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Gilroy';
  src: url('../fonts/gilroy/Gilroy-LightItalic.ttf') format('truetype');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Gilroy';
  src: url('../fonts/gilroy/Gilroy-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Gilroy';
  src: url('../fonts/gilroy/Gilroy-RegularItalic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Gilroy';
  src: url('../fonts/gilroy/Gilroy-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Gilroy';
  src: url('../fonts/gilroy/Gilroy-MediumItalic.ttf') format('truetype');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Gilroy';
  src: url('../fonts/gilroy/Gilroy-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Gilroy';
  src: url('../fonts/gilroy/Gilroy-SemiBoldItalic.ttf') format('truetype');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Gilroy';
  src: url('../fonts/gilroy/Gilroy-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Gilroy';
  src: url('../fonts/gilroy/Gilroy-BoldItalic.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Gilroy';
  src: url('../fonts/gilroy/Gilroy-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Gilroy';
  src: url('../fonts/gilroy/Gilroy-Black.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* 2. CENTRAL CSS ROOT VARIABLES (MÃ MÀU & FONT CHỮ DỄ DÀNG CHỈNH SỬA) */
:root {
  /* Font Families */
  --font-sans: 'Gilroy', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-serif: 'Playfair Display', Georgia, serif;
  --font-handwriting: 'Dancing Script', cursive;

  /* Primary Brand Colors */
  --color-primary: #264332;
  --color-primary-hover: #1A3224;
  --color-primary-light: #244332;
  --color-secondary: #8C7B5D;

  /* Accent Colors */
  --color-accent-amber: #D97706;
  --color-accent-rose: #F43F5E;
  --color-accent-tan: #AE9077;

  /*
   * Responsive theme tokens
   *
   * Đây là các biến màu dành cho phần quản trị sau này. Chỉ cần ghi đè
   * các biến --theme-* tương ứng là có thể đổi màu riêng cho desktop/mobile
   * mà không phải sửa trực tiếp từng giao diện.
   */
  --theme-page-bg-mobile: #FAF9F6;
  --theme-surface-bg-mobile: #FAF9F6;
  --theme-card-bg-mobile: #FFFFFF;
  --theme-card-text-mobile: #1C3A27;
  --theme-card-muted-text-mobile: #78716C;
  --theme-text-mobile: #1C3A27;
  --theme-muted-text-mobile: #78716C;
  --theme-border-mobile: #E7E5E4;

  /* Desktop is independently configurable, but starts from the same warm
     storefront canvas as mobile. An admin setting can override only these
     variables without rewriting the component styles. */
  --theme-page-bg-desktop: #FAF9F6;
  --theme-surface-bg-desktop: #FAF9F6;
  --theme-card-bg-desktop: #FFFFFF;
  --theme-card-text-desktop: #1C3A27;
  --theme-card-muted-text-desktop: #78716C;
  --theme-text-desktop: #1C3A27;
  --theme-muted-text-desktop: #78716C;
  --theme-border-desktop: #E7E5E4;

  /* Active theme aliases: mobile is the default. */
  --theme-page-bg: var(--theme-page-bg-mobile);
  --theme-surface-bg: var(--theme-surface-bg-mobile);
  --theme-card-bg: var(--theme-card-bg-mobile);
  --theme-card-text: var(--theme-card-text-mobile);
  --theme-card-muted-text: var(--theme-card-muted-text-mobile);
  --theme-text: var(--theme-text-mobile);
  --theme-muted-text: var(--theme-muted-text-mobile);
  --theme-border: var(--theme-border-mobile);

  /* Legacy aliases retained for existing templates. */
  --color-bg-light: var(--theme-page-bg);
  --color-bg-card: #F5F4EF;
  --color-bg-white: var(--theme-card-bg);

  /* Text & Border Colors */
  --color-text-main: #1C3A27;
  --color-text-stone: #57534E;
  --color-text-muted: #78716C;
  --color-border: #E7E5E4;
}

/* 3. GLOBAL BASE STYLES & OVERRIDES */
html, body {
  font-family: var(--font-sans) !important;
  background-color: var(--theme-page-bg) !important;
  color: var(--theme-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: 'Gilroy', sans-serif !important;
}

/* Desktop gets an independently editable theme-token set. */
@media (min-width: 768px) {
  :root {
    --theme-page-bg: var(--theme-page-bg-desktop);
    --theme-surface-bg: var(--theme-surface-bg-desktop);
    --theme-card-bg: var(--theme-card-bg-desktop);
    --theme-card-text: var(--theme-card-text-desktop);
    --theme-card-muted-text: var(--theme-card-muted-text-desktop);
    --theme-text: var(--theme-text-desktop);
    --theme-muted-text: var(--theme-muted-text-desktop);
    --theme-border: var(--theme-border-desktop);
  }

  /* Page-level surfaces inherit the desktop theme across every static page. */
  body > header,
  body > main,
  body > main > section,
  body > footer {
    background-color: var(--theme-surface-bg) !important;
    border-color: var(--theme-border) !important;
  }

  /* Existing Tailwind utility surfaces become theme cards on desktop. */
  body > header .bg-white,
  body > main .bg-white,
  body > footer .bg-white,
  body > header .bg-\[\#FAF9F6\],
  body > main .bg-\[\#FAF9F6\],
  body > footer .bg-\[\#FAF9F6\],
  body > header .bg-\[\#F7F6F2\],
  body > main .bg-\[\#F7F6F2\],
  body > footer .bg-\[\#F7F6F2\],
  body > header .bg-\[\#F5F4EF\],
  body > main .bg-\[\#F5F4EF\],
  body > footer .bg-\[\#F5F4EF\],
  body > header .bg-\[\#F3F2ED\],
  body > main .bg-\[\#F3F2ED\],
  body > footer .bg-\[\#F3F2ED\],
  body > header .bg-\[\#F2F1EC\],
  body > main .bg-\[\#F2F1EC\],
  body > footer .bg-\[\#F2F1EC\] {
    background-color: var(--theme-card-bg) !important;
  }

  /* Preserve contrast for the most common existing text utilities. */
  body > header .text-primary,
  body > main .text-primary,
  body > footer .text-primary,
  body > header .text-text-main,
  body > main .text-text-main,
  body > footer .text-text-main,
  body > header .text-\[\#264332\],
  body > main .text-\[\#264332\],
  body > footer .text-\[\#264332\],
  body > header .text-\[\#1C3A27\],
  body > main .text-\[\#1C3A27\],
  body > footer .text-\[\#1C3A27\] {
    color: var(--theme-text) !important;
  }

  body > header .text-stone-400,
  body > main .text-stone-400,
  body > footer .text-stone-400,
  body > header .text-stone-500,
  body > main .text-stone-500,
  body > footer .text-stone-500,
  body > header .text-stone-600,
  body > main .text-stone-600,
  body > footer .text-stone-600,
  body > header .text-stone-700,
  body > main .text-stone-700,
  body > footer .text-stone-700 {
    color: var(--theme-muted-text) !important;
  }

  body > header .border-stone-100,
  body > main .border-stone-100,
  body > footer .border-stone-100,
  body > header .border-stone-200,
  body > main .border-stone-200,
  body > footer .border-stone-200,
  body > header .border-stone-300,
  body > main .border-stone-300,
  body > footer .border-stone-300 {
    border-color: var(--theme-border) !important;
  }

  /* Cards can use a different surface token from the page canvas. */
  body > header :is(.bg-white, .bg-\[\#FAF9F6\], .bg-\[\#F7F6F2\], .bg-\[\#F5F4EF\], .bg-\[\#F3F2ED\], .bg-\[\#F2F1EC\]) :is(.text-primary, .text-text-main, .text-\[\#264332\], .text-\[\#1C3A27\]),
  body > main :is(.bg-white, .bg-\[\#FAF9F6\], .bg-\[\#F7F6F2\], .bg-\[\#F5F4EF\], .bg-\[\#F3F2ED\], .bg-\[\#F2F1EC\]):not(main > section) :is(.text-primary, .text-text-main, .text-\[\#264332\], .text-\[\#1C3A27\]),
  body > footer :is(.bg-white, .bg-\[\#FAF9F6\], .bg-\[\#F7F6F2\], .bg-\[\#F5F4EF\], .bg-\[\#F3F2ED\], .bg-\[\#F2F1EC\]) :is(.text-primary, .text-text-main, .text-\[\#264332\], .text-\[\#1C3A27\]) {
    color: var(--theme-card-text) !important;
  }

  body > header :is(.bg-white, .bg-\[\#FAF9F6\], .bg-\[\#F7F6F2\], .bg-\[\#F5F4EF\], .bg-\[\#F3F2ED\], .bg-\[\#F2F1EC\]) :is(.text-stone-400, .text-stone-500, .text-stone-600, .text-stone-700),
  body > main :is(.bg-white, .bg-\[\#FAF9F6\], .bg-\[\#F7F6F2\], .bg-\[\#F5F4EF\], .bg-\[\#F3F2ED\], .bg-\[\#F2F1EC\]):not(main > section) :is(.text-stone-400, .text-stone-500, .text-stone-600, .text-stone-700),
  body > footer :is(.bg-white, .bg-\[\#FAF9F6\], .bg-\[\#F7F6F2\], .bg-\[\#F5F4EF\], .bg-\[\#F3F2ED\], .bg-\[\#F2F1EC\]) :is(.text-stone-400, .text-stone-500, .text-stone-600, .text-stone-700) {
    color: var(--theme-card-muted-text) !important;
  }

  /* Reassert the page canvas after individual utility backgrounds. */
  body > main > section[class] {
    background-color: var(--theme-surface-bg) !important;
  }

  /* Ensure group-hover text-white and hover states win over theme text */
  .group:hover .group-hover\:text-white,
  .group:hover .group-hover\:text-white *,
  .group:hover .group-hover\:bg-primary,
  .group:hover .group-hover\:bg-primary .material-symbols-outlined {
    color: #FFFFFF !important;
  }
}

/* Custom scrollbars & scrollbar removal */
.no-scrollbar::-webkit-scrollbar,
iframe::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}
.no-scrollbar,
iframe {
  -ms-overflow-style: none !important;
  scrollbar-width: none !important;
}
iframe {
  overflow: hidden !important;
  border: 0 !important;
}

/* 4. "KHÁM PHÁ NỘI DUNG" BAND ------------------------------------------- */
/*
  The one intentionally dark section on the storefront.

  Its colours cannot come from Tailwind utilities: the desktop theme layer in
  section 3 repaints every `body > main > section[class]` with the page surface
  colour using !important, which would leave this band's white text sitting on
  a cream background. Declaring it here — after that layer, and with an extra
  attribute selector so specificity wins outright — is what keeps it dark.

  Colours are tokens so the band can be rethemed with the rest of the site
  instead of being hard-coded in the markup.
*/
:root {
  --discover-bg: #0c1c12;
  --discover-card-bg: rgba(17, 35, 24, 0.95);
  --discover-card-bg-hover: rgba(19, 40, 28, 0.98);
  --discover-border: rgba(255, 255, 255, 0.1);
  --discover-text: #FFFFFF;
  --discover-summary: rgba(255, 255, 255, 0.75);
  --discover-muted: rgba(255, 255, 255, 0.5);
  --discover-accent: #6D9559;
  --discover-accent-alt: #6D9559;
  --discover-tag-color: #6D9559;
  --discover-media-bg: rgba(255, 255, 255, 0.05);
}

body > main > section.discover-band[class] {
  background-color: var(--discover-bg) !important;
  color: var(--discover-text);
}

.discover-band .discover-eyebrow {
  color: var(--discover-accent, #6D9559) !important;
}

.discover-band .discover-title,
.discover-band .discover-card-title {
  color: var(--discover-text) !important;
}

.discover-band .discover-summary {
  color: var(--discover-summary) !important;
}

.discover-band .discover-meta {
  color: var(--discover-muted) !important;
}

.discover-band .discover-link {
  color: var(--discover-text) !important;
}

.discover-band .discover-link:hover,
.discover-band .discover-card:hover .discover-card-title {
  color: var(--discover-tag-color, #6D9559) !important;
}

.discover-band .discover-tag {
  color: var(--discover-tag-color, #6D9559) !important;
}

.discover-band .discover-tag-alt {
  color: var(--discover-tag-color, #6D9559) !important;
}

/* `.discover-card` wins over the theme layer's `.bg-white` card rule, which
   would otherwise turn these translucent panels into opaque light cards. */
.discover-band .discover-card {
  background-color: var(--discover-card-bg) !important;
  border-color: var(--discover-border) !important;
  border-radius: 1.5rem !important;
}

.discover-band .discover-card:hover {
  background-color: var(--discover-card-bg-hover) !important;
  border-color: rgba(134, 239, 172, 0.3) !important;
}

.discover-band .discover-divider {
  border-color: var(--discover-border) !important;
}

.discover-band .discover-media {
  background-color: var(--discover-media-bg) !important;
}

/* Discover leaf underline */
.discover-leaf-underline {
  display: none !important;
  position: absolute;
  bottom: -2.875rem !important;
  right: -40px !important;
  height: 4.25rem !important;
  width: auto !important;
  object-fit: contain !important;
  pointer-events: none;
  z-index: 10;
}

@media (min-width: 640px) {
  .discover-leaf-underline {
    display: block !important;
    height: 4.25rem !important;
    bottom: -2.875rem !important;
    right: -40px !important;
  }
}

/* Reels keep a dark plate matching the video player */
.discover-band .discover-reel {
  background-color: #0b170f !important;
  border-color: var(--discover-border) !important;
  overflow: hidden !important;
  box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.45);
}

.discover-band .discover-reel iframe,
.discover-band .discover-reel video {
  overflow: hidden !important;
  border: none !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.reels-slider {
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}

.reels-slider.cursor-grabbing {
  cursor: grabbing !important;
  scroll-behavior: auto !important;
}

/* Posts without a cover image fall back to this instead of stretching the
   wide shop logo into a square crop. */
.discover-band .discover-placeholder {
  background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.03));
  color: rgba(255, 255, 255, 0.35);
}

/* ==========================================================================
   5. Thumbnail slider (product gallery)
   ========================================================================== */

/* A visible scrollbar under the strip would sit right where the arrows are and
   read as a stray line, so the row scrolls without one. Touch devices still
   swipe it; the arrows cover the mouse case. */
.thumb-track {
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* Room for the active thumbnail's ring, which would otherwise be clipped by
     the scroll container's own edge. */
  padding-bottom: 2px;
}

.thumb-track::-webkit-scrollbar {
  display: none;
}

/* ==========================================================================
   6. Selectable chips and cards (product options, payment methods)
   ========================================================================== */

/*
  These carry their colours here rather than in Tailwind utilities because the
  theme layer above forces `.bg-white` and `.text-stone-*` with `!important`.
  A `peer-checked:bg-primary` on the same element loses that fight every time,
  which is why a chosen option used to look exactly like an unchosen one.

  The radio stays the only source of truth: it sits immediately before the
  element it paints, so the highlight can never disagree with what will be
  submitted.
*/
.choice-chip,
.choice-card {
  background-color: var(--theme-card-bg, #FFFFFF);
  border-color: #E7E5E4;
  color: #44403C;
}

.choice-chip:hover,
.choice-card:hover {
  border-color: #264332;
}

input:checked + .choice-chip {
  background-color: #264332;
  border-color: #264332;
  color: #FFFFFF;
}

input:checked + .choice-card {
  border-color: #264332;
  background-color: #F5F4EF;
}

/* Keyboard users get the same ring the rest of the form has, since the radio
   itself is visually hidden on the chips. */
input:focus-visible + .choice-chip,
input:focus-visible + .choice-card {
  outline: 2px solid rgba(38, 67, 50, 0.45);
  outline-offset: 2px;
}

/* ==========================================================================
   5. SUBPAGE HERO BANNERS (HERO CON)
   ========================================================================== */
body > main > section.subpage-hero[class],
main > section.subpage-hero[class],
section.subpage-hero[class],
.subpage-hero {
  background-color: #123F35 !important;
  background-image: url('../images/subpage-hero-bg.png') !important;
  background-position: center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
  position: relative;
  overflow: hidden;
  color: #FFFFFF !important;
}

.subpage-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(14, 45, 38, 0.5) 0%, rgba(10, 32, 27, 0.3) 100%);
  pointer-events: none;
  z-index: 1;
}

.subpage-hero > * {
  position: relative;
  z-index: 2;
}

.subpage-hero h1,
.subpage-hero h2,
.subpage-hero .hero-title,
.subpage-hero .font-serif-title {
  color: #FFFFFF !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}

.subpage-hero p,
.subpage-hero .hero-subtitle,
.subpage-hero .text-stone-600 {
  color: rgba(255, 255, 255, 0.85) !important;
}

.subpage-hero nav,
.subpage-hero .breadcrumb,
.subpage-hero .text-stone-500 {
  color: rgba(255, 255, 255, 0.65) !important;
}

.subpage-hero nav a {
  color: rgba(255, 255, 255, 0.8) !important;
  transition: color 0.2s ease;
}

.subpage-hero nav a:hover {
  color: #FFFFFF !important;
}

.subpage-hero nav span.text-primary,
.subpage-hero nav strong.text-primary {
  color: #FFFFFF !important;
}

.subpage-hero .hero-badge,
.subpage-hero .bg-white.rounded-full,
.subpage-hero [class*="rounded-full"][class*="border-stone-200"] {
  background-color: rgba(255, 255, 255, 0.12) !important;
  color: #FFFFFF !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.subpage-hero .hero-badge span,
.subpage-hero .bg-white.rounded-full span,
.subpage-hero [class*="rounded-full"][class*="border-stone-200"] span {
  color: #FFFFFF !important;
}