/** Shopify CDN: Minification failed

Line 51:27 Unexpected "*"

**/
/* ============================================
   HAVANA ELEPHANT BRAND - SHOPIFY CUSTOM CSS
   ============================================

   COLOR PALETTE:
   - Dark Navy: #0a1628, #1a2332, #0d1b2a
   - Cyan: #00d9ff, #4dd0e1, #00bcd4
   - Orange: #ff9800, #ffb74d, #ffa726
   - Pink: #ff006e, #f06292, #e91e63
   - Purple: #9c27b0, #8e24aa, #7b1fa2
   ============================================ */

/* ============================================
   1. ROOT VARIABLES - Override Theme Colors
   ============================================ */
:root {
  /* Havana Elephant Brand Colors */
  --color-havana-navy: #0a1628;
  --color-havana-navy-light: #1a2332;
  --color-havana-navy-dark: #0d1b2a;
  --color-havana-cyan: #00d9ff;
  --color-havana-cyan-light: #4dd0e1;
  --color-havana-cyan-dark: #00bcd4;
  --color-havana-orange: #ff9800;
  --color-havana-orange-light: #ffb74d;
  --color-havana-pink: #ff006e;
  --color-havana-purple: #9c27b0;

  /* Override default theme colors */
  --color-base-background-1: #0a1628;
  --color-base-background-2: #1a2332;
  --color-base-text: #ffffff;
  --color-base-accent-1: #00d9ff;
  --color-base-accent-2: #ff9800;
  --gradient-base-background-1: #0a1628;
  --gradient-base-background-2: #1a2332;
  --gradient-base-accent-1: #00d9ff;
  --gradient-base-accent-2: #ff9800;
}

/* ============================================
   2. BODY & GENERAL BACKGROUND
   ============================================ */
body,
.shopify-section,
#shopify-section-template--* {
  background: linear-gradient(to bottom right, #0a1628, #1a2332, #0d1b2a) !important;
  color: #ffffff !important;
}

/* Main content areas */
main,
.main-content,
.page-width,
.container {
  background: transparent !important;
}

/* Section backgrounds */
.section,
section {
  background-color: transparent !important;
}

/* ============================================
   3. HEADER & NAVIGATION
   ============================================ */
.header,
header,
.header-wrapper,
.shopify-section-header {
  background: rgba(26, 35, 50, 0.9) !important;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0, 217, 255, 0.2) !important;
}

/* Navigation links */
.header__menu-item,
.header__menu a,
.header__inline-menu a,
nav a,
.menu__item a {
  color: #ffffff !important;
  transition: color 0.3s ease;
}

.header__menu-item:hover,
.header__menu a:hover,
.header__inline-menu a:hover,
nav a:hover,
.menu__item a:hover {
  color: #00d9ff !important;
}

/* Active menu items */
.header__menu-item.active,
.header__active-menu-item {
  color: #ff9800 !important;
}

/* Logo text */
.header__heading-link,
.header__heading {
  color: #00d9ff !important;
  font-weight: 700;
}

/* ============================================
   4. BUTTONS & CTAs
   ============================================ */
.button,
.btn,
button[type="submit"],
.shopify-payment-button__button,
.product-form__submit,
input[type="submit"],
.cart__checkout-button {
  background: linear-gradient(135deg, #ff9800, #ff006e) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 12px 32px !important;
  font-weight: 600 !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(255, 152, 0, 0.3) !important;
}

.button:hover,
.btn:hover,
button[type="submit"]:hover,
.shopify-payment-button__button:hover,
.product-form__submit:hover,
input[type="submit"]:hover,
.cart__checkout-button:hover {
  box-shadow: 0 8px 20px rgba(255, 152, 0, 0.5) !important;
  transform: translateY(-2px);
}

/* Secondary buttons */
.button--secondary,
.btn--secondary {
  background: transparent !important;
  border: 2px solid #00d9ff !important;
  color: #00d9ff !important;
}

.button--secondary:hover,
.btn--secondary:hover {
  background: rgba(0, 217, 255, 0.1) !important;
  border-color: #00d9ff !important;
}

/* ============================================
   5. PRODUCT CARDS
   ============================================ */
.card,
.product-card,
.card-wrapper,
.collection-card {
  background: rgba(26, 35, 50, 0.6) !important;
  border: 2px solid rgba(0, 217, 255, 0.3) !important;
  border-radius: 16px !important;
  backdrop-filter: blur(10px);
  transition: all 0.3s ease !important;
}

.card:hover,
.product-card:hover,
.card-wrapper:hover,
.collection-card:hover {
  border-color: #00d9ff !important;
  box-shadow: 0 8px 24px rgba(0, 217, 255, 0.3) !important;
  transform: translateY(-4px);
}

/* Product titles */
.card__heading,
.card-information__text,
.product-card__title,
.card__title {
  color: #ffffff !important;
  font-weight: 600;
}

/* Product prices */
.price,
.price__regular,
.price-item {
  color: #ff9800 !important;
  font-weight: 700;
}

.price__sale {
  color: #ff006e !important;
}

/* Compare at price */
.price__regular s,
.price--on-sale .price-item--regular {
  color: #4dd0e1 !important;
  opacity: 0.7;
}

/* ============================================
   6. FORMS & INPUTS
   ============================================ */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="search"],
input[type="number"],
textarea,
select,
.field__input {
  background: rgba(13, 27, 42, 0.6) !important;
  border: 1px solid rgba(0, 217, 255, 0.3) !important;
  color: #ffffff !important;
  border-radius: 8px !important;
  padding: 12px 16px !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus,
.field__input:focus {
  border-color: #00d9ff !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(0, 217, 255, 0.1) !important;
}

/* Form labels */
label,
.field__label {
  color: #4dd0e1 !important;
  font-weight: 500;
}

/* Placeholder text */
::placeholder {
  color: rgba(77, 208, 225, 0.5) !important;
}

/* ============================================
   7. FOOTER
   ============================================ */
.footer,
footer,
.shopify-section-footer {
  background: #0d1b2a !important;
  border-top: 1px solid rgba(0, 217, 255, 0.2) !important;
  color: #4dd0e1 !important;
}

.footer__heading,
.footer h2,
.footer h3,
.footer h4 {
  color: #ff9800 !important;
}

.footer a {
  color: #4dd0e1 !important;
  transition: color 0.3s ease;
}

.footer a:hover {
  color: #00d9ff !important;
}

/* Footer bottom / copyright */
.footer__content-bottom,
.footer__copyright {
  color: rgba(77, 208, 225, 0.7) !important;
}

/* ============================================
   8. BADGES & TAGS
   ============================================ */
.badge,
.card__badge,
.product__badge {
  background: linear-gradient(135deg, #00d9ff, #9c27b0) !important;
  color: #ffffff !important;
  border: none !important;
  font-weight: 600;
}

/* Sale badges */
.badge--sale {
  background: linear-gradient(135deg, #ff9800, #ff006e) !important;
}

/* ============================================
   9. CART & CHECKOUT
   ============================================ */
.cart-drawer,
.cart-notification,
.drawer,
.cart {
  background: #1a2332 !important;
  color: #ffffff !important;
  border: 1px solid rgba(0, 217, 255, 0.3) !important;
}

.cart-item,
.cart__item {
  border-bottom: 1px solid rgba(0, 217, 255, 0.2) !important;
}

.cart__item-title,
.cart-item__name {
  color: #ffffff !important;
}

.cart__item-sub {
  color: #4dd0e1 !important;
}

/* Cart totals */
.totals,
.cart-total,
.totals__subtotal {
  color: #ff9800 !important;
  font-weight: 700;
  font-size: 1.2em;
}

/* ============================================
   10. ANNOUNCEMENT BAR
   ============================================ */
.announcement-bar,
.shopify-section-announcement-bar {
  background: linear-gradient(135deg, #ff9800, #ff006e) !important;
  color: #ffffff !important;
  border-bottom: 1px solid rgba(0, 217, 255, 0.2) !important;
}

.announcement-bar__message {
  color: #ffffff !important;
  font-weight: 600;
}

/* ============================================
   11. PRODUCT PAGE
   ============================================ */
.product,
.product__info-container {
  background: transparent !important;
}

.product__title,
.product-title {
  color: #ffffff !important;
  font-weight: 700;
  font-size: 2em;
}

.product__description,
.product-description {
  color: #4dd0e1 !important;
  line-height: 1.6;
}

/* Product options */
.product-form__input,
.variant-wrapper {
  color: #ffffff !important;
}

.variant-input-wrapper label {
  background: rgba(26, 35, 50, 0.6) !important;
  border: 2px solid rgba(0, 217, 255, 0.3) !important;
  color: #ffffff !important;
}

.variant-input-wrapper input:checked + label {
  border-color: #00d9ff !important;
  background: rgba(0, 217, 255, 0.2) !important;
}

/* ============================================
   12. COLLECTIONS & FILTERS
   ============================================ */
.collection-hero,
.collection__title {
  color: #ffffff !important;
  font-weight: 700;
}

.facets-container,
.facet-filters {
  background: rgba(26, 35, 50, 0.6) !important;
  border: 2px solid rgba(0, 217, 255, 0.3) !important;
  border-radius: 12px;
  padding: 20px;
}

.facets__heading {
  color: #ff9800 !important;
}

.facets__summary {
  color: #ffffff !important;
}

/* Filter checkboxes */
input[type="checkbox"] + label {
  color: #4dd0e1 !important;
}

/* ============================================
   13. BREADCRUMBS
   ============================================ */
.breadcrumbs,
.breadcrumb {
  color: #4dd0e1 !important;
}

.breadcrumbs a,
.breadcrumb a {
  color: #4dd0e1 !important;
}

.breadcrumbs a:hover,
.breadcrumb a:hover {
  color: #00d9ff !important;
}

/* ============================================
   14. MODALS & POPUPS
   ============================================ */
.modal,
.popup,
.overlay,
.modal__inner {
  background: #1a2332 !important;
  border: 2px solid rgba(0, 217, 255, 0.3) !important;
  border-radius: 16px;
}

.modal__close-button,
.popup__close {
  color: #ff9800 !important;
}

/* ============================================
   15. PAGINATION
   ============================================ */
.pagination,
.pagination-wrapper {
  color: #ffffff !important;
}

.pagination__item,
.pagination a {
  background: rgba(26, 35, 50, 0.6) !important;
  border: 2px solid rgba(0, 217, 255, 0.3) !important;
  color: #ffffff !important;
  border-radius: 8px;
}

.pagination__item--current,
.pagination a:hover {
  border-color: #00d9ff !important;
  background: rgba(0, 217, 255, 0.2) !important;
}

/* ============================================
   16. SEARCH
   ============================================ */
.search,
.search-modal,
.predictive-search {
  background: #1a2332 !important;
  border: 2px solid rgba(0, 217, 255, 0.3) !important;
}

.search__input,
.search-modal__input {
  background: rgba(13, 27, 42, 0.6) !important;
  color: #ffffff !important;
  border: 1px solid rgba(0, 217, 255, 0.3) !important;
}

.predictive-search__item {
  color: #ffffff !important;
  border-bottom: 1px solid rgba(0, 217, 255, 0.2) !important;
}

.predictive-search__item:hover {
  background: rgba(0, 217, 255, 0.1) !important;
}

/* ============================================
   17. TABLES
   ============================================ */
table {
  background: rgba(26, 35, 50, 0.6) !important;
  border: 2px solid rgba(0, 217, 255, 0.3) !important;
  border-radius: 12px;
}

th {
  background: linear-gradient(135deg, #ff9800, #ff006e) !important;
  color: #ffffff !important;
  font-weight: 700;
}

td {
  color: #ffffff !important;
  border-bottom: 1px solid rgba(0, 217, 255, 0.2) !important;
}

tr:hover {
  background: rgba(0, 217, 255, 0.1) !important;
}

/* ============================================
   18. NEWSLETTER SIGNUP
   ============================================ */
.newsletter,
.newsletter-form {
  background: rgba(26, 35, 50, 0.6) !important;
  border: 2px solid rgba(0, 217, 255, 0.3) !important;
  border-radius: 16px;
  padding: 32px;
}

.newsletter__heading {
  color: #ffffff !important;
  font-weight: 700;
}

.newsletter__subheading {
  color: #4dd0e1 !important;
}

/* ============================================
   19. TESTIMONIALS & REVIEWS
   ============================================ */
.testimonial,
.review,
.testimonial-card {
  background: rgba(26, 35, 50, 0.6) !important;
  border: 2px solid rgba(0, 217, 255, 0.3) !important;
  border-radius: 16px;
  padding: 24px;
}

.review__author,
.testimonial__author {
  color: #ff9800 !important;
  font-weight: 600;
}

.review__text,
.testimonial__text {
  color: #4dd0e1 !important;
}

/* Star ratings */
.stars,
.rating {
  color: #ff9800 !important;
}

/* ============================================
   20. SOCIAL MEDIA ICONS
   ============================================ */
.social-icons a,
.footer__social a {
  color: #00d9ff !important;
  transition: color 0.3s ease;
}

.social-icons a:hover,
.footer__social a:hover {
  color: #ff9800 !important;
}

/* ============================================
   21. MISC ELEMENTS
   ============================================ */

/* Dividers */
hr,
.divider {
  border-color: rgba(0, 217, 255, 0.2) !important;
}

/* Links */
a {
  color: #00d9ff !important;
  transition: color 0.3s ease;
}

a:hover {
  color: #ff9800 !important;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  color: #ffffff !important;
  font-weight: 700;
}

/* Paragraphs */
p {
  color: #4dd0e1 !important;
}

/* Text emphasis */
strong, b {
  color: #ff9800 !important;
}

em, i {
  color: #4dd0e1 !important;
}

/* ============================================
   22. RESPONSIVE ADJUSTMENTS
   ============================================ */
@media (max-width: 749px) {
  /* Mobile menu */
  .mobile-menu,
  .menu-drawer {
    background: #1a2332 !important;
    border-right: 2px solid rgba(0, 217, 255, 0.3) !important;
  }

  /* Mobile product cards - reduce padding */
  .card,
  .product-card {
    padding: 12px !important;
  }
}

/* ============================================
   23. ACCESSIBILITY IMPROVEMENTS
   ============================================ */

/* Focus states for keyboard navigation */
*:focus-visible {
  outline: 3px solid #00d9ff !important;
  outline-offset: 2px;
}

/* Skip to content link */
.skip-to-content-link:focus {
  background: #ff9800 !important;
  color: #ffffff !important;
}

/* ============================================
   END OF CUSTOM CSS
   ============================================ */