:root {
  --background: #ffffff;
  --foreground: #171717;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;
    --foreground: #ededed;
  }
}

html,
body {
  max-width: 100vw;
  overflow-x: hidden;
}

body {
  color: var(--foreground);
  background: var(--background);
  font-family: Arial, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

@media (prefers-color-scheme: dark) {
  html {
    color-scheme: dark;
  }
}

/* --- PRODUCTION SAFEGUARD CSS --- */

/* 1. Apple Pay Fallback */
.w-commerce-commercecartapplepaybutton {
  background-image: url('https://cdn.iconscout.com/icon/free/png-256/apple-pay-4-761698.png') !important;
  background-size: auto 50% !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  position: relative;
}

/* Text fallback if image fails */
.w-commerce-commercecartapplepaybutton::after {
  content: "Apple Pay";
  color: white;
  font-weight: 600;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  /* Ensure text is above background if background is dark, or visible if image fails */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* 2. Minus Button Visibility */
.cart-qty-btn {
  border: 1px solid #d1d5db !important;
  /* Higher contrast border */
  color: #111827 !important;
  /* Darker text/icon */
  background-color: #ffffff !important;
  opacity: 1 !important;
  border-radius: 4px !important;
}

.cart-qty-btn:hover {
  border-color: #9ca3af !important;
  background-color: #f9fafb !important;
}

/* Base styles for all screens (Mobile/Tablet focus) */
.mobile-nav {
  display: none !important;
}

.container-menu,
.mobile-nav-container-90,
.nav-top-bar {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

/* Add to Cart Button Styling - All Screen Sizes */
.add-to-cart-button,
.w-commerce-commerceaddtocartbutton.add-to-cart-button {
  background-color: #0d0d0d !important;
  color: #faf8f7 !important;
  border-radius: 70px !important;
  font-weight: 600 !important;
  border: none !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  padding: 20px 24px !important;
  width: 100% !important;
  min-height: 50px !important;
  line-height: 1.2 !important;
  font-size: 1rem !important;
  font-family: Inter, sans-serif !important;
  box-sizing: border-box !important;
}

/* Ensure button text/value is centered */
.add-to-cart-button[type="button"],
.add-to-cart-button[type="submit"],
.w-commerce-commerceaddtocartbutton.add-to-cart-button[type="button"],
.w-commerce-commerceaddtocartbutton.add-to-cart-button[type="submit"] {
  text-align: center !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

/* --- UNIVERSAL LOGO CENTERING FIX --- */

/* Base styles for all screens (Mobile/Tablet focus) */
.container-menu,
.mobile-nav-container-90,
.nav-top-bar {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.nav-center {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  z-index: 100 !important;
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  height: 100% !important;
  pointer-events: auto !important;
}

.nav-logo-link {
  display: inline-block !important;
  height: auto !important;
}

.logo-stonearts {
  height: 45px !important;
  width: auto !important;
  max-width: 100% !important;
  /* Increased from 140px to accommodate larger height without distortion */
  display: inline-block !important;
  vertical-align: middle !important;
  object-fit: contain !important;
  transition: height 0.3s ease !important;
}

@media screen and (max-width: 991px) {
  .logo-stonearts {
    height: 40px !important;
  }
}

/* Desktop Specific Refinement: Use flex-grow for better spacing */
@media screen and (min-width: 992px) {

  .nav-left,
  .nav-right {
    flex: 1 !important;
    display: flex !important;
  }

  .nav-right {
    justify-content: flex-end !important;
  }

  /* Absolute centering maintained for desktop */
}

@media screen and (max-width: 991px) {

  /* 2. Precision Header Fix */
  .desktop-nav {
    display: none !important;
  }

  .mobile-nav {
    display: flex !important;
    background-color: #ffffff !important;
    height: 60px !important;
    width: 100% !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 9999 !important;
    border-bottom: 1px solid #eeeeee !important;
    padding: 0 15px !important;
  }

  .menu-button,
  .mobile-nav .nav-right {
    width: 40px !important;
    display: flex !important;
    height: 100% !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

@media screen and (max-width: 767px) {

  /* 3. True Edge-to-Edge Product Presentation */
  .section.product {
    padding-top: 60px !important;
    /* Fixed header height */
    margin-top: 0 !important;
    /* Killer of the 4.4rem default gap */
  }

  .container-products {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .mobile-selection-grid {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 0 !important;
  }

  .slider-selector_component.is-slider-product.mobile {
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
    border: none !important;
  }

  .img-hight {
    padding-top: 0 !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    width: 100% !important;
    display: block !important;
    position: relative !important;
    background: #fff !important;
  }

  .img-swiper_img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    display: block !important;
    border: none !important;
    box-shadow: none !important;
  }

  /* Slider Indicator - Segmented Orange Bar */
  .slider-main_bottom-wrapper {
    margin: -10px auto 20px auto !important;
    padding: 0 10% !important;
    position: relative !important;
    z-index: 100 !important;
    width: 80% !important;
  }

  .swiper-drag-wrapper {
    height: 3px !important;
    background: #f0f0f0 !important;
    border-radius: 4px !important;
  }

  .swiper-drag {
    background: #df6330 !important;
    height: 3px !important;
    border-radius: 4px !important;
  }

  /* 4. Text & Branding Typography */
  .product_text_wrapper {
    padding: 30px 20px !important;
    background: #fff !important;
  }

  .header-wrapper-product {
    display: flex !important;
    align-items: baseline !important;
    gap: 6px !important;
    margin-bottom: 8px !important;
  }

  .heading-157 {
    font-size: 1.8rem !important;
    font-weight: 400 !important;
    margin: 0 !important;
  }

  .heading-158.is-product_main,
  .heading-158 {
    font-size: 1.8rem !important;
    font-weight: 800 !important;
    margin: 0 !important;
  }

  .brand_wrapper {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin-bottom: 15px !important;
  }

  .price_wrapper .heading-159 {
    color: #df6330 !important;
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    margin: 10px 0 2px 0 !important;
  }

  .text-block-86,
  .text-block-127 {
    font-size: 0.9rem !important;
    color: #555 !important;
    margin-bottom: 2px !important;
  }

  /* 5. Rating Section & Leave Review Button */
  .rating.mobile,
  .rating {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-top: 30px !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .rating.mobile::after {
    display: none !important;
    /* Hide the CSS hack if we find the real button */
  }

  /* 6. Variant & Buttons Styling */
  .variation-wrapper {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin: 20px 0 !important;
  }

  .add-to-cart-button,
  .w-commerce-commerceaddtocartbutton.add-to-cart-button,
  .button-outline-white._2.bento.samples,
  .leave-review-button-custom {
    background-color: #0d0d0d !important;
    color: #faf8f7 !important;
    width: 100% !important;
    min-height: 50px !important;
    height: auto !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    border-radius: 70px !important;
    font-weight: 600 !important;
    border: none !important;
    margin-top: 20px !important;
    font-size: 1rem !important;
    padding: 16px 24px !important;
    line-height: 1.2 !important;
    font-family: Inter, sans-serif !important;
    box-sizing: border-box !important;
  }

  /* Ensure button text/value is centered on mobile */
  .add-to-cart-button[type="button"],
  .add-to-cart-button[type="submit"],
  .w-commerce-commerceaddtocartbutton.add-to-cart-button[type="button"],
  .w-commerce-commerceaddtocartbutton.add-to-cart-button[type="submit"] {
    text-align: center !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }

  /* 7. Grid Cleanup */
  [class*="w-node-"] {
    grid-column: span 1 !important;
    width: 100% !important;
    margin: 0 !important;
    position: static !important;
  }
}

/* --- PREMIUM ARCHITECTURAL CART UI --- */

/* 1. Overall Cart Container */
.w-commerce-commercecartcontainerwrapper {
  background-color: rgba(0, 0, 0, 0.45) !important;
  backdrop-filter: blur(8px);
  transition: opacity 0.4s ease-out !important;
}

.w-commerce-commercecartcontainer {
  box-shadow: -10px 0 50px rgba(0, 0, 0, 0.05) !important;
  background-color: #fafafa !important;
  /* Extremely light neutral grey */
}

/* 2. Cart List & Dividers */
.w-commerce-commercecartlist {
  padding: 20px 0 !important;
}

.w-commerce-commercecartitem {
  padding: 24px 32px !important;
  margin-bottom: 0 !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04) !important;
  background-color: transparent !important;
  transition: background-color 0.2s ease;
}

.w-commerce-commercecartitem:last-child {
  border-bottom: none !important;
}

/* 3. Product Image Styling */
.cart-item-image-container {
  width: 95px !important;
  height: 95px !important;
  background-color: #f3f3f3;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.w-commerce-commercecartitemimage {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  mix-blend-mode: multiply;
  /* Helps blend flat product shots */
}

/* 4. Information Hierarchy */
.w-commerce-commercecartiteminfo {
  margin-left: 20px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}

.w-commerce-commercecartproductname {
  font-family: 'Inter', sans-serif !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  color: #000 !important;
  /* Force black for visibility */
  margin-bottom: 4px !important;
  opacity: 1 !important;
}

.w-commerce-commercecartproductoption {
  font-size: 0.85rem !important;
  color: #444 !important;
  /* Darker grey for variant */
  letter-spacing: 0.01em !important;
  font-weight: 400 !important;
}

.w-commerce-commercecartproductprice {
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  font-size: 1.15rem !important;
  color: #000 !important;
  /* Force black for visibility */
  text-align: right;
  flex-shrink: 0;
  opacity: 1 !important;
}

.cart-item-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  gap: 12px;
}

.cart-item-controls {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-end !important;
  margin-top: 16px !important;
}

/* 5. Quantity Controls - Solid & Intentional */
.cart-quantity-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cart-quantity-controls {
  display: flex !important;
  align-items: center !important;
  background: white;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 6px;
  padding: 2px;
  width: fit-content;
}

.cart-qty-btn {
  width: 34px !important;
  height: 34px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: none !important;
  color: #444 !important;
  cursor: pointer;
  transition: all 0.2s ease !important;
}

.cart-qty-btn:hover {
  background: rgba(0, 0, 0, 0.03) !important;
  color: #000 !important;
  transform: scale(1.05);
}

.cart-quantity-input {
  width: 58px !important;
  /* Slightly increased to prevent clipping */
  height: 34px !important;
  border: none !important;
  text-align: center !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  color: #000000 !important;
  background: transparent !important;
  appearance: textfield;
  opacity: 1 !important;
  padding: 0 4px !important;
  /* Added padding to prevent digit edge clipping */
  box-sizing: border-box !important;
}

.cart-min-qty-helper {
  font-size: 11px;
  color: #555;
  /* Darkened for visibility */
  font-style: italic;
  font-family: 'Inter', sans-serif;
}

/* 6. Delete Action - Subtle Trash Icon */
.cart-delete-link {
  background: transparent !important;
  border: none !important;
  padding: 8px !important;
  color: #888 !important;
  /* Darkened for better baseline visibility */
  cursor: pointer;
  transition: all 0.2s ease !important;
  height: fit-content;
  align-self: flex-start;
}

.cart-delete-link:hover {
  color: #df6330 !important;
  /* Brand orange on hover */
  transform: scale(1.1);
}

/* 7. Total Section - Visual Anchor */
.w-commerce-commercecartfooter {
  padding: 32px !important;
  background-color: white !important;
  border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
}

.w-commerce-commercecartsummarywrapper {
  background-color: #f8f8f8 !important;
  border-radius: 12px;
  padding: 24px !important;
  margin-bottom: 24px !important;
}

.w-commerce-commercecartsummarylineitem {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.w-commerce-commercecartsummarylineitem div:first-child {
  font-size: 0.95rem !important;
  color: #000000 !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600 !important;
  opacity: 1 !important;
}

.w-commerce-commercecartordervalue {
  font-size: 1.6rem !important;
  font-weight: 800 !important;
  color: #000 !important;
  opacity: 1 !important;
}

/* 8. Button Hierarchy */
.w-commerce-commercecartcheckoutbutton {
  background-color: #df6330 !important;
  /* Brand Orange */
  height: 58px !important;
  border-radius: 12px !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  font-size: 1.05rem !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 15px rgba(223, 99, 48, 0.2) !important;
}

.w-commerce-commercecartcheckoutbutton:hover {
  background-color: #c55427 !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(223, 99, 48, 0.3) !important;
}

.w-commerce-commercecartapplepaybutton {
  margin-top: 12px !important;
  height: 52px !important;
  border-radius: 12px !important;
  background-color: #000 !important;
  opacity: 0.85;
}

.w-commerce-commercecartapplepaybutton:hover {
  opacity: 1;
}

/* 9. Mobile Polish */
@media screen and (max-width: 479px) {
  .w-commerce-commercecartitem {
    padding: 20px 20px !important;
  }

  .w-commerce-commercecartproductname {
    font-size: 0.95rem !important;
  }

  .cart-item-image-container {
    width: 80px !important;
    height: 80px !important;
  }

  .w-commerce-commercecartfooter {
    padding: 20px !important;
  }
}

/* --- HAMBURGER MENU FIXES --- */
@media screen and (max-width: 991px) {

  /* 1. Fix: Duplicate Navbars */
  .nav-stonearts+.nav-stonearts {
    display: none !important;
  }

  /* 2. Fix: Duplicate Menu Buttons */
  .menu-button~.menu-button {
    display: none !important;
  }

  /* 3. Fix: Invisible Hamburger (Fallback Icon) */
  .menu-button {
    background-image: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cline x1=%223%22 y1=%2212%22 x2=%2221%22 y2=%2212%22/%3E%3Cline x1=%223%22 y1=%226%22 x2=%2221%22 y2=%226%22/%3E%3Cline x1=%223%22 y1=%2218%22 x2=%2221%22 y2=%2218%22/%3E%3C/svg%3E') !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: 24px !important;
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* 4. Fix: Double Icon - Hide fallback if Lottie loads (has child svg/canvas) */
  /* Note: :has support is good in modern browsers (92%), safe fallback is just showing both overlapping which is better than invisible */
  .menu-button:has(svg),
  .menu-button:has(canvas) {
    background-image: none !important;
  }

  /* 5. Ensure Z-Index needed for visibility */
  .nav-top-bar,
  .mobile-nav,
  .menu-button {
    z-index: 9999 !important;
    position: relative !important;
  }

  /* 6. Fix: Duplicate SVGs in Lottie container */
  [data-animation-type="lottie"] svg~svg {
    display: none !important;
  }
}

/* 8. Fix: Specification image — prevent overflow and cropping */
.taps-img-container-2.specifications {
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
}

.taps-img-container-2.specifications .image-152 {
  object-fit: contain !important;
  max-width: 100% !important;
  height: auto !important;
}