/*
  AGS Professional Stable Frontend Layer
  2026-06-14

  This file is intentionally loaded AFTER app.css.
  It acts as the single final source of truth for:
  - public page scrolling
  - hero image slider layout
  - slider progress line
  - checkout popup scrolling
  - responsive header safety

  It avoids heavy filters, blur backgrounds, nested page scrollbars,
  and CSS overrides that freeze Chrome.
*/

/* ===== 0. Base public scroll: page must always move ===== */
html {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  height: auto !important;
  min-height: 100% !important;
  max-height: none !important;
  overscroll-behavior-y: auto !important;
}

body:not(.admin-page) {
  width: 100% !important;
  max-width: 100% !important;
  min-height: 100% !important;
  height: auto !important;
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: visible !important;
  position: relative !important;
  inset: auto !important;
  touch-action: auto !important;
  overscroll-behavior-y: auto !important;
  -webkit-overflow-scrolling: auto !important;
}

/* Hide the visual browser scrollbar while keeping wheel/touch scroll working. */
html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}
html,
body {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

/* Do not let public wrappers become a second scroll viewport. */
body:not(.admin-page) main,
body:not(.admin-page) #main-content,
body:not(.admin-page) .site-shell,
body:not(.admin-page) .page-shell,
body:not(.admin-page) .page,
body:not(.admin-page) .storefront,
body:not(.admin-page) .storefront-wrap,
body:not(.admin-page) .content,
body:not(.admin-page) .shop,
body:not(.admin-page) .product-shelves,
body:not(.admin-page) .product-shelf,
body:not(.admin-page) .listing-hero,
body:not(.admin-page) .product-detail-section,
body:not(.admin-page) .section,
body:not(.admin-page) .about,
body:not(.admin-page) .footer {
  overflow-x: hidden !important;
  overflow-y: visible !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  position: relative !important;
  overscroll-behavior-y: auto !important;
  -webkit-overflow-scrolling: auto !important;
  scrollbar-width: none !important;
}

body:not(.admin-page) main::-webkit-scrollbar,
body:not(.admin-page) #main-content::-webkit-scrollbar,
body:not(.admin-page) .site-shell::-webkit-scrollbar,
body:not(.admin-page) .page-shell::-webkit-scrollbar,
body:not(.admin-page) .page::-webkit-scrollbar,
body:not(.admin-page) .storefront::-webkit-scrollbar,
body:not(.admin-page) .storefront-wrap::-webkit-scrollbar,
body:not(.admin-page) .content::-webkit-scrollbar,
body:not(.admin-page) .shop::-webkit-scrollbar,
body:not(.admin-page) .product-shelves::-webkit-scrollbar,
body:not(.admin-page) .product-shelf::-webkit-scrollbar,
body:not(.admin-page) .listing-hero::-webkit-scrollbar,
body:not(.admin-page) .product-detail-section::-webkit-scrollbar,
body:not(.admin-page) .section::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

/* Real overlays may lock the background, but only while open. */
html.modal-lock,
html.ags-dialog-lock,
body.ags-layer-open,
body.modal-open,
body.cart-open,
body.search-open {
  overflow: hidden !important;
  height: 100% !important;
  max-height: 100% !important;
}

/* ===== 1. Header: compact, safe, no forced extra scroll ===== */
body:not(.admin-page) .site-header {
  width: 100% !important;
  max-width: 100vw !important;
  overflow: visible !important;
  box-sizing: border-box !important;
  z-index: 1000 !important;
}

body:not(.admin-page) .site-header *,
body:not(.admin-page) .header-actions,
body:not(.admin-page) .desktop-nav,
body:not(.admin-page) .brand {
  min-width: 0 !important;
  box-sizing: border-box !important;
}

body:not(.admin-page) .header-actions {
  overflow: visible !important;
  padding-right: max(12px, env(safe-area-inset-right)) !important;
}

body:not(.admin-page) .cart-count,
body:not(.admin-page) [data-cart-count] {
  z-index: 12 !important;
  pointer-events: none !important;
}

/* ===== 2. Standard Hero Image Slider =====
   Desktop artwork: 2160x1080 (2:1)
   Mobile artwork: 1000x1400 (5:7)
*/
body:not(.admin-page) .hero-slider,
body:not(.admin-page) .hero-slider.hero-slider--standard-main,
body:not(.admin-page) section.hero-slider {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  background: #020202 !important;
  overflow: hidden !important;
  position: relative !important;
  isolation: isolate !important;
  contain: layout paint !important;
}

body:not(.admin-page) .hero-slider-track {
  width: 100% !important;
  max-width: 100% !important;
  aspect-ratio: 2160 / 1080 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
  position: relative !important;
  background: #020202 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  touch-action: pan-y !important;
}

body:not(.admin-page) .hero-slide,
body:not(.admin-page) .hero-slide-frame,
body:not(.admin-page) .hero-slide-picture {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
  background: #020202 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

body:not(.admin-page) .hero-slide {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity .36s ease, visibility .36s ease !important;
  will-change: auto !important;
}

body:not(.admin-page) .hero-slide.is-active,
body:not(.admin-page) .hero-slide.is-sweep-entering,
body:not(.admin-page) .hero-slide.is-sweep-leaving {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

body:not(.admin-page) .hero-slide.is-sweep-entering {
  clip-path: inset(0 0 0 100%) !important;
  animation: agsProfessionalSweepIn .42s ease forwards !important;
}

body:not(.admin-page) .hero-slide.is-sweep-leaving {
  clip-path: inset(0 100% 0 0) !important;
  animation: agsProfessionalSweepOut .42s ease forwards !important;
}

@keyframes agsProfessionalSweepIn {
  to { clip-path: inset(0 0 0 0); }
}
@keyframes agsProfessionalSweepOut {
  to { clip-path: inset(0 100% 0 0); }
}

body:not(.admin-page) .hero-slide-frame::before,
body:not(.admin-page) .hero-slide-frame::after {
  content: none !important;
  display: none !important;
}

body:not(.admin-page) .hero-slide-image {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #020202 !important;
  transform: none !important;
  filter: none !important;
  will-change: auto !important;
  backface-visibility: hidden !important;
}

/* Slider progress line: overlay, visible, animated by JS */
body:not(.admin-page) .hero-slider-controls.hero-slider-progress {
  position: absolute !important;
  left: 50% !important;
  bottom: clamp(18px, 2.25vw, 34px) !important;
  transform: translateX(-50%) !important;
  z-index: 20 !important;
  display: flex !important;
  justify-content: center !important;
  width: min(520px, 38vw) !important;
  min-width: 270px !important;
  max-width: calc(100vw - 42px) !important;
  height: 4px !important;
  min-height: 4px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  pointer-events: auto !important;
}

body:not(.admin-page) .hero-slider-progress .hero-slider-dots,
body:not(.admin-page) .hero-slider-dots {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(14px, 1.5vw, 24px) !important;
  width: 100% !important;
  height: 4px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

body:not(.admin-page) .hero-slider-dots button {
  appearance: none !important;
  -webkit-appearance: none !important;
  flex: 1 1 0 !important;
  display: block !important;
  width: auto !important;
  min-width: 58px !important;
  height: 3px !important;
  min-height: 3px !important;
  max-height: 3px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.38) !important;
  box-shadow: 0 0 0 1px rgba(0,0,0,.24), 0 2px 8px rgba(0,0,0,.30) !important;
  overflow: hidden !important;
  position: relative !important;
  opacity: 1 !important;
  visibility: visible !important;
}

body:not(.admin-page) .hero-slider-dots button::before,
body:not(.admin-page) .hero-slider-dots button::after {
  content: none !important;
  display: none !important;
}

body:not(.admin-page) .hero-slider-dots button span,
body:not(.admin-page) .hero-slider-dots button .ags-slider-livebar {
  display: block !important;
  position: absolute !important;
  inset: 0 auto 0 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: #fff !important;
  border-radius: 999px !important;
  transform-origin: left center !important;
  transform: scaleX(0) !important;
  animation: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* ===== 3. Checkout modal: scrollable on all devices ===== */
.modal[data-checkout].open {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom)) !important;
  overflow: hidden !important;
  overscroll-behavior: contain !important;
}

.modal[data-checkout] .shade {
  position: fixed !important;
  inset: 0 !important;
}

.modal[data-checkout] .checkout-pro {
  width: min(960px, calc(100vw - 24px)) !important;
  max-width: 960px !important;
  height: min(92dvh, 860px) !important;
  max-height: calc(100dvh - 24px) !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  border-radius: 28px !important;
  overscroll-behavior: contain !important;
}

.modal[data-checkout] .checkout-top {
  flex: 0 0 auto !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 4 !important;
  background: #fff !important;
  border-bottom: 1px solid rgba(15,15,15,.08) !important;
  padding: 22px 24px 14px !important;
  padding-right: 66px !important;
}

.modal[data-checkout] .checkout-top p {
  margin-bottom: 0 !important;
}

.modal[data-checkout] .checkout-pro form,
.modal[data-checkout] .checkout-pro .payment-result {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
  touch-action: pan-y !important;
  padding: 0 24px calc(110px + env(safe-area-inset-bottom)) !important;
}

.modal[data-checkout] .checkout-pro form::-webkit-scrollbar,
.modal[data-checkout] .checkout-pro .payment-result::-webkit-scrollbar,
[data-cart].open aside::-webkit-scrollbar,
[data-search-modal].open .search-card::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

.modal[data-checkout] .checkout-pro form,
.modal[data-checkout] .checkout-pro .payment-result,
[data-cart].open aside,
[data-search-modal].open .search-card {
  scrollbar-width: none !important;
}

.modal[data-checkout] .checkout-submit {
  position: sticky !important;
  bottom: 0 !important;
  z-index: 6 !important;
  margin-top: 18px !important;
  margin-bottom: 0 !important;
  box-shadow: 0 -14px 22px rgba(255,255,255,.96), 0 0 0 14px #fff !important;
}

.modal[data-checkout] .notice {
  flex: 0 0 auto !important;
  padding: 0 24px 14px !important;
  margin: 0 !important;
}



/* Mobile slider artwork must use the mobile canvas, not desktop ratio. */
@media (max-width: 991px) {
  body:not(.admin-page) .hero-slider-track {
    aspect-ratio: 1000 / 1400 !important;
  }
  body:not(.admin-page) .hero-slide-image {
    object-fit: cover !important;
    object-position: center center !important;
  }
}

html.ags-slider-mobile-image body:not(.admin-page) .hero-slider-track,
body:not(.admin-page) .hero-slider[data-slider-responsive="mobile"] .hero-slider-track {
  aspect-ratio: 1000 / 1400 !important;
}

html.ags-slider-mobile-image body:not(.admin-page) .hero-slide-image,
body:not(.admin-page) .hero-slider[data-slider-responsive="mobile"] .hero-slide-image {
  object-fit: cover !important;
  object-position: center center !important;
}

/* ===== 4. Tablet / mobile ===== */
@media (max-width: 920px) {
  body:not(.admin-page) .hero-slider-track {
    aspect-ratio: 2160 / 1080 !important;
  }
}

@media (max-width: 740px) {
  body:not(.admin-page) .hero-slider-track {
    aspect-ratio: 1000 / 1400 !important;
  }

  body:not(.admin-page) .hero-slider-controls.hero-slider-progress {
    width: min(340px, 72vw) !important;
    min-width: 220px !important;
    bottom: 18px !important;
  }

  body:not(.admin-page) .hero-slider-dots {
    gap: 10px !important;
  }

  body:not(.admin-page) .hero-slider-dots button {
    min-width: 42px !important;
    height: 3px !important;
    min-height: 3px !important;
  }

  .modal[data-checkout].open {
    align-items: flex-end !important;
    justify-content: stretch !important;
    padding: 0 !important;
  }

  .modal[data-checkout] .checkout-pro {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 22px 22px 0 0 !important;
  }

  .modal[data-checkout] .checkout-top {
    padding: max(18px, env(safe-area-inset-top)) 16px 12px !important;
    padding-right: 58px !important;
  }

  .modal[data-checkout] .checkout-pro form,
  .modal[data-checkout] .checkout-pro .payment-result {
    padding: 0 16px calc(124px + env(safe-area-inset-bottom)) !important;
  }

  .modal[data-checkout] .checkout-submit {
    width: calc(100% + 32px) !important;
    margin-left: -16px !important;
    margin-right: -16px !important;
    border-radius: 18px 18px 0 0 !important;
    min-height: 56px !important;
  }
}

/* Reduce motion safely without breaking visibility */
@media (prefers-reduced-motion: reduce) {
  body:not(.admin-page) .hero-slide {
    transition: none !important;
  }
  body:not(.admin-page) .hero-slide.is-sweep-entering,
  body:not(.admin-page) .hero-slide.is-sweep-leaving {
    animation: none !important;
    clip-path: none !important;
  }
}


/* AGS HERO SLIDER SCROLL PASS-THROUGH FIX 2026-06-14 */
/*
  Hero scroll pass-through:
  The slider remains clickable, but wheel/touch scrolling on top of the hero
  must move the page like normal.
*/
body:not(.admin-page) .hero-slider,
body:not(.admin-page) .hero-slider-track,
body:not(.admin-page) .hero-slide,
body:not(.admin-page) .hero-slide-frame,
body:not(.admin-page) .hero-slide-picture,
body:not(.admin-page) .hero-slide-image {
  touch-action: pan-y pinch-zoom !important;
  overscroll-behavior-y: auto !important;
}

body:not(.admin-page) .hero-slide-image {
  -webkit-user-drag: none !important;
  user-select: none !important;
}

/* Progress dots remain clickable, but do not create a full-width touch blocker */
body:not(.admin-page) .hero-slider-controls.hero-slider-progress {
  pointer-events: none !important;
}
body:not(.admin-page) .hero-slider-dots,
body:not(.admin-page) .hero-slider-dots button {
  pointer-events: auto !important;
}


/* AGS HERO SLIDER ANIMATION UNBLOCK + CHECKOUT SAFE AREA — 2026-06-14 v6
   This block intentionally has very high specificity because older patch layers
   in app.css use !important on transform/visibility. It is loaded last through
   ags-professional-stable.css and becomes the final source of truth. */
html body:not(.admin-page) .hero-slider.hero-slider--standard-main.hero-slider--cca-sweep,
html body:not(.admin-page) .hero-slider.hero-slider--standard-main.hero-slider--cca-sweep .hero-slider-track {
  overflow: hidden !important;
  touch-action: pan-y pinch-zoom !important;
  overscroll-behavior-y: auto !important;
}

html body:not(.admin-page) .hero-slider.hero-slider--standard-main.hero-slider--cca-sweep .hero-slider-track {
  aspect-ratio: 2160 / 1080 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}

@media (max-width: 991px), (orientation: portrait) and (max-width: 1024px) {
  html body:not(.admin-page) .hero-slider.hero-slider--standard-main.hero-slider--cca-sweep .hero-slider-track {
    aspect-ratio: 1000 / 1400 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }
}

html.ags-slider-mobile-image body:not(.admin-page) .hero-slider.hero-slider--standard-main.hero-slider--cca-sweep .hero-slider-track,
html body:not(.admin-page) .hero-slider.hero-slider--standard-main.hero-slider--cca-sweep[data-slider-responsive="mobile"] .hero-slider-track {
  aspect-ratio: 1000 / 1400 !important;
}

html:not(.ags-slider-mobile-image) body:not(.admin-page) .hero-slider.hero-slider--standard-main.hero-slider--cca-sweep[data-slider-responsive="desktop"] .hero-slider-track {
  aspect-ratio: 2160 / 1080 !important;
}

html body:not(.admin-page) .hero-slider.hero-slider--standard-main.hero-slider--cca-sweep .hero-slide {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  clip-path: inset(0 100% 0 0) !important;
  transform: translate3d(0,0,0) !important;
  transition: opacity .68s cubic-bezier(.22,.61,.36,1), visibility .68s linear !important;
  will-change: opacity, clip-path !important;
}

html body:not(.admin-page) .hero-slider.hero-slider--standard-main.hero-slider--cca-sweep .hero-slide.is-active,
html body:not(.admin-page) .hero-slider.hero-slider--standard-main.hero-slider--cca-sweep .hero-slide.is-sweep-entering,
html body:not(.admin-page) .hero-slider.hero-slider--standard-main.hero-slider--cca-sweep .hero-slide.is-sweep-leaving {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

html body:not(.admin-page) .hero-slider.hero-slider--standard-main.hero-slider--cca-sweep .hero-slide.is-active {
  clip-path: inset(0 0 0 0) !important;
}

html body:not(.admin-page) .hero-slider.hero-slider--standard-main.hero-slider--cca-sweep .hero-slide.is-sweep-entering {
  animation: agsHeroSlideClipInV6 .76s cubic-bezier(.76,0,.24,1) both !important;
}

html body:not(.admin-page) .hero-slider.hero-slider--standard-main.hero-slider--cca-sweep .hero-slide.is-sweep-leaving {
  animation: agsHeroSlideClipOutV6 .76s cubic-bezier(.76,0,.24,1) both !important;
}

@keyframes agsHeroSlideClipInV6 {
  0% { clip-path: inset(0 0 0 100%); opacity: 1; visibility: visible; }
  100% { clip-path: inset(0 0 0 0); opacity: 1; visibility: visible; }
}
@keyframes agsHeroSlideClipOutV6 {
  0% { clip-path: inset(0 0 0 0); opacity: 1; visibility: visible; }
  100% { clip-path: inset(0 100% 0 0); opacity: 1; visibility: visible; }
}

html body:not(.admin-page) .hero-slider.hero-slider--standard-main.hero-slider--cca-sweep .hero-slide-picture,
html body:not(.admin-page) .hero-slider.hero-slider--standard-main.hero-slider--cca-sweep .hero-slide-picture img,
html body:not(.admin-page) .hero-slider.hero-slider--standard-main.hero-slider--cca-sweep img.hero-slide-image {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  opacity: 1 !important;
  visibility: inherit !important;
  object-fit: cover !important;
  object-position: center center !important;
  transform: translate3d(0,0,0) scale(1.012) !important;
  transition: transform .86s cubic-bezier(.22,.61,.36,1) !important;
  animation: none;
  will-change: transform !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  -webkit-user-drag: none !important;
  user-select: none !important;
}

html body:not(.admin-page) .hero-slider.hero-slider--standard-main.hero-slider--cca-sweep .hero-slide.is-active .hero-slide-picture,
html body:not(.admin-page) .hero-slider.hero-slider--standard-main.hero-slider--cca-sweep .hero-slide.is-active .hero-slide-picture img,
html body:not(.admin-page) .hero-slider.hero-slider--standard-main.hero-slider--cca-sweep .hero-slide.is-active img.hero-slide-image,
html body:not(.admin-page) .hero-slider.hero-slider--standard-main.hero-slider--cca-sweep .hero-slide.is-sweep-entering .hero-slide-picture,
html body:not(.admin-page) .hero-slider.hero-slider--standard-main.hero-slider--cca-sweep .hero-slide.is-sweep-entering .hero-slide-picture img,
html body:not(.admin-page) .hero-slider.hero-slider--standard-main.hero-slider--cca-sweep .hero-slide.is-sweep-entering img.hero-slide-image,
html body:not(.admin-page) .hero-slider.hero-slider--standard-main.hero-slider--cca-sweep .hero-slide.is-sweep-leaving .hero-slide-picture,
html body:not(.admin-page) .hero-slider.hero-slider--standard-main.hero-slider--cca-sweep .hero-slide.is-sweep-leaving .hero-slide-picture img,
html body:not(.admin-page) .hero-slider.hero-slider--standard-main.hero-slider--cca-sweep .hero-slide.is-sweep-leaving img.hero-slide-image {
  visibility: visible !important;
  opacity: 1 !important;
}

html body:not(.admin-page) .hero-slider.hero-slider--standard-main.hero-slider--cca-sweep .hero-slide.is-sweep-entering .hero-slide-picture img,
html body:not(.admin-page) .hero-slider.hero-slider--standard-main.hero-slider--cca-sweep .hero-slide.is-sweep-entering img.hero-slide-image {
  animation: agsHeroImageInV6 .86s cubic-bezier(.22,.61,.36,1) both !important;
}

html body:not(.admin-page) .hero-slider.hero-slider--standard-main.hero-slider--cca-sweep .hero-slide.is-sweep-leaving .hero-slide-picture img,
html body:not(.admin-page) .hero-slider.hero-slider--standard-main.hero-slider--cca-sweep .hero-slide.is-sweep-leaving img.hero-slide-image {
  animation: agsHeroImageOutV6 .76s cubic-bezier(.76,0,.24,1) both !important;
}

html body:not(.admin-page) .hero-slider.hero-slider--standard-main.hero-slider--cca-sweep .hero-slide.is-active .hero-slide-picture img,
html body:not(.admin-page) .hero-slider.hero-slider--standard-main.hero-slider--cca-sweep .hero-slide.is-active img.hero-slide-image {
  transform: translate3d(0,0,0) scale(1.035) !important;
}

@keyframes agsHeroImageInV6 {
  0% { opacity: .98; transform: translate3d(18px,0,0) scale(1.012); }
  100% { opacity: 1; transform: translate3d(0,0,0) scale(1.035); }
}
@keyframes agsHeroImageOutV6 {
  0% { opacity: 1; transform: translate3d(0,0,0) scale(1.035); }
  100% { opacity: .98; transform: translate3d(-18px,0,0) scale(1.012); }
}

html body:not(.admin-page) .hero-slider.hero-slider--standard-main.hero-slider--cca-sweep .hero-slider-controls.hero-slider-progress {
  pointer-events: none !important;
}
html body:not(.admin-page) .hero-slider.hero-slider--standard-main.hero-slider--cca-sweep .hero-slider-dots,
html body:not(.admin-page) .hero-slider.hero-slider--standard-main.hero-slider--cca-sweep .hero-slider-dots button {
  pointer-events: auto !important;
}

.modal[data-checkout] .checkout-submit {
  bottom: max(0px, env(safe-area-inset-bottom)) !important;
  margin-bottom: max(12px, env(safe-area-inset-bottom)) !important;
}

@media (max-width: 740px) {
  .modal[data-checkout] .checkout-pro form,
  .modal[data-checkout] .checkout-pro .payment-result {
    padding-bottom: calc(28px + env(safe-area-inset-bottom)) !important;
  }

  .modal[data-checkout] .checkout-submit {
    position: static !important;
    bottom: auto !important;
    width: 100% !important;
    margin: 18px 0 calc(18px + env(safe-area-inset-bottom)) !important;
    border-radius: 18px !important;
    box-shadow: none !important;
    transform: none !important;
  }
}


/* AGS HERO SLIDER TRUE CROSSFADE — 2026-06-14 v7
   Final override: opacity is the only transition state.
   This intentionally disables sweep/clip/transform animation because older CSS layers
   force transform/visibility in multiple places and make the transition look instant.
*/
html body:not(.admin-page) .hero-slider.hero-slider--standard-main.hero-slider--cca-sweep .hero-slide,
html body:not(.admin-page) .hero-slider.hero-slider--standard-main .hero-slide {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  clip-path: none !important;
  transform: none !important;
  animation: none !important;
  transition: opacity .86s cubic-bezier(.22,.61,.36,1), visibility 0s linear .86s !important;
  will-change: opacity !important;
}

html body:not(.admin-page) .hero-slider.hero-slider--standard-main.hero-slider--cca-sweep .hero-slide.is-active,
html body:not(.admin-page) .hero-slider.hero-slider--standard-main .hero-slide.is-active,
html body:not(.admin-page) .hero-slider.hero-slider--standard-main.hero-slider--cca-sweep .hero-slide.is-crossfade-entering,
html body:not(.admin-page) .hero-slider.hero-slider--standard-main .hero-slide.is-crossfade-entering,
html body:not(.admin-page) .hero-slider.hero-slider--standard-main.hero-slider--cca-sweep .hero-slide.is-sweep-entering,
html body:not(.admin-page) .hero-slider.hero-slider--standard-main .hero-slide.is-sweep-entering {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  clip-path: none !important;
  transform: none !important;
  animation: none !important;
  transition: opacity .86s cubic-bezier(.22,.61,.36,1), visibility 0s linear 0s !important;
}

html body:not(.admin-page) .hero-slider.hero-slider--standard-main.hero-slider--cca-sweep .hero-slide.is-active.is-crossfade-leaving,
html body:not(.admin-page) .hero-slider.hero-slider--standard-main .hero-slide.is-active.is-crossfade-leaving,
html body:not(.admin-page) .hero-slider.hero-slider--standard-main.hero-slider--cca-sweep .hero-slide.is-active.is-sweep-leaving,
html body:not(.admin-page) .hero-slider.hero-slider--standard-main .hero-slide.is-active.is-sweep-leaving {
  opacity: 0 !important;
  visibility: visible !important;
  pointer-events: none !important;
  clip-path: none !important;
  transform: none !important;
  animation: none !important;
  transition: opacity .86s cubic-bezier(.22,.61,.36,1), visibility 0s linear .86s !important;
}

html body:not(.admin-page) .hero-slider.hero-slider--standard-main.hero-slider--cca-sweep .hero-slide-picture,
html body:not(.admin-page) .hero-slider.hero-slider--standard-main.hero-slider--cca-sweep .hero-slide-picture img,
html body:not(.admin-page) .hero-slider.hero-slider--standard-main.hero-slider--cca-sweep img.hero-slide-image,
html body:not(.admin-page) .hero-slider.hero-slider--standard-main .hero-slide-picture,
html body:not(.admin-page) .hero-slider.hero-slider--standard-main .hero-slide-picture img,
html body:not(.admin-page) .hero-slider.hero-slider--standard-main img.hero-slide-image {
  opacity: 1 !important;
  visibility: inherit !important;
  clip-path: none !important;
  transform: none !important;
  animation: none !important;
  transition: none !important;
  will-change: auto !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
}

html body:not(.admin-page) .hero-slider.hero-slider--standard-main.hero-slider--cca-sweep .hero-slide.is-active .hero-slide-picture,
html body:not(.admin-page) .hero-slider.hero-slider--standard-main.hero-slider--cca-sweep .hero-slide.is-active .hero-slide-picture img,
html body:not(.admin-page) .hero-slider.hero-slider--standard-main.hero-slider--cca-sweep .hero-slide.is-active img.hero-slide-image,
html body:not(.admin-page) .hero-slider.hero-slider--standard-main .hero-slide.is-active .hero-slide-picture,
html body:not(.admin-page) .hero-slider.hero-slider--standard-main .hero-slide.is-active .hero-slide-picture img,
html body:not(.admin-page) .hero-slider.hero-slider--standard-main .hero-slide.is-active img.hero-slide-image,
html body:not(.admin-page) .hero-slider.hero-slider--standard-main .hero-slide.is-crossfade-entering .hero-slide-picture,
html body:not(.admin-page) .hero-slider.hero-slider--standard-main .hero-slide.is-crossfade-entering .hero-slide-picture img,
html body:not(.admin-page) .hero-slider.hero-slider--standard-main .hero-slide.is-crossfade-entering img.hero-slide-image,
html body:not(.admin-page) .hero-slider.hero-slider--standard-main .hero-slide.is-crossfade-leaving .hero-slide-picture,
html body:not(.admin-page) .hero-slider.hero-slider--standard-main .hero-slide.is-crossfade-leaving .hero-slide-picture img,
html body:not(.admin-page) .hero-slider.hero-slider--standard-main .hero-slide.is-crossfade-leaving img.hero-slide-image {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  animation: none !important;
}

/* Keep the already-fixed responsive canvas behavior. */
html body:not(.admin-page) .hero-slider.hero-slider--standard-main .hero-slider-track {
  aspect-ratio: 2160 / 1080 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}
@media (max-width: 991px), (orientation: portrait) and (max-width: 1024px) {
  html body:not(.admin-page) .hero-slider.hero-slider--standard-main .hero-slider-track {
    aspect-ratio: 1000 / 1400 !important;
  }
}
html.ags-slider-mobile-image body:not(.admin-page) .hero-slider.hero-slider--standard-main .hero-slider-track,
html body:not(.admin-page) .hero-slider.hero-slider--standard-main[data-slider-responsive="mobile"] .hero-slider-track {
  aspect-ratio: 1000 / 1400 !important;
}
html body:not(.admin-page) .hero-slider.hero-slider--standard-main[data-slider-responsive="desktop"] .hero-slider-track {
  aspect-ratio: 2160 / 1080 !important;
}


/* AGS HERO SLIDER COVER TRANSITION — 2026-06-14 v8
   Professional cover effect: the incoming slide moves over the static outgoing slide.
   Animation is applied to .hero-slide, not img, so image-level transform locks cannot block it.
*/
html body:not(.admin-page) .hero-slider.hero-slider--standard-main .hero-slide,
html body:not(.admin-page) .hero-slider.hero-slider--standard-main.hero-slider--cca-sweep .hero-slide {
  opacity: 1 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  z-index: 0 !important;
  transform: translate3d(0,0,0) !important;
  clip-path: none !important;
  animation: none !important;
  transition: none !important;
  will-change: transform !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
}

html body:not(.admin-page) .hero-slider.hero-slider--standard-main .hero-slide.is-active,
html body:not(.admin-page) .hero-slider.hero-slider--standard-main.hero-slider--cca-sweep .hero-slide.is-active {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  z-index: 1 !important;
  transform: translate3d(0,0,0) !important;
  clip-path: none !important;
  animation: none !important;
  transition: none !important;
}

html body:not(.admin-page) .hero-slider.hero-slider--standard-main .hero-slide.is-cover-leaving,
html body:not(.admin-page) .hero-slider.hero-slider--standard-main.hero-slider--cca-sweep .hero-slide.is-cover-leaving {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none !important;
  z-index: 1 !important;
  transform: translate3d(0,0,0) !important;
  clip-path: none !important;
  animation: none !important;
  transition: none !important;
}

html body:not(.admin-page) .hero-slider.hero-slider--standard-main .hero-slide.is-cover-entering,
html body:not(.admin-page) .hero-slider.hero-slider--standard-main.hero-slider--cca-sweep .hero-slide.is-cover-entering {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  z-index: 4 !important;
  clip-path: none !important;
  transform: translate3d(0,0,0) !important;
  transition: none !important;
  animation: agsHeroCoverInNextV8 .76s cubic-bezier(.45,0,.10,1) both !important;
}

html body:not(.admin-page) .hero-slider.hero-slider--standard-main[data-slider-direction="prev"] .hero-slide.is-cover-entering,
html body:not(.admin-page) .hero-slider.hero-slider--standard-main.hero-slider--cca-sweep[data-slider-direction="prev"] .hero-slide.is-cover-entering {
  animation-name: agsHeroCoverInPrevV8 !important;
}

html body:not(.admin-page) .hero-slider.hero-slider--standard-main .hero-slide-picture,
html body:not(.admin-page) .hero-slider.hero-slider--standard-main .hero-slide-picture img,
html body:not(.admin-page) .hero-slider.hero-slider--standard-main img.hero-slide-image,
html body:not(.admin-page) .hero-slider.hero-slider--standard-main.hero-slider--cca-sweep .hero-slide-picture,
html body:not(.admin-page) .hero-slider.hero-slider--standard-main.hero-slider--cca-sweep .hero-slide-picture img,
html body:not(.admin-page) .hero-slider.hero-slider--standard-main.hero-slider--cca-sweep img.hero-slide-image {
  opacity: 1 !important;
  visibility: inherit !important;
  transform: none !important;
  animation: none !important;
  transition: none !important;
  clip-path: none !important;
  will-change: auto !important;
}

html body:not(.admin-page) .hero-slider.hero-slider--standard-main .hero-slide.is-active .hero-slide-picture,
html body:not(.admin-page) .hero-slider.hero-slider--standard-main .hero-slide.is-active .hero-slide-picture img,
html body:not(.admin-page) .hero-slider.hero-slider--standard-main .hero-slide.is-active img.hero-slide-image,
html body:not(.admin-page) .hero-slider.hero-slider--standard-main .hero-slide.is-cover-entering .hero-slide-picture,
html body:not(.admin-page) .hero-slider.hero-slider--standard-main .hero-slide.is-cover-entering .hero-slide-picture img,
html body:not(.admin-page) .hero-slider.hero-slider--standard-main .hero-slide.is-cover-entering img.hero-slide-image,
html body:not(.admin-page) .hero-slider.hero-slider--standard-main .hero-slide.is-cover-leaving .hero-slide-picture,
html body:not(.admin-page) .hero-slider.hero-slider--standard-main .hero-slide.is-cover-leaving .hero-slide-picture img,
html body:not(.admin-page) .hero-slider.hero-slider--standard-main .hero-slide.is-cover-leaving img.hero-slide-image {
  opacity: 1 !important;
  visibility: visible !important;
}

@keyframes agsHeroCoverInNextV8 {
  0% { transform: translate3d(100%,0,0); }
  100% { transform: translate3d(0,0,0); }
}

@keyframes agsHeroCoverInPrevV8 {
  0% { transform: translate3d(-100%,0,0); }
  100% { transform: translate3d(0,0,0); }
}

@media (prefers-reduced-motion: reduce) {
  html body:not(.admin-page) .hero-slider.hero-slider--standard-main .hero-slide.is-cover-entering,
  html body:not(.admin-page) .hero-slider.hero-slider--standard-main.hero-slider--cca-sweep .hero-slide.is-cover-entering {
    animation: none !important;
    transform: translate3d(0,0,0) !important;
  }
}


/* AGS HERO SLIDER SHOPIFY-STYLE SWEEP — 2026-06-14 v9
   Source-of-truth animation for the hero slider.
   Model: visibility is state, clip-path is motion.
   Incoming slide wipes/covers the outgoing static slide, similar to Shopify sweep / PowerPoint cover.
   This intentionally avoids img transform animation because AGS has many legacy transform locks on images.
*/
html body:not(.admin-page) .hero-slider.hero-slider--standard-main[transition-type="sweep"],
html body:not(.admin-page) .hero-slider.hero-slider--standard-main[data-slider-transition="sweep"] {
  --ags-sweep-duration: 820ms;
  --section-animation-play-state: running;
}

html body:not(.admin-page) .hero-slider.hero-slider--standard-main[transition-type="sweep"] .hero-slide,
html body:not(.admin-page) .hero-slider.hero-slider--standard-main[data-slider-transition="sweep"] .hero-slide {
  opacity: 1 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  z-index: 0 !important;
  transform: none !important;
  clip-path: inset(0 0 0 0) !important;
  transition: none !important;
  animation: none !important;
  will-change: clip-path !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
}

html body:not(.admin-page) .hero-slider.hero-slider--standard-main[transition-type="sweep"] .hero-slide.is-active,
html body:not(.admin-page) .hero-slider.hero-slider--standard-main[data-slider-transition="sweep"] .hero-slide.is-active {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  z-index: 1 !important;
  transform: none !important;
  clip-path: inset(0 0 0 0) !important;
  transition: none !important;
  animation: none !important;
}

/* Outgoing stays static underneath; incoming performs the sweep above it. */
html body:not(.admin-page) .hero-slider.hero-slider--standard-main[transition-type="sweep"] .hero-slide.is-sweep-leaving,
html body:not(.admin-page) .hero-slider.hero-slider--standard-main[data-slider-transition="sweep"] .hero-slide.is-sweep-leaving {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none !important;
  z-index: 1 !important;
  transform: none !important;
  clip-path: inset(0 0 0 0) !important;
  transition: none !important;
  animation: none !important;
}

html body:not(.admin-page) .hero-slider.hero-slider--standard-main[transition-type="sweep"] .hero-slide.is-sweep-entering,
html body:not(.admin-page) .hero-slider.hero-slider--standard-main[data-slider-transition="sweep"] .hero-slide.is-sweep-entering {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  z-index: 5 !important;
  transform: none !important;
  clip-path: inset(0 0 0 100%) !important;
  transition: none !important;
  animation: agsHeroShopifySweepNextV9 var(--ags-sweep-duration) cubic-bezier(.4,0,.2,1) both !important;
  animation-play-state: var(--section-animation-play-state, running) !important;
}

html body:not(.admin-page) .hero-slider.hero-slider--standard-main[transition-type="sweep"][data-slider-direction="prev"] .hero-slide.is-sweep-entering,
html body:not(.admin-page) .hero-slider.hero-slider--standard-main[data-slider-transition="sweep"][data-slider-direction="prev"] .hero-slide.is-sweep-entering {
  clip-path: inset(0 100% 0 0) !important;
  animation-name: agsHeroShopifySweepPrevV9 !important;
}

html body:not(.admin-page) .hero-slider.hero-slider--standard-main[transition-type="sweep"] .hero-slide-picture,
html body:not(.admin-page) .hero-slider.hero-slider--standard-main[transition-type="sweep"] .hero-slide-picture img,
html body:not(.admin-page) .hero-slider.hero-slider--standard-main[transition-type="sweep"] img.hero-slide-image,
html body:not(.admin-page) .hero-slider.hero-slider--standard-main[data-slider-transition="sweep"] .hero-slide-picture,
html body:not(.admin-page) .hero-slider.hero-slider--standard-main[data-slider-transition="sweep"] .hero-slide-picture img,
html body:not(.admin-page) .hero-slider.hero-slider--standard-main[data-slider-transition="sweep"] img.hero-slide-image {
  opacity: 1 !important;
  visibility: inherit !important;
  transform: none !important;
  transition: none !important;
  animation: none !important;
  clip-path: none !important;
  will-change: auto !important;
}

html body:not(.admin-page) .hero-slider.hero-slider--standard-main[transition-type="sweep"] .hero-slide.is-active .hero-slide-picture,
html body:not(.admin-page) .hero-slider.hero-slider--standard-main[transition-type="sweep"] .hero-slide.is-active .hero-slide-picture img,
html body:not(.admin-page) .hero-slider.hero-slider--standard-main[transition-type="sweep"] .hero-slide.is-active img.hero-slide-image,
html body:not(.admin-page) .hero-slider.hero-slider--standard-main[transition-type="sweep"] .hero-slide.is-sweep-entering .hero-slide-picture,
html body:not(.admin-page) .hero-slider.hero-slider--standard-main[transition-type="sweep"] .hero-slide.is-sweep-entering .hero-slide-picture img,
html body:not(.admin-page) .hero-slider.hero-slider--standard-main[transition-type="sweep"] .hero-slide.is-sweep-entering img.hero-slide-image,
html body:not(.admin-page) .hero-slider.hero-slider--standard-main[transition-type="sweep"] .hero-slide.is-sweep-leaving .hero-slide-picture,
html body:not(.admin-page) .hero-slider.hero-slider--standard-main[transition-type="sweep"] .hero-slide.is-sweep-leaving .hero-slide-picture img,
html body:not(.admin-page) .hero-slider.hero-slider--standard-main[transition-type="sweep"] .hero-slide.is-sweep-leaving img.hero-slide-image {
  opacity: 1 !important;
  visibility: visible !important;
}

@keyframes agsHeroShopifySweepNextV9 {
  0% { clip-path: inset(0 0 0 100%); }
  100% { clip-path: inset(0 0 0 0); }
}

@keyframes agsHeroShopifySweepPrevV9 {
  0% { clip-path: inset(0 100% 0 0); }
  100% { clip-path: inset(0 0 0 0); }
}

@supports not (clip-path: inset(0 0 0 0)) {
  html body:not(.admin-page) .hero-slider.hero-slider--standard-main[transition-type="sweep"] .hero-slide.is-sweep-entering,
  html body:not(.admin-page) .hero-slider.hero-slider--standard-main[data-slider-transition="sweep"] .hero-slide.is-sweep-entering {
    clip-path: none !important;
    transform: translate3d(100%,0,0) !important;
    animation: agsHeroSweepTransformFallbackNextV9 var(--ags-sweep-duration) cubic-bezier(.4,0,.2,1) both !important;
  }
  html body:not(.admin-page) .hero-slider.hero-slider--standard-main[transition-type="sweep"][data-slider-direction="prev"] .hero-slide.is-sweep-entering,
  html body:not(.admin-page) .hero-slider.hero-slider--standard-main[data-slider-transition="sweep"][data-slider-direction="prev"] .hero-slide.is-sweep-entering {
    transform: translate3d(-100%,0,0) !important;
    animation-name: agsHeroSweepTransformFallbackPrevV9 !important;
  }
}

@keyframes agsHeroSweepTransformFallbackNextV9 {
  0% { transform: translate3d(100%,0,0); }
  100% { transform: translate3d(0,0,0); }
}
@keyframes agsHeroSweepTransformFallbackPrevV9 {
  0% { transform: translate3d(-100%,0,0); }
  100% { transform: translate3d(0,0,0); }
}

@media (prefers-reduced-motion: reduce) {
  html body:not(.admin-page) .hero-slider.hero-slider--standard-main[transition-type="sweep"] .hero-slide.is-sweep-entering,
  html body:not(.admin-page) .hero-slider.hero-slider--standard-main[data-slider-transition="sweep"] .hero-slide.is-sweep-entering {
    animation: none !important;
    clip-path: inset(0 0 0 0) !important;
    transform: none !important;
  }
}


/* AGS HERO INFINITE LOOP SLIDER — 2026-06-14 v10
   Converts the hero slider from stacked absolute slides into a horizontal flex loop.
   JS adds cloned sentinel slides at both ends and performs an invisible reset after transitionend.
*/
body:not(.admin-page) .hero-slider[data-slider-transition="loop"],
body:not(.admin-page) .hero-slider[transition-type="loop"] {
  overflow: hidden !important;
  background: #020202 !important;
  contain: layout paint !important;
}

body:not(.admin-page) .hero-slider[data-slider-transition="loop"] .hero-slider-track,
body:not(.admin-page) .hero-slider[transition-type="loop"] .hero-slider-track {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
  will-change: transform !important;
  transform: translate3d(0,0,0);
  transition: transform .72s cubic-bezier(.45,0,.20,1) !important;
  touch-action: pan-y pinch-zoom !important;
}

body:not(.admin-page) .hero-slider[data-slider-transition="loop"] .hero-slider-track.ags-loop-no-transition,
body:not(.admin-page) .hero-slider[transition-type="loop"] .hero-slider-track.ags-loop-no-transition {
  transition: none !important;
}

body:not(.admin-page) .hero-slider[data-slider-transition="loop"] .hero-slide,
body:not(.admin-page) .hero-slider[transition-type="loop"] .hero-slide {
  position: relative !important;
  inset: auto !important;
  flex: 0 0 100% !important;
  width: 100% !important;
  min-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  display: block !important;
  overflow: hidden !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  z-index: 1 !important;
  transform: none !important;
  clip-path: none !important;
  animation: none !important;
  transition: none !important;
  contain: layout paint !important;
}

body:not(.admin-page) .hero-slider[data-slider-transition="loop"] .hero-slide-frame,
body:not(.admin-page) .hero-slider[data-slider-transition="loop"] .hero-slide-picture,
body:not(.admin-page) .hero-slider[transition-type="loop"] .hero-slide-frame,
body:not(.admin-page) .hero-slider[transition-type="loop"] .hero-slide-picture {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  clip-path: none !important;
  animation: none !important;
  transition: none !important;
}

body:not(.admin-page) .hero-slider[data-slider-transition="loop"] .hero-slide-image,
body:not(.admin-page) .hero-slider[data-slider-transition="loop"] .hero-slide-picture img,
body:not(.admin-page) .hero-slider[transition-type="loop"] .hero-slide-image,
body:not(.admin-page) .hero-slider[transition-type="loop"] .hero-slide-picture img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  animation: none !important;
  transition: none !important;
  backface-visibility: hidden !important;
  -webkit-user-drag: none !important;
  user-select: none !important;
}

body:not(.admin-page) .hero-slider[data-slider-transition="loop"] .hero-slide.is-active,
body:not(.admin-page) .hero-slider[transition-type="loop"] .hero-slide.is-active {
  z-index: 2 !important;
}

body:not(.admin-page) .hero-slider[data-slider-transition="loop"] .hero-slide[data-loop-clone="true"],
body:not(.admin-page) .hero-slider[transition-type="loop"] .hero-slide[data-loop-clone="true"] {
  pointer-events: none !important;
}

/* Keep the mobile poster canvas in loop mode too. */
body:not(.admin-page) .hero-slider[data-slider-transition="loop"] .hero-slider-track,
body:not(.admin-page) .hero-slider[transition-type="loop"] .hero-slider-track {
  aspect-ratio: 2160 / 1080 !important;
}

@media (max-width: 991px), (orientation: portrait) and (max-width: 1024px) {
  body:not(.admin-page) .hero-slider[data-slider-transition="loop"] .hero-slider-track,
  body:not(.admin-page) .hero-slider[transition-type="loop"] .hero-slider-track {
    aspect-ratio: 1000 / 1400 !important;
  }
}

html.ags-slider-mobile-image body:not(.admin-page) .hero-slider[data-slider-transition="loop"] .hero-slider-track,
html.ags-slider-mobile-image body:not(.admin-page) .hero-slider[transition-type="loop"] .hero-slider-track,
body:not(.admin-page) .hero-slider[data-slider-transition="loop"][data-slider-responsive="mobile"] .hero-slider-track,
body:not(.admin-page) .hero-slider[transition-type="loop"][data-slider-responsive="mobile"] .hero-slider-track {
  aspect-ratio: 1000 / 1400 !important;
}


/* AGS SHOPIFY-LIKE STATEFUL SWEEP SLIDESHOW — 2026-06-14 v11
   Native PHP rendering + JavaScript state controller:
   - parent: transition-type="sweep"
   - slides: hidden / visibility toggled by JS
   - visual effect: CSS keyframes on incoming slide
   - keeps mobile canvas 1000x1400 and desktop canvas 2160x1080
*/
body:not(.admin-page) .hero-slider[data-slider-transition="sweep"],
body:not(.admin-page) .hero-slider[transition-type="sweep"] {
  --section-animation-play-state: running;
  overflow: hidden !important;
  background: #020202 !important;
  contain: layout paint !important;
}

body:not(.admin-page) .hero-slider[data-slider-transition="sweep"] .hero-slider-track,
body:not(.admin-page) .hero-slider[transition-type="sweep"] .hero-slider-track {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
  transform: none !important;
  transition: none !important;
  touch-action: pan-y pinch-zoom !important;
  aspect-ratio: 2160 / 1080 !important;
  background: #020202 !important;
}

@media (max-width: 991px), (orientation: portrait) and (max-width: 1024px) {
  body:not(.admin-page) .hero-slider[data-slider-transition="sweep"] .hero-slider-track,
  body:not(.admin-page) .hero-slider[transition-type="sweep"] .hero-slider-track {
    aspect-ratio: 1000 / 1400 !important;
  }
}

html.ags-slider-mobile-image body:not(.admin-page) .hero-slider[data-slider-transition="sweep"] .hero-slider-track,
html.ags-slider-mobile-image body:not(.admin-page) .hero-slider[transition-type="sweep"] .hero-slider-track,
body:not(.admin-page) .hero-slider[data-slider-transition="sweep"][data-slider-responsive="mobile"] .hero-slider-track,
body:not(.admin-page) .hero-slider[transition-type="sweep"][data-slider-responsive="mobile"] .hero-slider-track {
  aspect-ratio: 1000 / 1400 !important;
}

body:not(.admin-page) .hero-slider[data-slider-transition="sweep"] .hero-slide,
body:not(.admin-page) .hero-slider[transition-type="sweep"] .hero-slide {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
  background: #020202 !important;
  opacity: 1 !important;
  transform: none !important;
  clip-path: inset(0 0 0 0) !important;
  transition: none !important;
  animation: none !important;
  pointer-events: none !important;
  visibility: hidden !important;
  z-index: 0 !important;
  contain: layout paint !important;
}

body:not(.admin-page) .hero-slider[data-slider-transition="sweep"] .hero-slide.is-active,
body:not(.admin-page) .hero-slider[transition-type="sweep"] .hero-slide.is-active {
  visibility: visible !important;
  pointer-events: auto !important;
  z-index: 2 !important;
}

body:not(.admin-page) .hero-slider[data-slider-transition="sweep"] .hero-slide.is-sweep-leaving,
body:not(.admin-page) .hero-slider[transition-type="sweep"] .hero-slide.is-sweep-leaving {
  visibility: visible !important;
  pointer-events: none !important;
  z-index: 1 !important;
  clip-path: inset(0 0 0 0) !important;
}

body:not(.admin-page) .hero-slider[data-slider-transition="sweep"] .hero-slide.is-sweep-entering,
body:not(.admin-page) .hero-slider[transition-type="sweep"] .hero-slide.is-sweep-entering {
  visibility: visible !important;
  pointer-events: auto !important;
  z-index: 4 !important;
  animation: agsShopifySweepIn .92s cubic-bezier(.76,0,.24,1) both !important;
  animation-play-state: var(--section-animation-play-state, running) !important;
}

body:not(.admin-page) .hero-slider[data-slider-transition="sweep"][data-slider-direction="prev"] .hero-slide.is-sweep-entering,
body:not(.admin-page) .hero-slider[transition-type="sweep"][data-slider-direction="prev"] .hero-slide.is-sweep-entering {
  animation-name: agsShopifySweepInReverse !important;
}

@keyframes agsShopifySweepIn {
  0% { clip-path: inset(0 0 0 100%); }
  100% { clip-path: inset(0 0 0 0); }
}

@keyframes agsShopifySweepInReverse {
  0% { clip-path: inset(0 100% 0 0); }
  100% { clip-path: inset(0 0 0 0); }
}

@supports not (clip-path: inset(0 0 0 0)) {
  body:not(.admin-page) .hero-slider[data-slider-transition="sweep"] .hero-slide.is-sweep-entering,
  body:not(.admin-page) .hero-slider[transition-type="sweep"] .hero-slide.is-sweep-entering {
    transform: translate3d(100%,0,0) !important;
    animation: agsShopifySweepTransformIn .92s cubic-bezier(.76,0,.24,1) both !important;
  }
  body:not(.admin-page) .hero-slider[data-slider-transition="sweep"][data-slider-direction="prev"] .hero-slide.is-sweep-entering,
  body:not(.admin-page) .hero-slider[transition-type="sweep"][data-slider-direction="prev"] .hero-slide.is-sweep-entering {
    transform: translate3d(-100%,0,0) !important;
    animation-name: agsShopifySweepTransformInReverse !important;
  }
}

@keyframes agsShopifySweepTransformIn {
  to { transform: translate3d(0,0,0); }
}

@keyframes agsShopifySweepTransformInReverse {
  to { transform: translate3d(0,0,0); }
}

body:not(.admin-page) .hero-slider[data-slider-transition="sweep"] .hero-slide[hidden]:not(.is-active):not(.is-sweep-entering):not(.is-sweep-leaving),
body:not(.admin-page) .hero-slider[transition-type="sweep"] .hero-slide[hidden]:not(.is-active):not(.is-sweep-entering):not(.is-sweep-leaving) {
  visibility: hidden !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

body:not(.admin-page) .hero-slider[data-slider-transition="sweep"] .hero-slide-frame,
body:not(.admin-page) .hero-slider[data-slider-transition="sweep"] .hero-slide-picture,
body:not(.admin-page) .hero-slider[transition-type="sweep"] .hero-slide-frame,
body:not(.admin-page) .hero-slider[transition-type="sweep"] .hero-slide-picture {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  opacity: 1 !important;
  visibility: inherit !important;
  transform: none !important;
  clip-path: none !important;
  animation: none !important;
  transition: none !important;
}

body:not(.admin-page) .hero-slider[data-slider-transition="sweep"] .hero-slide-image,
body:not(.admin-page) .hero-slider[data-slider-transition="sweep"] .hero-slide-picture img,
body:not(.admin-page) .hero-slider[transition-type="sweep"] .hero-slide-image,
body:not(.admin-page) .hero-slider[transition-type="sweep"] .hero-slide-picture img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  opacity: 1 !important;
  visibility: inherit !important;
  transform: none !important;
  transition: none !important;
  animation: none !important;
  backface-visibility: hidden !important;
  -webkit-user-drag: none !important;
  user-select: none !important;
}

/* Keep the checkout mobile correction from previous patch. */
@media (max-width: 740px) {
  .modal[data-checkout] .checkout-pro form,
  .modal[data-checkout] .checkout-pro .payment-result {
    padding-bottom: calc(28px + env(safe-area-inset-bottom)) !important;
  }

  .modal[data-checkout] .checkout-submit {
    position: static !important;
    bottom: auto !important;
    width: 100% !important;
    margin: 18px 0 calc(18px + env(safe-area-inset-bottom)) !important;
    border-radius: 18px !important;
    box-shadow: none !important;
    transform: none !important;
  }
}


/* AGS RESPONSIVE SLIDESHOW DELIVERY — 2026-06-14 v12
   Shopify-like responsive strategy:
   - PHP renders picture/source/srcset/sizes
   - CSS locks aspect ratio to avoid CLS
   - object-fit: cover + object-position center for consistent framing
   - stateful sweep v11 remains the animation controller
*/
body:not(.admin-page) .hero-slider[data-slider-transition="sweep"],
body:not(.admin-page) .hero-slider[transition-type="sweep"] {
  width: 100% !important;
  max-width: 100vw !important;
  overflow: hidden !important;
  background: #020202 !important;
  content-visibility: auto;
  contain-intrinsic-size: 100vw 50vw;
}

body:not(.admin-page) .hero-slider[data-slider-transition="sweep"] .hero-slider-track,
body:not(.admin-page) .hero-slider[transition-type="sweep"] .hero-slider-track {
  aspect-ratio: 2160 / 1080 !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  overflow: hidden !important;
  background: #020202 !important;
}

@media (max-width: 991px), (orientation: portrait) and (max-width: 1024px) {
  body:not(.admin-page) .hero-slider[data-slider-transition="sweep"],
  body:not(.admin-page) .hero-slider[transition-type="sweep"] {
    contain-intrinsic-size: 100vw 140vw;
  }

  body:not(.admin-page) .hero-slider[data-slider-transition="sweep"] .hero-slider-track,
  body:not(.admin-page) .hero-slider[transition-type="sweep"] .hero-slider-track {
    aspect-ratio: 1000 / 1400 !important;
  }
}

html.ags-slider-mobile-image body:not(.admin-page) .hero-slider[data-slider-transition="sweep"] .hero-slider-track,
html.ags-slider-mobile-image body:not(.admin-page) .hero-slider[transition-type="sweep"] .hero-slider-track,
body:not(.admin-page) .hero-slider[data-slider-transition="sweep"][data-slider-responsive="mobile"] .hero-slider-track,
body:not(.admin-page) .hero-slider[transition-type="sweep"][data-slider-responsive="mobile"] .hero-slider-track {
  aspect-ratio: 1000 / 1400 !important;
}

body:not(.admin-page) .hero-slider[data-slider-transition="sweep"] .hero-slide-frame,
body:not(.admin-page) .hero-slider[transition-type="sweep"] .hero-slide-frame,
body:not(.admin-page) .hero-slider[data-slider-transition="sweep"] .hero-slide-picture,
body:not(.admin-page) .hero-slider[transition-type="sweep"] .hero-slide-picture {
  background: #020202 !important;
  overflow: hidden !important;
}

body:not(.admin-page) .hero-slider[data-slider-transition="sweep"] .hero-slide-image,
body:not(.admin-page) .hero-slider[transition-type="sweep"] .hero-slide-image,
body:not(.admin-page) .hero-slider[data-slider-transition="sweep"] .hero-slide-picture img,
body:not(.admin-page) .hero-slider[transition-type="sweep"] .hero-slide-picture img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  display: block !important;
  object-fit: cover !important;
  object-position: center center !important;
  aspect-ratio: inherit !important;
  image-rendering: auto !important;
}

body:not(.admin-page) .hero-slider[data-slider-responsive="desktop"] .hero-slide-image,
body:not(.admin-page) .hero-slider[data-slider-responsive="desktop"] .hero-slide-picture img {
  object-position: center center !important;
}

body:not(.admin-page) .hero-slider[data-slider-responsive="mobile"] .hero-slide-image,
body:not(.admin-page) .hero-slider[data-slider-responsive="mobile"] .hero-slide-picture img {
  object-position: center center !important;
}

/* Keep non-active hidden slides from becoming layout/paint cost. */
body:not(.admin-page) .hero-slider[data-slider-transition="sweep"] .hero-slide[hidden]:not(.is-sweep-entering):not(.is-sweep-leaving),
body:not(.admin-page) .hero-slider[transition-type="sweep"] .hero-slide[hidden]:not(.is-sweep-entering):not(.is-sweep-leaving) {
  visibility: hidden !important;
  pointer-events: none !important;
}


/* AGS HERO NO-CROP IMAGE FRAMING — 2026-06-14 v13
   Fixes desktop/mobile cropping caused by object-fit: cover + overflow hidden.
   The slider canvas stays stable, but the artwork is shown fully.
*/
body:not(.admin-page) .hero-slider[data-slider-transition="sweep"],
body:not(.admin-page) .hero-slider[transition-type="sweep"],
body:not(.admin-page) .hero-slider[data-slider-transition="sweep"] .hero-slider-track,
body:not(.admin-page) .hero-slider[transition-type="sweep"] .hero-slider-track,
body:not(.admin-page) .hero-slider[data-slider-transition="sweep"] .hero-slide-frame,
body:not(.admin-page) .hero-slider[transition-type="sweep"] .hero-slide-frame,
body:not(.admin-page) .hero-slider[data-slider-transition="sweep"] .hero-slide-picture,
body:not(.admin-page) .hero-slider[transition-type="sweep"] .hero-slide-picture {
  background: #020202 !important;
}

body:not(.admin-page) .hero-slider[data-slider-transition="sweep"] .hero-slide-picture,
body:not(.admin-page) .hero-slider[transition-type="sweep"] .hero-slide-picture {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

body:not(.admin-page) .hero-slider[data-slider-transition="sweep"] .hero-slide-image,
body:not(.admin-page) .hero-slider[transition-type="sweep"] .hero-slide-image,
body:not(.admin-page) .hero-slider[data-slider-transition="sweep"] .hero-slide-picture img,
body:not(.admin-page) .hero-slider[transition-type="sweep"] .hero-slide-picture img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  background: #020202 !important;
  transform: none !important;
  filter: none !important;
}

/* Desktop no-crop: 2160x1080 / 2:1 canvas. */
body:not(.admin-page) .hero-slider[data-slider-responsive="desktop"] .hero-slide-image,
body:not(.admin-page) .hero-slider[data-slider-responsive="desktop"] .hero-slide-picture img {
  object-fit: contain !important;
  object-position: center center !important;
}

/* Mobile/tablet portrait no-crop: mobile poster canvas remains 1000x1400. */
body:not(.admin-page) .hero-slider[data-slider-responsive="mobile"] .hero-slide-image,
body:not(.admin-page) .hero-slider[data-slider-responsive="mobile"] .hero-slide-picture img {
  object-fit: contain !important;
  object-position: center center !important;
}

@media (max-width: 991px), (orientation: portrait) and (max-width: 1024px) {
  body:not(.admin-page) .hero-slider[data-slider-transition="sweep"] .hero-slide-image,
  body:not(.admin-page) .hero-slider[transition-type="sweep"] .hero-slide-image,
  body:not(.admin-page) .hero-slider[data-slider-transition="sweep"] .hero-slide-picture img,
  body:not(.admin-page) .hero-slider[transition-type="sweep"] .hero-slide-picture img {
    object-fit: contain !important;
    object-position: center center !important;
  }
}


/* AGS V13 MENU TEXT VISIBILITY FIX — 2026-06-14
   Baseline: v13 slider stable.
   Fix: mega menu opens, but link text inherits white/header styles on a white panel.
   This override only affects dropdown/mega menu content, not slider/admin/checkout. */
body:not(.admin-page) .site-header .ags-cca-mega,
body:not(.admin-page) header.site-header .ags-cca-mega,
body:not(.admin-page) .desktop-nav .ags-cca-mega {
  background: #fff !important;
  color: #0b0b0b !important;
  -webkit-text-fill-color: #0b0b0b !important;
  text-shadow: none !important;
  mix-blend-mode: normal !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

body:not(.admin-page) .ags-cca-nav-dropdown:hover > .ags-cca-mega,
body:not(.admin-page) .ags-cca-nav-dropdown:focus-within > .ags-cca-mega,
body:not(.admin-page) .ags-cca-nav-dropdown.is-open > .ags-cca-mega,
body:not(.admin-page) .ags-cca-mega.is-open,
body:not(.admin-page) .ags-cca-mega:hover,
body:not(.admin-page) .ags-cca-mega:focus-within {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

body:not(.admin-page) .site-header .ags-cca-mega-inner,
body:not(.admin-page) .site-header .ags-cca-mega-col,
body:not(.admin-page) .site-header .ags-cca-mega-empty {
  color: #0b0b0b !important;
  -webkit-text-fill-color: #0b0b0b !important;
  opacity: 1 !important;
  visibility: visible !important;
  text-shadow: none !important;
  mix-blend-mode: normal !important;
}

body:not(.admin-page) .site-header .ags-cca-mega-col {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 10px !important;
  min-width: 0 !important;
}

body:not(.admin-page) .site-header .ags-cca-mega-col b,
body:not(.admin-page) .site-header .ags-cca-mega-empty b {
  display: block !important;
  color: #0b0b0b !important;
  -webkit-text-fill-color: #0b0b0b !important;
  opacity: 1 !important;
  visibility: visible !important;
  font-size: 12px !important;
  line-height: 1.15 !important;
  font-weight: 950 !important;
  letter-spacing: .055em !important;
  text-transform: uppercase !important;
  text-decoration: underline !important;
  margin: 0 0 6px !important;
  text-shadow: none !important;
}

body:not(.admin-page) .site-header .ags-cca-mega-col a,
body:not(.admin-page) .site-header .ags-cca-mega-col a:link,
body:not(.admin-page) .site-header .ags-cca-mega-col a:visited,
body:not(.admin-page) .site-header .ags-cca-mega-empty span {
  display: block !important;
  position: relative !important;
  z-index: 2 !important;
  color: #111 !important;
  -webkit-text-fill-color: #111 !important;
  background: transparent !important;
  opacity: 1 !important;
  visibility: visible !important;
  font-size: clamp(12px, .82vw, 14px) !important;
  line-height: 1.28 !important;
  font-weight: 850 !important;
  letter-spacing: .012em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  text-indent: 0 !important;
  white-space: normal !important;
  overflow: visible !important;
  transform: none !important;
  clip-path: none !important;
  filter: none !important;
  text-shadow: none !important;
  mix-blend-mode: normal !important;
}

body:not(.admin-page) .site-header .ags-cca-mega-col a:hover,
body:not(.admin-page) .site-header .ags-cca-mega-col a:focus-visible {
  color: #6f7740 !important;
  -webkit-text-fill-color: #6f7740 !important;
  text-decoration: underline !important;
  outline: none !important;
}

/* Keep desktop menu panel readable and not overly empty on medium screens. */
body:not(.admin-page) .site-header .ags-cca-artist-mega .ags-cca-mega-inner {
  grid-template-columns: repeat(4, minmax(120px, 1fr)) !important;
  gap: 18px 34px !important;
  padding-top: 28px !important;
  padding-bottom: 30px !important;
}

body:not(.admin-page) .site-header .ags-cca-catalog-mega .ags-cca-mega-inner {
  grid-template-columns: repeat(3, minmax(130px, 1fr)) !important;
  gap: 18px 32px !important;
}

@media (max-width: 920px) {
  body:not(.admin-page) .site-header .ags-cca-mega {
    display: none !important;
  }
}


/* AGS V13 CART DRAWER + BADGE FIX — 2026-06-14
   Keeps v13 hero slider intact.
   Fixes:
   - cart drawer panel looked detached/floating
   - cart footer/body spacing was visually unbalanced
   - desktop cart badge was clipped at the top
*/
body:not(.admin-page) .site-header,
body:not(.admin-page) .site-header *,
body:not(.admin-page) .header-actions,
body:not(.admin-page) .desktop-cart-button,
body:not(.admin-page) .cart-button {
  overflow: visible !important;
}

body:not(.admin-page) .desktop-cart-button,
body:not(.admin-page) .cart-button {
  position: relative !important;
  isolation: isolate !important;
}

/* Desktop cart count: keep it inside the header visual area so it is not clipped. */
body:not(.admin-page) .desktop-cart-button > b[data-cart-count],
body:not(.admin-page) .cart-button > b[data-cart-count],
body:not(.admin-page) .ags-cca-header .desktop-cart-button > b[data-cart-count],
body:not(.admin-page) .ags-cca-header .cart-button > b[data-cart-count] {
  position: absolute !important;
  top: -3px !important;
  right: -4px !important;
  z-index: 20 !important;
  display: inline-grid !important;
  place-items: center !important;
  min-width: 18px !important;
  width: auto !important;
  height: 18px !important;
  padding: 0 5px !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: #000 !important;
  border: 1px solid rgba(0,0,0,.18) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.22) !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-align: center !important;
  transform: none !important;
  clip-path: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none !important;
}

/* Drawer root must be a full-screen overlay, not a floating card. */
body:not(.admin-page) .drawer[data-cart],
body:not(.admin-page) [data-cart].drawer {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483600 !important;
  width: 100vw !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  display: none !important;
  overflow: hidden !important;
  background: transparent !important;
  overscroll-behavior: contain !important;
  isolation: isolate !important;
}

body:not(.admin-page) .drawer[data-cart].open,
body:not(.admin-page) [data-cart].drawer.open,
body:not(.admin-page) [data-cart].open {
  display: block !important;
}

/* Shade covers the entire viewport. Keep blur professional, not too heavy. */
body:not(.admin-page) .drawer[data-cart] > .shade,
body:not(.admin-page) [data-cart].drawer > .shade {
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  background: rgba(0,0,0,.52) !important;
  backdrop-filter: blur(5px) saturate(105%) !important;
  -webkit-backdrop-filter: blur(5px) saturate(105%) !important;
}

/* Cart panel: fixed to right, full height, no detached/floating spacing. */
body:not(.admin-page) .drawer[data-cart] > aside,
body:not(.admin-page) [data-cart].drawer > aside,
body:not(.admin-page) [data-cart].open > aside {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: auto !important;
  z-index: 2 !important;
  width: min(520px, 100vw) !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  max-height: 100dvh !important;
  margin: 0 !important;
  border-radius: 0 !important;
  background: #fff !important;
  color: #050505 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  box-shadow: -26px 0 70px rgba(0,0,0,.22) !important;
  transform: none !important;
}

/* Stable drawer structure: header top, cart list scrolls, footer attaches to bottom. */
body:not(.admin-page) .drawer[data-cart] > aside > header,
body:not(.admin-page) [data-cart].drawer > aside > header {
  flex: 0 0 auto !important;
  position: relative !important;
  top: auto !important;
  z-index: 3 !important;
  min-height: 82px !important;
  padding: max(22px, env(safe-area-inset-top)) 28px 18px !important;
  background: #fff !important;
  border-bottom: 1px solid rgba(0,0,0,.08) !important;
}

body:not(.admin-page) .drawer[data-cart] > aside > header b,
body:not(.admin-page) [data-cart].drawer > aside > header b {
  font-size: clamp(26px, 2.1vw, 34px) !important;
  line-height: 1 !important;
  letter-spacing: -.045em !important;
}

body:not(.admin-page) .drawer[data-cart] > aside > header button,
body:not(.admin-page) [data-cart].drawer > aside > header button {
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  min-height: 46px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(0,0,0,.10) !important;
  background: #fff !important;
  color: #000 !important;
  display: grid !important;
  place-items: center !important;
  font-size: 24px !important;
  line-height: 1 !important;
  cursor: pointer !important;
}

body:not(.admin-page) .drawer[data-cart] .cart-items,
body:not(.admin-page) [data-cart].drawer .cart-items {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
  padding: 18px 22px !important;
  display: grid !important;
  align-content: start !important;
  gap: 12px !important;
  background: #fff !important;
}

body:not(.admin-page) .drawer[data-cart] > aside > footer,
body:not(.admin-page) [data-cart].drawer > aside > footer {
  flex: 0 0 auto !important;
  position: relative !important;
  bottom: auto !important;
  z-index: 3 !important;
  margin-top: auto !important;
  padding: 20px 28px calc(24px + env(safe-area-inset-bottom)) !important;
  background: #fff !important;
  border-top: 1px solid rgba(0,0,0,.08) !important;
  box-shadow: 0 -18px 32px rgba(255,255,255,.94) !important;
  display: grid !important;
  gap: 14px !important;
}

body:not(.admin-page) .drawer[data-cart] .cart-line,
body:not(.admin-page) [data-cart].drawer .cart-line {
  border-radius: 18px !important;
  border: 1px solid rgba(0,0,0,.08) !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.04) !important;
}

body:not(.admin-page) .drawer[data-cart] .cart-trust-note,
body:not(.admin-page) [data-cart].drawer .cart-trust-note {
  background: #f7f7f7 !important;
  border: 1px solid rgba(0,0,0,.06) !important;
  border-radius: 16px !important;
  padding: 14px 16px !important;
}

body:not(.admin-page) .drawer[data-cart] .total,
body:not(.admin-page) [data-cart].drawer .total {
  align-items: center !important;
  font-size: 22px !important;
}

body:not(.admin-page) .drawer[data-cart] .total b,
body:not(.admin-page) [data-cart].drawer .total b {
  font-size: 24px !important;
  letter-spacing: -.03em !important;
}

/* Mobile: drawer becomes a clean full-screen panel, not a floating bottom sheet. */
@media (max-width: 720px) {
  body:not(.admin-page) .drawer[data-cart] > aside,
  body:not(.admin-page) [data-cart].drawer > aside,
  body:not(.admin-page) [data-cart].open > aside {
    width: 100vw !important;
    max-width: 100vw !important;
    border-radius: 0 !important;
  }

  body:not(.admin-page) .drawer[data-cart] > aside > header,
  body:not(.admin-page) [data-cart].drawer > aside > header {
    padding-inline: 18px !important;
    min-height: 72px !important;
  }

  body:not(.admin-page) .drawer[data-cart] .cart-items,
  body:not(.admin-page) [data-cart].drawer .cart-items {
    padding: 14px !important;
  }

  body:not(.admin-page) .drawer[data-cart] > aside > footer,
  body:not(.admin-page) [data-cart].drawer > aside > footer {
    padding: 16px 18px calc(18px + env(safe-area-inset-bottom)) !important;
  }
}


/* AGS V13 MOBILE CATALOG STRICT ADMIN SOURCE — 2026-06-14 v2 */
body:not(.admin-page) .mobile-menu-catalog-grid[data-mobile-catalog-admin-only="true"] {
  display: grid !important;
  gap: 8px !important;
}

body:not(.admin-page) .mobile-menu-catalog-grid[data-mobile-catalog-admin-only="true"] .mobile-menu-muted {
  display: block !important;
  color: rgba(255,255,255,.58) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .04em !important;
  padding: 12px 10px !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 10px !important;
}


/* AGS V13 MOBILE CATALOG MATCH DESKTOP — 2026-06-14
   Mobile CATALOG follows the desktop mega menu grouping:
   MERCH / MUSIK / STORE. Prevents old fallback category list from appearing.
*/
body:not(.admin-page) .mobile-menu-catalog-grid--desktop-sync,
body:not(.admin-page) .mobile-menu-catalog-grid[data-mobile-catalog-match-desktop="true"] {
  display: grid !important;
  gap: 10px !important;
}

body:not(.admin-page) .mobile-menu-catalog-grid--desktop-sync > a {
  display: none !important;
}

body:not(.admin-page) .mobile-menu-catalog-subgroup {
  display: grid !important;
  gap: 8px !important;
  padding: 10px !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,.025) !important;
}

body:not(.admin-page) .mobile-menu-catalog-subgroup b {
  display: block !important;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 950 !important;
  letter-spacing: .08em !important;
  line-height: 1 !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
  opacity: .92 !important;
  padding: 2px 2px 4px !important;
}

body:not(.admin-page) .mobile-menu-catalog-subgroup a {
  display: block !important;
  width: 100% !important;
  color: #fff !important;
  background: #030303 !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 9px !important;
  padding: 10px 12px !important;
  font-size: 11px !important;
  font-weight: 950 !important;
  letter-spacing: .035em !important;
  line-height: 1.15 !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
}

body:not(.admin-page) .mobile-menu-catalog-subgroup a:hover,
body:not(.admin-page) .mobile-menu-catalog-subgroup a:focus {
  background: #111 !important;
  border-color: rgba(255,255,255,.22) !important;
}

body:not(.admin-page) .mobile-menu-catalog-store {
  margin-top: 2px !important;
}


/* AGS V13 MOBILE MENU SPACING POLISH — 2026-06-14
   Rapikan hamburger menu:
   - Login Admin tidak mepet ke Artists
   - jarak antar section konsisten
   - catalog group MERCH / STORE lebih breathable
   - tombol bawah tidak terlalu menempel
*/
@media (max-width: 920px) {
  body:not(.admin-page) .mobile-menu,
  body:not(.admin-page) .mobile-drawer,
  body:not(.admin-page) [data-mobile-menu],
  body:not(.admin-page) .ags-mobile-menu {
    padding-top: 14px !important;
    padding-inline: 10px !important;
    padding-bottom: calc(34px + env(safe-area-inset-bottom)) !important;
  }

  body:not(.admin-page) .mobile-menu > *,
  body:not(.admin-page) .mobile-drawer > *,
  body:not(.admin-page) [data-mobile-menu] > *,
  body:not(.admin-page) .ags-mobile-menu > * {
    margin-top: 0 !important;
  }

  body:not(.admin-page) .mobile-menu-language,
  body:not(.admin-page) .mobile-lang,
  body:not(.admin-page) .mobile-menu .lang-switch,
  body:not(.admin-page) [data-mobile-menu] .lang-switch {
    margin-bottom: 16px !important;
  }

  body:not(.admin-page) .mobile-admin-link,
  body:not(.admin-page) .mobile-login-admin,
  body:not(.admin-page) .mobile-menu a[href*="admin"],
  body:not(.admin-page) [data-mobile-menu] a[href*="admin"] {
    margin-bottom: 14px !important;
  }

  body:not(.admin-page) .mobile-menu-section,
  body:not(.admin-page) [data-mobile-menu] .mobile-menu-section {
    margin: 0 0 12px !important;
    border-radius: 14px !important;
    overflow: hidden !important;
  }

  body:not(.admin-page) .mobile-menu-section + .mobile-menu-section,
  body:not(.admin-page) .mobile-admin-link + .mobile-menu-section,
  body:not(.admin-page) .mobile-login-admin + .mobile-menu-section,
  body:not(.admin-page) [data-mobile-menu] a[href*="admin"] + .mobile-menu-section {
    margin-top: 12px !important;
  }

  body:not(.admin-page) .mobile-menu-section summary,
  body:not(.admin-page) [data-mobile-menu] .mobile-menu-section summary {
    min-height: 38px !important;
    padding: 12px 13px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    line-height: 1 !important;
  }

  body:not(.admin-page) .mobile-menu-section[open] summary,
  body:not(.admin-page) [data-mobile-menu] .mobile-menu-section[open] summary {
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
    margin-bottom: 8px !important;
  }

  body:not(.admin-page) .mobile-menu-section-grid,
  body:not(.admin-page) [data-mobile-menu] .mobile-menu-section-grid {
    padding: 0 9px 10px !important;
    gap: 10px !important;
  }

  body:not(.admin-page) .mobile-menu-catalog-grid--desktop-sync,
  body:not(.admin-page) .mobile-menu-catalog-grid[data-mobile-catalog-match-desktop="true"] {
    gap: 12px !important;
    padding: 0 9px 12px !important;
  }

  body:not(.admin-page) .mobile-menu-catalog-subgroup {
    padding: 11px !important;
    gap: 9px !important;
    border-radius: 13px !important;
  }

  body:not(.admin-page) .mobile-menu-catalog-subgroup + .mobile-menu-catalog-subgroup {
    margin-top: 2px !important;
  }

  body:not(.admin-page) .mobile-menu-catalog-subgroup b {
    padding: 2px 2px 6px !important;
    margin-bottom: 1px !important;
    line-height: 1.1 !important;
  }

  body:not(.admin-page) .mobile-menu-catalog-subgroup a {
    min-height: 34px !important;
    padding: 10px 12px !important;
    display: flex !important;
    align-items: center !important;
    border-radius: 9px !important;
  }

  body:not(.admin-page) .mobile-menu-all,
  body:not(.admin-page) .mobile-menu-footer-link,
  body:not(.admin-page) [data-mobile-menu] > a,
  body:not(.admin-page) .mobile-menu > a {
    margin-top: 10px !important;
    margin-bottom: 0 !important;
  }

  body:not(.admin-page) .mobile-menu-section--catalog-desktop-sync {
    margin-bottom: 16px !important;
  }

  body:not(.admin-page) .mobile-menu-section--catalog-desktop-sync + a,
  body:not(.admin-page) #mobile-catalog + a,
  body:not(.admin-page) #mobile-catalog + .mobile-menu-all {
    margin-top: 16px !important;
  }

  body:not(.admin-page) #mobile-catalog {
    margin-top: 12px !important;
  }

  body:not(.admin-page) .mobile-menu a,
  body:not(.admin-page) [data-mobile-menu] a {
    box-sizing: border-box !important;
  }
}


/* AGS V13 CHECKOUT MODAL SCROLL + HEADER FIX — 2026-06-14
   Fixes:
   - checkout payment instruction/result cannot scroll
   - checkout title area disappears after order/payment view
   - close button at top-right is hidden/missing
   - mobile checkout should behave as a proper full-height modal with internal scrolling
*/
body:not(.admin-page) .modal[data-checkout] {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483500 !important;
  width: 100vw !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  overflow: hidden !important;
  align-items: center !important;
  justify-content: center !important;
  padding: max(14px, env(safe-area-inset-top)) 14px max(14px, env(safe-area-inset-bottom)) !important;
  overscroll-behavior: contain !important;
}

body:not(.admin-page) .modal[data-checkout].open {
  display: flex !important;
}

body:not(.admin-page) .modal[data-checkout] .shade {
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  background: rgba(0,0,0,.56) !important;
  backdrop-filter: blur(6px) saturate(108%) !important;
  -webkit-backdrop-filter: blur(6px) saturate(108%) !important;
}

body:not(.admin-page) .modal[data-checkout] .checkout-card.checkout-pro,
body:not(.admin-page) .modal[data-checkout] .modal-card.checkout-card.checkout-pro {
  position: relative !important;
  z-index: 2 !important;
  width: min(760px, calc(100vw - 28px)) !important;
  height: auto !important;
  max-height: calc(100dvh - 28px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
  min-height: min(560px, calc(100dvh - 28px)) !important;
  margin: 0 auto !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  background: #fff !important;
  color: #050505 !important;
  border-radius: 24px !important;
  box-shadow: 0 28px 90px rgba(0,0,0,.28) !important;
}

/* Persistent top heading; never let it be pushed away by payment result content. */
body:not(.admin-page) .modal[data-checkout] .checkout-top {
  flex: 0 0 auto !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 8 !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  background: #fff !important;
  padding: 24px 76px 16px 28px !important;
  border-bottom: 1px solid rgba(0,0,0,.08) !important;
  box-shadow: 0 10px 22px rgba(255,255,255,.92) !important;
}

body:not(.admin-page) .modal[data-checkout] .checkout-kicker {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: #666 !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  margin: 0 0 6px !important;
}

body:not(.admin-page) .modal[data-checkout] .checkout-top h2 {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: #050505 !important;
  font-size: clamp(26px, 3vw, 38px) !important;
  line-height: .98 !important;
  letter-spacing: -.055em !important;
  margin: 0 0 8px !important;
}

body:not(.admin-page) .modal[data-checkout] .checkout-top p {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: #666 !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
  margin: 0 !important;
  max-width: 560px !important;
}

/* Close button is always top-right and above all checkout/payment content. */
body:not(.admin-page) .modal[data-checkout] .checkout-card > .x,
body:not(.admin-page) .modal[data-checkout] .modal-card > .x,
body:not(.admin-page) .modal[data-checkout] button.x[data-close-checkout] {
  position: absolute !important;
  top: 18px !important;
  right: 18px !important;
  z-index: 20 !important;
  display: grid !important;
  place-items: center !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(0,0,0,.12) !important;
  background: #fff !important;
  color: #000 !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.08) !important;
  font-size: 24px !important;
  line-height: 1 !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: none !important;
  cursor: pointer !important;
}

/* Form and payment result are the scroll containers, not the page body. */
body:not(.admin-page) .modal[data-checkout] form[data-checkout-form],
body:not(.admin-page) .modal[data-checkout] .payment-result-pro,
body:not(.admin-page) .modal[data-checkout] [data-payment-result] {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
  padding: 22px 28px calc(28px + env(safe-area-inset-bottom)) !important;
  scroll-padding-top: 18px !important;
  background: #fff !important;
}

/* Payment result after order: force it to be a readable, scrollable view. */
body:not(.admin-page) .modal[data-checkout] .payment-result-pro:not(.hidden),
body:not(.admin-page) .modal[data-checkout] [data-payment-result]:not(.hidden) {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: #050505 !important;
}

body:not(.admin-page) .modal[data-checkout] .payment-result-pro *,
body:not(.admin-page) .modal[data-checkout] [data-payment-result] * {
  max-width: 100% !important;
}

/* In payment view the header stays compact so instructions have enough room. */
body:not(.admin-page) .modal[data-checkout].ags-checkout-payment-view .checkout-top {
  padding-top: 20px !important;
  padding-bottom: 14px !important;
}

body:not(.admin-page) .modal[data-checkout].ags-checkout-payment-view .checkout-top h2::after {
  content: " / Instruksi Pembayaran";
  font-size: .58em;
  letter-spacing: -.03em;
  color: #555;
}

body:not(.admin-page) .modal[data-checkout].ags-checkout-payment-view form[data-checkout-form] {
  display: none !important;
}

/* Prevent sticky submit from blocking scroll on small screens. */
body:not(.admin-page) .modal[data-checkout] .checkout-submit {
  position: static !important;
  bottom: auto !important;
  width: 100% !important;
  margin: 18px 0 calc(12px + env(safe-area-inset-bottom)) !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Ensure notices do not cover the close button/header. */
body:not(.admin-page) .modal[data-checkout] .notice[data-checkout-msg] {
  flex: 0 0 auto !important;
  margin: 0 28px !important;
  max-height: 96px !important;
  overflow: auto !important;
}

/* Mobile checkout: full-screen card with visible header + close. */
@media (max-width: 740px) {
  body:not(.admin-page) .modal[data-checkout] {
    align-items: stretch !important;
    justify-content: stretch !important;
    padding: 0 !important;
  }

  body:not(.admin-page) .modal[data-checkout] .checkout-card.checkout-pro,
  body:not(.admin-page) .modal[data-checkout] .modal-card.checkout-card.checkout-pro {
    width: 100vw !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
  }

  body:not(.admin-page) .modal[data-checkout] .checkout-top {
    padding: calc(18px + env(safe-area-inset-top)) 64px 14px 18px !important;
  }

  body:not(.admin-page) .modal[data-checkout] .checkout-top h2 {
    font-size: 28px !important;
  }

  body:not(.admin-page) .modal[data-checkout] .checkout-top p {
    font-size: 12px !important;
    line-height: 1.35 !important;
  }

  body:not(.admin-page) .modal[data-checkout] .checkout-card > .x,
  body:not(.admin-page) .modal[data-checkout] .modal-card > .x,
  body:not(.admin-page) .modal[data-checkout] button.x[data-close-checkout] {
    top: calc(13px + env(safe-area-inset-top)) !important;
    right: 14px !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
  }

  body:not(.admin-page) .modal[data-checkout] form[data-checkout-form],
  body:not(.admin-page) .modal[data-checkout] .payment-result-pro,
  body:not(.admin-page) .modal[data-checkout] [data-payment-result] {
    padding: 16px 16px calc(90px + env(safe-area-inset-bottom)) !important;
  }

  body:not(.admin-page) .modal[data-checkout] .notice[data-checkout-msg] {
    margin-inline: 16px !important;
  }
}


/* AGS V13 CHECKOUT BLACK HEADER + PAYMENT SCROLL FIX — 2026-06-14
   Finalizes checkout popup:
   - black checkout header
   - readable header typography
   - close button always visible
   - after "Buat Order" payment instructions become the only scrollable body
*/
body:not(.admin-page) .modal[data-checkout] .checkout-card.checkout-pro,
body:not(.admin-page) .modal[data-checkout] .modal-card.checkout-card.checkout-pro {
  background: #fff !important;
  color: #050505 !important;
}

/* Black header requested. */
body:not(.admin-page) .modal[data-checkout] .checkout-top {
  background: #020202 !important;
  color: #fff !important;
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: 0 14px 28px rgba(0,0,0,.22) !important;
  padding: 24px 76px 18px 28px !important;
}

body:not(.admin-page) .modal[data-checkout] .checkout-kicker {
  display: inline-flex !important;
  align-items: center !important;
  width: max-content !important;
  background: #ffd21f !important;
  color: #090909 !important;
  border-radius: 999px !important;
  padding: 7px 12px !important;
  font-size: 10px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  letter-spacing: .13em !important;
  text-transform: uppercase !important;
  margin: 0 0 10px !important;
}

body:not(.admin-page) .modal[data-checkout] .checkout-top h2 {
  color: #fff !important;
  text-shadow: none !important;
  -webkit-text-fill-color: #fff !important;
  font-size: clamp(28px, 3.1vw, 40px) !important;
  line-height: .92 !important;
  letter-spacing: -.06em !important;
  margin: 0 0 10px !important;
}

body:not(.admin-page) .modal[data-checkout] .checkout-top p {
  color: rgba(255,255,255,.76) !important;
  font-size: 13px !important;
  line-height: 1.38 !important;
  max-width: 560px !important;
}

/* Close button adjusted for black header. */
body:not(.admin-page) .modal[data-checkout] .checkout-card > .x,
body:not(.admin-page) .modal[data-checkout] .modal-card > .x,
body:not(.admin-page) .modal[data-checkout] button.x[data-close-checkout] {
  background: #fff !important;
  color: #000 !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.28) !important;
  top: 18px !important;
  right: 18px !important;
  z-index: 30 !important;
}

/* Form scroll before payment. */
body:not(.admin-page) .modal[data-checkout]:not(.ags-checkout-payment-view) form[data-checkout-form] {
  display: block !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
}

/* Payment result scroll after order creation. */
body:not(.admin-page) .modal[data-checkout].ags-checkout-payment-view .payment-result-pro,
body:not(.admin-page) .modal[data-checkout].ags-checkout-payment-view [data-payment-result],
body:not(.admin-page) .modal[data-checkout] .payment-result-pro:not(.hidden),
body:not(.admin-page) .modal[data-checkout] [data-payment-result]:not(.hidden) {
  display: block !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
  touch-action: pan-y !important;
  padding: 22px 28px calc(34px + env(safe-area-inset-bottom)) !important;
  background: #fff !important;
  color: #050505 !important;
  scroll-behavior: smooth !important;
}

/* Hide form completely in payment view so it cannot steal scroll height. */
body:not(.admin-page) .modal[data-checkout].ags-checkout-payment-view form[data-checkout-form] {
  display: none !important;
  flex: 0 0 auto !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Payment view header remains visible but compact. */
body:not(.admin-page) .modal[data-checkout].ags-checkout-payment-view .checkout-top {
  position: sticky !important;
  top: 0 !important;
  z-index: 12 !important;
  padding: 20px 76px 16px 28px !important;
}

body:not(.admin-page) .modal[data-checkout].ags-checkout-payment-view .checkout-top h2::after {
  content: " / Pembayaran";
  color: rgba(255,255,255,.70) !important;
  -webkit-text-fill-color: rgba(255,255,255,.70) !important;
  font-size: .52em !important;
  letter-spacing: -.03em !important;
}

/* Payment result content safety. */
body:not(.admin-page) .modal[data-checkout] [data-payment-result] img,
body:not(.admin-page) .modal[data-checkout] .payment-result-pro img {
  max-width: 100% !important;
  height: auto !important;
}

body:not(.admin-page) .modal[data-checkout] [data-payment-result] table,
body:not(.admin-page) .modal[data-checkout] .payment-result-pro table {
  max-width: 100% !important;
  overflow-x: auto !important;
  display: block !important;
}

body:not(.admin-page) .modal[data-checkout] .checkout-card.checkout-pro {
  overscroll-behavior: contain !important;
}

/* Mobile full-screen checkout: header black and payment result scroll. */
@media (max-width: 740px) {
  body:not(.admin-page) .modal[data-checkout] .checkout-top {
    padding: calc(16px + env(safe-area-inset-top)) 64px 14px 16px !important;
  }

  body:not(.admin-page) .modal[data-checkout] .checkout-kicker {
    padding: 6px 10px !important;
    font-size: 9px !important;
    margin-bottom: 8px !important;
  }

  body:not(.admin-page) .modal[data-checkout] .checkout-top h2 {
    font-size: 27px !important;
    margin-bottom: 8px !important;
  }

  body:not(.admin-page) .modal[data-checkout] .checkout-top p {
    font-size: 11.5px !important;
    line-height: 1.35 !important;
  }

  body:not(.admin-page) .modal[data-checkout] .checkout-card > .x,
  body:not(.admin-page) .modal[data-checkout] .modal-card > .x,
  body:not(.admin-page) .modal[data-checkout] button.x[data-close-checkout] {
    top: calc(13px + env(safe-area-inset-top)) !important;
    right: 14px !important;
  }

  body:not(.admin-page) .modal[data-checkout].ags-checkout-payment-view .payment-result-pro,
  body:not(.admin-page) .modal[data-checkout].ags-checkout-payment-view [data-payment-result],
  body:not(.admin-page) .modal[data-checkout] .payment-result-pro:not(.hidden),
  body:not(.admin-page) .modal[data-checkout] [data-payment-result]:not(.hidden) {
    padding: 16px 16px calc(96px + env(safe-area-inset-bottom)) !important;
  }
}


/* AGS V13 CHECKOUT PAYMENT SCROLL V2 — 2026-06-14
   Fixes payment instruction page:
   - header title stays "Checkout" only
   - payment instruction area scrolls on mobile/desktop
   - countdown pill black
   - copy/payment buttons are symmetrical
*/
body:not(.admin-page) .modal[data-checkout].open {
  display: flex !important;
  overflow: hidden !important;
}

body:not(.admin-page) .modal[data-checkout] .checkout-card.checkout-pro,
body:not(.admin-page) .modal[data-checkout] .modal-card.checkout-card.checkout-pro {
  height: min(920px, calc(100dvh - 28px - env(safe-area-inset-top) - env(safe-area-inset-bottom))) !important;
  max-height: calc(100dvh - 28px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

/* Header title must remain only Checkout. */
body:not(.admin-page) .modal[data-checkout].ags-checkout-payment-view .checkout-top h2::after {
  content: "" !important;
  display: none !important;
}

body:not(.admin-page) .modal[data-checkout].ags-checkout-payment-view .checkout-top {
  flex: 0 0 auto !important;
  position: relative !important;
  top: auto !important;
  z-index: 12 !important;
}

/* The payment result must be the scroll container. */
body:not(.admin-page) .modal[data-checkout].ags-checkout-payment-view [data-payment-result],
body:not(.admin-page) .modal[data-checkout].ags-checkout-payment-view .payment-result-pro,
body:not(.admin-page) .modal[data-checkout] [data-payment-result]:not(.hidden),
body:not(.admin-page) .modal[data-checkout] .payment-result-pro:not(.hidden) {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  overflow-y: scroll !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
  touch-action: pan-y !important;
  padding: 22px 28px calc(34px + env(safe-area-inset-bottom)) !important;
}

/* Do not let any generated payment card wrapper lock scroll. */
body:not(.admin-page) .modal[data-checkout].ags-checkout-payment-view [data-payment-result] > *,
body:not(.admin-page) .modal[data-checkout].ags-checkout-payment-view .payment-result-pro > * {
  max-height: none !important;
  overflow: visible !important;
}

/* Countdown/payment deadline pill: black as requested. Covers common generated classes and text areas. */
body:not(.admin-page) .modal[data-checkout] [data-payment-result] [class*="countdown"],
body:not(.admin-page) .modal[data-checkout] [data-payment-result] [class*="timer"],
body:not(.admin-page) .modal[data-checkout] [data-payment-result] [class*="deadline"],
body:not(.admin-page) .modal[data-checkout] [data-payment-result] [data-countdown],
body:not(.admin-page) .modal[data-checkout] [data-payment-result] [data-payment-countdown],
body:not(.admin-page) .modal[data-checkout] [data-payment-result] .payment-deadline,
body:not(.admin-page) .modal[data-checkout] [data-payment-result] .order-countdown,
body:not(.admin-page) .modal[data-checkout] [data-payment-result] .countdown-pill {
  background: #020202 !important;
  color: #fff !important;
  border-color: #020202 !important;
  box-shadow: none !important;
}

body:not(.admin-page) .modal[data-checkout] [data-payment-result] [class*="countdown"] *,
body:not(.admin-page) .modal[data-checkout] [data-payment-result] [class*="timer"] *,
body:not(.admin-page) .modal[data-checkout] [data-payment-result] [class*="deadline"] *,
body:not(.admin-page) .modal[data-checkout] [data-payment-result] [data-countdown] *,
body:not(.admin-page) .modal[data-checkout] [data-payment-result] [data-payment-countdown] *,
body:not(.admin-page) .modal[data-checkout] [data-payment-result] .payment-deadline *,
body:not(.admin-page) .modal[data-checkout] [data-payment-result] .order-countdown *,
body:not(.admin-page) .modal[data-checkout] [data-payment-result] .countdown-pill * {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

/* Symmetrical payment buttons: Copy Order, Copy Rekening, Copy Nominal, Upload, etc. */
body:not(.admin-page) .modal[data-checkout] [data-payment-result] button,
body:not(.admin-page) .modal[data-checkout] [data-payment-result] .btn,
body:not(.admin-page) .modal[data-checkout] [data-payment-result] a.btn,
body:not(.admin-page) .modal[data-checkout] [data-payment-result] [role="button"] {
  min-height: 58px !important;
  width: 100% !important;
  max-width: 100% !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 0 24px !important;
  line-height: 1 !important;
  font-size: clamp(15px, 2.8vw, 18px) !important;
  font-weight: 950 !important;
  letter-spacing: .04em !important;
  box-sizing: border-box !important;
}

/* Common two-column order/copy row: keep both controls equal height. */
body:not(.admin-page) .modal[data-checkout] [data-payment-result] .payment-order-row,
body:not(.admin-page) .modal[data-checkout] [data-payment-result] .order-number-actions,
body:not(.admin-page) .modal[data-checkout] [data-payment-result] .payment-actions,
body:not(.admin-page) .modal[data-checkout] [data-payment-result] .copy-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px !important;
  align-items: stretch !important;
}

body:not(.admin-page) .modal[data-checkout] [data-payment-result] .payment-order-row > *,
body:not(.admin-page) .modal[data-checkout] [data-payment-result] .order-number-actions > *,
body:not(.admin-page) .modal[data-checkout] [data-payment-result] .payment-actions > *,
body:not(.admin-page) .modal[data-checkout] [data-payment-result] .copy-actions > * {
  height: 58px !important;
  min-height: 58px !important;
}

/* Mobile: full-height modal, scroll result area below black header. */
@media (max-width: 740px) {
  body:not(.admin-page) .modal[data-checkout] {
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
  }

  body:not(.admin-page) .modal[data-checkout] .checkout-card.checkout-pro,
  body:not(.admin-page) .modal[data-checkout] .modal-card.checkout-card.checkout-pro {
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
    border-radius: 0 !important;
  }

  body:not(.admin-page) .modal[data-checkout].ags-checkout-payment-view [data-payment-result],
  body:not(.admin-page) .modal[data-checkout].ags-checkout-payment-view .payment-result-pro,
  body:not(.admin-page) .modal[data-checkout] [data-payment-result]:not(.hidden),
  body:not(.admin-page) .modal[data-checkout] .payment-result-pro:not(.hidden) {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow-y: scroll !important;
    overflow-x: hidden !important;
    padding: 16px 16px calc(130px + env(safe-area-inset-bottom)) !important;
  }

  body:not(.admin-page) .modal[data-checkout] [data-payment-result] .payment-order-row,
  body:not(.admin-page) .modal[data-checkout] [data-payment-result] .order-number-actions,
  body:not(.admin-page) .modal[data-checkout] [data-payment-result] .payment-actions,
  body:not(.admin-page) .modal[data-checkout] [data-payment-result] .copy-actions {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  body:not(.admin-page) .modal[data-checkout] [data-payment-result] button,
  body:not(.admin-page) .modal[data-checkout] [data-payment-result] .btn,
  body:not(.admin-page) .modal[data-checkout] [data-payment-result] a.btn,
  body:not(.admin-page) .modal[data-checkout] [data-payment-result] [role="button"] {
    min-height: 56px !important;
    height: 56px !important;
  }
}


/* AGS V13 PAYMENT UI SYMMETRY V3 — 2026-06-14
   Fix:
   - Checkout title was too tight
   - Copy No. Order + countdown overlapped on mobile
   - payment buttons/text were not symmetrical
   - payment view remains scrollable
*/
body:not(.admin-page) .modal[data-checkout] .checkout-top {
  padding: 30px 92px 24px 36px !important;
  min-height: 126px !important;
}

body:not(.admin-page) .modal[data-checkout] .checkout-top h2 {
  letter-spacing: -.035em !important;
  line-height: 1 !important;
  margin: 2px 0 0 !important;
}

body:not(.admin-page) .modal[data-checkout] .checkout-top p {
  margin-top: 10px !important;
}

body:not(.admin-page) .modal[data-checkout] .checkout-card > .x,
body:not(.admin-page) .modal[data-checkout] .modal-card > .x,
body:not(.admin-page) .modal[data-checkout] button.x[data-close-checkout] {
  top: 24px !important;
  right: 24px !important;
  width: 58px !important;
  height: 58px !important;
  min-width: 58px !important;
  min-height: 58px !important;
  font-size: 25px !important;
}

/* Payment result must always be a scroll container. */
body:not(.admin-page) .modal[data-checkout].ags-checkout-payment-view [data-payment-result],
body:not(.admin-page) .modal[data-checkout].ags-checkout-payment-view .payment-result-pro,
body:not(.admin-page) .modal[data-checkout] [data-payment-result]:not(.hidden),
body:not(.admin-page) .modal[data-checkout] .payment-result-pro:not(.hidden) {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-y: contain !important;
  touch-action: pan-y !important;
  min-height: 0 !important;
}

/* Top order card: balanced desktop layout. */
body:not(.admin-page) .modal[data-checkout] [data-payment-result] .payment-created-card-final {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 390px) !important;
  align-items: stretch !important;
  gap: 18px !important;
  padding: 18px 20px !important;
  border-radius: 20px !important;
}

body:not(.admin-page) .modal[data-checkout] [data-payment-result] .payment-created-copy {
  display: grid !important;
  align-content: center !important;
  gap: 10px !important;
  min-width: 0 !important;
}

body:not(.admin-page) .modal[data-checkout] [data-payment-result] .payment-success-kicker {
  width: max-content !important;
  max-width: 100% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 28px !important;
  padding: 7px 14px !important;
  border-radius: 999px !important;
  background: #020202 !important;
  color: #fff !important;
  font-size: 11px !important;
  line-height: 1 !important;
  letter-spacing: .095em !important;
  font-weight: 950 !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

body:not(.admin-page) .modal[data-checkout] [data-payment-result] .payment-created-copy strong {
  display: block !important;
  max-width: 100% !important;
  color: #050505 !important;
  font-size: clamp(30px, 3vw, 46px) !important;
  line-height: .94 !important;
  letter-spacing: -.065em !important;
  overflow-wrap: anywhere !important;
}

/* Right actions are vertical on desktop to keep buttons the same width. */
body:not(.admin-page) .modal[data-checkout] [data-payment-result] .payment-created-actions {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 12px !important;
  align-content: center !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  width: 100% !important;
  min-width: 0 !important;
}

/* Copy order and countdown share the exact same button geometry. */
body:not(.admin-page) .modal[data-checkout] [data-payment-result] .btn-copy-order-mini,
body:not(.admin-page) .modal[data-checkout] [data-payment-result] .payment-countdown-pill {
  width: 100% !important;
  height: 56px !important;
  min-height: 56px !important;
  max-height: 56px !important;
  border-radius: 999px !important;
  padding: 0 22px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
}

/* Countdown black and not truncated. */
body:not(.admin-page) .modal[data-checkout] [data-payment-result] .payment-countdown-pill,
body:not(.admin-page) .modal[data-checkout] [data-payment-result] [data-payment-countdown-wrap] {
  background: #020202 !important;
  color: #fff !important;
  border: 1px solid #020202 !important;
  box-shadow: none !important;
  gap: 12px !important;
}

body:not(.admin-page) .modal[data-checkout] [data-payment-result] .payment-countdown-pill span,
body:not(.admin-page) .modal[data-checkout] [data-payment-result] [data-payment-countdown-wrap] span {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  font-size: 10px !important;
  font-weight: 950 !important;
  letter-spacing: .09em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  flex: 0 0 auto !important;
  white-space: nowrap !important;
  max-width: none !important;
  overflow: visible !important;
}

body:not(.admin-page) .modal[data-checkout] [data-payment-result] .payment-countdown-pill b,
body:not(.admin-page) .modal[data-checkout] [data-payment-result] [data-payment-countdown-wrap] b {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  font-size: 25px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  letter-spacing: -.05em !important;
  flex: 0 0 auto !important;
}

/* General payment buttons: equal height, centered label, but not forced into awkward 2-column width. */
body:not(.admin-page) .modal[data-checkout] [data-payment-result] .payment-actions.compact-actions,
body:not(.admin-page) .modal[data-checkout] [data-payment-result] .payment-actions-simple,
body:not(.admin-page) .modal[data-checkout] [data-payment-result] .clean-payment-footer-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px !important;
  align-items: stretch !important;
}

body:not(.admin-page) .modal[data-checkout] [data-payment-result] .payment-actions.compact-actions .btn,
body:not(.admin-page) .modal[data-checkout] [data-payment-result] .payment-actions-simple .btn,
body:not(.admin-page) .modal[data-checkout] [data-payment-result] .clean-payment-footer-actions .btn,
body:not(.admin-page) .modal[data-checkout] [data-payment-result] .payment-total-copy-row .btn {
  min-height: 56px !important;
  height: 56px !important;
  border-radius: 999px !important;
  padding: 0 20px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  line-height: 1.06 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

/* Bank transfer action buttons in narrow desktop card remain side-by-side and equal. */
body:not(.admin-page) .modal[data-checkout] [data-payment-result] .payment-instruction-card .payment-actions.compact-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

body:not(.admin-page) .modal[data-checkout] [data-payment-result] .payment-instruction-card .payment-actions.compact-actions .btn {
  width: 100% !important;
  font-size: clamp(14px, 1.15vw, 18px) !important;
}

/* QRIS total copy row is stacked neatly, not cramped. */
body:not(.admin-page) .modal[data-checkout] [data-payment-result] .payment-total-copy-row {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 12px !important;
  align-items: stretch !important;
}

body:not(.admin-page) .modal[data-checkout] [data-payment-result] .payment-total-copy-row .btn {
  width: 100% !important;
}

/* Finish button should not be half width on desktop unless there are two actions. */
body:not(.admin-page) .modal[data-checkout] [data-payment-result] .payment-footer-actions.clean-payment-footer-actions,
body:not(.admin-page) .modal[data-checkout] [data-payment-result] .payment-actions-simple.payment-footer-actions {
  grid-template-columns: minmax(260px, 460px) !important;
  justify-content: start !important;
}

/* Mobile: stack top copy/countdown vertically so no overlap and perfectly symmetric. */
@media (max-width: 740px) {
  body:not(.admin-page) .modal[data-checkout] .checkout-top {
    min-height: 108px !important;
    padding: calc(24px + env(safe-area-inset-top)) 76px 20px 20px !important;
  }

  body:not(.admin-page) .modal[data-checkout] .checkout-top h2 {
    font-size: 31px !important;
    line-height: 1 !important;
    letter-spacing: -.035em !important;
  }

  body:not(.admin-page) .modal[data-checkout] .checkout-card > .x,
  body:not(.admin-page) .modal[data-checkout] .modal-card > .x,
  body:not(.admin-page) .modal[data-checkout] button.x[data-close-checkout] {
    top: calc(21px + env(safe-area-inset-top)) !important;
    right: 20px !important;
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    min-height: 56px !important;
  }

  body:not(.admin-page) .modal[data-checkout].ags-checkout-payment-view [data-payment-result],
  body:not(.admin-page) .modal[data-checkout].ags-checkout-payment-view .payment-result-pro,
  body:not(.admin-page) .modal[data-checkout] [data-payment-result]:not(.hidden),
  body:not(.admin-page) .modal[data-checkout] .payment-result-pro:not(.hidden) {
    padding: 18px 16px calc(120px + env(safe-area-inset-bottom)) !important;
    overflow-y: auto !important;
    min-height: 0 !important;
  }

  body:not(.admin-page) .modal[data-checkout] [data-payment-result] .payment-created-card-final {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    padding: 16px !important;
  }

  body:not(.admin-page) .modal[data-checkout] [data-payment-result] .payment-created-copy {
    gap: 12px !important;
  }

  body:not(.admin-page) .modal[data-checkout] [data-payment-result] .payment-created-copy strong {
    font-size: clamp(28px, 8.4vw, 36px) !important;
    line-height: .96 !important;
  }

  body:not(.admin-page) .modal[data-checkout] [data-payment-result] .payment-created-actions {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  body:not(.admin-page) .modal[data-checkout] [data-payment-result] .btn-copy-order-mini,
  body:not(.admin-page) .modal[data-checkout] [data-payment-result] .payment-countdown-pill {
    height: 58px !important;
    min-height: 58px !important;
    max-height: 58px !important;
    width: 100% !important;
    padding: 0 18px !important;
  }

  body:not(.admin-page) .modal[data-checkout] [data-payment-result] .payment-countdown-pill span,
  body:not(.admin-page) .modal[data-checkout] [data-payment-result] [data-payment-countdown-wrap] span {
    font-size: 10px !important;
  }

  body:not(.admin-page) .modal[data-checkout] [data-payment-result] .payment-countdown-pill b,
  body:not(.admin-page) .modal[data-checkout] [data-payment-result] [data-payment-countdown-wrap] b {
    font-size: 26px !important;
  }

  body:not(.admin-page) .modal[data-checkout] [data-payment-result] .payment-actions.compact-actions,
  body:not(.admin-page) .modal[data-checkout] [data-payment-result] .payment-instruction-card .payment-actions.compact-actions,
  body:not(.admin-page) .modal[data-checkout] [data-payment-result] .payment-actions-simple,
  body:not(.admin-page) .modal[data-checkout] [data-payment-result] .clean-payment-footer-actions {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  body:not(.admin-page) .modal[data-checkout] [data-payment-result] .payment-actions.compact-actions .btn,
  body:not(.admin-page) .modal[data-checkout] [data-payment-result] .payment-actions-simple .btn,
  body:not(.admin-page) .modal[data-checkout] [data-payment-result] .clean-payment-footer-actions .btn,
  body:not(.admin-page) .modal[data-checkout] [data-payment-result] .payment-total-copy-row .btn {
    width: 100% !important;
    height: 58px !important;
    min-height: 58px !important;
  }
}


/* AGS V13 PAYMENT COUNTDOWN + CLOSE FIX V4 — 2026-06-14
   Fix:
   - countdown text too large/cramped on mobile
   - Copy No. Order + countdown forced stacked on mobile
   - checkout close X always clickable
*/

/* Keep the close button above every checkout layer and make it clickable. */
body:not(.admin-page) .modal[data-checkout] .checkout-card > .x,
body:not(.admin-page) .modal[data-checkout] .modal-card > .x,
body:not(.admin-page) .modal[data-checkout] button.x[data-close-checkout],
body:not(.admin-page) .modal[data-checkout] [data-close-checkout].x {
  z-index: 2147483646 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  touch-action: manipulation !important;
  user-select: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Do not let the black header intercept the close button. */
body:not(.admin-page) .modal[data-checkout] .checkout-top {
  z-index: 10 !important;
}

body:not(.admin-page) .modal[data-checkout] .checkout-card,
body:not(.admin-page) .modal[data-checkout] .modal-card {
  isolation: isolate !important;
}

/* Payment top actions: default desktop remains tidy. */
body:not(.admin-page) .modal[data-checkout] [data-payment-result] .payment-created-actions,
body:not(.admin-page) .modal[data-checkout] [data-payment-result] .payment-created-card-final .payment-created-actions,
body:not(.admin-page) .modal[data-checkout] [data-payment-result] .order-created-actions,
body:not(.admin-page) .modal[data-checkout] [data-payment-result] .order-actions {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 12px !important;
  align-items: stretch !important;
  width: 100% !important;
  min-width: 0 !important;
}

/* Copy order and countdown geometry. */
body:not(.admin-page) .modal[data-checkout] [data-payment-result] .btn-copy-order-mini,
body:not(.admin-page) .modal[data-checkout] [data-payment-result] .copy-order-btn,
body:not(.admin-page) .modal[data-checkout] [data-payment-result] button[data-copy-order],
body:not(.admin-page) .modal[data-checkout] [data-payment-result] .payment-countdown-pill,
body:not(.admin-page) .modal[data-checkout] [data-payment-result] [data-payment-countdown-wrap],
body:not(.admin-page) .modal[data-checkout] [data-payment-result] [class*="countdown"] {
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 52px !important;
  min-height: 52px !important;
  max-height: 52px !important;
  border-radius: 999px !important;
  padding: 0 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  white-space: nowrap !important;
}

/* Countdown smaller and black. */
body:not(.admin-page) .modal[data-checkout] [data-payment-result] .payment-countdown-pill,
body:not(.admin-page) .modal[data-checkout] [data-payment-result] [data-payment-countdown-wrap],
body:not(.admin-page) .modal[data-checkout] [data-payment-result] [class*="countdown"] {
  background: #020202 !important;
  color: #fff !important;
  border: 1px solid #020202 !important;
  gap: 8px !important;
}

body:not(.admin-page) .modal[data-checkout] [data-payment-result] .payment-countdown-pill span,
body:not(.admin-page) .modal[data-checkout] [data-payment-result] [data-payment-countdown-wrap] span,
body:not(.admin-page) .modal[data-checkout] [data-payment-result] [class*="countdown"] span,
body:not(.admin-page) .modal[data-checkout] [data-payment-result] [class*="countdown"] small,
body:not(.admin-page) .modal[data-checkout] [data-payment-result] [class*="countdown"] em {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  font-size: 8px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  letter-spacing: .075em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  min-width: 0 !important;
  max-width: 92px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  flex: 0 1 auto !important;
}

body:not(.admin-page) .modal[data-checkout] [data-payment-result] .payment-countdown-pill b,
body:not(.admin-page) .modal[data-checkout] [data-payment-result] [data-payment-countdown-wrap] b,
body:not(.admin-page) .modal[data-checkout] [data-payment-result] [class*="countdown"] b,
body:not(.admin-page) .modal[data-checkout] [data-payment-result] [class*="countdown"] strong {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  font-size: 18px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  letter-spacing: -.035em !important;
  white-space: nowrap !important;
  min-width: auto !important;
  flex: 0 0 auto !important;
}

/* Payment scroll container stays usable. */
body:not(.admin-page) .modal[data-checkout].ags-checkout-payment-view [data-payment-result],
body:not(.admin-page) .modal[data-checkout] [data-payment-result]:not(.hidden) {
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
  min-height: 0 !important;
}

/* Mobile: force top payment actions to vertical, so countdown never overlaps copy button. */
@media (max-width: 740px) {
  body:not(.admin-page) .modal[data-checkout] [data-payment-result] .payment-created-card-final,
  body:not(.admin-page) .modal[data-checkout] [data-payment-result] .order-created-card,
  body:not(.admin-page) .modal[data-checkout] [data-payment-result] .payment-order-card {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  body:not(.admin-page) .modal[data-checkout] [data-payment-result] .payment-created-actions,
  body:not(.admin-page) .modal[data-checkout] [data-payment-result] .payment-created-card-final .payment-created-actions,
  body:not(.admin-page) .modal[data-checkout] [data-payment-result] .order-created-actions,
  body:not(.admin-page) .modal[data-checkout] [data-payment-result] .order-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    width: 100% !important;
  }

  body:not(.admin-page) .modal[data-checkout] [data-payment-result] .btn-copy-order-mini,
  body:not(.admin-page) .modal[data-checkout] [data-payment-result] .copy-order-btn,
  body:not(.admin-page) .modal[data-checkout] [data-payment-result] button[data-copy-order],
  body:not(.admin-page) .modal[data-checkout] [data-payment-result] .payment-countdown-pill,
  body:not(.admin-page) .modal[data-checkout] [data-payment-result] [data-payment-countdown-wrap],
  body:not(.admin-page) .modal[data-checkout] [data-payment-result] [class*="countdown"] {
    width: 100% !important;
    max-width: 100% !important;
    height: 50px !important;
    min-height: 50px !important;
    max-height: 50px !important;
    padding: 0 14px !important;
    margin: 0 !important;
  }

  body:not(.admin-page) .modal[data-checkout] [data-payment-result] .payment-countdown-pill span,
  body:not(.admin-page) .modal[data-checkout] [data-payment-result] [data-payment-countdown-wrap] span,
  body:not(.admin-page) .modal[data-checkout] [data-payment-result] [class*="countdown"] span,
  body:not(.admin-page) .modal[data-checkout] [data-payment-result] [class*="countdown"] small,
  body:not(.admin-page) .modal[data-checkout] [data-payment-result] [class*="countdown"] em {
    font-size: 7px !important;
    letter-spacing: .045em !important;
    max-width: 80px !important;
  }

  body:not(.admin-page) .modal[data-checkout] [data-payment-result] .payment-countdown-pill b,
  body:not(.admin-page) .modal[data-checkout] [data-payment-result] [data-payment-countdown-wrap] b,
  body:not(.admin-page) .modal[data-checkout] [data-payment-result] [class*="countdown"] b,
  body:not(.admin-page) .modal[data-checkout] [data-payment-result] [class*="countdown"] strong {
    font-size: 17px !important;
  }

  body:not(.admin-page) .modal[data-checkout] .checkout-card > .x,
  body:not(.admin-page) .modal[data-checkout] .modal-card > .x,
  body:not(.admin-page) .modal[data-checkout] button.x[data-close-checkout],
  body:not(.admin-page) .modal[data-checkout] [data-close-checkout].x {
    z-index: 2147483646 !important;
    pointer-events: auto !important;
  }
}


/* AGS V13 CHECKOUT BLUR-ONLY EMERGENCY FIX V5 — 2026-06-14
   Fixes condition where only the blurred overlay appears but checkout popup/card is invisible.
   The shade must stay behind; checkout card must always be visible above it when modal.open.
*/
body:not(.admin-page) .modal[data-checkout] {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483500 !important;
  width: 100vw !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  overflow: hidden !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

body:not(.admin-page) .modal[data-checkout].open {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  align-items: center !important;
  justify-content: center !important;
  padding: max(14px, env(safe-area-inset-top)) 14px max(14px, env(safe-area-inset-bottom)) !important;
}

body:not(.admin-page) .modal[data-checkout] > .shade,
body:not(.admin-page) .modal[data-checkout].open > .shade {
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  width: 100vw !important;
  height: 100dvh !important;
  background: rgba(0,0,0,.56) !important;
  backdrop-filter: blur(6px) saturate(108%) !important;
  -webkit-backdrop-filter: blur(6px) saturate(108%) !important;
}

/* Critical: card must be above shade and visible. */
body:not(.admin-page) .modal[data-checkout] > .checkout-card,
body:not(.admin-page) .modal[data-checkout] > .modal-card,
body:not(.admin-page) .modal[data-checkout] .checkout-card.checkout-pro,
body:not(.admin-page) .modal[data-checkout] .modal-card.checkout-card.checkout-pro,
body:not(.admin-page) .modal[data-checkout].open > .checkout-card,
body:not(.admin-page) .modal[data-checkout].open > .modal-card,
body:not(.admin-page) .modal[data-checkout].open .checkout-card.checkout-pro,
body:not(.admin-page) .modal[data-checkout].open .modal-card.checkout-card.checkout-pro {
  position: relative !important;
  z-index: 50 !important;
  display: flex !important;
  flex-direction: column !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: none !important;
  translate: none !important;
  scale: 1 !important;
  filter: none !important;
  width: min(760px, calc(100vw - 28px)) !important;
  height: min(920px, calc(100dvh - 28px - env(safe-area-inset-top) - env(safe-area-inset-bottom))) !important;
  max-height: calc(100dvh - 28px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
  min-height: min(560px, calc(100dvh - 28px)) !important;
  overflow: hidden !important;
  background: #fff !important;
  color: #050505 !important;
  border-radius: 24px !important;
  box-shadow: 0 28px 90px rgba(0,0,0,.30) !important;
  isolation: isolate !important;
}

/* Header stays visible inside the card. */
body:not(.admin-page) .modal[data-checkout].open .checkout-top {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  flex: 0 0 auto !important;
  position: relative !important;
  z-index: 60 !important;
  background: #020202 !important;
  color: #fff !important;
}

/* Close button stays above all checkout contents. */
body:not(.admin-page) .modal[data-checkout].open .checkout-card > .x,
body:not(.admin-page) .modal[data-checkout].open .modal-card > .x,
body:not(.admin-page) .modal[data-checkout].open button.x[data-close-checkout],
body:not(.admin-page) .modal[data-checkout].open [data-close-checkout].x {
  position: absolute !important;
  z-index: 2147483646 !important;
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  touch-action: manipulation !important;
}

/* Both form and payment result must be able to scroll when visible. */
body:not(.admin-page) .modal[data-checkout].open form[data-checkout-form],
body:not(.admin-page) .modal[data-checkout].open [data-payment-result]:not(.hidden),
body:not(.admin-page) .modal[data-checkout].open .payment-result-pro:not(.hidden) {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
  overscroll-behavior: contain !important;
}

/* Mobile: full screen card above shade. */
@media (max-width: 740px) {
  body:not(.admin-page) .modal[data-checkout].open {
    align-items: stretch !important;
    justify-content: stretch !important;
    padding: 0 !important;
  }

  body:not(.admin-page) .modal[data-checkout].open > .checkout-card,
  body:not(.admin-page) .modal[data-checkout].open > .modal-card,
  body:not(.admin-page) .modal[data-checkout].open .checkout-card.checkout-pro,
  body:not(.admin-page) .modal[data-checkout].open .modal-card.checkout-card.checkout-pro {
    width: 100vw !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    z-index: 50 !important;
  }
}


/* AGS V13 MOBILE WELCOME POPUP FIX — 2026-06-14
   Fixes first/mobile welcome popup:
   - no more broken two-column layout on small screens
   - image/product card centered and not oversized
   - title/description/buttons are readable
   - actions do not overlap
   - popup can scroll on short mobile screens
*/
body:not(.admin-page) [data-welcome-popup] {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483400 !important;
  width: 100vw !important;
  height: 100dvh !important;
  overflow: hidden !important;
  pointer-events: auto !important;
}

body:not(.admin-page) [data-welcome-popup][hidden] {
  display: none !important;
}

body:not(.admin-page) [data-welcome-popup] > .shade {
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  background: rgba(0,0,0,.58) !important;
  backdrop-filter: blur(7px) saturate(108%) !important;
  -webkit-backdrop-filter: blur(7px) saturate(108%) !important;
}

body:not(.admin-page) [data-welcome-popup] .popup-card {
  position: relative !important;
  z-index: 2 !important;
  overflow: hidden !important;
  color: #fff !important;
  background:
    radial-gradient(circle at 84% 0%, rgba(255,210,31,.30), transparent 42%),
    linear-gradient(135deg, #050505 0%, #0b0b0b 56%, #111 100%) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow: 0 28px 90px rgba(0,0,0,.48) !important;
}

body:not(.admin-page) [data-welcome-popup] .popup-content,
body:not(.admin-page) [data-welcome-popup] .popup-copy,
body:not(.admin-page) [data-welcome-popup] .popup-actions {
  min-width: 0 !important;
  box-sizing: border-box !important;
}

body:not(.admin-page) [data-welcome-popup] .popup-kicker {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: max-content !important;
  max-width: 100% !important;
  color: #050505 !important;
  background: #ffd21f !important;
  border-radius: 999px !important;
  padding: 8px 13px !important;
  font-size: 10px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
}

body:not(.admin-page) [data-welcome-popup] h2,
body:not(.admin-page) [data-welcome-popup] #ags-popup-title {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  text-shadow: none !important;
  margin: 0 !important;
}

body:not(.admin-page) [data-welcome-popup] p {
  color: rgba(255,255,255,.76) !important;
  margin: 0 !important;
}

body:not(.admin-page) [data-welcome-popup] .popup-actions .btn-red,
body:not(.admin-page) [data-welcome-popup] .popup-actions .btn-ghost,
body:not(.admin-page) [data-welcome-popup] [data-popup-shop-all],
body:not(.admin-page) [data-welcome-popup] [data-close-popup] {
  position: static !important;
  transform: none !important;
  width: 100% !important;
  min-height: 48px !important;
  height: 48px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  box-sizing: border-box !important;
  padding: 0 18px !important;
  font-size: 12px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  letter-spacing: .02em !important;
  white-space: nowrap !important;
}

body:not(.admin-page) [data-welcome-popup] .popup-actions .btn-red,
body:not(.admin-page) [data-welcome-popup] a[data-popup-shop-all] {
  background: #ffd21f !important;
  color: #050505 !important;
  border: 1px solid #ffd21f !important;
  box-shadow: none !important;
}

body:not(.admin-page) [data-welcome-popup] .popup-actions .btn-ghost,
body:not(.admin-page) [data-welcome-popup] button[data-close-popup] {
  background: rgba(255,255,255,.12) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.20) !important;
}

body:not(.admin-page) [data-welcome-popup] .popup-visual-frame {
  position: relative !important;
  background: #fff !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  box-shadow: 0 18px 42px rgba(0,0,0,.26) !important;
}

body:not(.admin-page) [data-welcome-popup] .popup-visual-frame img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  background: #fff !important;
}

body:not(.admin-page) [data-welcome-popup] .popup-visual-frame em {
  position: absolute !important;
  left: 10px !important;
  top: 10px !important;
  z-index: 3 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: max-content !important;
  max-width: calc(100% - 20px) !important;
  min-height: 22px !important;
  padding: 6px 10px !important;
  border-radius: 999px !important;
  background: #e71935 !important;
  color: #fff !important;
  font-size: 9px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  letter-spacing: .04em !important;
  white-space: nowrap !important;
}

/* Mobile-specific professional popup layout. */
@media (max-width: 740px) {
  body:not(.admin-page) [data-welcome-popup] {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom)) !important;
  }

  body:not(.admin-page) [data-welcome-popup][hidden] {
    display: none !important;
  }

  body:not(.admin-page) [data-welcome-popup] .popup-card {
    width: min(356px, calc(100vw - 24px)) !important;
    max-width: calc(100vw - 24px) !important;
    max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    height: auto !important;
    border-radius: 22px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 16px !important;
  }

  body:not(.admin-page) [data-welcome-popup] .popup-content {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    align-items: center !important;
    width: 100% !important;
  }

  body:not(.admin-page) [data-welcome-popup] .popup-copy {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    order: 1 !important;
    text-align: left !important;
    width: 100% !important;
  }

  body:not(.admin-page) [data-welcome-popup] .popup-kicker {
    justify-self: start !important;
    font-size: 9px !important;
    padding: 7px 11px !important;
  }

  body:not(.admin-page) [data-welcome-popup] h2,
  body:not(.admin-page) [data-welcome-popup] #ags-popup-title {
    font-size: clamp(30px, 10vw, 42px) !important;
    line-height: .92 !important;
    letter-spacing: -.045em !important;
    max-width: 260px !important;
  }

  body:not(.admin-page) [data-welcome-popup] p {
    font-size: 12px !important;
    line-height: 1.42 !important;
    max-width: 290px !important;
  }

  body:not(.admin-page) [data-welcome-popup] .popup-visual {
    order: 2 !important;
    display: block !important;
    width: 100% !important;
    max-width: 190px !important;
    justify-self: center !important;
    margin: 0 auto !important;
  }

  body:not(.admin-page) [data-welcome-popup] .popup-visual-frame {
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    min-height: 0 !important;
  }

  body:not(.admin-page) [data-welcome-popup] .popup-actions {
    order: 3 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    width: 100% !important;
    margin: 0 !important;
  }

  body:not(.admin-page) [data-welcome-popup] .popup-meta {
    display: none !important;
  }

  body:not(.admin-page) [data-welcome-popup]::after {
    content: "AFTERGIG SUPPLY" !important;
    position: absolute !important;
    left: 50% !important;
    bottom: max(26px, env(safe-area-inset-bottom)) !important;
    transform: translateX(-50%) !important;
    z-index: 1 !important;
    color: rgba(255,255,255,.035) !important;
    font-size: 28px !important;
    line-height: 1 !important;
    font-weight: 950 !important;
    letter-spacing: -.08em !important;
    pointer-events: none !important;
    white-space: nowrap !important;
  }
}

/* Very short mobile screens: compress popup to prevent overlap. */
@media (max-width: 740px) and (max-height: 720px) {
  body:not(.admin-page) [data-welcome-popup] .popup-card {
    padding: 14px !important;
  }

  body:not(.admin-page) [data-welcome-popup] .popup-content {
    gap: 10px !important;
  }

  body:not(.admin-page) [data-welcome-popup] h2,
  body:not(.admin-page) [data-welcome-popup] #ags-popup-title {
    font-size: clamp(27px, 9vw, 36px) !important;
  }

  body:not(.admin-page) [data-welcome-popup] .popup-visual {
    max-width: 150px !important;
  }

  body:not(.admin-page) [data-welcome-popup] p {
    font-size: 11px !important;
    line-height: 1.34 !important;
  }

  body:not(.admin-page) [data-welcome-popup] .popup-actions .btn-red,
  body:not(.admin-page) [data-welcome-popup] .popup-actions .btn-ghost {
    height: 44px !important;
    min-height: 44px !important;
  }
}

/* Desktop/tablet safety: keep the popup neat without affecting checkout/cart. */
@media (min-width: 741px) {
  body:not(.admin-page) [data-welcome-popup] {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 24px !important;
  }

  body:not(.admin-page) [data-welcome-popup][hidden] {
    display: none !important;
  }

  body:not(.admin-page) [data-welcome-popup] .popup-card {
    width: min(760px, calc(100vw - 48px)) !important;
    max-height: calc(100dvh - 48px) !important;
    border-radius: 28px !important;
    padding: 28px !important;
  }

  body:not(.admin-page) [data-welcome-popup] .popup-content {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 280px) !important;
    gap: 26px !important;
    align-items: center !important;
  }

  body:not(.admin-page) [data-welcome-popup] .popup-copy {
    display: grid !important;
    gap: 14px !important;
  }

  body:not(.admin-page) [data-welcome-popup] h2,
  body:not(.admin-page) [data-welcome-popup] #ags-popup-title {
    font-size: clamp(42px, 5vw, 72px) !important;
    line-height: .9 !important;
    letter-spacing: -.05em !important;
  }

  body:not(.admin-page) [data-welcome-popup] p {
    font-size: 14px !important;
    line-height: 1.5 !important;
    max-width: 420px !important;
  }

  body:not(.admin-page) [data-welcome-popup] .popup-visual {
    display: block !important;
    width: 100% !important;
  }

  body:not(.admin-page) [data-welcome-popup] .popup-visual-frame {
    aspect-ratio: 1 / 1 !important;
  }

  body:not(.admin-page) [data-welcome-popup] .popup-actions {
    display: flex !important;
    gap: 12px !important;
    align-items: center !important;
    flex-wrap: wrap !important;
  }

  body:not(.admin-page) [data-welcome-popup] .popup-actions .btn-red,
  body:not(.admin-page) [data-welcome-popup] .popup-actions .btn-ghost {
    width: auto !important;
    min-width: 150px !important;
  }
}


/* AGS V13 SIZE GUIDE MODAL CENTER FIX — 2026-06-14
   Fix:
   - size guide image appeared low/left and messy on mobile
   - modal content not vertically centered
   - close button position inconsistent
*/
body:not(.admin-page) [data-size-guide],
body:not(.admin-page) [data-sizeguide],
body:not(.admin-page) .size-guide-modal,
body:not(.admin-page) .sizeguide-modal,
body:not(.admin-page) .modal.size-guide,
body:not(.admin-page) .modal[data-sizeguide] {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483300 !important;
  width: 100vw !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  padding: max(18px, env(safe-area-inset-top)) 16px max(18px, env(safe-area-inset-bottom)) !important;
  overflow: hidden !important;
  background: transparent !important;
  pointer-events: none !important;
}

body:not(.admin-page) [data-size-guide].open,
body:not(.admin-page) [data-sizeguide].open,
body:not(.admin-page) .size-guide-modal.open,
body:not(.admin-page) .sizeguide-modal.open,
body:not(.admin-page) .modal.size-guide.open,
body:not(.admin-page) .modal[data-sizeguide].open,
body:not(.admin-page) [data-size-guide]:not([hidden]),
body:not(.admin-page) [data-sizeguide]:not([hidden]) {
  display: flex !important;
  pointer-events: auto !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Blur layer stays behind the image card. */
body:not(.admin-page) [data-size-guide] > .shade,
body:not(.admin-page) [data-sizeguide] > .shade,
body:not(.admin-page) .size-guide-modal > .shade,
body:not(.admin-page) .sizeguide-modal > .shade,
body:not(.admin-page) .modal.size-guide > .shade,
body:not(.admin-page) .modal[data-sizeguide] > .shade {
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  background: rgba(0,0,0,.58) !important;
  backdrop-filter: blur(6px) saturate(108%) !important;
  -webkit-backdrop-filter: blur(6px) saturate(108%) !important;
  pointer-events: auto !important;
}

/* Main size guide card. */
body:not(.admin-page) [data-size-guide] .modal-card,
body:not(.admin-page) [data-size-guide] .size-guide-card,
body:not(.admin-page) [data-size-guide] .sizeguide-card,
body:not(.admin-page) [data-sizeguide] .modal-card,
body:not(.admin-page) [data-sizeguide] .size-guide-card,
body:not(.admin-page) [data-sizeguide] .sizeguide-card,
body:not(.admin-page) .size-guide-modal .modal-card,
body:not(.admin-page) .sizeguide-modal .modal-card,
body:not(.admin-page) .modal.size-guide .modal-card,
body:not(.admin-page) .modal[data-sizeguide] .modal-card {
  position: relative !important;
  z-index: 2 !important;
  width: min(680px, calc(100vw - 32px)) !important;
  max-width: calc(100vw - 32px) !important;
  max-height: calc(100dvh - 36px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
  height: auto !important;
  margin: auto !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  overflow: hidden !important;
  background: #fff !important;
  color: #050505 !important;
  border-radius: 22px !important;
  box-shadow: 0 28px 90px rgba(0,0,0,.35) !important;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Header title is aligned and compact. */
body:not(.admin-page) [data-size-guide] .modal-card > h2,
body:not(.admin-page) [data-size-guide] .size-guide-card > h2,
body:not(.admin-page) [data-sizeguide] .modal-card > h2,
body:not(.admin-page) .size-guide-modal .modal-card > h2,
body:not(.admin-page) .sizeguide-modal .modal-card > h2,
body:not(.admin-page) .modal.size-guide .modal-card > h2,
body:not(.admin-page) .modal[data-sizeguide] .modal-card > h2 {
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 22px 74px 16px 24px !important;
  background: #020202 !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  font-size: clamp(26px, 3vw, 38px) !important;
  line-height: 1 !important;
  letter-spacing: -.04em !important;
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
}

/* Close button always top-right and clickable. */
body:not(.admin-page) [data-size-guide] .x,
body:not(.admin-page) [data-sizeguide] .x,
body:not(.admin-page) .size-guide-modal .x,
body:not(.admin-page) .sizeguide-modal .x,
body:not(.admin-page) .modal.size-guide .x,
body:not(.admin-page) .modal[data-sizeguide] .x,
body:not(.admin-page) [data-close-size-guide],
body:not(.admin-page) [data-close-sizeguide] {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  z-index: 20 !important;
  display: grid !important;
  place-items: center !important;
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  min-height: 46px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(0,0,0,.12) !important;
  background: #fff !important;
  color: #000 !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.20) !important;
  font-size: 22px !important;
  line-height: 1 !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  touch-action: manipulation !important;
}

/* Image wrapper is centered and scrollable if needed. */
body:not(.admin-page) [data-size-guide] .size-guide-body,
body:not(.admin-page) [data-size-guide] .sizeguide-body,
body:not(.admin-page) [data-size-guide] .modal-body,
body:not(.admin-page) [data-sizeguide] .size-guide-body,
body:not(.admin-page) [data-sizeguide] .sizeguide-body,
body:not(.admin-page) [data-sizeguide] .modal-body,
body:not(.admin-page) .size-guide-modal .modal-body,
body:not(.admin-page) .sizeguide-modal .modal-body,
body:not(.admin-page) .modal.size-guide .modal-body,
body:not(.admin-page) .modal[data-sizeguide] .modal-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
  display: grid !important;
  place-items: center !important;
  padding: 22px !important;
  background: #fff !important;
}

/* Size guide image itself. */
body:not(.admin-page) [data-size-guide] img,
body:not(.admin-page) [data-sizeguide] img,
body:not(.admin-page) .size-guide-modal img,
body:not(.admin-page) .sizeguide-modal img,
body:not(.admin-page) .modal.size-guide img,
body:not(.admin-page) .modal[data-sizeguide] img {
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: calc(100dvh - 160px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
  margin: 0 auto !important;
  object-fit: contain !important;
  object-position: center center !important;
  background: #fff !important;
  border-radius: 0 !important;
  transform: none !important;
}

/* Fallback for size guide image that is inserted directly without a modal-body wrapper. */
body:not(.admin-page) [data-size-guide] .modal-card > img,
body:not(.admin-page) [data-sizeguide] .modal-card > img,
body:not(.admin-page) .size-guide-modal .modal-card > img,
body:not(.admin-page) .sizeguide-modal .modal-card > img,
body:not(.admin-page) .modal.size-guide .modal-card > img,
body:not(.admin-page) .modal[data-sizeguide] .modal-card > img {
  padding: 22px !important;
  box-sizing: border-box !important;
}

/* Mobile: image and card are centered, not stuck to bottom. */
@media (max-width: 740px) {
  body:not(.admin-page) [data-size-guide],
  body:not(.admin-page) [data-sizeguide],
  body:not(.admin-page) .size-guide-modal,
  body:not(.admin-page) .sizeguide-modal,
  body:not(.admin-page) .modal.size-guide,
  body:not(.admin-page) .modal[data-sizeguide] {
    align-items: center !important;
    justify-content: center !important;
    padding: max(14px, env(safe-area-inset-top)) 12px max(14px, env(safe-area-inset-bottom)) !important;
  }

  body:not(.admin-page) [data-size-guide] .modal-card,
  body:not(.admin-page) [data-size-guide] .size-guide-card,
  body:not(.admin-page) [data-sizeguide] .modal-card,
  body:not(.admin-page) [data-sizeguide] .size-guide-card,
  body:not(.admin-page) .size-guide-modal .modal-card,
  body:not(.admin-page) .sizeguide-modal .modal-card,
  body:not(.admin-page) .modal.size-guide .modal-card,
  body:not(.admin-page) .modal[data-sizeguide] .modal-card {
    width: min(390px, calc(100vw - 24px)) !important;
    max-width: calc(100vw - 24px) !important;
    max-height: calc(100dvh - 28px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    border-radius: 20px !important;
  }

  body:not(.admin-page) [data-size-guide] .modal-card > h2,
  body:not(.admin-page) [data-sizeguide] .modal-card > h2,
  body:not(.admin-page) .size-guide-modal .modal-card > h2,
  body:not(.admin-page) .sizeguide-modal .modal-card > h2,
  body:not(.admin-page) .modal.size-guide .modal-card > h2,
  body:not(.admin-page) .modal[data-sizeguide] .modal-card > h2 {
    padding: 18px 64px 14px 18px !important;
    font-size: 29px !important;
  }

  body:not(.admin-page) [data-size-guide] .x,
  body:not(.admin-page) [data-sizeguide] .x,
  body:not(.admin-page) .size-guide-modal .x,
  body:not(.admin-page) .sizeguide-modal .x,
  body:not(.admin-page) .modal.size-guide .x,
  body:not(.admin-page) .modal[data-sizeguide] .x,
  body:not(.admin-page) [data-close-size-guide],
  body:not(.admin-page) [data-close-sizeguide] {
    top: 11px !important;
    right: 11px !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
  }

  body:not(.admin-page) [data-size-guide] .size-guide-body,
  body:not(.admin-page) [data-size-guide] .sizeguide-body,
  body:not(.admin-page) [data-size-guide] .modal-body,
  body:not(.admin-page) [data-sizeguide] .size-guide-body,
  body:not(.admin-page) [data-sizeguide] .sizeguide-body,
  body:not(.admin-page) [data-sizeguide] .modal-body,
  body:not(.admin-page) .size-guide-modal .modal-body,
  body:not(.admin-page) .sizeguide-modal .modal-body,
  body:not(.admin-page) .modal.size-guide .modal-body,
  body:not(.admin-page) .modal[data-sizeguide] .modal-body {
    padding: 14px !important;
    place-items: center !important;
  }

  body:not(.admin-page) [data-size-guide] img,
  body:not(.admin-page) [data-sizeguide] img,
  body:not(.admin-page) .size-guide-modal img,
  body:not(.admin-page) .sizeguide-modal img,
  body:not(.admin-page) .modal.size-guide img,
  body:not(.admin-page) .modal[data-sizeguide] img {
    width: 100% !important;
    max-width: 100% !important;
    max-height: calc(100dvh - 130px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    margin: 0 auto !important;
  }

  body:not(.admin-page) [data-size-guide] .modal-card > img,
  body:not(.admin-page) [data-sizeguide] .modal-card > img,
  body:not(.admin-page) .size-guide-modal .modal-card > img,
  body:not(.admin-page) .sizeguide-modal .modal-card > img,
  body:not(.admin-page) .modal.size-guide .modal-card > img,
  body:not(.admin-page) .modal[data-sizeguide] .modal-card > img {
    padding: 14px !important;
  }
}


/* Prevent old hidden-state conflicts. */
body:not(.admin-page) [data-size-guide][hidden],
body:not(.admin-page) [data-sizeguide][hidden],
body:not(.admin-page) .size-guide-modal[hidden],
body:not(.admin-page) .sizeguide-modal[hidden],
body:not(.admin-page) .modal.size-guide[hidden],
body:not(.admin-page) .modal[data-sizeguide][hidden] {
  display: none !important;
}


/* AGS V13 PRODUCT CLICK BLANK FIX — SAFE SIZE GUIDE CONTROL — 2026-06-14
   Emergency fix:
   - Do NOT target every [data-size-guide] element because it may be a trigger/product element.
   - Only real modal containers are controlled.
   - Product click/quick view can load normally again.
*/
body:not(.admin-page) .size-guide-modal:not(.open),
body:not(.admin-page) .sizeguide-modal:not(.open),
body:not(.admin-page) .modal.size-guide:not(.open),
body:not(.admin-page) .modal[data-sizeguide]:not(.open),
body:not(.admin-page) [data-size-guide-modal]:not(.open),
body:not(.admin-page) [data-sizeguide-modal]:not(.open) {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

body:not(.admin-page) .size-guide-modal.open,
body:not(.admin-page) .sizeguide-modal.open,
body:not(.admin-page) .modal.size-guide.open,
body:not(.admin-page) .modal[data-sizeguide].open,
body:not(.admin-page) [data-size-guide-modal].open,
body:not(.admin-page) [data-sizeguide-modal].open {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Center real size-guide modal safely. */
body:not(.admin-page) .size-guide-modal.open,
body:not(.admin-page) .sizeguide-modal.open,
body:not(.admin-page) .modal.size-guide.open,
body:not(.admin-page) .modal[data-sizeguide].open,
body:not(.admin-page) [data-size-guide-modal].open,
body:not(.admin-page) [data-sizeguide-modal].open {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483300 !important;
  width: 100vw !important;
  height: 100dvh !important;
  padding: max(14px, env(safe-area-inset-top)) 12px max(14px, env(safe-area-inset-bottom)) !important;
  overflow: hidden !important;
}

body:not(.admin-page) .size-guide-modal.open > .shade,
body:not(.admin-page) .sizeguide-modal.open > .shade,
body:not(.admin-page) .modal.size-guide.open > .shade,
body:not(.admin-page) .modal[data-sizeguide].open > .shade,
body:not(.admin-page) [data-size-guide-modal].open > .shade,
body:not(.admin-page) [data-sizeguide-modal].open > .shade {
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  background: rgba(0,0,0,.58) !important;
  backdrop-filter: blur(6px) saturate(108%) !important;
  -webkit-backdrop-filter: blur(6px) saturate(108%) !important;
}

body:not(.admin-page) .size-guide-modal.open .modal-card,
body:not(.admin-page) .sizeguide-modal.open .modal-card,
body:not(.admin-page) .modal.size-guide.open .modal-card,
body:not(.admin-page) .modal[data-sizeguide].open .modal-card,
body:not(.admin-page) [data-size-guide-modal].open .modal-card,
body:not(.admin-page) [data-sizeguide-modal].open .modal-card {
  position: relative !important;
  z-index: 2 !important;
  width: min(390px, calc(100vw - 24px)) !important;
  max-width: calc(100vw - 24px) !important;
  max-height: calc(100dvh - 28px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
  margin: auto !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  background: #fff !important;
  border-radius: 20px !important;
  box-shadow: 0 28px 90px rgba(0,0,0,.35) !important;
}

body:not(.admin-page) .size-guide-modal.open .modal-body,
body:not(.admin-page) .sizeguide-modal.open .modal-body,
body:not(.admin-page) .modal.size-guide.open .modal-body,
body:not(.admin-page) .modal[data-sizeguide].open .modal-body,
body:not(.admin-page) [data-size-guide-modal].open .modal-body,
body:not(.admin-page) [data-sizeguide-modal].open .modal-body {
  display: grid !important;
  place-items: center !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  padding: 14px !important;
}

body:not(.admin-page) .size-guide-modal.open img,
body:not(.admin-page) .sizeguide-modal.open img,
body:not(.admin-page) .modal.size-guide.open img,
body:not(.admin-page) .modal[data-sizeguide].open img,
body:not(.admin-page) [data-size-guide-modal].open img,
body:not(.admin-page) [data-sizeguide-modal].open img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: calc(100dvh - 130px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
  object-fit: contain !important;
  object-position: center center !important;
  margin: 0 auto !important;
}

/* Product/quick-view overlays must never be hidden by size-guide safety rules. */
body:not(.admin-page) .quick-view.open,
body:not(.admin-page) .quick-modal.open,
body:not(.admin-page) [data-quick].open,
body:not(.admin-page) [data-quick-modal].open,
body:not(.admin-page) .product-modal.open {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}


/* AGS V13 SIZE GUIDE PROFESSIONAL FINAL FIX — 2026-06-14
   Clean, explicit size guide behavior:
   - hidden by default
   - only opens on [data-size-guide-open]
   - centered modal on mobile/desktop
   - no product/quick-view interference
*/
body:not(.admin-page) #ags-size-guide-modal,
body:not(.admin-page) .modal.size-guide-modal[data-size-guide-modal] {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483300 !important;
  width: 100vw !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  padding: max(16px, env(safe-area-inset-top)) 14px max(16px, env(safe-area-inset-bottom)) !important;
  overflow: hidden !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  background: transparent !important;
}

body:not(.admin-page) #ags-size-guide-modal.open,
body:not(.admin-page) .modal.size-guide-modal[data-size-guide-modal].open {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

body:not(.admin-page) #ags-size-guide-modal[hidden]:not(.open),
body:not(.admin-page) .modal.size-guide-modal[data-size-guide-modal][hidden]:not(.open) {
  display: none !important;
}

body:not(.admin-page) #ags-size-guide-modal > .shade,
body:not(.admin-page) .modal.size-guide-modal[data-size-guide-modal] > .shade {
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  background: rgba(0,0,0,.58) !important;
  backdrop-filter: blur(6px) saturate(108%) !important;
  -webkit-backdrop-filter: blur(6px) saturate(108%) !important;
  pointer-events: auto !important;
}

body:not(.admin-page) #ags-size-guide-modal .size-guide-card,
body:not(.admin-page) .modal.size-guide-modal[data-size-guide-modal] .size-guide-card {
  position: relative !important;
  z-index: 2 !important;
  width: min(560px, calc(100vw - 28px)) !important;
  max-width: calc(100vw - 28px) !important;
  max-height: calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
  margin: auto !important;
  padding: 0 !important;
  background: #fff !important;
  color: #050505 !important;
  border-radius: 22px !important;
  box-shadow: 0 28px 90px rgba(0,0,0,.36) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

body:not(.admin-page) #ags-size-guide-modal .size-guide-head,
body:not(.admin-page) .modal.size-guide-modal[data-size-guide-modal] .size-guide-head {
  flex: 0 0 auto !important;
  background: #020202 !important;
  color: #fff !important;
  padding: 18px 68px 16px 20px !important;
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
}

body:not(.admin-page) #ags-size-guide-modal .size-guide-head small,
body:not(.admin-page) .modal.size-guide-modal[data-size-guide-modal] .size-guide-head small {
  display: block !important;
  color: rgba(255,255,255,.62) !important;
  -webkit-text-fill-color: rgba(255,255,255,.62) !important;
  font-size: 10px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  margin: 0 0 8px !important;
}

body:not(.admin-page) #ags-size-guide-modal .size-guide-head h2,
body:not(.admin-page) .modal.size-guide-modal[data-size-guide-modal] .size-guide-head h2 {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  margin: 0 !important;
  font-size: clamp(28px, 4vw, 42px) !important;
  line-height: .95 !important;
  letter-spacing: -.04em !important;
}

body:not(.admin-page) #ags-size-guide-modal .x,
body:not(.admin-page) .modal.size-guide-modal[data-size-guide-modal] .x,
body:not(.admin-page) #ags-size-guide-modal [data-size-guide-close],
body:not(.admin-page) .modal.size-guide-modal[data-size-guide-modal] [data-size-guide-close] {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  z-index: 20 !important;
  display: grid !important;
  place-items: center !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(0,0,0,.12) !important;
  background: #fff !important;
  color: #000 !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.22) !important;
  font-size: 22px !important;
  line-height: 1 !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  touch-action: manipulation !important;
}

body:not(.admin-page) #ags-size-guide-modal .size-guide-body,
body:not(.admin-page) .modal.size-guide-modal[data-size-guide-modal] .size-guide-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
  display: grid !important;
  place-items: center !important;
  padding: 18px !important;
  background: #fff !important;
}

body:not(.admin-page) #ags-size-guide-modal .size-guide-body img,
body:not(.admin-page) .modal.size-guide-modal[data-size-guide-modal] .size-guide-body img {
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: calc(100dvh - 170px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
  object-fit: contain !important;
  object-position: center center !important;
  margin: 0 auto !important;
  background: #fff !important;
}

/* Size Guide trigger is just a button, never a modal container. */
body:not(.admin-page) [data-size-guide-open] {
  cursor: pointer !important;
  pointer-events: auto !important;
}

@media (max-width: 740px) {
  body:not(.admin-page) #ags-size-guide-modal,
  body:not(.admin-page) .modal.size-guide-modal[data-size-guide-modal] {
    padding: max(14px, env(safe-area-inset-top)) 12px max(14px, env(safe-area-inset-bottom)) !important;
  }

  body:not(.admin-page) #ags-size-guide-modal .size-guide-card,
  body:not(.admin-page) .modal.size-guide-modal[data-size-guide-modal] .size-guide-card {
    width: min(392px, calc(100vw - 24px)) !important;
    max-width: calc(100vw - 24px) !important;
    max-height: calc(100dvh - 28px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    border-radius: 20px !important;
  }

  body:not(.admin-page) #ags-size-guide-modal .size-guide-head,
  body:not(.admin-page) .modal.size-guide-modal[data-size-guide-modal] .size-guide-head {
    padding: 16px 62px 14px 18px !important;
  }

  body:not(.admin-page) #ags-size-guide-modal .size-guide-head h2,
  body:not(.admin-page) .modal.size-guide-modal[data-size-guide-modal] .size-guide-head h2 {
    font-size: 30px !important;
  }

  body:not(.admin-page) #ags-size-guide-modal .x,
  body:not(.admin-page) .modal.size-guide-modal[data-size-guide-modal] .x {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    top: 11px !important;
    right: 11px !important;
  }

  body:not(.admin-page) #ags-size-guide-modal .size-guide-body,
  body:not(.admin-page) .modal.size-guide-modal[data-size-guide-modal] .size-guide-body {
    padding: 14px !important;
  }

  body:not(.admin-page) #ags-size-guide-modal .size-guide-body img,
  body:not(.admin-page) .modal.size-guide-modal[data-size-guide-modal] .size-guide-body img {
    width: 100% !important;
    max-width: 100% !important;
    max-height: calc(100dvh - 150px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
  }
}


/* AGS V13 PRODUCT DETAIL BUY NOW CHECKOUT CORE RESET — 2026-06-14
   Fix:
   - Bayar Langsung on #product-detail must open checkout reliably.
   - Size Guide overlay stays normal full-screen, not oval.
   - Cart security note stays removed.
   - Checkout/payment remains scrollable and clickable.
*/

/* Remove the cart note requested earlier. */
body:not(.admin-page) .cart-trust-note,
body:not(.admin-page) [data-cart] .cart-trust-note {
  display: none !important;
}

/* Size Guide: modal background itself is the overlay; child shade disabled to prevent giant oval. */
body:not(.admin-page) #ags-size-guide-modal:not(.open),
body:not(.admin-page) .modal.size-guide-modal[data-size-guide-modal]:not(.open) {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

body:not(.admin-page) #ags-size-guide-modal.open,
body:not(.admin-page) .modal.size-guide-modal[data-size-guide-modal].open {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483300 !important;
  width: 100vw !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: max(18px, env(safe-area-inset-top)) 16px max(18px, env(safe-area-inset-bottom)) !important;
  overflow: hidden !important;
  background: rgba(0,0,0,.58) !important;
  backdrop-filter: blur(6px) saturate(108%) !important;
  -webkit-backdrop-filter: blur(6px) saturate(108%) !important;
  border-radius: 0 !important;
  clip-path: none !important;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

body:not(.admin-page) #ags-size-guide-modal > .shade,
body:not(.admin-page) .modal.size-guide-modal[data-size-guide-modal] > .shade {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-radius: 0 !important;
  clip-path: none !important;
  transform: none !important;
}

body:not(.admin-page) #ags-size-guide-modal.open .size-guide-card,
body:not(.admin-page) #ags-size-guide-modal.open .modal-card,
body:not(.admin-page) .modal.size-guide-modal[data-size-guide-modal].open .size-guide-card,
body:not(.admin-page) .modal.size-guide-modal[data-size-guide-modal].open .modal-card {
  position: relative !important;
  inset: auto !important;
  z-index: 2 !important;
  width: min(560px, calc(100vw - 32px)) !important;
  max-width: calc(100vw - 32px) !important;
  max-height: calc(100dvh - 36px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
  margin: auto !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  background: #fff !important;
  color: #050505 !important;
  border-radius: 22px !important;
  box-shadow: 0 28px 90px rgba(0,0,0,.36) !important;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Checkout: hidden by default, visible and above all layers when open. */
body:not(.admin-page) [data-checkout]:not(.open),
body:not(.admin-page) .modal[data-checkout]:not(.open) {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

body:not(.admin-page) [data-checkout].open,
body:not(.admin-page) .modal[data-checkout].open {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483500 !important;
  width: 100vw !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom)) !important;
  background: transparent !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

body:not(.admin-page) [data-checkout].open > .shade,
body:not(.admin-page) .modal[data-checkout].open > .shade {
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  display: block !important;
  pointer-events: none !important;
  background: rgba(0,0,0,.56) !important;
  backdrop-filter: blur(6px) saturate(108%) !important;
  -webkit-backdrop-filter: blur(6px) saturate(108%) !important;
}

body:not(.admin-page) [data-checkout].open .checkout-card,
body:not(.admin-page) [data-checkout].open .modal-card,
body:not(.admin-page) .modal[data-checkout].open .checkout-card,
body:not(.admin-page) .modal[data-checkout].open .modal-card {
  position: relative !important;
  z-index: 30 !important;
  display: flex !important;
  flex-direction: column !important;
  width: min(820px, calc(100vw - 32px)) !important;
  height: min(860px, calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom))) !important;
  max-height: calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
  min-height: 0 !important;
  overflow: hidden !important;
  background: #fff !important;
  color: #050505 !important;
  border-radius: 24px !important;
  box-shadow: 0 28px 90px rgba(0,0,0,.32) !important;
  pointer-events: auto !important;
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}

/* Checkout header stays black and close button clickable. */
body:not(.admin-page) .modal[data-checkout] .checkout-top {
  flex: 0 0 auto !important;
  background: #020202 !important;
  color: #fff !important;
  padding: 26px 86px 20px 30px !important;
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

body:not(.admin-page) .modal[data-checkout] .checkout-top h2 {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  margin: 0 !important;
  font-size: clamp(30px, 3vw, 42px) !important;
  line-height: 1 !important;
  letter-spacing: -.035em !important;
}

body:not(.admin-page) .modal[data-checkout] .checkout-top h2::after {
  content: "" !important;
  display: none !important;
}

body:not(.admin-page) .modal[data-checkout] button.x[data-close-checkout],
body:not(.admin-page) .modal[data-checkout] [data-close-checkout].x,
body:not(.admin-page) .modal[data-checkout] .checkout-card > .x {
  z-index: 60 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Scroll containers. */
body:not(.admin-page) .modal[data-checkout].open form[data-checkout-form],
body:not(.admin-page) .modal[data-checkout].open [data-payment-result]:not(.hidden),
body:not(.admin-page) .modal[data-checkout].open .payment-result-pro:not(.hidden) {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
  overscroll-behavior: contain !important;
  background: #fff !important;
  padding: 22px 28px calc(34px + env(safe-area-inset-bottom)) !important;
  pointer-events: auto !important;
}

body:not(.admin-page) .modal[data-checkout].ags-checkout-payment-view form[data-checkout-form],
body:not(.admin-page) .modal[data-checkout] .checkout-card.is-payment-view form[data-checkout-form] {
  display: none !important;
  flex: 0 0 auto !important;
  height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
}

body:not(.admin-page) .modal[data-checkout].ags-checkout-payment-view [data-payment-result],
body:not(.admin-page) .modal[data-checkout] [data-payment-result]:not(.hidden) {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Countdown label same scale as timer. */
body:not(.admin-page) .modal[data-checkout] [data-payment-result] .payment-countdown-pill,
body:not(.admin-page) .modal[data-checkout] [data-payment-result] [data-payment-countdown-wrap] {
  background: #020202 !important;
  color: #fff !important;
  border-color: #020202 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
}

body:not(.admin-page) .modal[data-checkout] [data-payment-result] .payment-countdown-pill span,
body:not(.admin-page) .modal[data-checkout] [data-payment-result] [data-payment-countdown-wrap] span,
body:not(.admin-page) .modal[data-checkout] [data-payment-result] .payment-countdown-pill b,
body:not(.admin-page) .modal[data-checkout] [data-payment-result] [data-payment-countdown-wrap] b,
body:not(.admin-page) .modal[data-checkout] [data-payment-result] [data-payment-countdown] {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  font-size: 20px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  max-width: none !important;
  overflow: visible !important;
  white-space: nowrap !important;
}

@media (max-width: 740px) {
  body:not(.admin-page) [data-checkout].open,
  body:not(.admin-page) .modal[data-checkout].open {
    align-items: stretch !important;
    justify-content: stretch !important;
    padding: 0 !important;
  }

  body:not(.admin-page) [data-checkout].open .checkout-card,
  body:not(.admin-page) [data-checkout].open .modal-card,
  body:not(.admin-page) .modal[data-checkout].open .checkout-card,
  body:not(.admin-page) .modal[data-checkout].open .modal-card {
    width: 100vw !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
  }

  body:not(.admin-page) .modal[data-checkout] .checkout-top {
    padding: calc(22px + env(safe-area-inset-top)) 74px 18px 18px !important;
  }

  body:not(.admin-page) .modal[data-checkout] [data-payment-result] .payment-countdown-pill span,
  body:not(.admin-page) .modal[data-checkout] [data-payment-result] [data-payment-countdown-wrap] span,
  body:not(.admin-page) .modal[data-checkout] [data-payment-result] .payment-countdown-pill b,
  body:not(.admin-page) .modal[data-checkout] [data-payment-result] [data-payment-countdown-wrap] b,
  body:not(.admin-page) .modal[data-checkout] [data-payment-result] [data-payment-countdown] {
    font-size: 16px !important;
  }

  body:not(.admin-page) #ags-size-guide-modal.open .size-guide-card,
  body:not(.admin-page) #ags-size-guide-modal.open .modal-card,
  body:not(.admin-page) .modal.size-guide-modal[data-size-guide-modal].open .size-guide-card,
  body:not(.admin-page) .modal.size-guide-modal[data-size-guide-modal].open .modal-card {
    width: min(392px, calc(100vw - 24px)) !important;
    max-width: calc(100vw - 24px) !important;
    max-height: calc(100dvh - 28px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
  }
}


/* AGS V13 FIX PRODUCTFROM SCOPE + BUY NOW CHECKOUT — 2026-06-14 */
body:not(.admin-page) [data-checkout].open,
body:not(.admin-page) .modal[data-checkout].open {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  z-index: 2147483500 !important;
}

body:not(.admin-page) [data-checkout].open > .shade,
body:not(.admin-page) .modal[data-checkout].open > .shade {
  pointer-events: none !important;
}

body:not(.admin-page) [data-checkout].open .checkout-card,
body:not(.admin-page) [data-checkout].open .modal-card,
body:not(.admin-page) .modal[data-checkout].open .checkout-card,
body:not(.admin-page) .modal[data-checkout].open .modal-card {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: none !important;
  filter: none !important;
}

body:not(.admin-page) .cart-trust-note,
body:not(.admin-page) [data-cart] .cart-trust-note {
  display: none !important;
}


/* AGS V13 BUY NOW SCOPE CACHE HARD REPAIR V2 — 20260614-v13-buynow-scope-cache-hard-repair-v2 */
body:not(.admin-page) [data-checkout].open,
body:not(.admin-page) .modal[data-checkout].open {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  z-index: 2147483500 !important;
}

body:not(.admin-page) [data-checkout].open > .shade,
body:not(.admin-page) .modal[data-checkout].open > .shade {
  pointer-events: none !important;
}

body:not(.admin-page) [data-checkout].open .checkout-card,
body:not(.admin-page) [data-checkout].open .modal-card,
body:not(.admin-page) .modal[data-checkout].open .checkout-card,
body:not(.admin-page) .modal[data-checkout].open .modal-card {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: none !important;
  filter: none !important;
}

body:not(.admin-page) .cart-trust-note,
body:not(.admin-page) [data-cart] .cart-trust-note {
  display: none !important;
}


/* AGS V13 CHECKOUT NO-FLICKER CONFLICT CLEAN — 2026-06-14
   Root cause: old checkout controllers were fighting over inline style on .shade.
   This final layer uses NO backdrop-filter and hides checkout shade so card never flickers.
*/
body:not(.admin-page) .cart-trust-note,
body:not(.admin-page) [data-cart] .cart-trust-note {
  display: none !important;
}

/* Checkout hidden when closed. */
body:not(.admin-page) [data-checkout]:not(.open),
body:not(.admin-page) .modal[data-checkout]:not(.open) {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Checkout modal owns the dark background. No separate blur/shade. */
body:not(.admin-page) [data-checkout].open,
body:not(.admin-page) .modal[data-checkout].open {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483600 !important;
  width: 100vw !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom)) !important;
  overflow: hidden !important;
  background: rgba(0,0,0,.58) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  isolation: isolate !important;
}

/* Disable checkout shade completely so it cannot blink above the card. */
body:not(.admin-page) [data-checkout].open > .shade,
body:not(.admin-page) .modal[data-checkout].open > .shade,
body:not(.admin-page) [data-checkout].open .shade {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  z-index: 0 !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;
  transform: none !important;
}

/* Hide competing overlay shades while checkout is active. */
body:not(.admin-page):has([data-checkout].open) [data-cart] > .shade,
body:not(.admin-page):has([data-checkout].open) [data-login] > .shade,
body:not(.admin-page):has([data-checkout].open) [data-quick] > .shade,
body:not(.admin-page):has([data-checkout].open) [data-search-modal] > .shade,
body:not(.admin-page):has([data-checkout].open) #ags-size-guide-modal > .shade,
body:not(.admin-page):has([data-checkout].open) .size-guide-modal > .shade,
body:not(.admin-page):has([data-checkout].open) .quick-view > .shade,
body:not(.admin-page):has([data-checkout].open) .quick-modal > .shade {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;
}

/* Checkout card is the only foreground layer. */
body:not(.admin-page) [data-checkout].open > .checkout-card,
body:not(.admin-page) [data-checkout].open > .modal-card,
body:not(.admin-page) [data-checkout].open .checkout-card,
body:not(.admin-page) [data-checkout].open .modal-card,
body:not(.admin-page) .modal[data-checkout].open > .checkout-card,
body:not(.admin-page) .modal[data-checkout].open > .modal-card,
body:not(.admin-page) .modal[data-checkout].open .checkout-card,
body:not(.admin-page) .modal[data-checkout].open .modal-card {
  position: relative !important;
  z-index: 2147483601 !important;
  width: min(820px, calc(100vw - 32px)) !important;
  height: min(860px, calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom))) !important;
  max-height: calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  background: #fff !important;
  color: #050505 !important;
  border-radius: 24px !important;
  box-shadow: 0 28px 90px rgba(0,0,0,.38) !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  isolation: isolate !important;
}

body:not(.admin-page) [data-checkout].open .checkout-card *,
body:not(.admin-page) [data-checkout].open .modal-card *,
body:not(.admin-page) .modal[data-checkout].open .checkout-card *,
body:not(.admin-page) .modal[data-checkout].open .modal-card * {
  pointer-events: auto !important;
}

body:not(.admin-page) [data-checkout].open form[data-checkout-form],
body:not(.admin-page) [data-checkout].open [data-payment-result]:not(.hidden),
body:not(.admin-page) .modal[data-checkout].open form[data-checkout-form],
body:not(.admin-page) .modal[data-checkout].open [data-payment-result]:not(.hidden) {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
  overscroll-behavior: contain !important;
}

body:not(.admin-page) [data-checkout].open [data-close-checkout],
body:not(.admin-page) [data-checkout].open button.x,
body:not(.admin-page) .modal[data-checkout].open [data-close-checkout],
body:not(.admin-page) .modal[data-checkout].open button.x {
  z-index: 2147483602 !important;
  pointer-events: auto !important;
  visibility: visible !important;
  opacity: 1 !important;
  cursor: pointer !important;
  touch-action: manipulation !important;
}

@media (max-width: 740px) {
  body:not(.admin-page) [data-checkout].open,
  body:not(.admin-page) .modal[data-checkout].open {
    align-items: stretch !important;
    justify-content: stretch !important;
    padding: 0 !important;
  }

  body:not(.admin-page) [data-checkout].open > .checkout-card,
  body:not(.admin-page) [data-checkout].open > .modal-card,
  body:not(.admin-page) [data-checkout].open .checkout-card,
  body:not(.admin-page) [data-checkout].open .modal-card,
  body:not(.admin-page) .modal[data-checkout].open > .checkout-card,
  body:not(.admin-page) .modal[data-checkout].open > .modal-card,
  body:not(.admin-page) .modal[data-checkout].open .checkout-card,
  body:not(.admin-page) .modal[data-checkout].open .modal-card {
    width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
  }
}


/* AGS V13 ORDER NUMBER SIZE ONLY — 2026-06-14
   Focus only: reduce payment success order number size.
*/
body:not(.admin-page) .modal[data-checkout] [data-payment-result] .payment-created-copy strong,
body:not(.admin-page) .modal[data-checkout] [data-payment-result] .payment-created-card-final .payment-created-copy strong,
body:not(.admin-page) .modal[data-checkout] [data-payment-result] .payment-created-card-final strong:first-of-type {
  font-size: clamp(28px, 3.2vw, 40px) !important;
  line-height: .96 !important;
  letter-spacing: -.055em !important;
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
}

/* Mobile: make order code compact and cleaner. */
@media (max-width: 740px) {
  body:not(.admin-page) .modal[data-checkout] [data-payment-result] .payment-created-copy strong,
  body:not(.admin-page) .modal[data-checkout] [data-payment-result] .payment-created-card-final .payment-created-copy strong,
  body:not(.admin-page) .modal[data-checkout] [data-payment-result] .payment-created-card-final strong:first-of-type {
    font-size: clamp(24px, 7.2vw, 30px) !important;
    line-height: 1 !important;
    letter-spacing: -.045em !important;
  }

  body:not(.admin-page) .modal[data-checkout] [data-payment-result] .payment-created-copy {
    gap: 8px !important;
  }
}

/* Very narrow mobile: prevent the order number from dominating the card. */
@media (max-width: 390px) {
  body:not(.admin-page) .modal[data-checkout] [data-payment-result] .payment-created-copy strong,
  body:not(.admin-page) .modal[data-checkout] [data-payment-result] .payment-created-card-final .payment-created-copy strong,
  body:not(.admin-page) .modal[data-checkout] [data-payment-result] .payment-created-card-final strong:first-of-type {
    font-size: 25px !important;
  }
}


/* AGS V13 CHECKOUT + CART HEADER ONLY — 2026-06-14
   Focus only:
   1) Make checkout header cleaner/professional.
   2) Make cart drawer header black to match website.
   No checkout logic / slider / product / size guide changes.
*/

/* Checkout header refinement */
body:not(.admin-page) .modal[data-checkout] .checkout-top,
body:not(.admin-page) [data-checkout] .checkout-top {
  background: #020202 !important;
  color: #fff !important;
  min-height: 92px !important;
  padding: 24px 88px 20px 28px !important;
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.14) !important;
}

body:not(.admin-page) .modal[data-checkout] .checkout-kicker,
body:not(.admin-page) [data-checkout] .checkout-kicker {
  display: inline-flex !important;
  width: max-content !important;
  max-width: 100% !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 22px !important;
  padding: 6px 10px !important;
  margin: 0 0 9px !important;
  border-radius: 999px !important;
  background: #ffd21f !important;
  color: #050505 !important;
  -webkit-text-fill-color: #050505 !important;
  font-size: 9px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
}

body:not(.admin-page) .modal[data-checkout] .checkout-top h2,
body:not(.admin-page) [data-checkout] .checkout-top h2 {
  margin: 0 !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  font-size: clamp(31px, 3vw, 42px) !important;
  line-height: .94 !important;
  letter-spacing: -.045em !important;
  text-transform: uppercase !important;
}

body:not(.admin-page) .modal[data-checkout] .checkout-top p,
body:not(.admin-page) [data-checkout] .checkout-top p {
  margin: 8px 0 0 !important;
  color: rgba(255,255,255,.72) !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
  max-width: 560px !important;
}

/* Checkout close button stays visually balanced on black header */
body:not(.admin-page) .modal[data-checkout] button.x[data-close-checkout],
body:not(.admin-page) .modal[data-checkout] [data-close-checkout].x,
body:not(.admin-page) [data-checkout] button.x[data-close-checkout],
body:not(.admin-page) [data-checkout] [data-close-checkout].x {
  top: 20px !important;
  right: 20px !important;
  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;
  min-height: 52px !important;
  background: #fff !important;
  color: #000 !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.24) !important;
}

/* Cart drawer header: black like the website header */
body:not(.admin-page) [data-cart] .drawer-head,
body:not(.admin-page) [data-cart] .cart-head,
body:not(.admin-page) [data-cart] .cart-header,
body:not(.admin-page) [data-cart] header,
body:not(.admin-page) .cart-drawer .drawer-head,
body:not(.admin-page) .cart-drawer .cart-head,
body:not(.admin-page) .cart-drawer .cart-header {
  background: #020202 !important;
  color: #fff !important;
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.18) !important;
}

body:not(.admin-page) [data-cart] .drawer-head h2,
body:not(.admin-page) [data-cart] .cart-head h2,
body:not(.admin-page) [data-cart] .cart-header h2,
body:not(.admin-page) [data-cart] header h2,
body:not(.admin-page) [data-cart] .drawer-head h3,
body:not(.admin-page) [data-cart] .cart-head h3,
body:not(.admin-page) [data-cart] .cart-header h3,
body:not(.admin-page) [data-cart] header h3,
body:not(.admin-page) .cart-drawer .drawer-head h2,
body:not(.admin-page) .cart-drawer .cart-head h2,
body:not(.admin-page) .cart-drawer .cart-header h2 {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  font-size: clamp(28px, 2.8vw, 38px) !important;
  line-height: 1 !important;
  letter-spacing: -.035em !important;
  margin: 0 !important;
}

body:not(.admin-page) [data-cart] .drawer-head .x,
body:not(.admin-page) [data-cart] .cart-head .x,
body:not(.admin-page) [data-cart] .cart-header .x,
body:not(.admin-page) [data-cart] header .x,
body:not(.admin-page) [data-cart] [data-close-cart],
body:not(.admin-page) .cart-drawer .drawer-head .x,
body:not(.admin-page) .cart-drawer .cart-head .x,
body:not(.admin-page) .cart-drawer .cart-header .x {
  background: #fff !important;
  color: #000 !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.20) !important;
}

@media (max-width: 740px) {
  body:not(.admin-page) .modal[data-checkout] .checkout-top,
  body:not(.admin-page) [data-checkout] .checkout-top {
    min-height: 78px !important;
    padding: calc(16px + env(safe-area-inset-top)) 74px 15px 18px !important;
  }

  body:not(.admin-page) .modal[data-checkout] .checkout-kicker,
  body:not(.admin-page) [data-checkout] .checkout-kicker {
    min-height: 18px !important;
    padding: 5px 9px !important;
    margin-bottom: 7px !important;
    font-size: 8px !important;
    letter-spacing: .105em !important;
  }

  body:not(.admin-page) .modal[data-checkout] .checkout-top h2,
  body:not(.admin-page) [data-checkout] .checkout-top h2 {
    font-size: 28px !important;
    line-height: .95 !important;
  }

  body:not(.admin-page) .modal[data-checkout] .checkout-top p,
  body:not(.admin-page) [data-checkout] .checkout-top p {
    font-size: 10.5px !important;
    line-height: 1.3 !important;
    margin-top: 6px !important;
  }

  body:not(.admin-page) .modal[data-checkout] button.x[data-close-checkout],
  body:not(.admin-page) .modal[data-checkout] [data-close-checkout].x,
  body:not(.admin-page) [data-checkout] button.x[data-close-checkout],
  body:not(.admin-page) [data-checkout] [data-close-checkout].x {
    top: calc(14px + env(safe-area-inset-top)) !important;
    right: 14px !important;
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;
  }

  body:not(.admin-page) [data-cart] .drawer-head,
  body:not(.admin-page) [data-cart] .cart-head,
  body:not(.admin-page) [data-cart] .cart-header,
  body:not(.admin-page) [data-cart] header,
  body:not(.admin-page) .cart-drawer .drawer-head,
  body:not(.admin-page) .cart-drawer .cart-head,
  body:not(.admin-page) .cart-drawer .cart-header {
    min-height: 92px !important;
    padding-top: calc(24px + env(safe-area-inset-top)) !important;
  }

  body:not(.admin-page) [data-cart] .drawer-head h2,
  body:not(.admin-page) [data-cart] .cart-head h2,
  body:not(.admin-page) [data-cart] .cart-header h2,
  body:not(.admin-page) [data-cart] header h2,
  body:not(.admin-page) .cart-drawer .drawer-head h2,
  body:not(.admin-page) .cart-drawer .cart-head h2,
  body:not(.admin-page) .cart-drawer .cart-header h2 {
    font-size: 31px !important;
  }
}


/* AGS V13 FINISH BUTTON + VOUCHER CHECK ONLY — 2026-06-14
   Focus only:
   1) Payment finish button width/position.
   2) Voucher input gets a Check Voucher button.
*/

/* Payment finish button: not too wide, centered and cleaner. */
body:not(.admin-page) .modal[data-checkout] [data-payment-result] .payment-actions,
body:not(.admin-page) .modal[data-checkout] [data-payment-result] .payment-footer-actions,
body:not(.admin-page) .modal[data-checkout] [data-payment-result] .clean-payment-footer-actions {
  width: 100% !important;
  max-width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 18px auto 0 !important;
  padding: 0 !important;
  grid-column: 1 / -1 !important;
}

body:not(.admin-page) .modal[data-checkout] [data-payment-result] [data-finish-order],
body:not(.admin-page) .modal[data-checkout] [data-payment-result] .payment-actions [data-finish-order],
body:not(.admin-page) .modal[data-checkout] [data-payment-result] .payment-footer-actions [data-finish-order] {
  width: min(360px, 100%) !important;
  max-width: 360px !important;
  min-width: 0 !important;
  flex: 0 1 360px !important;
  margin: 0 auto !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
  text-align: center !important;
}

/* Voucher check button row in checkout form. */
body:not(.admin-page) .modal[data-checkout] .voucher-field-label {
  display: grid !important;
  gap: 8px !important;
}

body:not(.admin-page) .modal[data-checkout] .voucher-input-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 10px !important;
  align-items: stretch !important;
  width: 100% !important;
}

body:not(.admin-page) .modal[data-checkout] .voucher-input-row input[name="coupon_code"] {
  width: 100% !important;
  min-width: 0 !important;
  height: 48px !important;
  border-radius: 14px !important;
}

body:not(.admin-page) .modal[data-checkout] .voucher-check-btn {
  height: 48px !important;
  min-height: 48px !important;
  min-width: 128px !important;
  padding: 0 18px !important;
  border-radius: 14px !important;
  border: 1px solid #050505 !important;
  background: #050505 !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  font-size: 11px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  letter-spacing: .035em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  touch-action: manipulation !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
}

body:not(.admin-page) .modal[data-checkout] .voucher-check-btn:hover {
  background: #1b1b1b !important;
  border-color: #1b1b1b !important;
}

body:not(.admin-page) .modal[data-checkout] .voucher-check-note {
  display: block !important;
  margin: 0 !important;
  color: rgba(0,0,0,.54) !important;
  font-size: 11px !important;
  line-height: 1.35 !important;
}

body:not(.admin-page) .modal[data-checkout] .voucher-field-label.is-voucher-ok .voucher-check-note {
  color: #0a7d2a !important;
}

body:not(.admin-page) .modal[data-checkout] .voucher-field-label.is-voucher-empty .voucher-check-note {
  color: #d71920 !important;
}

@media (max-width: 740px) {
  body:not(.admin-page) .modal[data-checkout] [data-payment-result] [data-finish-order],
  body:not(.admin-page) .modal[data-checkout] [data-payment-result] .payment-actions [data-finish-order],
  body:not(.admin-page) .modal[data-checkout] [data-payment-result] .payment-footer-actions [data-finish-order] {
    width: 100% !important;
    max-width: 100% !important;
    flex-basis: 100% !important;
  }

  body:not(.admin-page) .modal[data-checkout] .voucher-input-row {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  body:not(.admin-page) .modal[data-checkout] .voucher-check-btn {
    width: 100% !important;
    min-width: 0 !important;
  }
}


/* AGS V13 CART HEADER BLACK + TITLE VISIBLE ONLY — 2026-06-14
   Focus only:
   - Cart drawer top header must be black.
   - "Keranjang" title must be visible.
   - Close button stays clean.
*/

/* Cart drawer header shell */
body:not(.admin-page) [data-cart] .drawer-head,
body:not(.admin-page) [data-cart] .drawer-header,
body:not(.admin-page) [data-cart] .cart-head,
body:not(.admin-page) [data-cart] .cart-header,
body:not(.admin-page) [data-cart] .cart-drawer-head,
body:not(.admin-page) [data-cart] header,
body:not(.admin-page) .cart-drawer .drawer-head,
body:not(.admin-page) .cart-drawer .drawer-header,
body:not(.admin-page) .cart-drawer .cart-head,
body:not(.admin-page) .cart-drawer .cart-header,
body:not(.admin-page) .cart-drawer .cart-drawer-head {
  background: #020202 !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  min-height: 92px !important;
  padding: 28px 88px 22px 34px !important;
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.22) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  position: relative !important;
  z-index: 5 !important;
}

/* Force every possible cart title node to be visible */
body:not(.admin-page) [data-cart] .drawer-head h1,
body:not(.admin-page) [data-cart] .drawer-head h2,
body:not(.admin-page) [data-cart] .drawer-head h3,
body:not(.admin-page) [data-cart] .drawer-header h1,
body:not(.admin-page) [data-cart] .drawer-header h2,
body:not(.admin-page) [data-cart] .drawer-header h3,
body:not(.admin-page) [data-cart] .cart-head h1,
body:not(.admin-page) [data-cart] .cart-head h2,
body:not(.admin-page) [data-cart] .cart-head h3,
body:not(.admin-page) [data-cart] .cart-header h1,
body:not(.admin-page) [data-cart] .cart-header h2,
body:not(.admin-page) [data-cart] .cart-header h3,
body:not(.admin-page) [data-cart] header h1,
body:not(.admin-page) [data-cart] header h2,
body:not(.admin-page) [data-cart] header h3,
body:not(.admin-page) [data-cart] .drawer-title,
body:not(.admin-page) [data-cart] .cart-title,
body:not(.admin-page) .cart-drawer .drawer-head h1,
body:not(.admin-page) .cart-drawer .drawer-head h2,
body:not(.admin-page) .cart-drawer .drawer-head h3,
body:not(.admin-page) .cart-drawer .drawer-title,
body:not(.admin-page) .cart-drawer .cart-title {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  font-size: clamp(30px, 2.8vw, 40px) !important;
  line-height: 1 !important;
  letter-spacing: -.04em !important;
  font-weight: 950 !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  filter: none !important;
  text-indent: 0 !important;
  overflow: visible !important;
  white-space: nowrap !important;
}

/* If the title element is empty/hidden by previous rule, restore text visually. */
body:not(.admin-page) [data-cart] .drawer-head::before,
body:not(.admin-page) [data-cart] .drawer-header::before,
body:not(.admin-page) [data-cart] .cart-head::before,
body:not(.admin-page) [data-cart] .cart-header::before,
body:not(.admin-page) [data-cart] .cart-drawer-head::before,
body:not(.admin-page) .cart-drawer .drawer-head::before,
body:not(.admin-page) .cart-drawer .drawer-header::before,
body:not(.admin-page) .cart-drawer .cart-head::before,
body:not(.admin-page) .cart-drawer .cart-header::before {
  content: "Keranjang" !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  font-size: clamp(30px, 2.8vw, 40px) !important;
  line-height: 1 !important;
  letter-spacing: -.04em !important;
  font-weight: 950 !important;
  margin: 0 !important;
  pointer-events: none !important;
}

/* Avoid duplicate-looking title when the real h2 is visible by placing pseudo behind normal layout only as fallback.
   If browser shows both, the real title covers the same area cleanly because both are same color/size. */
body:not(.admin-page) [data-cart] .drawer-head h1,
body:not(.admin-page) [data-cart] .drawer-head h2,
body:not(.admin-page) [data-cart] .drawer-head h3,
body:not(.admin-page) [data-cart] .drawer-header h1,
body:not(.admin-page) [data-cart] .drawer-header h2,
body:not(.admin-page) [data-cart] .drawer-header h3,
body:not(.admin-page) [data-cart] .cart-head h1,
body:not(.admin-page) [data-cart] .cart-head h2,
body:not(.admin-page) [data-cart] .cart-head h3,
body:not(.admin-page) [data-cart] .cart-header h1,
body:not(.admin-page) [data-cart] .cart-header h2,
body:not(.admin-page) [data-cart] .cart-header h3 {
  position: relative !important;
  z-index: 2 !important;
}

/* Cart close button on black header */
body:not(.admin-page) [data-cart] .drawer-head .x,
body:not(.admin-page) [data-cart] .drawer-header .x,
body:not(.admin-page) [data-cart] .cart-head .x,
body:not(.admin-page) [data-cart] .cart-header .x,
body:not(.admin-page) [data-cart] .cart-drawer-head .x,
body:not(.admin-page) [data-cart] header .x,
body:not(.admin-page) [data-cart] [data-close-cart],
body:not(.admin-page) .cart-drawer .drawer-head .x,
body:not(.admin-page) .cart-drawer .drawer-header .x,
body:not(.admin-page) .cart-drawer .cart-head .x,
body:not(.admin-page) .cart-drawer .cart-header .x {
  position: absolute !important;
  top: 22px !important;
  right: 26px !important;
  z-index: 8 !important;
  width: 54px !important;
  height: 54px !important;
  min-width: 54px !important;
  min-height: 54px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.22) !important;
  font-size: 24px !important;
  line-height: 1 !important;
  cursor: pointer !important;
  pointer-events: auto !important;
}

/* Mobile cart header */
@media (max-width: 740px) {
  body:not(.admin-page) [data-cart] .drawer-head,
  body:not(.admin-page) [data-cart] .drawer-header,
  body:not(.admin-page) [data-cart] .cart-head,
  body:not(.admin-page) [data-cart] .cart-header,
  body:not(.admin-page) [data-cart] .cart-drawer-head,
  body:not(.admin-page) [data-cart] header,
  body:not(.admin-page) .cart-drawer .drawer-head,
  body:not(.admin-page) .cart-drawer .drawer-header,
  body:not(.admin-page) .cart-drawer .cart-head,
  body:not(.admin-page) .cart-drawer .cart-header,
  body:not(.admin-page) .cart-drawer .cart-drawer-head {
    min-height: 78px !important;
    padding: calc(20px + env(safe-area-inset-top)) 76px 18px 18px !important;
  }

  body:not(.admin-page) [data-cart] .drawer-head::before,
  body:not(.admin-page) [data-cart] .drawer-header::before,
  body:not(.admin-page) [data-cart] .cart-head::before,
  body:not(.admin-page) [data-cart] .cart-header::before,
  body:not(.admin-page) [data-cart] .cart-drawer-head::before,
  body:not(.admin-page) .cart-drawer .drawer-head::before,
  body:not(.admin-page) .cart-drawer .drawer-header::before,
  body:not(.admin-page) .cart-drawer .cart-head::before,
  body:not(.admin-page) .cart-drawer .cart-header::before,
  body:not(.admin-page) [data-cart] .drawer-head h1,
  body:not(.admin-page) [data-cart] .drawer-head h2,
  body:not(.admin-page) [data-cart] .drawer-head h3,
  body:not(.admin-page) [data-cart] .drawer-header h1,
  body:not(.admin-page) [data-cart] .drawer-header h2,
  body:not(.admin-page) [data-cart] .drawer-header h3,
  body:not(.admin-page) [data-cart] .cart-head h1,
  body:not(.admin-page) [data-cart] .cart-head h2,
  body:not(.admin-page) [data-cart] .cart-head h3,
  body:not(.admin-page) [data-cart] .cart-header h1,
  body:not(.admin-page) [data-cart] .cart-header h2,
  body:not(.admin-page) [data-cart] .cart-header h3,
  body:not(.admin-page) [data-cart] .drawer-title,
  body:not(.admin-page) [data-cart] .cart-title {
    font-size: 30px !important;
  }

  body:not(.admin-page) [data-cart] .drawer-head .x,
  body:not(.admin-page) [data-cart] .drawer-header .x,
  body:not(.admin-page) [data-cart] .cart-head .x,
  body:not(.admin-page) [data-cart] .cart-header .x,
  body:not(.admin-page) [data-cart] .cart-drawer-head .x,
  body:not(.admin-page) [data-cart] header .x,
  body:not(.admin-page) [data-cart] [data-close-cart] {
    top: calc(14px + env(safe-area-inset-top)) !important;
    right: 14px !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
  }
}


/* AGS V13 CART HEADER BLACK FORCE SPECIFIC — 2026-06-14
   Focus only: force cart drawer header to black and title to white.
   This targets the real markup: .drawer[data-cart] > aside > header.
*/
html body:not(.admin-page) .drawer[data-cart] > aside > header,
html body:not(.admin-page) .drawer[data-cart] > aside > header.ags-cart-drawer-header,
html body:not(.admin-page) [data-cart].drawer > aside > header,
html body:not(.admin-page) [data-cart].drawer > aside > header.ags-cart-drawer-header {
  background: #020202 !important;
  background-color: #020202 !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  min-height: 96px !important;
  height: auto !important;
  padding: 28px 88px 22px 34px !important;
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: 0 14px 34px rgba(0,0,0,.28) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  position: relative !important;
  z-index: 10 !important;
  overflow: visible !important;
}

/* Remove the pseudo title fallback from previous patch so it cannot cause selection/duplicate issues. */
html body:not(.admin-page) .drawer[data-cart] > aside > header::before,
html body:not(.admin-page) [data-cart].drawer > aside > header::before,
html body:not(.admin-page) [data-cart] .drawer-head::before,
html body:not(.admin-page) [data-cart] .drawer-header::before,
html body:not(.admin-page) [data-cart] .cart-head::before,
html body:not(.admin-page) [data-cart] .cart-header::before,
html body:not(.admin-page) [data-cart] .cart-drawer-head::before {
  content: none !important;
  display: none !important;
}

/* Force real cart title visible on black header. */
html body:not(.admin-page) .drawer[data-cart] > aside > header > b,
html body:not(.admin-page) .drawer[data-cart] > aside > header.ags-cart-drawer-header > b,
html body:not(.admin-page) .drawer[data-cart] > aside > header .ags-cart-drawer-title,
html body:not(.admin-page) [data-cart].drawer > aside > header > b,
html body:not(.admin-page) [data-cart].drawer > aside > header .ags-cart-drawer-title {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: transparent !important;
  font-size: clamp(32px, 2.8vw, 42px) !important;
  line-height: 1 !important;
  letter-spacing: -.045em !important;
  font-weight: 950 !important;
  margin: 0 !important;
  padding: 0 !important;
  text-indent: 0 !important;
  overflow: visible !important;
  white-space: nowrap !important;
  text-transform: none !important;
  filter: none !important;
  transform: none !important;
}

/* Cart close button on black header. */
html body:not(.admin-page) .drawer[data-cart] > aside > header > button,
html body:not(.admin-page) .drawer[data-cart] > aside > header.ags-cart-drawer-header > button,
html body:not(.admin-page) .drawer[data-cart] > aside > header .ags-cart-drawer-close,
html body:not(.admin-page) [data-cart].drawer > aside > header > button,
html body:not(.admin-page) [data-cart].drawer > aside > header .ags-cart-drawer-close {
  position: absolute !important;
  top: 22px !important;
  right: 26px !important;
  z-index: 12 !important;
  width: 54px !important;
  height: 54px !important;
  min-width: 54px !important;
  min-height: 54px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.22) !important;
  font-size: 24px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  pointer-events: auto !important;
}

/* Make drawer content remain white below the black header. */
html body:not(.admin-page) .drawer[data-cart] > aside > .cart-items,
html body:not(.admin-page) [data-cart].drawer > aside > .cart-items {
  background: #fff !important;
}

@media (max-width: 740px) {
  html body:not(.admin-page) .drawer[data-cart] > aside > header,
  html body:not(.admin-page) .drawer[data-cart] > aside > header.ags-cart-drawer-header,
  html body:not(.admin-page) [data-cart].drawer > aside > header,
  html body:not(.admin-page) [data-cart].drawer > aside > header.ags-cart-drawer-header {
    min-height: 82px !important;
    padding: calc(20px + env(safe-area-inset-top)) 76px 18px 18px !important;
  }

  html body:not(.admin-page) .drawer[data-cart] > aside > header > b,
  html body:not(.admin-page) .drawer[data-cart] > aside > header.ags-cart-drawer-header > b,
  html body:not(.admin-page) .drawer[data-cart] > aside > header .ags-cart-drawer-title,
  html body:not(.admin-page) [data-cart].drawer > aside > header > b,
  html body:not(.admin-page) [data-cart].drawer > aside > header .ags-cart-drawer-title {
    font-size: 30px !important;
  }

  html body:not(.admin-page) .drawer[data-cart] > aside > header > button,
  html body:not(.admin-page) .drawer[data-cart] > aside > header.ags-cart-drawer-header > button,
  html body:not(.admin-page) .drawer[data-cart] > aside > header .ags-cart-drawer-close,
  html body:not(.admin-page) [data-cart].drawer > aside > header > button,
  html body:not(.admin-page) [data-cart].drawer > aside > header .ags-cart-drawer-close {
    top: calc(14px + env(safe-area-inset-top)) !important;
    right: 14px !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
  }
}


/* AGS V13 CART TOTAL SPACING + BCA BANK NOTE — 2026-06-14
   Focus only:
   1) Add clear space between "Total" and "IDR 0" in cart.
   2) Clarify Bank Transfer as BCA.
*/

/* Cart total footer: fix "TotalIDR" too close. */
html body:not(.admin-page) .drawer[data-cart] > aside > footer,
html body:not(.admin-page) [data-cart].drawer > aside > footer,
html body:not(.admin-page) [data-cart] footer,
html body:not(.admin-page) .cart-drawer footer {
  display: grid !important;
  gap: 18px !important;
}

html body:not(.admin-page) .drawer[data-cart] > aside > footer .cart-total,
html body:not(.admin-page) .drawer[data-cart] > aside > footer .drawer-total,
html body:not(.admin-page) [data-cart] footer .cart-total,
html body:not(.admin-page) [data-cart] footer .drawer-total,
html body:not(.admin-page) [data-cart] footer .ags-cart-total-spaced,
html body:not(.admin-page) [data-cart] .cart-total,
html body:not(.admin-page) [data-cart] .drawer-total {
  display: flex !important;
  align-items: baseline !important;
  justify-content: flex-start !important;
  gap: 14px !important;
  column-gap: 14px !important;
  flex-wrap: wrap !important;
  white-space: normal !important;
}

html body:not(.admin-page) [data-cart] .cart-total > *,
html body:not(.admin-page) [data-cart] .drawer-total > *,
html body:not(.admin-page) [data-cart] footer .cart-total > *,
html body:not(.admin-page) [data-cart] footer .drawer-total > * {
  margin: 0 !important;
}

/* Fallback for markup where "Total" and price are only text nodes in footer. */
html body:not(.admin-page) [data-cart] footer strong,
html body:not(.admin-page) [data-cart] footer b,
html body:not(.admin-page) .cart-drawer footer strong,
html body:not(.admin-page) .cart-drawer footer b {
  margin-right: 12px !important;
}

/* Make total value readable if it sits next to the label. */
html body:not(.admin-page) [data-cart] [data-cart-total],
html body:not(.admin-page) [data-cart] [data-cart-subtotal],
html body:not(.admin-page) [data-cart] .cart-total-value,
html body:not(.admin-page) [data-cart] .drawer-total-value {
  margin-left: 10px !important;
}

/* BCA note styling for Bank Transfer labels. */
body:not(.admin-page) .bank-method-note {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-left: 6px !important;
  padding: 3px 7px !important;
  border-radius: 999px !important;
  background: #eef4ff !important;
  color: #0b4ea2 !important;
  -webkit-text-fill-color: #0b4ea2 !important;
  font-size: 10px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  letter-spacing: .04em !important;
  vertical-align: middle !important;
}

/* Dynamic payment instruction generated by JS: keep Bank Transfer BCA clean. */
body:not(.admin-page) .modal[data-checkout] [data-payment-result] b,
body:not(.admin-page) .modal[data-checkout] [data-payment-result] strong,
body:not(.admin-page) .modal[data-checkout] [data-payment-result] span {
  word-spacing: .02em;
}

@media (max-width: 740px) {
  html body:not(.admin-page) [data-cart] .cart-total,
  html body:not(.admin-page) [data-cart] .drawer-total,
  html body:not(.admin-page) [data-cart] footer .cart-total,
  html body:not(.admin-page) [data-cart] footer .drawer-total {
    gap: 10px !important;
    column-gap: 10px !important;
  }

  html body:not(.admin-page) [data-cart] [data-cart-total],
  html body:not(.admin-page) [data-cart] [data-cart-subtotal],
  html body:not(.admin-page) [data-cart] .cart-total-value,
  html body:not(.admin-page) [data-cart] .drawer-total-value {
    margin-left: 8px !important;
  }
}


/* AGS V13 GLOBAL BANK TRANSFER BCA — 2026-06-14
   All public payment labels should read "Bank Transfer BCA".
*/
body:not(.admin-page) .bank-method-note {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-left: 6px !important;
  padding: 3px 7px !important;
  border-radius: 999px !important;
  background: #eef4ff !important;
  color: #0b4ea2 !important;
  -webkit-text-fill-color: #0b4ea2 !important;
  font-size: 10px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  letter-spacing: .04em !important;
  vertical-align: middle !important;
}


/* AGS V13 CART OVERLAY OVAL FIX ONLY — 2026-06-14
   Focus only:
   - Fix the huge oval/circle backdrop when cart drawer opens.
   - Cart shade must be a normal full-screen rectangular overlay.
   - Cart panel/header/content are not changed.
*/

/* Cart drawer root must be full viewport and not clipped/rounded. */
html body:not(.admin-page) .drawer[data-cart].open,
html body:not(.admin-page) [data-cart].drawer.open,
html body:not(.admin-page) [data-cart].open {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 0 !important;
  clip-path: none !important;
  transform: none !important;
  translate: none !important;
  scale: 1 !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* This is the real fix: reset cart backdrop/shade so it cannot become an oval. */
html body:not(.admin-page) .drawer[data-cart].open > .shade,
html body:not(.admin-page) [data-cart].drawer.open > .shade,
html body:not(.admin-page) [data-cart].open > .shade,
html body:not(.admin-page) .cart-drawer.open > .shade {
  position: fixed !important;
  inset: 0 !important;
  left: 0 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 0 !important;
  display: block !important;
  width: 100vw !important;
  height: 100dvh !important;
  min-width: 100vw !important;
  min-height: 100dvh !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  clip-path: none !important;
  transform: none !important;
  translate: none !important;
  scale: 1 !important;
  filter: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  background: rgba(0,0,0,.58) !important;
  backdrop-filter: blur(6px) saturate(108%) !important;
  -webkit-backdrop-filter: blur(6px) saturate(108%) !important;
  box-shadow: none !important;
}

/* Keep the cart panel above the normal rectangular shade. */
html body:not(.admin-page) .drawer[data-cart].open > aside,
html body:not(.admin-page) [data-cart].drawer.open > aside,
html body:not(.admin-page) [data-cart].open > aside,
html body:not(.admin-page) .cart-drawer.open > aside {
  position: relative !important;
  z-index: 2 !important;
  border-radius: 0 !important;
  transform: none !important;
  clip-path: none !important;
}

/* Remove any pseudo-element overlay that may create a circular/oval mask. */
html body:not(.admin-page) .drawer[data-cart].open > .shade::before,
html body:not(.admin-page) .drawer[data-cart].open > .shade::after,
html body:not(.admin-page) [data-cart].drawer.open > .shade::before,
html body:not(.admin-page) [data-cart].drawer.open > .shade::after,
html body:not(.admin-page) [data-cart].open > .shade::before,
html body:not(.admin-page) [data-cart].open > .shade::after {
  content: none !important;
  display: none !important;
}

/* In case old classes apply circle styling to all .shade children. */
html body:not(.admin-page) .drawer[data-cart].open .shade {
  border-radius: 0 !important;
  clip-path: none !important;
}


/* AGS V13 CART RIGHT DESKTOP + BANK BCA FINAL — 2026-06-14
   Focus:
   1) Desktop cart drawer must open from the RIGHT.
   2) Bank Transfer label must show Bank Transfer BCA.
*/

/* Desktop cart drawer must sit on the right side. */
@media (min-width: 741px) {
  html body:not(.admin-page) .drawer[data-cart],
  html body:not(.admin-page) [data-cart].drawer,
  html body:not(.admin-page) [data-cart] {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    display: none;
    overflow: hidden !important;
    pointer-events: none;
  }

  html body:not(.admin-page) .drawer[data-cart].open,
  html body:not(.admin-page) [data-cart].drawer.open,
  html body:not(.admin-page) [data-cart].open {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  html body:not(.admin-page) .drawer[data-cart].open > .shade,
  html body:not(.admin-page) [data-cart].drawer.open > .shade,
  html body:not(.admin-page) [data-cart].open > .shade {
    position: fixed !important;
    inset: 0 !important;
    z-index: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    border-radius: 0 !important;
    clip-path: none !important;
    transform: none !important;
    background: rgba(0,0,0,.58) !important;
    backdrop-filter: blur(6px) saturate(108%) !important;
    -webkit-backdrop-filter: blur(6px) saturate(108%) !important;
  }

  html body:not(.admin-page) .drawer[data-cart] > aside,
  html body:not(.admin-page) [data-cart].drawer > aside,
  html body:not(.admin-page) [data-cart] > aside {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    bottom: 0 !important;
    z-index: 2 !important;
    width: min(520px, 42vw) !important;
    max-width: min(520px, 42vw) !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    margin: 0 0 0 auto !important;
    transform: translateX(100%) !important;
    translate: none !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    background: #fff !important;
    box-shadow: -28px 0 70px rgba(0,0,0,.26) !important;
    transition: transform .32s cubic-bezier(.22,.61,.36,1) !important;
  }

  html body:not(.admin-page) .drawer[data-cart].open > aside,
  html body:not(.admin-page) [data-cart].drawer.open > aside,
  html body:not(.admin-page) [data-cart].open > aside {
    right: 0 !important;
    left: auto !important;
    transform: translateX(0) !important;
    margin-left: auto !important;
    margin-right: 0 !important;
  }
}

/* Keep mobile cart full/right-safe without affecting desktop. */
@media (max-width: 740px) {
  html body:not(.admin-page) .drawer[data-cart] > aside,
  html body:not(.admin-page) [data-cart].drawer > aside,
  html body:not(.admin-page) [data-cart] > aside {
    right: 0 !important;
    left: auto !important;
    width: min(100vw, 420px) !important;
    max-width: 100vw !important;
  }
}

/* Bank transfer BCA note styling if a small tag is used. */
body:not(.admin-page) .bank-method-note {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-left: 6px !important;
  padding: 3px 7px !important;
  border-radius: 999px !important;
  background: #eef4ff !important;
  color: #0b4ea2 !important;
  -webkit-text-fill-color: #0b4ea2 !important;
  font-size: 10px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  letter-spacing: .04em !important;
  vertical-align: middle !important;
}

/* AGS Slider Cover + Navigation Final Override — V7 2026-06-15
   Must stay after previous slider experiments so all slides render full-cover consistently. */
html body:not(.admin-page) .hero-slider.hero-slider--standard-main,
html body:not(.admin-page) .hero-slider.hero-slider--standard-main.hero-slider--cca-sweep{
  --ags-slider-duration:5600ms!important;
  --ags-slider-sweep:860ms!important;
  position:relative!important;
  overflow:hidden!important;
  background:#020202!important;
  touch-action:pan-y pinch-zoom!important;
  user-select:none!important;
}
html body:not(.admin-page) .hero-slider.hero-slider--standard-main .hero-slider-track,
html body:not(.admin-page) .hero-slider.hero-slider--standard-main.hero-slider--cca-sweep .hero-slider-track{
  position:relative!important;
  width:100%!important;
  max-width:none!important;
  height:auto!important;
  min-height:0!important;
  aspect-ratio:398/167!important;
  overflow:hidden!important;
  background:#020202!important;
  border-radius:0!important;
  transform:translateZ(0)!important;
}
html body:not(.admin-page) .hero-slider.hero-slider--standard-main .hero-slide,
html body:not(.admin-page) .hero-slider.hero-slider--standard-main.hero-slider--cca-sweep .hero-slide{
  position:absolute!important;
  inset:0!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  z-index:0!important;
  transform:none!important;
  clip-path:inset(0 0 0 0)!important;
  will-change:clip-path,opacity!important;
}
html body:not(.admin-page) .hero-slider.hero-slider--standard-main .hero-slide.is-active,
html body:not(.admin-page) .hero-slider.hero-slider--standard-main .hero-slide.is-sweep-entering,
html body:not(.admin-page) .hero-slider.hero-slider--standard-main .hero-slide.is-sweep-leaving,
html body:not(.admin-page) .hero-slider.hero-slider--standard-main.hero-slider--cca-sweep .hero-slide.is-active,
html body:not(.admin-page) .hero-slider.hero-slider--standard-main.hero-slider--cca-sweep .hero-slide.is-sweep-entering,
html body:not(.admin-page) .hero-slider.hero-slider--standard-main.hero-slider--cca-sweep .hero-slide.is-sweep-leaving{
  opacity:1!important;
  visibility:visible!important;
  display:block!important;
}
html body:not(.admin-page) .hero-slider.hero-slider--standard-main .hero-slide.is-active,
html body:not(.admin-page) .hero-slider.hero-slider--standard-main.hero-slider--cca-sweep .hero-slide.is-active{pointer-events:auto!important;z-index:2!important}
html body:not(.admin-page) .hero-slider.hero-slider--standard-main .hero-slide.is-sweep-entering,
html body:not(.admin-page) .hero-slider.hero-slider--standard-main.hero-slider--cca-sweep .hero-slide.is-sweep-entering{pointer-events:auto!important;z-index:3!important;animation:ags-cca-sweep-in var(--ags-slider-sweep) cubic-bezier(.76,0,.24,1) both!important}
html body:not(.admin-page) .hero-slider.hero-slider--standard-main .hero-slide.is-sweep-leaving,
html body:not(.admin-page) .hero-slider.hero-slider--standard-main.hero-slider--cca-sweep .hero-slide.is-sweep-leaving{pointer-events:none!important;z-index:2!important;animation:ags-cca-sweep-out var(--ags-slider-sweep) cubic-bezier(.76,0,.24,1) both!important}
html body:not(.admin-page) .hero-slider.hero-slider--standard-main[data-slider-direction="prev"] .hero-slide.is-sweep-entering,
html body:not(.admin-page) .hero-slider.hero-slider--standard-main.hero-slider--cca-sweep[data-slider-direction="prev"] .hero-slide.is-sweep-entering{animation-name:ags-cca-sweep-in-prev!important}
html body:not(.admin-page) .hero-slider.hero-slider--standard-main[data-slider-direction="prev"] .hero-slide.is-sweep-leaving,
html body:not(.admin-page) .hero-slider.hero-slider--standard-main.hero-slider--cca-sweep[data-slider-direction="prev"] .hero-slide.is-sweep-leaving{animation-name:ags-cca-sweep-out-prev!important}
html body:not(.admin-page) .hero-slider.hero-slider--standard-main .hero-slide-frame,
html body:not(.admin-page) .hero-slider.hero-slider--standard-main.hero-slider--cca-sweep .hero-slide-frame{
  position:absolute!important;
  inset:0!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  overflow:hidden!important;
  background:#020202 var(--ags-slide-bg,none) center center/cover no-repeat!important;
  border-radius:0!important;
  border:0!important;
  box-shadow:none!important;
}
html body:not(.admin-page) .hero-slider.hero-slider--standard-main .hero-slide-picture,
html body:not(.admin-page) .hero-slider.hero-slider--standard-main .hero-slide-picture img,
html body:not(.admin-page) .hero-slider.hero-slider--standard-main img.hero-slide-image,
html body:not(.admin-page) .hero-slider.hero-slider--standard-main.hero-slider--cca-sweep .hero-slide-picture,
html body:not(.admin-page) .hero-slider.hero-slider--standard-main.hero-slider--cca-sweep .hero-slide-picture img,
html body:not(.admin-page) .hero-slider.hero-slider--standard-main.hero-slider--cca-sweep img.hero-slide-image{
  position:absolute!important;
  inset:0!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  min-width:100%!important;
  min-height:100%!important;
  object-fit:cover!important;
  object-position:center center!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  background:#020202!important;
}
html body:not(.admin-page) .hero-slider.hero-slider--standard-main .hero-slide.is-active img.hero-slide-image,
html body:not(.admin-page) .hero-slider.hero-slider--standard-main .hero-slide.is-sweep-entering img.hero-slide-image,
html body:not(.admin-page) .hero-slider.hero-slider--standard-main.hero-slider--cca-sweep .hero-slide.is-active img.hero-slide-image,
html body:not(.admin-page) .hero-slider.hero-slider--standard-main.hero-slider--cca-sweep .hero-slide.is-sweep-entering img.hero-slide-image{
  animation:ags-slider-cover-drift var(--ags-slider-duration) linear both!important;
}
@keyframes ags-slider-cover-drift{from{transform:scale(1.018) translate3d(0,0,0)}to{transform:scale(1.05) translate3d(-.65%,0,0)}}
html body:not(.admin-page) .hero-slider-arrow{
  position:absolute!important;
  top:50%!important;
  z-index:14!important;
  width:clamp(42px,4vw,58px)!important;
  height:clamp(42px,4vw,58px)!important;
  transform:translateY(-50%)!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  border:1px solid rgba(255,255,255,.32)!important;
  border-radius:999px!important;
  background:rgba(0,0,0,.46)!important;
  color:#fff!important;
  box-shadow:0 18px 40px rgba(0,0,0,.30)!important;
  backdrop-filter:blur(12px)!important;
  -webkit-backdrop-filter:blur(12px)!important;
  cursor:pointer!important;
  pointer-events:auto!important;
  touch-action:manipulation!important;
  transition:background .18s ease,transform .18s ease,border-color .18s ease!important;
}
html body:not(.admin-page) .hero-slider-arrow:hover,
html body:not(.admin-page) .hero-slider-arrow:focus-visible{
  background:rgba(255,204,24,.94)!important;
  color:#050505!important;
  border-color:rgba(255,204,24,.98)!important;
  transform:translateY(-50%) scale(1.04)!important;
  outline:none!important;
}
html body:not(.admin-page) .hero-slider-arrow--prev{left:clamp(14px,3vw,42px)!important}
html body:not(.admin-page) .hero-slider-arrow--next{right:clamp(14px,3vw,42px)!important}
html body:not(.admin-page) .hero-slider-arrow svg{display:block!important;width:54%!important;height:54%!important}
html body:not(.admin-page) .hero-slider-controls.hero-slider-progress{z-index:12!important}
@media(max-width:740px){
  html body:not(.admin-page) .hero-slider.hero-slider--standard-main .hero-slider-track,
  html body:not(.admin-page) .hero-slider.hero-slider--standard-main.hero-slider--cca-sweep .hero-slider-track{aspect-ratio:5/7!important}
  html body:not(.admin-page) .hero-slider-arrow{width:38px!important;height:38px!important;background:rgba(0,0,0,.38)!important}
  html body:not(.admin-page) .hero-slider-arrow--prev{left:10px!important}
  html body:not(.admin-page) .hero-slider-arrow--next{right:10px!important}
  html body:not(.admin-page) .hero-slider.hero-slider--standard-main img.hero-slide-image,
  html body:not(.admin-page) .hero-slider.hero-slider--standard-main.hero-slider--cca-sweep img.hero-slide-image{object-position:center center!important}
}
@media(prefers-reduced-motion:reduce){
  html body:not(.admin-page) .hero-slider.hero-slider--standard-main img.hero-slide-image,
  html body:not(.admin-page) .hero-slider.hero-slider--standard-main.hero-slider--cca-sweep img.hero-slide-image{animation:none!important;transform:none!important}
  html body:not(.admin-page) .hero-slider-arrow{transition:none!important}
}


/* AGS Slider Smart-Fit No-Crop Override — V8 2026-06-15
   Reason: object-fit: cover always crops when uploaded artwork ratio differs.
   This keeps every uploaded slider artwork fully visible, while the same image fills
   the background behind it so the slider does not look empty. Sweep transition stays active. */
html body:not(.admin-page) .hero-slider.hero-slider--standard-main,
html body:not(.admin-page) .hero-slider.hero-slider--standard-main.hero-slider--cca-sweep{
  background:#020202!important;
  overflow:hidden!important;
}
html body:not(.admin-page) .hero-slider.hero-slider--standard-main .hero-slider-track,
html body:not(.admin-page) .hero-slider.hero-slider--standard-main.hero-slider--cca-sweep .hero-slider-track{
  aspect-ratio:2/1!important;
  background:#020202!important;
  overflow:hidden!important;
}
html body:not(.admin-page) .hero-slider.hero-slider--standard-main .hero-slide-frame,
html body:not(.admin-page) .hero-slider.hero-slider--standard-main.hero-slider--cca-sweep .hero-slide-frame{
  background:#020202 var(--ags-slide-bg,none) center center/cover no-repeat!important;
  overflow:hidden!important;
  isolation:isolate!important;
}
html body:not(.admin-page) .hero-slider.hero-slider--standard-main .hero-slide-frame::before,
html body:not(.admin-page) .hero-slider.hero-slider--standard-main.hero-slider--cca-sweep .hero-slide-frame::before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  inset:-32px!important;
  z-index:0!important;
  pointer-events:none!important;
  background:var(--ags-slide-bg,none) center center/cover no-repeat!important;
  filter:blur(22px) saturate(1.08) brightness(.58)!important;
  transform:scale(1.08)!important;
  opacity:.82!important;
}
html body:not(.admin-page) .hero-slider.hero-slider--standard-main .hero-slide-frame::after,
html body:not(.admin-page) .hero-slider.hero-slider--standard-main.hero-slider--cca-sweep .hero-slide-frame::after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  inset:0!important;
  z-index:1!important;
  pointer-events:none!important;
  background:linear-gradient(90deg,rgba(0,0,0,.10),rgba(0,0,0,0) 18%,rgba(0,0,0,0) 82%,rgba(0,0,0,.10))!important;
}
html body:not(.admin-page) .hero-slider.hero-slider--standard-main .hero-slide-picture,
html body:not(.admin-page) .hero-slider.hero-slider--standard-main.hero-slider--cca-sweep .hero-slide-picture{
  position:absolute!important;
  inset:0!important;
  z-index:2!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  overflow:hidden!important;
  background:transparent!important;
}
html body:not(.admin-page) .hero-slider.hero-slider--standard-main .hero-slide-picture img,
html body:not(.admin-page) .hero-slider.hero-slider--standard-main img.hero-slide-image,
html body:not(.admin-page) .hero-slider.hero-slider--standard-main.hero-slider--cca-sweep .hero-slide-picture img,
html body:not(.admin-page) .hero-slider.hero-slider--standard-main.hero-slider--cca-sweep img.hero-slide-image{
  position:absolute!important;
  inset:0!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  min-width:0!important;
  min-height:0!important;
  object-fit:contain!important;
  object-position:center center!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  background:transparent!important;
  filter:none!important;
  box-shadow:none!important;
  transform:none!important;
  animation:none!important;
}
html body:not(.admin-page) .hero-slider.hero-slider--standard-main .hero-slide.is-active img.hero-slide-image,
html body:not(.admin-page) .hero-slider.hero-slider--standard-main .hero-slide.is-sweep-entering img.hero-slide-image,
html body:not(.admin-page) .hero-slider.hero-slider--standard-main.hero-slider--cca-sweep .hero-slide.is-active img.hero-slide-image,
html body:not(.admin-page) .hero-slider.hero-slider--standard-main.hero-slider--cca-sweep .hero-slide.is-sweep-entering img.hero-slide-image{
  animation:none!important;
  transform:none!important;
}
@media(max-width:740px){
  html body:not(.admin-page) .hero-slider.hero-slider--standard-main .hero-slider-track,
  html body:not(.admin-page) .hero-slider.hero-slider--standard-main.hero-slider--cca-sweep .hero-slider-track{
    aspect-ratio:5/7!important;
  }
  html body:not(.admin-page) .hero-slider.hero-slider--standard-main .hero-slide-frame::before,
  html body:not(.admin-page) .hero-slider.hero-slider--standard-main.hero-slider--cca-sweep .hero-slide-frame::before{
    inset:-24px!important;
    filter:blur(18px) saturate(1.08) brightness(.56)!important;
  }
}