/* Cart popup styles - slide in from right */
.cart-popup-backdrop,
.offcanvas-backdrop {
  /* keep existing menu backdrop compatible */
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: 9998;
}

/* backdrop blur for modern browsers */
.cart-popup-backdrop {
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: opacity 240ms ease, visibility 240ms ease;
  opacity: 1;
}
.inner_empty {
  height: 100% !important;
}

.cart-popup {
  position: fixed;
  padding: 40px 0 40px 40px; /* design paddings */
  top: 0;
  right: 0;
  height: 100vh;
  width: 504px; /* as provided */
  max-width: 100%;
  transform: translateX(100%);
  transition: transform 320ms ease;
  z-index: 999999;
  background: #fcfafa; /* BG from design */
  box-shadow: -12px 0 30px rgba(0, 0, 0, 0.12);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.sum_custom_he {
  font-size: 28px;
  color: #141517;
  font-weight: 600;
  display: flex;
  align-items: center;
}
.btn_check_custom {
  height: 51px;
  width: 344px;
  background: #141517 !important;
  color: #fff !important;
  font-size: 20px;
  text-transform: uppercase;
  font-weight: 500;
}
.btn_check_custom:hover {
  background: #454950 !important;
  color: #fff !important;
}
.cart-popup__sum {
  margin-left: 10px;
}
.cart-popup[aria-hidden='false'] {
  transform: translateX(0);
}

/* When cart popup is open, lock page scroll. The html element receives the
   `cart-popup-open` class from JS, so we target body via that class. */
.cart-popup-open body,
.cart-popup-open {
  overflow: hidden !important;
  touch-action: none !important;
}

/* Alternative scroll-lock class applied to body which preserves the current
   scroll position by fixing the body and using top offset (used on mobile).
   JS will add/remove .cart-popup-scroll-locked and set inline top style. */
.cart-popup-scroll-locked {
  position: fixed !important;
  width: 100% !important;
  overflow: hidden !important;
}

.cart-popup__inner {
  display: flex;
  flex-direction: column;
  height: 80%;
  box-sizing: border-box;
}

.cart-popup__title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  width: 80%;
}

.cart-popup__title h2 {
  margin: 0;
  font-family: 'Manrope', sans-serif;
  font-weight: 500;
  font-size: 40px;
  line-height: 55px;
  text-transform: uppercase;
  color: #141517;
}

.cart-popup__close {
  background: transparent;
  border: 0;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 27px;
}

.cart-popup__content {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  overflow: auto;
  padding-right: 10px;
  height: 100%;
}
.widget_shopping_cart_content,
.widget_shopping_cart_content ul,
.widget_shopping_cart_content ul li,
.widget_shopping_cart_content ul li div {
  height: 100%;
}

.cart-popup__card {
  display: flex;
  gap: 16px;
  align-items: center;
  width: 100%;
  background: transparent;
  height: 245px !important;
}

.cart-popup__photo {
  /* Photo
     Auto layout from design: vertical stack, spaced, centered */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 0;
  margin: 0;
  gap: 10px;

  width: 164px;
  height: 245px;

  background: #281f1b;

  /* Inside auto layout */
  flex: none;
  order: 0;
  flex-grow: 0;
}

.cart-popup__photo img {
  max-width: 100%;
  height: auto;
}

.cart-popup__info {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.cart-popup__name {
  flex: 1 1 auto; /* allow footer below to remain visible */
  min-height: 0; /* allow inner's children to scroll */
  box-sizing: border-box;
  font-weight: 500;
  font-size: 20px;
  line-height: 27px;
  text-transform: uppercase;
  color: #141517;
  margin: 0;
}

.cart-popup__meta {
  color: #333333;
  font-size: 16px;
}

/* Layout adjustments for item meta to match design */
.cart-popup__info-top {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cart-popup__name-wrapper {
  margin-bottom: 0;
  height: auto !important;
}
.widget_shopping_cart_content ul {
  gap: 20px;
  display: grid;
  margin: 0;
}
.cart-popup__name {
  font-size: 20px;
  line-height: 27px;
  font-weight: 500;
  text-transform: uppercase;
}
.cart-popup__meta-lines {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cart-popup__meta-line_span,
.quantity-label {
  color: #333333;
}
.cart-popup__meta-line {
  color: #333333;

  height: 9px !important;
  font-size: 16px;
  height: 22px !important;
}

.cart-popup__info-bottom {
  display: flex;
  justify-content: space-between;
  align-items: start;
  margin-top: 12px;
  flex-direction: column;
}
.cart-popup__quantity {
  display: flex;
  align-items: center;
  gap: 8px;
}
.quantity-label {
  font-size: 16px;
  color: #333333;
  margin-right: 0;
}
.cart-qty-btn {
  background: transparent;
  border: 0;
  font-size: 27px;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 300;
  cursor: pointer;
  padding: 0;
  color: #333333;
}

/* Disabled state: make decrease button non-interactive and show not-allowed cursor */
.cart-qty-btn:disabled,
.cart-qty-btn[aria-disabled='true'] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}
.cart-qty-number {
  min-width: 20px;
  text-align: center;
  display: inline-block;
}

.cart-popup__price-row {
  display: flex;
  align-items: flex-end;
  gap: 24px;
  width: 70%;
  justify-content: space-between;
}
.cart-popup__price {
  font-size: 20px;
  color: #141517;
  font-weight: 500;
  align-items: end;
  display: flex;
}
.woocommerce-mini-cart__remove {
  color: #141517;
  text-decoration: none;
  font-weight: normal !important;
}

.cart-popup__quantity {
  display: flex;
  gap: 6px;
  align-items: center;
}

.cart-popup__price {
  font-family: 'Manrope', sans-serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 27px;
  color: #141517;
}

.cart-popup__empty {
  padding: 48px 24px;
  font-family: 'Manrope', sans-serif;
  color: #333333;
  font-size: 20px;
  text-align: center;
  background: transparent;
  border-radius: 6px;
}

.cart-popup__empty--highlight {
  background: rgba(20, 21, 23, 0.04);
  border: 1px dashed rgba(20, 21, 23, 0.08);
  padding: 40px 24px;
  font-weight: 500;
}

/* Footer - sum + button */
.cart-popup__footer {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cart-popup__sum {
  font-family: 'Manrope', sans-serif;
  font-weight: 500;
  font-size: 28px;
  line-height: 38px;
  color: #141517;
}

/* Checkout button styles (full-width as in design) */
.cart-popup__checkout-btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 344px;
  height: 51px;
  background: #141517;
  color: #ffffff;
  text-transform: uppercase;
  font-family: 'Manrope', sans-serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 27px;
  text-decoration: none;
  border: 0;
  box-sizing: border-box;
}

/* small responsive improvements */
@media (max-width: 600px) {
  .cart-popup {
    width: 100%;
  }
  .cart-popup__inner {
    padding: 24px;
  }
}

/* Empty state exact layout styles */
.cart-empty-layout {
  display: flex;
  justify-content: flex-start;
  width: 100%;
}
.cart-empty-layout__card {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0;
  gap: 24px;
  box-sizing: border-box;
}
.cart-empty-layout__title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 4px;
  width: 344px;
  height: 140px;
}
.cart-empty-layout__heading {
  margin: 0;
  font-family: 'Manrope', sans-serif;
  font-weight: 500;
  font-size: 40px;
  line-height: 55px;
  text-transform: uppercase;
  color: #141517;
}
.cart-empty-layout__message {
  width: 344px;
  height: 81px;
  font-family: 'Manrope', sans-serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 27px;
  color: #333333;
}
.cart-empty-layout__message p {
  margin: 0;
}

.cart-empty-layout__buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  justify-content: end;
  width: 344px;
}
.cart-empty-layout__buttons a {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 344px;
  height: 51px;
  background: transparent;
  text-align: center;
}
.cart-empty-layout__buttons a:first-child {
  background: #141517;
  color: #fff;
}
.cart-empty-layout__buttons a:first-child:hover {
  background: #454950;
  color: #fff !important;
}

.cart-empty-btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 12px 32px;
  width: 344px;
  height: 51px;
  font-family: 'Manrope', sans-serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 27px;
  text-transform: uppercase;
  text-decoration: none;
  box-sizing: border-box;
}
/* .cart-empty-btn--primary {
  background: #141517;
  color: #ffffff;
  border: 0;
} */
.cart-empty-btn--outline {
  background: transparent;
  color: #141517;
  border: 1px solid #141517;
}

@media (max-width: 600px) {
  .cart-empty-layout__card,
  .cart-empty-layout__title,
  .cart-empty-layout__message,
  .cart-empty-layout__buttons {
    width: 100%;
  }
  .cart-empty-btn {
    width: 100%;
  }
}

/* Focus styles: hide focus outlines for mouse users but keep keyboard-visible outlines
   This preserves accessibility for keyboard users while removing visible rings for pointer interactions.
*/
.cart-popup :focus:not(:focus-visible) {
  outline: none !important;
  box-shadow: none !important;
}

/* Specific controls: ensure no forced outline on buttons/links inside popup for mouse */
.cart-popup button:focus,
.cart-popup a:focus {
  outline: none !important;
  box-shadow: none !important;
}

.cart-popup__photo a,
.cart-popup__photo a img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
}

/* The static footer visibility is controlled server-side and via JS. No override needed. */

/* Product slider styles */
.future-media {
  --slider-height: 520px;
  position: relative;
}
.future-media-slider {
  display: flex;
  width: 100%;
  overflow: hidden;
  align-items: stretch;
}
.future-media-slide {
  flex: 0 0 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.future-media-img {
  width: 100%;
  height: var(--slider-height);
  object-fit: cover;
  display: block;
}
.future-media-dots {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 12px;
  display: flex;
  gap: 8px;
  z-index: 20;
}

/* Thumbnail strip under the slider */
.future-media-thumbs {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 12px;
  z-index: 20;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -74px; /* place below slider; adjust if layout differs */
}
.future-media-thumb {
  width: 64px;
  height: 64px;
  padding: 0;
  border: 2px solid transparent;
  background: transparent;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.future-media-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.future-media-thumb.active {
  border-color: rgba(20, 21, 23, 0.9);
}

@media (max-width: 768px) {
  .future-media-thumbs {
    bottom: -86px;
  }
  .future-media-thumb {
    width: 48px;
    height: 48px;
  }
}
.future-media-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.35);
  border: 0;
  padding: 0;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
.future-media-dot.active {
  background: rgba(0, 0, 0, 0.8);
}
/* Responsive: reduce height on small screens */

/* Prev/Next controls */
.future-media-prev,
.future-media-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  border: 0;
  width: 36px;
  height: 36px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 25;
}
.future-media-prev {
  left: 8px;
}
.future-media-next {
  right: 8px;
}
.future-media-prev:focus,
.future-media-next:focus,
.future-media-dot:focus {
  outline: 2px solid rgba(255, 255, 255, 0.6);
  outline-offset: 2px;
}
@media (max-width: 768px) {
  .future-media {
    --slider-height: 320px;
  }
}

/* Styles for product-gallery-simple slider (keeps original HTML structure) */
.product-gallery-simple {
  position: relative;
  overflow: hidden;
}
.product-gallery-track {
  display: flex;
  width: 100%;
  transition: transform 420ms ease;
}
.product-gallery-slide {
  flex: 0 0 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.product-gallery-slide img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}
.product-gallery-prev,
.product-gallery-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  border: 0;
  width: 36px;
  height: 36px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 30;
}
.product-gallery-prev {
  left: 8px;
}
.product-gallery-next {
  right: 8px;
}
.product-gallery-dots {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 8px;
  display: flex;
  gap: 8px;
  z-index: 30;
}
.product-gallery-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.25);
  border: 0;
  padding: 0;
  cursor: pointer;
}
.product-gallery-dot.active {
  background: rgba(0, 0, 0, 0.85);
}

@media (max-width: 768px) {
  .product-gallery-prev,
  .product-gallery-next {
    width: 30px;
    height: 30px;
  }
}

/* Safety rules to force one slide visible even if other styles interfere */
.product-gallery-simple .product-gallery-slide,
.product-gallery-simple .slick-slide {
  flex: 0 0 100% !important;
  max-width: 100% !important;
}
.product-gallery-simple .product-gallery-track,
.product-gallery-simple .slick-list {
  display: flex !important;
}
.product-gallery-simple .slick-slide > * {
  width: 100% !important;
}

/* Ensure slick list (including draggable) fills gallery height so slides can be 100% tall */
.product-gallery-simple .slick-list,
.product-gallery-simple .slick-list.draggable {
  height: 100% !important;
}
.product-gallery-simple .slick-track {
  height: 100% !important;
  display: flex !important;
  align-items: stretch !important;
}
.product-gallery-simple .slick-slide,
.product-gallery-simple .product-gallery-slide {
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.product-gallery-simple .slick-slide > * {
  height: 100% !important;
}

/* Force gallery containers to have a usable default height and make
   images fill their slides fully */
.product-gallery-simple,
.future-media {
  --gallery-height: 520px;
  height: var(--gallery-height) !important;
}

.product-gallery-simple img,
.product-gallery-simple .product-gallery-slide img,
.product-gallery-simple .slick-slide img,
.future-media .future-media-img,
.future-media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* Ensure slick draggable area uses full height */
.product-gallery-simple .slick-list.draggable,
.future-media .slick-list.draggable {
  height: 100% !important;
}

/* Fullscreen mode for galleries */
.future-media.is-fullscreen,
.product-gallery-simple.is-fullscreen {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 99999 !important;
  background: #000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.future-media.is-fullscreen img,
.product-gallery-simple.is-fullscreen img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important; /* show whole image on fullscreen */
}

/* Fullscreen toggle button */
.gallery-fullscreen-btn {
  position: absolute;
  right: 12px;
  top: 12px;
  z-index: 100000;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  border: 0;
  width: 40px;
  height: 40px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.gallery-fullscreen-btn:focus {
  outline: 2px solid #fff;
}

.slick-track {
  height: 100%;
}

/* Slick pagination as full-width horizontal lines
   - Each <li> becomes a flexible segment (line) that fills the gallery width
   - Gap between segments is 20px (as requested)
   - Active segment appears thicker/brighter
*/
.future-media .slick-dots,
.product-gallery-simple .slick-dots,
.slick-dots {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  display: flex;
  gap: 8px; /* requested spacing between lines */
  padding: 0;
  margin: 0;
  list-style: none;
  align-items: center;
  justify-content: space-between; /* ensure first/last align to edges if few slides */
  z-index: 40;
  pointer-events: auto;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.slick-dots li {
  margin: 0;
  padding: 0;
  flex: 1 1 0%; /* allow equal growth so segments fill available width */
  display: block;
}

.slick-dots li button {
  display: block;
  width: 100%;
  height: 2px; /* default thin line */
  background: rgba(255, 255, 255, 0.25);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: all 160ms ease;
  -webkit-appearance: none;
}

.slick-dots li.slick-active button {
  background: #fff !important;
}
.slick-dots li button:before {
  content: none !important;
}
.slick-dots li button {
  background: #333333 !important;
  height: 2px !important;
  width: 100% !important;
  padding: 0 !important;
}

.slick-dots li button:focus {
  outline: 2px solid rgba(255, 255, 255, 0.65);
  outline-offset: 4px;
}
.slick-dots {
  max-width: 1200px;
  margin: 0 auto !important;
  text-align: center;
  width: 100%;
}

/* Ensure in fullscreen mode dots remain visible and centered */
.future-media.is-fullscreen .slick-dots,
.product-gallery-simple.is-fullscreen .slick-dots {
  left: 24px;
  right: 24px;
  bottom: 20px;
}

.inner_empty #cart-popup-static-footer {
  display: none;
}