/** Shopify CDN: Minification failed

Line 252:13 Expected identifier but found whitespace
Line 252:14 Unexpected "var("

**/
/**
 * Scroll Announcement Bar Styles
 * File: assets/scroll-announcement-bar.css
 * 
 * For Ashluxe Shopify Store
 * Continuous scrolling announcement bar
 */

/* ============================================
   MAIN CONTAINER
   ============================================ */

.scroll-announcement-bar-wrapper {
  position: relative;
  background: var(--scroll-announcement-bg-color);
  color: var(--scroll-announcement-text-color);
  font-size: var(--scroll-announcement-font-size);
  font-weight: var(--scroll-announcement-font-weight);
  z-index: 1000;
  overflow: hidden;
  white-space: nowrap;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  font-family: inherit;
}

/* Optional gradient background */
.scroll-announcement-bar-wrapper[data-gradient="true"] {
  background: linear-gradient(
    90deg,
    var(--scroll-announcement-bg-color) 0%,
    var(--scroll-announcement-gradient-color, #333333) 50%,
    var(--scroll-announcement-bg-color) 100%
  );
}

/* ============================================
   CONTENT CONTAINER
   ============================================ */

.scroll-announcement-bar-content {
  display: flex;
  align-items: center;
  height: var(--scroll-announcement-height);
  animation: scroll-continuous var(--scroll-announcement-speed) linear infinite;
  will-change: transform;
}

.scroll-announcement-bar-text {
  display: inline-flex;
  align-items: center;
  padding-right: 300px; /* Match the larger spacing */
  white-space: nowrap;
}

.scroll-announcement-message {
  margin-right: 300px; /* 10x larger spacing between message instances */
  display: flex;
  align-items: center;
  white-space: nowrap;
}

/* Spacing between individual content items within each message */
.message-content {
  margin-right: 300px; /* Same large spacing between content items */
}

.message-content:last-child {
  margin-right: 0; /* Remove margin from the last content item */
}

/* Remove separator styles - no longer needed */

/* Links styling */
.scroll-announcement-bar-wrapper a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: opacity 0.2s ease;
}

.scroll-announcement-bar-wrapper a:hover {
  opacity: 0.8;
}

/* ============================================
   POSITIONING VARIATIONS
   ============================================ */

/* Sticky positioning (fixed to top) */
.scroll-announcement-bar-wrapper.sticky {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
}

/* Static positioning (flows with content) */
.scroll-announcement-bar-wrapper.static {
  position: relative;
  z-index: 1000;
}

/* ============================================
   ANIMATIONS
   ============================================ */

@keyframes scroll-continuous {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(-100%);
  }
}

/* Pause animation on hover */
.scroll-announcement-bar-wrapper:hover .scroll-announcement-bar-content {
  animation-play-state: var(--scroll-announcement-pause-on-hover);
}

/* Smooth transitions */
.scroll-announcement-bar-wrapper * {
  transition: opacity 0.2s ease;
}

/* ============================================
   VISIBILITY STATES
   ============================================ */

.scroll-announcement-bar-wrapper.hidden {
  display: none;
}

/* ============================================
   MOBILE RESPONSIVENESS
   ============================================ */

@media screen and (max-width: 768px) {
  .scroll-announcement-bar-wrapper {
    font-size: var(--scroll-announcement-mobile-font-size);
  }
  
  .scroll-announcement-bar-content {
    height: var(--scroll-announcement-mobile-height);
    animation-duration: var(--scroll-announcement-mobile-speed);
  }
  
  .scroll-announcement-message {
    margin-right: 200px; /* Reduced but still large spacing for mobile */
  }
  
  .message-content {
    margin-right: 200px; /* Same spacing between content items on mobile */
  }
  
  .scroll-announcement-bar-text {
    padding-right: 200px; /* Match mobile spacing */
  }
}

/* ============================================
   TABLET RESPONSIVENESS
   ============================================ */

@media screen and (min-width: 769px) and (max-width: 1024px) {
  .scroll-announcement-bar-wrapper {
    font-size: calc(var(--scroll-announcement-font-size) * 0.9);
  }
  
  .scroll-announcement-message {
    margin-right: 250px; /* Medium spacing for tablet */
  }
  
  .message-content {
    margin-right: 250px; /* Same spacing between content items on tablet */
  }
}

/* ============================================
   ACCESSIBILITY
   ============================================ */

/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
  .scroll-announcement-bar-content {
    animation-duration: calc(var(--scroll-announcement-speed) * 3);
  }
  
  @media screen and (max-width: 768px) {
    .scroll-announcement-bar-content {
      animation-duration: calc(var(--scroll-announcement-mobile-speed) * 3);
    }
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .scroll-announcement-bar-wrapper {
    border-bottom: 2px solid;
  }
}

/* Focus management */
.scroll-announcement-bar-wrapper:focus-within {
  outline: none;
}

/* ============================================
   THEME INTEGRATION
   ============================================ */

/* Match common Shopify theme patterns */
.scroll-announcement-bar-wrapper {
  letter-spacing: 0.5px;
}

/* Ensure compatibility with sticky headers */
.sticky-header ~ .scroll-announcement-bar-wrapper,
.header-sticky ~ .scroll-announcement-bar-wrapper {
  position: relative;
  z-index: 999;
}

/* ============================================
   PERFORMANCE OPTIMIZATIONS
   ============================================ */

.scroll-announcement-bar-content {
  backface-visibility: hidden;
  perspective: 1000px;
}

.scroll-announcement-bar-text {
  will-change: transform;
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
  .scroll-announcement-bar-wrapper {
    display: none;
  }
}-play-state: var(--announcement-pause-on-hover);
}

/* Smooth transitions */
.announcement-bar-wrapper * {
  transition: opacity 0.2s ease;
}

/* ============================================
   VISIBILITY STATES
   ============================================ */

.announcement-bar-wrapper.hidden {
  display: none;
}

.announcement-bar-wrapper.closing {
  animation: slideUp 0.3s ease-out forwards;
}

@keyframes slideUp {
  from {
    height: var(--announcement-height);
    opacity: 1;
  }
  to {
    height: 0;
    opacity: 0;
  }
}

/* ============================================
   MOBILE RESPONSIVENESS
   ============================================ */

@media screen and (max-width: 768px) {
  .announcement-bar-wrapper {
    font-size: var(--announcement-mobile-font-size);
  }
  
  .announcement-bar-content {
    height: var(--announcement-mobile-height);
    animation-duration: var(--announcement-mobile-speed);
  }
  
  .announcement-close {
    right: 10px;
    font-size: 16px;
    padding: 6px;
  }
  
  .announcement-close svg {
    width: 10px;
    height: 10px;
  }
  
  .announcement-message {
    margin-right: 30px;
  }
  
  .announcement-bar-text .separator {
    margin: 0 20px;
    font-size: 0.8em;
  }
  
  .announcement-bar-text {
    padding-right: 80px;
  }
}

/* ============================================
   TABLET RESPONSIVENESS
   ============================================ */

@media screen and (min-width: 769px) and (max-width: 1024px) {
  .announcement-bar-wrapper {
    font-size: calc(var(--announcement-font-size) * 0.9);
  }
  
  .announcement-close {
    right: 12px;
  }
  
  .announcement-message {
    margin-right: 40px;
  }
  
  .announcement-bar-text .separator {
    margin: 0 25px;
  }
}

/* ============================================
   ACCESSIBILITY
   ============================================ */

/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
  .announcement-bar-content {
    animation-duration: calc(var(--announcement-speed) * 3);
  }
  
  @media screen and (max-width: 768px) {
    .announcement-bar-content {
      animation-duration: calc(var(--announcement-mobile-speed) * 3);
    }
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .announcement-bar-wrapper {
    border-bottom: 2px solid;
  }
  
  .announcement-close {
    border: 1px solid;
  }
}

/* Focus management */
.announcement-bar-wrapper:focus-within {
  outline: none;
}

/* ============================================
   THEME INTEGRATION
   ============================================ */

/* Match common Shopify theme patterns */
.announcement-bar-wrapper {
  letter-spacing: 0.5px;
}

/* Ensure compatibility with sticky headers */
.sticky-header ~ .announcement-bar-wrapper,
.header-sticky ~ .announcement-bar-wrapper {
  position: relative;
  z-index: 999;
}

/* ============================================
   PERFORMANCE OPTIMIZATIONS
   ============================================ */

.announcement-bar-content {
  backface-visibility: hidden;
  perspective: 1000px;
}

.announcement-bar-text {
  will-change: transform;
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
  .announcement-bar-wrapper {
    display: none;
  }
}