/*
 * Enter any custom CSS here.
 * This file will not be overwritten by theme updates.
 *
 * ── Semantic class hooks (sa-*) ────────────────────────────────────────────
 * Every section, snippet and key element carries a stable `sa-` class you can
 * target with plain CSS — no Tailwind rebuild needed. These classes ship with
 * NO styles of their own; they exist purely as selectors for you to hook onto.
 *
 * Page scope   body.sa-tpl-<template>      e.g. .sa-tpl-product, .sa-tpl-shop
 * Chrome       .sa-header .sa-navbar .sa-footer
 *              .sa-navbar-link .sa-navbar-logo .sa-navbar-cart .sa-footer-link
 * Sections     .sa-<component>             e.g. .sa-hero, .sa-features, .sa-faq
 *   variant    .sa-<component>--<variant>  e.g. .sa-hero--split-media
 *   inner      .sa-<component>-title / -subtitle / -eyebrow / -media /
 *              -items / -item / -actions / -link / -price / -badge / -icon
 * Primitives   .sa-btn (+ .sa-btn--<variant>), .sa-section-header
 *              (.sa-section-title / -eyebrow / -subtitle),
 *              .sa-product-card (+ .sa-product-card--<style>,
 *              .sa-product-card-title / -price / -stock / -status),
 *              .sa-product-form + .sa-add-to-cart, .sa-product-gallery,
 *              .sa-cart-panel + .sa-cart-item, .sa-searchbar, .sa-pagination,
 *              .sa-breadcrumbs, .sa-toasts + .sa-toast, .sa-feedback-card
 *
 * Example — bigger hero heading only on the product page:
 *   .sa-tpl-product .sa-hero-title { font-size: 3rem; }
 * ───────────────────────────────────────────────────────────────────────────
*/

.sa-hero-release-notify {
  margin-top: 2.75rem !important;
  padding-top: 2.25rem !important;
}

/* Hero Mobile Image Optimizations */
@media (max-width: 767px) {
  .sa-hero-bg-img {
    object-fit: cover;
    object-position: center center; /* Change focal point on mobile if needed (e.g. top, center, 50% 20%) */
  }

  .sa-hero-side-img {
    max-height: 340px;
    object-fit: cover;
  }
}

/* Password Gate Lock */
html.site-locked, html.site-locked body {
  overflow: hidden !important;
}

html.site-locked #app > div:not(.sa-password-gate) {
  filter: blur(10px);
  pointer-events: none;
  user-select: none;
}

/* Privacy Policy, Terms, Shipping Policy & Refund Policy Markdown Styling */
.sa-page-privacy-policy-body,
.sa-page-terms-body,
.sa-page-shipping-policy-body,
.sa-page-refund-policy-body {
  line-height: 1.75;
  color: var(--cl-text-primary, currentColor);
}

.sa-page-privacy-policy-body h1,
.sa-page-privacy-policy-body .e-heading-h1,
.sa-page-terms-body h1,
.sa-page-terms-body .e-heading-h1,
.sa-page-shipping-policy-body h1,
.sa-page-shipping-policy-body .e-heading-h1,
.sa-page-refund-policy-body h1,
.sa-page-refund-policy-body .e-heading-h1 {
  display: block;
  font-size: 2rem;
  font-weight: 700;
  margin-top: 1.5rem;
  margin-bottom: 1.25rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--cl-border, rgba(150, 150, 150, 0.2));
  letter-spacing: -0.02em;
  scroll-margin-top: 100px;
}

.sa-page-privacy-policy-body h2,
.sa-page-privacy-policy-body .e-heading-h2,
.sa-page-terms-body h2,
.sa-page-terms-body .e-heading-h2,
.sa-page-shipping-policy-body h2,
.sa-page-shipping-policy-body .e-heading-h2,
.sa-page-refund-policy-body h2,
.sa-page-refund-policy-body .e-heading-h2 {
  display: block;
  font-size: 1.45rem;
  font-weight: 700;
  margin-top: 2.25rem;
  margin-bottom: 1rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--cl-border, rgba(150, 150, 150, 0.15));
  letter-spacing: -0.01em;
  scroll-margin-top: 100px;
}

.sa-page-privacy-policy-body h3,
.sa-page-privacy-policy-body .e-heading-h3,
.sa-page-terms-body h3,
.sa-page-terms-body .e-heading-h3,
.sa-page-shipping-policy-body h3,
.sa-page-shipping-policy-body .e-heading-h3,
.sa-page-refund-policy-body h3,
.sa-page-refund-policy-body .e-heading-h3 {
  display: block;
  font-size: 1.15rem;
  font-weight: 600;
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
  scroll-margin-top: 100px;
}

.sa-page-privacy-policy-body p,
.sa-page-privacy-policy-body .e-paragraph,
.sa-page-terms-body p,
.sa-page-terms-body .e-paragraph,
.sa-page-shipping-policy-body p,
.sa-page-shipping-policy-body .e-paragraph,
.sa-page-refund-policy-body p,
.sa-page-refund-policy-body .e-paragraph {
  display: block;
  margin-bottom: 1.25rem;
}

.sa-page-privacy-policy-body strong,
.sa-page-privacy-policy-body .e-text-bold,
.sa-page-terms-body strong,
.sa-page-terms-body .e-text-bold,
.sa-page-shipping-policy-body strong,
.sa-page-shipping-policy-body .e-text-bold,
.sa-page-refund-policy-body strong,
.sa-page-refund-policy-body .e-text-bold {
  font-weight: 600;
  color: var(--cl-text-primary, currentColor);
}

.sa-page-privacy-policy-body em,
.sa-page-privacy-policy-body .e-text-italic,
.sa-page-terms-body em,
.sa-page-terms-body .e-text-italic,
.sa-page-shipping-policy-body em,
.sa-page-shipping-policy-body .e-text-italic,
.sa-page-refund-policy-body em,
.sa-page-refund-policy-body .e-text-italic {
  font-style: italic;
  opacity: 0.9;
}

.sa-page-privacy-policy-body ul,
.sa-page-privacy-policy-body .e-list-ul,
.sa-page-terms-body ul,
.sa-page-terms-body .e-list-ul,
.sa-page-shipping-policy-body ul,
.sa-page-shipping-policy-body .e-list-ul,
.sa-page-refund-policy-body ul,
.sa-page-refund-policy-body .e-list-ul {
  display: block;
  list-style-type: disc;
  margin-left: 1.5rem;
  margin-bottom: 1.5rem;
}

.sa-page-privacy-policy-body ol,
.sa-page-privacy-policy-body .e-list-ol,
.sa-page-terms-body ol,
.sa-page-terms-body .e-list-ol,
.sa-page-shipping-policy-body ol,
.sa-page-shipping-policy-body .e-list-ol,
.sa-page-refund-policy-body ol,
.sa-page-refund-policy-body .e-list-ol {
  display: block;
  list-style-type: decimal;
  margin-left: 1.5rem;
  margin-bottom: 1.5rem;
}

.sa-page-privacy-policy-body li,
.sa-page-privacy-policy-body .e-listitem,
.sa-page-terms-body li,
.sa-page-terms-body .e-listitem,
.sa-page-shipping-policy-body li,
.sa-page-shipping-policy-body .e-listitem,
.sa-page-refund-policy-body li,
.sa-page-refund-policy-body .e-listitem {
  display: list-item;
  margin-bottom: 0.5rem;
  padding-left: 0.25rem;
}

.sa-page-privacy-policy-body a,
.sa-page-privacy-policy-body .e-link,
.sa-page-terms-body a,
.sa-page-terms-body .e-link,
.sa-page-shipping-policy-body a,
.sa-page-shipping-policy-body .e-link,
.sa-page-refund-policy-body a,
.sa-page-refund-policy-body .e-link {
  color: var(--cl-accent, #2B5FE3);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 500;
  transition: opacity 0.2s ease, color 0.2s ease;
}

.sa-page-privacy-policy-body a:hover,
.sa-page-privacy-policy-body .e-link:hover,
.sa-page-terms-body a:hover,
.sa-page-terms-body .e-link:hover,
.sa-page-shipping-policy-body a:hover,
.sa-page-shipping-policy-body .e-link:hover,
.sa-page-refund-policy-body a:hover,
.sa-page-refund-policy-body .e-link:hover {
  opacity: 0.8;
}

.sa-page-privacy-policy-body hr,
.sa-page-terms-body hr,
.sa-page-shipping-policy-body hr,
.sa-page-refund-policy-body hr {
  border: 0;
  height: 1px;
  background: var(--cl-border, rgba(150, 150, 150, 0.2));
  margin: 2.25rem 0;
}

/* Numbered section heading upgrade for P elements */
.sa-section-heading-h2 {
  font-size: 1.45rem !important;
  font-weight: 700 !important;
  margin-top: 2.25rem !important;
  margin-bottom: 1rem !important;
  padding-bottom: 0.4rem !important;
  border-bottom: 1px solid var(--cl-border, rgba(150, 150, 150, 0.15)) !important;
  scroll-margin-top: 100px !important;
  display: block !important;
}

.toc-link,
.sa-page-terms-body a[href^="#"],
.sa-page-privacy-policy-body a[href^="#"],
.sa-page-shipping-policy-body a[href^="#"],
.sa-page-refund-policy-body a[href^="#"] {
  color: var(--cl-accent, #2B5FE3) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
  font-weight: 600 !important;
  transition: opacity 0.2s ease !important;
}

.toc-link:hover,
.sa-page-terms-body a[href^="#"]:hover,
.sa-page-privacy-policy-body a[href^="#"]:hover,
.sa-page-shipping-policy-body a[href^="#"]:hover,
.sa-page-refund-policy-body a[href^="#"]:hover {
  opacity: 0.8 !important;
}

/* Markdown Tables Styling */
.sa-page-privacy-policy-body .table-wrap,
.sa-page-terms-body .table-wrap,
.sa-page-shipping-policy-body .table-wrap,
.sa-page-refund-policy-body .table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 1.75rem 0;
}

.sa-page-privacy-policy-body table,
.sa-page-terms-body table,
.sa-page-shipping-policy-body table,
.sa-page-refund-policy-body table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.875rem;
  border-radius: var(--radius-card, 8px);
  overflow: hidden;
  border: 1px solid var(--cl-border, rgba(150, 150, 150, 0.2));
}

.sa-page-privacy-policy-body th,
.sa-page-terms-body th,
.sa-page-shipping-policy-body th,
.sa-page-refund-policy-body th {
  background-color: var(--cl-surface-raised, rgba(150, 150, 150, 0.08));
  color: var(--cl-text-primary, currentColor);
  font-weight: 600;
  text-align: left;
  padding: 0.85rem 1rem;
  border-bottom: 2px solid var(--cl-border, rgba(150, 150, 150, 0.2));
}

.sa-page-privacy-policy-body td,
.sa-page-terms-body td,
.sa-page-shipping-policy-body td,
.sa-page-refund-policy-body td {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--cl-border, rgba(150, 150, 150, 0.1));
  color: var(--cl-text-primary, currentColor);
  vertical-align: top;
}

.sa-page-privacy-policy-body tr:last-child td,
.sa-page-terms-body tr:last-child td,
.sa-page-shipping-policy-body tr:last-child td,
.sa-page-refund-policy-body tr:last-child td {
  border-bottom: none;
}

.sa-page-privacy-policy-body tr:nth-child(even) td,
.sa-page-terms-body tr:nth-child(even) td,
.sa-page-shipping-policy-body tr:nth-child(even) td,
.sa-page-refund-policy-body tr:nth-child(even) td {
  background-color: rgba(150, 150, 150, 0.03);
}

/* ==========================================================================
   MOBILE-FIRST & INSTAGRAM TRAFFIC ULTRA-LOW FRICTION UX STYLES
   ========================================================================== */

/* Prevent 300ms touch tap delay on interactive controls */
button, input, select, a, .input, .sa-product-card {
  touch-action: manipulation;
}

/* Snappy mobile haptic micro-interactions on tap */
@media (max-width: 1023px) {
  button:active, .sa-btn:active, a.sa-product-card:active {
    transform: scale(0.98);
    transition: transform 0.08s cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* Minimum touch target size (44px) on mobile for key inputs & buttons */
  .sa-product-form button[type="submit"],
  .sa-product-form .sa-add-to-cart,
  .sa-mobile-quick-buy-btn {
    min-height: 48px !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
  }

  .input, input[type="text"], input[type="email"], input[type="number"], select {
    min-height: 44px !important;
    font-size: 16px !important; /* Prevents auto-zoom on iOS Safari/Instagram browser */
  }
}

/* Sticky Bottom Mobile Quick-Purchase Bar */
.sa-sticky-buy-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 45;
  padding: 0.75rem 1rem;
  padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
  background-color: var(--cl-surface, #ffffff);
  border-top: 1px solid var(--cl-border, rgba(150, 150, 150, 0.2));
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Trust & Express Checkout Micro-Bar */
.sa-trust-microbar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 0.6rem 0.85rem;
  border-radius: var(--radius-input, 8px);
  background-color: rgba(var(--cl-accent), 0.05);
  border: 1px dashed rgba(var(--cl-accent), 0.2);
  margin-top: 0.85rem;
}

.sa-trust-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--cl-t-primary);
  white-space: nowrap;
}

.sa-payment-badges-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
  opacity: 0.85;
}

/* Mobile Cart Drawer Optimization */
@media (max-width: 639px) {
  .sa-cart-panel {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Announcement Bar Marquee Animation */
@keyframes announcement-scroll {
  0% { transform: translateX(0%); }
  100% { transform: translateX(-100%); }
}

.animate-announcement-scroll {
  animation: announcement-scroll var(--announcement-duration, 25s) linear infinite;
}