/* Privacy-Safe System Font Stack (GDPR Compliant — No External IP Leakage) */
:root {
  --primary-red: #ffc107;
  --primary-red-hover: #e0a800;
  --dark-charcoal: #0f172a;
  --light-gray-bg: #f8fafc;
}

*, *::before, *::after {
  box-sizing: border-box;
  overflow-wrap: break-word;
  word-break: break-word;
}

html, body {
  width: 100% !important;
  max-width: 100vw !important;
  overflow-x: hidden !important;
  margin: 0;
  padding: 0;
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  background-color: #ffffff;
  color: #111111;
  -webkit-font-smoothing: antialiased;
}

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

/* Mobile Usability, iOS Safari Zoom Prevention & Touch Target Rules */
@media (max-width: 767px) {
  input, select, textarea {
    font-size: 16px !important; /* Prevents auto-zoom in iOS Safari when focused */
    min-height: 44px;
  }

  button, a, input, select, textarea, label[for], [role="button"] {
    min-height: 44px;
  }

  .touch-target-44 {
    min-width: 44px !important;
    min-height: 44px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* Responsive Table Scroll Container */
.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  display: block;
}

/* Glassmorphism Styling */
.glass-header {
  background: #ffc107 !important;
  backdrop-filter: blur(16px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
  border-bottom: 2px solid rgba(15, 23, 42, 0.15) !important;
  box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.15);
}

.glass-pill {
  background: rgba(255, 193, 7, 0.85) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 4px solid rgba(229, 231, 235, 0.8) !important;
}

.glass-dropdown {
  background: #0f172a !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border: 1px solid rgba(229, 231, 235, 0.1) !important;
}

/* Custom Hero Diagonal Clip Path */
.clip-hero-red {
  clip-path: polygon(15% 0, 100% 0, 100% 100%, 0% 100%);
}

/* Smooth Horizontal Scrollbar styling */
.scrollbar-none::-webkit-scrollbar {
  display: none;
}

.scrollbar-none {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Custom subtle card hover elevation */
.card-hover-effect {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.card-hover-effect:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.01);
}

/* Price currency transition */
.product-price,
.product-original-price {
  transition: opacity 0.2s ease-in-out;
}

/* Extra Mobile Scaling Safeguard for Small Displays */
@media (max-width: 480px) {
  .hero-cluster-container {
    transform: scale(0.85);
    transform-origin: center center;
    margin-top: -15px;
    margin-bottom: -15px;
  }
}

/* Uiverse.io Cart & Checkout Component Styles (by zanina-yassine) */
.master-container {
  display: grid;
  grid-template-columns: auto;
  gap: 15px;
  max-width: 440px;
  width: 100%;
  margin: 0 auto;
}

.card {
  width: 100%;
  background: #FFFFFF;
  box-shadow: 0px 187px 75px rgba(0, 0, 0, 0.01), 0px 105px 63px rgba(0, 0, 0, 0.05), 0px 47px 47px rgba(0, 0, 0, 0.09), 0px 12px 26px rgba(0, 0, 0, 0.1), 0px 0px 0px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.card .title {
  width: 100%;
  height: 40px;
  position: relative;
  display: flex;
  align-items: center;
  padding-left: 20px;
  border-bottom: 1px solid #efeff3;
  font-weight: 700;
  font-size: 11px;
  color: #63656b;
}

/* cart */
.cart {
  border-radius: 19px 19px 7px 7px;
}

.cart .products {
  display: flex;
  flex-direction: column;
  padding: 10px;
}

.cart .products .product {
  display: grid;
  grid-template-columns: 60px 1fr 80px 1fr;
  gap: 10px;
  align-items: center;
}

.cart .products .product span {
  font-size: 13px;
  font-weight: 600;
  color: #47484b;
  margin-bottom: 8px;
  display: block;
}

.cart .products .product p {
  font-size: 11px;
  font-weight: 600;
  color: #7a7c81;
}

.cart .quantity {
  height: 30px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  margin: auto;
  background-color: #ffffff;
  border: 1px solid #e5e5e5;
  border-radius: 7px;
  filter: drop-shadow(0px 1px 0px #efefef)
    drop-shadow(0px 1px 0.5px rgba(239, 239, 239, 0.5));
}

.cart .quantity label {
  width: 20px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 2px;
  font-size: 15px;
  font-weight: 700;
  color: #47484b;
}

.cart .quantity button {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  outline: none;
  background-color: transparent;
  padding-bottom: 2px;
  cursor: pointer;
}

.card .small {
  font-size: 15px;
  margin: 0 0 auto auto;
}

.card .small sup {
  font-size: 11px;
}

/* coupons */
.coupons {
  border-radius: 7px;
}

.coupons form {
  display: grid;
  grid-template-columns: 1fr 80px;
  gap: 10px;
  padding: 10px;
}

.input_field {
  width: 100%;
  height: 36px;
  padding: 0 0 0 12px;
  border-radius: 5px;
  outline: none;
  border: 1px solid #e5e5e5;
  filter: drop-shadow(0px 1px 0px #efefef)
    drop-shadow(0px 1px 0.5px rgba(239, 239, 239, 0.5));
  transition: all 0.3s cubic-bezier(0.15, 0.83, 0.66, 1);
}

.input_field:focus {
  border: 1px solid transparent;
  box-shadow: 0px 0px 0px 2px #242424;
  background-color: transparent;
}

.coupons form button {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 10px 18px;
  gap: 10px;
  width: 100%;
  height: 36px;
  background: linear-gradient(180deg, #4480FF 0%, #115DFC 50%, #0550ED 100%);
  box-shadow: 0px 0.5px 0.5px #EFEFEF, 0px 1px 0.5px rgba(239, 239, 239, 0.5);
  border-radius: 5px;
  border: 0;
  font-style: normal;
  font-weight: 600;
  font-size: 12px;
  line-height: 15px;
  color: #ffffff;
  cursor: pointer;
}

/* Checkout */
.checkout {
  border-radius: 9px 9px 19px 19px;
}

.checkout .details {
  display: grid;
  grid-template-columns: 3fr 1fr;
  padding: 10px;
  gap: 5px;
}

.checkout .details span {
  font-size: 13px;
  font-weight: 600;
}

.checkout .details span:nth-child(odd) {
  color: #7a7c81;
}

.checkout .details span:nth-child(even) {
  color: #47484b;
  text-align: right;
}

.checkout .checkout--footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 10px 10px 20px;
  background-color: #efeff3;
}

.checkout .price {
  font-size: 22px;
  color: #2B2B2F;
  font-weight: 900;
}

.checkout .price sup {
  font-size: 13px;
}

.checkout .checkout-btn {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 150px;
  height: 36px;
  background: linear-gradient(180deg, #4480FF 0%, #115DFC 50%, #0550ED 100%);
  box-shadow: 0px 0.5px 0.5px #EFEFEF, 0px 1px 0.5px rgba(239, 239, 239, 0.5);
  border-radius: 7px;
  border: 0;
  font-style: normal;
  font-weight: 600;
  font-size: 12px;
  line-height: 15px;
  color: #ffffff;
  text-decoration: none;
  cursor: pointer;
}


/* Checkout Preloader Animation (by Pawelitto) */
.checkout-preloader-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.checkout-preloader-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.checkout-loader-wrap .container {
  background-color: #ffffff;
  display: flex;
  width: 270px;
  height: 120px;
  position: relative;
  border-radius: 6px;
  transition: 0.3s ease-in-out;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.3);
}

.checkout-loader-wrap .container:hover,
.checkout-loader-wrap .container.animating {
  transform: scale(1.03);
}

.checkout-loader-wrap .container:hover .left-side,
.checkout-loader-wrap .container.animating .left-side {
  width: 100%;
}

.checkout-loader-wrap .left-side {
  background-color: #5de2a3;
  width: 130px;
  height: 120px;
  border-radius: 4px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: 0.3s;
  flex-shrink: 0;
  overflow: hidden;
}

.checkout-loader-wrap .right-side {
  display: flex;
  align-items: center;
  overflow: hidden;
  cursor: pointer;
  justify-content: space-between;
  white-space: nowrap;
  transition: 0.3s;
}

.checkout-loader-wrap .right-side:hover {
  background-color: #f9f7f9;
}

.checkout-loader-wrap .arrow {
  width: 20px;
  height: 20px;
  margin-right: 20px;
}

.checkout-loader-wrap .new {
  font-size: 23px;
  font-family: "Lexend Deca", "Plus Jakarta Sans", sans-serif;
  margin-left: 20px;
  font-weight: 700;
  color: #0f172a;
}

.checkout-loader-wrap .card {
  width: 70px;
  height: 46px;
  background-color: #c7ffbc;
  border-radius: 6px;
  position: absolute;
  display: flex;
  z-index: 10;
  flex-direction: column;
  align-items: center;
  box-shadow: 9px 9px 9px -2px rgba(77, 200, 143, 0.72);
  -webkit-box-shadow: 9px 9px 9px -2px rgba(77, 200, 143, 0.72);
  -moz-box-shadow: 9px 9px 9px -2px rgba(77, 200, 143, 0.72);
}

.checkout-loader-wrap .card-line {
  width: 65px;
  height: 13px;
  background-color: #80ea69;
  border-radius: 2px;
  margin-top: 7px;
}

@media only screen and (max-width: 480px) {
  .checkout-loader-wrap .container {
    transform: scale(0.85);
  }

  .checkout-loader-wrap .container:hover,
  .checkout-loader-wrap .container.animating {
    transform: scale(0.9);
  }

  .checkout-loader-wrap .new {
    font-size: 18px;
  }
}

.checkout-loader-wrap .buttons {
  width: 8px;
  height: 8px;
  background-color: #379e1f;
  box-shadow: 0 -10px 0 0 #26850e, 0 10px 0 0 #56be3e;
  border-radius: 50%;
  margin-top: 5px;
  transform: rotate(90deg);
  margin: 10px 0 0 -30px;
}

.checkout-loader-wrap .container:hover .card,
.checkout-loader-wrap .container.animating .card {
  animation: slide-top 1.2s cubic-bezier(0.645, 0.045, 0.355, 1) infinite;
}

.checkout-loader-wrap .container:hover .post,
.checkout-loader-wrap .container.animating .post {
  animation: slide-post 1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
}

@keyframes slide-top {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  50% {
    -webkit-transform: translateY(-70px) rotate(90deg);
    transform: translateY(-70px) rotate(90deg);
  }

  60% {
    -webkit-transform: translateY(-70px) rotate(90deg);
    transform: translateY(-70px) rotate(90deg);
  }

  100% {
    -webkit-transform: translateY(-8px) rotate(90deg);
    transform: translateY(-8px) rotate(90deg);
  }
}

.checkout-loader-wrap .post {
  width: 63px;
  height: 75px;
  background-color: #dddde0;
  position: absolute;
  z-index: 11;
  bottom: 10px;
  top: 120px;
  border-radius: 6px;
  overflow: hidden;
}

.checkout-loader-wrap .post-line {
  width: 47px;
  height: 9px;
  background-color: #545354;
  position: absolute;
  border-radius: 0px 0px 3px 3px;
  right: 8px;
  top: 8px;
}

.checkout-loader-wrap .post-line:before {
  content: "";
  position: absolute;
  width: 47px;
  height: 9px;
  background-color: #757375;
  top: -8px;
}

.checkout-loader-wrap .screen {
  width: 47px;
  height: 23px;
  background-color: #ffffff;
  position: absolute;
  top: 22px;
  right: 8px;
  border-radius: 3px;
}

.checkout-loader-wrap .numbers {
  width: 12px;
  height: 12px;
  background-color: #838183;
  box-shadow: 0 -18px 0 0 #838183, 0 18px 0 0 #838183;
  border-radius: 2px;
  position: absolute;
  transform: rotate(90deg);
  left: 25px;
  top: 52px;
}

.checkout-loader-wrap .numbers-line2 {
  width: 12px;
  height: 12px;
  background-color: #aaa9ab;
  box-shadow: 0 -18px 0 0 #aaa9ab, 0 18px 0 0 #aaa9ab;
  border-radius: 2px;
  position: absolute;
  transform: rotate(90deg);
  left: 25px;
  top: 68px;
}

@keyframes slide-post {
  50% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    -webkit-transform: translateY(-70px);
    transform: translateY(-70px);
  }
}

.checkout-loader-wrap .dollar {
  position: absolute;
  font-size: 16px;
  font-family: "Lexend Deca", "Plus Jakarta Sans", sans-serif;
  width: 100%;
  left: 0;
  top: 0;
  color: #4b953b;
  text-align: center;
  font-weight: 800;
}

.checkout-loader-wrap .container:hover .dollar,
.checkout-loader-wrap .container.animating .dollar {
  animation: fade-in-fwd 0.3s 1s backwards infinite;
}

@keyframes fade-in-fwd {
  0% {
    opacity: 0;
    transform: translateY(-5px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}


/* Uiverse.io Cart Loader Animation (by abhinav_7137) */
.cart-preloader-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.cart-preloader-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.cart-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 200px;
  height: 200px;
}

.cart-loader .items-container {
  position: relative;
  width: 140px;
  height: 100px;
  overflow: hidden;
}

.cart-loader .item {
  position: absolute;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0;
}

/* Animated Cart Item Badges */
.cart-loader #item-mobile {
  background-color: #ffc107;
  border: 2px solid #e0a800;
  border-radius: 4px;
  left: 20px;
  animation: drop-item 2s infinite 0.1s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.cart-loader #item-laptop {
  background-color: #3b82f6;
  border: 2px solid #1d4ed8;
  border-radius: 4px;
  left: 40px;
  animation: drop-item 2s infinite 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.cart-loader #item-tab {
  background-color: #10b981;
  border: 2px solid #047857;
  border-radius: 5px;
  left: 60px;
  animation: drop-item 2s infinite 0.7s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.cart-loader #item-headphone {
  background-color: #ec4899;
  border: 2px solid #be185d;
  border-radius: 50%;
  left: 80px;
  animation: drop-item 2s infinite 1.0s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.cart-loader #item-mixer {
  background-color: #8b5cf6;
  border: 2px solid #6d28d9;
  border-radius: 6px;
  left: 100px;
  animation: drop-item 2s infinite 1.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes drop-item {
  0% {
    top: -30px;
    opacity: 0;
    transform: scale(0.5) rotate(-20deg);
  }
  40% {
    top: 60px;
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
  70% {
    top: 65px;
    opacity: 1;
    transform: scale(0.9) rotate(10deg);
  }
  100% {
    top: 110px;
    opacity: 0;
    transform: scale(0.3) rotate(30deg);
  }
}

.cart-loader #cart-icon {
  width: 60px;
  height: 45px;
  background-color: #ffffff;
  border-radius: 0 0 16px 16px;
  position: relative;
  margin-top: 10px;
  box-shadow: 0 10px 20px rgba(0,0,0,0.2);
  animation: cart-bounce 1s infinite alternate cubic-bezier(0.45, 0.05, 0.55, 0.95);
}

.cart-loader #cart-icon::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 10px;
  width: 40px;
  height: 12px;
  border: 3px solid #ffffff;
  border-bottom: none;
  border-radius: 12px 12px 0 0;
}

.cart-loader #cart-icon::after {
  content: "🛒";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

@keyframes cart-bounce {
  0% {
    transform: translateY(0) scaleX(1);
  }
  100% {
    transform: translateY(-8px) scaleX(1.05);
  }
}

.cart-loader .loading-text {
  margin-top: 20px;
  font-size: 16px;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 0.05em;
}

.cart-loader .dot {
  display: inline-block;
  animation: dot-pulse 1.4s infinite;
}

.cart-loader .dot:nth-child(1) {
  animation-delay: 0.2s;
}

.cart-loader .dot:nth-child(2) {
  animation-delay: 0.4s;
}

.cart-loader .dot:nth-child(3) {
  animation-delay: 0.6s;
}

@keyframes dot-pulse {
  0%, 20% {
    opacity: 0;
    transform: translateY(0);
  }
  50% {
    opacity: 1;
    transform: translateY(-4px);
  }
  100% {
    opacity: 0;
    transform: translateY(0);
  }
}