/** Shopify CDN: Minification failed

Line 27:12 Expected identifier but found whitespace
Line 27:13 Unexpected "'Your Header Font'"

**/
/*================================================
VARIABLES
=================================================*/
@media (max-width: 576px) { /* $small */
  /* Mobile styles */
}

@media (max-width: 768px) { /* $medium */
  /* Tablet styles */
}

@media (max-width: 992px) { /* $large */
  /* Large tablet styles */
}

/*================================================== 
Typography 
==================================================*/
/* Header Font and Base Font Styles */
/* Replace with actual font-face declarations */
header-font: 'Your Header Font', sans-serif; /* example */
base-font: 'Your Base Font', sans-serif; /* example */

/* Bold and Italic Styles */
font-weight-body--bold: 700;

font-stack-header: 'Your Header Font', sans-serif; /* example */
font-weight-header: normal; /* replace with actual value */
font-style-header: normal; /* replace with actual value */

font-stack-body: 'Your Base Font', sans-serif; /* example */
font-style-body: normal; /* replace with actual value */
font-weight-body: normal; /* replace with actual value */

font-size-header: 24px; /* example */
font-size-base: 16px; /* example */

/*==================================================
Coupon Typography 
==================================================*/
/* Coupon Font Styles */
/* Replace with actual font-face declarations */
coupon-header-font: 'Your Coupon Header Font', sans-serif; /* example */
coupon-base-font: 'Your Coupon Base Font', sans-serif; /* example */

font-weight-body--bold: 700;

font-stack-coupon-header: 'Your Coupon Header Font', sans-serif; /* example */
font-weight-coupon-header: normal; /* replace with actual value */
font-style-coupon-header: normal; /* replace with actual value */

font-stack-coupon-body: 'Your Coupon Base Font', sans-serif; /* example */
font-weight-coupon-body: normal; /* replace with actual value */
font-style-coupon-body: normal; /* replace with actual value */

/*================================================
Color Variables
=================================================*/
color-light-gray: #7d7d7d;

/* Text colors */
color-heading: #000000; /* replace with actual value from settings */
color-link: #0000EE; /* replace with actual value from settings */
color-body-text: #333333; /* replace with actual value from settings */

/* Button colors */
color-btn-primary: #007BFF; /* replace with actual value from settings */
color-btn-primary-text: #FFFFFF; /* replace with actual value from settings */
color-btn-secondary: #6C757D; /* replace with actual value from settings */
color-btn-secondary-text: #FFFFFF; /* replace with actual value from settings */

/* Input fields and label color */
color-input-field-background: #FFFFFF; /* replace with actual value from settings */
color-input-field-color: #000000; /* replace with actual value from settings */
color-input-field-border: #CED4DA; /* replace with actual value from settings */
color-input-field-label: #495057; /* replace with actual value from settings */

/* Site Background color */
color-site-background: #F8F9FA; /* replace with actual value from settings */

/* Sale tag color */
color-sale-tag-background: #FFCC00; /* replace with actual value from settings */
color-sale-tag-color: #FFFFFF; /* replace with actual value from settings */

/* Coupon color */
color-coupon-background: #F00; /* replace with actual value from settings */
color-coupon-cross-btn: #000; /* replace with actual value from settings */

/* Get Discount Popup */
discount-btn-bg-color: #FF5733; /* replace with actual value from settings */
discount-btn-color: #FFFFFF; /* replace with actual value from settings */
discount-newsletter-text-color: #000000; /* replace with actual value from settings */
discount-title-font-size: 24px; /* example */
discount-title-color: #333; /* replace with actual value from settings */
discount-subtitle-font-size: 18px; /* example */
discount-subtitle-color: #666; /* replace with actual value from settings */
discount-coupon-color: #FFF; /* replace with actual value from settings */
discount-coupon-bg-color: #F00; /* replace with actual value from settings */
discount-coupon-btn-bg-color: #007BFF; /* replace with actual value from settings */
discount-coupon-btn-color: #FFFFFF; /* replace with actual value from settings */
discount-coupon-btn-font-size: 16px; /* example */
discount-coupon-checkbox-text-color: #FF5733; /* replace with actual value from settings */

/* Sale Ticker */
sale-ticker-bg-color: #F1F1F1; /* replace with actual value from settings */
sale-ticker-border-color: #CCC; /* replace with actual value from settings */
sale-ticker-text-color: #000; /* replace with actual value from settings */
sale-ticker-product-title-color: #FF0000; /* replace with actual value from settings */
sale-ticker-hours-color: #FF5733; /* replace with actual value from settings */

/* Cookies popup */
cookie-popup-bg-color: #000; /* replace with actual value from settings */
cookie-popup-heading-color: #FFFFFF; /* replace with actual value from settings */
cookie-popup-subheading-color: #CCCCCC; /* replace with actual value from settings */
cookie-popup-link-color: #007BFF; /* replace with actual value from settings */
cookie-popup-btn-bg-color: #007BFF; /* replace with actual value from settings */
cookie-popup-btn-color: #FFFFFF; /* replace with actual value from settings */

/* Upsell product popup */
upsell-title-font-size: 18px; /* example */
upsell-title-font-color: #000; /* replace with actual value from settings */
upsell-btn-bg: #007BFF; /* replace with actual value from settings */
upsell-btn-color: #FFFFFF; /* replace with actual value from settings */
upsell-cart-btn-bg: #28A745; /* replace with actual value from settings */
upsell-cart-btn-color: #FFFFFF; /* replace with actual value from settings */
upsell-checkout-btn-bg: #FF0000; /* replace with actual value from settings */
upsell-checkout-btn-color: #FFFFFF; /* replace with actual value from settings */

/*================================================
MIXINS
=================================================*/
/* Replace with actual CSS styles as needed */
.selectDesign {
  padding: 10px 30px 10px 10px;
  border: 1px solid #CED4DA; /* Replace with actual value */
  background-color: #FFFFFF; /* Replace with actual value */
  color: #000000; /* Replace with actual value */
  max-width: 100%;
  line-height: 1.2;
  border-radius: 2px;
  background-image: url('ico-select.svg'); /* Replace with actual URL */
  background-repeat: no-repeat;
  background-position: right 9px center;
  cursor: pointer;
}

/* Example media queries */
@media screen and (max-width: 576px) {
  /* Styles for small screens */
}

@media screen and (max-width: 768px) {
  /* Styles for medium screens */
}

/*================================================
BASE
=================================================*/
img {
  max-width: 100%;
}

button {
  outline: none;
  border: none;
  background: none;
}

a,
a:hover,
a:focus,
button,
button:hover,
button:focus {
  text-decoration: none;
  color: inherit;
  outline: none;
}

.placeholder-svg {
  display: block;
  fill: rgba(51,50,50,0.35);
  background-color: rgba(51,50,50,0.1);
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  border: 1px solid rgba(51,50,50,0.2);
}

body {
  background-color: #F8F9FA; /* Replace with actual value */
  font-family: 'Your Base Font', sans-serif; /* example */
  font-style: normal; /* Replace with actual value */
  font-weight: normal; /* Replace with actual value */
  font-size: 16px; /* example */
  color: #333333; /* Replace with actual value */
}

html {
  scroll-behavior: smooth;
}

h1, h2, h3, h4, h5, h6 {
  color: #000000; /* Replace with actual value */
  font-family: 'Your Header Font', sans-serif; /* example */
  font-weight: normal; /* Replace with actual value */
  font-style: normal; /* Replace with actual value */
}

/* Responsive font sizes */
@media (max-width: 768px) {
  h1 {
    font-size: 1.8rem;
  }
  h2 {
    font-size: 1.5rem;
  }
  h3 {
    font-size: 1.2rem;
  }
}

a {
  color: #0000EE; /* Replace with actual value */
}

a:hover {
  color: lighten(#0000EE, 30%); /* Use a CSS function if supported, else replace manually */
}

/* Additional styles... */

/*================================================
SLICK SLIDER
=================================================*/
.slick-arrow {
  width: 30px;
  height: 30px;
  z-index: 9;
}

.slick-prev {
  left: 15px;
}

.slick-next {
  right: 15px;
}

.slick-dots li {
  margin: 0 4px;
  width: 12px;
  height: 12px;
}

.slick-dots li button:before {
  content: '';
  width: 12px;
  height: 12px;
  background: rgba(0,0,0,0.6);
  border-radius: 50%;
  opacity: 0.7;
}

.slick-dots li.slick-active button:before {
  background: #000;
}

/* Additional styles... */

/*================================================
CUSTOM COLUMN
=================================================*/
.col--20-percent {
  width: 50%;
}

@media screen and (min-width: 768px) {
  .col--20-percent {
    width: 20%;
  }
}

/* Additional styles... */

/*================================================
HEADER
=================================================*/
.et-header .navbar {
  padding: 1rem 1rem;
}

/* Additional styles... */

/*================================================
FOOTER
=================================================*/
.et-footer-section .et-social-icons li {
  margin-right: 10px;
}

.et-footer-section .et-footer-payment-icons li {
  margin-right: 10px;
  margin-bottom: 5px;
}

.et-footer-section .newsletter--input {
  height: auto !important;
  border: none;
}

/* Additional styles... */

/*================================================
SINGLE PRODUCT
=================================================*/
.et-product-single .et-product-single__media-wrapper .et-image-zoom {
  width: 100%;
}

/* Additional styles... */