@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
/* --- Acrobatic Preloader Styles --- */
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #111;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  transition: opacity 0.6s ease;
  opacity: 1;
}

#preloader.hidden {
  opacity: 0;
  pointer-events: none;
}

.preloader-content {
  text-align: center;
  /* Define color variables for the animation */
  --hue: 26;      /* Main Orange */
  --hue-2: 40;    /* Secondary Orange (more yellow) */
  --hue-3: 15;    /* Tertiary Orange (more red) */
}

/* Woven Art Text Styling  */
.preloader-content .text {
  font-family: 'Poppins', sans-serif;
  font-size: 2rem;
  font-weight: bold;
  display: flex;
  justify-content: center;
  gap: 5px;
  margin-top: 20px; /* Adjust to position text correctly relative to new SVG */
}
.preloader-content .text span {
  display: inline-block;
  color: #ff6a00;
  animation: weave 1.2s ease-in-out infinite;
}
.preloader-content .text span:nth-child(1) { animation-delay: 0s; }
.preloader-content .text span:nth-child(2) { animation-delay: 0.1s; }
.preloader-content .text span:nth-child(3) { animation-delay: 0.2s; }
.preloader-content .text span:nth-child(4) { animation-delay: 0.3s; }
.preloader-content .text span:nth-child(5) { animation-delay: 0.4s; }
.preloader-content .text span:nth-child(6) { animation-delay: 0.5s; }
.preloader-content .text span:nth-child(7) { animation-delay: 0.6s; }
.preloader-content .text span:nth-child(8) { animation-delay: 0.7s; }
.preloader-content .text span:nth-child(9) { animation-delay: 0.8s; }

@keyframes weave {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50% { transform: translateY(-10px); opacity: 0.6; }
}

/* SVG Animation Styling */
.ap {
  width: 128px;
  height: 256px;
}
.ap__ring {
  /* Use a light, transparent stroke for the ring on your dark background */
  stroke: hsla(var(--hue), 10%, 90%, 0.1);
}
.ap__worm1,
.ap__worm2 {
  /* MODIFIED: Animation sped up from 3s to 2s */
  animation-duration: 2s;
  animation-iteration-count: infinite;
}
.ap__worm1 {
  animation-name: worm1;
}
.ap__worm2 {
  animation-name: worm2;
  visibility: hidden;
}

/* Keyframe Animations (Unchanged from original, just run faster) */
@keyframes worm1 {
  from {
    animation-timing-function: ease-in-out;
    stroke-dashoffset: -87.96;
  }
  20% {
    animation-timing-function: ease-in;
    stroke-dashoffset: 0;
  }
  60% {
    stroke-dashoffset: -791.68;
    visibility: visible;
  }
  60.1%,
  to {
    stroke-dashoffset: -791.68;
    visibility: hidden;
  }
}
@keyframes worm2 {
  from,
  60% {
    stroke-dashoffset: -87.96;
    visibility: hidden;
  }
  60.1% {
    animation-timing-function: cubic-bezier(0, 0, 0.5, 0.75);
    stroke-dashoffset: -87.96;
    visibility: visible;
  }
  77% {
    animation-timing-function: cubic-bezier(0.5, 0.25, 0.5, 0.88);
    stroke-dashoffset: -340;
    visibility: visible;
  }
  to {
    stroke-dashoffset: -669.92;
    visibility: visible;
  }
}
/* --- End of Preloader Styles --- */

/* --- Hero Section with Responsive Background --- */
.hero {
  position: relative;
  /* MOBILE-FIRST: This is the default background for mobile */
  background-image: url('bg-image/hero-mobile.png'); 
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 5rem 2rem;
}
.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); 
  z-index: 1;
}
.hero-content {
  position: relative;
  z-index: 10;
  max-width: 7xl;
  margin: 0 auto;
  text-align: left;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

/* DESKTOP: Overrides the mobile image on larger screens */
@media (min-width: 768px) {
  .hero {
    background-image: url('bg-image/hero-desktop.jpg');
  }
}


/* Body and text colors */
body {
  background-color: rgb(141, 139, 139);
  color: rgb(255, 255, 255);
}

/* Typing text */
#typing-text {
  white-space: nowrap;
  overflow: hidden;
}

/* Blinking cursor for second phrase */
.blink-cursor::after {
  content: '|';
  color: FFB200;
  animation: blink 0.8s infinite;
}

@keyframes blink {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}

/* Buttons */
button {
  background-color: #ff6a00;
  color: rgb(255, 255, 255);
}
button:hover {
  background-color: #8A2200;
}

/* Links */
a {
  color: rgb(255, 255, 255);
  text-decoration: none;
}
a:hover {
  color: #ff6a00;
}

/* --- Home Page Product Card Styles --- */
.category-title {
  font-size: 1.75rem;
  font-weight: bold;
  margin-bottom: 1.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid #4A5568;
  text-align: center;
}
.category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1.5rem;
}

.product-card-new {
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: #111;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.product-card-new:hover {
  transform: translateY(-8px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.4);
}
.product-card-new .product-card-image-wrapper {
  aspect-ratio: 4 / 5;
  width: 100%;
  position: relative; /* Needed for the overlay */
}
.product-card-new img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.product-card-info-box {
  background-color: #1a1a1a;
  padding: 0.75rem;
  text-align: center;
}
.product-card-name {
  font-weight: bold;
  font-size: 0.9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- NEW: Style for the price on the product card --- */
.product-card-price {
  color: #B12C00; /* Use your brand's deep orange color */
  font-weight: bold;
  font-size: 0.9rem;
  margin-top: 0.25rem; /* Add a little space above the price */
}

/* The overlay now covers the image area and is invisible by default */
.product-card-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5); /* Semi-transparent black */
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0; /* Hidden by default */
  transition: opacity 0.3s ease;
  z-index: 5; /* ensure overlay sits above the image */
}
/* On hover, the overlay fades in */
.product-card-new:hover .product-card-overlay {
  opacity: 1;
}

/* The button is now inside the overlay */
.product-card-button {
  padding: 0.6rem 1.2rem;
  background-color: #ff6a00;
  border-radius: 9999px;
  font-size: 0.9rem;
  font-weight: bold;
  white-space: nowrap;
  transform: scale(0.9);
  transition: transform 0.3s ease;
  color: #ffffff;         /* ensure text is visible */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 10;            /* ensure button sits above overlay background */
  text-decoration: none;  /* if it's an anchor, prevent decoration */
}
/* --- NEW: Style for the "See More" button --- */
/* --- "See More" button Style --- */
.see-more-btn {
  display: block;
  width: 100%;
  margin-top: 1.5rem;
  padding: 0.75rem;
  background-color: #2D3748;
  border-radius: 8px;
  text-align: center;
  font-weight: bold;
  color: #fff;
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.see-more-btn:hover {
  background-color: #4A5568;
  transform: translateY(-2px);
  color: #fff;
}

/* Home Page Hero Search Bar */
/* --- Alibaba-style Search Bar --- */
.search-container {
  position: relative;
  
  border-radius: 9999px; 
}
.search-input-home {
  width: 100%;
  padding: 0.8rem 1rem;
  padding-right: 3.5rem;
  background-color: #010201;
  border: none;
  border-radius: 9999px;
  color: white;
  font-size: 1.1rem;
}
.search-btn-home {
  position: absolute;
  top: 50%;
  right: 5px;
  transform: translateY(-50%);
  padding: 0.6rem 1rem;
  border-radius: 9999px;
  z-index: 5;
}

/* --- CORRECTED: Hero Search Bar Glow Animation (Scoped) --- */

/* The main wrapper that triggers the animation on hover/focus */
#hero-search-wrapper {
  position: relative;
}

/* Set a z-index on the search container to ensure it sits above the animation layers */
#hero-search-wrapper .search-container { /* MODIFIED: Scoped to wrapper */
   z-index: 3;
}

/* Layered gradient frames (behind input) */
#hero-search-wrapper .white, /* MODIFIED: Scoped to wrapper */
#hero-search-wrapper .border, /* MODIFIED: Scoped to wrapper */
#hero-search-wrapper .darkBorderBg, /* MODIFIED: Scoped to wrapper */
#hero-search-wrapper .glow { /* MODIFIED: Scoped to wrapper */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% + 6px);
  height: calc(100% + 6px);
  overflow: hidden;
  border-radius: 9999px;
  pointer-events: none;
  z-index: 1;
}

#hero-search-wrapper .white { /* MODIFIED: Scoped to wrapper */
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  filter: blur(2px);
}
#hero-search-wrapper .white::before { /* MODIFIED: Scoped to wrapper */
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(83deg);
  width: 600px;
  height: 600px;
  background-repeat: no-repeat;
  background-position: 0 0;
  filter: brightness(1.4);
  background-image: conic-gradient(
    rgba(0, 0, 0, 0) 0%, #a099d8, rgba(0, 0, 0, 0) 8%,
    rgba(0, 0, 0, 0) 50%, #dfa2da, rgba(0, 0, 0, 0) 58%
  );
  transition: transform 2s ease;
}

#hero-search-wrapper .border { /* MODIFIED: Scoped to wrapper */
  width: 100%;
  height: 100%;
  filter: blur(0.5px);
}
#hero-search-wrapper .border::before { /* MODIFIED: Scoped to wrapper */
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(70deg);
  width: 600px;
  height: 600px;
  filter: brightness(1.3);
  background-repeat: no-repeat;
  background-position: 0 0;
  background-image: conic-gradient(
    #1c191c, #ff6a00 5%, #1c191c 14%,
    #1c191c 50%, #B12C00 60%, #1c191c 64%
  );
  transition: transform 2s ease;
}

#hero-search-wrapper .darkBorderBg { /* MODIFIED: Scoped to wrapper */
   width: calc(100% + 4px);
   height: calc(100% + 4px);
}
#hero-search-wrapper .darkBorderBg::before { /* MODIFIED: Scoped to wrapper */
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(82deg);
  width: 600px;
  height: 600px;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-image: conic-gradient(
    rgba(0, 0, 0, 0), #8A2200, rgba(0, 0, 0, 0) 10%,
    rgba(0, 0, 0, 0) 50%, #D2691E, rgba(0, 0, 0, 0) 60%
  );
  transition: transform 2s ease;
}

#hero-search-wrapper .glow { /* MODIFIED: Scoped to wrapper */
  width: calc(100% + 20px);
  height: calc(100% + 20px);
  filter: blur(20px);
  opacity: 0.6;
}
#hero-search-wrapper .glow::before { /* MODIFIED: Scoped to wrapper */
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(60deg);
  width: 999px;
  height: 999px;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-image: conic-gradient(
    #000, #ff6a00 5%, #000 38%,
    #000 50%, #B12C00 60%, #000 87%
  );
  transition: transform 2s ease;
}

/* Interaction Animations */
#hero-search-wrapper:hover > .darkBorderBg::before,
#hero-search-wrapper:focus-within > .darkBorderBg::before {
  transform: translate(-50%, -50%) rotate(262deg);
}
#hero-search-wrapper:hover > .glow::before,
#hero-search-wrapper:focus-within > .glow::before {
  transform: translate(-50%, -50%) rotate(240deg);
}
#hero-search-wrapper:hover > .white::before,
#hero-search-wrapper:focus-within > .white::before {
  transform: translate(-50%, -50%) rotate(263deg);
}
#hero-search-wrapper:hover > .border::before,
#hero-search-wrapper:focus-within > .border::before {
  transform: translate(-50%, -50%) rotate(250deg);
}
/* End of Hero Search Bar Glow Animation */

/* The animated placeholder text */
.search-placeholder-animated {
  position: absolute;
  top: 50%;
  left: 1rem;
  transform: translateY(-50%);
  color: #555;
  font-size: 1.1rem;
  /* Prevent user from selecting the animated text */
  pointer-events: none; 
  /* Hides the placeholder when the user is typing */
  z-index: 2;
}
.search-input-home:focus + .search-placeholder-animated {
  display: none; /* Hide animation when input is focused */
}

/* Keyframes for the flying animation */
@keyframes flyInUp {
  0% {
    opacity: 0;
    transform: translateY(50%);
  }
  20% {
    opacity: 1;
    transform: translateY(-50%);
  }
  80% {
    opacity: 1;
    transform: translateY(-50%);
  }
  100% {
    opacity: 0;
    transform: translateY(-150%);
  }
}

/* The class that will be added by JS to trigger the animation */
.placeholder-animate {
  /* MODIFIED: Animation is now faster */
  animation: flyInUp 3s ease-in-out forwards;
}

/* Header Search Bar (Details & Cart Pages) */
.search-input-header {
  width: 100%;
  padding: 0.5rem 0.8rem;
  padding-right: 2.8rem;
  background-color: #2D3748;
  border: 1px solid #4A5568;
  border-radius: 6px;
  color: white;
  font-size: 0.9rem;
}
.search-btn-header {
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  padding: 0.3rem 0.6rem;
  border-radius: 4px;
}

/* --- NEW: Details Page Image Zoom & Gallery Styles --- */
.main-image-zoom-container {
  overflow: hidden; /* This is the key to the zoom effect */
  border-radius: 8px;
  cursor: zoom-in;
}
#main-product-image {
  width: 100%;
  height: 100%; /* Will fill the container space */
  object-fit: contain; /* Ensures the whole image is visible */
  transition: transform 0.2s ease-out;
}
/* This class will be added by JS on hover to activate the zoom */
.zoomed #main-product-image {
  transform: scale(1.5); /* How much to zoom in */
}

/* --- FINAL CORRECTED VERSION: Details Page Gallery Layout --- */

/* 1. Main Image Container */
.main-image-zoom-container {
  overflow: hidden;
  border-radius: 8px;
  cursor: zoom-in;
  /* This forces the container to be a square, establishing its height */
  aspect-ratio: 1 / 1; 
  /* NEW: Ensure it takes up all available width in its column */
  width: 100%;
}

/* Ensure the image inside fills the container we just defined */
#main-product-image {
  width: 100%;
  height: 100%;
  object-fit: contain; /* Use 'cover' to fill the area, 'contain' if you must see the whole image */
  transition: transform 0.2s ease-out;
}

/* 2. Scrolling Wrapper for Thumbnails */
.thumbnail-slider-wrapper {
  margin-top: 1rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: #4A5568 #1a1a1a;
}
.thumbnail-slider-wrapper::-webkit-scrollbar { height: 8px; }
.thumbnail-slider-wrapper::-webkit-scrollbar-track { background: #1a1a1a; border-radius: 8px; }
.thumbnail-slider-wrapper::-webkit-scrollbar-thumb { background-color: #4A5568; border-radius: 8px; }

/* 3. The Thumbnail Gallery Itself */
.thumbnail-gallery {
  display: flex;
  gap: 0.75rem;
  padding-bottom: 0.5rem;
  width: max-content;
}

/* 4. Individual Thumbnail Images */
.thumbnail-img {
  width: 70px;
  height: 85px;
  object-fit: cover;
  border-radius: 4px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: border-color 0.2s ease;
  flex-shrink: 0;
}
.thumbnail-img:hover { border-color: #4A5568; }
.thumbnail-img.active { border-color: #ff6a00; }

/* 5. Desktop-Specific Overrides */
@media (min-width: 769px) {
  /* Make thumbnails slightly larger on desktop */
  .thumbnail-img {
    width: 80px;
    height: 100px;
  }
}

/* Details Page: Sticky Sidebar and Description Box */
.sticky-sidebar {
  position: -webkit-sticky; /* For Safari */
  position: sticky;
  top: 100px;
  align-self: start;
  background-color: #1a1a1a;
  padding: 1.5rem;
  border-radius: 8px;
}
.description-box {
  /* margin-top: 2rem; <-- This line has been removed */
  background-color: #1a1a1a;
  padding: 1.5rem;
  border-radius: 8px;
}
.description-box h3 {
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 1rem;
}


/* Details Page: Size and Color Options */
.option-label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: bold;
}
.size-select {
  width: 100%;
  padding: 0.75rem;
  background-color: #2d3748;
  border: 1px solid #4a5568;
  border-radius: 0.375rem;
  color: white;
  margin-bottom: 1rem;
}
.color-options .color-label {
  display: inline-flex;
  align-items: center;
  margin-right: 1rem;
  cursor: pointer;
}
.color-options input[type="radio"] {
  display: none;
}
.color-swatch {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  margin-right: 8px;
  border: 2px solid #4a5568;
  transition: border-color 0.2s;
}
.color-options input[type="radio"]:checked + .color-swatch {
  border-color: #ff6a00;
}

/* Cart Page: Checkout Form */
.checkout-input {
  width: 100%;
  padding: 0.75rem;
  background-color: #2d3748;
  border: 1px solid #4a5568;
  border-radius: 0.375rem;
  color: white;
}

/* Other Misc Styles */
.text-chocolate {
  color: #D2691E;
}

/* Responsive Styles for Mobile Phones */
@media (max-width: 768px) {
  /* Hides the main navigation on mobile */
  header nav {
    display: none;
  }
  /* Centers the hero text on mobile */
  .hero-content {
    text-align: center;
  }
}
/* --- NEW: Category Badge on Product Cards --- */
.product-category-badge {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  background-color: rgba(0, 0, 0, 0.7);
  color: #fff;
  padding: 0.25rem 0.6rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: bold;
  z-index: 6; /* Sits above the image but below the overlay */
}

/* --- NEW: Styles for the products.html page --- */
.filter-container {
  margin-bottom: 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.filter-container .page-title {
  font-size: 2.25rem;
  font-weight: bold;
}
.category-select {
  padding: 0.75rem 1rem;
  background-color: #2D3748;
  border: 1px solid #4A5568;
  border-radius: 8px;
  color: #fff;
  font-weight: bold;
}
/* --- NEW: Styles for the products.html page filters --- */
.filter-container {
  margin-bottom: 2rem;
  display: flex;
  flex-wrap: wrap; /* Allow wrapping on small screens */
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.filter-container .page-title {
  font-size: 2.25rem;
  font-weight: bold;
}
.filter-group {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.filter-label {
    font-weight: bold;
    color: #ccc;
}
.category-select {
  padding: 0.5rem 1rem;
  background-color: #2D3748;
  border: 1px solid #4A5568;
  border-radius: 8px;
  color: #fff;
  font-weight: bold;
}

/* Custom Color Filter Styles */
.color-filter-container {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.color-filter-container .color-label {
  display: flex;
  align-items: center;
  cursor: pointer;
}
/* Hide the actual radio button */
.color-filter-container input[type="radio"] {
  display: none;
}
/* Style the color swatch (the circle) */
.color-filter-swatch {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid #4A5568;
  transition: border-color 0.2s, transform 0.2s;
}
/* Style for the 'All' option */
.color-filter-swatch.all-colors {
    background: linear-gradient(45deg, red, orange, yellow, green, blue, indigo, violet);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: bold;
}
/* Add a checkmark to the selected swatch */
.color-filter-container input[type="radio"]:checked + .color-filter-swatch {
  border-color: #ff6a00;
  transform: scale(1.1);
}
/* --- NEW: Style for the "Load More" button on the products page --- */
.load-more-btn {
  padding: 0.75rem 2rem;
  background-color: #ff6a00;
  border: none;
  border-radius: 8px;
  font-weight: bold;
  font-size: 1rem;
  color: #fff;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.load-more-btn:hover {
  background-color: #8A2200;
  transform: translateY(-2px);
}
.load-more-btn.hidden {
  display: none;
}
/* --- NEW: Mobile Slide-Out Menu Styles --- */
.mobile-menu {
  position: fixed;
  top: 0;
  right: -300px; /* Start off-screen */
  width: 300px;
  max-width: 80%;
  height: 100%;
  background-color: #1a1a1a;
  box-shadow: -4px 0 15px rgba(0,0,0,0.5);
  z-index: 1001; /* Above the overlay */
  transition: right 0.3s ease-in-out;
  overflow-y: auto;
}
.mobile-menu.open {
  right: 0; /* Slide into view */
}
.mobile-menu-link {
  display: block;
  padding: 0.75rem 0;
  font-size: 1.1rem;
  border-bottom: 1px solid #2d3748;
}
.mobile-menu-link:hover {
  background-color: #2d3748;
}

.menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.7);
  z-index: 1000;
  opacity: 0;
  pointer-events: none; /* Can't be clicked when hidden */
  transition: opacity 0.3s ease-in-out;
}
.menu-overlay.open {
  opacity: 1;
  pointer-events: auto; /* Clickable when visible */
}

/* --- NEW: Styles for Cart Quantity Buttons --- */
.quantity-btn {
  background-color: #4A5568;
  border: none;
  color: white;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 1.2rem;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s;
}
.quantity-btn:hover {
  background-color: #2D3748;
}

/* --- NEW: Styles for FAQ & Terms Page --- */
.faq-container {
  max-width: 800px;
  margin: 0 auto 40px; /* Center and add space below */
}
.faq-item {
  border: 1px solid #4A5568; /* Dark gray border */
  border-radius: 8px;
  margin-bottom: 10px;
  overflow: hidden;
  background: #1a1a1a; /* Dark background for the item */
}
.faq-question {
  width: 100%;
  background: transparent;
  padding: 1rem 1.5rem;
  font-size: 1.1rem;
  font-weight: bold;
  text-align: left;
  border: none;
  outline: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
  transition: background-color 0.3s ease;
}
.faq-question:hover {
  background-color: #2D3748; /* Slightly lighter gray on hover */
}
/* Style for the active/open question */
.faq-question.active {
  background-color: #B12C00; /* Use brand orange */
  color: #fff;
}
.faq-icon {
  display: inline-block;
  transition: transform 0.3s ease;
}
.faq-question.active .faq-icon {
  transform: rotate(90deg);
}
.faq-answer {
  max-height: 0;
  overflow: hidden;
  padding: 0 1.5rem;
  color: #ccc;
  background: #111; /* Even darker background for the answer */
  transition: max-height 0.4s ease-out, padding 0.4s ease-out;
}
.faq-answer p {
  padding: 1.5rem 0;
  border-top: 1px solid #2D3748;
}

/* Terms Section */
.terms-container {
  background: #1a1a1a;
  border: 1px solid #4A5568;
  border-radius: 8px;
  padding: 2rem;
  color: #ccc;
}
.terms-container p {
  margin-bottom: 1rem;

}
/* --- NEW: Styles for Custom Alert Modal --- */
#custom-alert.hidden {
  display: none !important;
}

/* Custom Alert Styles */
#custom-alert {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

#custom-alert .alert-box {
  background-color: #333;
  color: white;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  text-align: center;
}

#custom-alert .alert-message {
  font-size: 1.2em;
  margin-bottom: 15px;
}

#custom-alert .alert-button {
  background-color: #4CAF50;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
/* --- NEW: Order Confirmation Page Styles --- */
.summary-box {
  background-color: #1a1a1a;
  padding: 1.5rem;
  border-radius: 8px;
  border: 1px solid #4A5568;
}
.summary-title {
  font-size: 1.5rem;
  font-weight: bold;
  padding-bottom: 0.75rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid #4A5568;
}
.summary-box p {
  margin-bottom: 0.5rem;
  color: #ccc;
}
.summary-box strong {
  color: #fff;
}

/* --- NEW: Animated Button Styles (Adapted from your code) --- */
:root {
  --primary: #ff6a00; /* Using your brand orange */
  --primary-light: #ff8c3a;
  --dark: #1C212E;
  --grey-dark: #3F4656;
  --grey: #6C7486;
  --grey-light: #CDD9ED;
  --white: #FFF;
  --green: #16BF78;
  --sand: #DCB773;
  --sand-light: #EDD9A9;
}
.order {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  border: 0; background: var(--dark); position: relative;
  height: 63px; width: 240px; padding: 0; outline: none;
  cursor: pointer; border-radius: 32px;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  -webkit-tap-highlight-color: transparent;
  overflow: hidden; transition: transform 0.3s ease;
}
.order span {
  --o: 1; position: absolute; left: 0; right: 0;
  text-align: center; top: 19px; line-height: 24px;
  color: var(--white); font-size: 16px; font-weight: 500;
  opacity: var(--o); transition: opacity 0.3s ease;
}
.order span.default { transition-delay: 0.3s; }
.order span.success { --offset: 16px; --o: 0; }
.order span.success svg {
  width: 12px; height: 10px; display: inline-block;
  vertical-align: top; fill: none; margin: 7px 0 0 4px;
  stroke: var(--green); stroke-width: 2; stroke-linecap: round;
  stroke-linejoin: round; stroke-dasharray: 16px;
  stroke-dashoffset: var(--offset); transition: stroke-dashoffset 0.3s ease;
}
.order:active { transform: scale(0.96); }
/* --- NEW: Hover effect for the animated order button --- */
.order:hover {
  transform: scale(1.03); /* Makes the button slightly larger on hover */
  background-color: #8A2200; /* Changed to your site's deep orange hover color */
}
.order .lines {
  opacity: 0; position: absolute; height: 3px;
  background: var(--white); border-radius: 2px;
  width: 6px; top: 30px; left: 100%;
  box-shadow: 15px 0 0 var(--white), 30px 0 0 var(--white), 45px 0 0 var(--white), 60px 0 0 var(--white), 75px 0 0 var(--white), 90px 0 0 var(--white), 105px 0 0 var(--white), 120px 0 0 var(--white), 135px 0 0 var(--white), 150px 0 0 var(--white), 165px 0 0 var(--white), 180px 0 0 var(--white), 195px 0 0 var(--white), 210px 0 0 var(--white), 225px 0 0 var(--white), 240px 0 0 var(--white), 255px 0 0 var(--white), 270px 0 0 var(--white), 285px 0 0 var(--white), 300px 0 0 var(--white), 315px 0 0 var(--white), 330px 0 0 var(--white);
}
.order .back, .order .box {
  --start: var(--white); --stop: var(--grey-light);
  border-radius: 2px; background: linear-gradient(var(--start), var(--stop));
  position: absolute;
}
.order .truck {
  width: 60px; height: 41px; left: 100%; z-index: 1;
  top: 11px; position: absolute; transform: translateX(24px);
}
.order .truck:before, .order .truck:after {
  --r: -90deg; content: ""; height: 2px; width: 20px; right: 58px;
  position: absolute; display: block; background: var(--white);
  border-radius: 1px; transform-origin: 100% 50%; transform: rotate(var(--r));
}
.order .truck:before { top: 4px; }
.order .truck:after { --r: 90deg; bottom: 4px; }
.order .truck .back { left: 0; top: 0; width: 60px; height: 41px; z-index: 1; }
.order .truck .front {
  overflow: hidden; position: absolute; border-radius: 2px 9px 9px 2px;
  width: 26px; height: 41px; left: 60px;
}
.order .truck .front:before, .order .truck .front:after { content: ""; position: absolute; display: block; }
.order .truck .front:before { height: 13px; width: 2px; left: 0; top: 14px; background: linear-gradient(var(--grey), var(--grey-dark)); }
.order .truck .front:after { border-radius: 2px 9px 9px 2px; background: var(--primary); width: 24px; height: 41px; right: 0; }
.order .truck .front .window {
  overflow: hidden; border-radius: 2px 8px 8px 2px;
  background: var(--primary-light); transform: perspective(4px) rotateY(3deg);
  width: 22px; height: 41px; position: absolute; left: 2px; top: 0; z-index: 1;
  transform-origin: 0 50%;
}
.order .truck .front .window:before, .order .truck .front .window:after { content: ""; position: absolute; right: 0; }
.order .truck .front .window:before { top: 0; bottom: 0; width: 14px; background: var(--dark); }
.order .truck .front .window:after { width: 14px; top: 7px; height: 4px; position: absolute; background: rgba(255, 255, 255, 0.14); transform: skewY(14deg); box-shadow: 0 7px 0 rgba(255, 255, 255, 0.14); }
.order .truck .light {
  width: 3px; height: 8px; left: 83px; transform-origin: 100% 50%;
  position: absolute; border-radius: 2px; transform: scaleX(0.8); background: #f0dc5f;
}
.order .truck .light:before {
  content: ""; height: 4px; width: 7px; opacity: 0;
  transform: perspective(2px) rotateY(-15deg) scaleX(0.94); position: absolute;
  transform-origin: 0 50%; left: 3px; top: 50%; margin-top: -2px;
  background: linear-gradient(90deg, #f0dc5f, rgba(240, 220, 95, 0.7), rgba(240, 220, 95, 0));
}
.order .truck .light.top { top: 4px; }
.order .truck .light.bottom { bottom: 4px; }
.order .box {
  --start: var(--sand-light); --stop: var(--sand);
  width: 21px; height: 21px; right: 100%; top: 21px;
}
.order .box:before, .order .box:after { content: ""; top: 10px; position: absolute; left: 0; right: 0; }
.order .box:before { height: 3px; margin-top: -1px; background: rgba(0, 0, 0, 0.1); }
.order .box:after { height: 1px; background: rgba(0, 0, 0, 0.15); }
.order.animate .default { --o: 0; transition-delay: 0s; }
.order.animate .success { --offset: 0; --o: 1; transition-delay: 7s; }
.order.animate .success svg { transition-delay: 7.3s; }
.order.animate .truck { animation: truck 10s ease forwards; }
.order.animate .truck:before { animation: door1 2.4s ease forwards 0.3s; }
.order.animate .truck:after { animation: door2 2.4s ease forwards 0.6s; }
.order.animate .truck .light:before, .order.animate .truck .light:after { animation: light 10s ease forwards; }
.order.animate .box { animation: box 10s ease forwards; }
.order.animate .lines { animation: lines 10s ease forwards; }
@keyframes truck { 10%, 30% { transform: translateX(-164px); } 40% { transform: translateX(-104px); } 60% { transform: translateX(-224px); } 75%, 100% { transform: translateX(24px); } }
@keyframes lines { 0%, 30% { opacity: 0; transform: scaleY(0.7) translateX(0); } 35%, 65% { opacity: 1; } 70% { opacity: 0; } 100% { transform: scaleY(0.7) translateX(-400px); } }
@keyframes light { 0%, 30% { opacity: 0; transform: perspective(2px) rotateY(-15deg) scaleX(0.88); } 40%, 100% { opacity: 1; transform: perspective(2px) rotateY(-15deg) scaleX(0.94); } }
@keyframes door1 { 30%, 50% { transform: rotate(32deg); } }
@keyframes door2 { 30%, 50% { transform: rotate(-32deg); } }
@keyframes box { 8%, 10% { transform: translateX(40px); opacity: 1; } 25% { transform: translateX(112px); opacity: 1; } 26% { transform: translateX(112px); opacity: 0; } 27%, 100% { transform: translateX(0px); opacity: 0; } }


/* --- NEW: Style for the "Back to Cart" button --- */
.back-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 63px;
  padding: 0 2rem;
  background-color: #4A5568; /* Gray color */
  border-radius: 32px;
  font-weight: bold;
  color: #fff;
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.back-btn:hover {
  background-color: #2D3748;
  transform: scale(1.02);
  color: #fff;
}

/* --- NEW: Styles for Details Page Gallery Arrows and Resizing --- */
/* This is the main container for the image and thumbnails */
#product-image-container {
  position: relative; /* Needed for positioning the arrow buttons */
  /* --- FIX 1: Constrain the height on desktop screens --- */
  max-height: 80vh; 
  display: flex;
  flex-direction: column;
}
.main-image-zoom-container {
  flex-grow: 1; /* Allows the main image to take up available space */
  overflow: hidden;
  border-radius: 8px;
  cursor: zoom-in;
}

/* Gallery Arrow Buttons */
.gallery-arrow {
  position: absolute;
  top: 45%; /* Position vertically in the middle of the main image */
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  font-size: 1.2rem;
  cursor: pointer;
  z-index: 20; /* Sit on top of everything */
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease;
}
.gallery-arrow:hover {
  background-color: rgba(0, 0, 0, 0.8);
}
.gallery-arrow.prev {
  left: 1rem;
}
.gallery-arrow.next {
  right: 1rem;
}
/* Adjustments for mobile screens */
@media (max-width: 768px) {
  /* Hides the main navigation on mobile */
  header nav {
    display: none;
  }
  /* Centers the hero text on mobile */
  .hero-content {
    text-align: center;
  }

  /* --- THIS IS THE FIX --- */
  /* Make gallery arrows semi-transparent on mobile instead of hiding them */
  .gallery-arrow {
    opacity: 0.6;
    width: 36px;
    height: 36px;
    font-size: 1rem;
  }
  .gallery-arrow.prev {
    left: 0.5rem;
  }
  .gallery-arrow.next {
    right: 0.5rem;
  }
}

/* --- NEW: Desktop-only resizing for the image container --- */
@media (min-width: 769px) {
  #product-image-container {
    /* Constrain the height of the container only on large screens */
    max-height: 85vh;
  }
}


/* --- FIX: Ensure Hidden Form Inputs are Truly Hidden --- */
#google-form input,
#google-form textarea {
  display: none;
}

/* --- NEW: Animated Border for Checkout Box --- */
@property --a {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@keyframes rotating {
  0% {
    --a: 0deg;
  }
  100% {
    --a: 360deg;
  }
}

.animated-border-wrapper {
  position: relative;
  background: repeating-conic-gradient(
    from var(--a),
    #ff6827 0%,
    #ff6827 5%,
    transparent 5%,
    transparent 40%,
    #ff6827 50%
  );
  filter: drop-shadow(0 15px 50px #000);
  animation: rotating 4s linear infinite;
  border-radius: 20px;
  padding: 4px; /* Creates the border thickness */
}

.animated-border-wrapper::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-conic-gradient(
    from var(--a),
    #d68f1c 0%,
    #d68f1c 5%,
    transparent 5%,
    transparent 40%,
    #d68f1c 50%
  );
  animation: rotating 4s linear infinite;
  animation-delay: -1s;
  border-radius: 20px;
  z-index: 1;
}

/* This targets the inner div to sit on top of the animation */
.animated-border-wrapper > .bg-gray-900 {
  position: relative;
  z-index: 2;
  border-radius: 15px; /* Must be slightly smaller than the wrapper's radius */
}

/* --- MODIFIED: Naughty Button Transition --- */
#checkout-btn {
  /* Animate both the movement and the size change */
  transition: transform 0.2s ease-in-out, width 0.3s ease-out;
}

/* --- NEW: Style for when the form is valid --- */
#checkout-btn.form-valid {
  width: 100%; /* Grow to full width */
  /* Override any inline transform style to reset the button's position */
  transform: translateX(0) !important;
}

/* --- NEW: Glowing Button Animation --- */
@keyframes pulse-glow {
  0%, 100% {
    box-shadow: 0 0 5px #ff6a00;
  }
  50% {
    box-shadow: 0 0 20px #ff6a00, 0 0 30px #ff8c3a;
  }
}

#checkout-btn.glow {
  animation: pulse-glow 2s infinite ease-in-out;
}


/* --- MODIFIED: Hero Text Fly-In/Out Animation --- */

/* The container for the animated text */
#typing-text {
  display: inline-flex;
  flex-wrap: wrap;
  perspective: 300px;
  height: auto; /* Overrides the previous fixed height */
}

/* Base style for each letter (a span) */
#typing-text > span {
  display: inline-block;
  /* Initial state: hidden, below, and slightly tilted back */
  opacity: 0;
  transform: translateY(120%) rotateX(-90deg);
  transform-origin: bottom center;
  /* Animation speed and easing for a smooth, modern feel */
  transition: transform 0.6s cubic-bezier(0.215, 0.610, 0.355, 1), opacity 0.5s ease-out;
}

/* The class that will be added by JS to trigger the fly-in animation */
#typing-text > span.visible {
  /* Final state: visible and in its correct position */
  opacity: 1;
  transform: translateY(0) rotateX(0);
}

/* --- NEW: Custom Mobile Dropdown Styles --- */
.custom-select-wrapper {
  position: relative; /* This is crucial for positioning the options */
  width: 100%;
}

.custom-select-trigger {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  background-color: #2D3748;
  border: 1px solid #4A5568;
  border-radius: 8px;
  color: #fff;
  font-weight: bold;
  cursor: pointer;
}

.custom-select-options {
  position: absolute;
  top: 100%; /* Position right below the trigger */
  left: 0;
  right: 0;
  background-color: #2D3748;
  border: 1px solid #4A5568;
  border-top: none;
  border-radius: 0 0 8px 8px;
  max-height: 200px;
  overflow-y: auto;
  z-index: 1002; /* Ensure it's above other mobile menu content */
  
  /* Hidden by default */
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

/* Toggled by JS to show the dropdown */
.custom-select-wrapper.open .custom-select-options {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.custom-select-option {
  padding: 0.75rem 1rem;
  cursor: pointer;
  font-weight: 500;
}

.custom-select-option:hover {
  background-color: #4A5568;
}

.custom-select-option.selected {
  background-color: #B12C00;
  font-weight: bold;
}
/*End of Custom Mobile Dropdown Styles */

/* --- NEW: Color Swatch and Custom Dropdown Adjustments --- */

/* Style for the color circle */
.color-swatch-filter {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid #5f6570; /* A subtle border for light colors */
  margin-right: 10px;
  flex-shrink: 0; /* Prevents the circle from shrinking */
}

/* Make trigger and options use flexbox to align the swatch and text */
.custom-select-trigger,
.custom-select-option {
  display: flex;
  align-items: center;
}

/* Give the wrapper a minimum width so it doesn't look squished on desktop */
.custom-select-wrapper {
  min-width: 180px;
}
/* End of Color Swatch and Custom Dropdown Adjustments */