/*
Theme Name: Misfits Adventure - Eileen Kennedy
Theme URI: https://eileenkennedybooks.com
Author: Eileen Kennedy / Theme Studio
Author URI: https://eileenkennedybooks.com
Description: Official Dark Fantasy Children's Book Showcase theme featuring rich glassmorphism UI, 3D interactive book mockups, character lore vault, interactive reader cart, and animated canvas effects.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: misfits-adventure
Tags: dark-theme, children-book, book-showcase, custom-colors, custom-menu, featured-images, full-width-template, theme-options
*/

/* 3D Stylized Gradient Typography */
.title-glow {
  background: linear-gradient(135deg, #FFD166 0%, #FF8A00 40%, #FF3D71 80%, #7C3AED 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 4px 18px rgba(247, 168, 35, 0.3));
}
.title-glow-cyan {
  background: linear-gradient(135deg, #A7F3D0 0%, #00E676 40%, #00B0FF 80%, #818CF8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 4px 18px rgba(0, 230, 118, 0.3));
}

/* Glassmorphism Classes */
.glass-panel {
  background: rgba(14, 17, 31, 0.7);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.glass-card-hover {
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.glass-card-hover:hover {
  transform: translateY(-6px);
  background: rgba(20, 24, 41, 0.85);
  border-color: rgba(247, 168, 35, 0.4);
  box-shadow: 0 25px 50px -10px rgba(247, 168, 35, 0.25), 0 0 25px rgba(255, 61, 113, 0.15);
}

/* Rainbow Ribbon Border Strip */
.rainbow-strip {
  background: linear-gradient(90deg, #FF3D71, #FF8A00, #F7A823, #00E676, #00B0FF, #7C3AED, #FF3D71);
  background-size: 300% 100%;
  animation: rainbowShift 8s linear infinite;
}
@keyframes rainbowShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

/* 3D Realistic Book Transforms */
.book-3d-left {
  transform: perspective(1400px) rotateY(-18deg) rotateX(6deg) rotateZ(-3deg);
  box-shadow: -20px 25px 45px rgba(0, 0, 0, 0.8), 0 0 35px rgba(247, 168, 35, 0.25);
  transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.book-3d-left:hover {
  transform: perspective(1400px) rotateY(-4deg) rotateX(2deg) translateY(-14px) scale(1.03);
  box-shadow: -25px 35px 60px rgba(0, 0, 0, 0.9), 0 0 50px rgba(247, 168, 35, 0.5);
}

.book-3d-right {
  transform: perspective(1400px) rotateY(18deg) rotateX(6deg) rotateZ(3deg);
  box-shadow: 20px 25px 45px rgba(0, 0, 0, 0.8), 0 0 35px rgba(0, 176, 255, 0.25);
  transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.book-3d-right:hover {
  transform: perspective(1400px) rotateY(4deg) rotateX(2deg) translateY(-14px) scale(1.03);
  box-shadow: 25px 35px 60px rgba(0, 0, 0, 0.9), 0 0 50px rgba(0, 176, 255, 0.5);
}

/* Custom Scrollbar for Dark Theme */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: #090B14;
}
::-webkit-scrollbar-thumb {
  background: #1F243B;
  border-radius: 9999px;
  border: 2px solid #090B14;
}
::-webkit-scrollbar-thumb:hover {
  background: #F7A823;
}

/* Hide scrollbar for character carousel on clean browsers */
.scrollbar-none::-webkit-scrollbar {
  display: none;
}
.scrollbar-none {
  -ms-overflow-style: none;
  scrollbar-width: none;
}


/* Transparent Header Overlay on Hero Background */
.site-header-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 999 !important;
    pointer-events: none !important;
}

.site-header-overlay > *,
.site-header-overlay header,
.site-header-overlay nav,
.site-header-overlay .rainbow-strip,
.site-header-overlay a,
.site-header-overlay button {
    pointer-events: auto !important;
}

body.home main,
body main.relative,
.elementor-content-wrapper {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

#hero-section {
    padding-top: 150px !important;
}

@media (min-width: 768px) {
    #hero-section {
        padding-top: 175px !important;
    }
}


/* ==========================================================================
   COMPLETE UNIVERSAL RESPONSIVE ENGINE (MOBILE, TABLET, LAPTOP, DESKTOP, 4K)
   ========================================================================== */

/* 1. Viewport & Body Overflow Protection */
html, body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
  width: 100% !important;
  position: relative;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scroll-behavior: smooth;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
}

img, video, iframe, canvas {
  max-width: 100%;
  height: auto;
}

/* 2. Fluid Responsive Typography */
h1, h2, h3, h4, .font-title {
  word-break: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
}

/* 3. Header & Navigation Responsiveness */
.site-header-overlay {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 999 !important;
  pointer-events: none !important;
}

.site-header-overlay > *,
.site-header-overlay header,
.site-header-overlay nav,
.site-header-overlay a,
.site-header-overlay button,
.site-header-overlay #mobile-menu {
  pointer-events: auto !important;
}

/* 4. Desktop Screens (1024px+) */
@media (min-width: 1024px) {
  #hero-section {
    padding-top: 165px !important;
  }
}

/* 5. Tablets & Medium Screens (768px to 1023px) */
@media (max-width: 1023px) and (min-width: 768px) {
  #hero-section {
    padding-top: 145px !important;
    padding-bottom: 50px !important;
  }
  .book-3d-left {
    transform: perspective(1000px) rotateY(-10deg) rotateX(3deg) scale(0.95) !important;
  }
  .book-3d-right {
    transform: perspective(1000px) rotateY(10deg) rotateX(3deg) scale(0.95) !important;
  }
  .grid-cols-3 {
    gap: 1rem !important;
  }
}

/* 6. Mobile Devices (< 768px) */
@media (max-width: 767px) {
  .rainbow-strip {
    font-size: 10.5px !important;
    padding: 6px 10px !important;
    line-height: 1.35 !important;
    text-align: center !important;
  }
  
  .site-header-overlay header {
    padding-left: 10px !important;
    padding-right: 10px !important;
    top: 2px !important;
  }
  
  .site-header-overlay nav {
    padding: 8px 12px !important;
    border-radius: 14px !important;
  }

  #hero-section {
    padding-top: 130px !important;
    padding-bottom: 35px !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
    text-align: center !important;
  }

  /* Buttons full width or centered on mobile */
  #hero-section .flex.flex-wrap {
    flex-direction: column !important;
    width: 100% !important;
  }
  
  #hero-section .flex.flex-wrap a,
  #hero-section .flex.flex-wrap button {
    width: 100% !important;
    justify-content: center !important;
  }

  /* 3D Books Mobile Fit */
  .book-3d-left {
    width: 10.5rem !important;
    transform: perspective(700px) rotateY(-8deg) rotateX(2deg) scale(0.9) !important;
  }
  .book-3d-right {
    width: 10.5rem !important;
    margin-left: -2.5rem !important;
    transform: perspective(700px) rotateY(8deg) rotateX(2deg) scale(0.9) !important;
  }

  /* Glass Panels Mobile Padding */
  .glass-panel {
    padding: 18px !important;
    border-radius: 20px !important;
  }

  /* Forms on Mobile */
  form input, form select, form textarea, form button {
    width: 100% !important;
    font-size: 15px !important;
  }

  /* Modals Full Screen Friendly */
  #chapter-modal > div,
  #char-modal > div,
  #cart-modal > div,
  #trailer-modal > div {
    width: 95vw !important;
    max-width: 95vw !important;
    padding: 16px !important;
    max-height: 88vh !important;
    margin: auto !important;
  }
}

/* 7. Extra Small Mobile (< 400px: iPhone SE, Galaxy Z Flip, etc.) */
@media (max-width: 399px) {
  .rainbow-strip {
    font-size: 9px !important;
  }
  
  #hero-section h1 {
    font-size: 1.85rem !important;
    line-height: 1.15 !important;
  }
  
  .book-3d-left {
    width: 9rem !important;
  }
  .book-3d-right {
    width: 9rem !important;
    margin-left: -2rem !important;
  }

  .grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 4px !important;
  }
  
  .grid-cols-3 .font-title {
    font-size: 0.95rem !important;
  }
  
  .grid-cols-3 .text-\[11px\],
  .grid-cols-3 .text-xs {
    font-size: 8.5px !important;
  }
}

/* 8. Large & Ultrawide Displays (1536px+) */
@media (min-width: 1536px) {
  .max-w-7xl {
    max-width: 86rem !important;
  }
  .max-w-5xl {
    max-width: 68rem !important;
  }
}

/* 9. Touch Target Accessibility (Apple & Google Guidelines) */
@media (hover: none) and (pointer: coarse) {
  a, button, input, select {
    min-height: 44px;
  }
}


/* ==========================================================================
   WOOCOMMERCE DARK FANTASY GLASSMORPHISM STYLING
   ========================================================================== */

.misfits-woocommerce-content {
  color: #CBD5E1;
}

/* Page Title & Breadcrumbs */
.woocommerce-products-header__title,
.woocommerce-page .entry-title,
.woocommerce-page h1.page-title {
  font-family: 'Lilita One', 'Fredoka', cursive, sans-serif !important;
  font-size: 2.25rem !important;
  color: #FFFFFF !important;
  letter-spacing: 0.05em;
  margin-bottom: 1.5rem !important;
}

.woocommerce-breadcrumb {
  font-size: 0.8rem !important;
  color: #94A3B8 !important;
  margin-bottom: 2rem !important;
}
.woocommerce-breadcrumb a {
  color: #F7A823 !important;
}

/* Result count & Ordering */
.woocommerce-result-count {
  color: #94A3B8 !important;
  font-size: 0.875rem !important;
}
.woocommerce-ordering select {
  background: #090B14 !important;
  color: #F1F5F9 !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 0.75rem !important;
  padding: 0.5rem 1rem !important;
}

/* Product Grid */
ul.products {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
  gap: 2rem !important;
  margin: 2rem 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

ul.products::before, ul.products::after {
  content: none !important;
}

ul.products li.product {
  background: rgba(14, 17, 31, 0.8) !important;
  backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 1.5rem !important;
  padding: 1.5rem !important;
  margin: 0 !important;
  width: 100% !important;
  float: none !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
  position: relative !important;
}

ul.products li.product:hover {
  transform: translateY(-8px) !important;
  border-color: rgba(247, 168, 35, 0.5) !important;
  box-shadow: 0 20px 40px -10px rgba(247, 168, 35, 0.25) !important;
}

/* Product Thumbnail */
ul.products li.product img {
  border-radius: 1rem !important;
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  margin-bottom: 1rem !important;
}

/* Product Title */
ul.products li.product .woocommerce-loop-product__title {
  font-family: 'Lilita One', 'Fredoka', cursive, sans-serif !important;
  font-size: 1.25rem !important;
  color: #FFFFFF !important;
  margin-bottom: 0.5rem !important;
  line-height: 1.3 !important;
}

/* Product Price */
ul.products li.product .price {
  color: #FFD166 !important;
  font-family: 'Lilita One', sans-serif !important;
  font-size: 1.25rem !important;
  margin-bottom: 1rem !important;
}
ul.products li.product .price del {
  color: #64748B !important;
  font-size: 0.9rem !important;
  margin-right: 0.5rem !important;
}
ul.products li.product .price ins {
  text-decoration: none !important;
  color: #00E676 !important;
}

/* Add to Cart / Select Options Button */
ul.products li.product .button,
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
  background: linear-gradient(135deg, #F7A823 0%, #FF8A00 50%, #FF3D71 100%) !important;
  color: #05070B !important;
  font-family: 'Lilita One', sans-serif !important;
  font-size: 0.95rem !important;
  letter-spacing: 0.05em !important;
  border-radius: 0.75rem !important;
  padding: 0.75rem 1.5rem !important;
  border: none !important;
  text-align: center !important;
  width: 100% !important;
  box-shadow: 0 10px 25px -5px rgba(247, 168, 35, 0.35) !important;
  transition: all 0.3s ease !important;
}

ul.products li.product .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover {
  transform: scale(1.03) !important;
  box-shadow: 0 15px 30px -5px rgba(247, 168, 35, 0.5) !important;
}

/* Sale Badge */
span.onsale {
  background: linear-gradient(135deg, #FF3D71, #FF8A00) !important;
  color: #FFFFFF !important;
  font-family: 'Lilita One', sans-serif !important;
  font-size: 0.75rem !important;
  padding: 0.35rem 0.75rem !important;
  border-radius: 9999px !important;
  top: 1rem !important;
  left: 1rem !important;
  right: auto !important;
  min-height: auto !important;
  min-width: auto !important;
  line-height: 1 !important;
  box-shadow: 0 4px 15px rgba(255, 61, 113, 0.4) !important;
}

/* Cart & Checkout Tables */
.woocommerce table.shop_table {
  background: rgba(9, 11, 20, 0.7) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 1rem !important;
  color: #E2E8F0 !important;
}
.woocommerce table.shop_table th {
  color: #F7A823 !important;
  font-family: 'Lilita One', sans-serif !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}
.woocommerce table.shop_table td {
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* Checkout inputs & notices */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
  background: #090B14 !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 0.75rem !important;
  padding: 0.75rem 1rem !important;
}

.woocommerce-message, .woocommerce-info {
  background: rgba(14, 17, 31, 0.9) !important;
  border-top-color: #00E676 !important;
  color: #E2E8F0 !important;
  border-radius: 1rem !important;
}


/* ==========================================================================
   WOOCOMMERCE COMPLETE DARK FANTASY GLASSMORPHISM STYLING
   ========================================================================== */

/* 1. Shop Page Header & Controls */
.woocommerce .woocommerce-result-count,
.woocommerce-page .woocommerce-result-count {
  color: #94A3B8 !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  margin-bottom: 1.5rem !important;
}

.woocommerce .woocommerce-ordering select,
.woocommerce-page .woocommerce-ordering select {
  background: #090B14 !important;
  color: #F8FAFC !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 0.75rem !important;
  padding: 0.5rem 1rem !important;
  font-size: 0.875rem !important;
  outline: none !important;
}

/* 2. Products Grid Layout */
.woocommerce ul.products,
.woocommerce-page ul.products {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
  gap: 2rem !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 1.5rem 0 3rem 0 !important;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after {
  display: none !important;
}

/* 3. Product Cards */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  background: rgba(14, 17, 31, 0.75) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 1.5rem !important;
  padding: 1.5rem !important;
  margin: 0 !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  position: relative !important;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5) !important;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.woocommerce ul.products li.product:hover {
  transform: translateY(-6px) !important;
  border-color: rgba(247, 168, 35, 0.45) !important;
  box-shadow: 0 25px 50px -10px rgba(247, 168, 35, 0.25) !important;
}

/* 4. Product Images */
.woocommerce ul.products li.product img,
.woocommerce-page ul.products li.product img {
  border-radius: 1rem !important;
  margin: 0 auto 1rem auto !important;
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  border: 2px solid rgba(247, 168, 35, 0.3) !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6) !important;
  background: #090B14 !important;
  display: block !important;
}

/* 5. Product Titles & Typography */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce-page ul.products li.product .woocommerce-loop-product__title {
  font-family: 'Lilita One', cursive !important;
  font-size: 1.35rem !important;
  letter-spacing: 0.025em !important;
  color: #FFFFFF !important;
  margin: 0.75rem 0 0.5rem 0 !important;
  line-height: 1.25 !important;
  padding: 0 !important;
}

.woocommerce ul.products li.product:hover .woocommerce-loop-product__title {
  color: #FFD166 !important;
}

/* 6. Prices */
.woocommerce ul.products li.product .price,
.woocommerce-page ul.products li.product .price,
.woocommerce div.product p.price {
  font-family: 'Lilita One', cursive !important;
  font-size: 1.5rem !important;
  color: #FFD166 !important;
  margin-bottom: 1.25rem !important;
  display: block !important;
}

.woocommerce ul.products li.product .price del,
.woocommerce-page ul.products li.product .price del {
  color: #64748B !important;
  font-size: 0.95rem !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: bold !important;
  margin-right: 0.5rem !important;
}

.woocommerce ul.products li.product .price ins,
.woocommerce-page ul.products li.product .price ins {
  text-decoration: none !important;
  color: #00E676 !important;
}

/* 7. Sale Badges */
.woocommerce span.onsale,
.woocommerce-page span.onsale {
  position: absolute !important;
  top: 1rem !important;
  left: 1rem !important;
  min-height: auto !important;
  min-width: auto !important;
  line-height: 1 !important;
  padding: 0.35rem 0.75rem !important;
  background: linear-gradient(135deg, #FF8A00, #FF3D71) !important;
  color: #FFFFFF !important;
  font-family: 'Lilita One', cursive !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  border-radius: 9999px !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  box-shadow: 0 4px 15px rgba(255, 61, 113, 0.4) !important;
  z-index: 10 !important;
}

/* 8. Add to Cart & General Buttons */
.woocommerce ul.products li.product .button,
.woocommerce-page ul.products li.product .button,
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
  background: linear-gradient(135deg, #FFD166 0%, #FF8A00 50%, #FF3D71 100%) !important;
  color: #05070B !important;
  font-family: 'Lilita One', cursive !important;
  font-size: 1rem !important;
  letter-spacing: 0.03em !important;
  border-radius: 0.875rem !important;
  padding: 0.75rem 1.5rem !important;
  border: none !important;
  box-shadow: 0 10px 25px rgba(247, 168, 35, 0.3) !important;
  cursor: pointer !important;
  text-align: center !important;
  display: block !important;
  width: 100% !important;
  transition: all 0.3s ease !important;
  text-decoration: none !important;
}

.woocommerce ul.products li.product .button:hover,
.woocommerce-page ul.products li.product .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover {
  transform: scale(1.03) !important;
  box-shadow: 0 15px 35px rgba(247, 168, 35, 0.45) !important;
  color: #05070B !important;
}

/* 9. Single Product Details */
.woocommerce div.product {
  color: #E2E8F0 !important;
}

.woocommerce div.product .product_title {
  font-family: 'Lilita One', cursive !important;
  font-size: 2.5rem !important;
  color: #FFFFFF !important;
  margin-bottom: 0.5rem !important;
}

.woocommerce div.product .woocommerce-product-details__short-description {
  color: #CBD5E1 !important;
  font-size: 1rem !important;
  line-height: 1.7 !important;
  margin: 1.5rem 0 !important;
}

.woocommerce div.product form.cart div.quantity {
  margin-right: 1rem !important;
}

.woocommerce div.product form.cart div.quantity input.qty {
  background: #090B14 !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 0.75rem !important;
  color: #FFFFFF !important;
  font-weight: bold !important;
  padding: 0.6rem !important;
}

/* 10. Cart & Checkout Tables */
.woocommerce table.shop_table,
.woocommerce-page table.shop_table {
  background: rgba(14, 17, 31, 0.6) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 1.25rem !important;
  overflow: hidden !important;
  color: #E2E8F0 !important;
}

.woocommerce table.shop_table th,
.woocommerce-page table.shop_table th {
  background: rgba(20, 24, 41, 0.9) !important;
  color: #FFD166 !important;
  font-family: 'Lilita One', cursive !important;
  font-size: 1rem !important;
  letter-spacing: 0.05em !important;
  padding: 1rem !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.woocommerce table.shop_table td,
.woocommerce-page table.shop_table td {
  padding: 1rem !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #CBD5E1 !important;
}

.woocommerce table.shop_table td.product-name a {
  color: #FFFFFF !important;
  font-weight: bold !important;
}

.woocommerce table.shop_table td.product-name a:hover {
  color: #FFD166 !important;
}

/* Form Inputs on Checkout & Account */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
  background: #090B14 !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 0.75rem !important;
  color: #FFFFFF !important;
  padding: 0.75rem 1rem !important;
  font-size: 0.95rem !important;
  outline: none !important;
  width: 100% !important;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus {
  border-color: #F7A823 !important;
  box-shadow: 0 0 15px rgba(247, 168, 35, 0.25) !important;
}

.woocommerce form .form-row label {
  color: #CBD5E1 !important;
  font-weight: 600 !important;
  margin-bottom: 0.35rem !important;
  display: block !important;
}

/* Checkout Review Order Box */
#order_review,
.woocommerce-checkout-review-order {
  background: rgba(14, 17, 31, 0.8) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 1.5rem !important;
  padding: 1.5rem !important;
  margin-top: 1.5rem !important;
}

/* Notices */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  background: rgba(14, 17, 31, 0.9) !important;
  border-radius: 1rem !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: #F8FAFC !important;
  padding: 1rem 1.5rem !important;
}

.woocommerce-message {
  border-left: 4px solid #00E676 !important;
}

.woocommerce-info {
  border-left: 4px solid #00B0FF !important;
}

.woocommerce-error {
  border-left: 4px solid #FF3D71 !important;
}

/* Hide unstyled sidebars on WooCommerce pages */
.woocommerce .sidebar,
.woocommerce-page .sidebar,
.woocommerce #sidebar,
.woocommerce-page #sidebar {
  display: none !important;
}


/* ==========================================================================
   CENTERED SHOP CARDS & INTERACTIVE FORMAT SELECTOR PILLS
   ========================================================================== */
.woocommerce ul.products,
.woocommerce-page ul.products {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: stretch !important;
  gap: 2.5rem !important;
  max-width: 860px !important;
  margin: 2rem auto !important;
  padding: 0 !important;
}

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  max-width: 380px !important;
  width: 100% !important;
  flex: 1 1 320px !important;
  margin: 0 !important;
  text-align: center !important;
}

.woocommerce ul.products li.product .price,
.woocommerce-page ul.products li.product .price {
  text-align: center !important;
}

.format-pill {
  transition: all 0.25s ease;
  cursor: pointer;
}

.format-pill.active {
  background: rgba(247, 168, 35, 0.25) !important;
  border-color: #F7A823 !important;
  color: #FFD166 !important;
  box-shadow: 0 0 12px rgba(247, 168, 35, 0.35) !important;
}


/* ==========================================================================
   SINGLE PRODUCT ENHANCEMENTS: NO SKU, NO PRICE RANGE, CLEAN DROPDOWN
   ========================================================================== */

/* 1. Header Clearance on Single Product & Shop */
.single-product main,
.woocommerce-page main {
  padding-top: 175px !important;
}

/* 2. Hide SKU and Meta */
.woocommerce div.product .product_meta,
.woocommerce-page div.product .product_meta,
.sku_wrapper {
  display: none !important;
}

/* 3. Hide Top Price Range ($4.99 - $29.99) on Single Product */
.single-product div.product > p.price,
.single-product div.product .summary > p.price,
.single-product div.product .summary > .price {
  display: none !important;
}

/* 4. Display Selected Variation Price in Glowing Gold */
.woocommerce-variation-price {
  margin: 1.25rem 0 0.5rem 0 !important;
}

.woocommerce-variation-price .price,
.woocommerce-variation-price span.price {
  font-family: 'Lilita One', cursive !important;
  font-size: 2.25rem !important;
  color: #FFD166 !important;
  display: block !important;
  text-shadow: 0 0 20px rgba(255, 209, 102, 0.4) !important;
}

/* 5. Variation Form Table & Select Dropdown */
.woocommerce div.product form.variations_form {
  margin-top: 1rem !important;
}

.woocommerce div.product table.variations {
  border: none !important;
  background: transparent !important;
  margin-bottom: 1rem !important;
  width: auto !important;
}

.woocommerce div.product table.variations td,
.woocommerce div.product table.variations th {
  background: transparent !important;
  border: none !important;
  padding: 0.5rem 0.5rem 0.5rem 0 !important;
}

.woocommerce div.product table.variations label {
  font-family: 'Lilita One', cursive !important;
  font-size: 1.1rem !important;
  color: #FFFFFF !important;
  letter-spacing: 0.05em !important;
}

.woocommerce div.product table.variations select {
  background: #090B14 !important;
  color: #FFFFFF !important;
  border: 1.5px solid rgba(247, 168, 35, 0.5) !important;
  border-radius: 0.875rem !important;
  padding: 0.65rem 1.25rem !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  outline: none !important;
  min-width: 220px !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4) !important;
}

.woocommerce div.product table.variations select:focus {
  border-color: #FFD166 !important;
  box-shadow: 0 0 15px rgba(255, 209, 102, 0.35) !important;
}

.reset_variations {
  color: #94A3B8 !important;
  font-size: 0.8rem !important;
  margin-left: 0.75rem !important;
  text-decoration: underline !important;
}

.reset_variations:hover {
  color: #FFD166 !important;
}


/* ==========================================================================
   GENEROUS HEADER CLEARANCE & SINGLE PRODUCT LAYOUT
   ========================================================================== */

/* 1. Header Clearance for all WooCommerce and Inner Templates */
body.single-product main,
body.woocommerce-page main,
body.woocommerce main,
.single-product main,
.woocommerce-page main,
.woocommerce main {
  padding-top: 190px !important;
}

@media (max-width: 768px) {
  body.single-product main,
  body.woocommerce-page main,
  body.woocommerce main,
  .single-product main,
  .woocommerce-page main,
  .woocommerce main {
    padding-top: 175px !important;
  }
}

/* 2. Single Product 2-Column Responsive Layout */
.single-product div.product {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 3.5rem !important;
  align-items: flex-start !important;
  margin-top: 1rem !important;
}

.single-product div.product div.images {
  flex: 1 1 380px !important;
  max-width: 480px !important;
  margin: 0 !important;
}

.single-product div.product div.summary {
  flex: 1 1 420px !important;
  margin: 0 !important;
  padding-top: 0 !important;
}

.single-product div.product .product_title {
  margin-top: 0 !important;
  padding-top: 0 !important;
  line-height: 1.15 !important;
}


/* ==========================================================================
   CLEAN MODERN NAVBAR & REMOVED BULLETS
   ========================================================================== */
.main-nav-container ul,
.main-nav-container .menu,
.main-nav-container .nav-menu {
  display: flex !important;
  align-items: center !important;
  gap: 0.25rem !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.main-nav-container li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.main-nav-container li::before,
.main-nav-container li::after {
  content: none !important;
  display: none !important;
}

.main-nav-container li a {
  display: inline-block !important;
  padding: 0.4rem 0.85rem !important;
  border-radius: 9999px !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  color: #e2e8f0 !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}

.main-nav-container li a:hover {
  color: #fcd34d !important;
  background-color: rgba(255, 255, 255, 0.08) !important;
}

.main-nav-container li.current-menu-item a,
.main-nav-container li.current_page_item a {
  color: #fcd34d !important;
  background-color: rgba(251, 191, 36, 0.12) !important;
  font-weight: 700 !important;
}