/* ==========================================================================
   LOMA MOTION & MICRO-INTERACTION SYSTEM (CỎ MỀM HOMELAB STYLE)
   ========================================================================== */

/* ── 1. Duolingo Brand Typography System (Numbers, Badges & Tactile Actions) ── */
@font-face {
  font-family: 'Duolingo-Feather';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/duolingo-feather-bold.woff2') format('woff2');
}
@font-face {
  font-family: 'Duolingo-Feather';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/fonts/duolingo-feather-bold.woff2') format('woff2');
}
@font-face {
  font-family: 'Duolingo-Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/duolingo-sans.woff2') format('woff2');
}
@font-face {
  font-family: 'Duolingo-Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/duolingo-sans.woff2') format('woff2');
}
@font-face {
  font-family: 'Duolingo-Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/duolingo-sans-italic.woff2') format('woff2');
}

/* ── SVN-Gilroy Brand Authority Font Family ── */
@font-face {
  font-family: 'SVN-Gilroy';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/svn-gilroy_regular_5edbb2.ttf') format('truetype');
}
@font-face {
  font-family: 'SVN-Gilroy';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/svn-gilroy_medium_4b339e.ttf') format('truetype');
}
@font-face {
  font-family: 'SVN-Gilroy';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/svn-gilroy_med_995e4e.ttf') format('truetype');
}
@font-face {
  font-family: 'SVN-Gilroy';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/svn-gilroy_semibold_852ce5.ttf') format('truetype');
}

:root {
  --font-duo-heading: 'Duolingo-Feather', 'SVN-Gilroy', 'Be Vietnam Pro', sans-serif;
  --font-duo-button: 'Duolingo-Feather', 'SVN-Gilroy', 'Be Vietnam Pro', sans-serif;
  --font-duo-sans: 'Duolingo-Sans', 'SVN-Gilroy', 'Be Vietnam Pro', sans-serif;
}

/* Duolingo Typography Utilities */
.font-duo-heading {
  font-family: var(--font-duo-heading) !important;
}
.font-duo-button {
  font-family: var(--font-duo-button) !important;
}
.font-duo-sans {
  font-family: var(--font-duo-sans) !important;
}

/* Prices use the storefront typeface for clear, stable numerals. */
.price,
.variant-price,
.old-price,
.variant-old,
.mini-cart-price,
.mini-cart-total strong,
.related-price,
.loma-product-card strong,
#cartTotalText,
#cartSubtotalText,
#cartDiscountText,
.font-duo-price {
  font-family: 'SVN-Gilroy', 'Segoe UI', Arial, sans-serif !important;
  letter-spacing: 0;
}

/* Strategic Elements - Badges & Discount Chips */
.sale-chip,
.loma-badge-sale,
.loma-badge-new,
.discount,
.cart-dot,
#cartBadge,
#cartTotalItems,
.badge-count {
  font-family: 'Duolingo-Feather', 'SVN-Gilroy', 'Be Vietnam Pro', sans-serif !important;
  letter-spacing: 0.2px;
}

/* Strategic Elements - Primary Action Buttons with 3D tactile press */
.btn-primary,
.mobile-buy .btn-primary,
.btn-buy-trigger,
#submitOrderBtn,
.mini-cart-button {
  font-family: 'Duolingo-Feather', 'SVN-Gilroy', 'Be Vietnam Pro', sans-serif !important;
  letter-spacing: 0.3px;
  position: relative;
  border-bottom: 3.5px solid #172516 !important;
  box-shadow: 0 4px 12px rgba(40, 89, 29, 0.22);
  transition: transform 0.15s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.15s cubic-bezier(0.16, 1, 0.3, 1),
              border-bottom-width 0.1s ease !important;
}

.btn-primary:hover,
.mobile-buy .btn-primary:hover,
.btn-buy-trigger:hover,
#submitOrderBtn:hover,
.mini-cart-button:hover {
  transform: translateY(-1.5px) !important;
  box-shadow: 0 6px 16px rgba(40, 89, 29, 0.28) !important;
}

.btn-primary:active,
.mobile-buy .btn-primary:active,
.btn-buy-trigger:active,
#submitOrderBtn:active,
.mini-cart-button:active {
  transform: translateY(2px) scale(0.985) !important;
  border-bottom-width: 1.5px !important;
  box-shadow: 0 1px 4px rgba(40, 89, 29, 0.16) !important;
}

/* Secondary CTA buttons (tactile bottom edge) */
.btn-secondary,
.mobile-buy .btn-secondary {
  font-family: 'Duolingo-Feather', 'SVN-Gilroy', 'Be Vietnam Pro', sans-serif !important;
  letter-spacing: 0.3px;
  border: 1.5px solid var(--green, #20351F) !important;
  border-bottom: 3.5px solid var(--green, #20351F) !important;
  transition: transform 0.15s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.15s cubic-bezier(0.16, 1, 0.3, 1),
              border-bottom-width 0.1s ease !important;
}

.btn-secondary:hover,
.mobile-buy .btn-secondary:hover {
  transform: translateY(-1.5px) !important;
  box-shadow: 0 4px 12px rgba(40, 89, 29, 0.12) !important;
}

.btn-secondary:active,
.mobile-buy .btn-secondary:active {
  transform: translateY(2px) scale(0.985) !important;
  border-bottom-width: 1.5px !important;
}

/* Keep the page shell stable on reload. Section-level reveals provide motion. */

/* ── 2. Top Slim Progress Bar (0ms Perceived Performance) ── */
#site-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, #20351F, #5B7D45, #f59e0b);
  z-index: 9999999;
  width: 0%;
  opacity: 0;
  transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
  pointer-events: none;
}
#site-progress-bar.loading {
  opacity: 1;
  width: 80%;
}
#site-progress-bar.done {
  width: 100%;
  opacity: 0;
}

/* ── 3. Tactile Button Micro-interactions (Hover, Pressed & Active) ── */
button,
input[type="button"],
input[type="submit"],
.btn,
.btn-primary,
.btn-order-primary,
.btn-order-outline,
.btn-comem-copy,
.primary-btn,
.addCart,
.quickBuy,
.mobile-tab-pill,
.mobile-icon-btn,
.sidebar-menu-link,
.order-tab-btn,
.menuBottom_item,
.gotoTop,
.back-link,
.site-footer .footer-form__button,
.header-search__button {
  transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.18s cubic-bezier(0.16, 1, 0.3, 1),
              background-color 0.18s ease,
              border-color 0.18s ease,
              color 0.18s ease,
              opacity 0.18s ease !important;
  touch-action: manipulation;
}

/* Pressed State (:active) - Tactile Feedback */
button:active,
input[type="button"]:active,
input[type="submit"]:active,
.btn:active,
.btn-primary:active,
.btn-order-primary:active,
.btn-order-outline:active,
.btn-comem-copy:active,
.primary-btn:active,
.addCart:active,
.quickBuy:active,
.mobile-tab-pill:active,
.mobile-icon-btn:active,
.sidebar-menu-link:active,
.order-tab-btn:active,
.menuBottom_item:active,
.gotoTop:active,
.back-link:active,
.site-footer .footer-form__button:active {
  transform: scale(0.97) translateY(1px) !important;
}

/* Hover State Enhancements */
.btn-order-primary:hover,
.primary-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 5px 15px rgba(36, 75, 27, 0.22);
}
.btn-order-outline:hover {
  transform: translateY(-1px);
}

/* ── 4. Universal Loading Spinner (.is-loading & .btn-loading) ── */
.is-loading,
button.is-loading,
.btn-loading {
  pointer-events: none !important;
  position: relative !important;
  color: transparent !important;
  cursor: wait !important;
  opacity: 0.85 !important;
}
.is-loading::after,
button.is-loading::after,
.btn-loading::after {
  content: '' !important;
  position: absolute !important;
  width: 18px !important;
  height: 18px !important;
  top: 50% !important;
  left: 50% !important;
  margin-top: -9px !important;
  margin-left: -9px !important;
  border: 2px solid rgba(255, 255, 255, 0.35) !important;
  border-top-color: #ffffff !important;
  border-radius: 50% !important;
  animation: lomaSpin 0.6s linear infinite !important;
  box-sizing: border-box !important;
}
.btn-outline.is-loading::after,
.btn-order-outline.is-loading::after,
button.bg-white.is-loading::after {
  border: 2px solid rgba(32,53,31, 0.2) !important;
  border-top-color: #20351F !important;
}
@keyframes lomaSpin {
  to { transform: rotate(360deg); }
}

/* ── 5. Botanical Skeleton Shimmer ── */
.skeleton-shimmer,
.skeleton {
  background: linear-gradient(90deg, #F4F7F2 25%, #e5ecdd 37%, #F4F7F2 63%) !important;
  background-size: 400% 100% !important;
  animation: lomaSkeleton 1.5s ease infinite !important;
  border-radius: 8px;
}
@keyframes lomaSkeleton {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

/* ── 6. Product Card Micro-interactions ── */
.product-box_item,
.home-product__item {
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.2s ease !important;
}
.product-box_item:hover,
.home-product__item:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 28px rgba(32,53,31, 0.1) !important;
}

/* ── 7. Accessibility: prefers-reduced-motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  button, input, a, .product-box_item {
    transform: none !important;
    transition: none !important;
  }
}
/* Keep legacy green raster header icons aligned with the premium blue theme. */
img[src*="storeV2_0369ae.png"],
a:hover img[src*="storeV2_0369ae.png"],
a:focus-visible img[src*="storeV2_0369ae.png"] {
  filter: brightness(0) saturate(100%) invert(25%) sepia(55%) saturate(1650%) hue-rotate(177deg) brightness(86%) contrast(92%);
}