/* =============================================
   AFTERGIG SUPPLY — 2026 Social-Media UI
   Mobile-first, dark aesthetic, bottom nav
   Fonts: Bebas Neue (display) + DM Sans (body)
   ============================================= */

:root {
  --black: #020202;
  --ink: #0f0f0f;
  --white: #ffffff;
  --muted: #888;
  --line: #e5dfd4;
  --paper: #fff;
  --soft: #f5f2ee;
  --red: #b51f25;
  --yellow: #ffd21f;
  --radius: 20px;
  --shadow: 0 20px 60px rgba(0,0,0,.12);
  --bottom-nav-h: 64px;
  --ticker-h: 36px;
  --header-h: 73px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: 'DM Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; cursor: pointer; }
img { max-width: 100%; display: block; }

/* TOPLINE */
.topline {
  margin-top: var(--ticker-h);
  background: var(--black);
  color: rgba(255,255,255,.7);
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 9px 12px;
  position: relative;
}
.topline-lang {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  gap: 4px;
  font-size: 11px;
}
.topline-lang a { opacity: .5; }
.topline-lang a.active { opacity: 1; color: #fff; font-weight: 800; }

/* HEADER */
.site-header {
  position: sticky;
  top: var(--ticker-h);
  z-index: 70;
  background: var(--black);
  color: #fff;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  padding: 14px clamp(16px,4vw,64px);
  border-bottom: 1px solid var(--line);
}
.logo-svg {
  display: block;
  width: 180px;
  height: 44px;
  color: #fff;
}
.desktop-nav {
  display: flex;
  justify-content: center;
  gap: 28px;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: .09em;
  font-size: 12px;
}
.desktop-nav a { opacity: .75; transition: opacity .15s; }
.desktop-nav a:hover { opacity: 1; }
.ig-link {
  display: flex;
  align-items: center;
  gap: 6px;
  color: rgba(255,255,255,.75) !important;
}
.ig-link:hover { color: #fff !important; opacity: 1 !important; }
.header-actions { display: flex; align-items: center; gap: 8px; }
.icon-btn, .pill {
  height: 44px;
  min-width: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 13px;
  position: relative;
  transition: background .15s;
}
.icon-btn:hover, .pill:hover { background: rgba(255,255,255,.14); }
.pill { padding: 0 16px; min-width: auto; }
.cart-button b {
  position: absolute;
  right: -3px;
  top: -6px;
  background: var(--red);
  color: #fff;
  min-width: 20px;
  height: 20px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 800;
}
.menu-button { display: none; }

/* MOBILE MENU */
.mobile-menu {
  display: none;
  background: var(--black);
  color: #fff;
  padding: 0 16px 16px;
  gap: 8px;
}
.mobile-menu.open { display: grid; }
.mobile-menu a {
  padding: 13px 16px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .08em;
}
.ig-link-mobile {
  display: flex !important;
  align-items: center;
  gap: 8px;
  color: rgba(255,255,255,.7) !important;
}

/* SETUP ALERT */
.setup-alert {
  margin: 24px auto;
  max-width: 1100px;
  border: 1px solid #eadcc8;
  background: #fffaf4;
  border-radius: 18px;
  padding: 16px 20px;
  display: grid;
  gap: 4px;
  color: #392b1a;
}

/* HERO */
.hero {
  min-height: calc(100svh - 110px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 40px;
  padding: clamp(40px,6vw,90px) clamp(16px,5vw,80px);
  background: radial-gradient(circle at 75% 15%, rgba(181,31,37,.1), transparent 30rem), #fff;
}
.eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 10px;
}
.hero h1 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(64px,9vw,130px);
  line-height: .88;
  letter-spacing: .01em;
  margin-bottom: 18px;
}
.hero p { font-size: 17px; color: var(--muted); max-width: 500px; }
.hero-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 24px; }

/* BUTTONS */
.btn {
  border-radius: 999px;
  padding: 12px 22px;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .04em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  transition: transform .12s, opacity .12s;
  border: 1.5px solid transparent;
}
.btn:active { transform: scale(.97); }
.btn-dark { background: var(--black); color: #fff; border-color: var(--black); }
.btn-dark:hover { background: #1a1a1a; }
.btn-outline { background: transparent; color: var(--ink); border-color: #ccc; }
.btn-outline:hover { border-color: #999; }
.btn-outline-sm {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  transition: all .12s;
}
.btn-outline-sm:hover { border-color: var(--ink); color: var(--ink); }
.btn.full { width: 100%; }

/* HERO VISUAL */
.hero-visual {
  position: relative;
  min-height: 480px;
  display: grid;
  place-items: center;
}
.look-card {
  width: min(380px,78vw);
  aspect-ratio: .72;
  background: var(--black);
  border-radius: 28px;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 32px;
  color: #fff;
  transform: rotate(-2deg);
  box-shadow: var(--shadow);
}
.look-card img { width: 72%; max-height: 150px; object-fit: contain; }
.look-card span { font-size: 10px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: #9a9185; margin-top: 12px; }
.look-card strong {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 46px;
  line-height: .92;
  letter-spacing: .02em;
  margin-top: 8px;
}
.floating-card {
  position: absolute;
  right: 6%;
  bottom: 12%;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 14px 18px;
  box-shadow: var(--shadow);
}
.floating-card b { display: block; font-size: 20px; }
.floating-card span { font-size: 12px; color: var(--muted); }



/* CUSTOMER HERO SLIDER */
.hero-slider {
  position: relative;
  min-height: clamp(560px, 82svh, 860px);
  padding: clamp(16px, 2.4vw, 30px) clamp(12px, 3vw, 56px) clamp(58px, 4vw, 82px);
  background: #020202;
  overflow: hidden;
}
.hero-slider::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 78% 8%, rgba(255,210,31,.28), transparent 28rem),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,0));
  pointer-events: none;
}
.hero-slider-track {
  position: relative;
  min-height: clamp(510px, 74svh, 730px);
  max-width: 1780px;
  margin: 0 auto;
  z-index: 1;
}
.hero-slide {
  position: absolute;
  inset: 0;
  display: block;
  opacity: 0;
  pointer-events: none;
  transform: translateX(28px) scale(.99);
  transition: opacity .55s ease, transform .55s ease;
}
.hero-slide.is-active {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0) scale(1);
  z-index: 1;
}
.hero-slide-frame {
  position: relative;
  width: 100%;
  min-height: inherit;
  height: 100%;
  border-radius: clamp(22px, 2.6vw, 38px);
  background: #020202;
  box-shadow: 0 28px 90px rgba(0,0,0,.36);
  overflow: hidden;
  isolation: isolate;
}
.hero-slide-frame:before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0,0,0,.76) 0%, rgba(0,0,0,.42) 36%, rgba(0,0,0,.08) 70%, rgba(0,0,0,.36) 100%),
    linear-gradient(180deg, rgba(0,0,0,.10) 0%, rgba(0,0,0,.12) 42%, rgba(0,0,0,.64) 100%);
}
.hero-slide-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  transform: scale(1.01);
}
.hero-slide-overlay {
  position: relative;
  z-index: 2;
  min-height: inherit;
  width: min(640px, 62vw);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  padding: clamp(30px, 5vw, 76px);
  color: #fff;
}
.hero-slide-overlay .eyebrow {
  display: inline-flex;
  align-items: center;
  color: #020202;
  background: var(--yellow);
  border-radius: 999px;
  padding: 8px 12px;
  margin-bottom: 14px;
  letter-spacing: .16em;
  font-size: 10px;
  font-weight: 950;
}
.hero-slide h1 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(58px, 8vw, 124px);
  line-height: .84;
  letter-spacing: .01em;
  margin: 0 0 14px;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 10px 36px rgba(0,0,0,.42);
  max-width: 8.8ch;
}
.hero-slide p {
  font-size: clamp(14px, 1.25vw, 18px);
  color: rgba(255,255,255,.86);
  max-width: 540px;
  text-shadow: 0 8px 26px rgba(0,0,0,.38);
}
.hero-actions-inside-image {
  margin-top: 22px;
}
.btn.btn-light {
  background: #fff;
  color: #020202;
  border-color: #fff;
  min-width: 148px;
  box-shadow: 0 16px 40px rgba(0,0,0,.24);
}
.btn.btn-light:hover { transform: translateY(-1px); }
.btn.btn-ghost-light {
  color: #fff;
  background: rgba(255,255,255,.11);
  border: 1px solid rgba(255,255,255,.36);
  backdrop-filter: blur(10px);
}
.hero-product-target { display: none !important; }
.hero-slide-placeholder {
  position: absolute;
  inset: 0;
  color: #fff;
  display: grid;
  gap: 14px;
  place-items: center;
  text-align: center;
  padding: 36px;
  z-index: 0;
}
.hero-slide-placeholder img { width: min(300px, 70%); height: auto; max-height: 160px; object-fit: contain; }
.hero-slide-placeholder strong { font-family: 'Bebas Neue', sans-serif; font-size: clamp(42px, 6vw, 82px); line-height: .85; letter-spacing: .02em; }
.hero-slider-controls {
  position: absolute;
  left: clamp(24px, 6vw, 110px);
  right: clamp(24px, 6vw, 110px);
  bottom: clamp(18px, 3vw, 34px);
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
}
.hero-slider-controls > button {
  pointer-events: auto;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.88);
  color: #020202;
  font-weight: 900;
  cursor: pointer;
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
}
.hero-slider-dots {
  pointer-events: auto;
  display: flex;
  gap: 8px;
  align-items: center;
  background: rgba(255,255,255,.76);
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 999px;
  padding: 9px 11px;
  backdrop-filter: blur(12px);
}
.hero-slider-dots button {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  border: 0;
  background: rgba(17,17,17,.25);
  cursor: pointer;
  padding: 0;
}
.hero-slider-dots button.is-active { width: 28px; background: var(--black); }
@media(max-width:960px) {
  .hero-slider { min-height: clamp(500px, 72svh, 680px); padding: 14px 14px 68px; }
  .hero-slider-track { min-height: clamp(460px, 64svh, 600px); }
  .hero-slide-overlay { width: 100%; padding: 34px 24px; justify-content: flex-end; }
  .hero-slide-frame:before {
    background:
      linear-gradient(180deg, rgba(0,0,0,.08) 0%, rgba(0,0,0,.18) 42%, rgba(0,0,0,.76) 100%),
      linear-gradient(90deg, rgba(0,0,0,.18), rgba(0,0,0,.08));
  }
  .hero-slide h1 { font-size: clamp(54px, 15vw, 92px); }
}
@media(max-width:680px) {
  .hero-slider { min-height: auto; padding: 12px 12px 64px; }
  .hero-slider-track { min-height: 560px; }
  .hero-slide-frame { border-radius: 24px; }
  .hero-slide-image { transform: scale(1.02); }
  .hero-slide-overlay { padding: 26px 18px; }
  .hero-slide p { font-size: 14px; }
  .hero-actions-inside-image { gap: 8px; margin-top: 18px; }
  .hero-actions-inside-image .btn { min-height: 42px; padding-inline: 16px; }
  .hero-product-target { font-size: 11px; max-width: 100%; }
  .hero-slider-controls { left: 16px; right: 16px; bottom: 16px; }
  .hero-slider-controls > button { width: 42px; height: 42px; }
}
/* ─── STORIES BAR (mobile only) ─── */
.stories-bar {
  display: none;
  gap: 16px;
  overflow-x: auto;
  padding: 16px 16px;
  -ms-overflow-style: none;
  scrollbar-width: none;
  border-bottom: 1px solid var(--line);
}
.stories-bar::-webkit-scrollbar { display: none; }
.story-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 60px;
  text-align: center;
  flex-shrink: 0;
}
.story-ring {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  padding: 2.5px;
  background: linear-gradient(135deg, #ccc, #999);
  transition: transform .15s;
}
.story-item.active .story-ring,
.story-item:hover .story-ring {
  background: linear-gradient(135deg, var(--red), #ff6b35);
  transform: scale(1.06);
}
.story-circle {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--soft);
  border: 2.5px solid var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
}
.story-item > span {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 60px;
}
.story-item.active > span { color: var(--red); }

/* CATEGORY STRIP (desktop) */
.category-strip {
  display: flex;
  gap: 8px;
  overflow: auto;
  padding: 14px clamp(16px,5vw,80px);
  border-bottom: 1px solid var(--line);
  background: #fff;
  position: sticky;
  top: calc(var(--ticker-h) + var(--header-h));
  z-index: 50;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.category-strip::-webkit-scrollbar { display: none; }
.cat {
  white-space: nowrap;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  padding: 8px 16px;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: .1em;
  transition: all .15s;
}
.cat.active, .cat:hover { background: var(--black); color: #fff; border-color: var(--black); }

/* SECTION */
.section { padding: clamp(48px,6vw,80px) clamp(16px,5vw,80px); }
.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}
.section-head h2 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(42px,5vw,76px);
  letter-spacing: .02em;
  line-height: .9;
}
.section-head a { font-weight: 700; font-size: 13px; text-decoration: underline; }

/* FEATURED ROW */
.featured-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(200px,260px);
  gap: 14px;
  overflow-x: auto;
  padding-bottom: 10px;
  scroll-snap-type: x mandatory;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.featured-row::-webkit-scrollbar { display: none; }
.mini-product {
  scroll-snap-align: start;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 12px;
  display: grid;
  gap: 6px;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
}
.mini-product:hover { transform: translateY(-2px); box-shadow: 0 12px 36px rgba(0,0,0,.08); }
.mini-product b { font-size: 15px; line-height: 1.15; }
.mini-product small, .product-info small { color: var(--muted); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; }
.mini-product strong { font-size: 16px; font-weight: 700; }

/* PRODUCT GRID */
.search-form {
  display: flex;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
  background: #fff;
  height: 44px;
}
.search-form input { border: 0; padding: 0 16px; outline: 0; min-width: 0; flex: 1; font-size: 14px; }
.search-form button { border: 0; background: var(--black); color: #fff; padding: 0 18px; font-weight: 700; display: grid; place-items: center; }

.product-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 16px;
}
.product-card {
  border: 1px solid var(--line);
  border-radius: 24px;
  background: #fff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 32px rgba(0,0,0,.04);
  transition: transform .18s, box-shadow .18s;
  position: relative;
}
.product-card:hover { transform: translateY(-3px); box-shadow: 0 20px 56px rgba(0,0,0,.1); }
.card-link {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}
.wish {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  border: 1px solid rgba(255,255,255,.4);
  background: rgba(255,255,255,.75);
  backdrop-filter: blur(6px);
  width: 40px;
  height: 40px;
  border-radius: 999px;
  font-size: 18px;
  display: grid;
  place-items: center;
  transition: all .12s;
}
.wish.active { background: var(--black); color: #fff; border-color: var(--black); }

/* PRODUCT ART */
.product-art {
  height: 240px;
  background: linear-gradient(135deg, var(--accent, #020202), #020202);
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
}
.product-art::before {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 14px;
}
.product-art span {
  position: relative;
  color: rgba(255,255,255,.9);
  font-family: 'Bebas Neue', sans-serif;
  font-size: 40px;
  letter-spacing: .08em;
}
.product-art img,
.popup-art img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.product-art.has-image { background: #f7f2ea; }
.product-art.has-image::before { display: none; }
.product-art.has-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 58%, rgba(0,0,0,.16));
  z-index: 1;
  pointer-events: none;
}
.product-art.has-image span { display: none; }
.product-art.big { height: 340px; }

.product-info { padding: 14px; display: grid; gap: 6px; flex: 1; }
.product-info h3 { font-size: 17px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
.product-info p { color: var(--muted); font-size: 13px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.price { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.price b { font-size: 18px; font-weight: 700; }
.price del { color: #bbb; font-size: 14px; }
.meta { display: flex; justify-content: space-between; gap: 8px; border-top: 1px solid var(--line); padding-top: 8px; color: var(--muted); font-size: 12px; }
.product-actions {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  padding: 0 14px 14px;
  position: relative;
  z-index: 2;
}

/* EMPTY STATE */
.empty-state { grid-column: 1/-1; background: var(--soft); border: 1px solid var(--line); border-radius: 20px; padding: 40px; text-align: center; color: var(--muted); }

/* ABOUT */
.about {
  margin: 0 clamp(16px,5vw,80px) clamp(48px,6vw,80px);
  border-radius: 32px;
  background: var(--black);
  color: #fff;
  padding: clamp(28px,5vw,60px);
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 32px;
  align-items: center;
}
.about h2 { font-family: 'Bebas Neue', sans-serif; font-size: clamp(38px,5vw,76px); line-height: .9; letter-spacing: .01em; }
.benefits { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.benefits article { border: 1px solid rgba(255,255,255,.12); border-radius: 20px; padding: 18px; background: rgba(255,255,255,.04); display: grid; gap: 6px; }
.benefits b { font-size: 16px; font-weight: 700; }
.benefits span { color: #aaa; font-size: 13px; }
.ig-about-link { color: #fff !important; font-weight: 700; font-size: 13px; margin-top: 4px; display: block; }
.ig-about-link:hover { text-decoration: underline; }

/* FOOTER */
.footer {
  border-top: 1px solid var(--line);
  padding: 24px clamp(16px,5vw,80px) calc(24px + var(--bottom-nav-h) + var(--safe-bottom));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.footer-brand { display: flex; align-items: center; gap: 14px; color: var(--muted); font-size: 13px; }
.footer-logo { width: 140px; height: 36px; color: var(--ink); }
.footer-ig {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  border: 1.5px solid var(--line);
  border-radius: 999px;
  padding: 10px 16px;
  transition: all .15s;
}
.footer-ig:hover { border-color: var(--ink); color: var(--ink); }

/* ─── BOTTOM NAV (mobile) ─── */
.bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(10,10,10,.96);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border-top: 1px solid var(--line);
  z-index: 50;
  padding: 8px 0 calc(10px + var(--safe-bottom));
  grid-template-columns: repeat(4, 1fr);
}
.bnav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: rgba(255,255,255,.5);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 6px 4px;
  border: 0;
  background: transparent;
  transition: color .15s;
  text-transform: uppercase;
  cursor: pointer;
}
.bnav-item:hover, .bnav-item.active { color: #fff; }
.bnav-cart-wrap { position: relative; }
.bnav-badge {
  position: absolute;
  top: -5px;
  right: -8px;
  background: var(--red);
  color: #fff;
  min-width: 18px;
  height: 18px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 800;
}

/* DRAWER */
.drawer, .modal { position: fixed; inset: 0; z-index: 80; display: none; }
.drawer.open, .modal.open { display: block; }
.shade { position: absolute; inset: 0; background: rgba(10,10,10,.35); backdrop-filter: blur(5px); }
.drawer aside {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: min(460px,92vw);
  background: #fff;
  display: flex;
  flex-direction: column;
  box-shadow: -20px 0 60px rgba(0,0,0,.15);
}
.drawer header, .drawer footer {
  padding: 18px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.drawer footer { border-top: 1px solid var(--line); border-bottom: 0; display: grid; gap: 12px; }
.drawer header b { font-size: 24px; letter-spacing: -.04em; }
.drawer header button, .x {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 999px;
  width: 38px;
  height: 38px;
  font-size: 22px;
  display: grid;
  place-items: center;
}
.cart-items { padding: 12px; overflow-y: auto; flex: 1; display: grid; align-content: start; gap: 8px; }
.cart-line { display: grid; grid-template-columns: 56px 1fr auto; gap: 10px; align-items: center; border: 1px solid var(--line); border-radius: 16px; padding: 10px; }
.cart-thumb { height: 56px; border-radius: 12px; background: var(--black); color: #fff; display: grid; place-items: center; font-family: 'Bebas Neue', sans-serif; font-size: 16px; letter-spacing: .06em; }
.cart-line b { display: block; font-size: 14px; }
.cart-line span { color: var(--muted); font-size: 12px; }
.qty { display: flex; align-items: center; gap: 6px; }
.qty button { width: 28px; height: 28px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font-size: 16px; }
.total { display: flex; justify-content: space-between; font-size: 20px; font-weight: 700; }

/* MODALS */
.modal-card {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: min(500px,94vw);
  max-height: 90svh;
  overflow-y: auto;
  background: #fff;
  border-radius: 28px;
  box-shadow: 0 32px 100px rgba(0,0,0,.2);
  padding: 24px;
}
.modal-card h2 { font-family: 'Bebas Neue', sans-serif; font-size: 44px; letter-spacing: .02em; line-height: .9; margin-bottom: 8px; }
.modal-card p { color: var(--muted); line-height: 1.5; margin-bottom: 16px; }
.modal-card input,
.modal-card textarea,
.modal-card select {
  width: 100%;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  min-height: 48px;
  padding: 0 14px;
  margin-bottom: 10px;
  outline: 0;
  background: #fff;
  font-size: 15px;
  transition: border-color .15s;
}
.modal-card input:focus,
.modal-card textarea:focus,
.modal-card select:focus { border-color: var(--ink); }
.modal-card textarea { min-height: 88px; padding: 12px; resize: vertical; }
.x { position: absolute; right: 14px; top: 14px; z-index: 2; }
.checkout-card { width: min(720px,94vw); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.form-grid textarea { grid-column: 1/-1; }
.product-modal { width: min(880px,94vw); display: grid; grid-template-columns: .9fr 1.1fr; gap: 20px; align-items: center; }
.hidden { display: none !important; }
.notice { margin-top: 10px; color: var(--muted); font-weight: 600; font-size: 14px; }

/* TOAST */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--bottom-nav-h) + var(--safe-bottom) + 12px);
  transform: translateX(-50%) translateY(16px);
  background: var(--black);
  color: #fff;
  border-radius: 999px;
  padding: 12px 20px;
  font-weight: 700;
  font-size: 14px;
  opacity: 0;
  pointer-events: none;
  transition: all .22s;
  z-index: 100;
  white-space: nowrap;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ═══════════════════════════════════════
   RESPONSIVE — TABLET 768-1120px
   ═══════════════════════════════════════ */
@media(max-width:1120px) {
  .desktop-nav { display: none; }
  .menu-button { display: grid; }
  .site-header { grid-template-columns: 1fr auto; }
  .hero, .about { grid-template-columns: 1fr; }
  .product-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .category-strip { top: calc(var(--ticker-h) + var(--header-h)); }
  .benefits { grid-template-columns: 1fr; }
  .hero-visual { min-height: 380px; }
}

/* ═══════════════════════════════════════
   MOBILE — max 680px
   Social-media native feel
   ═══════════════════════════════════════ */
@media(max-width:680px) {
  :root { --ticker-h: 32px; --header-h: 61px; }
  body { padding-bottom: calc(var(--bottom-nav-h) + var(--safe-bottom)); }

  /* Header */
  .topline { font-size: 9.5px; padding: 8px 40px 8px 8px; }
  .site-header { padding: 12px 14px; gap: 8px; }
  .logo-svg { width: 150px; height: 36px; }
  .icon-btn, .pill { height: 42px; min-width: 42px; }
  .pill { padding: 0 12px; font-size: 12px; }

  /* Hero → compact on mobile */
  .hero {
    min-height: auto;
    padding: 36px 16px 28px;
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .hero h1 { font-size: 68px; }
  .hero-visual { min-height: 300px; }
  .look-card { border-radius: 22px; }
  .floating-card { right: 0; bottom: 0; }

  /* Stories bar — SHOW on mobile */
  .stories-bar { display: flex; }

  /* Category strip — HIDE on mobile (replaced by stories) */
  .category-strip { display: none; }

  /* Section */
  .section { padding: 32px 14px; }
  .section-head { align-items: flex-start; flex-direction: column; gap: 12px; }
  .search-form { width: 100%; }
  .search-form input { font-size: 16px; }

  /* Product grid → Instagram-style 2-col feed */
  .product-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 10px;
  }
  .product-card { border-radius: 18px; }
  .product-art { height: 180px; }
  .product-art span { font-size: 28px; }
  .product-info { padding: 10px; gap: 4px; }
  .product-info h3 { font-size: 13px; font-weight: 700; }
  .product-info p { display: none; }
  .price b { font-size: 14px; }
  .price del { font-size: 12px; }
  .meta { display: none; }
  .product-actions { grid-template-columns: 1fr; gap: 6px; padding: 0 10px 10px; }
  .btn-outline-sm { display: none; }
  .wish { width: 34px; height: 34px; font-size: 15px; top: 8px; right: 8px; }

  /* Featured row */
  .featured-row { grid-auto-columns: 74vw; }
  .product-art.big { height: 240px; }

  /* About */
  .about { margin: 0 14px 40px; border-radius: 24px; grid-template-columns: 1fr; }
  .benefits { grid-template-columns: 1fr; }

  /* Footer */
  .footer { padding-bottom: calc(var(--bottom-nav-h) + var(--safe-bottom) + 20px); flex-direction: column; align-items: flex-start; gap: 14px; }

  /* Show bottom nav */
  .bottom-nav { display: grid; }

  /* Cart drawer → slide up from bottom */
  .drawer aside {
    right: auto;
    left: 0;
    top: auto;
    bottom: 0;
    width: 100%;
    height: 85svh;
    border-radius: 24px 24px 0 0;
  }

  /* Modals */
  .modal-card { top: auto; bottom: 0; left: 0; right: 0; transform: none; width: 100%; border-radius: 24px 24px 0 0; max-height: 92svh; }
  .checkout-card { width: 100%; }
  .form-grid { grid-template-columns: 1fr; }
  .product-modal { grid-template-columns: 1fr; }
  .product-art.big { height: 200px; }

  /* Toast above bottom nav */
  .toast { bottom: calc(var(--bottom-nav-h) + var(--safe-bottom) + 16px); }
}

@media(max-width:390px) {
  .logo-svg { width: 130px; }
  .hero h1 { font-size: 58px; }
  .product-grid { gap: 8px; }
  .product-info h3 { font-size: 12px; }
  .price b { font-size: 13px; }
}

/* ══════════════════════════════════════════
   NEWS TICKER
   ══════════════════════════════════════════ */
.news-ticker {
  background: var(--yellow);
  color: var(--ink);
  overflow: hidden;
  height: var(--ticker-h);
  display: flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  width: 100%;
  z-index: 120;
  box-shadow: 0 1px 0 rgba(15,15,15,.12), 0 8px 22px rgba(15,15,15,.08);
  transform: translateZ(0);
  will-change: transform;
}
.news-ticker::before,
.news-ticker::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 40px;
  z-index: 2;
  pointer-events: none;
}
.news-ticker::before { left: 0; background: linear-gradient(to right, var(--yellow), transparent); }
.news-ticker::after  { right: 0; background: linear-gradient(to left, var(--yellow), transparent); }
.ticker-label {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .2em;
  text-transform: uppercase;
  padding: 0 14px;
  border-right: 1px solid rgba(15,15,15,.16);
  height: 100%;
  display: flex;
  align-items: center;
  background: rgba(255,255,255,.22);
  z-index: 3;
  position: relative;
}
.ticker-track {
  display: flex;
  gap: 0;
  animation: ticker-scroll 28s linear infinite;
  white-space: nowrap;
}
@keyframes ticker-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 28px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  z-index: 2;
}
.ticker-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(15,15,15,.42);
  flex-shrink: 0;
}
.ticker-new {
  background: var(--red);
  color: #fff;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .12em;
  padding: 2px 7px;
  border-radius: 99px;
}

/* ══════════════════════════════════════════
   PREMIUM WELCOME POPUP
   ══════════════════════════════════════════ */
[data-welcome-popup] {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(14px, 3vw, 28px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .28s ease;
}
[data-welcome-popup][hidden] { display: none !important; }
[data-welcome-popup].is-visible { opacity: 1; pointer-events: auto; }
[data-welcome-popup].sk-hiding { opacity: 0; transition: opacity .32s ease; }
[data-welcome-popup] .shade {
  background: rgba(0,0,0,.68);
  backdrop-filter: blur(12px);
}
.popup-card {
  position: relative;
  z-index: 1;
  width: min(860px, 94vw);
  max-height: 88svh;
  overflow: hidden;
  border-radius: 34px;
  color: #f8f3e8;
  background:
    radial-gradient(circle at 82% 12%, rgba(255,204,31,.28), transparent 34%),
    linear-gradient(135deg, #050505 0%, #111 58%, #050505 100%);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 34px 110px rgba(0,0,0,.44);
  transform: translateY(18px) scale(.98);
  transition: transform .34s cubic-bezier(.2,.8,.2,1);
}
[data-welcome-popup].is-visible .popup-card { transform: translateY(0) scale(1); }
.popup-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 48px 48px;
  opacity: .32;
  pointer-events: none;
}
.popup-card::after {
  content: "AFTERGIG SUPPLY";
  position: absolute;
  right: -44px;
  bottom: 10px;
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(54px, 10vw, 112px);
  letter-spacing: .06em;
  color: rgba(255,255,255,.035);
  pointer-events: none;
  white-space: nowrap;
}
.popup-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 3;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.08);
  color: #fff;
  font-size: 26px;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background .18s ease, transform .18s ease, border-color .18s ease;
}
.popup-close:hover { background: var(--yellow); color: #020202; border-color: var(--yellow); transform: rotate(4deg) scale(1.04); }
.popup-content {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(280px, .95fr);
  gap: clamp(18px, 4vw, 42px);
  align-items: center;
  padding: clamp(24px, 4.2vw, 48px);
}
.popup-copy { max-width: 500px; }
.popup-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--yellow);
  color: #020202;
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 11px;
  font-weight: 1000;
  text-transform: uppercase;
  letter-spacing: .14em;
  box-shadow: 0 12px 30px rgba(255,204,31,.2);
}
.popup-kicker::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #d92531;
  box-shadow: 0 0 0 5px rgba(217,37,49,.16);
}
.popup-copy h2 {
  margin: 16px 0 12px;
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(46px, 8vw, 86px);
  line-height: .86;
  letter-spacing: .025em;
  color: #fff;
  text-transform: uppercase;
  max-width: 9ch;
}
.popup-copy p {
  margin: 0;
  color: rgba(248,243,232,.72);
  font-size: clamp(14px, 1.9vw, 16px);
  line-height: 1.65;
  max-width: 48ch;
}
.popup-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}
.popup-actions .btn-red,
.popup-actions .btn-ghost {
  min-height: 48px;
  border-radius: 999px;
  padding: 0 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 900;
  text-decoration: none;
  cursor: pointer;
}
.popup-actions .btn-red {
  background: var(--yellow);
  color: #020202;
  border: 1px solid var(--yellow);
  box-shadow: 0 18px 42px rgba(255,204,31,.2);
}
.popup-actions .btn-red:hover { transform: translateY(-2px); }
.popup-actions .btn-ghost {
  background: rgba(255,255,255,.06);
  color: #fff;
  border: 1px solid rgba(255,255,255,.16);
}
.popup-actions .btn-ghost:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.28); }
.popup-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
  color: rgba(248,243,232,.62);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .1em;
}
.popup-meta span {
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  padding: 6px 9px;
  background: rgba(255,255,255,.04);
}
.popup-visual {
  display: block;
  text-decoration: none;
  color: inherit;
  position: relative;
  transform: rotate(-2deg);
  transition: transform .22s ease;
}
.popup-visual:hover { transform: rotate(0deg) translateY(-4px); }
.popup-visual-frame {
  position: relative;
  min-height: 330px;
  border-radius: 28px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 35%, rgba(255,255,255,.12), transparent 26%),
    #020202;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 28px 70px rgba(0,0,0,.42);
  display: grid;
  place-items: center;
}
.popup-visual-frame img {
  width: 100%;
  height: 100%;
  min-height: 330px;
  object-fit: cover;
  object-position: center;
  transform: scale(1.02);
  filter: saturate(.95) contrast(1.04);
}
.popup-visual-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(0,0,0,.58));
  pointer-events: none;
}
.popup-visual-frame > span {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 42px;
  letter-spacing: .08em;
  color: rgba(255,255,255,.82);
  text-align: center;
  padding: 24px;
}
.popup-visual-frame em {
  position: absolute;
  left: 18px;
  bottom: 18px;
  z-index: 1;
  font-style: normal;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .16em;
}
.popup-featured-product {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: -22px;
  z-index: 2;
  border-radius: 20px;
  padding: 14px 16px;
  background: rgba(255,255,255,.92);
  color: #020202;
  box-shadow: 0 18px 44px rgba(0,0,0,.2);
  backdrop-filter: blur(12px);
}
.popup-featured-product small {
  display: block;
  color: rgba(2,2,2,.55);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .12em;
}
.popup-featured-product b {
  display: block;
  margin-top: 4px;
  font-size: 15px;
  line-height: 1.18;
}
.popup-featured-product strong {
  display: block;
  margin-top: 6px;
  color: var(--red);
  font-size: 15px;
}
@media(max-width:760px) {
  [data-welcome-popup] {
    align-items: flex-end;
    padding: 10px;
    padding-bottom: calc(74px + env(safe-area-inset-bottom));
  }
  .popup-card {
    width: 100%;
    max-height: calc(100svh - 92px);
    border-radius: 28px 28px 24px 24px;
    overflow-y: auto;
  }
  .popup-close { top: 12px; right: 12px; width: 40px; height: 40px; }
  .popup-content {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 24px 18px 26px;
  }
  .popup-copy h2 {
    font-size: clamp(44px, 13vw, 64px);
    max-width: 8.5ch;
  }
  .popup-copy p { font-size: 14px; line-height: 1.55; }
  .popup-actions { display: grid; grid-template-columns: 1fr; margin-top: 18px; }
  .popup-actions .btn-red,
  .popup-actions .btn-ghost { width: 100%; }
  .popup-meta { display: none; }
  .popup-visual {
    order: -1;
    transform: none;
  }
  .popup-visual-frame { min-height: 190px; border-radius: 22px; }
  .popup-visual-frame img { min-height: 190px; }
  .popup-featured-product {
    position: static;
    margin: -18px 12px 0;
  }
}

/* Mobile menu extras */
.mobile-menu-all {
  background: rgba(255,255,255,.08) !important;
  font-size: 14px !important;
  font-weight: 900 !important;
}
.mobile-menu-sep {
  height: 1px;
  background: rgba(255,255,255,.1);
  margin: 4px 0;
}
.mobile-menu-view {
  color: var(--red) !important;
  font-weight: 900 !important;
  border-color: rgba(181,31,37,.3) !important;
}

/* Payment manual checkout */
.payment-choice {
  border: 1.5px solid var(--line);
  border-radius: 18px;
  background: #fff;
  padding: 14px;
  margin: 2px 0 12px;
}
.payment-choice > b {
  display: block;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 10px;
}
.payment-options {
  display: grid;
  gap: 8px;
}
.pay-option {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  border: 1.5px solid var(--line);
  border-radius: 16px;
  background: #fbf7ef;
  padding: 12px;
  cursor: pointer;
}
.pay-option input {
  width: auto;
  min-height: auto;
  margin: 3px 0 0;
}
.pay-option strong {
  display: block;
  color: var(--ink);
  font-size: 14px;
}
.pay-option small {
  display: block;
  color: var(--muted);
  line-height: 1.4;
  margin-top: 3px;
}
.payment-result {
  border: 1.5px solid var(--line);
  border-radius: 20px;
  background: #fff;
  padding: 16px;
  margin-top: 12px;
}
.payment-result h3 {
  font-size: 22px;
  letter-spacing: -.04em;
  margin-bottom: 6px;
}
.payment-result p {
  margin: 0 0 12px;
  color: var(--muted);
}
.payment-box {
  border: 1.5px dashed #d8c9b2;
  border-radius: 18px;
  background: #fffaf0;
  padding: 14px;
  margin: 12px 0;
}
.payment-line {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  padding: 10px 0;
  font-size: 14px;
}
.payment-line:last-child { border-bottom: 0; }
.payment-line span { color: var(--muted); }
.payment-line b { text-align: right; }
.qris-preview {
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  padding: 12px;
  margin: 12px 0;
}
.qris-preview img {
  width: min(280px, 82vw);
  max-height: 360px;
  object-fit: contain;
}
.copy-hint {
  display: inline-flex;
  border-radius: 999px;
  background: var(--yellow);
  color: #020202;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 800;
}

/* PRODUCT MULTI IMAGE GALLERY */
.gallery-count {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 3;
  border-radius: 999px;
  padding: 5px 9px;
  background: rgba(255,255,255,.86);
  color: var(--ink);
  border: 1px solid rgba(0,0,0,.08);
  backdrop-filter: blur(8px);
  font-style: normal;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .02em;
}
.quick-gallery { display: grid; gap: 10px; }
.quick-thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(58px, 1fr));
  gap: 8px;
}
.quick-thumbs button {
  border: 1.5px solid var(--line);
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  padding: 0;
  aspect-ratio: 1/1;
  cursor: pointer;
}
.quick-thumbs button.is-active { border-color: var(--black); box-shadow: 0 0 0 3px rgba(0,0,0,.08); }
.quick-thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media(max-width:680px){ .quick-thumbs{ grid-template-columns: repeat(5, 1fr); } }


/* PRODUCT DETAIL DIRECT PAGE */
a.mini-product { color: inherit; text-decoration: none; }
.product-detail-section { scroll-margin-top: 108px; }
.product-detail-card {
  border: 1px solid var(--line);
  border-radius: 34px;
  background: #fff;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr);
  box-shadow: 0 22px 70px rgba(0,0,0,.08);
}
.product-detail-gallery { padding: 18px; display: grid; gap: 12px; background: linear-gradient(180deg,#fafafa,#fff); }
.product-detail-main {
  min-height: min(62vh, 620px);
  border-radius: 24px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--accent, #020202), #020202);
  display: grid;
  place-items: center;
  position: relative;
}
.product-detail-main span {
  color: rgba(255,255,255,.9);
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(64px, 12vw, 150px);
  letter-spacing: .08em;
}
.product-detail-main img { width: 100%; height: 100%; object-fit: cover; display: block; position: absolute; inset: 0; }
.product-detail-main.has-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,.18));
  pointer-events: none;
}
.product-detail-thumbs { display: grid; grid-template-columns: repeat(auto-fill,minmax(74px,1fr)); gap: 10px; }
.product-detail-thumbs button {
  border: 1.5px solid var(--line);
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  padding: 0;
  aspect-ratio: 1/1;
  cursor: pointer;
}
.product-detail-thumbs button.is-active { border-color: var(--black); box-shadow: 0 0 0 4px rgba(0,0,0,.07); }
.product-detail-thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
.product-detail-copy { padding: clamp(24px,4vw,54px); display: flex; flex-direction: column; justify-content: center; gap: 16px; }
.back-link { width: fit-content; color: var(--muted); font-size: 13px; font-weight: 800; text-decoration: none; }
.back-link:hover { color: var(--black); text-decoration: underline; }
.product-detail-copy h1 { font-family: 'Bebas Neue', sans-serif; font-size: clamp(48px,7vw,98px); line-height: .88; letter-spacing: .01em; }
.product-detail-desc { color: var(--muted); font-size: 15px; line-height: 1.7; max-width: 58ch; }
.product-detail-price { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.product-detail-price b { font-size: clamp(24px,3vw,38px); font-weight: 900; }
.product-detail-price del { color: #aaa; font-size: 18px; }
.product-detail-meta { display: flex; flex-wrap: wrap; gap: 8px; }
.product-detail-meta span { border: 1px solid var(--line); border-radius: 999px; padding: 8px 12px; font-size: 12px; color: var(--muted); background: var(--soft); }
.product-detail-meta b { color: var(--ink); }
.detail-size-label { display: grid; gap: 8px; font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; }
.detail-size-select { height: 48px; border: 1.5px solid var(--line); border-radius: 14px; padding: 0 14px; font: inherit; background: #fff; max-width: 260px; }
.product-detail-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.product-detail-actions .btn { min-height: 48px; }
@media(max-width:900px){
  .product-detail-card { grid-template-columns: 1fr; border-radius: 24px; }
  .product-detail-gallery { padding: 12px; }
  .product-detail-main { min-height: 430px; border-radius: 18px; }
}
@media(max-width:560px){
  .product-detail-section { margin-left: 10px; margin-right: 10px; }
  .product-detail-main { min-height: 340px; }
  .product-detail-copy { padding: 20px; }
  .product-detail-actions .btn { width: 100%; justify-content: center; }
}

/* Responsive header refinement */
.site-header {
  gap: clamp(10px, 2vw, 24px);
}
.brand { min-width: 0; }
.logo-svg {
  width: clamp(128px, 13vw, 180px);
}
.desktop-nav {
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  gap: clamp(12px, 1.7vw, 28px);
  font-size: clamp(10px, .78vw, 12px);
}
.desktop-nav::-webkit-scrollbar { display: none; }
.desktop-nav a {
  white-space: nowrap;
  flex: 0 0 auto;
}
.header-actions { flex: 0 0 auto; }
@media(max-width:1320px) {
  .desktop-nav { justify-content: flex-start; }
  .ig-link { display: none; }
}
@media(max-width:680px) {
  .site-header { grid-template-columns: minmax(104px,1fr) auto; }
  .logo-svg { width: clamp(112px, 38vw, 150px); }
  .header-actions { gap: 6px; }
  .icon-btn, .pill { height: clamp(38px, 10.6vw, 42px); min-width: clamp(38px, 10.6vw, 42px); }
  .pill { font-size: clamp(10px, 2.8vw, 12px); padding-inline: clamp(8px, 2.8vw, 12px); }
}
@media(max-width:430px) {
  .header-actions .pill { display: none; }
}

/* Checkout Indonesia region dropdowns */
.checkout-location {
  grid-column: 1 / -1;
  border: 1.5px solid var(--line);
  border-radius: 20px;
  background: #fffaf0;
  padding: 14px;
  margin-bottom: 10px;
}
.location-head {
  display: grid;
  gap: 4px;
  margin-bottom: 12px;
}
.location-head b {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.location-head small,
.location-status {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}
.location-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.location-grid select {
  margin-bottom: 0;
  background: #fff;
}
.location-grid select[data-region-postal] {
  grid-column: 1 / -1;
}
.location-grid select:disabled {
  background: #f2eee7;
  color: #93887b;
  cursor: not-allowed;
}
.location-status {
  display: block;
  margin-top: 10px;
  font-weight: 700;
}
.location-status.is-error { color: var(--red); }
@media(max-width:680px) {
  .location-grid { grid-template-columns: 1fr; }
  .checkout-location { border-radius: 18px; padding: 12px; }
}
.manual-region-toggle {
  margin-top: 10px;
  border: 0;
  background: transparent;
  color: #020202;
  font-weight: 900;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
  font-size: 12px;
}
.manual-region-panel {
  display: none;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
}
.checkout-location.manual-mode .manual-region-panel,
.checkout-location.postal-manual-mode .manual-region-panel { display: grid; }
.checkout-location.manual-mode .location-grid {
  opacity: .45;
}
.checkout-location.postal-manual-mode select[data-region-postal] {
  opacity: .55;
}
.manual-region-panel input {
  margin-bottom: 0;
  background: #fff;
}
.manual-region-panel input:disabled {
  background: #f2eee7;
  color: #93887b;
  cursor: not-allowed;
}
@media(max-width:680px) {
  .manual-region-panel { grid-template-columns: 1fr; }
}

/* Checkout shipping / Indonesian expedition API */
.shipping-choice{margin:16px 0;border:1px solid rgba(17,17,17,.12);background:#fff;border-radius:22px;padding:16px;box-shadow:0 14px 36px rgba(0,0,0,.06)}
.shipping-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}
.shipping-head b{display:block;font-weight:950;letter-spacing:-.02em;color:#020202}.shipping-head small{display:block;color:#777;font-size:12px;line-height:1.35;margin-top:2px}.mini-link{border:1px solid rgba(17,17,17,.14);background:#f7f3ea;border-radius:999px;padding:8px 12px;font-weight:900;cursor:pointer;white-space:nowrap}.mini-link:hover{background:#020202;color:#fff}.shipping-status{font-size:12px;color:#6b6258;background:#f7f3ea;border-radius:14px;padding:10px 12px;margin-bottom:10px}.shipping-status.is-error{color:#8f1d18;background:#fff1ef}.shipping-options{display:grid;gap:10px}.ship-option{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;border:1px solid rgba(17,17,17,.12);background:#fff;border-radius:18px;padding:12px;cursor:pointer;transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease}.ship-option:hover,.ship-option.is-selected{border-color:#020202;box-shadow:0 10px 26px rgba(0,0,0,.08);transform:translateY(-1px)}.ship-option input{width:auto;accent-color:#020202}.ship-option strong{display:block;color:#020202;font-size:14px}.ship-option small{display:block;color:#777;font-size:11px;line-height:1.35;margin-top:2px}.ship-option b{font-size:14px;color:#020202;white-space:nowrap}.ship-loading{border:1px dashed rgba(17,17,17,.2);border-radius:16px;padding:14px;text-align:center;color:#777;background:#faf8f3}
@media(max-width:560px){.shipping-head{flex-direction:column}.mini-link{width:100%}.ship-option{grid-template-columns:auto 1fr}.ship-option b{grid-column:2;text-align:left}}

/* Verified official store badge */
.store-verified-line,
.official-store-line {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: fit-content;
}
.look-card .store-verified-line {
  justify-self: center;
  margin-top: 12px;
}
.verified-badge {
  display: inline-grid;
  place-items: center;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: #0095f6;
  color: #fff;
  font-size: 12px;
  font-weight: 950;
  font-style: normal;
  line-height: 1;
  box-shadow: 0 0 0 2px rgba(255,255,255,.95), 0 8px 18px rgba(0,149,246,.25);
  flex: 0 0 auto;
}
.official-store-line {
  border: 1px solid #d8ecff;
  background: #f3f9ff;
  color: #1b517e;
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.official-store-line b { color: #020202; }
.product-detail-section .product-detail-card { margin-top: 0; }


/* Mobile header: top cart is replaced by login/account button.
   Cart remains accessible from the bottom navigation on mobile. */
@media(max-width:680px) {
  .header-actions .cart-button,
  .header-actions .desktop-cart-button {
    display: none !important;
  }
  .header-actions .pill {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: auto;
    max-width: 92px;
    padding: 0 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
@media(max-width:430px) {
  .header-actions .pill {
    display: inline-flex !important;
    max-width: 78px;
    padding-inline: 10px;
  }
  .header-actions { gap: 5px; }
  .logo-svg { width: clamp(104px, 34vw, 132px); }
}


/* Sticky ticker + product-first slider override */
.news-ticker { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; z-index: 120 !important; }
.topline { margin-top: var(--ticker-h) !important; }
.site-header { top: var(--ticker-h) !important; z-index: 110 !important; }
.hero-actions-inside-image .btn-ghost-light, .hero-product-target { display: none !important; }
@media(max-width:960px) {
  .hero-slider { min-height: 72svh; padding: 12px 12px 58px; }
  .hero-slider-track { min-height: 64svh; }
  .hero-slide-overlay { width: 100%; padding: 28px 22px; }
  .hero-slide h1 { max-width: 9.4ch; font-size: clamp(48px, 14vw, 86px); }
}
@media(max-width:680px) {
  .hero-slider { min-height: auto; padding: 10px 10px 58px; }
  .hero-slider-track { min-height: 520px; }
  .hero-slide-frame { border-radius: 22px; }
  .hero-slide-frame:before {
    background:
      linear-gradient(180deg, rgba(0,0,0,.04) 0%, rgba(0,0,0,.22) 45%, rgba(0,0,0,.82) 100%);
  }
  .hero-slide-image { object-position: center center; transform: scale(1.02); }
  .hero-slide-overlay { justify-content: flex-end; padding: 22px 16px; }
  .hero-slide h1 { font-size: clamp(44px, 15vw, 72px); max-width: 8.6ch; margin-bottom: 10px; }
  .hero-slide p { font-size: 13px; max-width: 32ch; }
  .hero-actions-inside-image { margin-top: 16px; }
  .hero-actions-inside-image .btn { width: auto; min-width: 132px; min-height: 42px; padding-inline: 18px; }
}

/* Homepage product shelves: New Arrival / category highlights */
.product-shelves {
  display: grid;
  gap: clamp(28px, 4vw, 44px);
}
.product-shelf {
  border-bottom: 1px solid var(--line);
  padding-bottom: clamp(28px, 4vw, 44px);
}
.product-shelf:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.shelf-head {
  margin-bottom: 16px;
}
.shelf-head h2 {
  font-size: clamp(34px, 4vw, 58px);
}
.see-all-link {
  border: 1.5px solid var(--line);
  border-radius: 999px;
  padding: 10px 16px;
  text-decoration: none !important;
  background: #fff;
  color: var(--ink);
  font-weight: 900 !important;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 11px !important;
  white-space: nowrap;
}
.see-all-link:hover {
  background: var(--black);
  border-color: var(--black);
  color: #fff;
}
.featured-row.shelf-row {
  grid-auto-flow: initial;
  grid-auto-columns: initial;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: visible;
  padding-bottom: 0;
  scroll-snap-type: none;
}
.featured-row.shelf-row .mini-product {
  min-width: 0;
}
.featured-row.shelf-row .product-art {
  height: clamp(190px, 19vw, 260px);
}
@media(max-width:900px) {
  .featured-row.shelf-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
}
@media(max-width:560px) {
  .product-shelves { gap: 30px; }
  .product-shelf { padding-bottom: 30px; }
  .shelf-head {
    flex-direction: row;
    align-items: center;
  }
  .shelf-head h2 {
    font-size: 30px;
  }
  .see-all-link {
    padding: 8px 11px;
    font-size: 10px !important;
  }
  .featured-row.shelf-row .product-art {
    height: 176px;
  }
  .featured-row.shelf-row .mini-product {
    padding: 8px;
    border-radius: 16px;
  }
}

/* SEARCH POPUP UPDATE */
.modal-lock { overflow: hidden; }
.shop-filter-note {
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 12px 14px;
  background: #fff;
}
.shop-filter-note p { margin: 0; color: var(--muted); font-weight: 700; }
.search-card {
  width: min(720px, 94vw);
  padding: 26px;
}
.search-card .eyebrow { margin-bottom: 8px; }
.search-card h2 { padding-right: 42px; }
.search-input-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  min-height: 56px;
  padding: 0 18px;
  margin: 18px 0 14px;
  background: #fff;
}
.search-input-wrap svg { flex: 0 0 auto; color: var(--ink); }
.search-input-wrap input {
  border: 0;
  outline: 0;
  min-height: 52px;
  margin: 0;
  padding: 0;
  font-size: 17px;
  font-weight: 700;
  flex: 1;
}
.search-input-wrap input:focus { border: 0; }
.search-results { display: grid; gap: 10px; }
.search-result-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--muted);
  font-weight: 800;
  padding: 4px 2px;
}
.search-result-list { display: grid; gap: 8px; }
.search-result {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 12px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 9px;
  background: #fff;
  color: inherit;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.search-result:hover {
  transform: translateY(-1px);
  border-color: rgba(0,0,0,.22);
  box-shadow: 0 14px 34px rgba(0,0,0,.08);
}
.search-result-thumb {
  width: 64px;
  height: 64px;
  border-radius: 14px;
  overflow: hidden;
  background: var(--black);
  color: #fff;
  display: grid;
  place-items: center;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 20px;
  letter-spacing: .06em;
}
.search-result-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.search-result-body { min-width: 0; display: grid; gap: 4px; }
.search-result-body b {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 15px;
}
.search-result-body small {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  font-weight: 700;
}
.search-result strong {
  font-size: 14px;
  white-space: nowrap;
}
.search-empty {
  border: 1px dashed var(--line);
  border-radius: 18px;
  padding: 22px;
  color: var(--muted);
  font-weight: 700;
  text-align: center;
}
@media(max-width:720px) {
  .search-card { padding: 22px 16px calc(18px + var(--safe-bottom)); }
  .search-input-wrap { min-height: 54px; margin-top: 14px; }
  .search-input-wrap input { font-size: 16px; }
  .search-result { grid-template-columns: 56px 1fr; }
  .search-result-thumb { width: 56px; height: 56px; }
  .search-result strong { grid-column: 2; font-size: 13px; }
}


/* Slider & search no-crop update
   Uploaded poster/slider artwork is shown completely, not cut by object-fit cover. */
.hero-slider {
  background:
    radial-gradient(circle at 75% 18%, rgba(255,210,31,.20), transparent 34rem),
    #020202;
}
.hero-slide-frame {
  background: #020202;
}
.hero-slide-bg {
  position: absolute;
  inset: -24px;
  width: calc(100% + 48px);
  height: calc(100% + 48px);
  object-fit: cover;
  object-position: center center;
  display: block;
  filter: blur(24px) saturate(1.08);
  opacity: .48;
  transform: scale(1.04);
  z-index: 0;
}
.hero-slide-image {
  z-index: 1;
  object-fit: contain !important;
  object-position: center center !important;
  transform: none !important;
  background: transparent;
}
.hero-slide-frame:before {
  z-index: 2;
  background:
    linear-gradient(90deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.38) 35%, rgba(0,0,0,.05) 70%, rgba(0,0,0,.30) 100%),
    linear-gradient(180deg, rgba(0,0,0,.06) 0%, rgba(0,0,0,.08) 48%, rgba(0,0,0,.64) 100%);
}
.hero-slide-overlay {
  z-index: 3;
}
@media(max-width:720px) {
  .hero-slider-track { min-height: 520px; }
  .hero-slide-frame:before {
    background: linear-gradient(180deg, rgba(0,0,0,.10) 0%, rgba(0,0,0,.16) 44%, rgba(0,0,0,.76) 100%);
  }
  .hero-slide-overlay { width: 100%; }
}

/* Search popup no-crop thumbnails */
.search-result-thumb {
  background: #f5f2ea;
  border: 1px solid rgba(17,17,17,.08);
}
.search-result-thumb img {
  object-fit: contain !important;
  object-position: center center !important;
  padding: 4px;
  background: #fff;
}
.search-result.is-enter-target {
  border-color: #020202;
  box-shadow: 0 16px 36px rgba(0,0,0,.10);
}
.search-enter-hint {
  margin-top: 8px;
  font-size: 11px;
  color: var(--muted);
  font-weight: 800;
  letter-spacing: .04em;
}

/* Professional index.php refinements */
.skip-link{position:fixed;left:16px;top:16px;z-index:99999;transform:translateY(-140%);background:#020202;color:#fff;padding:10px 14px;border-radius:999px;font-size:13px;font-weight:800;text-decoration:none;box-shadow:0 12px 30px rgba(0,0,0,.25);transition:transform .18s ease}
.skip-link:focus{transform:translateY(0)}
.product-breadcrumb{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px;font-size:12px;font-weight:700;color:rgba(0,0,0,.52);text-transform:uppercase;letter-spacing:.04em}
.product-breadcrumb a{color:inherit;text-decoration:none}
.product-breadcrumb a:hover{color:#020202}
.product-breadcrumb span{opacity:.45}.product-breadcrumb b{color:#020202;font-weight:900;max-width:420px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
button:disabled,.btn[disabled]{opacity:.52;cursor:not-allowed;filter:grayscale(.15)}
@media(max-width:680px){.product-breadcrumb{font-size:11px;margin-top:2px}.product-breadcrumb b{max-width:220px}}

/* =========================================================
   PROFESSIONAL DESKTOP + MOBILE AUDIT FIX — 2026-05
   Focus: sticky ticker, cleaner homepage, refined slider,
   responsive listing, non-cropped images.
   ========================================================= */
html { overflow-x: hidden; scroll-padding-top: calc(var(--ticker-h) + var(--header-h) + 18px); }
body {
  overflow-x: hidden;
  padding-top: var(--ticker-h);
  background: #fbfaf7;
}
.news-ticker {
  position: fixed !important;
  inset-block-start: 0 !important;
  inset-inline: 0 !important;
  z-index: 9999 !important;
  height: var(--ticker-h) !important;
  transform: translate3d(0,0,0) !important;
  -webkit-transform: translate3d(0,0,0) !important;
  backface-visibility: hidden;
  contain: layout paint;
}
.topline { margin-top: 0 !important; }
.site-header {
  position: sticky !important;
  top: var(--ticker-h) !important;
  z-index: 9990 !important;
  border-bottom-color: rgba(255,255,255,.08);
  box-shadow: 0 10px 28px rgba(0,0,0,.10);
}
.mobile-menu.open {
  position: sticky;
  top: calc(var(--ticker-h) + var(--header-h));
  z-index: 9980;
  box-shadow: 0 18px 40px rgba(0,0,0,.18);
}

/* Header readability */
.desktop-nav { gap: clamp(10px, 1.35vw, 22px); font-size: clamp(9.5px, .72vw, 11.5px); }
.header-actions .pill { white-space: nowrap; }
@media (min-width:1121px) and (max-width:1260px) {
  .logo-svg { width: 142px; }
  .desktop-nav { gap: 10px; letter-spacing: .06em; }
  .icon-btn, .pill { height: 40px; min-width: 40px; }
}

/* Slider: editorial poster style, cleaner on desktop & mobile */
.hero-slider {
  min-height: auto !important;
  padding: clamp(16px, 2.6vw, 34px) clamp(14px, 4vw, 64px) clamp(44px, 4vw, 70px) !important;
  background: linear-gradient(180deg, #020202 0%, #020202 100%) !important;
}
.hero-slider-track {
  min-height: unset !important;
  max-width: 1480px !important;
  height: clamp(430px, 55vw, 680px) !important;
  margin-inline: auto !important;
}
.hero-slide-frame {
  min-height: unset !important;
  height: 100% !important;
  border-radius: clamp(20px, 2.4vw, 34px) !important;
  background: #020202 !important;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 26px 80px rgba(0,0,0,.38) !important;
}
.hero-slide-bg {
  inset: -34px !important;
  width: calc(100% + 68px) !important;
  height: calc(100% + 68px) !important;
  object-fit: cover !important;
  filter: blur(26px) saturate(1.12) brightness(.72) !important;
  opacity: .58 !important;
}
.hero-slide-image {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  padding: clamp(10px, 1.8vw, 28px) !important;
  transform: none !important;
  z-index: 1 !important;
}
.hero-slide-frame:before {
  z-index: 2 !important;
  background:
    linear-gradient(90deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.52) 33%, rgba(0,0,0,.12) 64%, rgba(0,0,0,.26) 100%),
    linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.22) 52%, rgba(0,0,0,.74) 100%) !important;
}
.hero-slide-overlay {
  z-index: 3 !important;
  width: min(560px, 58vw) !important;
  min-height: 100% !important;
  padding: clamp(26px, 4.5vw, 64px) !important;
}
.hero-slide-overlay .eyebrow { margin-bottom: 12px; }
.hero-slide h1 {
  font-size: clamp(46px, 6.8vw, 102px) !important;
  max-width: 9.6ch !important;
  line-height: .88 !important;
}
.hero-slide p { max-width: 42ch !important; }
.hero-actions-inside-image .btn {
  min-height: 46px;
  border-radius: 999px;
  padding-inline: 22px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.hero-slider-controls {
  bottom: clamp(16px, 2.6vw, 28px) !important;
  left: clamp(20px, 5vw, 88px) !important;
  right: clamp(20px, 5vw, 88px) !important;
}

/* Homepage shelves should feel premium, not crowded */
.product-shelves { background: #fbfaf7; }
.product-shelf { border-bottom-color: rgba(15,15,15,.08); }
.featured-row.shelf-row .mini-product {
  background: #fff;
  box-shadow: 0 12px 34px rgba(0,0,0,.045);
}
.featured-row.shelf-row .product-art,
.product-card .product-art {
  aspect-ratio: 4 / 5;
  height: auto !important;
  background: #f3efe8;
}
.product-art img,
.popup-art img,
.product-detail-main img {
  object-fit: contain !important;
  object-position: center center !important;
  padding: 8px;
  background: #f8f4ee;
}
.product-art.has-image::after { background: linear-gradient(180deg, rgba(0,0,0,0) 68%, rgba(0,0,0,.10)); }
.gallery-count { z-index: 4; }

/* Dedicated product listing page */
.listing-hero {
  padding-top: clamp(34px, 5vw, 70px) !important;
  padding-bottom: clamp(20px, 3vw, 34px) !important;
  background:
    radial-gradient(circle at 85% 0%, rgba(255,210,31,.30), transparent 28rem),
    linear-gradient(180deg, #fffaf0, #fbfaf7);
  border-bottom: 1px solid rgba(15,15,15,.07);
}
.listing-hero h1 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(54px, 7vw, 112px);
  line-height: .86;
  letter-spacing: .01em;
  text-transform: uppercase;
  margin-top: 8px;
}
.listing-hero p:not(.eyebrow) {
  max-width: 640px;
  color: var(--muted);
  font-size: clamp(14px, 1.4vw, 18px);
  margin-top: 10px;
}
.shop { padding-top: clamp(24px, 4vw, 46px) !important; }
.product-card { background: #fff; }
.product-card .card-link { z-index: 1; }
.product-card .wish,
.product-card .product-actions { z-index: 4; }
.product-info h3 { min-height: 2.25em; }
.product-actions .btn { border-radius: 999px; }

/* Search modal refinement */
.search-card { max-height: min(760px, 90svh); overflow: auto; }
.search-result-thumb img { object-fit: contain !important; padding: 4px !important; background: #fff !important; }
.search-result.is-enter-target { outline: 2px solid rgba(255,210,31,.75); outline-offset: 1px; }

/* Detail page product image should not crop */
.product-detail-main { background: #f4efe8 !important; }
.product-detail-main.has-image::after { background: linear-gradient(180deg, rgba(0,0,0,0) 72%, rgba(0,0,0,.08)); }
.product-detail-thumbs img { object-fit: contain !important; padding: 3px; background: #fff; }

@media(max-width:960px) {
  .hero-slider-track { height: clamp(470px, 68svh, 620px) !important; }
  .hero-slide-overlay { width: 100% !important; padding: 26px 22px !important; justify-content: flex-end !important; }
  .hero-slide-frame:before {
    background: linear-gradient(180deg, rgba(0,0,0,.06) 0%, rgba(0,0,0,.18) 42%, rgba(0,0,0,.82) 100%) !important;
  }
  .hero-slide h1 { font-size: clamp(46px, 13vw, 82px) !important; max-width: 10ch !important; }
}
@media(max-width:680px) {
  :root { --ticker-h: 34px; --header-h: 62px; }
  body { padding-bottom: calc(var(--bottom-nav-h) + var(--safe-bottom)); }
  .news-ticker { box-shadow: 0 1px 0 rgba(0,0,0,.16), 0 8px 22px rgba(0,0,0,.12); }
  .ticker-label { font-size: 9px; padding-inline: 10px; letter-spacing: .16em; }
  .ticker-item { font-size: 10px; padding-inline: 16px; gap: 7px; }
  .topline { display: none; }
  .site-header { top: var(--ticker-h) !important; padding: 10px 12px !important; }
  .header-actions .pill { display: inline-grid; }
  .desktop-cart-button { display: none !important; }
  .menu-button { display: grid !important; }
  .mobile-menu.open { top: calc(var(--ticker-h) + var(--header-h)); }

  .hero-slider { padding: 10px 10px 54px !important; }
  .hero-slider-track { height: min(560px, 132vw) !important; min-height: 455px !important; }
  .hero-slide-frame { border-radius: 22px !important; }
  .hero-slide-image { padding: 8px !important; }
  .hero-slide-overlay { padding: 20px 16px !important; }
  .hero-slide-overlay .eyebrow { font-size: 9px; padding: 7px 10px; }
  .hero-slide h1 { font-size: clamp(42px, 14vw, 68px) !important; max-width: 9.5ch !important; }
  .hero-slide p { font-size: 13px !important; max-width: 31ch !important; }
  .hero-actions-inside-image .btn { min-height: 42px; padding-inline: 18px; min-width: 126px; }
  .hero-slider-controls { left: 14px !important; right: 14px !important; bottom: 13px !important; }
  .hero-slider-dots { padding: 8px 10px; }

  .stories-bar { padding: 14px 12px; gap: 12px; background: #fff; }
  .story-ring { width: 52px; height: 52px; }
  .story-circle { font-size: 18px; }
  .section { padding-inline: 12px !important; }
  .shelf-head { align-items: center !important; gap: 8px !important; }
  .shelf-head .eyebrow { font-size: 10px; }
  .shelf-head h2 { font-size: 26px !important; }
  .featured-row.shelf-row { gap: 9px !important; }
  .featured-row.shelf-row .mini-product { padding: 8px; border-radius: 16px; }
  .mini-product b { font-size: 13px; }
  .mini-product small { font-size: 9px; }
  .mini-product strong { font-size: 13px; }
  .product-grid { gap: 9px !important; }
  .product-info h3 { min-height: auto; }
  .product-actions .btn { min-height: 38px; font-size: 12px; }
  .listing-hero { padding-top: 28px !important; }
  .listing-hero h1 { font-size: clamp(46px, 14vw, 72px); }
  .listing-hero p:not(.eyebrow) { font-size: 13px; }
  .search-card { max-height: 88svh; }
  .search-result { border-radius: 16px; }
  .search-result strong { justify-self: start; }
}
@media(max-width:380px) {
  .logo-svg { width: 112px !important; }
  .icon-btn, .pill { height: 38px !important; min-width: 38px !important; }
  .pill { font-size: 10px; padding-inline: 8px; }
  .hero-slider-track { min-height: 430px !important; }
}


/* =========================================================
   MODAL / CART / SEARCH POPUP FIX — 2026-05-23
   Prevent sticky ticker/header from cutting popups and prevent
   search + cart from stacking on top of each other.
   ========================================================= */
html.modal-lock,
html.modal-lock body {
  overflow: hidden !important;
  height: 100%;
}
.drawer,
.modal {
  z-index: 50000 !important;
  isolation: isolate;
}
.drawer.open,
.modal.open {
  display: block !important;
}
.drawer .shade,
.modal .shade {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  background: rgba(8,8,8,.54) !important;
  backdrop-filter: blur(8px) saturate(115%);
  -webkit-backdrop-filter: blur(8px) saturate(115%);
}
.drawer aside {
  z-index: 2 !important;
  top: 0 !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  overflow: hidden;
}
.drawer header {
  position: sticky;
  top: 0;
  z-index: 3;
  background: #fff;
  padding-top: max(18px, env(safe-area-inset-top));
}
.drawer footer {
  position: sticky;
  bottom: 0;
  z-index: 3;
  background: #fff;
  padding-bottom: max(18px, calc(18px + env(safe-area-inset-bottom)));
}
.modal-card {
  z-index: 2 !important;
}
.search-modal.open {
  display: grid !important;
  place-items: center !important;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
}
.search-modal .search-card {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
  width: min(820px, calc(100vw - 32px)) !important;
  max-height: min(760px, calc(100dvh - 32px)) !important;
  overflow: auto !important;
  overscroll-behavior: contain;
}
.search-modal .x,
.drawer header button,
.modal-card .x {
  cursor: pointer;
}
.search-result {
  position: relative;
  z-index: 1;
}
@media (max-width: 720px) {
  .drawer aside {
    width: 100vw !important;
    border-radius: 22px 22px 0 0;
  }
  .search-modal.open {
    align-items: start !important;
    padding-top: 14px;
  }
  .search-modal .search-card {
    width: calc(100vw - 20px) !important;
    max-height: calc(100dvh - 28px) !important;
    border-radius: 24px !important;
    padding: 20px 14px calc(18px + env(safe-area-inset-bottom)) !important;
  }
}

/* =========================================================
   FINAL DESKTOP/MOBILE HEADER + LANGUAGE FIX — 2026-05-23
   Request: remove upper info bar, keep ticker + header locked,
   remove top blank space, activate ID/EN on desktop and mobile.
   ========================================================= */
:root {
  --ticker-h: 36px;
  --header-h: 84px;
}
html {
  scroll-padding-top: calc(var(--ticker-h) + var(--header-h) + 16px) !important;
}
body {
  padding-top: var(--ticker-h) !important;
  margin: 0 !important;
  min-height: 100dvh;
  overflow-x: hidden !important;
}
/* The former FREE ONGKIR / SECURE CHECKOUT / MANUAL PAYMENT strip is removed. */
.topline,
body > .topline {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}
.news-ticker {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: var(--ticker-h) !important;
  z-index: 99999 !important;
  transform: translate3d(0,0,0) !important;
  -webkit-transform: translate3d(0,0,0) !important;
  backface-visibility: hidden !important;
  contain: paint !important;
}
.site-header {
  position: sticky !important;
  top: var(--ticker-h) !important;
  z-index: 99990 !important;
  min-height: var(--header-h) !important;
  margin: 0 !important;
  border-top: 0 !important;
  box-shadow: 0 12px 34px rgba(0,0,0,.22) !important;
}
main,
#main-content {
  margin-top: 0 !important;
}
.lang-switch {
  height: 44px;
  min-width: 62px;
  padding: 0 11px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
  background: rgba(255,255,255,.055);
  color: rgba(255,255,255,.78);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.lang-switch a {
  opacity: .48;
  transition: opacity .16s ease, color .16s ease;
}
.lang-switch a:hover,
.lang-switch a.active {
  opacity: 1;
  color: #fff;
}
.lang-switch span { opacity: .35; }
.mobile-menu-lang {
  display: none;
}
.header-actions {
  flex-wrap: nowrap !important;
}
.desktop-nav {
  min-width: 0;
  gap: clamp(14px, 1.55vw, 28px) !important;
  font-size: clamp(10px, .82vw, 12px) !important;
}
.logo-svg {
  width: clamp(132px, 10.2vw, 180px) !important;
}
@media(max-width:1120px) {
  :root { --header-h: 76px; }
  .site-header {
    grid-template-columns: auto 1fr auto !important;
    gap: 14px !important;
    padding-inline: clamp(14px, 3vw, 32px) !important;
  }
  .desktop-nav { gap: 12px !important; }
  .ig-link { display: none !important; }
}
@media(max-width:840px) {
  :root { --ticker-h: 34px; --header-h: 64px; }
  body { padding-bottom: calc(var(--bottom-nav-h) + var(--safe-bottom)) !important; }
  .site-header {
    grid-template-columns: auto 1fr !important;
    min-height: var(--header-h) !important;
    padding: 9px 12px !important;
    gap: 8px !important;
  }
  .desktop-nav { display: none !important; }
  .header-actions {
    justify-content: flex-end !important;
    gap: 6px !important;
    min-width: 0 !important;
  }
  .header-actions .icon-btn,
  .header-actions .pill,
  .header-actions .lang-switch {
    height: 38px !important;
    min-width: 38px !important;
  }
  .header-actions .pill {
    max-width: 76px !important;
    padding: 0 9px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 10px !important;
  }
  .header-actions .lang-switch {
    min-width: 54px !important;
    padding: 0 8px !important;
    font-size: 10px !important;
    gap: 3px !important;
  }
  .desktop-cart-button { display: none !important; }
  .menu-button { display: grid !important; }
  .logo-svg { width: clamp(106px, 31vw, 132px) !important; height: 36px !important; }
  .ticker-label { max-width: 112px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ticker-track { animation-duration: 24s !important; }
  .mobile-menu.open {
    position: sticky !important;
    top: calc(var(--ticker-h) + var(--header-h)) !important;
    z-index: 99980 !important;
    border-radius: 0 0 22px 22px !important;
    box-shadow: 0 18px 44px rgba(0,0,0,.24) !important;
  }
  .mobile-menu-lang {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    width: max-content;
    margin: 2px 0 10px;
    padding: 8px 12px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 999px;
    background: rgba(255,255,255,.06);
    color: rgba(255,255,255,.72);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
  }
  .mobile-menu-lang a { opacity: .5; }
  .mobile-menu-lang a.active { opacity: 1; color: #fff; }
}
@media(max-width:420px) {
  .header-actions { gap: 4px !important; }
  .header-actions .pill { max-width: 62px !important; padding-inline: 7px !important; }
  .header-actions .lang-switch { min-width: 48px !important; padding-inline: 7px !important; }
  .logo-svg { width: 104px !important; }
  .ticker-label { max-width: 96px; padding-inline: 8px !important; }
}

/* =========================================================
   PROFESSIONAL VIEW LOCK + RESPONSIVE HEADER FIX — 2026-05-23
   Purpose: no white gap between ticker/header, header always locked,
   cleaner desktop/mobile composition, reliable language switch UI.
   ========================================================= */
:root{
  --ticker-h: 38px;
  --header-h: 78px;
  --fixed-top-h: calc(var(--ticker-h) + var(--header-h));
}
html{scroll-padding-top:calc(var(--fixed-top-h) + 18px)!important;}
body{
  padding-top:var(--fixed-top-h)!important;
  margin:0!important;
  overflow-x:hidden!important;
  background:#fff!important;
}
body.modal-open,
html.modal-lock body{padding-top:var(--fixed-top-h)!important;}
.topline,
body>.topline{display:none!important;height:0!important;min-height:0!important;margin:0!important;padding:0!important;overflow:hidden!important;visibility:hidden!important;}
.news-ticker{
  position:fixed!important;
  inset:0 0 auto 0!important;
  height:var(--ticker-h)!important;
  min-height:var(--ticker-h)!important;
  z-index:2147483000!important;
  display:flex!important;
  align-items:center!important;
  box-shadow:0 1px 0 rgba(0,0,0,.2)!important;
}
.ticker-label{
  min-width:132px!important;
  max-width:132px!important;
  justify-content:center!important;
  overflow:hidden!important;
  white-space:nowrap!important;
  text-overflow:ellipsis!important;
  background:#ffd21f!important;
  border-right:1px solid rgba(0,0,0,.18)!important;
}
.ticker-track{min-width:0!important; flex:1 0 auto!important;}
.site-header{
  position:fixed!important;
  top:var(--ticker-h)!important;
  left:0!important;
  right:0!important;
  height:var(--header-h)!important;
  min-height:var(--header-h)!important;
  z-index:2147482000!important;
  margin:0!important;
  border:0!important;
  border-bottom:1px solid rgba(255,255,255,.08)!important;
  box-shadow:0 16px 34px rgba(0,0,0,.22)!important;
  display:grid!important;
  grid-template-columns:minmax(122px,180px) minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:clamp(12px,2vw,28px)!important;
  padding:0 clamp(20px,4vw,74px)!important;
  background:#070707!important;
}
main,#main-content{margin-top:0!important;}
.hero-slider,.hero,.listing-hero,.product-detail-section{margin-top:0!important;}
.brand{display:flex!important;align-items:center!important;min-width:0!important;}
.logo-svg{width:clamp(128px,9.8vw,172px)!important;height:44px!important;}
.desktop-nav{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:clamp(12px,1.6vw,26px)!important;
  min-width:0!important;
  white-space:nowrap!important;
  overflow:hidden!important;
}
.desktop-nav a{font-size:clamp(10px,.82vw,12px)!important;letter-spacing:.08em!important;}
.ig-link{flex:0 0 auto!important;}
.header-actions{display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:8px!important;min-width:max-content!important;}
.lang-switch.header-lang{
  display:inline-flex!important;
  flex:0 0 auto!important;
  height:44px!important;
  min-width:68px!important;
  padding:0 12px!important;
  background:transparent!important;
  border:0!important;
  color:#fff!important;
  font-weight:900!important;
}
.lang-switch a{pointer-events:auto!important;cursor:pointer!important;}
.lang-switch a.active{color:#fff!important;opacity:1!important;}
.lang-switch a:not(.active){opacity:.58!important;}
.menu-button{display:none!important;}
.mobile-menu{position:fixed!important;top:var(--fixed-top-h)!important;left:0!important;right:0!important;z-index:2147481000!important;margin:0!important;border-radius:0 0 24px 24px!important;}
.mobile-menu:not(.open){display:none!important;}
.hero-slider{padding-top:0!important;}
.hero-slider-track{border-radius:28px!important;}
@media(max-width:1280px){
  .site-header{grid-template-columns:minmax(112px,150px) minmax(0,1fr) auto!important;padding-inline:clamp(16px,2.8vw,42px)!important;gap:14px!important;}
  .desktop-nav{gap:clamp(10px,1.15vw,18px)!important;}
  .desktop-nav a{font-size:10.5px!important;letter-spacing:.07em!important;}
  .ig-link{display:none!important;}
  .header-actions .pill{padding-inline:14px!important;}
}
@media(max-width:920px){
  :root{--ticker-h:34px;--header-h:64px;}
  body{padding-top:var(--fixed-top-h)!important;padding-bottom:calc(var(--bottom-nav-h) + var(--safe-bottom))!important;}
  .site-header{
    grid-template-columns:minmax(104px,1fr) auto!important;
    padding:0 12px!important;
    gap:8px!important;
  }
  .desktop-nav{display:none!important;}
  .logo-svg{width:clamp(106px,30vw,132px)!important;height:38px!important;}
  .header-actions{gap:5px!important;min-width:0!important;}
  .header-actions .icon-btn,.header-actions .pill{height:38px!important;min-width:38px!important;}
  .header-actions .pill{max-width:78px!important;padding:0 9px!important;font-size:10px!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;}
  .lang-switch.header-lang{display:inline-flex!important;height:38px!important;min-width:54px!important;padding:0 6px!important;font-size:10px!important;gap:3px!important;}
  .desktop-cart-button{display:none!important;}
  .menu-button{display:grid!important;}
  .ticker-label{min-width:108px!important;max-width:108px!important;font-size:9px!important;letter-spacing:.14em!important;padding-inline:8px!important;}
  .ticker-item{font-size:10px!important;padding-inline:16px!important;gap:7px!important;}
  .hero-slider{padding:10px 10px 52px!important;}
  .hero-slider-track{height:min(520px,126vw)!important;min-height:430px!important;border-radius:22px!important;}
  .mobile-menu-lang{display:inline-flex!important;}
}
@media(max-width:430px){
  :root{--header-h:62px;}
  .header-actions{gap:4px!important;}
  .header-actions .pill{max-width:60px!important;padding-inline:6px!important;}
  .lang-switch.header-lang{min-width:48px!important;padding-inline:5px!important;font-size:9.5px!important;}
  .logo-svg{width:102px!important;}
  .ticker-label{min-width:92px!important;max-width:92px!important;}
  .icon-btn svg{width:17px!important;height:17px!important;}
}

/* =========================================================
   CLEAN WHITE BACKGROUND UPDATE — 2026-05-23
   Make the customer-facing website background pure white and
   remove warm/off-white section backgrounds while keeping the
   black header/ticker and product imagery intact.
   ========================================================= */
:root {
  --paper: #ffffff !important;
  --soft: #ffffff !important;
  --line: #ececec !important;
  --shadow: 0 18px 46px rgba(0,0,0,.07) !important;
}
html,
body,
main,
#main-content {
  background: #ffffff !important;
}
body {
  color: #020202 !important;
}
.section,
.product-shelves,
.product-shelf,
.stories-bar,
.shop,
.listing-hero,
.product-detail-section,
.product-detail-gallery,
.checkout-section,
.empty-state,
.setup-alert,
.search-empty,
.drawer aside,
.modal-card,
.search-card,
.cart-line,
.search-result,
.mini-product,
.product-card,
.category-strip,
.footer,
.site-footer {
  background: #ffffff !important;
}
.hero:not(.hero-slider),
.listing-hero {
  background: #ffffff !important;
}
.product-shelf,
.category-strip,
.product-card,
.mini-product,
.search-result,
.cart-line,
.modal-card,
.drawer aside,
.table-card,
.payment-box,
.checkout-card,
.product-detail-card,
.product-detail-gallery {
  border-color: #ececec !important;
}
.product-card,
.featured-row.shelf-row .mini-product,
.search-result,
.cart-line,
.modal-card,
.drawer aside {
  box-shadow: 0 14px 38px rgba(0,0,0,.055) !important;
}
.product-art,
.product-art.has-image,
.popup-art,
.popup-art.has-image,
.product-detail-main,
.search-result-thumb,
.cart-thumb,
.product-detail-thumbs img,
.product-art img,
.popup-art img,
.product-detail-main img,
.search-result-thumb img {
  background: #ffffff !important;
}
.product-detail-meta span,
.btn-outline,
.btn-outline-sm,
.story-circle,
.story-ring,
.cat,
.form-card,
.region-box,
.shipping-status,
.ship-loading,
.mini-link {
  background: #ffffff !important;
}
.news-ticker,
.site-header,
.mobile-menu,
.hero-slider,
.hero-slide-frame,
.benefits {
  /* Keep brand contrast elements unchanged. */
}
@media(max-width:720px) {
  .section,
  .stories-bar,
  .product-shelves,
  .shop,
  .listing-hero,
  .product-detail-section {
    background: #ffffff !important;
  }
}

/* Update: remove mobile category stories shortcut strip from customer view */
@media (max-width: 768px) {
  .stories-bar {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
  }
}

/* =========================================================
   SEARCH/CART OVERLAY Z-INDEX FIX — 2026-05-23
   Ensures search popup and cart drawer never sit underneath the
   fixed running text/header on desktop or mobile.
   ========================================================= */
:root{
  --overlay-z:2147483600;
  --overlay-card-z:2147483620;
}
.modal,
.drawer{
  z-index:var(--overlay-z)!important;
}
.modal.open,
.drawer.open{
  display:block!important;
}
.modal .shade,
.drawer .shade{
  z-index:0!important;
}
.modal-card,
.drawer aside,
.search-modal .search-card{
  z-index:var(--overlay-card-z)!important;
}
.search-modal.open{
  display:grid!important;
  align-items:start!important;
  justify-items:center!important;
  padding:calc(var(--fixed-top-h, 116px) + 18px) 16px max(18px, env(safe-area-inset-bottom))!important;
}
.search-modal .search-card{
  position:relative!important;
  top:auto!important;
  left:auto!important;
  right:auto!important;
  bottom:auto!important;
  transform:none!important;
  margin:0!important;
  width:min(820px, calc(100vw - 32px))!important;
  max-height:calc(100dvh - var(--fixed-top-h, 116px) - 36px)!important;
  overflow:auto!important;
  overscroll-behavior:contain!important;
}
.search-modal .x{
  position:absolute!important;
  top:14px!important;
  right:14px!important;
  z-index:calc(var(--overlay-card-z) + 1)!important;
}
.search-modal .search-input-wrap{
  position:sticky!important;
  top:0!important;
  z-index:5!important;
  background:#fff!important;
  padding-top:2px!important;
  padding-bottom:10px!important;
}
.drawer aside{
  position:fixed!important;
  top:0!important;
  right:0!important;
  bottom:0!important;
  height:100dvh!important;
  max-height:100dvh!important;
}
@media(max-width:720px){
  .search-modal.open{
    padding:calc(var(--fixed-top-h, 96px) + 10px) 10px max(12px, env(safe-area-inset-bottom))!important;
  }
  .search-modal .search-card{
    width:calc(100vw - 20px)!important;
    max-height:calc(100dvh - var(--fixed-top-h, 96px) - 20px)!important;
    border-radius:24px!important;
  }
  .drawer aside{
    left:0!important;
    width:100vw!important;
    border-radius:22px 22px 0 0!important;
  }
}

/* =========================================================
   Uploaded logo render fix
   Header and footer now use the logo uploaded from Admin > Settings.
   ========================================================= */
.brand .site-logo-img{
  display:block!important;
  width:clamp(118px,9.8vw,178px)!important;
  height:54px!important;
  max-height:54px!important;
  object-fit:contain!important;
  object-position:left center!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  padding:0!important;
  filter:none!important;
}
.site-header .brand{
  min-width:0!important;
  max-width:180px!important;
  overflow:visible!important;
}
.footer-brand .footer-logo-img{
  display:block!important;
  width:clamp(110px,8vw,152px)!important;
  height:52px!important;
  max-height:52px!important;
  object-fit:contain!important;
  object-position:left center!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  padding:0!important;
  filter:none!important;
  flex:0 0 auto!important;
}
@media(max-width:720px){
  .brand .site-logo-img{
    width:clamp(96px,30vw,132px)!important;
    height:42px!important;
    max-height:42px!important;
  }
  .site-header .brand{max-width:132px!important;}
  .footer-brand .footer-logo-img{
    width:116px!important;
    height:42px!important;
    max-height:42px!important;
  }
}
@media(max-width:390px){
  .brand .site-logo-img{
    width:100px!important;
    height:38px!important;
    max-height:38px!important;
  }
}

/* =========================================================
   Footer black theme — make uploaded logo blend with footer
   ========================================================= */
.footer,
.site-footer{
  background:#020202!important;
  color:#ffffff!important;
  border-top:0!important;
  box-shadow:0 -18px 50px rgba(0,0,0,.08)!important;
}
.footer-brand,
.footer-brand span,
.footer .copyright,
.site-footer .copyright{
  color:rgba(255,255,255,.68)!important;
}
.footer-brand .footer-logo-img{
  background:transparent!important;
  mix-blend-mode:normal!important;
}
.footer-ig{
  color:rgba(255,255,255,.82)!important;
  border-color:rgba(255,255,255,.18)!important;
  background:rgba(255,255,255,.055)!important;
}
.footer-ig svg{
  color:rgba(255,255,255,.86)!important;
}
.footer-ig:hover{
  color:#ffffff!important;
  border-color:rgba(255,255,255,.36)!important;
  background:rgba(255,255,255,.10)!important;
}
@media(max-width:720px){
  .footer,
  .site-footer{
    gap:18px!important;
    padding-top:26px!important;
  }
}

/* =========================================================
   Header menu stability fix
   Keep the desktop navigation (including Instagram link) visible at
   100% and high browser zoom by compressing spacing instead of hiding items.
   ========================================================= */
@media (min-width: 921px){
  .site-header{
    grid-template-columns:minmax(92px,132px) minmax(0,1fr) auto!important;
    gap:clamp(8px,1vw,18px)!important;
    padding-inline:clamp(12px,2.2vw,48px)!important;
  }
  .site-header .brand{max-width:132px!important;}
  .brand .site-logo-img{
    width:clamp(92px,7vw,132px)!important;
    height:48px!important;
    max-height:48px!important;
  }
  .desktop-nav{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:clamp(8px,1vw,17px)!important;
    min-width:0!important;
    max-width:100%!important;
    overflow:visible!important;
    white-space:nowrap!important;
  }
  .desktop-nav a{
    display:inline-flex!important;
    flex:0 0 auto!important;
    align-items:center!important;
    gap:6px!important;
    font-size:clamp(9.2px,.68vw,11.4px)!important;
    line-height:1!important;
    letter-spacing:.055em!important;
  }
  .desktop-nav .ig-link,
  .ig-link{
    display:inline-flex!important;
    flex:0 0 auto!important;
    max-width:none!important;
    opacity:.78!important;
  }
  .header-actions{
    gap:clamp(5px,.65vw,10px)!important;
    min-width:max-content!important;
  }
  .header-actions .icon-btn,
  .desktop-cart-button{
    width:clamp(40px,3.05vw,52px)!important;
    min-width:clamp(40px,3.05vw,52px)!important;
    height:clamp(40px,3.05vw,52px)!important;
  }
  .header-actions .pill{
    height:clamp(40px,3.05vw,52px)!important;
    padding-inline:clamp(12px,1.2vw,22px)!important;
    font-size:clamp(10.5px,.75vw,13px)!important;
  }
  .lang-switch.header-lang{
    height:clamp(40px,3.05vw,52px)!important;
    min-width:54px!important;
    padding-inline:8px!important;
    font-size:clamp(10px,.72vw,12px)!important;
  }
}

@media (min-width:921px) and (max-width:1320px){
  .site-header{
    grid-template-columns:96px minmax(0,1fr) auto!important;
    padding-inline:12px!important;
    gap:8px!important;
  }
  .site-header .brand{max-width:96px!important;}
  .brand .site-logo-img{
    width:94px!important;
    height:42px!important;
    max-height:42px!important;
  }
  .desktop-nav{
    gap:8px!important;
    justify-content:space-between!important;
  }
  .desktop-nav a{
    font-size:9.2px!important;
    letter-spacing:.03em!important;
    gap:4px!important;
  }
  .desktop-nav .ig-link,
  .ig-link{
    display:inline-flex!important;
  }
  .ig-link svg{
    width:12px!important;
    height:12px!important;
  }
  .header-actions{gap:5px!important;}
  .header-actions .icon-btn,
  .desktop-cart-button{
    width:40px!important;
    min-width:40px!important;
    height:40px!important;
  }
  .header-actions .pill{
    max-width:88px!important;
    height:40px!important;
    padding-inline:10px!important;
    font-size:10.5px!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }
  .lang-switch.header-lang{
    height:40px!important;
    min-width:48px!important;
    padding-inline:5px!important;
    font-size:10px!important;
    gap:3px!important;
  }
}

@media (min-width:921px) and (max-width:1120px){
  .site-header{
    grid-template-columns:84px minmax(0,1fr) auto!important;
    padding-inline:8px!important;
  }
  .site-header .brand{max-width:84px!important;}
  .brand .site-logo-img{width:82px!important;height:38px!important;max-height:38px!important;}
  .desktop-nav{gap:6px!important;}
  .desktop-nav a{font-size:8.4px!important;letter-spacing:.01em!important;}
  .ig-link svg{display:none!important;}
  .header-actions .pill{max-width:72px!important;padding-inline:8px!important;}
}

/* Header & footer pure black update
   Request: set header and footer background to #000000. */
.site-header,
.mobile-menu,
.mobile-menu.open {
  background: #000000 !important;
}
.footer {
  background: #000000 !important;
  color: #ffffff !important;
  border-top-color: rgba(255,255,255,.10) !important;
}
.footer-brand {
  color: rgba(255,255,255,.72) !important;
}
.footer-ig {
  background: rgba(255,255,255,.04) !important;
  color: rgba(255,255,255,.86) !important;
  border-color: rgba(255,255,255,.18) !important;
}
.footer-ig:hover {
  background: rgba(255,255,255,.10) !important;
  color: #ffffff !important;
  border-color: rgba(255,255,255,.34) !important;
}

/* =========================================================
   MOBILE HAMBURGER MENU GAP FIX — 2026-05-23
   Fix: remove the white blank area between fixed header and
   opened hamburger menu on mobile. Menu becomes a true drawer
   locked directly under ticker + header.
   ========================================================= */
@media (max-width: 920px) {
  html.menu-open,
  body.menu-open {
    overflow: hidden !important;
    background: #000000 !important;
  }

  .mobile-menu,
  .mobile-menu.open {
    position: fixed !important;
    top: calc(var(--ticker-h) + var(--header-h)) !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: calc(100dvh - var(--ticker-h) - var(--header-h)) !important;
    max-height: calc(100dvh - var(--ticker-h) - var(--header-h)) !important;
    margin: 0 !important;
    padding: 18px 18px calc(86px + var(--safe-bottom)) !important;
    background: #000000 !important;
    color: #ffffff !important;
    border-top: 1px solid rgba(255,255,255,.08) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    align-content: start !important;
    gap: 10px !important;
    transform: none !important;
    -webkit-overflow-scrolling: touch !important;
    z-index: 2147482600 !important;
  }

  .mobile-menu:not(.open) {
    display: none !important;
  }

  .mobile-menu.open {
    display: grid !important;
  }

  .mobile-menu a,
  .mobile-menu-all,
  .mobile-menu-view {
    width: 100% !important;
    min-height: 52px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 15px 18px !important;
    border-radius: 15px !important;
    background: #000000 !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    color: #ffffff !important;
  }

  .mobile-menu-all {
    background: rgba(255,255,255,.08) !important;
  }

  .mobile-menu-lang {
    margin: 0 0 14px !important;
    background: #000000 !important;
    border-color: rgba(255,255,255,.16) !important;
  }
}

/* =========================================================
   CHECKOUT / PAYMENT POPUP PROFESSIONAL UPDATE — 2026-05-23
   Cleaner customer data flow and manual payment only: BCA + QRIS.
   ========================================================= */
.checkout-pro {
  width: min(860px, 94vw) !important;
  max-height: min(90svh, 860px) !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 30px !important;
  background: #ffffff !important;
  border: 1px solid #ececec !important;
}
.checkout-pro .x {
  top: 16px !important;
  right: 16px !important;
  background: #000000 !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,.12) !important;
}
.checkout-top {
  padding: 24px 28px 20px;
  background: linear-gradient(135deg,#000000 0%,#070707 100%);
  color: #ffffff;
  border-bottom: 1px solid #111111;
}
.checkout-top .checkout-kicker {
  display: inline-flex;
  width: fit-content;
  border-radius: 999px;
  background: #ffd32a;
  color: #000000;
  padding: 7px 12px;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.checkout-top h2 {
  color: #ffffff !important;
  margin: 0 0 6px !important;
  font-size: clamp(42px, 6vw, 66px) !important;
  line-height: .85 !important;
}
.checkout-top p {
  color: rgba(255,255,255,.72) !important;
  max-width: 620px;
  margin: 0 !important;
}
.checkout-pro form,
.checkout-pro .payment-result {
  max-height: calc(min(90svh, 860px) - 150px);
  overflow-y: auto;
  padding: 18px 28px 28px;
}
.checkout-pro form::-webkit-scrollbar,
.checkout-pro .payment-result::-webkit-scrollbar { width: 8px; }
.checkout-pro form::-webkit-scrollbar-thumb,
.checkout-pro .payment-result::-webkit-scrollbar-thumb { background: #d8d8d8; border-radius: 999px; }
.checkout-section-box {
  border: 1px solid #e9e9e9 !important;
  border-radius: 24px !important;
  background: #ffffff !important;
  box-shadow: 0 12px 36px rgba(0,0,0,.045) !important;
  padding: 16px !important;
  margin: 0 0 14px !important;
}
.checkout-step-head {
  display: grid;
  grid-template-columns: 36px 1fr;
  align-items: start;
  gap: 12px;
  margin-bottom: 14px;
}
.checkout-step-head > span {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: #000000;
  color: #ffffff;
  font-size: 13px;
  font-weight: 950;
}
.checkout-step-head b {
  display: block;
  color: #000000;
  font-size: 15px;
  font-weight: 950;
  letter-spacing: -.01em;
}
.checkout-step-head small {
  display: block;
  color: #757575;
  line-height: 1.45;
  margin-top: 2px;
}
.checkout-form-grid.compact {
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 12px;
}
.field-label {
  display: grid;
  gap: 7px;
  font-weight: 900;
  color: #000000;
  font-size: 12px;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.field-label em {
  color: #999999;
  font-style: normal;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 700;
}
.checkout-pro .modal-card input,
.checkout-pro input,
.checkout-pro textarea,
.checkout-pro select {
  margin-bottom: 0 !important;
}
.checkout-pro input,
.checkout-pro textarea,
.checkout-pro select {
  border-radius: 16px !important;
  border-color: #e4e4e4 !important;
  background: #ffffff !important;
}
.checkout-pro input:focus,
.checkout-pro textarea:focus,
.checkout-pro select:focus {
  border-color: #000000 !important;
  box-shadow: 0 0 0 4px rgba(0,0,0,.06) !important;
}
.checkout-pro .checkout-location {
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
}
.checkout-pro .location-grid {
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 10px;
}
.checkout-pro .location-grid select[data-region-postal] {
  grid-column: span 2;
}
.checkout-pro .location-status {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  border-radius: 999px;
  background: #f4f4f4;
  padding: 8px 11px;
  margin-top: 10px;
  color: #5f5f5f;
}
.checkout-pro .manual-region-toggle {
  margin-left: 10px;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}
.checkout-pro .form-grid.one {
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 14px;
}
.checkout-pro .shipping-choice {
  box-shadow: 0 12px 36px rgba(0,0,0,.045) !important;
}
.checkout-pro .shipping-head {
  grid-template-columns: 36px 1fr auto;
  margin-bottom: 12px;
}
.checkout-pro .shipping-head .mini-link {
  align-self: center;
  background: #ffd32a;
  border-color: #ffd32a;
  color: #000000;
}
.checkout-pro .shipping-status {
  background: #f6f6f6;
  color: #5e5e5e;
}
.checkout-pro .ship-option {
  border-radius: 18px;
  border-color: #e8e8e8;
  background: #ffffff;
}
.payment-options-pro {
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 12px !important;
}
.pay-option-pro {
  position: relative;
  align-items: center !important;
  display: grid !important;
  grid-template-columns: auto 1fr;
  gap: 12px !important;
  min-height: 98px;
  border-radius: 22px !important;
  border: 1.5px solid #e6e6e6 !important;
  background: #ffffff !important;
  padding: 16px !important;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.pay-option-pro:hover,
.pay-option-pro.is-selected {
  border-color: #000000 !important;
  background: #fffdf4 !important;
  box-shadow: 0 16px 34px rgba(0,0,0,.08) !important;
  transform: translateY(-1px);
}
.pay-option-pro input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
.pay-mark {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 18px;
  background: #000000;
  color: #ffffff;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .04em;
}
.pay-option-pro.is-selected .pay-mark { background: #ffd32a; color: #000000; }
.pay-option-pro strong {
  font-size: 15px !important;
}
.pay-option-pro small {
  font-size: 12px !important;
}
.checkout-submit {
  height: 54px;
  border-radius: 999px !important;
  font-size: 14px;
  letter-spacing: .01em;
}
.payment-result-pro {
  border: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  background: #ffffff !important;
}
.payment-result-pro h3 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(42px, 6vw, 62px) !important;
  line-height: .85;
  margin-bottom: 10px !important;
  color: #000000;
}
.payment-box {
  border-color: #e3e3e3 !important;
  background: #fffdf4 !important;
}
.payment-line b {
  color: #000000;
}
.payment-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 10px 0 12px;
}
.payment-actions .btn {
  width: auto;
  min-height: 42px;
  padding: 0 16px;
}
.qris-preview {
  background: #ffffff !important;
  border: 1px solid #e8e8e8 !important;
  border-radius: 24px !important;
  padding: 18px !important;
  margin: 14px 0 !important;
}
.qris-preview img {
  width: min(280px, 78vw) !important;
  max-height: none !important;
  object-fit: contain !important;
  border-radius: 18px !important;
}
@media(max-width:760px) {
  .checkout-pro {
    width: 100% !important;
    max-height: 94svh !important;
    border-radius: 26px 26px 0 0 !important;
  }
  .checkout-top { padding: 22px 20px 16px; }
  .checkout-pro form,
  .checkout-pro .payment-result {
    max-height: calc(94svh - 132px);
    padding: 16px 18px 24px;
  }
  .checkout-form-grid.compact,
  .payment-options-pro,
  .checkout-pro .location-grid {
    grid-template-columns: 1fr;
  }
  .checkout-pro .location-grid select[data-region-postal] { grid-column: auto; }
  .checkout-step-head,
  .checkout-pro .shipping-head {
    grid-template-columns: 32px 1fr;
  }
  .checkout-step-head > span { width: 32px; height: 32px; }
  .checkout-pro .shipping-head .mini-link {
    grid-column: 1 / -1;
    width: 100%;
  }
  .pay-option-pro { min-height: 86px; }
  .payment-actions .btn { width: 100%; }
}


/* =========================================================
   CHECKOUT POPUP RESPONSIVE / NO-CUT FIX — 2026-05-23
   Keeps payment/data popup fully visible on desktop and mobile.
   ========================================================= */
.modal[data-checkout].open{
  display:grid!important;
  place-items:center!important;
  padding:max(14px, env(safe-area-inset-top)) 14px max(14px, env(safe-area-inset-bottom))!important;
  overflow:hidden!important;
}
.modal[data-checkout] .shade{
  position:fixed!important;
  inset:0!important;
}
.modal[data-checkout] .checkout-pro{
  position:relative!important;
  top:auto!important;
  left:auto!important;
  right:auto!important;
  bottom:auto!important;
  transform:none!important;
  width:min(920px, calc(100vw - 28px))!important;
  max-width:920px!important;
  max-height:calc(100dvh - 28px)!important;
  height:auto!important;
  display:flex!important;
  flex-direction:column!important;
  overflow:hidden!important;
  margin:0!important;
  overscroll-behavior:contain!important;
}
.modal[data-checkout] .checkout-top{
  flex:0 0 auto!important;
  padding-right:68px!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-y:auto!important;
  -webkit-overflow-scrolling:touch!important;
  overscroll-behavior:contain!important;
}
.modal[data-checkout] .checkout-pro .notice{
  flex:0 0 auto!important;
  padding:0 28px 12px!important;
  margin:0!important;
}
.modal[data-checkout] .checkout-section-box,
.modal[data-checkout] .field-label,
.modal[data-checkout] .pay-option-pro,
.modal[data-checkout] .payment-line{
  min-width:0!important;
}
.modal[data-checkout] .payment-options-pro{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
}
.modal[data-checkout] .pay-option-pro span:last-child{
  min-width:0!important;
}
.modal[data-checkout] .pay-option-pro small,
.modal[data-checkout] .payment-line b{
  overflow-wrap:anywhere!important;
  word-break:break-word!important;
}
.modal[data-checkout] .payment-result-pro{
  padding-bottom:max(26px, env(safe-area-inset-bottom))!important;
}
.modal[data-checkout] .payment-box{
  overflow:hidden!important;
}
@media(max-width:900px){
  .modal[data-checkout] .checkout-form-grid.compact{grid-template-columns:1fr!important;}
  .modal[data-checkout] .payment-options-pro{grid-template-columns:1fr!important;}
}
@media(max-width:760px){
  .modal[data-checkout].open{
    align-items:end!important;
    justify-items:stretch!important;
    padding:8px 8px max(8px, env(safe-area-inset-bottom))!important;
  }
  .modal[data-checkout] .checkout-pro{
    width:100%!important;
    max-width:none!important;
    max-height:calc(100dvh - 16px)!important;
    border-radius:24px!important;
  }
  .modal[data-checkout] .checkout-top{
    padding:18px 58px 14px 18px!important;
  }
  .modal[data-checkout] .checkout-top .checkout-kicker{
    font-size:10px!important;
    padding:6px 10px!important;
    margin-bottom:9px!important;
  }
  .modal[data-checkout] .checkout-top h2{
    font-size:clamp(36px, 12vw, 52px)!important;
  }
  .modal[data-checkout] .checkout-top p{
    font-size:13px!important;
    line-height:1.45!important;
  }
  .modal[data-checkout] .checkout-pro form,
  .modal[data-checkout] .checkout-pro .payment-result{
    padding:14px 14px max(18px, env(safe-area-inset-bottom))!important;
  }
  .modal[data-checkout] .checkout-section-box{
    border-radius:20px!important;
    padding:14px!important;
  }
  .modal[data-checkout] .checkout-step-head,
  .modal[data-checkout] .checkout-pro .shipping-head{
    grid-template-columns:30px minmax(0,1fr)!important;
    gap:10px!important;
  }
  .modal[data-checkout] .checkout-step-head > span{
    width:30px!important;
    height:30px!important;
  }
  .modal[data-checkout] .checkout-pro .manual-region-toggle{
    display:inline-flex!important;
    margin:10px 0 0!important;
  }
  .modal[data-checkout] .pay-option-pro{
    min-height:auto!important;
    grid-template-columns:44px minmax(0,1fr)!important;
    border-radius:18px!important;
    padding:13px!important;
  }
  .modal[data-checkout] .pay-mark{
    width:44px!important;
    height:44px!important;
    border-radius:15px!important;
  }
  .modal[data-checkout] .checkout-submit{
    position:sticky!important;
    bottom:0!important;
    z-index:8!important;
    box-shadow:0 -12px 24px rgba(255,255,255,.92)!important;
  }
  .modal[data-checkout] .qris-preview img{
    width:min(240px, 70vw)!important;
  }
}

/* =========================================================
   Footer credit update
   Request: add website credit by PT SWY PROJECTS IDN / swy.co.id
   ========================================================= */
.footer-brand-copy{
  display:flex!important;
  flex-direction:column!important;
  gap:5px!important;
  min-width:0!important;
}
.footer-credit{
  display:flex!important;
  align-items:center!important;
  flex-wrap:wrap!important;
  gap:6px!important;
  color:rgba(255,255,255,.58)!important;
  font-size:12px!important;
  line-height:1.35!important;
}
.footer-credit a{
  color:#ffffff!important;
  font-weight:800!important;
  letter-spacing:.02em!important;
  text-decoration:none!important;
  border-bottom:1px solid rgba(255,255,255,.28)!important;
}
.footer-credit a:hover{
  border-bottom-color:#ffffff!important;
}
.footer-credit-domain{
  color:rgba(255,255,255,.48)!important;
}
@media(max-width:720px){
  .footer-brand{
    align-items:flex-start!important;
  }
  .footer-brand-copy{
    gap:4px!important;
  }
  .footer-credit{
    font-size:11.5px!important;
  }
}


/* =========================================================
   Footer accepted payment logos — QRIS & BCA
   ========================================================= */
.footer-payments{
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  gap:9px!important;
  min-width:210px!important;
}
.footer-payments-title{
  color:rgba(255,255,255,.62)!important;
  font-size:11px!important;
  font-weight:900!important;
  letter-spacing:.16em!important;
  text-transform:uppercase!important;
  line-height:1!important;
}
.footer-payment-logos{
  display:flex!important;
  align-items:center!important;
  flex-wrap:wrap!important;
  gap:8px!important;
}
.footer-payment-logos img{
  display:block!important;
  width:76px!important;
  height:auto!important;
  max-height:32px!important;
  object-fit:contain!important;
  border-radius:10px!important;
  background:#ffffff!important;
  box-shadow:0 10px 24px rgba(0,0,0,.24)!important;
}
@media(max-width:860px){
  .footer{
    align-items:flex-start!important;
  }
  .footer-payments{
    min-width:0!important;
    width:100%!important;
  }
  .footer-payment-logos img{
    width:82px!important;
    max-height:34px!important;
  }
}
@media(max-width:520px){
  .footer-payment-logos{
    gap:7px!important;
  }
  .footer-payment-logos img{
    width:78px!important;
  }
}


/* =========================================================
   Floating WhatsApp admin bubble — 2026-05-24
   Phone number hidden from UI
   ========================================================= */
.wa-bubble{
  position:fixed!important;
  right:clamp(16px, 2.4vw, 28px)!important;
  bottom:calc(22px + var(--safe-bottom))!important;
  z-index:79!important;
  display:inline-flex!important;
  align-items:center!important;
  gap:10px!important;
  min-height:58px!important;
  padding:9px 15px 9px 9px!important;
  border-radius:999px!important;
  background:#25d366!important;
  color:#ffffff!important;
  border:1px solid rgba(255,255,255,.28)!important;
  box-shadow:0 18px 46px rgba(0,0,0,.24), 0 8px 18px rgba(37,211,102,.28)!important;
  text-decoration:none!important;
  transform:translateZ(0)!important;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease!important;
}
.wa-bubble:hover{
  transform:translateY(-2px) translateZ(0)!important;
  background:#20bf5a!important;
  box-shadow:0 22px 54px rgba(0,0,0,.30), 0 10px 22px rgba(37,211,102,.34)!important;
}
.wa-bubble:focus-visible{
  outline:3px solid rgba(37,211,102,.28)!important;
  outline-offset:4px!important;
}
.wa-bubble-icon{
  width:42px!important;
  height:42px!important;
  display:grid!important;
  place-items:center!important;
  flex:0 0 42px!important;
  border-radius:999px!important;
  background:rgba(0,0,0,.16)!important;
  color:#ffffff!important;
}
.wa-bubble-icon svg{
  display:block!important;
  width:28px!important;
  height:28px!important;
}
.wa-bubble-copy{
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  min-width:0!important;
  line-height:1.05!important;
}
.wa-bubble-copy b{
  display:block!important;
  color:#ffffff!important;
  font-size:13px!important;
  font-weight:950!important;
  letter-spacing:.01em!important;
  white-space:nowrap!important;
}
.wa-bubble-copy small{
  display:block!important;
  color:rgba(255,255,255,.88)!important;
  font-size:11px!important;
  font-weight:800!important;
  margin-top:3px!important;
  white-space:nowrap!important;
}
html.modal-lock .wa-bubble,
html.menu-open .wa-bubble,
body.menu-open .wa-bubble{
  opacity:0!important;
  pointer-events:none!important;
  transform:translateY(10px) scale(.96)!important;
}
@media(max-width:920px){
  .wa-bubble{
    right:14px!important;
    bottom:calc(var(--bottom-nav-h) + var(--safe-bottom) + 14px)!important;
    min-height:54px!important;
    padding:8px!important;
    border-radius:999px!important;
  }
  .wa-bubble-copy{
    display:none!important;
  }
  .wa-bubble-icon{
    width:44px!important;
    height:44px!important;
    flex-basis:44px!important;
  }
}
@media(min-width:921px){
  .wa-bubble::before{
    content:"";
    position:absolute;
    inset:-7px;
    border-radius:999px;
    border:1px solid rgba(37,211,102,.22);
    animation:waBubblePulse 2.4s ease-out infinite;
    pointer-events:none;
  }
}
@keyframes waBubblePulse{
  0%{transform:scale(.96);opacity:.85;}
  75%,100%{transform:scale(1.18);opacity:0;}
}
@media(prefers-reduced-motion:reduce){
  .wa-bubble,
  .wa-bubble::before{
    transition:none!important;
    animation:none!important;
  }
}

/* Database setup state */
.setup-alert-full{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:center;max-width:1180px;margin:32px auto 0;padding:18px 22px;text-align:left}
.setup-alert-full span{flex:1;min-width:260px}
.setup-alert-btn{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:0 18px;border-radius:999px;background:#020202;color:#fff;text-decoration:none;font-weight:900;font-size:13px;text-transform:uppercase;letter-spacing:.04em}
.db-disabled-main{display:block}
@media(max-width:700px){.setup-alert-full{margin:18px 14px 0;align-items:flex-start;justify-content:flex-start}.setup-alert-full span{min-width:100%}.setup-alert-btn{width:100%}}

/* Keep-existing-data database notice */
.setup-alert-full{background:#fffaf4;border-color:#eadcc8}
.setup-alert-full b{font-size:16px}
.setup-alert-full span{line-height:1.5}

/* =========================================================
   WELCOME POPUP VIEWPORT + STICKY HEADER CROP FIX — 2026-05-24
   The welcome popup must sit above the running ticker/header and stay
   fully visible on shorter laptop screens.
   ========================================================= */
[data-welcome-popup]{
  z-index:calc(var(--overlay-z, 2147483600) + 80)!important;
  align-items:center!important;
  justify-content:center!important;
  padding:clamp(16px,3vw,32px)!important;
  isolation:isolate!important;
}
[data-welcome-popup] .shade{
  position:absolute!important;
  inset:0!important;
  z-index:0!important;
  background:rgba(0,0,0,.70)!important;
  backdrop-filter:blur(12px) saturate(112%)!important;
  -webkit-backdrop-filter:blur(12px) saturate(112%)!important;
}
[data-welcome-popup] .popup-card{
  z-index:2!important;
  max-height:min(760px, calc(100dvh - 32px))!important;
  overflow:auto!important;
  overscroll-behavior:contain!important;
  scrollbar-width:thin;
}
[data-welcome-popup] .popup-content{
  min-height:0!important;
}
[data-welcome-popup] .popup-close{
  z-index:5!important;
}
html:has([data-welcome-popup].is-visible) .wa-bubble,
body:has([data-welcome-popup].is-visible) .wa-bubble{
  opacity:0!important;
  pointer-events:none!important;
  transform:translateY(10px) scale(.96)!important;
}
@media (min-width:761px) and (max-height:850px){
  [data-welcome-popup] .popup-card{
    width:min(780px, 90vw)!important;
    max-height:calc(100dvh - 28px)!important;
    border-radius:30px!important;
  }
  [data-welcome-popup] .popup-content{
    padding:30px 36px!important;
    gap:26px!important;
  }
  [data-welcome-popup] .popup-copy h2{
    font-size:clamp(42px,6vw,72px)!important;
    line-height:.88!important;
  }
  [data-welcome-popup] .popup-copy p{
    line-height:1.55!important;
  }
  [data-welcome-popup] .popup-actions{
    margin-top:18px!important;
  }
  [data-welcome-popup] .popup-meta{
    margin-top:14px!important;
  }
  [data-welcome-popup] .popup-visual-frame,
  [data-welcome-popup] .popup-visual-frame img{
    min-height:280px!important;
  }
}
@media (min-width:761px) and (max-height:740px){
  [data-welcome-popup] .popup-card{
    width:min(740px, 90vw)!important;
  }
  [data-welcome-popup] .popup-content{
    padding:26px 32px!important;
    gap:22px!important;
  }
  [data-welcome-popup] .popup-kicker{
    padding:7px 11px!important;
  }
  [data-welcome-popup] .popup-copy h2{
    font-size:clamp(38px,5.4vw,60px)!important;
    max-width:10ch!important;
    margin:12px 0 10px!important;
  }
  [data-welcome-popup] .popup-visual-frame,
  [data-welcome-popup] .popup-visual-frame img{
    min-height:238px!important;
  }
  [data-welcome-popup] .popup-featured-product{
    bottom:-14px!important;
    padding:12px 14px!important;
  }
  [data-welcome-popup] .popup-meta{
    display:none!important;
  }
}
@media(max-width:760px){
  [data-welcome-popup]{
    align-items:flex-end!important;
    padding:10px 10px calc(74px + env(safe-area-inset-bottom))!important;
  }
  [data-welcome-popup] .popup-card{
    width:100%!important;
    max-height:calc(100dvh - 94px)!important;
    border-radius:28px 28px 24px 24px!important;
  }
}

/* =========================================================
   WELCOME POPUP NO-SCROLL RESPONSIVE FIX — 2026-05-24
   Remove the horizontal scrollbar caused by the previous viewport fix.
   Popup now adapts its width/height instead of relying on overflow scroll.
   ========================================================= */
[data-welcome-popup]{
  padding:clamp(14px,2.6vw,30px)!important;
}
[data-welcome-popup] .popup-card{
  width:min(920px, calc(100vw - 44px))!important;
  max-width:calc(100vw - 44px)!important;
  max-height:calc(100dvh - 44px)!important;
  overflow:hidden!important;
  scrollbar-width:none!important;
}
[data-welcome-popup] .popup-card::-webkit-scrollbar{
  width:0!important;
  height:0!important;
  display:none!important;
}
[data-welcome-popup] .popup-card::after{
  right:-18px!important;
  bottom:4px!important;
  max-width:100%!important;
  overflow:hidden!important;
}
[data-welcome-popup] .popup-content{
  grid-template-columns:minmax(0,1fr) minmax(0,.95fr)!important;
  width:100%!important;
  box-sizing:border-box!important;
}
[data-welcome-popup] .popup-copy,
[data-welcome-popup] .popup-visual{
  min-width:0!important;
}
[data-welcome-popup] .popup-visual{
  transform:none!important;
}
[data-welcome-popup] .popup-visual:hover{
  transform:translateY(-3px)!important;
}
[data-welcome-popup] .popup-visual-frame,
[data-welcome-popup] .popup-visual-frame img{
  max-width:100%!important;
}

@media (min-width:761px) and (max-height:720px){
  [data-welcome-popup] .popup-card{
    width:min(880px, calc(100vw - 36px))!important;
    max-width:calc(100vw - 36px)!important;
    max-height:calc(100dvh - 36px)!important;
    border-radius:28px!important;
  }
  [data-welcome-popup] .popup-content{
    padding:22px 28px!important;
    gap:20px!important;
  }
  [data-welcome-popup] .popup-kicker{
    padding:7px 11px!important;
    font-size:10px!important;
  }
  [data-welcome-popup] .popup-copy h2{
    font-size:clamp(36px,5.1vw,58px)!important;
    line-height:.9!important;
    max-width:10.5ch!important;
    margin:10px 0 10px!important;
  }
  [data-welcome-popup] .popup-copy p{
    font-size:14px!important;
    line-height:1.48!important;
    max-width:42ch!important;
  }
  [data-welcome-popup] .popup-actions{
    margin-top:16px!important;
    gap:9px!important;
  }
  [data-welcome-popup] .popup-actions .btn-red,
  [data-welcome-popup] .popup-actions .btn-ghost{
    min-height:42px!important;
    padding:0 17px!important;
    font-size:12px!important;
  }
  [data-welcome-popup] .popup-visual-frame,
  [data-welcome-popup] .popup-visual-frame img{
    min-height:235px!important;
  }
  [data-welcome-popup] .popup-featured-product{
    bottom:-10px!important;
    left:14px!important;
    right:14px!important;
    padding:11px 13px!important;
    border-radius:16px!important;
  }
  [data-welcome-popup] .popup-featured-product small{
    font-size:9px!important;
  }
  [data-welcome-popup] .popup-featured-product b,
  [data-welcome-popup] .popup-featured-product strong{
    font-size:13px!important;
  }
}

@media (min-width:761px) and (max-height:610px){
  [data-welcome-popup] .popup-card{
    width:min(820px, calc(100vw - 28px))!important;
    max-width:calc(100vw - 28px)!important;
    max-height:calc(100dvh - 28px)!important;
    border-radius:24px!important;
  }
  [data-welcome-popup] .popup-content{
    padding:18px 24px!important;
    gap:16px!important;
  }
  [data-welcome-popup] .popup-copy h2{
    font-size:clamp(32px,4.4vw,48px)!important;
    margin:8px 0!important;
  }
  [data-welcome-popup] .popup-copy p{
    font-size:13px!important;
    line-height:1.38!important;
  }
  [data-welcome-popup] .popup-meta{
    display:none!important;
  }
  [data-welcome-popup] .popup-visual-frame,
  [data-welcome-popup] .popup-visual-frame img{
    min-height:198px!important;
  }
  [data-welcome-popup] .popup-featured-product{
    display:none!important;
  }
}

@media (max-width:760px){
  [data-welcome-popup]{
    padding:10px 10px calc(76px + env(safe-area-inset-bottom))!important;
  }
  [data-welcome-popup] .popup-card{
    width:100%!important;
    max-width:100%!important;
    max-height:calc(100dvh - 96px)!important;
    overflow:hidden!important;
  }
  [data-welcome-popup] .popup-content{
    padding:20px 16px 22px!important;
    gap:14px!important;
  }
  [data-welcome-popup] .popup-copy h2{
    font-size:clamp(38px,12vw,56px)!important;
    margin:10px 0 8px!important;
  }
  [data-welcome-popup] .popup-copy p{
    font-size:13px!important;
    line-height:1.48!important;
  }
  [data-welcome-popup] .popup-visual-frame,
  [data-welcome-popup] .popup-visual-frame img{
    min-height:160px!important;
  }
}

@media (max-width:420px), (max-height:620px) and (max-width:760px){
  [data-welcome-popup] .popup-visual{
    display:none!important;
  }
  [data-welcome-popup] .popup-content{
    display:block!important;
  }
  [data-welcome-popup] .popup-actions{
    margin-top:16px!important;
  }
}


/* Admin-controlled popup mode: when visual is disabled, keep modal centered and compact. */
[data-welcome-popup] .popup-card.popup-card-no-visual{width:min(620px,calc(100vw - 44px))!important}
[data-welcome-popup] .popup-card.popup-card-no-visual .popup-content{display:block!important;padding:clamp(22px,4vw,42px)!important}
[data-welcome-popup] .popup-card.popup-card-no-visual .popup-copy h2{max-width:12ch!important}

/* Product marketing badges: admin-controlled Flash Sale, Discount, Custom and Sold Out labels */
.product-badge {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: calc(100% - 66px);
  min-height: 30px;
  padding: 7px 11px;
  border-radius: 999px;
  background: #020202;
  color: #fff;
  font-size: 11px;
  font-weight: 950;
  line-height: 1;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-style: normal;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 10px 28px rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.18);
}
.product-badge::before {
  content: "";
  width: 7px;
  height: 7px;
  margin-right: 7px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 0 3px rgba(255,255,255,.18);
}
.product-badge-flash_sale { background: #ffd84a; color: #020202; border-color: rgba(2,2,2,.08); }
.product-badge-discount { background: #b51f25; color: #fff; }
.product-badge-sold_out { background: rgba(2,2,2,.88); color: #fff; }
.product-badge-custom { background: #020202; color: #ffd84a; }
.product-card.is-sold-out .product-art img,
.mini-product.is-sold-out .product-art img { filter: grayscale(1) brightness(.78); opacity: .78; }
.product-card.is-sold-out .product-art::after,
.mini-product.is-sold-out .product-art::after {
  background: linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.30));
  display: block;
}
.product-card.is-sold-out .btn[disabled],
.product-detail-actions .btn[disabled] { opacity: .68; cursor: not-allowed; }
.product-detail-main .product-badge { left: 18px; top: 18px; }
.search-result-badge {
  display: inline-flex;
  width: fit-content;
  margin-top: 4px;
  border-radius: 999px;
  padding: 4px 7px;
  background: #020202;
  color: #fff;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.search-result-badge.discount { background: #b51f25; }
.search-result-badge.flash_sale { background: #ffd84a; color: #020202; }
.search-result-badge.sold_out { background: #686868; }
@media(max-width:650px) {
  .product-badge { left: 9px; top: 9px; max-width: calc(100% - 18px); min-height: 26px; padding: 6px 9px; font-size: 9px; }
  .product-detail-main .product-badge { left: 12px; top: 12px; }
}
.popup-visual-frame .product-badge { top: 16px; left: 16px; bottom: auto; z-index: 5; color: inherit; }
.popup-visual-frame em.product-badge { bottom: auto; top: 16px; left: 16px; font-size: 11px; padding: 7px 11px; }
.popup-visual-frame em.product-badge-flash_sale { color: #020202; }
.popup-visual-frame em.product-badge-discount,
.popup-visual-frame em.product-badge-sold_out { color: #fff; }
.popup-visual-frame em.product-badge-custom { color: #ffd84a; }
.product-badge { pointer-events: none; }
/* Operational launch additions */
.campaign-section{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;width:min(1180px,calc(100% - 32px));margin:26px auto 12px}.campaign-card{position:relative;overflow:hidden;min-height:230px;border-radius:30px;background:#111;color:#fff;text-decoration:none;padding:28px;display:flex;flex-direction:column;justify-content:flex-end;border:1px solid rgba(255,255,255,.12);box-shadow:0 26px 70px rgba(0,0,0,.18)}.campaign-card picture,.campaign-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}.campaign-card:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.18),rgba(0,0,0,.82));z-index:1}.campaign-card>*:not(picture):not(img){position:relative;z-index:2}.campaign-card span{font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:950;color:#ffd21a}.campaign-card h2{font-family:'Bebas Neue',sans-serif;font-size:clamp(44px,7vw,84px);line-height:.9;margin:8px 0}.campaign-card p{max-width:520px;color:rgba(255,255,255,.84);font-weight:700}.campaign-card b{display:inline-flex;align-self:flex-start;background:#ffd21a;color:#020202;border-radius:999px;padding:12px 16px;margin-top:10px}.voucher-choice input{text-transform:uppercase}.track-card,.legal-page{width:min(860px,calc(100% - 28px));margin:48px auto;background:#fff;border:1px solid #eee;border-radius:28px;padding:28px;box-shadow:0 24px 80px rgba(0,0,0,.08)}.track-table{width:100%;border-collapse:collapse;margin-top:14px}.track-table td{border-bottom:1px solid #eee;padding:10px 0}.admin-badge-ok{display:inline-flex;border-radius:999px;padding:5px 10px;font-size:12px;font-weight:900;background:#dcfce7;color:#166534}.admin-badge-bad{display:inline-flex;border-radius:999px;padding:5px 10px;font-size:12px;font-weight:900;background:#fee2e2;color:#991b1b}.admin-wide-grid{display:grid;grid-template-columns:minmax(280px,420px) minmax(0,1fr);gap:18px}.timeline-list{display:grid;gap:10px}.timeline-item{border:1px solid var(--admin-line);border-radius:16px;padding:12px;background:#fff}.timeline-item b{display:block}.timeline-item small{color:var(--admin-muted)}@media(max-width:850px){.admin-wide-grid{grid-template-columns:1fr}.campaign-card{min-height:200px;border-radius:24px;padding:22px}}
.category-delete-form{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.category-delete-form select{min-height:38px;border-radius:999px;border:1px solid var(--admin-line,#ddd);padding:0 10px;background:#fff;font-weight:800;font-size:12px}

/* AGS Performance + Conversion UX layer — 2026-06-13
   Safe front-end only: trust strip, cart media thumbnails, checkout summary, and responsive conversion cues. */
.conversion-trust-strip {
  width: min(1180px, calc(100% - 32px));
  margin: 10px auto 34px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.conversion-trust-strip article {
  border: 1px solid var(--line);
  background: var(--card, #fff);
  border-radius: 22px;
  padding: 18px;
  box-shadow: 0 16px 40px rgba(0,0,0,.055);
  min-height: 118px;
}
.conversion-trust-strip b { display:block; font-size: 15px; margin-bottom: 8px; letter-spacing: -.015em; }
.conversion-trust-strip span { display:block; color: var(--muted); font-size: 13px; line-height: 1.55; }
.cart-empty-pro {
  min-height: 210px;
  display: grid;
  place-content: center;
  text-align: center;
  gap: 8px;
  color: var(--muted);
  padding: 28px 18px;
}
.cart-empty-pro b { color: var(--text); font-size: 18px; letter-spacing: -.03em; }
.cart-empty-pro span { max-width: 280px; font-size: 13px; line-height: 1.55; }
.cart-thumb {
  overflow: hidden;
  background: #f4f0e8;
  border: 1px solid var(--line);
  color: var(--muted);
  display: grid;
  place-items: center;
  font-weight: 800;
  letter-spacing: .08em;
}
.cart-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cart-trust-note {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(0,0,0,.035);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}
.checkout-summary {
  position: sticky;
  top: 0;
  z-index: 2;
  display: grid;
  gap: 8px;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 22px;
  padding: 15px;
  background: linear-gradient(135deg, #111 0%, #020202 100%);
  color: #fff;
  box-shadow: 0 18px 40px rgba(0,0,0,.18);
  margin-bottom: 14px;
}
.checkout-summary-head,
.checkout-summary-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.checkout-summary-head b { font-size: 16px; letter-spacing: -.025em; }
.checkout-summary-head span,
.checkout-summary-line span,
.checkout-summary small { color: rgba(255,255,255,.68); font-size: 12px; }
.checkout-summary-line b { font-size: 13px; }
.checkout-summary-line.total { border-top: 1px solid rgba(255,255,255,.18); padding-top: 8px; margin-top: 2px; }
.checkout-summary-line.total b { font-size: 18px; }
.checkout-trust-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: -4px 0 14px;
}
.checkout-trust-grid span {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 10px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  background: var(--card, #fff);
}
[data-open-checkout]:disabled,
.checkout-submit:disabled {
  opacity: .48;
  cursor: not-allowed;
}
@media (max-width: 920px) {
  .conversion-trust-strip { grid-template-columns: 1fr; width: min(100% - 24px, 680px); margin-bottom: 26px; }
  .conversion-trust-strip article { min-height: 0; }
  .checkout-trust-grid { grid-template-columns: 1fr; }
  .checkout-summary { position: relative; top: auto; border-radius: 18px; }
}
@media (max-width: 560px) {
  .conversion-trust-strip { width: calc(100% - 18px); gap: 10px; }
  .conversion-trust-strip article { border-radius: 18px; padding: 15px; }
  .cart-line { grid-template-columns: 54px 1fr; }
  .cart-line .qty { grid-column: 1 / -1; justify-content: flex-end; }
  .checkout-summary { padding: 13px; }
  .checkout-summary-line.total b { font-size: 16px; }
}

/* AGS Checkout Trust + Order Experience — 2026-06-13
   Frontend/customer UX only: checkout rail, payment next steps, professional order tracking. */
.checkout-progress-rail {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}
.checkout-progress-rail span {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  background: var(--card, #fff);
  color: var(--text, #020202);
  border-radius: 999px;
  padding: 9px 10px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: -.01em;
  white-space: nowrap;
}
.checkout-progress-rail b {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: #020202;
  color: #fff;
  font-size: 11px;
  flex: 0 0 auto;
}
.payment-next-steps {
  margin: 14px 0;
  border: 1px solid var(--line);
  background: rgba(0,0,0,.035);
  border-radius: 20px;
  padding: 15px;
}
.payment-next-steps b { display:block; margin-bottom: 8px; font-size: 16px; letter-spacing: -.03em; }
.payment-next-steps ol { margin: 0; padding-left: 18px; display: grid; gap: 6px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.payment-actions-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.payment-actions-grid .btn { justify-content: center; text-align: center; }

.track-order-body { background: #f7f4ef; color: #020202; }
.track-shell { width: min(1120px, calc(100% - 28px)); margin: 28px auto 56px; display: grid; gap: 18px; }
.track-hero-card,
.track-order-panel,
.track-section-card,
.track-help-card {
  background: #fff;
  border: 1px solid #ece6dc;
  border-radius: 30px;
  box-shadow: 0 22px 70px rgba(0,0,0,.075);
}
.track-hero-card { padding: 26px; }
.track-brand-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 22px; }
.track-brand-row img { max-width: 160px; height: auto; object-fit: contain; }
.track-brand-row a { color: #020202; font-weight: 900; text-decoration: none; }
.track-hero-card h1 { font-family: 'Bebas Neue', Impact, sans-serif; font-size: clamp(54px, 9vw, 106px); line-height: .9; margin: 6px 0 10px; letter-spacing: -.025em; }
.track-hero-card > p { color: #6f675c; max-width: 760px; line-height: 1.6; }
.track-search-form { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) auto; gap: 10px; margin-top: 18px; align-items: end; }
.track-search-form .btn { min-height: 54px; padding-inline: 22px; }
.track-order-panel { padding: 22px; display: grid; gap: 18px; }
.track-order-head { display: flex; justify-content: space-between; align-items: center; gap: 14px; border-bottom: 1px solid #eee7de; padding-bottom: 16px; }
.track-order-head small,
.track-info-card small { display:block; color: #8a8176; text-transform: uppercase; letter-spacing: .12em; font-size: 11px; font-weight: 950; }
.track-order-head h2 { margin: 4px 0 0; font-size: clamp(28px, 4vw, 44px); letter-spacing: -.05em; }
.track-progress { display: grid; grid-template-columns: repeat(7, minmax(0,1fr)); gap: 8px; }
.track-step { position: relative; border: 1px solid #ece6dc; border-radius: 18px; padding: 11px 9px; display: grid; justify-items: center; gap: 6px; min-height: 80px; background: #fffaf2; text-align: center; color: #8a8176; }
.track-step b { width: 28px; height: 28px; border-radius: 999px; display: grid; place-items: center; background: #e8dfd2; color: #020202; font-size: 12px; }
.track-step span { font-size: 11px; font-weight: 900; line-height: 1.25; }
.track-step.is-active { border-color: #020202; background: #020202; color: #fff; }
.track-step.is-active b { background: #ffd84a; color: #020202; }
.track-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.track-info-card { border: 1px solid #ece6dc; background: #fffaf2; border-radius: 24px; padding: 16px; display: grid; gap: 7px; min-height: 140px; }
.track-info-card b:not(.status-pill) { font-size: 20px; letter-spacing: -.04em; }
.track-info-card span, .track-info-card em { color: #6f675c; font-size: 13px; line-height: 1.45; font-style: normal; }
.track-info-card.dark { background: #020202; color: #fff; }
.track-info-card.dark small, .track-info-card.dark span { color: #efe6d8; }
.status-pill { display: inline-flex; width: fit-content; border-radius: 999px; padding: 7px 11px; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; }
.status-pill.ok { background: #dcfce7; color: #166534; }
.status-pill.warn { background: #fef3c7; color: #92400e; }
.status-pill.bad { background: #fee2e2; color: #991b1b; }
.status-pill.wait { background: #e5e7eb; color: #374151; }
.track-two-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.track-section-card { padding: 18px; box-shadow: none; }
.track-section-card h3 { margin: 0 0 13px; font-size: 24px; letter-spacing: -.04em; }
.track-definition { display: grid; grid-template-columns: 120px minmax(0,1fr); gap: 10px 12px; margin: 0; }
.track-definition dt { color: #8a8176; font-size: 12px; font-weight: 950; text-transform: uppercase; letter-spacing: .08em; }
.track-definition dd { margin: 0; color: #2a2622; line-height: 1.5; font-size: 14px; }
.track-items-list { display: grid; gap: 10px; }
.track-item-row { display: flex; justify-content: space-between; gap: 12px; padding: 12px; border: 1px solid #eee7de; border-radius: 16px; background: #fffaf2; }
.track-item-row span { display:grid; gap: 3px; }
.track-item-row small { color: #8a8176; }
.payment-proof-uploader { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 420px); gap: 16px; align-items: center; background: linear-gradient(135deg, #fff 0%, #fff7e8 100%); }
.payment-proof-uploader p { color: #6f675c; line-height: 1.55; margin: 0; }
.track-upload-form { display: grid; gap: 10px; }
.proof-drop { display: grid; gap: 8px; border: 1px dashed #c7baaa; border-radius: 20px; padding: 16px; background: #fff; font-weight: 900; color: #020202; }
.proof-drop input { width: 100%; }
.timeline-list.pro .timeline-item { border-color: #eee7de; background: #fffaf2; }
.track-help-card { padding: 18px; display:flex; justify-content:space-between; align-items:center; gap: 16px; }
.track-help-card div { display:grid; gap: 4px; }
.track-help-card b { font-size: 19px; letter-spacing: -.03em; }
.track-help-card span { color: #6f675c; line-height: 1.45; }
.track-not-found { width: min(860px, 100%); margin: 0 auto; }
@media (max-width: 980px) {
  .checkout-progress-rail { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .payment-actions-grid { grid-template-columns: 1fr; }
  .track-progress { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .track-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .track-two-col, .payment-proof-uploader { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .track-shell { width: calc(100% - 18px); margin-top: 12px; }
  .track-hero-card, .track-order-panel { border-radius: 22px; padding: 16px; }
  .track-brand-row { display: grid; gap: 10px; }
  .track-search-form { grid-template-columns: 1fr; }
  .track-progress { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .track-grid { grid-template-columns: 1fr; }
  .track-order-head, .track-help-card { align-items: stretch; flex-direction: column; }
  .track-order-head .btn, .track-help-card .btn { width: 100%; justify-content: center; }
  .track-definition { grid-template-columns: 1fr; }
  .track-item-row { display: grid; }
  .checkout-progress-rail { overflow-x: auto; display: flex; padding-bottom: 4px; }
  .checkout-progress-rail span { min-width: 150px; }
}


/* ══════════════════════════════════════════
   AGS PROFESSIONAL JAVASCRIPT POPUPS
   Replaces browser-looking alert/confirm surfaces with branded modals.
   ══════════════════════════════════════════ */
.ags-dialog{
  position:fixed;
  inset:0;
  z-index:9999;
  display:none;
  align-items:center;
  justify-content:center;
  padding:clamp(14px,3vw,28px);
}
.ags-dialog.is-open{display:flex;}
.ags-dialog-shade{
  position:absolute;
  inset:0;
  background:rgba(5,5,5,.56);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
}
.ags-dialog-card{
  position:relative;
  width:min(460px,100%);
  max-height:calc(100svh - 28px);
  overflow:auto;
  background:#fffdf8;
  color:var(--ink);
  border:1px solid rgba(20,20,20,.1);
  border-radius:30px;
  padding:26px;
  box-shadow:0 34px 110px rgba(0,0,0,.32);
  transform:translateY(8px) scale(.98);
  animation:agsDialogIn .18s ease forwards;
}
@keyframes agsDialogIn{to{transform:translateY(0) scale(1);}}
.ags-dialog-close{
  position:absolute;
  top:14px;
  right:14px;
  width:40px;
  height:40px;
  border-radius:999px;
  border:1px solid var(--line);
  background:#fff;
  color:var(--ink);
  display:grid;
  place-items:center;
  font-size:24px;
  line-height:1;
}
.ags-dialog-icon{
  width:48px;
  height:48px;
  border-radius:18px;
  display:grid;
  place-items:center;
  background:var(--black);
  color:#fff;
  font-weight:900;
  font-size:22px;
  margin-bottom:14px;
}
.ags-dialog[data-type="success"] .ags-dialog-icon{background:#177245;}
.ags-dialog[data-type="danger"] .ags-dialog-icon{background:#b51f25;}
.ags-dialog-card small{
  display:inline-flex;
  background:var(--yellow);
  color:var(--ink);
  border-radius:999px;
  padding:7px 10px;
  font-size:10px;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
  margin-bottom:12px;
}
.ags-dialog-card h3{
  font-family:'Bebas Neue',sans-serif;
  font-size:42px;
  line-height:.92;
  letter-spacing:.02em;
  margin:0 42px 10px 0;
}
.ags-dialog-card p{
  color:var(--muted);
  line-height:1.55;
  margin:0 0 18px;
  white-space:pre-line;
}
.ags-dialog-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:18px;
}
.ags-dialog-actions .btn{width:100%;justify-content:center;}
.toast{
  max-width:min(520px,calc(100vw - 28px));
  white-space:normal;
  text-align:center;
  box-shadow:0 18px 50px rgba(0,0,0,.22);
}
@media(max-width:680px){
  .ags-dialog{align-items:flex-end;padding:10px;}
  .ags-dialog-card{width:100%;border-radius:26px 26px 0 0;padding:22px 18px calc(22px + var(--safe-bottom));}
  .ags-dialog-card h3{font-size:36px;margin-right:44px;}
  .ags-dialog-actions{grid-template-columns:1fr;}
}

/* =========================================================
   AGS CHECKOUT SUMMARY NO-OVERLAY FIX — 2026-06-13
   Prevents the order summary panel from covering checkout fields.
   Desktop, tablet, and mobile keep the summary in normal document flow.
   ========================================================= */
.modal[data-checkout] .checkout-pro form {
  position: relative !important;
  scroll-padding-top: 18px !important;
  scroll-padding-bottom: 112px !important;
}
.modal[data-checkout] .checkout-summary,
.checkout-pro .checkout-summary {
  position: static !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  inset: auto !important;
  z-index: 0 !important;
  transform: none !important;
  width: 100% !important;
  margin: 0 0 14px !important;
  flex: 0 0 auto !important;
  align-self: stretch !important;
  pointer-events: auto !important;
}
.modal[data-checkout] .checkout-progress-rail,
.modal[data-checkout] .checkout-trust-grid,
.modal[data-checkout] .checkout-section-box {
  position: relative !important;
  z-index: 1 !important;
}
.modal[data-checkout] .checkout-section-box:first-of-type {
  margin-top: 0 !important;
}
@media (min-width: 901px) {
  .modal[data-checkout] .checkout-summary {
    box-shadow: 0 14px 34px rgba(0,0,0,.12) !important;
  }
}
@media (max-width: 760px) {
  .modal[data-checkout] .checkout-summary {
    border-radius: 18px !important;
    padding: 12px !important;
    gap: 7px !important;
    box-shadow: 0 12px 28px rgba(0,0,0,.13) !important;
  }
  .modal[data-checkout] .checkout-summary-head b {
    font-size: 14px !important;
  }
  .modal[data-checkout] .checkout-summary-line.total b {
    font-size: 15px !important;
  }
  .modal[data-checkout] .checkout-summary small {
    display: block !important;
    line-height: 1.35 !important;
  }
}


/* UAT 13 Juni 2026 — customer UI cleanup */
[data-welcome-popup] .popup-close{display:none!important}
[data-welcome-popup] .shade{cursor:default!important}
@media(max-width:680px){
  [data-welcome-popup] .popup-actions{grid-template-columns:1fr!important}
  [data-welcome-popup] .popup-actions .btn-ghost{order:2}
}

/* Closed Casket-inspired wallpaper framing: full-bleed editorial crop */
.hero-slider{background:#020202!important;padding-inline:0!important}
.hero-slider-track{max-width:none!important;width:100%!important;aspect-ratio:16/9!important;height:auto!important;min-height:0!important;border-radius:0!important}
.hero-slide-frame{border-radius:0!important;border:0!important;box-shadow:none!important}
.hero-slide-image{object-fit:cover!important;padding:0!important;background:#020202!important}
.hero-slide-bg{display:none!important}
@media(max-width:680px){
  .hero-slider{padding-top:0!important;padding-bottom:44px!important}
  .hero-slider-track{aspect-ratio:4/5!important;height:auto!important;min-height:0!important}
  .hero-slide-overlay{padding:18px 14px!important}
}

/* Catalog minimal style: no card outline/border */
.product-card,
.featured-row.shelf-row .mini-product{border:0!important;box-shadow:none!important;border-radius:0!important;background:transparent!important}
.product-card:hover{box-shadow:none!important;transform:none!important}
.product-art,
.product-art.has-image{border:0!important;border-radius:0!important;background:#fff!important}
.product-art::before{display:none!important}
.product-info{padding-left:0!important;padding-right:0!important}
.product-actions{padding-left:0!important;padding-right:0!important}
.meta{border-top:0!important;padding-top:2px!important}

/* UAT 13 Juni 2026 — customer trust cleanup
   Catatan: tombol/status cek ongkir tetap dipertahankan sesuai revisi UAT. */
.conversion-trust-strip,
.checkout-trust-grid{display:none!important}
.payment-actions-simple{grid-template-columns:1fr!important}

/* CCA-style slideshow format + sweep transition — 13 Juni 2026
   Mengikuti struktur referensi: auto-play, sweep transition, desktop/mobile artwork terpisah.
   Catatan: tetap original AGS, tanpa mengambil asset/CSS Closed Casket. */
.hero-slider.hero-slider--cca-sweep,
.hero-slider{
  --ags-slider-duration: 5600ms;
  --ags-slider-sweep: 860ms;
  position:relative!important;
  isolation:isolate!important;
  background:#020202!important;
  padding:0!important;
  min-height:0!important;
  overflow:hidden!important;
}
.hero-slider::before,
.hero-slider::after{display:none!important;content:none!important}
.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;
  margin:0!important;
  border-radius:0!important;
  background:#020202!important;
  overflow:hidden!important;
  transform:translateZ(0)!important;
  contain:layout paint!important;
}
.hero-slide{
  position:absolute!important;
  inset:0!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  z-index:0!important;
  transform:none!important;
  transition:none!important;
  clip-path:inset(0 0 0 0)!important;
  will-change:clip-path, opacity!important;
}
.hero-slide.is-active{
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
  z-index:2!important;
}
.hero-slide.is-sweep-entering,
.hero-slide.is-page-entering{
  opacity:1!important;
  visibility:visible!important;
  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;
}
.hero-slider[data-slider-direction="prev"] .hero-slide.is-sweep-entering,
.hero-slider[data-slider-direction="prev"] .hero-slide.is-page-entering{
  animation-name:ags-cca-sweep-in-prev!important;
}
.hero-slide.is-sweep-leaving,
.hero-slide.is-page-leaving{
  opacity:1!important;
  visibility:visible!important;
  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;
}
.hero-slider[data-slider-direction="prev"] .hero-slide.is-sweep-leaving,
.hero-slider[data-slider-direction="prev"] .hero-slide.is-page-leaving{
  animation-name:ags-cca-sweep-out-prev!important;
}
@keyframes ags-cca-sweep-in{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes ags-cca-sweep-in-prev{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0 0 0 0)}}
@keyframes ags-cca-sweep-out{from{clip-path:inset(0 0 0 0)}to{clip-path:inset(0 0 0 100%)}}
@keyframes ags-cca-sweep-out-prev{from{clip-path:inset(0 0 0 0)}to{clip-path:inset(0 100% 0 0)}}
.hero-slide-frame{
  display:block!important;
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  border-radius:0!important;
  border:0!important;
  box-shadow:none!important;
  background:#020202!important;
  overflow:hidden!important;
  text-decoration:none!important;
  cursor:pointer!important;
}
.hero-slide-frame.is-static{cursor:default!important}
.hero-slide-frame::before,
.hero-slide-frame::after{display:none!important;content:none!important}
.hero-slide-picture,
.hero-slide-picture img,
.hero-slide-image{
  position:absolute!important;
  inset:0!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
}
.hero-slide-image{
  object-fit:cover!important;
  object-position:center 38%!important;
  padding:0!important;
  margin:0!important;
  transform:scale(1.006)!important;
  background:#020202!important;
  filter:none!important;
  box-shadow:none!important;
  opacity:1!important;
}
.hero-slide.is-active .hero-slide-image,
.hero-slide.is-sweep-entering .hero-slide-image,
.hero-slide.is-page-entering .hero-slide-image{
  animation:ags-cca-image-drift var(--ags-slider-duration) linear both!important;
}
@keyframes ags-cca-image-drift{
  from{transform:scale(1.018) translateX(0)}
  to{transform:scale(1.045) translateX(-.65%)}
}
.hero-slide-overlay{display:none!important}
.hero-slide-visually-hidden{
  position:absolute!important;
  width:1px!important;height:1px!important;
  padding:0!important;margin:-1px!important;
  overflow:hidden!important;clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;border:0!important;
}
.hero-slider-controls.hero-slider-progress{
  position:absolute!important;
  left:0!important;right:0!important;bottom:0!important;
  z-index:8!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  padding:0 clamp(20px,4vw,70px) clamp(18px,2.2vw,30px)!important;
  pointer-events:none!important;
}
.hero-slider-progress .hero-slider-dots{
  width:min(640px,calc(100vw - 40px))!important;
  display:grid!important;grid-auto-flow:column!important;grid-auto-columns:1fr!important;
  gap:8px!important;padding:0!important;margin:0!important;
  border:0!important;background:transparent!important;border-radius:0!important;
  box-shadow:none!important;backdrop-filter:none!important;pointer-events:auto!important;
}
.hero-slider-progress .hero-slider-dots button{
  position:relative!important;width:100%!important;height:3px!important;min-width:0!important;
  padding:0!important;border:0!important;border-radius:999px!important;overflow:hidden!important;
  background:rgba(255,255,255,.35)!important;cursor:pointer!important;
}
.hero-slider-progress .hero-slider-dots button::before{display:none!important;content:none!important}
.hero-slider-progress .hero-slider-dots button span{
  display:block!important;width:100%!important;height:100%!important;
  transform:scaleX(0)!important;transform-origin:left center!important;background:#fff!important;
}
.hero-slider-progress .hero-slider-dots button.is-active span{
  animation:ags-slider-progress var(--ags-slider-duration) linear forwards!important;
}
@keyframes ags-slider-progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media(min-width:741px) and (max-width:1199px){
  .hero-slider-track{aspect-ratio:398/167!important}
  .hero-slide-image{object-position:center 34%!important}
}
@media(max-width:740px){
  .hero-slider-track{aspect-ratio:5/7!important}
  .hero-slide-image{object-position:center 28%!important;transform:scale(1.01)!important}
  .hero-slider-controls.hero-slider-progress{padding-bottom:13px!important;padding-inline:14px!important}
  .hero-slider-progress .hero-slider-dots{width:calc(100vw - 28px)!important;gap:5px!important}
  .hero-slider-progress .hero-slider-dots button{height:3px!important}
}
@media(prefers-reduced-motion:reduce){
  .hero-slide,
  .hero-slide.is-sweep-entering,
  .hero-slide.is-sweep-leaving,
  .hero-slide.is-page-entering,
  .hero-slide.is-page-leaving,
  .hero-slide-image,
  .hero-slider-progress .hero-slider-dots button.is-active span{animation:none!important;transition:none!important}
}

/* AGS Product Grid Visual Separation Upgrade — 2026-06-13
   Tujuan: item katalog tetap clean seperti referensi, tetapi tiap produk lebih terbaca.
   Tidak memakai outline/border tebal; pemisah dibuat melalui spacing, surface halus, dan image well. */
.product-grid{
  gap: clamp(24px, 2.8vw, 42px) clamp(16px, 2.2vw, 30px) !important;
  align-items: stretch !important;
}
.product-card{
  position: relative !important;
  padding: clamp(8px, 1.1vw, 14px) !important;
  background: #fff !important;
  border: 0 !important;
  border-radius: 18px !important;
  overflow: visible !important;
  box-shadow: 0 1px 0 rgba(0,0,0,.055), 0 14px 34px rgba(0,0,0,.045) !important;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease !important;
}
.product-card::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.035);
  z-index: 0;
}
.product-card:hover{
  transform: translateY(-2px) !important;
  box-shadow: 0 2px 0 rgba(0,0,0,.065), 0 20px 46px rgba(0,0,0,.075) !important;
}
.product-card .card-link{z-index:2!important}
.product-card .wish,
.product-card .product-actions,
.product-card .product-art em,
.product-card .gallery-count{z-index:5!important}
.product-card .product-art,
.product-card .product-art.has-image{
  position: relative !important;
  z-index: 1 !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  background: #f6f4ef !important;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.06) !important;
}
.product-card .product-art img{
  background: transparent !important;
  padding: clamp(8px, 1vw, 12px) !important;
}
.product-info{
  position: relative !important;
  z-index: 3 !important;
  padding: 14px 4px 0 !important;
  gap: 6px !important;
  text-align: center !important;
}
.product-info small{
  display: block !important;
  min-height: 1.1em !important;
  color: rgba(0,0,0,.48) !important;
}
.product-info h3{
  min-height: 2.55em !important;
  margin: 0 auto !important;
  max-width: 96% !important;
  line-height: 1.28 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
.product-info p{
  margin: 0 auto !important;
  max-width: 92% !important;
  color: rgba(0,0,0,.56) !important;
  min-height: 2.75em !important;
}
.product-info .price{
  justify-content: center !important;
  margin-top: 2px !important;
}
.product-info .meta{
  justify-content: center !important;
  gap: 8px !important;
  color: rgba(0,0,0,.48) !important;
}
.product-actions{
  position: relative !important;
  z-index: 4 !important;
  padding: 10px 4px 2px !important;
  margin-top: auto !important;
}
@media (max-width: 1000px){
  .product-grid{
    gap: 22px 14px !important;
  }
  .product-card{
    border-radius: 14px !important;
    padding: 7px !important;
    box-shadow: 0 1px 0 rgba(0,0,0,.045), 0 10px 24px rgba(0,0,0,.04) !important;
  }
  .product-card .product-art,
  .product-card .product-art.has-image{border-radius: 11px !important;}
  .product-info{padding-top: 10px !important;}
  .product-info h3{font-size: 13px !important; min-height: 2.45em !important;}
  .product-info p{display:none!important; min-height:0!important;}
}
@media (max-width: 560px){
  .shop{padding-left: 12px !important; padding-right: 12px !important;}
  .product-grid{
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: 20px 12px !important;
  }
  .product-card{
    padding: 6px !important;
    border-radius: 12px !important;
  }
  .product-info small{font-size: 9px !important; letter-spacing: .06em !important;}
  .product-info h3{font-size: 12px !important; line-height: 1.25 !important;}
  .product-info .price b{font-size: 13px !important;}
  .product-info .meta{display:none!important;}
  .product-actions{padding-top:8px!important;}
}


/* AGS Catalog Clean No-Shadow Correction — 2026-06-13
   UAT follow-up: hilangkan semua pembatas visual/box shadow kartu produk di katalog customer.
   Pemisah antar item mengandalkan spacing dan alignment, bukan card surface. */
.product-grid{
  gap: clamp(34px, 3.6vw, 58px) clamp(18px, 2.6vw, 40px) !important;
  align-items: start !important;
}
.product-card,
.featured-row.shelf-row .mini-product{
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
  overflow: visible !important;
}
.product-card::before,
.product-card::after,
.featured-row.shelf-row .mini-product::before,
.featured-row.shelf-row .mini-product::after{
  content: none !important;
  display: none !important;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}
.product-card:hover,
.product-card:focus-within,
.featured-row.shelf-row .mini-product:hover{
  transform: none !important;
  box-shadow: none !important;
  background: transparent !important;
}
.product-card .product-art,
.product-card .product-art.has-image,
.featured-row.shelf-row .mini-product .product-art,
.featured-row.shelf-row .mini-product .product-art.has-image{
  border: 0 !important;
  outline: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  overflow: visible !important;
}
.product-card .product-art img,
.featured-row.shelf-row .mini-product .product-art img{
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  filter: none !important;
}
.product-info{
  padding: 12px 0 0 !important;
  text-align: left !important;
  gap: 6px !important;
}
.product-info h3{
  margin: 0 !important;
  max-width: none !important;
  min-height: 0 !important;
  text-align: left !important;
  line-height: 1.25 !important;
}
.product-info small,
.product-info p,
.product-info .price,
.product-info .meta{
  text-align: left !important;
  justify-content: flex-start !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: none !important;
}
.product-info p{
  min-height: 0 !important;
}
.product-actions{
  padding: 10px 0 0 !important;
}
@media (max-width: 1000px){
  .product-grid{gap: 28px 16px !important;}
  .product-card{padding: 0 !important; border-radius: 0 !important; box-shadow: none !important;}
  .product-card .product-art,
  .product-card .product-art.has-image{border-radius: 0 !important; box-shadow: none !important;}
  .product-info{padding-top: 10px !important;}
}
@media (max-width: 560px){
  .shop{padding-left: 14px !important; padding-right: 14px !important;}
  .product-grid{gap: 26px 14px !important;}
  .product-card{padding: 0 !important; border-radius: 0 !important; box-shadow: none !important;}
}

/* AGS Catalog Shadow Hard Reset — 2026-06-13
   UAT follow-up: sisa bayangan pada katalog berasal dari overlay gradient image well
   (.product-art.has-image::after) dan background image container. Semua shadow/gradient
   khusus list produk customer dinonaktifkan agar katalog benar-benar flat seperti referensi. */
body:not(.admin-page) .shop .product-grid .product-card,
body:not(.admin-page) .shop .product-grid .product-card:hover,
body:not(.admin-page) .shop .product-grid .product-card:focus-within{
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
}
body:not(.admin-page) .shop .product-grid .product-card::before,
body:not(.admin-page) .shop .product-grid .product-card::after,
body:not(.admin-page) .shop .product-grid .product-card .product-art::before,
body:not(.admin-page) .shop .product-grid .product-card .product-art::after,
body:not(.admin-page) .shop .product-grid .product-card .product-art.has-image::before,
body:not(.admin-page) .shop .product-grid .product-card .product-art.has-image::after{
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
}
body:not(.admin-page) .shop .product-grid .product-card .product-art,
body:not(.admin-page) .shop .product-grid .product-card .product-art.has-image{
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  overflow: visible !important;
}
body:not(.admin-page) .shop .product-grid .product-card .product-art img{
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  padding: 0 !important;
}
body:not(.admin-page) .shop .product-grid .product-card.is-sold-out .product-art img{
  filter: none !important;
  opacity: 1 !important;
}
body:not(.admin-page) .shop .product-grid .product-card.is-sold-out .product-art::after{
  content: none !important;
  display: none !important;
  background: transparent !important;
}
body:not(.admin-page) .shop .product-grid .product-card .soldout-badge,
body:not(.admin-page) .shop .product-grid .product-card .badge.soldout,
body:not(.admin-page) .shop .product-grid .product-card .product-badge{
  box-shadow: none !important;
}
body:not(.admin-page) .shop .product-grid{
  gap: clamp(36px, 4vw, 64px) clamp(22px, 3vw, 48px) !important;
}
@media (max-width: 760px){
  body:not(.admin-page) .shop .product-grid{
    gap: 30px 16px !important;
  }
}

/* =========================================================
   AGS Header Menu CCA-Inspired Layout — 2026-06-13
   Black editorial header with left menu, centered logo, right utilities,
   and desktop mega dropdowns for Artists/Catalog. Original AGS branding retained.
   ========================================================= */
.site-header.ags-cca-header{
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)!important;
  justify-content:stretch!important;
  align-items:center!important;
  background:#000!important;
  color:#fff!important;
  box-shadow:none!important;
  border-bottom:1px solid rgba(255,255,255,.08)!important;
  padding:0 clamp(22px,4.8vw,92px)!important;
  gap:18px!important;
}
.ags-cca-header .ags-cca-primary-nav{
  justify-content:flex-start!important;
  gap:clamp(20px,2.6vw,44px)!important;
  overflow:visible!important;
  min-width:0!important;
  height:100%!important;
}
.ags-cca-primary-nav > a,
.ags-cca-nav-trigger{
  position:relative!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:var(--header-h)!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  color:#fff!important;
  font:900 13px/1 var(--font, inherit)!important;
  letter-spacing:.015em!important;
  text-transform:uppercase!important;
  text-decoration:none!important;
  opacity:1!important;
  cursor:pointer!important;
}
.ags-cca-primary-nav > a::after,
.ags-cca-nav-trigger::after{
  content:""!important;
  position:absolute!important;
  left:0!important;
  right:0!important;
  bottom:22px!important;
  height:2px!important;
  background:#fff!important;
  transform:scaleX(0)!important;
  transform-origin:left center!important;
  transition:transform .18s ease!important;
}
.ags-cca-primary-nav > a:hover::after,
.ags-cca-primary-nav > a.active::after,
.ags-cca-nav-dropdown:hover > .ags-cca-nav-trigger::after,
.ags-cca-nav-link.active::after{
  transform:scaleX(1)!important;
}
.ags-cca-nav-item{display:flex!important;align-items:center!important;height:100%!important;}
.ags-cca-nav-dropdown{position:static!important;}
.ags-cca-mega{
  position:fixed!important;
  top:calc(var(--ticker-h) + var(--header-h))!important;
  left:0!important;
  right:0!important;
  background:#fff!important;
  color:#000!important;
  border:0!important;
  border-top:1px solid rgba(255,255,255,.08)!important;
  box-shadow:0 26px 50px rgba(0,0,0,.18)!important;
  opacity:0!important;
  pointer-events:none!important;
  visibility:hidden!important;
  transform:translateY(-8px)!important;
  transition:opacity .18s ease, transform .18s ease, visibility .18s ease!important;
  z-index:2147481900!important;
}
.ags-cca-nav-dropdown:hover .ags-cca-mega,
.ags-cca-nav-dropdown:focus-within .ags-cca-mega{
  opacity:1!important;
  pointer-events:auto!important;
  visibility:visible!important;
  transform:translateY(0)!important;
}
.ags-cca-mega-inner{
  width:min(1180px, calc(100vw - 48px))!important;
  margin:0 auto!important;
  padding:46px 24px 52px!important;
  display:grid!important;
  grid-template-columns:repeat(5, minmax(120px,1fr))!important;
  gap:34px clamp(36px,5vw,82px)!important;
}
.ags-cca-catalog-inner{grid-template-columns:repeat(3, minmax(170px,1fr))!important;width:min(840px,calc(100vw - 48px))!important;}
.ags-cca-mega-col{display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:14px!important;}
.ags-cca-mega-col b{
  color:#000!important;
  font-size:12px!important;
  letter-spacing:.06em!important;
  font-weight:950!important;
  text-transform:uppercase!important;
  text-decoration:underline!important;
  margin-bottom:4px!important;
}
.ags-cca-mega-col a{
  color:#000!important;
  text-decoration:none!important;
  font-size:14px!important;
  line-height:1.2!important;
  letter-spacing:.005em!important;
  font-weight:950!important;
  text-transform:uppercase!important;
  opacity:1!important;
}
.ags-cca-mega-col a:hover{color:#6f7740!important;}
.ags-cca-mega-empty{
  grid-column:1 / -1!important;
  display:grid!important;
  gap:8px!important;
  color:#000!important;
  font-weight:800!important;
}
.ags-cca-header .ags-cca-brand{
  justify-self:center!important;
  align-self:center!important;
  max-width:none!important;
  width:auto!important;
  min-width:0!important;
}
.ags-cca-header .brand .site-logo-img,
.site-header.ags-cca-header .brand .site-logo-img{
  width:clamp(142px,14vw,228px)!important;
  height:64px!important;
  max-height:64px!important;
  object-fit:contain!important;
  object-position:center!important;
  filter:none!important;
  background:transparent!important;
}
.ags-cca-header .ags-cca-actions{
  justify-content:flex-end!important;
  gap:clamp(12px,1.2vw,18px)!important;
}
.ags-cca-region{
  display:inline-flex!important;
  align-items:center!important;
  gap:6px!important;
  color:#fff!important;
  font-weight:800!important;
  font-size:13px!important;
  white-space:nowrap!important;
}
.ags-cca-region small{font-size:12px!important;color:#fff!important;font-weight:800!important;opacity:.94!important;}
.ags-cca-region i{
  width:7px!important;height:7px!important;border-right:1.8px solid #fff!important;border-bottom:1.8px solid #fff!important;
  transform:rotate(45deg) translateY(-2px)!important;display:inline-block!important;opacity:.9!important;
}
.ags-cca-region-lang{display:inline-flex!important;align-items:center!important;gap:4px!important;margin-left:4px!important;font-size:12px!important;font-weight:950!important;letter-spacing:.04em!important;}
.ags-cca-region-lang a{color:#fff!important;text-decoration:none!important;opacity:.58!important;}
.ags-cca-region-lang a.active{opacity:1!important;}
.ags-cca-header .icon-btn{
  color:#fff!important;
  border:0!important;
  background:transparent!important;
  width:34px!important;
  height:34px!important;
  min-width:34px!important;
  box-shadow:none!important;
  border-radius:0!important;
}
.ags-cca-header .icon-btn:hover{background:rgba(255,255,255,.08)!important;}
.ags-cca-header .cart-button{position:relative!important;}
.ags-cca-header .cart-button b,
.ags-cca-header .desktop-cart-button b{
  position:absolute!important;
  top:-8px!important;
  right:-8px!important;
  min-width:20px!important;
  height:20px!important;
  padding:0 6px!important;
  border-radius:999px!important;
  background:#fff!important;
  color:#000!important;
  display:grid!important;
  place-items:center!important;
  font-size:11px!important;
  line-height:20px!important;
  font-weight:950!important;
}
.ags-cca-header .menu-button{display:none!important;}
@media (max-width:1280px){
  .site-header.ags-cca-header{padding-inline:clamp(18px,3vw,52px)!important;gap:12px!important;}
  .ags-cca-header .ags-cca-primary-nav{gap:clamp(14px,1.7vw,26px)!important;}
  .ags-cca-primary-nav > a,.ags-cca-nav-trigger{font-size:12px!important;}
  .ags-cca-region small{display:none!important;}
  .ags-cca-region-lang{margin-left:2px!important;}
}
@media (max-width:1040px){
  .ags-cca-region{display:none!important;}
  .ags-cca-header .ags-cca-primary-nav{gap:16px!important;}
  .ags-cca-primary-nav > a,.ags-cca-nav-trigger{font-size:11px!important;}
  .ags-cca-header .brand .site-logo-img{width:clamp(132px,18vw,178px)!important;}
}
@media (max-width:920px){
  .site-header.ags-cca-header{
    grid-template-columns:1fr auto!important;
    padding:0 14px!important;
  }
  .ags-cca-header .ags-cca-primary-nav{display:none!important;}
  .ags-cca-header .ags-cca-brand{justify-self:start!important;}
  .ags-cca-header .brand .site-logo-img,
  .site-header.ags-cca-header .brand .site-logo-img{
    width:clamp(112px,32vw,142px)!important;
    height:44px!important;
    max-height:44px!important;
  }
  .ags-cca-header .ags-cca-account,
  .ags-cca-header .desktop-cart-button{display:none!important;}
  .ags-cca-header .menu-button{display:grid!important;}
  .ags-cca-header .icon-btn{width:38px!important;height:38px!important;min-width:38px!important;border-radius:999px!important;background:rgba(255,255,255,.08)!important;}
}
@media (max-width:430px){
  .ags-cca-header .brand .site-logo-img,
  .site-header.ags-cca-header .brand .site-logo-img{width:104px!important;height:40px!important;max-height:40px!important;}
  .ags-cca-header .icon-btn{width:36px!important;height:36px!important;min-width:36px!important;}
}

/* =========================================================
   AGS Header Left Logo Refinement — 2026-06-13
   Owner request: keep logo on left, remove HOME and JOIN,
   keep ARTISTS/CATALOG navigation clean and professional.
   ========================================================= */
.site-header.ags-cca-header.ags-header-left-logo{
  grid-template-columns:auto minmax(0,1fr) auto!important;
  justify-content:stretch!important;
  align-items:center!important;
  padding-inline:clamp(24px,4.4vw,86px)!important;
  gap:clamp(24px,3.5vw,56px)!important;
}
.ags-header-left-logo .ags-cca-brand{
  justify-self:start!important;
  order:0!important;
}
.ags-header-left-logo .ags-cca-primary-nav{
  justify-self:start!important;
  justify-content:flex-start!important;
  order:1!important;
  gap:clamp(24px,3vw,46px)!important;
}
.ags-header-left-logo .ags-cca-actions{
  justify-self:end!important;
  order:2!important;
}
.ags-header-left-logo .brand .site-logo-img,
.site-header.ags-header-left-logo .brand .site-logo-img{
  width:clamp(112px,8.4vw,150px)!important;
  height:56px!important;
  max-height:56px!important;
  object-fit:contain!important;
  object-position:left center!important;
}
.ags-header-left-logo .ags-cca-primary-nav > a,
.ags-header-left-logo .ags-cca-nav-trigger{
  font-size:13px!important;
  letter-spacing:.02em!important;
}
@media (max-width:1280px){
  .site-header.ags-cca-header.ags-header-left-logo{
    padding-inline:clamp(18px,3vw,48px)!important;
    gap:clamp(18px,2.4vw,36px)!important;
  }
  .ags-header-left-logo .ags-cca-primary-nav{gap:clamp(18px,2.2vw,30px)!important;}
  .ags-header-left-logo .brand .site-logo-img,
  .site-header.ags-header-left-logo .brand .site-logo-img{width:clamp(104px,10vw,132px)!important;}
}
@media (max-width:1040px){
  .site-header.ags-cca-header.ags-header-left-logo{gap:18px!important;}
  .ags-header-left-logo .ags-cca-primary-nav{gap:18px!important;}
  .ags-header-left-logo .ags-cca-primary-nav > a,
  .ags-header-left-logo .ags-cca-nav-trigger{font-size:12px!important;}
}
@media (max-width:920px){
  .site-header.ags-cca-header.ags-header-left-logo{
    grid-template-columns:auto 1fr!important;
    padding-inline:14px!important;
    gap:12px!important;
  }
  .ags-header-left-logo .ags-cca-brand{justify-self:start!important;}
  .ags-header-left-logo .ags-cca-actions{justify-self:end!important;}
  .ags-header-left-logo .brand .site-logo-img,
  .site-header.ags-header-left-logo .brand .site-logo-img{
    width:108px!important;
    height:42px!important;
    max-height:42px!important;
  }
}

/* =========================================================
   AGS Price, Badge & Catalog Shadow Correction — 2026-06-13
   Restore commercial cues on homepage/index while keeping catalog flat:
   - compare-at price visible as strikethrough
   - Flash Sale / Diskon / Sold Out badges remain visible
   - product shelves do not use card shadow, border, gray image well, or sold-out dim overlay
   ========================================================= */
body:not(.admin-page) .product-shelves .featured-row.shelf-row{
  gap: clamp(30px, 3.8vw, 62px) clamp(22px, 3.2vw, 52px) !important;
  align-items:start!important;
}
body:not(.admin-page) .product-shelves .featured-row.shelf-row .mini-product,
body:not(.admin-page) .product-shelves .featured-row.shelf-row .mini-product:hover,
body:not(.admin-page) .product-shelves .featured-row.shelf-row .mini-product:focus-visible{
  background:transparent!important;
  border:0!important;
  outline:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  filter:none!important;
  transform:none!important;
  padding:0!important;
  overflow:visible!important;
}
body:not(.admin-page) .product-shelves .featured-row.shelf-row .mini-product::before,
body:not(.admin-page) .product-shelves .featured-row.shelf-row .mini-product::after,
body:not(.admin-page) .product-shelves .featured-row.shelf-row .mini-product .product-art::before,
body:not(.admin-page) .product-shelves .featured-row.shelf-row .mini-product .product-art::after,
body:not(.admin-page) .product-shelves .featured-row.shelf-row .mini-product .product-art.has-image::before,
body:not(.admin-page) .product-shelves .featured-row.shelf-row .mini-product .product-art.has-image::after{
  content:none!important;
  display:none!important;
  opacity:0!important;
  background:transparent!important;
  box-shadow:none!important;
  filter:none!important;
}
body:not(.admin-page) .product-shelves .featured-row.shelf-row .mini-product .product-art,
body:not(.admin-page) .product-shelves .featured-row.shelf-row .mini-product .product-art.has-image{
  aspect-ratio: 4 / 5!important;
  height:auto!important;
  background:transparent!important;
  border:0!important;
  outline:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  filter:none!important;
  overflow:visible!important;
}
body:not(.admin-page) .product-shelves .featured-row.shelf-row .mini-product .product-art img{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:center center!important;
  padding:0!important;
  background:transparent!important;
  border:0!important;
  outline:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  filter:none!important;
  opacity:1!important;
}
body:not(.admin-page) .product-shelves .featured-row.shelf-row .mini-product.is-sold-out .product-art img{
  filter:none!important;
  opacity:1!important;
}
body:not(.admin-page) .product-shelves .featured-row.shelf-row .mini-product b{
  display:block!important;
  margin-top:10px!important;
  font-size:clamp(15px,1.35vw,20px)!important;
  line-height:1.18!important;
  letter-spacing:-.02em!important;
  font-weight:950!important;
  color:#000!important;
}
body:not(.admin-page) .product-shelves .featured-row.shelf-row .mini-product small{
  display:block!important;
  margin-top:6px!important;
  color:rgba(0,0,0,.48)!important;
  font-size:11px!important;
  line-height:1.25!important;
  letter-spacing:.11em!important;
  font-weight:850!important;
  text-transform:uppercase!important;
}
body:not(.admin-page) .product-shelves .featured-row.shelf-row .mini-price,
body:not(.admin-page) .shop .product-grid .product-card .price,
body:not(.admin-page) .product-detail-price{
  display:flex!important;
  align-items:baseline!important;
  gap:8px!important;
  flex-wrap:wrap!important;
}
body:not(.admin-page) .product-shelves .featured-row.shelf-row .mini-price{
  margin-top:10px!important;
}
body:not(.admin-page) .product-shelves .featured-row.shelf-row .mini-price strong,
body:not(.admin-page) .shop .product-grid .product-card .price b{
  color:#000!important;
  font-weight:950!important;
  font-size:clamp(15px,1.3vw,19px)!important;
  line-height:1!important;
}
body:not(.admin-page) .product-shelves .featured-row.shelf-row .mini-price del,
body:not(.admin-page) .shop .product-grid .product-card .price del,
body:not(.admin-page) .product-detail-price del{
  color:rgba(0,0,0,.45)!important;
  font-size:clamp(12px,1.05vw,15px)!important;
  font-weight:850!important;
  text-decoration:line-through!important;
  text-decoration-thickness:2px!important;
  text-decoration-color:#b51f25!important;
  opacity:1!important;
}
body:not(.admin-page) .product-detail-price del{font-size:18px!important;}
body:not(.admin-page) .product-badge,
body:not(.admin-page) .product-art em.product-badge{
  display:inline-flex!important;
  visibility:visible!important;
  opacity:1!important;
  z-index:10!important;
  box-shadow:none!important;
  border:0!important;
  letter-spacing:.11em!important;
}
body:not(.admin-page) .product-badge-flash_sale{
  background:#ffd21a!important;
  color:#020202!important;
}
body:not(.admin-page) .product-badge-discount{
  background:#c9202b!important;
  color:#fff!important;
}
body:not(.admin-page) .product-badge-sold_out{
  background:#101010!important;
  color:#fff!important;
}
body:not(.admin-page) .gallery-count{
  box-shadow:none!important;
}
@media (max-width:900px){
  body:not(.admin-page) .product-shelves .featured-row.shelf-row{
    gap:28px 16px!important;
  }
}
@media (max-width:560px){
  body:not(.admin-page) .product-shelves .featured-row.shelf-row{
    gap:26px 14px!important;
  }
  body:not(.admin-page) .product-shelves .featured-row.shelf-row .mini-product b{
    font-size:13px!important;
  }
  body:not(.admin-page) .product-shelves .featured-row.shelf-row .mini-product small{
    font-size:9px!important;
  }
  body:not(.admin-page) .product-shelves .featured-row.shelf-row .mini-price strong{
    font-size:13px!important;
  }
  body:not(.admin-page) .product-shelves .featured-row.shelf-row .mini-price del{
    font-size:11px!important;
  }
}

/* AGS Product Detail Size Selector — 20260613 */
body:not(.admin-page) .detail-size-picker{
  display:grid!important;
  gap:12px!important;
  max-width:520px!important;
  margin-top:2px!important;
}
body:not(.admin-page) .detail-size-head{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;
  font-size:12px!important;
  font-weight:900!important;
  text-transform:uppercase!important;
  letter-spacing:.09em!important;
}
body:not(.admin-page) .size-guide-mini{
  appearance:none!important;
  border:1px solid rgba(0,0,0,.18)!important;
  background:#fff!important;
  color:#020202!important;
  border-radius:999px!important;
  min-height:32px!important;
  padding:0 12px!important;
  font-size:11px!important;
  font-weight:900!important;
  letter-spacing:.06em!important;
  text-transform:uppercase!important;
  cursor:pointer!important;
}
body:not(.admin-page) .size-guide-mini:hover{background:#020202!important;color:#fff!important;border-color:#020202!important;}
body:not(.admin-page) .detail-size-grid{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:9px!important;
}
body:not(.admin-page) .detail-size-box{
  appearance:none!important;
  min-width:54px!important;
  height:48px!important;
  padding:0 14px!important;
  border:1.5px solid #d7d7d7!important;
  background:#fff!important;
  color:#020202!important;
  border-radius:0!important;
  font-size:13px!important;
  font-weight:950!important;
  letter-spacing:.08em!important;
  text-transform:uppercase!important;
  cursor:pointer!important;
  transition:background .18s ease,color .18s ease,border-color .18s ease,opacity .18s ease!important;
}
body:not(.admin-page) .detail-size-box:hover{border-color:#020202!important;}
body:not(.admin-page) .detail-size-box.is-selected{
  background:#020202!important;
  color:#fff!important;
  border-color:#020202!important;
}
body:not(.admin-page) .detail-size-box.is-disabled,
body:not(.admin-page) .detail-size-box:disabled{
  cursor:not-allowed!important;
  opacity:.38!important;
  color:#777!important;
  background:#f5f5f5!important;
  text-decoration:line-through!important;
}
body:not(.admin-page) .detail-stock-note{
  margin:0!important;
  font-size:13px!important;
  font-weight:800!important;
  color:#111!important;
}
body:not(.admin-page) .detail-stock-note.is-empty{color:#b3282d!important;}
body:not(.admin-page) .detail-size-select{display:none!important;}
body:not(.admin-page) .size-guide-modal .size-guide-card{
  max-width:min(760px,calc(100vw - 28px))!important;
  width:100%!important;
  padding:22px!important;
  border-radius:18px!important;
}
body:not(.admin-page) .size-guide-card small{
  display:block!important;
  font-size:11px!important;
  font-weight:900!important;
  letter-spacing:.12em!important;
  color:#777!important;
  margin-bottom:4px!important;
}
body:not(.admin-page) .size-guide-card h2{
  margin:0 36px 16px 0!important;
  font-family:'Bebas Neue',sans-serif!important;
  font-size:44px!important;
  line-height:1!important;
}
body:not(.admin-page) .size-guide-card img{
  display:block!important;
  width:100%!important;
  max-height:72vh!important;
  object-fit:contain!important;
  background:#fff!important;
}
@media (max-width:740px){
  body:not(.admin-page) .detail-size-head{align-items:flex-start!important;}
  body:not(.admin-page) .detail-size-box{min-width:50px!important;height:46px!important;padding:0 12px!important;}
  body:not(.admin-page) .size-guide-card h2{font-size:36px!important;}
  body:not(.admin-page) .size-guide-modal .size-guide-card{border-radius:18px 18px 0 0!important;padding:18px!important;}
}

/* AGS Product Detail Quantity Selector — 20260613 */
body:not(.admin-page) .detail-qty-control{
  display:grid!important;
  gap:8px!important;
  margin-top:2px!important;
  max-width:360px!important;
}
body:not(.admin-page) .detail-qty-control > span{
  font-size:12px!important;
  font-weight:900!important;
  text-transform:uppercase!important;
  letter-spacing:.09em!important;
  color:#111!important;
}
body:not(.admin-page) .detail-qty-stepper{
  display:inline-grid!important;
  grid-template-columns:48px 72px 48px!important;
  align-items:center!important;
  width:max-content!important;
  border:1.5px solid #d7d7d7!important;
  background:#fff!important;
  border-radius:0!important;
  overflow:hidden!important;
}
body:not(.admin-page) .detail-qty-stepper button,
body:not(.admin-page) .detail-qty-stepper input{
  height:48px!important;
  border:0!important;
  background:#fff!important;
  color:#020202!important;
  font:inherit!important;
  font-size:14px!important;
  font-weight:950!important;
  text-align:center!important;
  outline:none!important;
}
body:not(.admin-page) .detail-qty-stepper button{
  cursor:pointer!important;
  font-size:20px!important;
  line-height:1!important;
}
body:not(.admin-page) .detail-qty-stepper button:hover:not(:disabled){background:#020202!important;color:#fff!important;}
body:not(.admin-page) .detail-qty-stepper button:disabled,
body:not(.admin-page) .detail-qty-stepper input:disabled{
  opacity:.38!important;
  cursor:not-allowed!important;
  background:#f5f5f5!important;
}
body:not(.admin-page) .detail-qty-stepper input::-webkit-outer-spin-button,
body:not(.admin-page) .detail-qty-stepper input::-webkit-inner-spin-button{appearance:none!important;margin:0!important;}
body:not(.admin-page) .detail-qty-stepper input[type=number]{-moz-appearance:textfield!important;}
body:not(.admin-page) .detail-qty-help,
body:not(.admin-page) [data-detail-qty-help]{
  font-size:12px!important;
  color:#777!important;
  font-weight:700!important;
}
@media (max-width:740px){
  body:not(.admin-page) .detail-qty-stepper{grid-template-columns:46px 68px 46px!important;}
  body:not(.admin-page) .detail-qty-stepper button,
  body:not(.admin-page) .detail-qty-stepper input{height:46px!important;}
}


/* AGS Product Detail Sold Size — Strike Only 20260613
   Keep sold-out sizes visible and disabled, but show only a strikethrough size without SOLD text. */
body:not(.admin-page) .detail-size-box{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex-direction:row!important;
  gap:0!important;
  line-height:1!important;
}
body:not(.admin-page) .detail-size-box .size-value{
  display:block!important;
}
body:not(.admin-page) .detail-size-box .size-sold-label{
  display:none!important;
}
body:not(.admin-page) .detail-size-box.is-disabled,
body:not(.admin-page) .detail-size-box:disabled{
  opacity:1!important;
  color:#8b8b8b!important;
  background:#f3f3f3!important;
  border-color:#dedede!important;
  text-decoration:none!important;
  cursor:not-allowed!important;
  pointer-events:none!important;
}
body:not(.admin-page) .detail-size-box.is-disabled .size-value,
body:not(.admin-page) .detail-size-box:disabled .size-value{
  opacity:.55!important;
  text-decoration:line-through!important;
  text-decoration-thickness:1.5px!important;
}
body:not(.admin-page) .detail-size-box.is-disabled:hover,
body:not(.admin-page) .detail-size-box:disabled:hover{
  border-color:#dedede!important;
  background:#f3f3f3!important;
  color:#8b8b8b!important;
}

/* =========================================================
   AGS Checkout Copy + Product Alignment Correction — 2026-06-13
   - Copy buttons now give visible feedback after successful copy.
   - Product cards use consistent vertical rhythm so price/action rows align.
   - No border/shadow is added; catalog remains flat and clean.
   ========================================================= */
body:not(.admin-page) .payment-actions .btn.is-copied,
body:not(.admin-page) [data-copy-text].is-copied{
  background:#101010!important;
  color:#fff!important;
  border-color:#101010!important;
}

body:not(.admin-page) .shop .product-grid{
  align-items:stretch!important;
}
body:not(.admin-page) .shop .product-grid .product-card{
  display:flex!important;
  flex-direction:column!important;
  height:100%!important;
  min-height:100%!important;
}
body:not(.admin-page) .shop .product-grid .product-card .product-art,
body:not(.admin-page) .shop .product-grid .product-card .product-art.has-image{
  flex:0 0 auto!important;
}
body:not(.admin-page) .shop .product-grid .product-card .product-info{
  display:flex!important;
  flex-direction:column!important;
  flex:1 1 auto!important;
  min-height:0!important;
}
body:not(.admin-page) .shop .product-grid .product-card .product-info small{
  min-height:16px!important;
}
body:not(.admin-page) .shop .product-grid .product-card .product-info h3{
  min-height:calc(1.18em * 2)!important;
  display:-webkit-box!important;
  -webkit-line-clamp:2!important;
  -webkit-box-orient:vertical!important;
  overflow:hidden!important;
}
body:not(.admin-page) .shop .product-grid .product-card .product-info p{
  min-height:calc(1.35em * 2)!important;
  display:-webkit-box!important;
  -webkit-line-clamp:2!important;
  -webkit-box-orient:vertical!important;
  overflow:hidden!important;
}
body:not(.admin-page) .shop .product-grid .product-card .price{
  min-height:30px!important;
  margin-top:10px!important;
}
body:not(.admin-page) .shop .product-grid .product-card .meta{
  min-height:20px!important;
  margin-top:8px!important;
}
body:not(.admin-page) .shop .product-grid .product-card .product-actions{
  margin-top:auto!important;
  padding-top:16px!important;
  align-items:center!important;
}
body:not(.admin-page) .shop .product-grid .product-card .product-actions .btn,
body:not(.admin-page) .shop .product-grid .product-card .product-actions .btn-outline-sm{
  min-height:48px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
}

body:not(.admin-page) .product-shelves .featured-row.shelf-row{
  align-items:stretch!important;
}
body:not(.admin-page) .product-shelves .featured-row.shelf-row .mini-product{
  display:flex!important;
  flex-direction:column!important;
  height:100%!important;
}
body:not(.admin-page) .product-shelves .featured-row.shelf-row .mini-product b{
  min-height:calc(1.18em * 2)!important;
  display:-webkit-box!important;
  -webkit-line-clamp:2!important;
  -webkit-box-orient:vertical!important;
  overflow:hidden!important;
}
body:not(.admin-page) .product-shelves .featured-row.shelf-row .mini-product small{
  min-height:16px!important;
}
body:not(.admin-page) .product-shelves .featured-row.shelf-row .mini-price{
  margin-top:auto!important;
  padding-top:10px!important;
  min-height:30px!important;
}

@media (max-width:760px){
  body:not(.admin-page) .shop .product-grid .product-card .product-info h3{
    min-height:calc(1.18em * 2)!important;
  }
  body:not(.admin-page) .shop .product-grid .product-card .product-info p{
    min-height:calc(1.35em * 2)!important;
  }
  body:not(.admin-page) .shop .product-grid .product-card .product-actions{
    padding-top:12px!important;
  }
  body:not(.admin-page) .shop .product-grid .product-card .product-actions .btn,
  body:not(.admin-page) .shop .product-grid .product-card .product-actions .btn-outline-sm{
    min-height:40px!important;
  }
}

/* =========================================================
   AGS CHECKOUT + POPUP REFINEMENT — 2026-06-13
   - Hide the checkout step rail requested in UAT.
   - Keep order summary after customer/shipping address fields.
   - Remove homepage popup product info overlay card.
   ========================================================= */
.checkout-progress-rail {
  display: none !important;
}
.checkout-summary-placement {
  display: block;
  margin: 14px 0;
  width: 100%;
}
.checkout-summary-placement .checkout-summary {
  margin: 0 !important;
}
[data-welcome-popup] .popup-featured-product,
.popup-featured-product {
  display: none !important;
}
[data-welcome-popup] .popup-visual {
  padding-bottom: 0 !important;
}
[data-welcome-popup] .popup-visual-frame {
  margin-bottom: 0 !important;
}
@media (max-width: 760px) {
  .checkout-summary-placement {
    margin: 12px 0;
  }
}

/* =========================================================
   AGS GLOBAL IMAGE SHADOW RESET — 2026-06-13
   Request: remove shadow/gradient treatment from all customer-facing images,
   matching the clean catalog/index direction. This intentionally targets image
   containers, pseudo overlays, thumbnail frames, hero/slider visuals, popup visuals,
   product detail images, cart/checkout thumbnails, campaign images, and size guide.
   ========================================================= */
body:not(.admin-page) img,
body:not(.admin-page) picture,
body:not(.admin-page) .product-art,
body:not(.admin-page) .product-art.has-image,
body:not(.admin-page) .popup-art,
body:not(.admin-page) .popup-visual,
body:not(.admin-page) .popup-visual-frame,
body:not(.admin-page) .hero-visual,
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,
body:not(.admin-page) .hero-slide-placeholder,
body:not(.admin-page) .mini-product,
body:not(.admin-page) .product-card,
body:not(.admin-page) .product-detail-gallery,
body:not(.admin-page) .product-detail-main,
body:not(.admin-page) .product-detail-thumbs button,
body:not(.admin-page) .quick-thumbs button,
body:not(.admin-page) .cart-thumb,
body:not(.admin-page) .search-result-thumb,
body:not(.admin-page) .campaign-card,
body:not(.admin-page) .size-guide-card,
body:not(.admin-page) .qris-preview{
  box-shadow:none!important;
  filter:none!important;
  -webkit-filter:none!important;
  text-shadow:none!important;
}

body:not(.admin-page) .product-art,
body:not(.admin-page) .product-art.has-image,
body:not(.admin-page) .popup-art,
body:not(.admin-page) .product-detail-main,
body:not(.admin-page) .product-detail-gallery,
body:not(.admin-page) .quick-thumbs button,
body:not(.admin-page) .product-detail-thumbs button,
body:not(.admin-page) .cart-thumb,
body:not(.admin-page) .search-result-thumb,
body:not(.admin-page) .size-guide-card,
body:not(.admin-page) .qris-preview{
  background:transparent!important;
  background-image:none!important;
}

body:not(.admin-page) .product-art::before,
body:not(.admin-page) .product-art::after,
body:not(.admin-page) .product-art.has-image::before,
body:not(.admin-page) .product-art.has-image::after,
body:not(.admin-page) .popup-art::before,
body:not(.admin-page) .popup-art::after,
body:not(.admin-page) .popup-visual-frame::before,
body:not(.admin-page) .popup-visual-frame::after,
body:not(.admin-page) .hero-slide-frame::before,
body:not(.admin-page) .hero-slide-frame::after,
body:not(.admin-page) .hero-slide-picture::before,
body:not(.admin-page) .hero-slide-picture::after,
body:not(.admin-page) .product-detail-main::before,
body:not(.admin-page) .product-detail-main::after,
body:not(.admin-page) .campaign-card::before,
body:not(.admin-page) .campaign-card::after,
body:not(.admin-page) .cart-thumb::before,
body:not(.admin-page) .cart-thumb::after,
body:not(.admin-page) .search-result-thumb::before,
body:not(.admin-page) .search-result-thumb::after{
  display:none!important;
  opacity:0!important;
  background:none!important;
  background-image:none!important;
  box-shadow:none!important;
  filter:none!important;
}

body:not(.admin-page) .product-card.is-sold-out .product-art img,
body:not(.admin-page) .mini-product.is-sold-out .product-art img,
body:not(.admin-page) .product-card .product-art img,
body:not(.admin-page) .mini-product .product-art img,
body:not(.admin-page) .featured-row.shelf-row .mini-product .product-art img,
body:not(.admin-page) .shop .product-grid .product-card .product-art img,
body:not(.admin-page) .product-detail-main img,
body:not(.admin-page) .product-detail-thumbs img,
body:not(.admin-page) .quick-thumbs img,
body:not(.admin-page) .popup-visual-frame img,
body:not(.admin-page) .hero-slide-picture img,
body:not(.admin-page) .cart-thumb img,
body:not(.admin-page) .search-result-thumb img,
body:not(.admin-page) .campaign-card img,
body:not(.admin-page) .size-guide-card img,
body:not(.admin-page) .qris-preview img{
  filter:none!important;
  -webkit-filter:none!important;
  opacity:1!important;
  box-shadow:none!important;
  text-shadow:none!important;
}

body:not(.admin-page) .product-card:hover,
body:not(.admin-page) .mini-product:hover,
body:not(.admin-page) .campaign-card:hover,
body:not(.admin-page) .popup-visual:hover{
  box-shadow:none!important;
}

/* Keep images separated by spacing/layout only, not by artificial shadows. */
body:not(.admin-page) .product-grid,
body:not(.admin-page) .featured-row.shelf-row{
  gap:clamp(22px, 3vw, 42px)!important;
}

/* AGS Checkout Order Summary After Create — 2026-06-13
   Order summary is no longer shown inside the checkout form. It appears only on the payment instruction screen after the order is created. */
.checkout-summary-placement {
  display: none !important;
}
.created-order-summary {
  margin: 14px 0;
  border: 1px solid rgba(0,0,0,.1);
  border-radius: 20px;
  background: #fff;
  color: #020202;
  padding: 16px;
  display: grid;
  gap: 12px;
}
.created-summary-head,
.created-summary-totals > div,
.created-summary-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
}
.created-summary-head b {
  font-size: 17px;
  letter-spacing: -.03em;
}
.created-summary-head span,
.created-summary-item small,
.created-summary-totals span,
.created-order-summary small,
.created-summary-empty {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}
.created-summary-items {
  display: grid;
  gap: 9px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.created-summary-item span {
  display: grid;
  gap: 3px;
}
.created-summary-item strong,
.created-summary-totals b {
  white-space: nowrap;
}
.created-summary-totals {
  display: grid;
  gap: 8px;
}
.created-summary-totals .total {
  border-top: 1px solid var(--line);
  padding-top: 10px;
  margin-top: 2px;
}
.created-summary-totals .total b {
  font-size: 18px;
}
@media (max-width: 560px) {
  .created-order-summary {
    border-radius: 18px;
    padding: 14px;
  }
  .created-summary-head,
  .created-summary-totals > div,
  .created-summary-item {
    gap: 10px;
  }
  .created-summary-totals .total b {
    font-size: 16px;
  }
}

/* AGS 2026-06-13 — Payment countdown / temporary stock reservation */
.payment-countdown-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 18px 0;
  padding: 18px 20px;
  border-radius: 22px;
  background: #ffd91a;
  color: #050505;
  border: 1px solid rgba(0,0,0,.12);
}
.payment-countdown-card small {
  display: block;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 11px;
  margin-bottom: 4px;
}
.payment-countdown-card b {
  display: block;
  font-size: clamp(32px, 5vw, 54px);
  line-height: .9;
  letter-spacing: -.05em;
  font-weight: 1000;
}
.payment-countdown-card p {
  max-width: 560px;
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  font-weight: 800;
}
.payment-countdown-card.is-expired {
  background: #111;
  color: #fff;
  border-color: #111;
}
.payment-countdown-card.is-expired p { color: rgba(255,255,255,.78); }
@media (max-width: 740px) {
  .payment-countdown-card {
    align-items: flex-start;
    flex-direction: column;
    border-radius: 18px;
    padding: 16px;
  }
  .payment-countdown-card p { font-size: 13px; }
}


/* AGS 2026-06-13 — Compact payment result one-view refinement */
.modal[data-checkout] .checkout-pro.is-payment-view .checkout-top{padding:14px 56px 10px 22px!important;}
.modal[data-checkout] .checkout-pro.is-payment-view .checkout-top h2{font-size:clamp(30px,5vw,46px)!important;line-height:.92!important;}
.modal[data-checkout] .checkout-pro.is-payment-view .checkout-top p,
.modal[data-checkout] .checkout-pro.is-payment-view .checkout-top .checkout-kicker{display:none!important;}
.modal[data-checkout] .checkout-pro.is-payment-view .payment-result{padding:12px 18px 18px!important;}
.payment-result-shell.compact-payment-view{display:grid;gap:12px;}
.payment-result-heading{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,330px);gap:12px;align-items:stretch;}
.payment-success-kicker{display:inline-flex;align-items:center;width:max-content;border-radius:999px;background:#111;color:#fff;padding:5px 9px;font-size:10px;line-height:1;font-weight:900;letter-spacing:.08em;text-transform:uppercase;margin-bottom:7px;}
.payment-result-heading h3{margin:0 0 5px!important;font-size:clamp(24px,4vw,38px)!important;line-height:.94!important;letter-spacing:-.06em!important;}
.payment-result-heading p{margin:0!important;font-size:13px!important;line-height:1.4!important;}
.payment-countdown-card.payment-countdown-compact{margin:0!important;padding:10px 12px!important;border-radius:15px!important;gap:10px!important;background:#ffd91a!important;}
.payment-countdown-card.payment-countdown-compact small{font-size:9px!important;letter-spacing:.08em!important;margin-bottom:3px!important;}
.payment-countdown-card.payment-countdown-compact b{font-size:clamp(22px,3vw,34px)!important;line-height:.9!important;}
.payment-countdown-card.payment-countdown-compact p{font-size:11px!important;line-height:1.28!important;font-weight:700!important;max-width:170px!important;}
.payment-result-grid-oneview{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,390px);gap:12px;align-items:start;}
.payment-instruction-card,.compact-payment-view .created-order-summary{border:1px solid #e7e7e7!important;border-radius:18px!important;background:#fff!important;padding:12px!important;margin:0!important;box-shadow:none!important;}
.payment-card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px;}
.payment-card-head span{color:var(--muted);font-size:12px;font-weight:800;}
.payment-card-head b{font-size:13px;text-align:right;}
.payment-box.payment-box-compact{margin:0 0 10px!important;padding:10px!important;border-radius:14px!important;}
.payment-box-compact .payment-line{padding:7px 0!important;font-size:13px!important;}
.payment-instruction-card p{margin:8px 0!important;font-size:12px!important;line-height:1.35!important;}
.compact-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px!important;}
.compact-actions .btn{min-height:38px!important;height:38px!important;padding:0 12px!important;font-size:12px!important;}
.qris-preview.qris-preview-compact{padding:8px!important;margin:8px 0!important;border-radius:14px!important;}
.qris-preview.qris-preview-compact img{width:min(170px,48vw)!important;max-height:170px!important;}
.compact-payment-view .created-summary-head{margin-bottom:8px!important;}
.compact-payment-view .created-summary-items{max-height:150px;overflow:auto;padding-right:3px;}
.compact-payment-view .created-summary-item{padding:7px 0!important;gap:10px!important;}
.compact-payment-view .created-summary-item span b,.compact-payment-view .created-summary-item strong{font-size:12px!important;}
.compact-payment-view .created-summary-item span small{font-size:11px!important;}
.compact-payment-view .created-summary-totals{margin-top:8px!important;padding-top:8px!important;}
.compact-payment-view .created-summary-totals > div{font-size:12px!important;padding:5px 0!important;}
.compact-payment-view .created-summary-totals .total b{font-size:15px!important;}
.compact-payment-view .created-order-summary > small{display:block;margin-top:6px;font-size:11px!important;line-height:1.3!important;}
.payment-footer-actions{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important;margin-top:0!important;}
.payment-footer-actions .btn{height:42px!important;min-height:42px!important;justify-content:center!important;}
@media(max-width:900px){.payment-result-heading,.payment-result-grid-oneview{grid-template-columns:1fr!important}.payment-countdown-card.payment-countdown-compact{flex-direction:row!important;align-items:center!important;justify-content:space-between!important}.payment-countdown-card.payment-countdown-compact p{max-width:none!important}}
@media(max-width:760px){.modal[data-checkout] .checkout-pro.is-payment-view .checkout-top{padding:12px 52px 8px 14px!important}.modal[data-checkout] .checkout-pro.is-payment-view .checkout-top h2{font-size:30px!important}.modal[data-checkout] .checkout-pro.is-payment-view .payment-result{padding:10px 12px max(14px,env(safe-area-inset-bottom))!important}.payment-result-shell.compact-payment-view{gap:9px!important}.payment-result-heading h3{font-size:24px!important}.payment-result-heading p{font-size:12px!important}.payment-countdown-card.payment-countdown-compact{padding:9px 10px!important;border-radius:14px!important}.payment-countdown-card.payment-countdown-compact b{font-size:24px!important}.payment-countdown-card.payment-countdown-compact p{font-size:10.5px!important;max-width:155px!important}.payment-instruction-card,.compact-payment-view .created-order-summary{padding:10px!important;border-radius:16px!important}.compact-payment-view .created-summary-items{max-height:120px!important}.payment-footer-actions{grid-template-columns:1fr!important}}


/* AGS Slider Page-Open + Soft Scroll Reveal — 13 Juni 2026
   Menambahkan animasi seperti membuka halaman pada slider dan reveal halus saat scroll.
   Tidak menambah shadow/border baru pada gambar. */
.hero-slider-track{
  perspective:1600px!important;
  transform-style:preserve-3d!important;
}
.hero-slide{
  backface-visibility:hidden!important;
  will-change:opacity,transform!important;
}
.hero-slide.is-active{z-index:2!important}
.hero-slide.is-page-leaving{
  opacity:1!important;
  z-index:3!important;
  pointer-events:none!important;
  transform:none!important;
}
.hero-slide.is-page-entering{
  opacity:1!important;
  z-index:4!important;
  pointer-events:auto!important;
  transform:none!important;
}
.hero-slide.is-page-entering .hero-slide-frame,
.hero-slide.is-page-leaving .hero-slide-frame{
  will-change:clip-path,transform,opacity!important;
  backface-visibility:hidden!important;
  transform-style:preserve-3d!important;
  box-shadow:none!important;
}
.hero-slider[data-slider-direction="next"] .hero-slide.is-page-entering .hero-slide-frame{
  transform-origin:left center!important;
  animation:ags-page-open-in-next .86s cubic-bezier(.18,.76,.2,1) both!important;
}
.hero-slider[data-slider-direction="next"] .hero-slide.is-page-leaving .hero-slide-frame{
  transform-origin:right center!important;
  animation:ags-page-open-out-next .86s cubic-bezier(.18,.76,.2,1) both!important;
}
.hero-slider[data-slider-direction="prev"] .hero-slide.is-page-entering .hero-slide-frame{
  transform-origin:right center!important;
  animation:ags-page-open-in-prev .86s cubic-bezier(.18,.76,.2,1) both!important;
}
.hero-slider[data-slider-direction="prev"] .hero-slide.is-page-leaving .hero-slide-frame{
  transform-origin:left center!important;
  animation:ags-page-open-out-prev .86s cubic-bezier(.18,.76,.2,1) both!important;
}
@keyframes ags-page-open-in-next{
  0%{clip-path:polygon(0 0,0 0,0 100%,0 100%);transform:perspective(1600px) rotateY(-18deg) scale(1.025);opacity:.88}
  54%{clip-path:polygon(0 0,62% 0,52% 100%,0 100%);transform:perspective(1600px) rotateY(-7deg) scale(1.012);opacity:1}
  100%{clip-path:polygon(0 0,100% 0,100% 100%,0 100%);transform:perspective(1600px) rotateY(0) scale(1);opacity:1}
}
@keyframes ags-page-open-out-next{
  0%{clip-path:polygon(0 0,100% 0,100% 100%,0 100%);transform:perspective(1600px) rotateY(0) scale(1);opacity:1}
  100%{clip-path:polygon(100% 0,100% 0,100% 100%,100% 100%);transform:perspective(1600px) rotateY(11deg) scale(.998);opacity:.72}
}
@keyframes ags-page-open-in-prev{
  0%{clip-path:polygon(100% 0,100% 0,100% 100%,100% 100%);transform:perspective(1600px) rotateY(18deg) scale(1.025);opacity:.88}
  54%{clip-path:polygon(42% 0,100% 0,100% 100%,50% 100%);transform:perspective(1600px) rotateY(7deg) scale(1.012);opacity:1}
  100%{clip-path:polygon(0 0,100% 0,100% 100%,0 100%);transform:perspective(1600px) rotateY(0) scale(1);opacity:1}
}
@keyframes ags-page-open-out-prev{
  0%{clip-path:polygon(0 0,100% 0,100% 100%,0 100%);transform:perspective(1600px) rotateY(0) scale(1);opacity:1}
  100%{clip-path:polygon(0 0,0 0,0 100%,0 100%);transform:perspective(1600px) rotateY(-11deg) scale(.998);opacity:.72}
}
.ags-motion-ready .ags-reveal{
  opacity:0!important;
  transform:translate3d(0,22px,0)!important;
  transition:opacity .78s cubic-bezier(.22,.61,.36,1), transform .78s cubic-bezier(.22,.61,.36,1)!important;
  transition-delay:var(--ags-reveal-delay,0ms)!important;
  will-change:opacity,transform!important;
}
.ags-motion-ready .ags-reveal.is-visible{
  opacity:1!important;
  transform:translate3d(0,0,0)!important;
}
.ags-motion-ready .product-card.ags-reveal{
  transform:translate3d(0,18px,0)!important;
}
.ags-motion-ready .product-card.ags-reveal.is-visible{
  transform:translate3d(0,0,0)!important;
}
@media(max-width:740px){
  .hero-slider[data-slider-direction] .hero-slide.is-page-entering .hero-slide-frame,
  .hero-slider[data-slider-direction] .hero-slide.is-page-leaving .hero-slide-frame{
    animation-duration:.72s!important;
  }
  .ags-motion-ready .ags-reveal{transform:translate3d(0,16px,0)!important;transition-duration:.62s!important}
}
@media(prefers-reduced-motion:reduce){
  .hero-slide,
  .hero-slide-frame,
  .hero-slider-progress .hero-slider-dots button span,
  .ags-reveal{
    animation:none!important;
    transition:none!important;
    transform:none!important;
    opacity:1!important;
    clip-path:none!important;
  }
}

/* AGS CCA-style scroll reveal + full-original slider image — 2026-06-13
   Produk muncul bertahap saat scroll; slider menampilkan artwork original tanpa crop. */
.hero-slider{
  background:#020202!important;
  padding:0 0 42px!important;
}
.hero-slider-track{
  width:100%!important;
  max-width:none!important;
  aspect-ratio:16/9!important;
  height:auto!important;
  min-height:0!important;
  background:#020202!important;
  border-radius:0!important;
  overflow:hidden!important;
}
.hero-slide-frame,
.hero-slide-picture,
.hero-slide-picture img,
.hero-slide-image{
  border-radius:0!important;
  box-shadow:none!important;
}
.hero-slide-image{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:center center!important;
  padding:0!important;
  background:#020202!important;
  transform:none!important;
}
.hero-slide-frame.has-image{
  background:#020202!important;
}
.hero-slide-frame.has-image::before,
.hero-slide-frame.has-image::after,
.hero-slide-picture::before,
.hero-slide-picture::after{
  display:none!important;
  content:none!important;
}
.hero-slider-progress .hero-slider-dots button{
  background:rgba(255,255,255,.36)!important;
}
.hero-slider-progress .hero-slider-dots button span{background:#fff!important}

.ags-motion-ready .section-head.ags-reveal,
.ags-motion-ready .listing-hero.ags-reveal,
.ags-motion-ready .section > h2.ags-reveal{
  opacity:0!important;
  transform:translate3d(0,18px,0)!important;
  transition:opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1)!important;
  transition-delay:var(--ags-reveal-delay,0ms)!important;
}
.ags-motion-ready .section-head.ags-reveal.is-visible,
.ags-motion-ready .listing-hero.ags-reveal.is-visible,
.ags-motion-ready .section > h2.ags-reveal.is-visible{
  opacity:1!important;
  transform:translate3d(0,0,0)!important;
}

.ags-motion-ready .ags-product-reveal{
  opacity:1!important;
  transform:none!important;
  transition:none!important;
}
.ags-motion-ready .ags-product-reveal .product-art{
  opacity:0!important;
  clip-path:inset(18% 0 0 0)!important;
  transform:translate3d(0,26px,0) scale(1.018)!important;
  transform-origin:center bottom!important;
  transition:
    opacity .82s cubic-bezier(.22,.61,.36,1),
    clip-path .92s cubic-bezier(.22,.61,.36,1),
    transform .92s cubic-bezier(.22,.61,.36,1)!important;
  transition-delay:var(--ags-reveal-delay,0ms)!important;
  will-change:opacity,clip-path,transform!important;
}
.ags-motion-ready .ags-product-reveal.is-visible .product-art{
  opacity:1!important;
  clip-path:inset(0 0 0 0)!important;
  transform:translate3d(0,0,0) scale(1)!important;
}
.ags-motion-ready .ags-product-reveal .product-info,
.ags-motion-ready .ags-product-reveal > b,
.ags-motion-ready .ags-product-reveal > small,
.ags-motion-ready .ags-product-reveal > .mini-price,
.ags-motion-ready .ags-product-reveal .product-actions{
  opacity:0!important;
  transform:translate3d(0,14px,0)!important;
  transition:opacity .62s cubic-bezier(.22,.61,.36,1), transform .62s cubic-bezier(.22,.61,.36,1)!important;
  transition-delay:calc(var(--ags-reveal-delay,0ms) + 105ms)!important;
  will-change:opacity,transform!important;
}
.ags-motion-ready .ags-product-reveal.is-visible .product-info,
.ags-motion-ready .ags-product-reveal.is-visible > b,
.ags-motion-ready .ags-product-reveal.is-visible > small,
.ags-motion-ready .ags-product-reveal.is-visible > .mini-price,
.ags-motion-ready .ags-product-reveal.is-visible .product-actions{
  opacity:1!important;
  transform:translate3d(0,0,0)!important;
}
.product-grid .product-card,
.featured-row.shelf-row .mini-product{
  backface-visibility:hidden!important;
  contain:layout paint!important;
}
.product-card .product-art img,
.mini-product .product-art img{
  transition:transform .75s cubic-bezier(.22,.61,.36,1), opacity .45s ease!important;
}
.product-card:hover .product-art img,
.mini-product:hover .product-art img{
  transform:scale(1.018)!important;
}

@media(max-width:740px){
  .hero-slider{padding-bottom:36px!important}
  .hero-slider-track{aspect-ratio:5/7!important}
  .hero-slide-image{object-fit:contain!important}
  .ags-motion-ready .ags-product-reveal .product-art{
    transform:translate3d(0,18px,0) scale(1.012)!important;
    transition-duration:.68s!important;
  }
  .ags-motion-ready .ags-product-reveal .product-info,
  .ags-motion-ready .ags-product-reveal > b,
  .ags-motion-ready .ags-product-reveal > small,
  .ags-motion-ready .ags-product-reveal > .mini-price,
  .ags-motion-ready .ags-product-reveal .product-actions{
    transition-duration:.5s!important;
  }
}
@media(prefers-reduced-motion:reduce){
  .ags-motion-ready .section-head.ags-reveal,
  .ags-motion-ready .listing-hero.ags-reveal,
  .ags-motion-ready .section > h2.ags-reveal,
  .ags-motion-ready .ags-product-reveal,
  .ags-motion-ready .ags-product-reveal .product-art,
  .ags-motion-ready .ags-product-reveal .product-info,
  .ags-motion-ready .ags-product-reveal > b,
  .ags-motion-ready .ags-product-reveal > small,
  .ags-motion-ready .ags-product-reveal > .mini-price,
  .ags-motion-ready .ags-product-reveal .product-actions{
    opacity:1!important;
    transform:none!important;
    clip-path:none!important;
    transition:none!important;
  }
}


/* AGS Slider Image Focus Up — 2026-06-13
   Artwork slider sudah tampil utuh; posisi gambar dinaikkan sedikit agar framing lebih pas.
   Tetap object-fit: contain supaya gambar tidak terpotong. */
.hero-slide-image{
  object-fit:contain!important;
  object-position:center 36%!important;
}
@media(max-width:740px){
  .hero-slide-image{
    object-fit:contain!important;
    object-position:center 30%!important;
  }
}

/* AGS Final CCA-style slider framing — 2026-06-13
   Keputusan final: gunakan object-fit cover seperti reference storefront agar banner terasa penuh.
   Desktop/laptop memakai rasio editorial pendek seperti Closed Casket; mobile tetap memakai artwork mobile vertikal.
   Catatan: cover akan melakukan crop kecil secara terkontrol, tetapi tampilan jauh lebih premium dan full-width. */
.hero-slider{
  background:#020202!important;
  padding:0 0 40px!important;
}
.hero-slider-track{
  width:100%!important;
  max-width:none!important;
  aspect-ratio:398/167!important;
  height:auto!important;
  min-height:420px!important;
  max-height:560px!important;
  border-radius:0!important;
  overflow:hidden!important;
  background:#020202!important;
}
.hero-slide-frame,
.hero-slide-picture{
  width:100%!important;
  height:100%!important;
  min-height:inherit!important;
  border-radius:0!important;
  overflow:hidden!important;
  background:#020202!important;
}
.hero-slide-image,
.hero-slide-picture img{
  width:100%!important;
  height:100%!important;
  display:block!important;
  object-fit:cover!important;
  object-position:center 30%!important;
  padding:0!important;
  margin:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  background:#020202!important;
}
.hero-slide-frame::before,
.hero-slide-frame::after,
.hero-slide-picture::before,
.hero-slide-picture::after,
.hero-slider-track::before,
.hero-slider-track::after{
  display:none!important;
  content:none!important;
}

@media(min-width:1200px){
  .hero-slider-track{
    min-height:500px!important;
    max-height:580px!important;
  }
  .hero-slide-image,
  .hero-slide-picture img{
    object-position:center 30%!important;
  }
}

@media(min-width:741px) and (max-width:1199px){
  .hero-slider-track{
    aspect-ratio:398/167!important;
    min-height:430px!important;
    max-height:520px!important;
  }
  .hero-slide-image,
  .hero-slide-picture img{
    object-position:center 28%!important;
  }
}

@media(max-width:740px){
  .hero-slider{
    padding:0 0 34px!important;
  }
  .hero-slider-track{
    aspect-ratio:4/5!important;
    min-height:430px!important;
    max-height:620px!important;
  }
  .hero-slide-image,
  .hero-slide-picture img{
    object-fit:cover!important;
    object-position:center 24%!important;
  }
}

/* AGS 2026-06-13 — Home hero no-ticker spacing + footer WhatsApp refinement
   Running text can be hidden on the first homepage without leaving the old ticker gap.
   Floating WhatsApp bubble is removed from customer view; WhatsApp contact lives in footer. */
body.no-news-ticker{
  padding-top:var(--header-h)!important;
}
body.no-news-ticker.modal-open,
html.modal-lock body.no-news-ticker{
  padding-top:var(--header-h)!important;
}
body.no-news-ticker .site-header{
  top:0!important;
}
body.no-news-ticker .mobile-menu{
  top:var(--header-h)!important;
}
body.no-news-ticker .news-ticker{
  display:none!important;
  height:0!important;
  min-height:0!important;
  opacity:0!important;
  pointer-events:none!important;
  visibility:hidden!important;
}
body.no-news-ticker .hero-slider{
  margin-top:0!important;
}
body.no-news-ticker main,
body.no-news-ticker #main-content{
  margin-top:0!important;
}

/* Disable any legacy floating WA UI if an older cached block exists. */
body:not(.admin-page) > .wa-bubble,
body:not(.admin-page) .wa-bubble:not(.footer-wa){
  display:none!important;
  opacity:0!important;
  pointer-events:none!important;
  visibility:hidden!important;
}

.footer-links{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  flex-wrap:wrap!important;
  gap:10px!important;
}
.footer-wa{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  min-height:40px!important;
  padding:10px 16px!important;
  border-radius:999px!important;
  border:1.5px solid rgba(255,255,255,.24)!important;
  background:#111!important;
  color:#fff!important;
  font-size:13px!important;
  font-weight:900!important;
  line-height:1!important;
  text-decoration:none!important;
  letter-spacing:.02em!important;
  box-shadow:none!important;
  transition:background .18s ease,border-color .18s ease,transform .18s ease!important;
}
.footer-wa:hover,
.footer-wa:focus-visible{
  background:#1f1f1f!important;
  border-color:#fff!important;
  color:#fff!important;
  transform:translateY(-1px)!important;
}
.footer-wa svg{
  width:18px!important;
  height:18px!important;
  flex:0 0 auto!important;
}
@media(max-width:720px){
  .footer-links{
    justify-content:flex-start!important;
    width:100%!important;
  }
  .footer-wa,
  .footer-ig{
    min-height:40px!important;
  }
}

/* =========================================================
   AGS 2026-06-13 — Compact header for full slider visibility
   Purpose: reduce header height so the homepage slider is visible earlier,
   especially when the homepage ticker is hidden. Does not change menu logic.
   ========================================================= */
:root{
  --header-h:68px!important;
  --fixed-top-h:calc(var(--ticker-h) + var(--header-h))!important;
}
.site-header{
  height:var(--header-h)!important;
  min-height:var(--header-h)!important;
  padding-top:0!important;
  padding-bottom:0!important;
}
.brand .site-logo-img{
  height:44px!important;
  max-height:44px!important;
  width:clamp(106px,8.4vw,146px)!important;
}
.site-header .brand{
  max-width:154px!important;
}
.desktop-nav{
  gap:clamp(14px,1.55vw,28px)!important;
}
.desktop-nav a{
  font-size:clamp(11px,.78vw,13px)!important;
  line-height:1!important;
}
.header-actions .icon-btn,
.header-actions .pill,
.lang-switch.header-lang{
  height:38px!important;
  min-height:38px!important;
}
.lang-switch.header-lang{
  min-width:62px!important;
  padding:0 8px!important;
}
body.no-news-ticker{
  padding-top:var(--header-h)!important;
}
body.no-news-ticker .site-header{
  top:0!important;
}
body.no-news-ticker .mobile-menu{
  top:var(--header-h)!important;
}
body.no-news-ticker .hero-slider,
body.no-news-ticker .hero-slider-track{
  margin-top:0!important;
}
@media(max-width:920px){
  :root{
    --header-h:56px!important;
    --fixed-top-h:calc(var(--ticker-h) + var(--header-h))!important;
  }
  .site-header{
    height:var(--header-h)!important;
    min-height:var(--header-h)!important;
    padding:0 12px!important;
  }
  .brand .site-logo-img{
    width:clamp(92px,27vw,116px)!important;
    height:34px!important;
    max-height:34px!important;
  }
  .site-header .brand{max-width:118px!important;}
  .header-actions{gap:5px!important;}
  .header-actions .icon-btn,
  .header-actions .pill,
  .lang-switch.header-lang{
    height:34px!important;
    min-height:34px!important;
    min-width:34px!important;
  }
  .lang-switch.header-lang{
    min-width:48px!important;
    font-size:10px!important;
    padding:0 5px!important;
  }
  .mobile-menu{top:var(--fixed-top-h)!important;}
  body.no-news-ticker .mobile-menu{top:var(--header-h)!important;}
}
@media(max-width:430px){
  :root{--header-h:54px!important;}
  .brand .site-logo-img{
    width:92px!important;
    height:32px!important;
    max-height:32px!important;
  }
  .header-actions .icon-btn,
  .header-actions .pill,
  .lang-switch.header-lang{
    height:32px!important;
    min-height:32px!important;
    min-width:32px!important;
  }
}


/* =========================================================
   AGS Slider No-Crop Final Frame — 2026-06-13
   Goal: uploaded slider artwork must be fully visible.
   This intentionally overrides previous CCA cover/crop framing.
   ========================================================= */
.hero-slider {
  padding-top: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-bottom: 36px !important;
  background: #000 !important;
  overflow: hidden !important;
}
.hero-slider::before,
.hero-slide-frame::before,
.hero-slide-frame::after {
  display: none !important;
  content: none !important;
  background: none !important;
}
.hero-slider-track {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 2 / 1 !important;
  background: #000 !important;
  border-radius: 0 !important;
}
.hero-slide,
.hero-slide-frame,
.hero-slide-picture {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  display: block !important;
  border-radius: 0 !important;
  background: #000 !important;
  box-shadow: none !important;
  border: 0 !important;
  overflow: hidden !important;
}
.hero-slide-frame {
  isolation: auto !important;
}
.hero-slide-image {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  padding: 0 !important;
  margin: 0 !important;
  object-fit: contain !important;
  object-position: center center !important;
  display: block !important;
  transform: none !important;
  filter: none !important;
  background: #000 !important;
}
.hero-slide-bg,
.hero-slide-overlay,
.hero-slide-visually-hidden {
  display: none !important;
}
.hero-slider-controls {
  bottom: 12px !important;
  left: 50% !important;
  right: auto !important;
  width: min(360px, calc(100% - 36px)) !important;
  transform: translateX(-50%) !important;
  z-index: 5 !important;
}
.hero-slider-dots {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.hero-slider-dots button {
  height: 3px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.32) !important;
}
.hero-slider-dots button.is-active {
  background: rgba(255,255,255,.86) !important;
}

@media (min-width: 1200px) {
  .hero-slider-track {
    aspect-ratio: 2 / 1 !important;
    max-height: calc(100svh - var(--header-h, 68px) - 26px) !important;
  }
}
@media (max-width: 1199px) {
  .hero-slider-track {
    aspect-ratio: 2 / 1 !important;
  }
}
@media (max-width: 740px) {
  .hero-slider {
    padding-bottom: 28px !important;
  }
  .hero-slider-track {
    aspect-ratio: 4 / 5 !important;
    min-height: 0 !important;
    height: auto !important;
  }
  .hero-slider-controls {
    bottom: 9px !important;
    width: min(260px, calc(100% - 28px)) !important;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .hero-slider--cca-sweep .hero-slide {
    clip-path: inset(0 100% 0 0) !important;
    opacity: 1 !important;
    transform: none !important;
    transition: clip-path .78s cubic-bezier(.76,0,.24,1), visibility 0s linear .78s !important;
    visibility: hidden !important;
  }
  .hero-slider--cca-sweep .hero-slide.is-active {
    clip-path: inset(0 0 0 0) !important;
    visibility: visible !important;
    transition: clip-path .78s cubic-bezier(.76,0,.24,1), visibility 0s !important;
  }
}


/* AGS 2026-06-13 — Slider fit-to-view final
   Problem: a 2:1 banner cannot be both full browser width and fully visible under
   the compact header on laptop screens. This final mode prioritizes showing the
   complete uploaded artwork in the first viewport, so no top/bottom part is cut.
   Any side space is intentional and safer than cropping campaign text/artwork. */
body.no-news-ticker .hero-slider,
.hero-slider.hero-slider--cca-sweep{
  padding:0!important;
  margin:0!important;
  min-height:0!important;
  height:auto!important;
  background:#000!important;
  overflow:hidden!important;
}
body.no-news-ticker .hero-slider-track,
.hero-slider.hero-slider--cca-sweep .hero-slider-track{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  min-height:0!important;
  max-height:none!important;
  height:calc(100svh - var(--header-h,68px))!important;
  aspect-ratio:auto!important;
  background:#000!important;
  overflow:hidden!important;
}
@supports (height: 100dvh){
  body.no-news-ticker .hero-slider-track,
  .hero-slider.hero-slider--cca-sweep .hero-slider-track{
    height:calc(100dvh - var(--header-h,68px))!important;
  }
}
.hero-slider.hero-slider--cca-sweep .hero-slide,
.hero-slider.hero-slider--cca-sweep .hero-slide-frame,
.hero-slider.hero-slider--cca-sweep .hero-slide-picture{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  max-height:none!important;
  border-radius:0!important;
  background:#000!important;
  overflow:hidden!important;
  box-shadow:none!important;
  border:0!important;
}
.hero-slider.hero-slider--cca-sweep .hero-slide-image{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:contain!important;
  object-position:center center!important;
  padding:0!important;
  margin:0!important;
  transform:none!important;
  filter:none!important;
  background:#000!important;
  box-shadow:none!important;
}
.hero-slider.hero-slider--cca-sweep .hero-slide-frame:before,
.hero-slider.hero-slider--cca-sweep .hero-slide-frame:after,
.hero-slider.hero-slider--cca-sweep .hero-slider::before{
  display:none!important;
  content:none!important;
  background:none!important;
}
.hero-slider.hero-slider--cca-sweep .hero-slider-controls{
  bottom:12px!important;
  left:50%!important;
  right:auto!important;
  width:min(360px,calc(100% - 36px))!important;
  transform:translateX(-50%)!important;
}

@media (min-width:1200px){
  body.no-news-ticker .hero-slider-track,
  .hero-slider.hero-slider--cca-sweep .hero-slider-track{
    height:calc(100svh - var(--header-h,68px))!important;
  }
  @supports (height: 100dvh){
    body.no-news-ticker .hero-slider-track,
    .hero-slider.hero-slider--cca-sweep .hero-slider-track{
      height:calc(100dvh - var(--header-h,68px))!important;
    }
  }
}
@media (max-width:1199px){
  body.no-news-ticker .hero-slider-track,
  .hero-slider.hero-slider--cca-sweep .hero-slider-track{
    height:calc(100svh - var(--header-h,64px))!important;
  }
  @supports (height: 100dvh){
    body.no-news-ticker .hero-slider-track,
    .hero-slider.hero-slider--cca-sweep .hero-slider-track{
      height:calc(100dvh - var(--header-h,64px))!important;
    }
  }
}
@media (max-width:740px){
  body.no-news-ticker .hero-slider,
  .hero-slider.hero-slider--cca-sweep{
    padding:0!important;
  }
  body.no-news-ticker .hero-slider-track,
  .hero-slider.hero-slider--cca-sweep .hero-slider-track{
    height:calc(100svh - var(--header-h,54px))!important;
    min-height:0!important;
  }
  @supports (height: 100dvh){
    body.no-news-ticker .hero-slider-track,
    .hero-slider.hero-slider--cca-sweep .hero-slider-track{
      height:calc(100dvh - var(--header-h,54px))!important;
    }
  }
  .hero-slider.hero-slider--cca-sweep .hero-slider-controls{
    bottom:8px!important;
    width:min(260px,calc(100% - 28px))!important;
  }
}


/* =========================================================
   AGS 2026-06-13 — Slider responsive no-crop + single-scroll final
   Fix:
   - Banner 2:1 now uses its real aspect ratio, not viewport height, so it will not look cut
     when the browser is not fullscreen.
   - Remove any inner/duplicate scroll caused by viewport-locked slider height.
   - Keep the header compact and the artwork fully visible.
   ========================================================= */
html,
body{
  width:100%!important;
  max-width:100%!important;
  overflow-x:hidden!important;
}
body.no-news-ticker{
  padding-top:var(--header-h,68px)!important;
  overflow-y:auto!important;
}
body.no-news-ticker .site-header{
  top:0!important;
  width:100%!important;
  max-width:100vw!important;
}
body.no-news-ticker .hero-slider.hero-slider--cca-sweep,
body.no-news-ticker .hero-slider{
  width:100%!important;
  max-width:100%!important;
  margin:0!important;
  padding:0!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  overflow:hidden!important;
  background:#000!important;
}
body.no-news-ticker .hero-slider-track,
.hero-slider.hero-slider--cca-sweep .hero-slider-track{
  width:100%!important;
  max-width:100%!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  aspect-ratio:2 / 1!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
  background:#000!important;
  border-radius:0!important;
}
.hero-slider.hero-slider--cca-sweep .hero-slide,
.hero-slider.hero-slider--cca-sweep .hero-slide-frame,
.hero-slider.hero-slider--cca-sweep .hero-slide-picture{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  max-height:none!important;
  overflow:hidden!important;
  border-radius:0!important;
  background:#000!important;
  border:0!important;
  box-shadow:none!important;
}
.hero-slider.hero-slider--cca-sweep .hero-slide-image{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:contain!important;
  object-position:center center!important;
  padding:0!important;
  margin:0!important;
  transform:none!important;
  background:#000!important;
  box-shadow:none!important;
  filter:none!important;
}
.hero-slider.hero-slider--cca-sweep .hero-slide-bg,
.hero-slider.hero-slider--cca-sweep .hero-slide-overlay,
.hero-slider.hero-slider--cca-sweep .hero-slide-frame::before,
.hero-slider.hero-slider--cca-sweep .hero-slide-frame::after,
.hero-slider.hero-slider--cca-sweep::before,
.hero-slider.hero-slider--cca-sweep::after{
  display:none!important;
  content:none!important;
  background:none!important;
  box-shadow:none!important;
}
.hero-slider.hero-slider--cca-sweep .hero-slider-controls{
  bottom:14px!important;
  left:50%!important;
  right:auto!important;
  width:min(360px,calc(100% - 40px))!important;
  transform:translateX(-50%)!important;
  z-index:20!important;
}
@media(max-width:920px){
  body.no-news-ticker{padding-top:var(--header-h,56px)!important;}
  body.no-news-ticker .hero-slider-track,
  .hero-slider.hero-slider--cca-sweep .hero-slider-track{
    aspect-ratio:2 / 1!important;
  }
}
@media(max-width:740px){
  body.no-news-ticker{padding-top:var(--header-h,54px)!important;}
  body.no-news-ticker .hero-slider-track,
  .hero-slider.hero-slider--cca-sweep .hero-slider-track{
    aspect-ratio:4 / 5!important;
  }
  .hero-slider.hero-slider--cca-sweep .hero-slider-controls{
    bottom:10px!important;
    width:min(260px,calc(100% - 28px))!important;
  }
}


/* =========================================================
   AGS 2026-06-13 — Ultra compact header refinement
   Request: make the header smaller again so the slider gets more visible area.
   Only adjusts header height/logo/icon sizing and keeps slider/no-ticker behavior intact.
   ========================================================= */
:root{
  --header-h:58px!important;
  --fixed-top-h:calc(var(--ticker-h) + var(--header-h))!important;
}
.site-header{
  height:var(--header-h)!important;
  min-height:var(--header-h)!important;
  padding-top:0!important;
  padding-bottom:0!important;
}
.site-header .brand{
  max-width:118px!important;
}
.brand .site-logo-img{
  width:clamp(84px,6.8vw,118px)!important;
  height:36px!important;
  max-height:36px!important;
  object-fit:contain!important;
}
.desktop-nav{
  gap:clamp(12px,1.25vw,24px)!important;
}
.desktop-nav a{
  font-size:clamp(10px,.72vw,12px)!important;
}
.header-actions{
  gap:clamp(5px,.55vw,8px)!important;
}
.header-actions .icon-btn,
.header-actions .pill,
.lang-switch.header-lang,
.desktop-cart-button{
  height:34px!important;
  min-height:34px!important;
  min-width:34px!important;
}
.header-actions .icon-btn,
.desktop-cart-button{
  width:34px!important;
}
.header-actions .icon-btn svg,
.desktop-cart-button svg{
  width:18px!important;
  height:18px!important;
}
.lang-switch.header-lang{
  min-width:54px!important;
  padding-inline:6px!important;
  font-size:10.5px!important;
}
.header-actions .pill{
  padding-inline:10px!important;
  font-size:11px!important;
}
body.no-news-ticker{
  padding-top:var(--header-h,58px)!important;
}
body.no-news-ticker .mobile-menu{
  top:var(--header-h,58px)!important;
}
@media(max-width:920px){
  :root{--header-h:50px!important;}
  .site-header{padding-inline:10px!important;}
  .site-header .brand{max-width:98px!important;}
  .brand .site-logo-img{
    width:88px!important;
    height:28px!important;
    max-height:28px!important;
  }
  .header-actions{gap:4px!important;}
  .header-actions .icon-btn,
  .header-actions .pill,
  .lang-switch.header-lang,
  .desktop-cart-button{
    height:30px!important;
    min-height:30px!important;
    min-width:30px!important;
  }
  .header-actions .icon-btn,
  .desktop-cart-button{width:30px!important;}
  .header-actions .icon-btn svg,
  .desktop-cart-button svg{width:16px!important;height:16px!important;}
  .lang-switch.header-lang{min-width:44px!important;font-size:9.5px!important;padding-inline:4px!important;}
  body.no-news-ticker{padding-top:var(--header-h,50px)!important;}
  body.no-news-ticker .mobile-menu{top:var(--header-h,50px)!important;}
}
@media(max-width:430px){
  :root{--header-h:48px!important;}
  .site-header .brand{max-width:86px!important;}
  .brand .site-logo-img{width:82px!important;height:26px!important;max-height:26px!important;}
  .header-actions .icon-btn,
  .lang-switch.header-lang{height:29px!important;min-height:29px!important;min-width:29px!important;}
  body.no-news-ticker{padding-top:var(--header-h,48px)!important;}
  body.no-news-ticker .mobile-menu{top:var(--header-h,48px)!important;}
}


/* =========================================================
   AGS Header Mega Menu Compact Fix — 2026-06-13
   Fix: desktop ARTISTS/CATALOG dropdown must not become a full-width
   white panel that visually splits the homepage slider. Keep the menu as
   a compact overlay card below the tapped/hovered navigation item.
   ========================================================= */
.site-header.ags-cca-header{
  overflow: visible !important;
  isolation: isolate !important;
}
.ags-cca-header .ags-cca-primary-nav,
.ags-cca-nav-item,
.ags-cca-nav-dropdown{
  overflow: visible !important;
}
.ags-cca-nav-dropdown{
  position: relative !important;
}
.ags-cca-mega{
  position: absolute !important;
  top: calc(100% - 1px) !important;
  left: 0 !important;
  right: auto !important;
  width: min(720px, calc(100vw - 32px)) !important;
  min-width: 360px !important;
  max-width: calc(100vw - 32px) !important;
  max-height: min(68svh, 420px) !important;
  overflow: auto !important;
  overscroll-behavior: contain !important;
  background: #fff !important;
  color: #000 !important;
  border: 1px solid rgba(0,0,0,.08) !important;
  border-top: 0 !important;
  box-shadow: none !important;
  border-radius: 0 0 2px 2px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
  transform: translateY(-6px) !important;
  transition: opacity .16s ease, transform .16s ease, visibility .16s ease !important;
  z-index: 2147482100 !important;
}
.ags-cca-nav-dropdown:hover .ags-cca-mega,
.ags-cca-nav-dropdown:focus-within .ags-cca-mega{
  opacity: 1 !important;
  pointer-events: auto !important;
  visibility: visible !important;
  transform: translateY(0) !important;
}
.ags-cca-artist-mega{
  width: min(880px, calc(100vw - 32px)) !important;
}
.ags-cca-catalog-mega{
  width: min(560px, calc(100vw - 32px)) !important;
}
.ags-cca-mega-inner{
  width: auto !important;
  margin: 0 !important;
  padding: 24px 28px 28px !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(120px, 1fr)) !important;
  gap: 22px 34px !important;
}
.ags-cca-catalog-inner{
  width: auto !important;
  grid-template-columns: repeat(2, minmax(140px, 1fr)) !important;
}
.ags-cca-mega-col{
  gap: 11px !important;
}
.ags-cca-mega-col b{
  font-size: 11px !important;
  margin-bottom: 6px !important;
}
.ags-cca-mega-col a{
  font-size: 12px !important;
  line-height: 1.18 !important;
  letter-spacing: .02em !important;
  white-space: normal !important;
}
.ags-cca-mega::-webkit-scrollbar{
  width: 8px !important;
}
.ags-cca-mega::-webkit-scrollbar-track{
  background: #f1f1f1 !important;
}
.ags-cca-mega::-webkit-scrollbar-thumb{
  background: #b8b8b8 !important;
  border-radius: 999px !important;
}
@media (min-width: 1000px) and (max-width: 1180px){
  .ags-cca-artist-mega{width:min(760px, calc(100vw - 24px)) !important;}
  .ags-cca-mega-inner{grid-template-columns:repeat(3, minmax(118px,1fr)) !important; padding:22px 24px 26px !important;}
}
@media (max-width: 999px){
  .ags-cca-mega{display:none !important;}
}

/* =========================================================
   AGS MOBILE SLIDER FULL-BLEED FIX — 2026-06-13
   Issue: pada mode smartphone gambar slider terlihat tidak full karena
   masih ada gutter/padding dan framing desktop. Mobile sekarang dibuat
   full-bleed seperti storefront editorial: memenuhi lebar layar, tanpa
   radius/shadow, dan tanpa scrollbar horizontal.
   ========================================================= */
@media (max-width: 740px) {
  html,
  body {
    overflow-x: hidden !important;
  }

  body:not(.admin-page) .hero-slider,
  body:not(.admin-page) .hero-slider.hero-slider--cca-sweep {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding: 0 0 34px !important;
    overflow: hidden !important;
    background: #020202 !important;
  }

  body:not(.admin-page) .hero-slider-track {
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 100vw !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 4 / 5 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    background: #020202 !important;
  }

  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-picture img,
  body:not(.admin-page) .hero-slide-image {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    filter: none !important;
  }

  body:not(.admin-page) .hero-slide-image {
    object-fit: cover !important;
    object-position: center center !important;
    padding: 0 !important;
    margin: 0 !important;
    transform: none !important;
    background: #020202 !important;
  }

  body:not(.admin-page) .hero-slider-controls.hero-slider-progress {
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    padding: 0 16px 12px !important;
  }

  body:not(.admin-page) .hero-slider-progress .hero-slider-dots {
    width: min(180px, calc(100vw - 32px)) !important;
    gap: 5px !important;
  }
}


/* =========================================================
   AGS Mobile Admin Login Icon — 2026-06-13
   Fix: account/admin login icon was hidden on smartphone header.
   Keep the mobile header compact while showing a clear login shortcut.
   ========================================================= */
@media (max-width: 920px){
  .ags-cca-header .ags-cca-account{
    display: grid !important;
    place-items: center !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  .ags-cca-header .ags-cca-actions{
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 4px !important;
  }
  .ags-cca-header .desktop-cart-button{
    display: none !important;
  }
  .ags-cca-header .icon-btn{
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
  }
  .ags-cca-header .icon-btn svg{
    width: 16px !important;
    height: 16px !important;
  }
  .mobile-admin-login-link{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    min-height: 42px !important;
    padding: 10px 14px !important;
    border-radius: 999px !important;
    background: #000 !important;
    color: #fff !important;
    text-decoration: none !important;
    font-weight: 950 !important;
    letter-spacing: .03em !important;
    text-transform: uppercase !important;
  }
  .mobile-admin-login-link svg{flex:0 0 auto !important;}
}
@media (min-width: 921px){
  .mobile-admin-login-link{display:none !important;}
}
@media (max-width: 374px){
  .ags-cca-header .ags-cca-actions{gap: 3px !important;}
  .ags-cca-header .icon-btn{
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
  }
  .ags-cca-header .icon-btn svg{
    width: 15px !important;
    height: 15px !important;
  }
}

/* AGS production hardening QA layer — 2026-06-13
   Final customer UI cleanup: no horizontal/double scroll, safer slider frame,
   compact mobile header, and non-invasive admin simplification support. */
html,body{max-width:100%;overflow-x:hidden!important}
body:not(.admin-page) .page,body:not(.admin-page) main{overflow-x:clip}
body:not(.admin-page) .hero-slider{width:100%!important;max-width:100%!important;margin:0!important;padding:0 0 26px!important;background:#020202!important;overflow:hidden!important}
body:not(.admin-page) .hero-slider-track{width:100%!important;max-width:100%!important;aspect-ratio:2/1!important;height:auto!important;min-height:0!important;max-height:none!important;border-radius:0!important;overflow:hidden!important;background:#020202!important}
body:not(.admin-page) .hero-slide,body:not(.admin-page) .hero-slide-frame,body:not(.admin-page) .hero-slide-picture{width:100%!important;height:100%!important;min-height:0!important;max-height:none!important;border-radius:0!important;overflow:hidden!important;box-shadow:none!important;background:#020202!important}
body:not(.admin-page) .hero-slide-image{width:100%!important;height:100%!important;object-fit:contain!important;object-position:center center!important;padding:0!important;margin:0!important;display:block!important;box-shadow:none!important;background:#020202!important;filter:none!important;transform:none!important}
body:not(.admin-page) .hero-slide-frame:before,body:not(.admin-page) .hero-slide-frame:after,body:not(.admin-page) .hero-slide-picture:before,body:not(.admin-page) .hero-slide-picture:after{display:none!important;content:none!important}
body:not(.admin-page) .hero-slider-controls.hero-slider-progress{bottom:10px!important;padding:0 16px!important;pointer-events:none!important}
body:not(.admin-page) .hero-slider-progress .hero-slider-dots{width:min(360px,45vw)!important;margin:auto!important;opacity:.9!important}
@media(max-width:740px){
  body:not(.admin-page) .site-header,body:not(.admin-page) .header{min-height:48px!important;height:48px!important}
  body:not(.admin-page) .brand-logo img,body:not(.admin-page) .site-logo img{max-height:34px!important;width:auto!important}
  body:not(.admin-page) .hero-slider{width:100vw!important;margin-left:calc(50% - 50vw)!important;margin-right:calc(50% - 50vw)!important;padding-bottom:22px!important}
  body:not(.admin-page) .hero-slider-track{aspect-ratio:4/5!important}
  body:not(.admin-page) .hero-slider-progress .hero-slider-dots{width:min(210px,54vw)!important;gap:5px!important}
}
@media(min-width:741px) and (max-width:1180px){
  body:not(.admin-page) .hero-slider-track{aspect-ratio:2/1!important}
}
.admin-simple-input-mode .admin-hero,.admin-simple-input-mode .business-score-card,.admin-simple-input-mode .readiness-grid,.admin-simple-input-mode .business-pillars,.admin-simple-input-mode .admin-module-assist,.admin-simple-input-mode .admin-workflow-note,.admin-simple-input-mode .order-ops-board{display:none!important}
.admin-simple-input-mode .panel,.admin-simple-input-mode .table-card,.admin-simple-input-mode .admin-order-card{box-shadow:none!important}

/* =========================================================
   AGS DOUBLE SCROLLBAR FIX — 2026-06-13
   Reason: body.no-news-ticker previously forced overflow-y:auto while
   the root document also scrolled, causing two vertical scrollbars in Chrome.
   Keep only the browser/root scrollbar and make slider/menu areas avoid
   their own vertical scrolling unless the compact dropdown is intentionally open.
   ========================================================= */
html{
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-gutter: auto !important;
}
body:not(.admin-page),
body.no-news-ticker:not(.admin-page),
body.has-news-ticker:not(.admin-page){
  overflow-y: visible !important;
  overflow-x: hidden !important;
  height: auto !important;
  min-height: 100% !important;
  max-height: none !important;
}
body:not(.admin-page) .site-shell,
body:not(.admin-page) .page,
body:not(.admin-page) main,
body:not(.admin-page) .storefront,
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{
  overflow-y: visible !important;
  max-height: none !important;
}
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{
  overflow-x: hidden !important;
}
/* Keep dropdown usable when long, but prevent it from showing a page-like
   scrollbar over the hero when not actively opened. */
.ags-cca-mega[hidden],
.ags-cca-mega:not(.is-open):not(:hover):not(:focus-within){
  overflow: hidden !important;
}
.ags-cca-nav-dropdown:hover .ags-cca-mega,
.ags-cca-nav-dropdown:focus-within .ags-cca-mega,
.ags-cca-mega.is-open{
  overflow-y: auto !important;
  overflow-x: hidden !important;
}
@media (max-width: 740px){
  body:not(.admin-page),
  body.no-news-ticker:not(.admin-page),
  body.has-news-ticker:not(.admin-page){
    overflow-y: visible !important;
  }
}


/* === AGS Checkout Payment View Cleanup 20260613 ===
   Purpose: make the successful order/payment view cleaner on smartphone,
   remove duplicate order-created message, keep QRIS/payment summary compact. */
.modal[data-checkout] .checkout-pro.is-payment-view [data-checkout-msg],
.modal[data-checkout] .checkout-pro.is-payment-view .notice[data-checkout-msg]:empty{
  display:none!important;
}
.modal[data-checkout] .checkout-pro.is-payment-view{
  overflow:hidden!important;
}
.modal[data-checkout] .checkout-pro.is-payment-view .payment-result{
  background:#fff!important;
}
.payment-result-shell.clean-payment-view{
  display:grid!important;
  gap:12px!important;
}
.payment-created-card{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;
  border:1px solid #ececec!important;
  border-radius:18px!important;
  background:#fff!important;
  padding:12px 14px!important;
  box-shadow:none!important;
}
.payment-created-copy{
  min-width:0!important;
  display:grid!important;
  gap:3px!important;
}
.payment-success-kicker{
  display:inline-flex!important;
  width:max-content!important;
  max-width:100%!important;
  border-radius:999px!important;
  background:#0b0b0b!important;
  color:#fff!important;
  padding:5px 10px!important;
  font-size:10px!important;
  line-height:1!important;
  font-weight:950!important;
  letter-spacing:.08em!important;
  text-transform:uppercase!important;
}
.payment-created-copy strong{
  display:block!important;
  font-size:clamp(18px,3vw,24px)!important;
  line-height:1.05!important;
  letter-spacing:-.035em!important;
  color:#070707!important;
  overflow-wrap:anywhere!important;
}
.payment-created-copy small{
  display:block!important;
  color:#777!important;
  font-size:12px!important;
  line-height:1.35!important;
}
.btn-copy-order-mini{
  flex:0 0 auto!important;
  min-height:38px!important;
  padding:9px 13px!important;
  border-radius:999px!important;
  font-size:12px!important;
  white-space:nowrap!important;
}
.payment-countdown-card.payment-countdown-mini,
.payment-countdown-card.payment-countdown-compact.payment-countdown-mini{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;
  margin:0!important;
  padding:10px 12px!important;
  border-radius:16px!important;
  background:#ffd51a!important;
  color:#090909!important;
  box-shadow:none!important;
}
.payment-countdown-mini .countdown-meta{
  display:grid!important;
  gap:2px!important;
  min-width:104px!important;
}
.payment-countdown-mini small{
  margin:0!important;
  color:#111!important;
  font-size:9px!important;
  line-height:1!important;
  font-weight:950!important;
  letter-spacing:.1em!important;
  text-transform:uppercase!important;
}
.payment-countdown-mini b{
  color:#060606!important;
  font-size:clamp(22px,4vw,30px)!important;
  line-height:1!important;
  letter-spacing:-.06em!important;
}
.payment-countdown-mini p{
  margin:0!important;
  max-width:360px!important;
  color:rgba(0,0,0,.62)!important;
  font-size:11px!important;
  line-height:1.3!important;
  font-weight:800!important;
}
.payment-result-grid-clean{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(300px,390px)!important;
  gap:12px!important;
  align-items:start!important;
}
.payment-instruction-card,
.clean-payment-view .created-order-summary{
  box-shadow:none!important;
}
.payment-instruction-card .payment-card-head{
  margin-bottom:8px!important;
}
.payment-instruction-card .payment-box-compact{
  padding:10px 12px!important;
  border-radius:14px!important;
  background:#fafafa!important;
  border:1px dashed #e7e7e7!important;
}
.payment-instruction-card .payment-line{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;
  margin:0!important;
  font-size:13px!important;
}
.payment-instruction-card .payment-line span{color:#777!important;font-weight:800!important;}
.payment-instruction-card .payment-line b{font-size:14px!important;color:#060606!important;}
.qris-preview.qris-preview-compact,
body:not(.admin-page) .qris-preview.qris-preview-compact{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:12px!important;
  margin:10px 0!important;
  border:1px solid #eee!important;
  border-radius:16px!important;
  background:#fff!important;
  box-shadow:none!important;
}
.qris-preview.qris-preview-compact img,
body:not(.admin-page) .qris-preview.qris-preview-compact img{
  width:min(260px,72vw)!important;
  height:auto!important;
  max-height:260px!important;
  display:block!important;
  object-fit:contain!important;
  box-shadow:none!important;
  border:0!important;
  border-radius:0!important;
}
.payment-note-compact{display:none!important;}
.clean-payment-footer-actions{
  margin:0!important;
  padding:0!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
}
.clean-payment-footer-actions .btn{
  min-height:44px!important;
  border-radius:999px!important;
}
@media(max-width:900px){
  .payment-result-grid-clean{grid-template-columns:1fr!important;}
}
@media(max-width:760px){
  .modal[data-checkout] .checkout-pro.is-payment-view .checkout-top{
    padding:12px 54px 8px 16px!important;
    border-bottom:1px solid rgba(255,255,255,.12)!important;
  }
  .modal[data-checkout] .checkout-pro.is-payment-view .checkout-top h2{
    font-size:34px!important;
    line-height:.9!important;
  }
  .modal[data-checkout] .checkout-pro.is-payment-view .payment-result{
    padding:10px 12px max(14px,env(safe-area-inset-bottom))!important;
  }
  .payment-created-card{
    align-items:flex-start!important;
    padding:11px 12px!important;
    border-radius:16px!important;
  }
  .payment-created-copy strong{
    font-size:18px!important;
  }
  .payment-created-copy small{
    display:none!important;
  }
  .payment-success-kicker{
    font-size:9px!important;
    padding:5px 9px!important;
  }
  .btn-copy-order-mini{
    min-height:34px!important;
    padding:8px 10px!important;
    font-size:11px!important;
  }
  .payment-countdown-card.payment-countdown-mini,
  .payment-countdown-card.payment-countdown-compact.payment-countdown-mini{
    padding:9px 10px!important;
    border-radius:15px!important;
    gap:9px!important;
  }
  .payment-countdown-mini .countdown-meta{min-width:86px!important;}
  .payment-countdown-mini small{font-size:8.5px!important;}
  .payment-countdown-mini b{font-size:24px!important;}
  .payment-countdown-mini p{font-size:10px!important;line-height:1.25!important;}
  .payment-instruction-card,
  .clean-payment-view .created-order-summary{
    padding:10px!important;
    border-radius:16px!important;
  }
  .qris-preview.qris-preview-compact img,
  body:not(.admin-page) .qris-preview.qris-preview-compact img{
    width:min(236px,70vw)!important;
    max-height:236px!important;
  }
  .compact-payment-view .created-summary-items{max-height:112px!important;}
}
@media(max-width:420px){
  .payment-created-card{gap:8px!important;}
  .btn-copy-order-mini{font-size:10px!important;padding:8px 9px!important;}
  .payment-countdown-mini p{max-width:190px!important;}
  .qris-preview.qris-preview-compact img,
  body:not(.admin-page) .qris-preview.qris-preview-compact img{
    width:min(220px,68vw)!important;
    max-height:220px!important;
  }
}


/* =====================================================================
   AGS Slider All Device Perfect Fix — 2026-06-13
   Goal:
   - one clean browser scroll only
   - slider image visible as uploaded, no top/bottom crop
   - full-bleed width on desktop/tablet/mobile
   - stable desktop 2:1 artwork frame and mobile 4:5 artwork frame
   - sweep/page-open animation without image drift/crop
   ===================================================================== */
html{
  overflow-x:hidden!important;
  overflow-y:auto!important;
  height:auto!important;
}
body:not(.admin-page){
  overflow-x:clip!important;
  overflow-y:visible!important;
  height:auto!important;
  min-height:100%!important;
}
body:not(.admin-page) main,
body:not(.admin-page) #main-content,
body:not(.admin-page) .site-shell,
body:not(.admin-page) .page-shell{
  overflow:visible!important;
  height:auto!important;
  max-height:none!important;
}

body:not(.admin-page) .hero-slider,
body.no-news-ticker .hero-slider,
.hero-slider.hero-slider--cca-sweep{
  position:relative!important;
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  margin:0!important;
  padding:0!important;
  background:#000!important;
  overflow:hidden!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  transform:none!important;
}
body:not(.admin-page) .hero-slider::before,
body:not(.admin-page) .hero-slider::after,
body:not(.admin-page) .hero-slider-track::before,
body:not(.admin-page) .hero-slider-track::after,
body:not(.admin-page) .hero-slide-frame::before,
body:not(.admin-page) .hero-slide-frame::after{
  display:none!important;
  content:none!important;
  background:none!important;
  box-shadow:none!important;
}

body:not(.admin-page) .hero-slider-track,
body.no-news-ticker .hero-slider-track,
.hero-slider.hero-slider--cca-sweep .hero-slider-track{
  position:relative!important;
  width:100%!important;
  max-width:100%!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  aspect-ratio:2 / 1!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
  background:#000!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
}

body:not(.admin-page) .hero-slide,
body:not(.admin-page) .hero-slide-frame,
body:not(.admin-page) .hero-slide-picture,
.hero-slider.hero-slider--cca-sweep .hero-slide,
.hero-slider.hero-slider--cca-sweep .hero-slide-frame,
.hero-slider.hero-slider--cca-sweep .hero-slide-picture{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  max-height:none!important;
  display:block!important;
  overflow:hidden!important;
  margin:0!important;
  padding:0!important;
  background:#000!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  transform:none!important;
}
body:not(.admin-page) .hero-slide{
  opacity:0!important;
  z-index:0!important;
  pointer-events:none!important;
  clip-path:inset(0 0 0 100%)!important;
}
body:not(.admin-page) .hero-slide.is-active{
  opacity:1!important;
  z-index:2!important;
  pointer-events:auto!important;
  clip-path:inset(0 0 0 0)!important;
}

body:not(.admin-page) .hero-slide-image,
.hero-slider.hero-slider--cca-sweep .hero-slide-image{
  display:block!important;
  width:100%!important;
  height:100%!important;
  min-width:100%!important;
  min-height:100%!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:contain!important;
  object-position:center center!important;
  background:#000!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  filter:none!important;
  transform:none!important;
  animation:none!important;
}

body:not(.admin-page) .hero-slide.is-sweep-entering,
body:not(.admin-page) .hero-slide.is-page-entering{
  opacity:1!important;
  z-index:4!important;
  animation:ags-slider-sweep-enter-final 860ms cubic-bezier(.76,0,.24,1) both!important;
}
body:not(.admin-page) .hero-slide.is-sweep-leaving,
body:not(.admin-page) .hero-slide.is-page-leaving{
  opacity:1!important;
  z-index:3!important;
  animation:ags-slider-sweep-leave-final 860ms cubic-bezier(.76,0,.24,1) both!important;
}
body:not(.admin-page) .hero-slider[data-slider-direction="prev"] .hero-slide.is-sweep-entering,
body:not(.admin-page) .hero-slider[data-slider-direction="prev"] .hero-slide.is-page-entering{
  animation-name:ags-slider-sweep-enter-prev-final!important;
}
body:not(.admin-page) .hero-slider[data-slider-direction="prev"] .hero-slide.is-sweep-leaving,
body:not(.admin-page) .hero-slider[data-slider-direction="prev"] .hero-slide.is-page-leaving{
  animation-name:ags-slider-sweep-leave-prev-final!important;
}
@keyframes ags-slider-sweep-enter-final{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0 0 0 0)}}
@keyframes ags-slider-sweep-leave-final{from{clip-path:inset(0 0 0 0)}to{clip-path:inset(0 100% 0 0)}}
@keyframes ags-slider-sweep-enter-prev-final{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes ags-slider-sweep-leave-prev-final{from{clip-path:inset(0 0 0 0)}to{clip-path:inset(0 0 0 100%)}}

body:not(.admin-page) .hero-slider-controls.hero-slider-progress,
.hero-slider.hero-slider--cca-sweep .hero-slider-controls.hero-slider-progress{
  position:absolute!important;
  left:50%!important;
  right:auto!important;
  bottom:14px!important;
  z-index:8!important;
  width:min(340px,42vw)!important;
  transform:translateX(-50%)!important;
  margin:0!important;
  padding:0!important;
  pointer-events:auto!important;
  background:transparent!important;
  box-shadow:none!important;
}
body:not(.admin-page) .hero-slider-progress .hero-slider-dots{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  width:100%!important;
  padding:0!important;
  margin:0!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
body:not(.admin-page) .hero-slider-progress .hero-slider-dots button{
  position:relative!important;
  flex:1 1 0!important;
  max-width:72px!important;
  height:3px!important;
  min-height:3px!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.34)!important;
  overflow:hidden!important;
}
body:not(.admin-page) .hero-slider-progress .hero-slider-dots button span{
  display:block!important;
  width:100%!important;
  height:100%!important;
  transform-origin:left center!important;
  transform:scaleX(0)!important;
  background:#fff!important;
  border-radius:inherit!important;
}
body:not(.admin-page) .hero-slider-progress .hero-slider-dots button.is-active span{
  animation:ags-slider-progress-final 5600ms linear forwards!important;
}
@keyframes ags-slider-progress-final{from{transform:scaleX(0)}to{transform:scaleX(1)}}

@media(max-width:740px){
  body:not(.admin-page) .hero-slider,
  body.no-news-ticker .hero-slider,
  .hero-slider.hero-slider--cca-sweep{
    width:100vw!important;
    max-width:100vw!important;
    margin-left:calc(50% - 50vw)!important;
    margin-right:calc(50% - 50vw)!important;
  }
  body:not(.admin-page) .hero-slider-track,
  body.no-news-ticker .hero-slider-track,
  .hero-slider.hero-slider--cca-sweep .hero-slider-track{
    aspect-ratio:4 / 5!important;
  }
  body:not(.admin-page) .hero-slider-controls.hero-slider-progress,
  .hero-slider.hero-slider--cca-sweep .hero-slider-controls.hero-slider-progress{
    width:min(220px,54vw)!important;
    bottom:12px!important;
  }
  body:not(.admin-page) .hero-slider-progress .hero-slider-dots{gap:6px!important;}
  body:not(.admin-page) .hero-slider-progress .hero-slider-dots button{height:2px!important;min-height:2px!important;}
}

@media(min-width:741px) and (max-width:1180px){
  body:not(.admin-page) .hero-slider-track,
  body.no-news-ticker .hero-slider-track,
  .hero-slider.hero-slider--cca-sweep .hero-slider-track{
    aspect-ratio:2 / 1!important;
  }
}

@media(prefers-reduced-motion:reduce){
  body:not(.admin-page) .hero-slide,
  body:not(.admin-page) .hero-slide.is-sweep-entering,
  body:not(.admin-page) .hero-slide.is-sweep-leaving,
  body:not(.admin-page) .hero-slide.is-page-entering,
  body:not(.admin-page) .hero-slide.is-page-leaving,
  body:not(.admin-page) .hero-slider-progress .hero-slider-dots button.is-active span{
    animation:none!important;
    transition:none!important;
  }
}

/* AGS Checkout Payment + Search Cleanup — 2026-06-13
   Fixes mobile payment readability and removes sold-out items from search UI. */
.modal[data-checkout] .checkout-pro.is-payment-view .payment-result{
  padding:10px 16px 14px!important;
}
.refined-payment-view{
  gap:10px!important;
}
.payment-created-card-clean{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;
  padding:14px 16px!important;
  border-radius:20px!important;
  border:1px solid #ececec!important;
  background:#fff!important;
  box-shadow:none!important;
}
.payment-created-card-clean .payment-created-copy{
  min-width:0!important;
}
.payment-created-card-clean .payment-created-copy strong{
  display:block!important;
  margin-top:4px!important;
  font-size:clamp(22px,3.5vw,34px)!important;
  line-height:1!important;
  letter-spacing:-.045em!important;
  word-break:break-word!important;
}
.payment-created-card-clean .payment-created-copy small{
  display:none!important;
}
.payment-countdown-clean{
  display:inline-flex!important;
  width:auto!important;
  min-width:min(100%,220px)!important;
  max-width:260px!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:10px!important;
  padding:10px 14px!important;
  border-radius:16px!important;
  background:#ffd21a!important;
  color:#030303!important;
  box-shadow:none!important;
}
.payment-countdown-clean p,
.payment-countdown-clean [data-payment-countdown-note]{
  display:none!important;
}
.payment-countdown-clean .countdown-meta small{
  display:block!important;
  font-size:9px!important;
  line-height:1!important;
  letter-spacing:.14em!important;
  text-transform:uppercase!important;
  font-weight:950!important;
  opacity:.82!important;
}
.payment-countdown-clean .countdown-meta b{
  display:block!important;
  font-size:28px!important;
  line-height:1!important;
  letter-spacing:-.06em!important;
}
.payment-result-grid-refined{
  grid-template-columns:minmax(0,1.05fr) minmax(300px,.95fr)!important;
  gap:14px!important;
  align-items:start!important;
}
.payment-instruction-minimal{
  padding:14px!important;
  border-radius:18px!important;
  border:1px solid #ededed!important;
  background:#fff!important;
  box-shadow:none!important;
}
.payment-card-head-minimal{
  margin-bottom:8px!important;
}
.payment-card-head-minimal span{
  font-size:12px!important;
  color:#777!important;
  font-weight:800!important;
}
.payment-card-head-minimal b{
  font-size:13px!important;
  letter-spacing:.02em!important;
}
.qris-preview-clean{
  margin:2px auto 10px!important;
  padding:0!important;
  border:0!important;
  background:#fff!important;
  min-height:0!important;
  box-shadow:none!important;
}
.qris-preview-clean img{
  width:min(360px,72vw)!important;
  max-width:100%!important;
  height:auto!important;
  max-height:360px!important;
  object-fit:contain!important;
  margin:0 auto!important;
  display:block!important;
  box-shadow:none!important;
  border-radius:0!important;
}
.payment-total-copy-row{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  gap:10px!important;
  align-items:center!important;
  margin-top:4px!important;
  padding-top:10px!important;
  border-top:1px solid #f0f0f0!important;
}
.payment-total-copy-row span{
  display:block!important;
  font-size:11px!important;
  color:#777!important;
  font-weight:800!important;
}
.payment-total-copy-row b{
  display:block!important;
  font-size:18px!important;
  line-height:1.15!important;
  color:#000!important;
}
.payment-total-copy-row .btn{
  min-height:40px!important;
  padding:9px 14px!important;
  white-space:nowrap!important;
}
.clean-payment-view .created-order-summary{
  align-self:start!important;
  padding:14px!important;
  border-radius:18px!important;
  box-shadow:none!important;
}
.created-summary-totals .discount b{
  color:#c41d2b!important;
}
.created-summary-totals .discount span{
  color:#777!important;
}
.search-result-badge.sold_out,
.search-result-badge.sold-out{
  display:none!important;
}
@media(max-width:900px){
  .payment-result-grid-refined{grid-template-columns:1fr!important;}
  .payment-countdown-clean{max-width:none!important;width:100%!important;}
}
@media(max-width:760px){
  .modal[data-checkout] .checkout-pro.is-payment-view .payment-result{
    padding:8px 10px max(12px,env(safe-area-inset-bottom))!important;
  }
  .refined-payment-view{gap:8px!important;}
  .payment-created-card-clean{
    padding:10px 12px!important;
    border-radius:16px!important;
    align-items:flex-start!important;
  }
  .payment-created-card-clean .payment-created-copy strong{
    font-size:24px!important;
  }
  .btn-copy-order-mini{
    min-height:36px!important;
    padding:8px 10px!important;
    font-size:12px!important;
    flex:0 0 auto!important;
  }
  .payment-countdown-clean{
    padding:9px 12px!important;
    border-radius:14px!important;
  }
  .payment-countdown-clean .countdown-meta b{
    font-size:24px!important;
  }
  .payment-instruction-minimal,
  .clean-payment-view .created-order-summary{
    padding:10px!important;
    border-radius:15px!important;
  }
  .payment-card-head-minimal{
    margin-bottom:4px!important;
  }
  .qris-preview-clean{
    margin-top:0!important;
    margin-bottom:8px!important;
  }
  .qris-preview-clean img{
    width:min(320px,78vw)!important;
    max-height:320px!important;
  }
  .payment-total-copy-row{
    grid-template-columns:1fr!important;
    gap:8px!important;
  }
  .payment-total-copy-row .btn{
    width:100%!important;
  }
  .compact-payment-view .created-summary-items{
    max-height:140px!important;
  }
}

/* =====================================================================
   AGS iOS Safari UI/UX Stability Patch — 20260613
   Fixes Safari viewport, fixed modal scroll, bottom safe area, input zoom,
   slider sizing, and search/checkout drawer behavior without changing logic.
   ===================================================================== */
:root{
  --ags-vh:1vh;
  --ags-safe-top:env(safe-area-inset-top,0px);
  --ags-safe-right:env(safe-area-inset-right,0px);
  --ags-safe-bottom:env(safe-area-inset-bottom,0px);
  --ags-safe-left:env(safe-area-inset-left,0px);
}
html{
  width:100%;
  min-height:100%;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  overflow-x:hidden!important;
}
body:not(.admin-page){
  width:100%;
  min-height:100%;
  overflow-x:hidden!important;
  overscroll-behavior-x:none;
  -webkit-tap-highlight-color:rgba(255,216,74,.18);
}
body:not(.admin-page) img,
body:not(.admin-page) picture,
body:not(.admin-page) video{
  max-width:100%;
}
@supports (-webkit-touch-callout:none){
  html.is-ios,html.is-ios body{min-height:-webkit-fill-available;}
  body:not(.admin-page){-webkit-font-smoothing:antialiased;}
  body:not(.admin-page) .site-header,
  body:not(.admin-page) .main-header,
  body:not(.admin-page) .shop-header,
  body:not(.admin-page) .mobile-bottom-nav,
  body:not(.admin-page) .bottom-nav,
  body:not(.admin-page) .modal,
  body:not(.admin-page) .drawer{
    transform:translateZ(0);
    -webkit-transform:translateZ(0);
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
  }
}
@media(max-width:820px){
  body:not(.admin-page) input,
  body:not(.admin-page) select,
  body:not(.admin-page) textarea,
  body:not(.admin-page) button{
    font-size:16px!important;
  }
  body:not(.admin-page) input[type="search"]{
    -webkit-appearance:none;
    appearance:none;
  }
}
body:not(.admin-page) .mobile-bottom-nav,
body:not(.admin-page) .bottom-nav,
body:not(.admin-page) [data-mobile-bottom-nav]{
  padding-bottom:max(8px,var(--ags-safe-bottom))!important;
  min-height:calc(62px + var(--ags-safe-bottom))!important;
}
@media(max-width:820px){
  body:not(.admin-page) .site-footer,
  body:not(.admin-page) footer{
    padding-bottom:calc(86px + var(--ags-safe-bottom))!important;
  }
}
body:not(.admin-page) .modal,
body:not(.admin-page) .checkout-modal,
body:not(.admin-page) .cart-drawer,
body:not(.admin-page) .search-modal,
body:not(.admin-page) [data-checkout],
body:not(.admin-page) [data-search-modal],
body:not(.admin-page) [data-cart-drawer]{
  max-width:100vw!important;
  max-height:calc(var(--ags-vh) * 100)!important;
  overscroll-behavior:contain;
}
body:not(.admin-page) .modal-panel,
body:not(.admin-page) .modal-card,
body:not(.admin-page) .checkout-pro,
body:not(.admin-page) .cart-drawer-panel,
body:not(.admin-page) .search-panel,
body:not(.admin-page) .drawer-panel{
  max-height:calc((var(--ags-vh) * 100) - var(--ags-safe-top) - var(--ags-safe-bottom))!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  -webkit-overflow-scrolling:touch!important;
  overscroll-behavior:contain;
}
@media(max-width:760px){
  body:not(.admin-page) .modal[data-checkout],
  body:not(.admin-page) [data-checkout].modal{
    padding:0!important;
    align-items:flex-end!important;
  }
  body:not(.admin-page) .modal[data-checkout] .checkout-pro,
  body:not(.admin-page) [data-checkout] .checkout-pro{
    width:100vw!important;
    max-width:100vw!important;
    max-height:calc((var(--ags-vh) * 100) - max(6px,var(--ags-safe-top)))!important;
    border-radius:22px 22px 0 0!important;
    margin:0!important;
  }
  body:not(.admin-page) .checkout-pro .checkout-header,
  body:not(.admin-page) .checkout-pro .modal-head{
    position:sticky!important;
    top:0!important;
    z-index:12!important;
  }
  body:not(.admin-page) .payment-result,
  body:not(.admin-page) .payment-result-shell,
  body:not(.admin-page) .checkout-body{
    padding-bottom:max(18px,var(--ags-safe-bottom))!important;
  }
  body:not(.admin-page) .qris-preview-clean img{
    width:min(280px,72vw)!important;
    max-height:280px!important;
  }
  body:not(.admin-page) .payment-created-card-clean .payment-created-copy strong{
    font-size:22px!important;
    line-height:1.05!important;
    word-break:break-word;
  }
  body:not(.admin-page) .payment-countdown-clean .countdown-meta b{
    font-size:22px!important;
  }
}
body:not(.admin-page) .search-modal,
body:not(.admin-page) [data-search-modal]{
  -webkit-overflow-scrolling:touch!important;
}
@media(max-width:760px){
  body:not(.admin-page) .search-panel,
  body:not(.admin-page) .search-drawer,
  body:not(.admin-page) [data-search-panel]{
    width:100vw!important;
    max-width:100vw!important;
    max-height:calc(var(--ags-vh) * 100)!important;
    padding-bottom:max(16px,var(--ags-safe-bottom))!important;
  }
}
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{
  overflow:hidden!important;
  min-height:0!important;
}
@media(max-width:760px){
  body:not(.admin-page) .hero-slider{
    width:100vw!important;
    max-width:100vw!important;
    margin-left:calc(50% - 50vw)!important;
    margin-right:calc(50% - 50vw)!important;
  }
  body:not(.admin-page) .hero-slider-track{
    aspect-ratio:4/5!important;
    max-height:calc((var(--ags-vh) * 100) - 112px - var(--ags-safe-bottom))!important;
  }
  body:not(.admin-page) .hero-slide-image{
    width:100%!important;
    height:100%!important;
    object-fit:contain!important;
    object-position:center center!important;
  }
}
@media(min-width:761px){
  body:not(.admin-page) .hero-slider-track{
    aspect-ratio:2/1!important;
    max-height:none!important;
  }
}
body:not(.admin-page) .product-grid,
body:not(.admin-page) .products-grid,
body:not(.admin-page) .product-shelf-grid{
  min-width:0;
}
body:not(.admin-page) .product-card,
body:not(.admin-page) .product-item,
body:not(.admin-page) [data-product]{
  min-width:0;
}
body:not(.admin-page).ags-input-focused .mobile-bottom-nav,
body:not(.admin-page).ags-input-focused .bottom-nav{
  transform:translateY(calc(100% + var(--ags-safe-bottom)))!important;
}

/* =====================================================================
   AGS Single Scroll + Slider Touch Fix — 2026-06-13
   Fix: page felt stuck when scrolling over the homepage slider and showed
   two vertical scrollbars. The browser/root is now the only page scroller.
   Slider never creates its own vertical scroll container.
   ===================================================================== */
html:not(.admin-html){
  height:auto!important;
  min-height:100%!important;
  max-height:none!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  -webkit-overflow-scrolling:auto!important;
  overscroll-behavior-y:auto!important;
}
body:not(.admin-page){
  position:relative!important;
  height:auto!important;
  min-height:100%!important;
  max-height:none!important;
  overflow-x:clip!important;
  overflow-y:visible!important;
  overscroll-behavior-y:auto!important;
  -webkit-overflow-scrolling:auto!important;
}
html.modal-lock,
html.modal-lock body,
html.ags-dialog-lock,
html.ags-dialog-lock body{
  overflow:hidden!important;
  height:100%!important;
  max-height:100%!important;
}
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) .content,
body:not(.admin-page) .storefront-wrap{
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  overflow:visible!important;
  overscroll-behavior-y:auto!important;
}
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{
  overflow:hidden!important;
  overflow-y:hidden!important;
  overflow-x:hidden!important;
  overscroll-behavior:auto!important;
  -webkit-overflow-scrolling:auto!important;
  touch-action:pan-y!important;
  max-height:none!important;
  scrollbar-width:none!important;
}
body:not(.admin-page) .hero-slider::-webkit-scrollbar,
body:not(.admin-page) .hero-slider-track::-webkit-scrollbar,
body:not(.admin-page) .hero-slide-frame::-webkit-scrollbar{
  display:none!important;
  width:0!important;
  height:0!important;
}
body:not(.admin-page) .hero-slider{
  contain:layout paint!important;
}
body:not(.admin-page) .hero-slider-track{
  height:auto!important;
  min-height:0!important;
  aspect-ratio:2/1!important;
}
@media(max-width:760px){
  body:not(.admin-page) .hero-slider-track{
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    aspect-ratio:4/5!important;
  }
}
body.no-news-ticker:not(.admin-page){
  padding-top:var(--header-h,58px)!important;
}
body.no-news-ticker:not(.admin-page) .site-header{
  top:0!important;
}
body.no-news-ticker:not(.admin-page) .mobile-menu{
  top:var(--header-h,58px)!important;
}
body.has-news-ticker:not(.admin-page){
  padding-top:calc(var(--ticker-h,36px) + var(--header-h,58px))!important;
}
body.has-news-ticker:not(.admin-page) .site-header{
  top:var(--ticker-h,36px)!important;
}
body.has-news-ticker:not(.admin-page) .mobile-menu{
  top:calc(var(--ticker-h,36px) + var(--header-h,58px))!important;
}
/* Search/cart/checkout remain the only internal scroll panels; the normal page must not. */
body:not(.admin-page) .modal.open,
body:not(.admin-page) .drawer.open,
body:not(.admin-page) [data-checkout].open,
body:not(.admin-page) [data-cart].open,
body:not(.admin-page) [data-search-modal].open{
  overscroll-behavior:contain!important;
}

/* =====================================================================
   AGS Checkout Payment Final UI + Single Page Scroll Guard — 2026-06-13
   Fixes:
   - countdown moved beside Copy No. Order
   - remove large yellow countdown block from payment body
   - payment modal made more compact and balanced
   - stronger guard against duplicate page scrollbars outside modals
   ===================================================================== */
html{
  overflow-y:auto!important;
  overflow-x:hidden!important;
  height:auto!important;
  min-height:100%!important;
}
body:not(.admin-page){
  position:static!important;
  overflow-y:visible!important;
  overflow-x:hidden!important;
  height:auto!important;
  min-height:100%!important;
  max-height:none!important;
  touch-action:pan-y!important;
}
body:not(.admin-page):not(.modal-open):not(.cart-open):not(.search-open),
body.no-news-ticker:not(.admin-page):not(.modal-open):not(.cart-open):not(.search-open){
  overflow-y:visible!important;
}
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) main,
body:not(.admin-page) #main-content{
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  overflow-y:visible!important;
  overflow-x:clip!important;
}
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{
  height:auto!important;
  max-height:none!important;
  overflow-y:hidden!important;
  overflow-x:hidden!important;
  touch-action:pan-y!important;
  overscroll-behavior:contain!important;
}
/* Allow intentional modal/drawer internal scrolling only while open. */
html.modal-lock,
html.modal-lock body,
body.modal-open,
body.cart-open,
body.search-open{
  overflow:hidden!important;
}
.modal[data-checkout],
.search-modal,
.cart-drawer{
  overscroll-behavior:contain!important;
}

.modal[data-checkout] .checkout-pro.is-payment-view .payment-result-shell.payment-view-final{
  gap:12px!important;
}
.payment-created-card-final{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:14px!important;
  padding:14px 16px!important;
  border-radius:18px!important;
  background:#fff!important;
  border:1px solid #ececec!important;
  box-shadow:none!important;
}
.payment-created-card-final .payment-created-copy{
  min-width:0!important;
  gap:6px!important;
}
.payment-created-card-final .payment-created-copy strong{
  font-size:clamp(22px,3.15vw,34px)!important;
  line-height:1!important;
  letter-spacing:-.055em!important;
  max-width:100%!important;
  overflow-wrap:anywhere!important;
}
.payment-created-card-final .payment-created-actions{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:10px!important;
  flex-wrap:wrap!important;
}
.payment-created-card-final .btn-copy-order-mini{
  min-height:40px!important;
  padding:10px 15px!important;
  border-radius:999px!important;
  font-size:12px!important;
  font-weight:950!important;
  background:#fff!important;
  box-shadow:none!important;
}
.payment-countdown-pill{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  min-height:40px!important;
  padding:8px 12px!important;
  border-radius:999px!important;
  background:#ffd51a!important;
  color:#080808!important;
  border:1px solid rgba(0,0,0,.08)!important;
  box-shadow:none!important;
  white-space:nowrap!important;
}
.payment-countdown-pill span{
  font-size:9px!important;
  line-height:1!important;
  font-weight:950!important;
  letter-spacing:.09em!important;
  text-transform:uppercase!important;
  color:#111!important;
}
.payment-countdown-pill b{
  font-size:20px!important;
  line-height:1!important;
  font-weight:950!important;
  letter-spacing:-.055em!important;
  color:#080808!important;
}
.payment-countdown-pill.is-expired,
.payment-countdown-pill[data-expired="1"]{
  background:#111!important;
  color:#fff!important;
}
.payment-countdown-pill.is-expired span,
.payment-countdown-pill.is-expired b{color:#fff!important;}
/* Legacy countdown cards should not occupy a full row if cached HTML exists. */
.modal[data-checkout] .checkout-pro.is-payment-view > .payment-countdown-card,
.payment-result-shell.payment-view-final > .payment-countdown-card{
  display:none!important;
}
.payment-result-grid-final{
  grid-template-columns:minmax(0,1fr) minmax(320px,410px)!important;
  gap:14px!important;
  align-items:start!important;
}
.payment-result-grid-final .payment-instruction-card,
.payment-result-grid-final .created-order-summary{
  border:1px solid #ececec!important;
  border-radius:18px!important;
  background:#fff!important;
  box-shadow:none!important;
}
.payment-result-grid-final .payment-instruction-card{
  padding:14px!important;
}
.payment-result-grid-final .created-order-summary{
  padding:16px!important;
}
.payment-result-grid-final .payment-card-head-minimal{
  margin-bottom:10px!important;
  padding-bottom:8px!important;
  border-bottom:1px solid #f0f0f0!important;
}
.payment-result-grid-final .qris-preview.qris-preview-compact{
  margin:8px 0 10px!important;
  padding:10px!important;
  border-radius:16px!important;
  border:1px solid #eee!important;
  background:#fff!important;
}
.payment-result-grid-final .qris-preview.qris-preview-compact img{
  width:min(300px,40vw)!important;
  max-height:300px!important;
}
.payment-result-grid-final .payment-total-copy-row{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  gap:10px!important;
  align-items:center!important;
  margin-top:10px!important;
  padding:10px 12px!important;
  border:1px dashed #e8e8e8!important;
  border-radius:16px!important;
  background:#fafafa!important;
}
.payment-result-grid-final .payment-total-copy-row .btn{
  min-height:38px!important;
  padding:9px 13px!important;
  border-radius:999px!important;
  font-size:12px!important;
  white-space:nowrap!important;
}
.payment-result-grid-final .payment-total-copy-row span{
  display:block!important;
  font-size:11px!important;
  color:#777!important;
  font-weight:850!important;
}
.payment-result-grid-final .payment-total-copy-row b{
  display:block!important;
  font-size:16px!important;
  color:#050505!important;
}
.payment-result-grid-final .created-summary-items{
  max-height:160px!important;
  overflow:auto!important;
  padding-right:4px!important;
}
@media(max-width:900px){
  .payment-result-grid-final{grid-template-columns:1fr!important;}
  .payment-created-card-final{grid-template-columns:1fr!important;align-items:start!important;}
  .payment-created-card-final .payment-created-actions{justify-content:flex-start!important;width:100%!important;}
}
@media(max-width:760px){
  .modal[data-checkout] .checkout-pro.is-payment-view .checkout-top{
    padding:10px 52px 8px 14px!important;
  }
  .modal[data-checkout] .checkout-pro.is-payment-view .checkout-top h2{
    font-size:30px!important;
    line-height:.9!important;
  }
  .modal[data-checkout] .checkout-pro.is-payment-view .payment-result{
    padding:10px 10px max(12px,env(safe-area-inset-bottom))!important;
  }
  .payment-created-card-final{
    padding:11px 12px!important;
    border-radius:16px!important;
    gap:10px!important;
  }
  .payment-created-card-final .payment-created-copy strong{
    font-size:22px!important;
  }
  .payment-created-card-final .payment-created-actions{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:8px!important;
  }
  .payment-created-card-final .btn-copy-order-mini,
  .payment-countdown-pill{
    width:100%!important;
    min-height:36px!important;
    padding:8px 10px!important;
  }
  .payment-countdown-pill{
    justify-content:center!important;
    gap:6px!important;
  }
  .payment-countdown-pill span{font-size:8px!important;letter-spacing:.08em!important;}
  .payment-countdown-pill b{font-size:18px!important;}
  .payment-result-grid-final{
    gap:10px!important;
  }
  .payment-result-grid-final .payment-instruction-card,
  .payment-result-grid-final .created-order-summary{
    padding:10px!important;
    border-radius:16px!important;
  }
  .payment-result-grid-final .qris-preview.qris-preview-compact{
    margin:6px 0 8px!important;
    padding:8px!important;
  }
  .payment-result-grid-final .qris-preview.qris-preview-compact img{
    width:min(220px,66vw)!important;
    max-height:220px!important;
  }
  .payment-result-grid-final .payment-total-copy-row{
    grid-template-columns:1fr!important;
    gap:8px!important;
    padding:9px 10px!important;
  }
  .payment-result-grid-final .payment-total-copy-row .btn{
    width:100%!important;
    min-height:36px!important;
  }
  .payment-result-grid-final .created-summary-items{
    max-height:128px!important;
  }
}
@media(max-width:420px){
  .payment-created-card-final .payment-created-actions{
    grid-template-columns:1fr!important;
  }
  .payment-countdown-pill span{font-size:7.5px!important;}
  .payment-countdown-pill b{font-size:18px!important;}
  .payment-result-grid-final .qris-preview.qris-preview-compact img{
    width:min(205px,64vw)!important;
    max-height:205px!important;
  }
}

/* =====================================================================
   AGS Scroll Restore + Mobile Menu Final Fix — 2026-06-13
   Fixes regression where checkout/page could stop scrolling, and adds
   clear ARTISTS / CATALOG navigation inside the mobile hamburger menu.
   ===================================================================== */
html:not(.admin-html){
  overflow-x:hidden!important;
  overflow-y:auto!important;
  height:auto!important;
  min-height:100%!important;
  max-height:none!important;
}
body:not(.admin-page){
  overflow-x:hidden!important;
  overflow-y:visible!important;
  height:auto!important;
  min-height:100%!important;
  max-height:none!important;
  position:static!important;
  touch-action:auto!important;
}
body:not(.admin-page):not(.ags-layer-open):not(.menu-open) main,
body:not(.admin-page):not(.ags-layer-open):not(.menu-open) #main-content,
body:not(.admin-page):not(.ags-layer-open):not(.menu-open) .site-shell,
body:not(.admin-page):not(.ags-layer-open):not(.menu-open) .page-shell,
body:not(.admin-page):not(.ags-layer-open):not(.menu-open) .storefront,
body:not(.admin-page):not(.ags-layer-open):not(.menu-open) .page{
  overflow:visible!important;
  height:auto!important;
  max-height:none!important;
}
/* Lock background only while a real layer is open. The layer itself remains scrollable. */
html.modal-lock,
html.ags-dialog-lock,
body.ags-layer-open{
  overflow:hidden!important;
  height:100%!important;
  max-height:100%!important;
}
body.ags-layer-open{
  position:fixed!important;
  inset:0!important;
  width:100%!important;
}
body.ags-layer-open.menu-open{
  position:static!important;
}
body:not(.admin-page) .modal.open,
body:not(.admin-page) [data-checkout].open,
body:not(.admin-page) [data-cart].open,
body:not(.admin-page) [data-search-modal].open,
body:not(.admin-page) .cart-drawer.open,
body:not(.admin-page) .search-modal.open{
  overflow:hidden!important;
  overscroll-behavior:contain!important;
  -webkit-overflow-scrolling:auto!important;
}
body:not(.admin-page) [data-checkout].open .checkout-pro,
body:not(.admin-page) .modal[data-checkout].open .checkout-pro{
  display:flex!important;
  flex-direction:column!important;
  max-height:min(92dvh,920px)!important;
  min-height:0!important;
  overflow:hidden!important;
}
body:not(.admin-page) [data-checkout].open .checkout-body,
body:not(.admin-page) [data-checkout].open .payment-result,
body:not(.admin-page) [data-checkout].open .payment-result-shell,
body:not(.admin-page) .modal[data-checkout].open .checkout-body,
body:not(.admin-page) .modal[data-checkout].open .payment-result,
body:not(.admin-page) .modal[data-checkout].open .payment-result-shell{
  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;
}
@media(max-width:760px){
  body:not(.admin-page) [data-checkout].open .checkout-pro,
  body:not(.admin-page) .modal[data-checkout].open .checkout-pro{
    width:100vw!important;
    max-width:100vw!important;
    max-height:calc(100dvh - max(4px,env(safe-area-inset-top,0px)))!important;
    border-radius:20px 20px 0 0!important;
  }
  body:not(.admin-page) [data-checkout].open .payment-result,
  body:not(.admin-page) .modal[data-checkout].open .payment-result{
    padding-bottom:max(18px,env(safe-area-inset-bottom,0px))!important;
  }
}
/* The slider is visual only; it must never capture vertical scroll. */
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{
  overflow:hidden!important;
  overscroll-behavior:auto!important;
  touch-action:pan-y!important;
  -webkit-overflow-scrolling:auto!important;
}
/* Mobile hamburger menu: show primary ARTISTS/CATALOG clearly and scroll only inside menu when open. */
@media(max-width:920px){
  .ags-cca-header .ags-cca-primary-nav{display:none!important;}
  .ags-cca-header .menu-button{display:grid!important;}
  .mobile-menu.open{
    display:block!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    -webkit-overflow-scrolling:touch!important;
    padding:14px 14px calc(92px + env(safe-area-inset-bottom,0px))!important;
  }
  .mobile-menu-primary-links{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:10px!important;
    margin:0 0 12px!important;
  }
  .mobile-menu-primary-link{
    min-height:48px!important;
    justify-content:center!important;
    font-size:13px!important;
    letter-spacing:.08em!important;
    font-weight:950!important;
    background:#fff!important;
    color:#000!important;
    border-color:#fff!important;
  }
  .mobile-menu-section{
    border:1px solid rgba(255,255,255,.14)!important;
    border-radius:16px!important;
    margin:0 0 10px!important;
    background:rgba(255,255,255,.04)!important;
    overflow:hidden!important;
  }
  .mobile-menu-section summary{
    cursor:pointer!important;
    list-style:none!important;
    min-height:48px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    padding:0 16px!important;
    color:#fff!important;
    font-size:12px!important;
    letter-spacing:.12em!important;
    font-weight:950!important;
    text-transform:uppercase!important;
  }
  .mobile-menu-section summary::-webkit-details-marker{display:none!important;}
  .mobile-menu-section summary::after{content:'+';font-size:16px;line-height:1;}
  .mobile-menu-section[open] summary::after{content:'−';}
  .mobile-menu-section-grid{
    display:grid!important;
    gap:8px!important;
    padding:0 10px 12px!important;
  }
  .mobile-menu-subgroup{
    display:grid!important;
    gap:6px!important;
    padding:8px 0!important;
  }
  .mobile-menu-subgroup b{
    color:rgba(255,255,255,.56)!important;
    font-size:10px!important;
    letter-spacing:.12em!important;
    text-transform:uppercase!important;
    padding:0 8px!important;
  }
  .mobile-menu-section a,
  .mobile-menu-catalog-grid a{
    min-height:42px!important;
    padding:10px 12px!important;
    border-radius:12px!important;
    background:#000!important;
    border:1px solid rgba(255,255,255,.12)!important;
    color:#fff!important;
    font-size:12px!important;
    letter-spacing:.04em!important;
    font-weight:850!important;
  }
  .mobile-menu-muted{
    display:block!important;
    padding:10px 12px 14px!important;
    color:rgba(255,255,255,.58)!important;
    font-size:12px!important;
  }
}


/* =====================================================================
   AGS Mobile Menu / Bottom Cart / Payment Compact Final — 2026-06-13
   Fixes from live device screenshots:
   - remove duplicate ARTISTS/CATALOG shortcut row; keep only accordion below
   - normalize CART bottom navigation size (button font-size was forced to 16px on mobile)
   - keep payment countdown beside Copy No. Order even on narrow phones
   - prevent hamburger menu content from being covered by the fixed bottom nav
   ===================================================================== */
@media (max-width: 920px) {
  body:not(.admin-page) .mobile-menu-primary-links,
  body:not(.admin-page) .mobile-menu-primary-link {
    display: none !important;
  }

  body:not(.admin-page) .mobile-menu,
  body:not(.admin-page) .mobile-menu.open {
    z-index: 2147483300 !important;
    padding-bottom: calc(118px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body:not(.admin-page) .bottom-nav {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    height: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
    min-height: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
    padding: 6px 0 calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    align-items: center !important;
    z-index: 2147481200 !important;
    background: rgba(10, 10, 10, .96) !important;
  }

  body:not(.admin-page).menu-open .bottom-nav,
  html.menu-open body:not(.admin-page) .bottom-nav {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(100%) !important;
  }

  body:not(.admin-page) .bottom-nav .bnav-item,
  body:not(.admin-page) .bottom-nav button.bnav-item,
  body:not(.admin-page) .bottom-nav a.bnav-item {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 50px !important;
    height: 50px !important;
    padding: 4px 2px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    color: rgba(255,255,255,.58) !important;
    font-size: 10px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    letter-spacing: .045em !important;
    text-transform: uppercase !important;
    box-shadow: none !important;
  }

  body:not(.admin-page) .bottom-nav .bnav-item span {
    display: block !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 10px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    letter-spacing: .045em !important;
    text-transform: uppercase !important;
  }

  body:not(.admin-page) .bottom-nav .bnav-item svg {
    display: block !important;
    width: 22px !important;
    height: 22px !important;
    flex: 0 0 22px !important;
    stroke-width: 2 !important;
  }

  body:not(.admin-page) .bottom-nav .bnav-cart-wrap {
    position: relative !important;
    width: 24px !important;
    height: 24px !important;
    display: grid !important;
    place-items: center !important;
    flex: 0 0 24px !important;
  }

  body:not(.admin-page) .bottom-nav .bnav-badge {
    position: absolute !important;
    top: -6px !important;
    right: -10px !important;
    min-width: 17px !important;
    width: auto !important;
    height: 17px !important;
    padding: 0 5px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 999px !important;
    background: #b51f25 !important;
    color: #ffffff !important;
    font-size: 9px !important;
    line-height: 1 !important;
    font-weight: 950 !important;
    letter-spacing: 0 !important;
    transform: none !important;
  }
}

@media (max-width: 760px) {
  .modal[data-checkout] .checkout-pro.is-payment-view .payment-created-card-final {
    grid-template-columns: 1fr !important;
  }
  .modal[data-checkout] .checkout-pro.is-payment-view .payment-created-card-final .payment-created-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(104px, .76fr) !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    gap: 8px !important;
    width: 100% !important;
  }
  .modal[data-checkout] .checkout-pro.is-payment-view .payment-created-card-final .btn-copy-order-mini,
  .modal[data-checkout] .checkout-pro.is-payment-view .payment-created-card-final .payment-countdown-pill {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 38px !important;
    height: 38px !important;
    padding: 7px 9px !important;
    border-radius: 999px !important;
  }
  .modal[data-checkout] .checkout-pro.is-payment-view .payment-countdown-pill {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    white-space: nowrap !important;
  }
  .modal[data-checkout] .checkout-pro.is-payment-view .payment-countdown-pill span {
    font-size: 7.5px !important;
    letter-spacing: .055em !important;
    max-width: 58px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  .modal[data-checkout] .checkout-pro.is-payment-view .payment-countdown-pill b {
    font-size: 17px !important;
    line-height: 1 !important;
  }
}

@media (max-width: 380px) {
  body:not(.admin-page) .bottom-nav .bnav-item,
  body:not(.admin-page) .bottom-nav .bnav-item span {
    font-size: 9px !important;
    letter-spacing: .035em !important;
  }
  body:not(.admin-page) .bottom-nav .bnav-item svg {
    width: 21px !important;
    height: 21px !important;
  }
  .modal[data-checkout] .checkout-pro.is-payment-view .payment-created-card-final .payment-created-actions {
    grid-template-columns: minmax(0, 1fr) minmax(96px, .72fr) !important;
    gap: 7px !important;
  }
  .modal[data-checkout] .checkout-pro.is-payment-view .payment-countdown-pill span {
    font-size: 7px !important;
    max-width: 48px !important;
  }
  .modal[data-checkout] .checkout-pro.is-payment-view .payment-countdown-pill b {
    font-size: 16px !important;
  }
}

/* ── SLIDER PROGRESS & A11Y FIX 2026-06-14 ── */
body:not(.admin-page) .hero-slider-controls.hero-slider-progress, .hero-slider.hero-slider--cca-sweep .hero-slider-controls.hero-slider-progress { position: absolute !important; left: 50% !important; bottom: 20px !important; transform: translateX(-50%) !important; z-index: 50 !important; width: auto !important; min-width: 280px !important; padding: 12px 16px !important; display: flex !important; justify-content: center !important; background: #000 !important; }
body:not(.admin-page) .hero-slider-progress .hero-slider-dots { width: 100% !important; display: flex !important; gap: 6px !important; }
body:not(.admin-page) .hero-slider-progress .hero-slider-dots button { height: 2px !important; min-height: 2px !important; background: #333 !important; border-radius: 0 !important; overflow: hidden !important; flex: 1 !important; border: none !important; padding: 0 !important; margin: 0 !important; cursor: pointer !important; }
body:not(.admin-page) .hero-slider-progress .hero-slider-dots button span { background: #fff !important; border-radius: 0 !important; height: 100% !important; width: 100% !important; display: block !important; transform-origin: left center !important; transform: scaleX(0) !important; }
body:not(.admin-page) .hero-slider-progress .hero-slider-dots button.is-active span { animation: ags-slider-progress-final 5600ms linear forwards !important; }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, a:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--red, #b51f25) !important; outline-offset: 2px !important; }

.cat:focus-visible, .bnav-item:focus-visible, .hero-slider-dots button:focus-visible, .wish:focus-visible, .qty button:focus-visible { outline: 2px solid var(--red) !important; border-radius: 4px; }


/* -- FULL SCREEN SLIDER FIX & A11Y 2026-06-14 -- */
:root { --muted: #595959; }

body:not(.admin-page) .hero-slider {
  padding: 0 !important;
  min-height: 100svh !important;
  background: #000 !important;
  border-radius: 0 !important;
  margin: 0 !important;
}

body:not(.admin-page) .hero-slider-track,
body:not(.admin-page) .hero-slide-frame {
  min-height: 100svh !important;
  height: 100% !important;
  border-radius: 0 !important;
  border: 0 !important;
}

body:not(.admin-page) .hero-slide-image {
  width: 100vw !important;
  height: 100svh !important;
  object-fit: cover !important;
  object-position: center center !important;
  padding: 0 !important;
  transform: none !important;
}

body:not(.admin-page) .hero-slide-overlay {
  padding-bottom: clamp(64px, 10svh, 120px) !important;
}

/* Touch targets */
.hero-slider-dots button { position: relative; }
.hero-slider-dots button::before { content: ''; position: absolute; top: -16px; bottom: -16px; left: -8px; right: -8px; }

/* Scroll snapping */
.featured-row, .stories-bar, .category-strip { scroll-snap-type: x mandatory; }
.featured-row > *, .stories-bar > *, .category-strip > * { scroll-snap-align: start; }

/* Modal lock */
body.ags-layer-open { overflow: hidden !important; touch-action: none; }


/* AGS FINAL SLIDER + CHECKOUT MOBILE FIX — 2026-06-14 */
html,body{overflow-x:hidden!important;}
body:not(.admin-page) .site-header,
body:not(.admin-page) .news-ticker,
body:not(.admin-page) .topline,
body:not(.admin-page) .site-shell,
body:not(.admin-page) main,
body:not(.admin-page) #main-content{max-width:100%!important;overflow-x:hidden!important;}
body.ags-layer-open{touch-action:auto!important;}

/* Header must stay compact without horizontal scrollbar */
body:not(.admin-page) .site-header{padding-inline:clamp(14px,2vw,32px)!important;}
body:not(.admin-page) .site-header>*{min-width:0!important;}
body:not(.admin-page) .desktop-nav,
body:not(.admin-page) .header-actions{overflow:hidden!important;}

/* Closed Casket-inspired slider: fixed full stage, full visible image, progress bars */
body:not(.admin-page) .hero-slider{
  width:100%!important;
  max-width:100%!important;
  margin:0!important;
  padding:0 0 24px!important;
  background:#020202!important;
  overflow:hidden!important;
  position:relative!important;
}
body:not(.admin-page) .hero-slider-track{
  width:100%!important;
  max-width:100%!important;
  aspect-ratio:2/1!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  border-radius:0!important;
  overflow:hidden!important;
  background:#020202!important;
  position:relative!important;
}
body:not(.admin-page) .hero-slide,
body:not(.admin-page) .hero-slide-frame,
body:not(.admin-page) .hero-slide-picture{
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  max-height:none!important;
  border-radius:0!important;
  overflow:hidden!important;
  position:absolute!important;
  inset:0!important;
  display:block!important;
}
body:not(.admin-page) .hero-slide{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .45s ease, visibility .45s ease;}
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;visibility:visible;pointer-events:auto;}
body:not(.admin-page) .hero-slide-frame{
  background: var(--ags-slide-bg, #020202) center center / cover no-repeat!important;
  box-shadow:none!important;
}
body:not(.admin-page) .hero-slide-frame::after{
  content:"";
  position:absolute;
  inset:0;
  background: inherit;
  background-size: cover;
  background-position: center;
  filter: blur(18px) saturate(.94);
  transform: scale(1.08);
  opacity:.52;
  z-index:0;
}
body:not(.admin-page) .hero-slide-frame::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.08) 0%, rgba(0,0,0,.10) 20%, rgba(0,0,0,.18) 100%);
  z-index:2;
  pointer-events:none;
}
body:not(.admin-page) .hero-slide-picture,
body:not(.admin-page) .hero-slide-placeholder,
body:not(.admin-page) .hero-slide-visually-hidden{position:relative!important;z-index:1!important;}
body:not(.admin-page) .hero-slide-image{
  width:100%!important;
  height:100%!important;
  display:block!important;
  object-fit:contain!important;
  object-position:center center!important;
  background:transparent!important;
  padding:0!important;
}
body:not(.admin-page) .hero-slider-progress{
  position:relative!important;
  margin:14px auto 0!important;
  padding:0 16px!important;
  display:flex!important;
  justify-content:center!important;
}
body:not(.admin-page) .hero-slider-dots{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:22px!important;
  width:auto!important;
  background:transparent!important;
  box-shadow:none!important;
  padding:0!important;
}
body:not(.admin-page) .hero-slider-dots button{
  appearance:none!important;
  width:clamp(58px,6.6vw,96px)!important;
  height:3px!important;
  border:0!important;
  padding:0!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.28)!important;
  position:relative!important;
  overflow:hidden!important;
  box-shadow:none!important;
}
body:not(.admin-page) .hero-slider-dots button span{display:none!important;}
body:not(.admin-page) .hero-slider-dots button::after{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:0%;
  background:#ffffff;
  border-radius:inherit;
}
body:not(.admin-page) .hero-slider-dots button.is-active::after{
  animation:ags-slider-bar var(--ags-slide-duration,5600ms) linear forwards;
}
@keyframes ags-slider-bar{from{width:0%}to{width:100%}}

@media(max-width:740px){
  body:not(.admin-page) .hero-slider-track{
    aspect-ratio:1000/1400!important;
    min-height:min(78svh, 132vw)!important;
  }
  body:not(.admin-page) .hero-slider-dots{gap:12px!important;}
  body:not(.admin-page) .hero-slider-dots button{width:clamp(42px,16vw,72px)!important;height:3px!important;}
}

/* Checkout popup: always scrollable on mobile and desktop */
.modal[data-checkout].open{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:12px!important;
  overflow:hidden!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, 92svh)!important;
  max-height:min(92dvh, 92svh)!important;
  display:flex!important;
  flex-direction:column!important;
  overflow:hidden!important;
  overscroll-behavior:contain!important;
  border-radius:28px!important;
}
.modal[data-checkout] .checkout-top{
  position:sticky!important;
  top:0!important;
  z-index:5!important;
  background:#fff!important;
  border-bottom:1px solid rgba(15,15,15,.08)!important;
  padding:22px 24px 14px!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;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  -webkit-overflow-scrolling:touch!important;
  overscroll-behavior:contain!important;
  touch-action:pan-y!important;
  padding:0 24px calc(112px + env(safe-area-inset-bottom))!important;
}
.modal[data-checkout] .checkout-pro .notice{
  padding:0 24px 14px!important;
  margin:0!important;
  flex:0 0 auto!important;
}
.modal[data-checkout] .checkout-submit{
  position:sticky!important;
  bottom:0!important;
  z-index:7!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] .payment-result{padding-top:8px!important;}
@media(max-width:760px){
  .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:18px 16px 12px!important;
    padding-top:max(18px, env(safe-area-inset-top))!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-pro .notice{
    padding:0 16px calc(12px + 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;
  }
}


/* AGS EMERGENCY NO SKELETON 2026-06-14 */
#page-skeleton{display:none!important;visibility:hidden!important;opacity:0!important;pointer-events:none!important;}
html,body{min-height:100%;}


/* AGS LAYER LOCK SAFE OVERRIDE 2026-06-14 */
body.ags-layer-open{touch-action:auto!important;}
.modal[data-checkout].open{touch-action:auto!important;}
.modal[data-checkout] .checkout-pro form,.modal[data-checkout] .checkout-pro .payment-result{touch-action:pan-y!important;}


/* AGS BROWSER LOADER STOP GUARD 2026-06-14 */
html.ags-page-ready body{cursor:auto!important;}
body:not(.admin-page) .hero-slider img{content-visibility:auto;}


/* AGS FREEZE SAFE SLIDER FINAL 2026-06-14 */
/* Stop Page Unresponsive: remove expensive huge-image blur layers and let slider match real image ratio. */
body:not(.admin-page) .hero-slider{
  contain: layout paint!important;
  background:#020202!important;
  padding:0 0 22px!important;
  overflow:hidden!important;
}
body:not(.admin-page) .hero-slider-track{
  aspect-ratio:var(--ags-active-ratio, 2)!important;
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  max-height:calc(100svh - 112px)!important;
  background:#020202!important;
  border-radius:0!important;
  overflow:hidden!important;
  transform:none!important;
  box-shadow:none!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;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  background:#020202!important;
  border-radius:0!important;
  overflow:hidden!important;
  box-shadow:none!important;
}
body:not(.admin-page) .hero-slide-frame::after{display:none!important;content:none!important;filter:none!important;background:none!important;}
body:not(.admin-page) .hero-slide-frame::before{display:none!important;content:none!important;}
body:not(.admin-page) .hero-slide-image{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:center center!important;
  padding:0!important;
  background:#020202!important;
  transform:none!important;
  filter:none!important;
  content-visibility:visible!important;
  will-change:auto!important;
}
body:not(.admin-page) .hero-slide{opacity:0!important;visibility:hidden!important;pointer-events:none!important;transition:opacity .28s ease!important;will-change:opacity!important;}
body:not(.admin-page) .hero-slide.is-active,
body:not(.admin-page) .hero-slide.is-sweep-entering{opacity:1!important;visibility:visible!important;pointer-events:auto!important;}
body:not(.admin-page) .hero-slide.is-sweep-leaving{opacity:0!important;visibility:visible!important;}
body:not(.admin-page) .hero-slider-progress{margin:12px auto 0!important;padding:0 16px!important;}
body:not(.admin-page) .hero-slider-dots{gap:22px!important;background:transparent!important;box-shadow:none!important;padding:0!important;}
body:not(.admin-page) .hero-slider-dots button{width:clamp(62px,7vw,104px)!important;height:3px!important;background:rgba(255,255,255,.26)!important;border-radius:99px!important;overflow:hidden!important;}
body:not(.admin-page) .hero-slider-dots button::after{background:#fff!important;animation:none!important;width:0%;}
body:not(.admin-page) .hero-slider-dots button.is-active::after{animation:ags-slider-bar var(--ags-slide-duration,5600ms) linear forwards!important;}
@media(max-width:740px){
  body:not(.admin-page) .hero-slider-track{aspect-ratio:var(--ags-active-ratio, .7142857)!important;max-height:72svh!important;}
  body:not(.admin-page) .hero-slider-dots{gap:12px!important;}
  body:not(.admin-page) .hero-slider-dots button{width:clamp(42px,16vw,72px)!important;}
}


/* AGS HEADER RESTORE + FRONTEND STABILITY 2026-06-14 */
/* Restore customer header and remove false blank top space. */
body:not(.admin-page){overflow-x:hidden!important;background:#fff;}
body.no-news-ticker:not(.admin-page){padding-top:var(--header-h,64px)!important;}
body.has-news-ticker:not(.admin-page){padding-top:var(--fixed-top-h,98px)!important;}
body:not(.admin-page) .site-header{
  position:fixed!important;
  top:0!important;
  left:0!important;
  right:0!important;
  width:100%!important;
  height:var(--header-h,64px)!important;
  min-height:var(--header-h,64px)!important;
  display:grid!important;
  grid-template-columns:minmax(116px,180px) minmax(0,1fr) auto!important;
  align-items:center!important;
  background:#020202!important;
  color:#fff!important;
  z-index:2147482000!important;
  border-bottom:1px solid rgba(255,255,255,.08)!important;
  box-shadow:0 1px 0 rgba(255,255,255,.04)!important;
  overflow:visible!important;
}
body.has-news-ticker:not(.admin-page) .site-header{top:var(--ticker-h,34px)!important;}
body:not(.admin-page) .site-header a,
body:not(.admin-page) .site-header button{color:#fff!important;}
body:not(.admin-page) .site-header .brand,
body:not(.admin-page) .site-header .header-actions{min-width:0!important;}
body:not(.admin-page) .site-header .desktop-nav{min-width:0!important;overflow:visible!important;}
body:not(.admin-page) .site-header .site-logo-img{display:block!important;max-width:145px!important;max-height:46px!important;object-fit:contain!important;}
body:not(.admin-page) .news-ticker{position:fixed!important;top:0!important;left:0!important;right:0!important;z-index:2147482100!important;}
body:not(.admin-page) main#main-content{margin-top:0!important;}

/* Slider stays light: no blur/filter/observer-heavy effects. */
body:not(.admin-page) .hero-slider{margin-top:0!important;contain:layout paint!important;background:#020202!important;}
body:not(.admin-page) .hero-slider-track{aspect-ratio:var(--ags-active-ratio,2)!important;max-height:calc(100svh - var(--header-h,64px) - 44px)!important;background:#020202!important;}
body:not(.admin-page) .hero-slide-frame::before,
body:not(.admin-page) .hero-slide-frame::after{display:none!important;content:none!important;filter:none!important;background:none!important;}
body:not(.admin-page) .hero-slide-image{object-fit:contain!important;background:#020202!important;filter:none!important;transform:none!important;will-change:auto!important;}
body:not(.admin-page) .ags-reveal,
body:not(.admin-page) .ags-product-reveal{transition:opacity .26s ease, transform .26s ease!important;}

@media(max-width:920px){
  body:not(.admin-page){--header-h:62px;}
  body:not(.admin-page) .site-header{grid-template-columns:minmax(90px,1fr) auto!important;padding-inline:12px!important;overflow:hidden!important;}
  body:not(.admin-page) .desktop-nav{display:none!important;}
  body:not(.admin-page) .site-header .site-logo-img{max-width:112px!important;max-height:40px!important;}
  body:not(.admin-page) .hero-slider-track{max-height:calc(100svh - var(--header-h,62px) - 44px)!important;}
}
@media(max-width:740px){
  body:not(.admin-page) .hero-slider-track{aspect-ratio:var(--ags-active-ratio,.7142857)!important;}
}


/* AGS CCA SLIDER EDGE FIT + HEADER BADGE FIX 2026-06-14 */
/* Final override: remove black band below slider and keep image fully visible */
body:not(.admin-page) .hero-slider{
  background:#ffffff!important;
  padding:0!important;
  margin:0!important;
  overflow:visible!important;
  contain:none!important;
}
body:not(.admin-page) .hero-slider-track{
  width:100%!important;
  aspect-ratio:var(--ags-active-ratio,2)!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  border-radius:0!important;
  background:#ffffff!important;
  overflow:hidden!important;
  position:relative!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;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  max-height:none!important;
  overflow:hidden!important;
  border-radius:0!important;
  box-shadow:none!important;
  background:#ffffff!important;
}
body:not(.admin-page) .hero-slide-frame::before,
body:not(.admin-page) .hero-slide-frame::after{
  content:none!important;
  display:none!important;
  background:none!important;
  filter:none!important;
  opacity:0!important;
}
body:not(.admin-page) .hero-slide-image{
  width:100%!important;
  height:100%!important;
  display:block!important;
  object-fit:contain!important;
  object-position:center center!important;
  padding:0!important;
  margin:0!important;
  background:#ffffff!important;
  transform:none!important;
  filter:none!important;
}
/* Progress bar overlays the image like the reference, not in a separate black block */
body:not(.admin-page) .hero-slider-controls.hero-slider-progress,
body:not(.admin-page) .hero-slider-progress{
  position:absolute!important;
  left:50%!important;
  right:auto!important;
  bottom:clamp(16px,2.2vw,30px)!important;
  transform:translateX(-50%)!important;
  z-index:20!important;
  width:min(520px,42vw)!important;
  min-width:260px!important;
  padding:0!important;
  margin:0!important;
  background:transparent!important;
  box-shadow:none!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(10px,1.3vw,18px)!important;
  width:100%!important;
  padding:0!important;
  margin:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
body:not(.admin-page) .hero-slider-progress .hero-slider-dots button,
body:not(.admin-page) .hero-slider-dots button{
  flex:1 1 0!important;
  width:auto!important;
  min-width:0!important;
  height:3px!important;
  min-height:3px!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:rgba(255,255,255,.36)!important;
  overflow:hidden!important;
  box-shadow:0 0 0 1px rgba(0,0,0,.14)!important;
}
body:not(.admin-page) .hero-slider-dots button span{display:block!important;width:100%!important;height:100%!important;background:#fff!important;transform-origin:left center!important;transform:scaleX(0)!important;}
body:not(.admin-page) .hero-slider-dots button::after{content:none!important;display:none!important;}
body:not(.admin-page) .hero-slider-dots button.is-active span{animation:ags-slider-progress-final var(--ags-slide-duration,5600ms) linear forwards!important;}

/* Header right action/bag count must not be clipped */
body:not(.admin-page) .site-header,
body:not(.admin-page) .header-actions,
body:not(.admin-page) .cart-button,
body:not(.admin-page) .desktop-cart-button{
  overflow:visible!important;
}
body:not(.admin-page) .header-actions{padding-right:12px!important;}
body:not(.admin-page) .cart-button b,
body:not(.admin-page) .desktop-cart-button b,
body:not(.admin-page) .ags-cca-header .cart-button b,
body:not(.admin-page) .ags-cca-header .desktop-cart-button b{
  top:-9px!important;
  right:-9px!important;
  z-index:30!important;
  clip-path:none!important;
}
@media(max-width:740px){
  body:not(.admin-page) .hero-slider-track{
    aspect-ratio:var(--ags-active-ratio,.7142857)!important;
  }
  body:not(.admin-page) .hero-slider-progress{width:min(360px,68vw)!important;min-width:210px!important;bottom:18px!important;}
  body:not(.admin-page) .hero-slider-dots{gap:9px!important;}
  body:not(.admin-page) .hero-slider-dots button{height:3px!important;}
}


/* AGS PROGRESS BAR ALWAYS VISIBLE FIX 2026-06-14 */
body:not(.admin-page) .hero-slider,
.hero-slider.hero-slider--cca-sweep{
  position:relative!important;
  isolation:isolate!important;
}
body:not(.admin-page) .hero-slider-controls.hero-slider-progress,
body:not(.admin-page) .hero-slider-progress,
.hero-slider.hero-slider--cca-sweep .hero-slider-controls.hero-slider-progress{
  display:flex!important;
  opacity:1!important;
  visibility:visible!important;
  position:absolute!important;
  left:50%!important;
  right:auto!important;
  bottom:clamp(18px,2.35vw,34px)!important;
  transform:translateX(-50%)!important;
  z-index:999!important;
  width:min(520px,46vw)!important;
  min-width:280px!important;
  max-width:calc(100vw - 40px)!important;
  padding:0!important;
  margin:0!important;
  background:transparent!important;
  box-shadow:none!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(10px,1.25vw,18px)!important;
  width:100%!important;
  min-height:22px!important;
  padding:8px 2px!important;
  margin:0!important;
  background:transparent!important;
  opacity:1!important;
  visibility:visible!important;
}
body:not(.admin-page) .hero-slider-progress .hero-slider-dots button,
body:not(.admin-page) .hero-slider-dots button{
  display:block!important;
  flex:1 1 0!important;
  width:auto!important;
  min-width:48px!important;
  height:4px!important;
  min-height:4px!important;
  max-height:4px!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  border-radius:999px!important;
  background:rgba(0,0,0,.42)!important;
  overflow:hidden!important;
  opacity:1!important;
  visibility:visible!important;
  box-shadow:0 0 0 1px rgba(255,255,255,.36), 0 2px 9px rgba(0,0,0,.42)!important;
  cursor:pointer!important;
  position:relative!important;
}
body:not(.admin-page) .hero-slider-dots button span{
  display:block!important;
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  border-radius:inherit!important;
  background:#ffffff!important;
  transform-origin:left center!important;
  transform:scaleX(0)!important;
  opacity:1!important;
  visibility:visible!important;
  box-shadow:0 0 8px rgba(255,255,255,.42)!important;
}
body:not(.admin-page) .hero-slider-dots button::after{content:none!important;display:none!important;}
body:not(.admin-page) .hero-slider-dots button.is-active span{
  animation:ags-slider-progress-final var(--ags-slide-duration,5600ms) linear forwards!important;
}
@keyframes ags-slider-progress-final{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media(max-width:740px){
  body:not(.admin-page) .hero-slider-controls.hero-slider-progress,
  body:not(.admin-page) .hero-slider-progress{width:min(370px,76vw)!important;min-width:220px!important;bottom:18px!important;}
  body:not(.admin-page) .hero-slider-dots{gap:9px!important;min-height:20px!important;padding-block:7px!important;}
  body:not(.admin-page) .hero-slider-dots button{min-width:0!important;height:4px!important;min-height:4px!important;}
}


/* AGS PROGRESS BAR TRUE LINE FIX 2026-06-14 */
/* Final override: progress bar must be lines only, no black box, visible and animated */
html body:not(.admin-page) section.hero-slider.hero-slider--cca-sweep .hero-slider-controls.hero-slider-progress,
html body:not(.admin-page) .hero-slider.hero-slider--cca-sweep .hero-slider-controls.hero-slider-progress,
html body:not(.admin-page) .hero-slider-controls.hero-slider-progress{
  position:absolute!important;
  left:50%!important;
  right:auto!important;
  bottom:clamp(18px,2vw,30px)!important;
  transform:translateX(-50%)!important;
  z-index:80!important;
  width:min(430px,38vw)!important;
  min-width:260px!important;
  max-width:calc(100vw - 36px)!important;
  height:auto!important;
  min-height:0!important;
  padding:0!important;
  margin:0!important;
  display:block!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  outline:0!important;
  overflow:visible!important;
  pointer-events:auto!important;
}
html body:not(.admin-page) section.hero-slider.hero-slider--cca-sweep .hero-slider-dots,
html body:not(.admin-page) .hero-slider.hero-slider--cca-sweep .hero-slider-dots,
html body:not(.admin-page) .hero-slider-progress .hero-slider-dots,
html body:not(.admin-page) .hero-slider-dots{
  width:100%!important;
  min-height:0!important;
  height:auto!important;
  padding:0!important;
  margin:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:clamp(12px,1.4vw,22px)!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  overflow:visible!important;
}
html body:not(.admin-page) section.hero-slider.hero-slider--cca-sweep .hero-slider-dots button,
html body:not(.admin-page) .hero-slider.hero-slider--cca-sweep .hero-slider-dots button,
html body:not(.admin-page) .hero-slider-progress .hero-slider-dots button,
html 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:0!important;
  background:rgba(255,255,255,.38)!important;
  box-shadow:0 1px 4px rgba(0,0,0,.25)!important;
  overflow:hidden!important;
  position:relative!important;
  opacity:1!important;
  visibility:visible!important;
}
html body:not(.admin-page) .hero-slider-dots button::before,
html body:not(.admin-page) .hero-slider-dots button::after{
  content:none!important;
  display:none!important;
}
html body:not(.admin-page) section.hero-slider.hero-slider--cca-sweep .hero-slider-dots button span,
html body:not(.admin-page) .hero-slider.hero-slider--cca-sweep .hero-slider-dots button span,
html body:not(.admin-page) .hero-slider-progress .hero-slider-dots button span,
html body:not(.admin-page) .hero-slider-dots button span{
  display:block!important;
  position:absolute!important;
  left:0!important;
  top:0!important;
  bottom:0!important;
  width:100%!important;
  height:100%!important;
  transform-origin:left center!important;
  transform:scaleX(0)!important;
  background:#fff!important;
  border-radius:0!important;
  box-shadow:none!important;
  opacity:1!important;
  visibility:visible!important;
}
html body:not(.admin-page) .hero-slider-dots button.is-active{
  background:rgba(255,255,255,.28)!important;
}
html body:not(.admin-page) .hero-slider-dots button.is-active span{
  animation:ags-progress-line-live var(--ags-slide-duration,5600ms) linear forwards!important;
}
@keyframes ags-progress-line-live{0%{transform:scaleX(0)}100%{transform:scaleX(1)}}
@media(max-width:740px){
  html body:not(.admin-page) section.hero-slider.hero-slider--cca-sweep .hero-slider-controls.hero-slider-progress,
  html body:not(.admin-page) .hero-slider.hero-slider--cca-sweep .hero-slider-controls.hero-slider-progress,
  html body:not(.admin-page) .hero-slider-controls.hero-slider-progress{
    width:min(330px,66vw)!important;
    min-width:210px!important;
    bottom:16px!important;
  }
  html body:not(.admin-page) .hero-slider-dots{gap:10px!important;}
  html body:not(.admin-page) .hero-slider-dots button{min-width:44px!important;height:3px!important;min-height:3px!important;}
}


/* AGS 14IN FIT + LIVE PROGRESS FINAL 2026-06-14 */
/* Last-mile override: no crop, no black box, line progress driven by JS variable. */
html body:not(.admin-page) section.hero-slider.hero-slider--cca-sweep,
html body:not(.admin-page) .hero-slider.hero-slider--cca-sweep,
html body:not(.admin-page) .hero-slider{
  width:100%!important;
  max-width:100%!important;
  margin:0!important;
  padding:0!important;
  background:#fff!important;
  position:relative!important;
  overflow:hidden!important;
  contain:layout paint!important;
}
html body:not(.admin-page) section.hero-slider.hero-slider--cca-sweep .hero-slider-track,
html body:not(.admin-page) .hero-slider.hero-slider--cca-sweep .hero-slider-track,
html body:not(.admin-page) .hero-slider-track{
  width:100%!important;
  max-width:100%!important;
  aspect-ratio:var(--ags-active-ratio,2)!important;
  height:auto!important;
  min-height:0!important;
  max-height:calc(100svh - var(--header-h,76px) - 8px)!important;
  border-radius:0!important;
  background:#fff!important;
  overflow:hidden!important;
  position:relative!important;
  box-shadow:none!important;
}
html body:not(.admin-page) .hero-slide,
html body:not(.admin-page) .hero-slide-frame,
html body:not(.admin-page) .hero-slide-picture{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  display:block!important;
  background:#fff!important;
  border-radius:0!important;
  overflow:hidden!important;
  box-shadow:none!important;
}
html body:not(.admin-page) .hero-slide-image{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:center center!important;
  display:block!important;
  padding:0!important;
  margin:0!important;
  background:#fff!important;
  transform:none!important;
  filter:none!important;
  will-change:auto!important;
}
html body:not(.admin-page) .hero-slide-frame::before,
html body:not(.admin-page) .hero-slide-frame::after{
  content:none!important;
  display:none!important;
}
html body:not(.admin-page) section.hero-slider.hero-slider--cca-sweep .hero-slider-controls.hero-slider-progress,
html body:not(.admin-page) .hero-slider.hero-slider--cca-sweep .hero-slider-controls.hero-slider-progress,
html body:not(.admin-page) .hero-slider-controls.hero-slider-progress{
  position:absolute!important;
  left:50%!important;
  bottom:clamp(16px,2.2vw,28px)!important;
  transform:translateX(-50%)!important;
  z-index:90!important;
  width:min(420px,36vw)!important;
  min-width:250px!important;
  max-width:calc(100vw - 34px)!important;
  height:auto!important;
  min-height:0!important;
  padding:0!important;
  margin:0!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  overflow:visible!important;
}
html body:not(.admin-page) .hero-slider-progress .hero-slider-dots,
html body:not(.admin-page) .hero-slider-dots{
  width:100%!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:clamp(13px,1.35vw,22px)!important;
  padding:0!important;
  margin:0!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  overflow:visible!important;
}
html body:not(.admin-page) .hero-slider-progress .hero-slider-dots button,
html body:not(.admin-page) .hero-slider-dots button{
  flex:1 1 0!important;
  display:block!important;
  width:auto!important;
  min-width:54px!important;
  height:3px!important;
  min-height:3px!important;
  max-height:3px!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  background:rgba(255,255,255,.42)!important;
  box-shadow:0 0 0 1px rgba(0,0,0,.16),0 1px 5px rgba(0,0,0,.22)!important;
  overflow:hidden!important;
  position:relative!important;
  opacity:1!important;
  visibility:visible!important;
}
html body:not(.admin-page) .hero-slider-dots button::before,
html body:not(.admin-page) .hero-slider-dots button::after{
  content:none!important;
  display:none!important;
}
html body:not(.admin-page) .hero-slider-dots button span{
  display:block!important;
  position:absolute!important;
  inset:0 auto 0 0!important;
  width:100%!important;
  height:100%!important;
  background:#fff!important;
  border-radius:0!important;
  transform-origin:left center!important;
  transform:scaleX(var(--ags-progress,0))!important;
  animation:none!important;
  opacity:1!important;
  visibility:visible!important;
}
html body:not(.admin-page) .hero-slider-dots button.is-active span{
  animation:none!important;
}
@media(max-width:1480px){
  html body:not(.admin-page) .hero-slider-track{max-height:calc(100svh - var(--header-h,74px) - 6px)!important;}
}
@media(max-width:740px){
  html body:not(.admin-page) .hero-slider-track{
    aspect-ratio:var(--ags-active-ratio,.7142857)!important;
    max-height:calc(100svh - var(--header-h,62px) - 8px)!important;
  }
  html body:not(.admin-page) .hero-slider-controls.hero-slider-progress{width:min(330px,68vw)!important;min-width:208px!important;bottom:16px!important;}
  html body:not(.admin-page) .hero-slider-dots{gap:10px!important;}
  html body:not(.admin-page) .hero-slider-dots button{min-width:42px!important;height:3px!important;min-height:3px!important;}
}


/* AGS TRUE FINAL SLIDER UI 2026-06-14 */
/* One final source of truth for the public homepage slider. */
html body:not(.admin-page) .hero-slider.hero-slider--cca-sweep,
html body:not(.admin-page) section.hero-slider{
  width:100%!important;
  max-width:100%!important;
  margin:0!important;
  padding:0!important;
  background:#ffffff!important;
  overflow:hidden!important;
  position:relative!important;
  contain:layout paint!important;
}
html body:not(.admin-page) .hero-slider-track{
  width:100%!important;
  max-width:100%!important;
  height:min(calc(100vw / var(--ags-active-ratio, 2)), calc(100svh - var(--header-h, 78px) - 8px))!important;
  min-height:320px!important;
  max-height:calc(100svh - var(--header-h, 78px) - 8px)!important;
  aspect-ratio:auto!important;
  border-radius:0!important;
  background:#ffffff!important;
  overflow:hidden!important;
  position:relative!important;
  box-shadow:none!important;
}
html body:not(.admin-page) .hero-slide{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  transition:opacity .34s ease, visibility .34s ease!important;
  background:#ffffff!important;
  overflow:hidden!important;
  border-radius:0!important;
}
html body:not(.admin-page) .hero-slide.is-active,
html body:not(.admin-page) .hero-slide.is-sweep-entering,
html body:not(.admin-page) .hero-slide.is-sweep-leaving{
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
}
html body:not(.admin-page) .hero-slide.is-sweep-entering{clip-path:inset(0 0 0 100%);animation:ags-sweep-in .36s ease forwards!important;}
html body:not(.admin-page) .hero-slide.is-sweep-leaving{clip-path:inset(0 100% 0 0);animation:ags-sweep-out .36s ease forwards!important;}
@keyframes ags-sweep-in{to{clip-path:inset(0 0 0 0)}}
@keyframes ags-sweep-out{to{clip-path:inset(0 100% 0 0)}}
html body:not(.admin-page) .hero-slide-frame,
html body:not(.admin-page) .hero-slide-picture{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  display:block!important;
  background:#ffffff!important;
  border-radius:0!important;
  overflow:hidden!important;
  box-shadow:none!important;
}
html body:not(.admin-page) .hero-slide-frame::before,
html body:not(.admin-page) .hero-slide-frame::after{
  content:none!important;
  display:none!important;
}
html body:not(.admin-page) .hero-slide-image{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:center center!important;
  display:block!important;
  margin:0!important;
  padding:0!important;
  background:#ffffff!important;
  transform:none!important;
  filter:none!important;
  will-change:auto!important;
}
html body:not(.admin-page) .hero-slider-controls.hero-slider-progress{
  position:absolute!important;
  left:50%!important;
  bottom:clamp(15px,2.4vw,30px)!important;
  transform:translateX(-50%)!important;
  width:min(430px,36vw)!important;
  min-width:250px!important;
  max-width:calc(100vw - 36px)!important;
  height:4px!important;
  min-height:4px!important;
  padding:0!important;
  margin:0!important;
  z-index:80!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  overflow:visible!important;
  pointer-events:none!important;
}
html body:not(.admin-page) .hero-slider-progress .hero-slider-dots,
html body:not(.admin-page) .hero-slider-dots{
  width:100%!important;
  height:4px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:clamp(12px,1.4vw,22px)!important;
  padding:0!important;
  margin:0!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  overflow:visible!important;
  pointer-events:auto!important;
}
html 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:54px!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,.40)!important;
  box-shadow:0 0 0 1px rgba(0,0,0,.18),0 1px 5px rgba(0,0,0,.26)!important;
  overflow:hidden!important;
  position:relative!important;
  opacity:1!important;
  visibility:visible!important;
}
html body:not(.admin-page) .hero-slider-dots button::before,
html body:not(.admin-page) .hero-slider-dots button::after{content:none!important;display:none!important;}
html body:not(.admin-page) .hero-slider-dots button span,
html 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:#ffffff!important;
  border-radius:999px!important;
  transform-origin:left center!important;
  transform:scaleX(0)!important;
  animation:none!important;
  opacity:1!important;
  visibility:visible!important;
}
@media(max-width:1280px){
  html body:not(.admin-page) .hero-slider-track{
    height:min(calc(100vw / var(--ags-active-ratio, 2)), calc(100svh - var(--header-h, 72px) - 8px))!important;
    min-height:300px!important;
  }
  html body:not(.admin-page) .hero-slider-controls.hero-slider-progress{width:min(400px,42vw)!important;}
}
@media(max-width:740px){
  html body:not(.admin-page) .hero-slider-track{
    height:min(calc(100vw / var(--ags-active-ratio, .7142857)), calc(100svh - var(--header-h, 62px) - 8px))!important;
    min-height:360px!important;
  }
  html body:not(.admin-page) .hero-slider-controls.hero-slider-progress{width:min(330px,68vw)!important;min-width:208px!important;bottom:16px!important;}
  html body:not(.admin-page) .hero-slider-dots{gap:10px!important;}
  html body:not(.admin-page) .hero-slider-dots button{min-width:42px!important;height:3px!important;min-height:3px!important;}
}


/* AGS SLIDER FULL VIEWPORT KEEP LIVE PROGRESS 2026-06-14 */
/*
  Final visual rule:
  - stage fills the visible laptop/mobile viewport under the header
  - progress bar remains the same live JS-driven line
  - object-fit cover fills the stage; use 2160x1080 desktop and 1000x1400 mobile artwork for zero crop like CCA
*/
html body:not(.admin-page) .hero-slider.hero-slider--cca-sweep,
html body:not(.admin-page) section.hero-slider{
  width:100vw!important;
  max-width:100vw!important;
  margin:0!important;
  padding:0!important;
  background:#020202!important;
  overflow:hidden!important;
  position:relative!important;
  left:50%!important;
  transform:translateX(-50%)!important;
  contain:layout paint!important;
}

html body:not(.admin-page) .hero-slider-track{
  width:100vw!important;
  max-width:100vw!important;
  height:calc(100svh - var(--header-h, 78px))!important;
  min-height:560px!important;
  max-height:calc(100svh - var(--header-h, 78px))!important;
  aspect-ratio:auto!important;
  border-radius:0!important;
  background:#020202!important;
  overflow:hidden!important;
  position:relative!important;
  box-shadow:none!important;
}

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

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

/* Keep the working live progress bar, only reposition for fullscreen stage */
html body:not(.admin-page) .hero-slider-controls.hero-slider-progress{
  position:absolute!important;
  left:50%!important;
  bottom:clamp(22px,3.2vh,38px)!important;
  transform:translateX(-50%)!important;
  width:min(520px,34vw)!important;
  min-width:270px!important;
  max-width:calc(100vw - 44px)!important;
  height:4px!important;
  z-index:120!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;
}

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

html body:not(.admin-page) .hero-slider-dots button{
  flex:1 1 0!important;
  display:block!important;
  min-width:64px!important;
  height:3px!important;
  min-height:3px!important;
  max-height:3px!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.38)!important;
  box-shadow:0 0 0 1px rgba(0,0,0,.22), 0 2px 7px rgba(0,0,0,.28)!important;
  overflow:hidden!important;
  position:relative!important;
  opacity:1!important;
  visibility:visible!important;
}

html body:not(.admin-page) .hero-slider-dots button span,
html 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;
  animation:none!important;
  opacity:1!important;
  visibility:visible!important;
}

@media(max-width:1480px){
  html body:not(.admin-page) .hero-slider-track{
    height:calc(100svh - var(--header-h, 72px))!important;
    min-height:520px!important;
    max-height:calc(100svh - var(--header-h, 72px))!important;
  }
  html body:not(.admin-page) .hero-slider-controls.hero-slider-progress{
    width:min(470px,38vw)!important;
    min-width:250px!important;
  }
}

@media(max-width:920px){
  html body:not(.admin-page) .hero-slider-track{
    height:calc(100svh - var(--header-h, 64px))!important;
    min-height:520px!important;
    max-height:calc(100svh - var(--header-h, 64px))!important;
  }
}

@media(max-width:740px){
  html body:not(.admin-page) .hero-slider-track{
    height:calc(100svh - var(--header-h, 62px))!important;
    min-height:540px!important;
    max-height:calc(100svh - var(--header-h, 62px))!important;
  }
  html body:not(.admin-page) .hero-slider-controls.hero-slider-progress{
    width:min(340px,72vw)!important;
    min-width:220px!important;
    bottom:20px!important;
  }
  html body:not(.admin-page) .hero-slider-dots{
    gap:10px!important;
  }
  html body:not(.admin-page) .hero-slider-dots button{
    min-width:42px!important;
    height:3px!important;
    min-height:3px!important;
  }
}


/* AGS STANDARD HERO IMAGE SLIDER MODE 2026-06-14 */
/*
  Mode: Slider Spanduk Utama / Hero Image Slider
  - Full-width standard hero at top of homepage
  - Auto-play + manual dot navigation
  - Max 5 slides from admin slider list
  - Desktop banner: 2160x1080 / 2:1
  - Mobile banner: 1000x1400 / 5:7
  - Progress bar remains live and visible
*/
html body:not(.admin-page) .hero-slider.hero-slider--standard-main,
html body:not(.admin-page) section.hero-slider.hero-slider--standard-main{
  width:100%!important;
  max-width:100%!important;
  margin:0 auto!important;
  padding:0!important;
  background:#020202!important;
  overflow:hidden!important;
  position:relative!important;
  left:auto!important;
  transform:none!important;
  contain:layout paint!important;
}

html body:not(.admin-page) .hero-slider.hero-slider--standard-main .hero-slider-track{
  width:100%!important;
  max-width:100%!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  aspect-ratio:2 / 1!important;
  border-radius:0!important;
  background:#020202!important;
  overflow:hidden!important;
  position:relative!important;
  box-shadow:none!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-slide-frame,
html body:not(.admin-page) .hero-slider.hero-slider--standard-main .hero-slide-picture{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  display:block!important;
  border-radius:0!important;
  overflow:hidden!important;
  background:#020202!important;
  box-shadow:none!important;
}

html body:not(.admin-page) .hero-slider.hero-slider--standard-main .hero-slide{
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  transition:opacity .34s ease, visibility .34s ease!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{
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!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-slide-frame::after{
  content:none!important;
  display:none!important;
}

html body:not(.admin-page) .hero-slider.hero-slider--standard-main .hero-slide-image{
  width:100%!important;
  height:100%!important;
  display:block!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;
}

/* Manual navigation dots / progress lines: visible overlay, not a black box */
html body:not(.admin-page) .hero-slider.hero-slider--standard-main .hero-slider-controls.hero-slider-progress{
  position:absolute!important;
  left:50%!important;
  bottom:clamp(18px,2.4vw,34px)!important;
  transform:translateX(-50%)!important;
  z-index:120!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;
}

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

html body:not(.admin-page) .hero-slider.hero-slider--standard-main .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;
}

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

html body:not(.admin-page) .hero-slider.hero-slider--standard-main .hero-slider-dots button span,
html body:not(.admin-page) .hero-slider.hero-slider--standard-main .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:#ffffff!important;
  border-radius:999px!important;
  transform-origin:left center!important;
  animation:none!important;
  opacity:1!important;
  visibility:visible!important;
}

@media(max-width:740px){
  html body:not(.admin-page) .hero-slider.hero-slider--standard-main .hero-slider-track{
    aspect-ratio:1000 / 1400!important;
  }
  html body:not(.admin-page) .hero-slider.hero-slider--standard-main .hero-slider-controls.hero-slider-progress{
    width:min(340px,72vw)!important;
    min-width:220px!important;
    bottom:18px!important;
  }
  html body:not(.admin-page) .hero-slider.hero-slider--standard-main .hero-slider-dots{
    gap:10px!important;
  }
  html body:not(.admin-page) .hero-slider.hero-slider--standard-main .hero-slider-dots button{
    min-width:42px!important;
    height:3px!important;
    min-height:3px!important;
  }
}


/* AGS SINGLE ROOT SCROLLBAR FIX 2026-06-14 */
/*
  Fix double vertical scrollbar:
  The only scrollbar allowed on public pages is the browser/root scrollbar.
  Page sections and layout wrappers must not create their own vertical scroll area.
*/
html:not(.admin-page){
  overflow-y:auto!important;
  overflow-x:hidden!important;
  height:auto!important;
  min-height:100%!important;
  max-height:none!important;
  scrollbar-gutter:auto!important;
}

body:not(.admin-page):not(.ags-layer-open):not(.modal-open):not(.cart-open):not(.search-open){
  overflow-y:visible!important;
  overflow-x:hidden!important;
  height:auto!important;
  min-height:100%!important;
  max-height:none!important;
  position:static!important;
  overscroll-behavior-y:auto!important;
  -webkit-overflow-scrolling:auto!important;
}

/* Root layout wrappers must never become a second scrolling viewport */
body:not(.admin-page):not(.ags-layer-open):not(.modal-open):not(.cart-open):not(.search-open) main,
body:not(.admin-page):not(.ags-layer-open):not(.modal-open):not(.cart-open):not(.search-open) #main-content,
body:not(.admin-page):not(.ags-layer-open):not(.modal-open):not(.cart-open):not(.search-open) .site-shell,
body:not(.admin-page):not(.ags-layer-open):not(.modal-open):not(.cart-open):not(.search-open) .page-shell,
body:not(.admin-page):not(.ags-layer-open):not(.modal-open):not(.cart-open):not(.search-open) .page,
body:not(.admin-page):not(.ags-layer-open):not(.modal-open):not(.cart-open):not(.search-open) .storefront,
body:not(.admin-page):not(.ags-layer-open):not(.modal-open):not(.cart-open):not(.search-open) .content,
body:not(.admin-page):not(.ags-layer-open):not(.modal-open):not(.cart-open):not(.search-open) .storefront-wrap{
  overflow-y:visible!important;
  overflow-x:hidden!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  overscroll-behavior-y:auto!important;
  -webkit-overflow-scrolling:auto!important;
}

/* Hero slider may hide its own artwork overflow, but it must not scroll */
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{
  overflow-y:hidden!important;
  overflow-x:hidden!important;
  overscroll-behavior:contain!important;
}

/* Prevent header/cart badge from widening the layout and causing extra scrollbars */
body:not(.admin-page) .site-header{
  width:100%!important;
  max-width:100%!important;
  overflow:visible!important;
}
body:not(.admin-page) .header-actions,
body:not(.admin-page) .desktop-nav{
  min-width:0!important;
}
body:not(.admin-page) .cart-count,
body:not(.admin-page) [data-cart-count]{
  z-index:5!important;
}

/* Hide accidental inner scrollbars on non-modal public wrappers only.
   Modal/checkout/cart/search keep their intentional internal scroll behavior. */
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) .content::-webkit-scrollbar,
body:not(.admin-page) .storefront-wrap::-webkit-scrollbar,
body:not(.admin-page) .hero-slider::-webkit-scrollbar,
body:not(.admin-page) .hero-slider-track::-webkit-scrollbar{
  width:0!important;
  height:0!important;
  display:none!important;
}
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) .content,
body:not(.admin-page) .storefront-wrap,
body:not(.admin-page) .hero-slider,
body:not(.admin-page) .hero-slider-track{
  scrollbar-width:none!important;
}


/* AGS SCROLLBAR RECOVERY FIX 2026-06-14 */
/*
  Recovery:
  - Remove the website/internal vertical scrollbar.
  - Restore normal browser/root scrolling.
  - Do not lock body unless a modal/cart/search is open.
  - Keep checkout/cart/search internal scroll when opened.
*/
html:not(.admin-page){
  overflow-x:hidden!important;
  overflow-y:auto!important;
  height:auto!important;
  min-height:100%!important;
  max-height:none!important;
}

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

/* Prevent public layout wrappers from becoming the second scroll viewport. */
body:not(.admin-page):not(.ags-layer-open):not(.modal-open):not(.cart-open):not(.search-open) main,
body:not(.admin-page):not(.ags-layer-open):not(.modal-open):not(.cart-open):not(.search-open) #main-content,
body:not(.admin-page):not(.ags-layer-open):not(.modal-open):not(.cart-open):not(.search-open) .site-shell,
body:not(.admin-page):not(.ags-layer-open):not(.modal-open):not(.cart-open):not(.search-open) .page-shell,
body:not(.admin-page):not(.ags-layer-open):not(.modal-open):not(.cart-open):not(.search-open) .page,
body:not(.admin-page):not(.ags-layer-open):not(.modal-open):not(.cart-open):not(.search-open) .storefront,
body:not(.admin-page):not(.ags-layer-open):not(.modal-open):not(.cart-open):not(.search-open) .content,
body:not(.admin-page):not(.ags-layer-open):not(.modal-open):not(.cart-open):not(.search-open) .storefront-wrap{
  overflow-x:hidden!important;
  overflow-y:visible!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  position:relative!important;
  scrollbar-width:none!important;
}

/* Slider should clip artwork, not create a scroll area. */
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{
  overflow:hidden!important;
  max-width:100%!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) .content::-webkit-scrollbar,
body:not(.admin-page) .storefront-wrap::-webkit-scrollbar,
body:not(.admin-page) .hero-slider::-webkit-scrollbar,
body:not(.admin-page) .hero-slider-track::-webkit-scrollbar{
  display:none!important;
  width:0!important;
  height:0!important;
}

/* Keep real modal layers locked and internally scrollable only when opened. */
html.modal-lock,
html.modal-lock body,
body.ags-layer-open,
body.modal-open,
body.cart-open,
body.search-open{
  overflow:hidden!important;
}

.modal[data-checkout].open .checkout-pro form,
.modal[data-checkout].open .checkout-pro .payment-result,
[data-cart].open .drawer-panel,
[data-search-modal].open .search-card{
  overflow-y:auto!important;
  -webkit-overflow-scrolling:touch!important;
}

/* Header right badge/action must not force horizontal or vertical inner scroll. */
body:not(.admin-page) .site-header{
  max-width:100vw!important;
  overflow:visible!important;
}
body:not(.admin-page) .header-actions{
  overflow:visible!important;
  min-width:0!important;
  padding-right:max(10px, env(safe-area-inset-right))!important;
}
body:not(.admin-page) .cart-count,
body:not(.admin-page) [data-cart-count]{
  z-index:10!important;
  transform:translate(36%,-36%)!important;
}


/* AGS HERO HEADER 2160X1080 WIDTH2000 STANDARD 2026-06-14 */
/*
  Final standard for homepage hero:
  Reference style: HEADERS2160x1080.jpg?v=...&width=2000
  - Desktop stage ratio: 2160 / 1080 = 2:1
  - Output display: full width, max visual payload around 2000px
  - No inner website scrollbar
  - Progress bar remains live from JS
*/
html body:not(.admin-page) .hero-slider.hero-slider--standard-main,
html body:not(.admin-page) section.hero-slider.hero-slider--standard-main,
html body:not(.admin-page) .hero-slider.hero-slider--cca-sweep,
html 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;
  contain:layout paint!important;
}

/* Use a clean 2160x1080 / 2:1 banner stage on desktop/laptop */
html body:not(.admin-page) .hero-slider.hero-slider--standard-main .hero-slider-track,
html body:not(.admin-page) .hero-slider-track{
  width:100%!important;
  max-width:100%!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  aspect-ratio:2160 / 1080!important;
  border-radius:0!important;
  background:#020202!important;
  overflow:hidden!important;
  position:relative!important;
  box-shadow:none!important;
}

/* Keep all slide layers inside the single banner stage only */
html body:not(.admin-page) .hero-slide,
html body:not(.admin-page) .hero-slide-frame,
html body:not(.admin-page) .hero-slide-picture{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  display:block!important;
  border-radius:0!important;
  overflow:hidden!important;
  background:#020202!important;
  box-shadow:none!important;
}

/* Image fills the professional 2:1 hero stage. Upload 2160x1080 for perfect zero-crop. */
html body:not(.admin-page) .hero-slide-image{
  width:100%!important;
  height:100%!important;
  display:block!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;
}

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

/* Progress bar stays overlay inside the 2160x1080 banner */
html body:not(.admin-page) .hero-slider-controls.hero-slider-progress{
  position:absolute!important;
  left:50%!important;
  bottom:clamp(18px,2.2vw,34px)!important;
  transform:translateX(-50%)!important;
  z-index:120!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;
}
html body:not(.admin-page) .hero-slider-progress .hero-slider-dots,
html body:not(.admin-page) .hero-slider-dots{
  width:100%!important;
  height:4px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:clamp(14px,1.5vw,24px)!important;
  padding:0!important;
  margin:0!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  overflow:visible!important;
}
html 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;
}
html body:not(.admin-page) .hero-slider-dots button::before,
html body:not(.admin-page) .hero-slider-dots button::after{
  content:none!important;
  display:none!important;
}
html body:not(.admin-page) .hero-slider-dots button span,
html 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:#ffffff!important;
  border-radius:999px!important;
  transform-origin:left center!important;
  animation:none!important;
  opacity:1!important;
  visibility:visible!important;
}

/* Public pages: one normal root/browser scrollbar only */
html:not(.admin-page){
  overflow-x:hidden!important;
  overflow-y:auto!important;
}
body:not(.admin-page):not(.ags-layer-open):not(.modal-open):not(.cart-open):not(.search-open){
  overflow-x:hidden!important;
  overflow-y:visible!important;
  height:auto!important;
  min-height:100%!important;
  max-height:none!important;
  position:relative!important;
}

/* Mobile follows the CCA mobile asset ratio: 1000x1400 */
@media(max-width:740px){
  html body:not(.admin-page) .hero-slider-track{
    aspect-ratio:1000 / 1400!important;
  }
  html body:not(.admin-page) .hero-slider-controls.hero-slider-progress{
    width:min(340px,72vw)!important;
    min-width:220px!important;
    bottom:18px!important;
  }
  html body:not(.admin-page) .hero-slider-dots{
    gap:10px!important;
  }
  html body:not(.admin-page) .hero-slider-dots button{
    min-width:42px!important;
    height:3px!important;
    min-height:3px!important;
  }
}


/* AGS GLOBAL PUBLIC SCROLL SAFE FIX 2026-06-14 */
/*
  Global public scroll safety:
  - All public pages/sections must scroll normally.
  - Only browser/root scroll is allowed for the page.
  - Internal vertical scroll is allowed only for real overlays: checkout, cart, search, dialogs.
*/
html:not(.admin-page){
  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;
  overflow-x:hidden!important;
  overscroll-behavior-y:auto!important;
}

/* Normal state: page must never be locked */
body:not(.admin-page):not(.ags-layer-open):not(.modal-open):not(.cart-open):not(.search-open),
html:not(.admin-page):not(.modal-lock):not(.ags-dialog-lock){
  overflow-y:visible!important;
  height:auto!important;
  min-height:100%!important;
  max-height:none!important;
  position:relative!important;
  inset:auto!important;
  touch-action:auto!important;
}

/* All public content wrappers become normal document flow, not scroll containers */
body:not(.admin-page):not(.ags-layer-open):not(.modal-open):not(.cart-open):not(.search-open) main,
body:not(.admin-page):not(.ags-layer-open):not(.modal-open):not(.cart-open):not(.search-open) #main-content,
body:not(.admin-page):not(.ags-layer-open):not(.modal-open):not(.cart-open):not(.search-open) .site-shell,
body:not(.admin-page):not(.ags-layer-open):not(.modal-open):not(.cart-open):not(.search-open) .page-shell,
body:not(.admin-page):not(.ags-layer-open):not(.modal-open):not(.cart-open):not(.search-open) .page,
body:not(.admin-page):not(.ags-layer-open):not(.modal-open):not(.cart-open):not(.search-open) .storefront,
body:not(.admin-page):not(.ags-layer-open):not(.modal-open):not(.cart-open):not(.search-open) .content,
body:not(.admin-page):not(.ags-layer-open):not(.modal-open):not(.cart-open):not(.search-open) .storefront-wrap,
body:not(.admin-page):not(.ags-layer-open):not(.modal-open):not(.cart-open):not(.search-open) .shop,
body:not(.admin-page):not(.ags-layer-open):not(.modal-open):not(.cart-open):not(.search-open) .product-shelves,
body:not(.admin-page):not(.ags-layer-open):not(.modal-open):not(.cart-open):not(.search-open) .product-shelf,
body:not(.admin-page):not(.ags-layer-open):not(.modal-open):not(.cart-open):not(.search-open) .listing-hero,
body:not(.admin-page):not(.ags-layer-open):not(.modal-open):not(.cart-open):not(.search-open) .product-detail-section{
  overflow-y:visible!important;
  overflow-x:hidden!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;
}

/* Slider clips only its image; it must not become a scrollable container */
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{
  overflow:hidden!important;
  overscroll-behavior:contain!important;
}

/* Hide accidental vertical scrollbar on wrappers; browser scrollbar remains on root */
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) .content::-webkit-scrollbar,
body:not(.admin-page) .storefront-wrap::-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{
  width:0!important;
  height:0!important;
  display:none!important;
}
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) .content,
body:not(.admin-page) .storefront-wrap,
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{
  scrollbar-width:none!important;
}

/* Intentional scroll areas: overlays only */
html.modal-lock,
html.ags-dialog-lock,
body.ags-layer-open,
body.modal-open,
body.cart-open,
body.search-open{
  overflow:hidden!important;
}

.modal[data-checkout].open,
[data-cart].open,
[data-search-modal].open,
.ags-dialog.is-open{
  overscroll-behavior:contain!important;
}

.modal[data-checkout].open .checkout-pro form,
.modal[data-checkout].open .checkout-pro .payment-result,
[data-cart].open .drawer-panel,
[data-cart].open aside,
[data-search-modal].open .search-card,
.ags-dialog.is-open .ags-dialog-card{
  overflow-y:auto!important;
  -webkit-overflow-scrolling:touch!important;
  max-height:calc(100dvh - 32px)!important;
}

/* Header must not create sideways/inner scroll */
body:not(.admin-page) .site-header{
  max-width:100vw!important;
  overflow:visible!important;
}
body:not(.admin-page) .header-actions,
body:not(.admin-page) .desktop-nav{
  min-width:0!important;
  overflow:visible!important;
}


/* =========================================================
   QUICK VIEW ON HOMEPAGE / LISTING — 2026-06-15
   Professional trigger on product image without breaking card navigation.
   ========================================================= */
body:not(.admin-page) .product-art{position:relative;overflow:hidden;}
body:not(.admin-page) .quick-view-trigger{
  position:absolute;
  left:50%;
  bottom:14px;
  transform:translate(-50%, 10px);
  z-index:6;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:120px;
  padding:10px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.96);
  color:#111;
  border:1px solid rgba(0,0,0,.12);
  box-shadow:0 12px 28px rgba(0,0,0,.14);
  font-size:12px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  cursor:pointer;
  opacity:0;
  pointer-events:none;
  transition:opacity .22s ease, transform .22s ease, box-shadow .22s ease, background .22s ease;
}
body:not(.admin-page) .mini-product:hover .quick-view-trigger,
body:not(.admin-page) .mini-product:focus-within .quick-view-trigger,
body:not(.admin-page) .product-card:hover .quick-view-trigger,
body:not(.admin-page) .product-card:focus-within .quick-view-trigger,
body:not(.admin-page) .quick-view-trigger:focus{
  opacity:1;
  pointer-events:auto;
  transform:translate(-50%, 0);
}
body:not(.admin-page) .quick-view-trigger:hover,
body:not(.admin-page) .quick-view-trigger:focus{
  background:#111;
  color:#fff;
  box-shadow:0 16px 36px rgba(0,0,0,.22);
  outline:none;
}
body:not(.admin-page) .product-card .quick-view-trigger{bottom:12px;}
body:not(.admin-page) .quick-copy{display:grid;gap:10px;}
body:not(.admin-page) .quick-size-label{display:block;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#111;}
body:not(.admin-page) .quick-stock-note{display:block;color:#555;font-size:12px;line-height:1.5;min-height:18px;}
body:not(.admin-page) .quick-actions-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:4px;}
body:not(.admin-page) .quick-actions-row .btn{justify-content:center;}
body:not(.admin-page) .quick-actions-row .btn[disabled]{opacity:.55;cursor:not-allowed;}
@media (max-width: 900px){
  body:not(.admin-page) .quick-view-trigger{
    opacity:1;
    pointer-events:auto;
    transform:translate(-50%,0);
    min-width:110px;
    padding:9px 12px;
    bottom:10px;
    font-size:11px;
  }
}
@media (max-width: 680px){
  body:not(.admin-page) .quick-actions-row{grid-template-columns:1fr;}
}


/* =========================================================
   AGS POPUP CLEAN STABLE V12 — 2026-06-15
   First-visit popup must never use featured/random product image fallback.
   It stays text-first unless admin sets a custom popup image.
   ========================================================= */
[data-welcome-popup] {
  z-index: 2147483640 !important;
  align-items: center !important;
  justify-content: center !important;
  padding: clamp(14px, 3vw, 28px) !important;
}
[data-welcome-popup] .popup-card {
  width: min(640px, calc(100vw - 32px)) !important;
  max-width: calc(100vw - 32px) !important;
  max-height: calc(100dvh - 32px) !important;
  overflow: hidden !important;
  border-radius: clamp(24px, 4vw, 34px) !important;
}
[data-welcome-popup] .popup-content {
  display: block !important;
  grid-template-columns: none !important;
  padding: clamp(24px, 4.4vw, 44px) !important;
  text-align: left !important;
}
[data-welcome-popup] .popup-card.popup-card-no-visual {
  width: min(640px, calc(100vw - 32px)) !important;
}
[data-welcome-popup] .popup-card.popup-card-no-visual .popup-content {
  display: block !important;
}
[data-welcome-popup] .popup-copy {
  max-width: 100% !important;
  width: 100% !important;
}
[data-welcome-popup] .popup-copy h2 {
  max-width: 11.5ch !important;
  font-size: clamp(42px, 8vw, 78px) !important;
  line-height: .88 !important;
}
[data-welcome-popup] .popup-copy p {
  max-width: 54ch !important;
}
[data-welcome-popup] .popup-visual {
  margin-top: 24px !important;
  transform: none !important;
}
[data-welcome-popup] .popup-visual:hover {
  transform: none !important;
}
[data-welcome-popup] .popup-visual-frame {
  min-height: 240px !important;
  height: 240px !important;
  border-radius: 24px !important;
  background: #050505 !important;
}
[data-welcome-popup] .popup-visual-frame img {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  object-fit: contain !important;
  object-position: center !important;
  transform: none !important;
}
[data-welcome-popup] .popup-featured-product {
  display: none !important;
}
[data-welcome-popup] .popup-card::after {
  opacity: .34 !important;
  right: -20px !important;
  bottom: -4px !important;
  pointer-events: none !important;
}
@media (max-width: 760px), (max-height: 680px) {
  [data-welcome-popup] {
    align-items: flex-end !important;
    padding: 10px 10px calc(76px + env(safe-area-inset-bottom)) !important;
  }
  [data-welcome-popup] .popup-card {
    width: 100% !important;
    max-width: 100% !important;
    max-height: calc(100dvh - 96px) !important;
    border-radius: 28px 28px 24px 24px !important;
  }
  [data-welcome-popup] .popup-content {
    padding: 22px 16px 24px !important;
  }
  [data-welcome-popup] .popup-copy h2 {
    font-size: clamp(38px, 12vw, 58px) !important;
    max-width: 10.5ch !important;
  }
  [data-welcome-popup] .popup-copy p {
    font-size: 13px !important;
    line-height: 1.5 !important;
  }
  [data-welcome-popup] .popup-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    margin-top: 18px !important;
  }
  [data-welcome-popup] .popup-actions .btn-red,
  [data-welcome-popup] .popup-actions .btn-ghost {
    width: 100% !important;
  }
  [data-welcome-popup] .popup-meta,
  [data-welcome-popup] .popup-visual {
    display: none !important;
  }
}


/* =========================================================
   Footer payment method official logo lock — 2026-06-15
   Uses /assets/images/payment-qris.svg and /assets/images/payment-bca.svg.
   ========================================================= */
body:not(.admin-page) .footer-payments.footer-payments--logo-only{
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:center!important;
  gap:10px!important;
  min-width:224px!important;
}
body:not(.admin-page) .footer-payments.footer-payments--logo-only .footer-payment-logos{
  display:flex!important;
  align-items:center!important;
  flex-wrap:wrap!important;
  gap:10px!important;
}
body:not(.admin-page) .footer-payment-logo-card{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:112px!important;
  height:42px!important;
  padding:7px 10px!important;
  border-radius:12px!important;
  background:#fff!important;
  border:1px solid rgba(255,255,255,.16)!important;
  box-shadow:0 10px 24px rgba(0,0,0,.24)!important;
  line-height:0!important;
}
body:not(.admin-page) .footer-payment-logo-card img{
  display:block!important;
  width:100%!important;
  max-width:92px!important;
  height:28px!important;
  max-height:28px!important;
  object-fit:contain!important;
  background:transparent!important;
  border-radius:0!important;
  box-shadow:none!important;
}
@media(max-width:860px){
  body:not(.admin-page) .footer-payments.footer-payments--logo-only{
    width:100%!important;
    min-width:0!important;
    align-items:flex-start!important;
  }
  body:not(.admin-page) .footer-payment-logo-card{
    width:108px!important;
    height:40px!important;
  }
}
@media(max-width:520px){
  body:not(.admin-page) .footer-payments.footer-payments--logo-only .footer-payment-logos{
    gap:8px!important;
  }
  body:not(.admin-page) .footer-payment-logo-card{
    width:104px!important;
    height:38px!important;
  }
}


/* =========================================================
   Footer payment method balanced size/layout — 2026-06-15 V14
   Keeps QRIS/BCA logos clean, medium-sized, and aligned.
   ========================================================= */
body:not(.admin-page) .footer-payments.footer-payments--logo-only{
  width:auto!important;
  min-width:190px!important;
  max-width:260px!important;
  gap:8px!important;
}
body:not(.admin-page) .footer-payments.footer-payments--logo-only .footer-payments-title{
  margin:0!important;
  font-size:10.5px!important;
  line-height:1.1!important;
  letter-spacing:.14em!important;
  white-space:nowrap!important;
}
body:not(.admin-page) .footer-payments.footer-payments--logo-only .footer-payment-logos{
  gap:8px!important;
  align-items:center!important;
  justify-content:flex-start!important;
}
body:not(.admin-page) .footer-payment-logo-card{
  width:98px!important;
  height:36px!important;
  padding:6px 9px!important;
  border-radius:10px!important;
  background:#fff!important;
  border:1px solid rgba(255,255,255,.18)!important;
  box-shadow:0 8px 18px rgba(0,0,0,.20)!important;
}
body:not(.admin-page) .footer-payment-logo-card img{
  width:100%!important;
  max-width:78px!important;
  height:24px!important;
  max-height:24px!important;
  object-fit:contain!important;
}
@media(max-width:860px){
  body:not(.admin-page) .footer-payments.footer-payments--logo-only{
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    margin-top:4px!important;
  }
  body:not(.admin-page) .footer-payments.footer-payments--logo-only .footer-payment-logos{
    justify-content:flex-start!important;
  }
  body:not(.admin-page) .footer-payment-logo-card{
    width:96px!important;
    height:36px!important;
  }
}
@media(max-width:520px){
  body:not(.admin-page) .footer-payments.footer-payments--logo-only{
    align-items:flex-start!important;
  }
  body:not(.admin-page) .footer-payments.footer-payments--logo-only .footer-payment-logos{
    gap:7px!important;
  }
  body:not(.admin-page) .footer-payment-logo-card{
    width:92px!important;
    height:34px!important;
    padding:6px 8px!important;
    border-radius:9px!important;
  }
  body:not(.admin-page) .footer-payment-logo-card img{
    max-width:74px!important;
    height:23px!important;
    max-height:23px!important;
  }
}


/* =========================================================
   AGS Scroll Performance Stabilizer — 2026-06-15 V15
   Goal: lighter scroll on desktop/mobile without changing checkout/cart/admin logic.
   ========================================================= */
html{
  scroll-behavior:auto!important;
}
body:not(.admin-page){
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeSpeed;
}

/* Avoid painting long offscreen sections until needed. Supported browsers only. */
@supports (content-visibility:auto){
  body:not(.admin-page) .product-shelf,
  body:not(.admin-page) .shop,
  body:not(.admin-page) .listing-hero,
  body:not(.admin-page) .footer,
  body:not(.admin-page) .campaign-section{
    content-visibility:auto;
    contain-intrinsic-size:1px 720px;
  }
  body:not(.admin-page) .product-grid,
  body:not(.admin-page) .featured-row.shelf-row{
    content-visibility:auto;
    contain-intrinsic-size:1px 620px;
  }
}

/* Isolate heavy blocks so browser does not repaint the whole page on scroll. */
body:not(.admin-page) .product-card,
body:not(.admin-page) .mini-product,
body:not(.admin-page) .product-art,
body:not(.admin-page) .hero-slider,
body:not(.admin-page) .slide,
body:not(.admin-page) .product-modal,
body:not(.admin-page) .checkout-pro,
body:not(.admin-page) .cart-drawer{
  contain:layout paint style;
}

/* Keep GPU work limited to the active slider/hover elements only. */
body:not(.admin-page) .product-card,
body:not(.admin-page) .mini-product,
body:not(.admin-page) .product-art,
body:not(.admin-page) .product-art img,
body:not(.admin-page) .slide,
body:not(.admin-page) .hero-slide-img,
body:not(.admin-page) .slide img{
  will-change:auto!important;
  backface-visibility:hidden;
}

/* Reduce expensive hover animation/shadow on dense product lists. */
body:not(.admin-page) .product-card,
body:not(.admin-page) .mini-product{
  transition:box-shadow .16s ease, transform .16s ease!important;
}
@media (hover:hover) and (pointer:fine){
  body:not(.admin-page) .product-card:hover,
  body:not(.admin-page) .mini-product:hover{
    transform:translateY(-1px)!important;
  }
}

/* On touch devices, disable non-essential moving effects that make scroll feel sticky. */
@media (hover:none), (pointer:coarse), (max-width:900px){
  body:not(.admin-page) .product-card,
  body:not(.admin-page) .mini-product,
  body:not(.admin-page) .product-art,
  body:not(.admin-page) .product-art img,
  body:not(.admin-page) .quick-view-trigger,
  body:not(.admin-page) .story-item,
  body:not(.admin-page) .btn,
  body:not(.admin-page) .icon-btn{
    transition:none!important;
    animation:none!important;
  }
  body:not(.admin-page) .product-card:hover,
  body:not(.admin-page) .mini-product:hover,
  body:not(.admin-page) .product-card:focus-within,
  body:not(.admin-page) .mini-product:focus-within{
    transform:none!important;
    box-shadow:none!important;
  }
}

/* Expensive filters/backdrop effects are limited on mobile because they cause scroll jank in Safari/Android Chrome. */
@media (max-width:900px){
  body:not(.admin-page) .glass,
  body:not(.admin-page) .modal-card,
  body:not(.admin-page) .search-card,
  body:not(.admin-page) .cart-drawer,
  body:not(.admin-page) .mobile-menu,
  body:not(.admin-page) .ags-dialog-card{
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
  }
  body:not(.admin-page) .product-art.has-image::after,
  body:not(.admin-page) .slide::before,
  body:not(.admin-page) .slide::after{
    filter:none!important;
  }
}

/* Smooth native scrolling, but avoid nested scroll chaining/double-scroll feel. */
body:not(.admin-page) .drawer,
body:not(.admin-page) .modal,
body:not(.admin-page) .cart-items,
body:not(.admin-page) .checkout-body,
body:not(.admin-page) .payment-result,
body:not(.admin-page) .search-results,
body:not(.admin-page) .mobile-menu{
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
}

/* Slider: allow vertical page scroll naturally while still supporting horizontal swipe. */
body:not(.admin-page) .hero,
body:not(.admin-page) .hero-slider,
body:not(.admin-page) .slide{
  touch-action:pan-y pinch-zoom;
}

/* Prevent huge image paints from exceeding their cards. */
body:not(.admin-page) img{
  image-rendering:auto;
}
body:not(.admin-page) .product-art img,
body:not(.admin-page) .mini-product img,
body:not(.admin-page) .product-card img{
  transform:translateZ(0);
}

/* Accessibility: respect reduced motion and also helps low-end devices. */
@media (prefers-reduced-motion:reduce){
  body:not(.admin-page) *,
  body:not(.admin-page) *::before,
  body:not(.admin-page) *::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    scroll-behavior:auto!important;
  }
}


/* =========================================================
   AGS Full Site Scroll Lightener — 2026-06-15 V16
   Covers section transitions, product detail, gallery, quick view, and long lists.
   ========================================================= */

/* Kill expensive scroll-reveal movement on content-heavy pages. */
body:not(.admin-page) [data-reveal],
body:not(.admin-page) .reveal,
body:not(.admin-page) .is-revealed,
body:not(.admin-page) .section,
body:not(.admin-page) .product-shelf,
body:not(.admin-page) .product-detail-section,
body:not(.admin-page) .listing-hero,
body:not(.admin-page) .shop,
body:not(.admin-page) .product-card,
body:not(.admin-page) .mini-product{
  animation:none!important;
  transition-property:opacity, background-color, color, border-color!important;
  transition-duration:.12s!important;
  transform:none!important;
}

/* Product detail was heavy because of large image paints, shadows, and nested animations. */
body:not(.admin-page) #product-detail,
body:not(.admin-page) .product-detail-section,
body:not(.admin-page) .product-detail-card,
body:not(.admin-page) .product-detail-gallery,
body:not(.admin-page) .product-detail-main,
body:not(.admin-page) .product-detail-copy{
  contain:layout paint style!important;
}
body:not(.admin-page) .product-detail-card{
  box-shadow:none!important;
  filter:none!important;
  -webkit-filter:none!important;
  transform:none!important;
  transition:none!important;
}
body:not(.admin-page) .product-detail-main,
body:not(.admin-page) .product-detail-main.has-image,
body:not(.admin-page) .product-detail-thumbs button,
body:not(.admin-page) .quick-gallery,
body:not(.admin-page) .product-art.big{
  box-shadow:none!important;
  filter:none!important;
  -webkit-filter:none!important;
  transform:none!important;
  transition:none!important;
}
body:not(.admin-page) .product-detail-main img,
body:not(.admin-page) .product-detail-thumbs img,
body:not(.admin-page) .product-art.big img,
body:not(.admin-page) [data-q-art] img{
  will-change:auto!important;
  transform:none!important;
  filter:none!important;
  -webkit-filter:none!important;
  transition:none!important;
  backface-visibility:hidden!important;
}

/* Remove pseudo overlay gradients on product images during normal browsing; cheaper to paint. */
body:not(.admin-page) .product-detail-main::before,
body:not(.admin-page) .product-detail-main::after,
body:not(.admin-page) .product-art.big::before,
body:not(.admin-page) .product-art.big::after,
body:not(.admin-page) .quick-gallery::before,
body:not(.admin-page) .quick-gallery::after{
  display:none!important;
}

/* Long product grids: stronger paint containment and no hover lift on scroll-heavy areas. */
body:not(.admin-page) .product-grid,
body:not(.admin-page) .featured-row.shelf-row{
  contain:layout paint!important;
  transform:none!important;
}
body:not(.admin-page) .product-grid .product-card,
body:not(.admin-page) .featured-row.shelf-row .mini-product{
  contain:layout paint style!important;
  box-shadow:none!important;
}
body:not(.admin-page) .product-grid .product-card:hover,
body:not(.admin-page) .featured-row.shelf-row .mini-product:hover{
  transform:none!important;
  box-shadow:none!important;
}

/* Section-to-section movement should feel native, not animated/sticky. */
body:not(.admin-page) main,
body:not(.admin-page) main > section,
body:not(.admin-page) .section{
  scroll-margin-top:88px;
  will-change:auto!important;
}
body:not(.admin-page) .section + .section{
  margin-top:clamp(34px,5vw,72px);
}

/* Avoid expensive fixed backgrounds/filters if any custom admin content added them. */
body:not(.admin-page) *{
  background-attachment:scroll!important;
}

/* Detail/quick buttons remain responsive but not animated on every frame. */
body:not(.admin-page) .detail-size-box,
body:not(.admin-page) .detail-qty-stepper button,
body:not(.admin-page) .product-detail-actions .btn,
body:not(.admin-page) .quick-actions-row .btn,
body:not(.admin-page) .quick-view-trigger{
  transition:background-color .12s ease, color .12s ease, border-color .12s ease!important;
  transform:none!important;
}

/* Heavy checkout/cart/search scroll containers are isolated. */
body:not(.admin-page) [data-cart],
body:not(.admin-page) [data-checkout],
body:not(.admin-page) [data-quick],
body:not(.admin-page) [data-search-modal],
body:not(.admin-page) .drawer,
body:not(.admin-page) .modal{
  contain:layout paint style!important;
}

/* Lighten modal card movement after opening; prevents stutter while scroll starts/ends. */
body:not(.admin-page) .modal.open .modal-card,
body:not(.admin-page) .drawer.open .cart-drawer,
body:not(.admin-page) .mobile-menu.open{
  transition:none!important;
  animation:none!important;
  transform:none!important;
}

/* On detail pages, avoid delayed rendering glitches while still improving scroll. */
@supports (content-visibility:auto){
  body:not(.admin-page) #product-detail{
    content-visibility:visible!important;
    contain-intrinsic-size:auto!important;
  }
  body:not(.admin-page) .product-detail-section + .section,
  body:not(.admin-page) .product-shelf,
  body:not(.admin-page) .shop,
  body:not(.admin-page) .footer{
    content-visibility:auto!important;
    contain-intrinsic-size:1px 680px!important;
  }
}

/* Safari/iOS: fewer compositing layers = less sticky scroll. */
@supports (-webkit-touch-callout:none){
  body:not(.admin-page) .product-card,
  body:not(.admin-page) .mini-product,
  body:not(.admin-page) .product-detail-card,
  body:not(.admin-page) .product-detail-main,
  body:not(.admin-page) .product-art,
  body:not(.admin-page) .modal-card{
    transform:none!important;
    will-change:auto!important;
    -webkit-transform:none!important;
  }
}

/* Low-power/mobile global light mode. */
@media(max-width:1024px), (hover:none), (pointer:coarse){
  body:not(.admin-page) .section,
  body:not(.admin-page) .product-detail-section,
  body:not(.admin-page) .product-detail-card,
  body:not(.admin-page) .product-detail-main,
  body:not(.admin-page) .product-card,
  body:not(.admin-page) .mini-product,
  body:not(.admin-page) .product-art,
  body:not(.admin-page) .product-art img,
  body:not(.admin-page) .quick-thumbs button,
  body:not(.admin-page) .product-detail-thumbs button{
    animation:none!important;
    transition:none!important;
    transform:none!important;
    box-shadow:none!important;
  }
  body:not(.admin-page) .product-detail-main,
  body:not(.admin-page) .product-art,
  body:not(.admin-page) .product-art.big{
    border-radius:14px!important;
  }
}


/* =========================================================
   AGS Slider Restore & Performance Guard — 2026-06-15 V17
   Restores V8 slider behavior and prevents scroll-performance rules from touching hero slider.
   ========================================================= */

/* Hero/slider must not inherit aggressive section/product performance overrides. */
body:not(.admin-page) .hero,
body:not(.admin-page) .hero-slider,
body:not(.admin-page) .slide,
body:not(.admin-page) .slide-inner,
body:not(.admin-page) .hero-slide-img,
body:not(.admin-page) .slide img{
  contain:none!important;
  content-visibility:visible!important;
  transform-style:flat!important;
  will-change:transform, opacity!important;
  backface-visibility:hidden!important;
}

/* Restore smart-fit no-crop visual: full background + contained main image. */
body:not(.admin-page) .hero-slider .slide{
  position:absolute!important;
  inset:0!important;
  display:grid!important;
  place-items:center!important;
  overflow:hidden!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  transition:opacity .72s cubic-bezier(.22,.61,.36,1), visibility .72s step-end!important;
}
body:not(.admin-page) .hero-slider .slide.active{
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
  transition:opacity .72s cubic-bezier(.22,.61,.36,1), visibility 0s!important;
}
body:not(.admin-page) .hero-slider .slide[hidden]{
  display:grid!important;
}
body:not(.admin-page) .hero-slider .slide-bg,
body:not(.admin-page) .hero-slider .hero-slide-bg{
  position:absolute!important;
  inset:-18px!important;
  background-size:cover!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
  filter:blur(16px) saturate(1.04)!important;
  transform:scale(1.045)!important;
  opacity:.42!important;
  z-index:0!important;
}
body:not(.admin-page) .hero-slider .slide-bg::after,
body:not(.admin-page) .hero-slider .hero-slide-bg::after{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  background:linear-gradient(180deg, rgba(0,0,0,.16), rgba(0,0,0,.08))!important;
}
body:not(.admin-page) .hero-slider .slide img,
body:not(.admin-page) .hero-slider .hero-slide-img{
  position:relative!important;
  z-index:1!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:contain!important;
  object-position:center!important;
  transition:transform .9s cubic-bezier(.22,.61,.36,1), opacity .7s ease!important;
}
body:not(.admin-page) .hero-slider .slide.active img,
body:not(.admin-page) .hero-slider .slide.active .hero-slide-img{
  transform:scale(1.01)!important;
}

/* Restore cover/sweep transition layer without cropping main image. */
body:not(.admin-page) .hero-slider::after{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:4!important;
  pointer-events:none!important;
  background:#050505!important;
  transform:translateX(-105%) skewX(-8deg)!important;
  opacity:0!important;
}
body:not(.admin-page) .hero-slider.is-sweeping::after,
body:not(.admin-page) .hero-slider.is-transitioning::after{
  animation:agsHeroSweepV17 .72s cubic-bezier(.77,0,.175,1) both!important;
}
@keyframes agsHeroSweepV17{
  0%{transform:translateX(-105%) skewX(-8deg);opacity:.92;}
  48%{transform:translateX(0%) skewX(-8deg);opacity:.92;}
  100%{transform:translateX(105%) skewX(-8deg);opacity:0;}
}

/* Restore nav buttons and keep them above sweep layer. */
body:not(.admin-page) .hero-nav,
body:not(.admin-page) .hero-arrow,
body:not(.admin-page) .slider-nav,
body:not(.admin-page) [data-slider-prev],
body:not(.admin-page) [data-slider-next]{
  z-index:8!important;
  pointer-events:auto!important;
  transform:none!important;
  transition:background-color .16s ease, color .16s ease, border-color .16s ease, opacity .16s ease!important;
}

/* Restore progress bar animation. */
body:not(.admin-page) .hero-progress,
body:not(.admin-page) .hero-progress span,
body:not(.admin-page) .hero-progress-bar,
body:not(.admin-page) .hero-progress-bar span{
  z-index:8!important;
  transition:none!important;
  animation-play-state:running!important;
}

/* Vertical scroll remains natural while horizontal swipe still works. */
body:not(.admin-page) .hero,
body:not(.admin-page) .hero-slider{
  touch-action:pan-y pinch-zoom!important;
  overscroll-behavior:auto!important;
}

/* Performance patches should never hide/defer the above-the-fold slider. */
@supports (content-visibility:auto){
  body:not(.admin-page) .hero,
  body:not(.admin-page) .hero-slider{
    content-visibility:visible!important;
    contain-intrinsic-size:auto!important;
  }
}

/* Reduced motion still keeps slider usable, just simpler. */
@media (prefers-reduced-motion:reduce){
  body:not(.admin-page) .hero-slider .slide,
  body:not(.admin-page) .hero-slider .slide img,
  body:not(.admin-page) .hero-slider .hero-slide-img{
    transition:opacity .18s ease!important;
    animation:none!important;
  }
  body:not(.admin-page) .hero-slider::after{
    display:none!important;
  }
}


/* =========================================================
   AGS Cache/Session View Sync — 2026-06-15 V18
   Keeps all browser sessions on the same newest layout after asset refresh.
   ========================================================= */
html.ags-release-v18-ready body:not(.admin-page){
  visibility:visible;
}
html.ags-stale-ui-refreshing body:not(.admin-page)::before{
  content:"Updating latest view...";
  position:fixed;
  inset:auto 16px 16px auto;
  z-index:2147483000;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  border-radius:999px;
  background:#111;
  color:#fff;
  font:700 12px/1.2 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  box-shadow:0 14px 34px rgba(0,0,0,.22);
}


/* =========================================================
   AGS Checkout Voucher + Payment Scroll + Slider Arrows — 2026-06-15 V19
   ========================================================= */

/* Voucher result stays inside voucher section. */
body:not(.admin-page) .voucher-check-note{
  display:block!important;
  width:100%!important;
  margin-top:10px!important;
  padding:0!important;
  font-size:12px!important;
  line-height:1.45!important;
  font-weight:850!important;
  letter-spacing:.08em!important;
  text-transform:uppercase!important;
  color:rgba(0,0,0,.56)!important;
}
body:not(.admin-page) .voucher-check-note.is-loading{color:#111!important;}
body:not(.admin-page) .voucher-check-note.is-ok{color:#087a3c!important;}
body:not(.admin-page) .voucher-check-note.is-error{color:#b00020!important;}
body:not(.admin-page) .voucher-check-btn[disabled]{opacity:.62!important;cursor:wait!important;}

/* Checkout final payment screen must scroll internally. */
body:not(.admin-page) .modal[data-checkout].open.is-payment-result-open,
body:not(.admin-page) .modal[data-checkout].open{
  overflow:hidden!important;
}
body:not(.admin-page) .modal[data-checkout].open .checkout-pro.is-payment-view{
  display:flex!important;
  flex-direction:column!important;
  height:min(92dvh, 900px)!important;
  max-height:92dvh!important;
  overflow:hidden!important;
}
body:not(.admin-page) .modal[data-checkout].open .checkout-pro.is-payment-view .checkout-top{
  flex:0 0 auto!important;
}
body:not(.admin-page) .modal[data-checkout].open .checkout-pro.is-payment-view [data-checkout-form]{
  display:none!important;
}
body:not(.admin-page) .modal[data-checkout].open .checkout-pro.is-payment-view .payment-result{
  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:24px 34px calc(120px + env(safe-area-inset-bottom))!important;
}
body:not(.admin-page) .modal[data-checkout].open .checkout-pro.is-payment-view .payment-result-shell,
body:not(.admin-page) .modal[data-checkout].open .checkout-pro.is-payment-view .payment-result-grid-oneview,
body:not(.admin-page) .modal[data-checkout].open .checkout-pro.is-payment-view .payment-result-grid-final{
  max-height:none!important;
  min-height:auto!important;
  overflow:visible!important;
}
body:not(.admin-page) .modal[data-checkout].open .checkout-pro.is-payment-view .payment-footer-actions{
  position:relative!important;
  bottom:auto!important;
}
@media(max-width:760px){
  body:not(.admin-page) .modal[data-checkout].open .checkout-pro.is-payment-view{
    width:100vw!important;
    height:100dvh!important;
    max-height:100dvh!important;
    border-radius:0!important;
  }
  body:not(.admin-page) .modal[data-checkout].open .checkout-pro.is-payment-view .checkout-top{
    padding:16px 58px 12px 18px!important;
    padding-top:max(16px, env(safe-area-inset-top))!important;
  }
  body:not(.admin-page) .modal[data-checkout].open .checkout-pro.is-payment-view .payment-result{
    padding:16px 16px calc(130px + env(safe-area-inset-bottom))!important;
  }
}

/* Slider prev/next buttons restored and protected from performance overrides. */
body:not(.admin-page) .hero-slider{position:relative!important;}
body:not(.admin-page) .hero-slider-arrows{
  position:absolute!important;
  inset:0!important;
  z-index:16!important;
  pointer-events:none!important;
}
body:not(.admin-page) .hero-slider-arrow{
  position:absolute!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  z-index:17!important;
  pointer-events:auto!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:50px!important;
  height:50px!important;
  border-radius:999px!important;
  border:1px solid rgba(255,255,255,.34)!important;
  background:rgba(0,0,0,.48)!important;
  color:#fff!important;
  box-shadow:0 16px 34px rgba(0,0,0,.28)!important;
  cursor:pointer!important;
  opacity:.92!important;
  transition:background-color .16s ease, opacity .16s ease, transform .16s ease!important;
}
body:not(.admin-page) .hero-slider-arrow span{
  display:block!important;
  font-size:34px!important;
  line-height:1!important;
  font-weight:700!important;
  margin-top:-2px!important;
}
body:not(.admin-page) .hero-slider-arrow--prev{left:22px!important;}
body:not(.admin-page) .hero-slider-arrow--next{right:22px!important;}
body:not(.admin-page) .hero-slider-arrow:hover{background:rgba(0,0,0,.78)!important;opacity:1!important;}
@media(max-width:760px){
  body:not(.admin-page) .hero-slider-arrow{width:42px!important;height:42px!important;}
  body:not(.admin-page) .hero-slider-arrow span{font-size:28px!important;}
  body:not(.admin-page) .hero-slider-arrow--prev{left:12px!important;}
  body:not(.admin-page) .hero-slider-arrow--next{right:12px!important;}
}


/* =========================================================
   AGS V20 Preserve Updates: Product Detail Zoom, Centered Quick View, Checkout Type Scale
   2026-06-15 — additive restore only, keeps V19 voucher/scroll/slider/cache changes.
   ========================================================= */

/* Product detail: restore left/right buttons and zoom preview. */
html.detail-zoom-open,
body.detail-zoom-open{overflow:hidden!important;}
body:not(.admin-page) .product-detail-main.has-image{
  cursor:zoom-in!important;
  isolation:isolate!important;
  position:relative!important;
}
body:not(.admin-page) .product-detail-main [data-detail-main]{z-index:1!important;}
body:not(.admin-page) .product-detail-main .product-badge,
body:not(.admin-page) .product-detail-main .product-badge-flash_sale,
body:not(.admin-page) .product-detail-main .product-badge-discount,
body:not(.admin-page) .product-detail-main .product-badge-sold_out{z-index:8!important;}
body:not(.admin-page) .product-detail-nav{
  position:absolute!important;
  inset:0!important;
  z-index:9!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  padding:0 14px!important;
  pointer-events:none!important;
}
body:not(.admin-page) .product-detail-nav button,
body:not(.admin-page) .product-detail-zoom-btn{
  pointer-events:auto!important;
  border:1px solid rgba(255,255,255,.72)!important;
  background:rgba(255,255,255,.92)!important;
  color:#020202!important;
  box-shadow:0 10px 24px rgba(0,0,0,.14)!important;
  -webkit-backdrop-filter:blur(10px)!important;
  backdrop-filter:blur(10px)!important;
  cursor:pointer!important;
  transition:background-color .16s ease, color .16s ease, opacity .16s ease!important;
}
body:not(.admin-page) .product-detail-nav button{
  width:44px!important;
  height:44px!important;
  border-radius:999px!important;
  display:grid!important;
  place-items:center!important;
  font-size:34px!important;
  line-height:1!important;
  font-weight:800!important;
}
body:not(.admin-page) .product-detail-nav button:disabled{opacity:.35!important;cursor:not-allowed!important;}
body:not(.admin-page) .product-detail-zoom-btn{
  position:absolute!important;
  right:16px!important;
  bottom:16px!important;
  z-index:10!important;
  min-height:38px!important;
  padding:0 14px!important;
  border-radius:999px!important;
  font-size:12px!important;
  font-weight:950!important;
  letter-spacing:.04em!important;
  text-transform:uppercase!important;
}
body:not(.admin-page) .product-detail-main .gallery-count{
  z-index:10!important;
  left:16px!important;
  bottom:16px!important;
}
body:not(.admin-page) .product-detail-thumbs button:focus-visible,
body:not(.admin-page) .product-detail-nav button:focus-visible,
body:not(.admin-page) .product-detail-zoom-btn:focus-visible{
  outline:3px solid var(--red)!important;
  outline-offset:3px!important;
}

/* Detail image lightbox. */
.ags-detail-lightbox{
  position:fixed!important;
  inset:0!important;
  z-index:2147483645!important;
  display:none!important;
  align-items:center!important;
  justify-content:center!important;
  padding:clamp(14px,2vw,28px)!important;
  isolation:isolate!important;
}
.ags-detail-lightbox.open{display:flex!important;}
.ags-detail-lightbox-shade{
  position:absolute!important;
  inset:0!important;
  background:rgba(0,0,0,.82)!important;
  -webkit-backdrop-filter:blur(16px)!important;
  backdrop-filter:blur(16px)!important;
}
.ags-detail-lightbox-card{
  position:relative!important;
  z-index:1!important;
  width:min(1120px,96vw)!important;
  height:min(860px,92dvh)!important;
  border:1px solid rgba(255,255,255,.14)!important;
  border-radius:26px!important;
  background:#070707!important;
  color:#fff!important;
  overflow:hidden!important;
  display:grid!important;
  grid-template-rows:auto 1fr!important;
}
.ags-detail-lightbox-top{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:16px!important;
  padding:14px 16px!important;
  border-bottom:1px solid rgba(255,255,255,.12)!important;
  background:rgba(0,0,0,.58)!important;
}
.ags-detail-lightbox-top b{display:block!important;font-size:14px!important;font-weight:950!important;}
.ags-detail-lightbox-top small{display:block!important;margin-top:3px!important;color:rgba(255,255,255,.62)!important;font-size:11px!important;font-weight:700!important;}
.ags-detail-lightbox-close{
  width:42px!important;height:42px!important;border:0!important;border-radius:999px!important;background:#fff!important;color:#020202!important;
  font-size:26px!important;line-height:1!important;font-weight:900!important;cursor:pointer!important;
}
.ags-detail-lightbox-figure{
  min-height:0!important;margin:0!important;display:flex!important;align-items:center!important;justify-content:center!important;
  overflow:auto!important;overscroll-behavior:contain!important;background:#050505!important;
}
.ags-detail-lightbox-figure img{
  max-width:100%!important;max-height:100%!important;width:auto!important;height:auto!important;object-fit:contain!important;
  cursor:zoom-in!important;transition:transform .18s ease!important;transform-origin:center center!important;user-select:none!important;-webkit-user-drag:none!important;
}
.ags-detail-lightbox.is-zoomed .ags-detail-lightbox-figure{align-items:flex-start!important;justify-content:flex-start!important;padding:24px!important;}
.ags-detail-lightbox.is-zoomed .ags-detail-lightbox-figure img{
  max-width:none!important;max-height:none!important;width:auto!important;height:auto!important;min-width:min(150%,1500px)!important;cursor:zoom-out!important;
}
.ags-detail-lightbox-nav{
  position:absolute!important;z-index:3!important;top:50%!important;transform:translateY(-50%)!important;width:48px!important;height:48px!important;
  border:1px solid rgba(255,255,255,.22)!important;border-radius:999px!important;background:rgba(255,255,255,.94)!important;color:#020202!important;
  display:none!important;place-items:center!important;font-size:38px!important;line-height:1!important;font-weight:700!important;cursor:pointer!important;
}
.ags-detail-lightbox.has-many .ags-detail-lightbox-nav{display:grid!important;}
.ags-detail-lightbox-nav.is-prev{left:18px!important;}
.ags-detail-lightbox-nav.is-next{right:18px!important;}
@media(max-width:760px){
  body:not(.admin-page) .product-detail-nav{padding:0 8px!important;}
  body:not(.admin-page) .product-detail-nav button{width:38px!important;height:38px!important;font-size:28px!important;}
  body:not(.admin-page) .product-detail-zoom-btn{right:12px!important;bottom:12px!important;min-height:34px!important;font-size:11px!important;}
  .ags-detail-lightbox{padding:8px!important;}
  .ags-detail-lightbox-card{width:100vw!important;height:100dvh!important;border-radius:0!important;}
  .ags-detail-lightbox-nav{width:42px!important;height:42px!important;font-size:32px!important;}
  .ags-detail-lightbox-nav.is-prev{left:10px!important;}
  .ags-detail-lightbox-nav.is-next{right:10px!important;}
}

/* Quick View: restore exact centering after V16 performance transform reset. */
body:not(.admin-page) .modal[data-quick].open{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:18px!important;
  overflow:auto!important;
}
body:not(.admin-page) .modal[data-quick].open .product-modal{
  position:relative!important;
  left:auto!important;
  top:auto!important;
  right:auto!important;
  bottom:auto!important;
  transform:none!important;
  width:min(940px,94vw)!important;
  max-height:min(86dvh,820px)!important;
  overflow:auto!important;
  display:grid!important;
  grid-template-columns:minmax(300px,.95fr) minmax(320px,1fr)!important;
  gap:22px!important;
  align-items:center!important;
  margin:auto!important;
  border-radius:28px!important;
}
body:not(.admin-page) .modal[data-quick] .quick-gallery .product-art.big{
  min-height:clamp(260px,42vh,420px)!important;
  height:auto!important;
  cursor:default!important;
  border-radius:22px!important;
  position:relative!important;
  overflow:hidden!important;
}
body:not(.admin-page) .modal[data-quick] .quick-gallery .product-art.big.has-image,
body:not(.admin-page) .modal[data-quick] .quick-gallery .product-art.big.is-zoomable{cursor:zoom-in!important;background:#f7f5ef!important;}
body:not(.admin-page) .modal[data-quick] .quick-gallery .product-art.big img{
  width:100%!important;height:100%!important;object-fit:contain!important;object-position:center!important;padding:14px!important;cursor:zoom-in!important;
}
body:not(.admin-page) .quick-zoom-btn{
  position:absolute!important;right:14px!important;bottom:14px!important;z-index:12!important;min-height:36px!important;padding:0 13px!important;
  border:1px solid rgba(255,255,255,.78)!important;border-radius:999px!important;background:rgba(255,255,255,.94)!important;color:#020202!important;
  font-size:11.5px!important;font-weight:950!important;letter-spacing:.04em!important;text-transform:uppercase!important;cursor:pointer!important;
}
body:not(.admin-page) .quick-zoom-btn[hidden]{display:none!important;}
@media(max-width:760px){
  body:not(.admin-page) .modal[data-quick].open{align-items:flex-end!important;padding:10px!important;}
  body:not(.admin-page) .modal[data-quick].open .product-modal{
    width:100%!important;max-height:88dvh!important;grid-template-columns:1fr!important;gap:14px!important;border-radius:24px 24px 0 0!important;
  }
  body:not(.admin-page) .modal[data-quick] .quick-gallery .product-art.big{min-height:240px!important;}
}

/* Checkout final screen type scale: standard, not oversized. */
body:not(.admin-page) .modal[data-checkout] .checkout-pro.is-payment-view .checkout-top h2{
  font-size:clamp(34px,4vw,52px)!important;
  line-height:.92!important;
}
body:not(.admin-page) .payment-result .payment-created-copy strong{
  font-size:clamp(30px,4.8vw,52px)!important;
  line-height:.92!important;
  letter-spacing:-.04em!important;
  overflow-wrap:anywhere!important;
}
body:not(.admin-page) .payment-result .payment-success-kicker{
  font-size:12px!important;
  letter-spacing:.12em!important;
}
body:not(.admin-page) .payment-result .btn-copy-order-mini,
body:not(.admin-page) .payment-result .payment-countdown-pill,
body:not(.admin-page) .payment-result .payment-countdown-card{
  font-size:clamp(15px,1.6vw,22px)!important;
  line-height:1.1!important;
}
body:not(.admin-page) .payment-result .payment-countdown-pill b,
body:not(.admin-page) .payment-result .payment-countdown-card b{
  font-size:clamp(20px,2.6vw,32px)!important;
}
body:not(.admin-page) .payment-result .payment-instruction-card b,
body:not(.admin-page) .payment-result .created-order-summary b,
body:not(.admin-page) .payment-result .created-summary-total b{
  font-size:clamp(15px,1.35vw,20px)!important;
}
body:not(.admin-page) .payment-result .created-order-summary h3,
body:not(.admin-page) .payment-result .created-order-summary h4,
body:not(.admin-page) .payment-result .payment-summary-title{
  font-size:clamp(20px,2vw,28px)!important;
  line-height:1.05!important;
}
body:not(.admin-page) .payment-result .qris-preview img{
  max-width:min(330px,76vw)!important;
  height:auto!important;
}
@media(max-width:760px){
  body:not(.admin-page) .modal[data-checkout] .checkout-pro.is-payment-view .checkout-top h2{font-size:32px!important;}
  body:not(.admin-page) .payment-result .payment-created-copy strong{font-size:32px!important;}
  body:not(.admin-page) .payment-result .btn-copy-order-mini,
  body:not(.admin-page) .payment-result .payment-countdown-pill{font-size:16px!important;}
}


/* =========================================================
   AGS Login Modal Center Lock — 2026-06-15 V21
   Fixes login popup shifted by global performance transform reset.
   ========================================================= */
body:not(.admin-page) .modal[data-login].open{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:18px!important;
  overflow:auto!important;
  -webkit-overflow-scrolling:touch!important;
}
body:not(.admin-page) .modal[data-login].open .shade{
  position:fixed!important;
  inset:0!important;
}
body:not(.admin-page) .modal[data-login].open .modal-card{
  position:relative!important;
  left:auto!important;
  top:auto!important;
  right:auto!important;
  bottom:auto!important;
  transform:none!important;
  margin:auto!important;
  width:min(520px,94vw)!important;
  max-height:min(88dvh,620px)!important;
  overflow:auto!important;
  border-radius:28px!important;
  z-index:2!important;
}
body:not(.admin-page) .modal[data-login].open .modal-card h2{
  font-size:clamp(34px,4vw,48px)!important;
  line-height:.92!important;
}
@media(max-width:760px){
  body:not(.admin-page) .modal[data-login].open{
    align-items:center!important;
    padding:14px!important;
  }
  body:not(.admin-page) .modal[data-login].open .modal-card{
    width:min(420px,94vw)!important;
    max-height:88dvh!important;
    border-radius:24px!important;
  }
}
@media(max-width:520px){
  body:not(.admin-page) .modal[data-login].open{
    align-items:flex-end!important;
    padding:10px 10px calc(10px + env(safe-area-inset-bottom))!important;
  }
  body:not(.admin-page) .modal[data-login].open .modal-card{
    width:100%!important;
    max-height:86dvh!important;
    border-radius:24px 24px 18px 18px!important;
  }
}


/* =========================================================
   AGS V22 Voucher Checkout Unblock — 2026-06-15
   Invalid voucher is ignored and checkout remains available.
   ========================================================= */
body:not(.admin-page) .voucher-check-note.is-error{
  color:#6f5300!important;
}
body:not(.admin-page) .checkout-submit{
  cursor:pointer!important;
}
body:not(.admin-page) .checkout-submit[disabled]{
  opacity:.74!important;
  cursor:wait!important;
}


/* =========================================================
   AGS V23 Cart Stock Validation + Remove Confirmation Restore
   Keeps cart qty within stock and asks before deleting item.
   ========================================================= */
body:not(.admin-page) .cart-line-info{
  min-width:0!important;
  display:grid!important;
  gap:3px!important;
}
body:not(.admin-page) .cart-stock-note{
  display:block!important;
  margin-top:1px!important;
  color:rgba(0,0,0,.58)!important;
  font-size:11px!important;
  font-weight:750!important;
  line-height:1.25!important;
  letter-spacing:.01em!important;
}
body:not(.admin-page) .cart-stock-note.is-max{
  color:#b00020!important;
}
body:not(.admin-page) .cart-line.is-stock-max .qty strong{
  color:#b00020!important;
}
body:not(.admin-page) .cart-line .qty button:disabled,
body:not(.admin-page) .cart-line .qty button[aria-disabled="true"]{
  opacity:.42!important;
  cursor:not-allowed!important;
  pointer-events:none!important;
}
body:not(.admin-page) .cart-remove-mini{
  min-width:auto!important;
  height:32px!important;
  padding:0 12px!important;
  margin-left:4px!important;
  border:0!important;
  border-radius:999px!important;
  background:#000!important;
  color:#fff!important;
  font-size:12px!important;
  font-weight:850!important;
  cursor:pointer!important;
}
@media(max-width:560px){
  body:not(.admin-page) .cart-line{
    align-items:flex-start!important;
  }
  body:not(.admin-page) .cart-line .qty{
    flex-wrap:wrap!important;
    justify-content:flex-end!important;
    gap:6px!important;
  }
  body:not(.admin-page) .cart-remove-mini{
    height:28px!important;
    padding:0 10px!important;
    font-size:11px!important;
  }
}


/* =========================================================
   AGS V24 Cart Server Stock Lock + Professional Confirm Dialog
   Cart qty is checked against database stock, and delete confirmation no longer uses browser alert.
   ========================================================= */
.cart-confirm-dialog{
  position:fixed!important;
  inset:0!important;
  z-index:2147483600!important;
  display:none!important;
  align-items:center!important;
  justify-content:center!important;
  padding:18px!important;
  isolation:isolate!important;
}
.cart-confirm-dialog.is-open{display:flex!important;}
.cart-confirm-shade{
  position:absolute!important;
  inset:0!important;
  background:rgba(0,0,0,.62)!important;
  -webkit-backdrop-filter:blur(10px)!important;
  backdrop-filter:blur(10px)!important;
}
.cart-confirm-card{
  position:relative!important;
  z-index:1!important;
  width:min(430px,94vw)!important;
  border-radius:26px!important;
  background:#fff!important;
  color:#020202!important;
  box-shadow:0 28px 90px rgba(0,0,0,.35)!important;
  padding:24px!important;
}
.cart-confirm-x{
  position:absolute!important;
  right:14px!important;
  top:14px!important;
  width:38px!important;
  height:38px!important;
  border:0!important;
  border-radius:999px!important;
  background:#f3f3f3!important;
  color:#111!important;
  font-size:24px!important;
  line-height:1!important;
  font-weight:900!important;
  cursor:pointer!important;
}
.cart-confirm-kicker{
  display:inline-flex!important;
  align-items:center!important;
  min-height:28px!important;
  padding:0 12px!important;
  border-radius:999px!important;
  background:#ffd21c!important;
  color:#111!important;
  font-size:11px!important;
  font-weight:950!important;
  letter-spacing:.12em!important;
  text-transform:uppercase!important;
}
.cart-confirm-card h3{
  margin:16px 42px 8px 0!important;
  font-family:'Bebas Neue', sans-serif!important;
  font-size:40px!important;
  line-height:.92!important;
  letter-spacing:.02em!important;
}
.cart-confirm-card p{
  margin:0!important;
  color:#555!important;
  font-size:15px!important;
  line-height:1.45!important;
}
.cart-confirm-actions{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:10px!important;
  margin-top:20px!important;
}
.cart-confirm-actions .btn{
  width:100%!important;
  min-height:48px!important;
  justify-content:center!important;
}
html.cart-confirm-open,
body.cart-confirm-open{
  overflow:hidden!important;
}
@media(max-width:520px){
  .cart-confirm-dialog{
    align-items:flex-end!important;
    padding:10px!important;
  }
  .cart-confirm-card{
    width:100%!important;
    border-radius:24px 24px 18px 18px!important;
    padding:22px 18px 18px!important;
  }
  .cart-confirm-card h3{font-size:34px!important;}
  .cart-confirm-actions{grid-template-columns:1fr!important;}
}


/* =========================================================
   AGS V25 Cart Delete Red Icon — 2026-06-15
   Replace clipped text delete button with clean red trash icon.
   ========================================================= */
body:not(.admin-page) .cart-line .qty{
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
}
body:not(.admin-page) .cart-remove-mini.cart-remove-icon{
  flex:0 0 auto!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:36px!important;
  height:36px!important;
  min-width:36px!important;
  padding:0!important;
  margin-left:2px!important;
  border:1px solid rgba(220,0,35,.14)!important;
  border-radius:999px!important;
  background:#e60023!important;
  color:#fff!important;
  box-shadow:0 10px 20px rgba(230,0,35,.20)!important;
  cursor:pointer!important;
  font-size:0!important;
  line-height:0!important;
}
body:not(.admin-page) .cart-remove-mini.cart-remove-icon svg{
  display:block!important;
  width:17px!important;
  height:17px!important;
  pointer-events:none!important;
}
body:not(.admin-page) .cart-remove-mini.cart-remove-icon:hover,
body:not(.admin-page) .cart-remove-mini.cart-remove-icon:focus-visible{
  background:#b00020!important;
  border-color:#b00020!important;
  outline:none!important;
  box-shadow:0 0 0 4px rgba(230,0,35,.14), 0 12px 24px rgba(230,0,35,.24)!important;
}
body:not(.admin-page) .cart-confirm-actions .btn-danger,
body:not(.admin-page) .cart-confirm-danger{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  border:0!important;
  background:#e60023!important;
  color:#fff!important;
  border-radius:999px!important;
  font-weight:900!important;
  cursor:pointer!important;
}
body:not(.admin-page) .cart-confirm-actions .btn-danger:hover,
body:not(.admin-page) .cart-confirm-danger:hover{
  background:#b00020!important;
}
@media(max-width:560px){
  body:not(.admin-page) .cart-line .qty{
    gap:6px!important;
  }
  body:not(.admin-page) .cart-remove-mini.cart-remove-icon{
    width:34px!important;
    height:34px!important;
    min-width:34px!important;
  }
  body:not(.admin-page) .cart-remove-mini.cart-remove-icon svg{
    width:16px!important;
    height:16px!important;
  }
}


/* =========================================================
   AGS V26 Voucher Message Clean Color — 2026-06-15
   Success green, failure red; no extra ignored-copy in customer-facing validation.
   ========================================================= */
body:not(.admin-page) .voucher-check-note.is-ok{
  color:#087a3c!important;
}
body:not(.admin-page) .voucher-check-note.is-error{
  color:#b00020!important;
}
body:not(.admin-page) .voucher-check-note.is-loading{
  color:#111!important;
}


/* =========================================================
   AGS V27 Payment Result Layout Polish — 2026-06-15
   Refines checkout success/payment instruction popup typography, grid, QRIS, and buttons.
   ========================================================= */
body:not(.admin-page) .modal[data-checkout].open .checkout-pro.is-payment-view{
  width:min(980px,94vw)!important;
  height:min(92dvh,820px)!important;
  max-height:92dvh!important;
  border-radius:24px!important;
  overflow:hidden!important;
  background:#fff!important;
}
body:not(.admin-page) .modal[data-checkout].open .checkout-pro.is-payment-view .checkout-top{
  min-height:auto!important;
  padding:18px 76px 18px 28px!important;
  border-bottom:1px solid rgba(255,255,255,.08)!important;
}
body:not(.admin-page) .modal[data-checkout].open .checkout-pro.is-payment-view .checkout-top .eyebrow{
  display:none!important;
}
body:not(.admin-page) .modal[data-checkout].open .checkout-pro.is-payment-view .checkout-top h2{
  margin:0!important;
  font-size:clamp(34px,3.7vw,48px)!important;
  line-height:.9!important;
  letter-spacing:.01em!important;
}
body:not(.admin-page) .modal[data-checkout].open .checkout-pro.is-payment-view .checkout-top p{
  display:none!important;
}
body:not(.admin-page) .modal[data-checkout].open .checkout-pro.is-payment-view .x.checkout-x{
  width:48px!important;
  height:48px!important;
  right:18px!important;
  top:18px!important;
  font-size:26px!important;
}

body:not(.admin-page) .modal[data-checkout].open .checkout-pro.is-payment-view .payment-result{
  padding:24px 30px 30px!important;
  background:#fff!important;
}
body:not(.admin-page) .payment-view-polished-v27{
  width:100%!important;
  max-width:100%!important;
  margin:0 auto!important;
  display:grid!important;
  gap:18px!important;
}
body:not(.admin-page) .payment-view-polished-v27 .payment-created-card-final{
  display:grid!important;
  grid-template-columns:minmax(220px,.95fr) minmax(280px,1.05fr)!important;
  align-items:center!important;
  gap:18px!important;
  min-height:auto!important;
  padding:20px 24px!important;
  border-radius:20px!important;
  border:1px solid rgba(0,0,0,.08)!important;
  background:#fff!important;
  box-shadow:none!important;
}
body:not(.admin-page) .payment-view-polished-v27 .payment-created-copy{
  display:grid!important;
  gap:10px!important;
  min-width:0!important;
}
body:not(.admin-page) .payment-view-polished-v27 .payment-success-kicker{
  width:max-content!important;
  max-width:100%!important;
  min-height:28px!important;
  padding:0 14px!important;
  border-radius:999px!important;
  background:#050505!important;
  color:#fff!important;
  font-size:11px!important;
  line-height:28px!important;
  letter-spacing:.11em!important;
  font-weight:900!important;
  white-space:nowrap!important;
}
body:not(.admin-page) .payment-view-polished-v27 .payment-created-copy strong{
  display:block!important;
  max-width:100%!important;
  color:#050505!important;
  font-family:'DM Sans', system-ui, sans-serif!important;
  font-size:clamp(30px,3.9vw,46px)!important;
  line-height:.98!important;
  letter-spacing:-.055em!important;
  font-weight:950!important;
  overflow-wrap:anywhere!important;
}
body:not(.admin-page) .payment-view-polished-v27 .payment-created-actions{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:12px!important;
  min-width:0!important;
}
body:not(.admin-page) .payment-view-polished-v27 .btn-copy-order-mini,
body:not(.admin-page) .payment-view-polished-v27 .payment-countdown-pill,
body:not(.admin-page) .payment-view-polished-v27 .payment-countdown-card{
  width:100%!important;
  min-height:52px!important;
  border-radius:999px!important;
  font-size:18px!important;
  line-height:1.1!important;
  letter-spacing:.02em!important;
  font-weight:950!important;
  justify-content:center!important;
}
body:not(.admin-page) .payment-view-polished-v27 .payment-countdown-pill,
body:not(.admin-page) .payment-view-polished-v27 .payment-countdown-card{
  background:#050505!important;
  color:#fff!important;
  border:1px solid #050505!important;
}
body:not(.admin-page) .payment-view-polished-v27 .payment-countdown-pill b,
body:not(.admin-page) .payment-view-polished-v27 .payment-countdown-card b{
  font-size:inherit!important;
  line-height:1!important;
  letter-spacing:.02em!important;
}

body:not(.admin-page) .payment-view-polished-v27 .payment-result-grid-final,
body:not(.admin-page) .payment-view-polished-v27 .payment-result-grid-oneview{
  display:grid!important;
  grid-template-columns:minmax(260px,.78fr) minmax(360px,1.22fr)!important;
  gap:18px!important;
  align-items:stretch!important;
  margin:0!important;
}
body:not(.admin-page) .payment-view-polished-v27 .payment-instruction-card,
body:not(.admin-page) .payment-view-polished-v27 .created-order-summary,
body:not(.admin-page) .payment-view-polished-v27 .created-summary-card,
body:not(.admin-page) .payment-view-polished-v27 .order-summary-card{
  border:1px solid rgba(0,0,0,.08)!important;
  border-radius:18px!important;
  background:#fff!important;
  box-shadow:none!important;
  padding:18px!important;
  min-height:0!important;
}
body:not(.admin-page) .payment-view-polished-v27 .payment-card-head,
body:not(.admin-page) .payment-view-polished-v27 .payment-card-head-minimal{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;
  margin:0 0 14px!important;
  padding:0 0 12px!important;
  border-bottom:1px solid rgba(0,0,0,.07)!important;
}
body:not(.admin-page) .payment-view-polished-v27 .payment-card-head span,
body:not(.admin-page) .payment-view-polished-v27 .payment-card-head-minimal span{
  color:rgba(0,0,0,.55)!important;
  font-size:12px!important;
  font-weight:850!important;
  line-height:1.2!important;
}
body:not(.admin-page) .payment-view-polished-v27 .payment-card-head b,
body:not(.admin-page) .payment-view-polished-v27 .payment-card-head-minimal b{
  color:#050505!important;
  font-size:18px!important;
  font-weight:950!important;
  line-height:1.1!important;
  text-transform:uppercase!important;
}

body:not(.admin-page) .payment-view-polished-v27 .qris-preview,
body:not(.admin-page) .payment-view-polished-v27 .qris-preview-compact,
body:not(.admin-page) .payment-view-polished-v27 .qris-preview-clean{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:100%!important;
  aspect-ratio:1/1!important;
  max-height:300px!important;
  padding:12px!important;
  margin:0!important;
  border:1px solid rgba(0,0,0,.08)!important;
  border-radius:16px!important;
  background:#fff!important;
  overflow:hidden!important;
}
body:not(.admin-page) .payment-view-polished-v27 .qris-preview img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:260px!important;
  max-height:260px!important;
  object-fit:contain!important;
  image-rendering:auto!important;
}
body:not(.admin-page) .payment-view-polished-v27 .payment-total-copy-row{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:12px!important;
  margin-top:12px!important;
  padding:14px!important;
  border:1px dashed rgba(0,0,0,.12)!important;
  border-radius:14px!important;
  background:#fafafa!important;
}
body:not(.admin-page) .payment-view-polished-v27 .payment-total-copy-row span{
  display:block!important;
  color:rgba(0,0,0,.54)!important;
  font-size:12px!important;
  font-weight:750!important;
  margin-bottom:4px!important;
}
body:not(.admin-page) .payment-view-polished-v27 .payment-total-copy-row b{
  display:block!important;
  color:#050505!important;
  font-size:22px!important;
  font-weight:950!important;
  line-height:1.1!important;
}
body:not(.admin-page) .payment-view-polished-v27 .payment-total-copy-row .btn{
  min-height:46px!important;
  border-radius:999px!important;
  font-size:15px!important;
  font-weight:950!important;
}

body:not(.admin-page) .payment-view-polished-v27 .created-order-summary h3,
body:not(.admin-page) .payment-view-polished-v27 .created-order-summary h4,
body:not(.admin-page) .payment-view-polished-v27 .payment-summary-title{
  margin:0!important;
  color:#050505!important;
  font-size:24px!important;
  line-height:1.08!important;
  letter-spacing:-.02em!important;
  font-weight:950!important;
}
body:not(.admin-page) .payment-view-polished-v27 .created-order-summary small,
body:not(.admin-page) .payment-view-polished-v27 .created-order-summary span,
body:not(.admin-page) .payment-view-polished-v27 .payment-summary-row span{
  color:rgba(0,0,0,.58)!important;
  font-size:13px!important;
  line-height:1.45!important;
}
body:not(.admin-page) .payment-view-polished-v27 .created-order-summary b,
body:not(.admin-page) .payment-view-polished-v27 .payment-summary-row b{
  color:#050505!important;
  font-size:15px!important;
  line-height:1.35!important;
  font-weight:900!important;
}
body:not(.admin-page) .payment-view-polished-v27 .created-summary-total b,
body:not(.admin-page) .payment-view-polished-v27 .payment-summary-total b,
body:not(.admin-page) .payment-view-polished-v27 .estimated-total b{
  font-size:22px!important;
  line-height:1.1!important;
  font-weight:950!important;
}
body:not(.admin-page) .payment-view-polished-v27 .payment-summary-discount b,
body:not(.admin-page) .payment-view-polished-v27 .summary-discount b,
body:not(.admin-page) .payment-view-polished-v27 .discount-value{
  color:#e60023!important;
  font-size:18px!important;
  font-weight:950!important;
}
body:not(.admin-page) .payment-view-polished-v27 .payment-note,
body:not(.admin-page) .payment-view-polished-v27 .payment-note-compact,
body:not(.admin-page) .payment-view-polished-v27 .created-summary-note{
  color:rgba(0,0,0,.55)!important;
  font-size:12px!important;
  line-height:1.5!important;
}

body:not(.admin-page) .payment-view-polished-v27 .payment-footer-actions{
  display:flex!important;
  justify-content:center!important;
  margin-top:8px!important;
  padding:0!important;
}
body:not(.admin-page) .payment-view-polished-v27 .payment-footer-actions .btn,
body:not(.admin-page) .payment-view-polished-v27 [data-finish-order]{
  width:min(420px,100%)!important;
  min-height:56px!important;
  border-radius:999px!important;
  font-size:18px!important;
  font-weight:950!important;
  letter-spacing:.01em!important;
}

/* BCA payment instruction normalization */
body:not(.admin-page) .payment-view-polished-v27 .payment-box,
body:not(.admin-page) .payment-view-polished-v27 .payment-box-compact{
  display:grid!important;
  gap:0!important;
  padding:0!important;
  border:1px solid rgba(0,0,0,.08)!important;
  border-radius:16px!important;
  overflow:hidden!important;
}
body:not(.admin-page) .payment-view-polished-v27 .payment-line{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:16px!important;
  padding:12px 14px!important;
  border-bottom:1px solid rgba(0,0,0,.07)!important;
}
body:not(.admin-page) .payment-view-polished-v27 .payment-line:last-child{
  border-bottom:0!important;
}
body:not(.admin-page) .payment-view-polished-v27 .payment-line span{
  color:rgba(0,0,0,.55)!important;
  font-size:12px!important;
  font-weight:750!important;
}
body:not(.admin-page) .payment-view-polished-v27 .payment-line b{
  color:#050505!important;
  font-size:15px!important;
  font-weight:950!important;
  text-align:right!important;
}

@media(max-width:860px){
  body:not(.admin-page) .modal[data-checkout].open .checkout-pro.is-payment-view{
    width:100vw!important;
    height:100dvh!important;
    max-height:100dvh!important;
    border-radius:0!important;
  }
  body:not(.admin-page) .modal[data-checkout].open .checkout-pro.is-payment-view .checkout-top{
    padding:16px 66px 14px 18px!important;
  }
  body:not(.admin-page) .modal[data-checkout].open .checkout-pro.is-payment-view .payment-result{
    padding:16px 14px calc(110px + env(safe-area-inset-bottom))!important;
  }
  body:not(.admin-page) .payment-view-polished-v27 .payment-created-card-final,
  body:not(.admin-page) .payment-view-polished-v27 .payment-result-grid-final,
  body:not(.admin-page) .payment-view-polished-v27 .payment-result-grid-oneview{
    grid-template-columns:1fr!important;
  }
  body:not(.admin-page) .payment-view-polished-v27 .payment-created-card-final{
    gap:14px!important;
    padding:18px!important;
  }
  body:not(.admin-page) .payment-view-polished-v27 .payment-created-copy strong{
    font-size:32px!important;
  }
  body:not(.admin-page) .payment-view-polished-v27 .qris-preview{
    max-height:none!important;
    width:min(300px,100%)!important;
    margin:0 auto!important;
  }
}
@media(max-width:520px){
  body:not(.admin-page) .payment-view-polished-v27{
    gap:14px!important;
  }
  body:not(.admin-page) .payment-view-polished-v27 .payment-created-card-final,
  body:not(.admin-page) .payment-view-polished-v27 .payment-instruction-card,
  body:not(.admin-page) .payment-view-polished-v27 .created-order-summary,
  body:not(.admin-page) .payment-view-polished-v27 .created-summary-card,
  body:not(.admin-page) .payment-view-polished-v27 .order-summary-card{
    padding:16px!important;
    border-radius:16px!important;
  }
  body:not(.admin-page) .payment-view-polished-v27 .payment-created-copy strong{
    font-size:28px!important;
  }
  body:not(.admin-page) .payment-view-polished-v27 .btn-copy-order-mini,
  body:not(.admin-page) .payment-view-polished-v27 .payment-countdown-pill,
  body:not(.admin-page) .payment-view-polished-v27 .payment-countdown-card{
    min-height:48px!important;
    font-size:15px!important;
  }
}


/* =========================================================
   AGS V28 Voucher Validation Message Final — 2026-06-15
   Error = red, success = green, success wording includes "potongan".
   ========================================================= */
body:not(.admin-page) .voucher-check-note{
  display:block!important;
  width:100%!important;
  margin-top:10px!important;
  font-size:12px!important;
  line-height:1.45!important;
  font-weight:850!important;
  letter-spacing:.08em!important;
  text-transform:uppercase!important;
}
body:not(.admin-page) .voucher-check-note.is-error,
body:not(.admin-page) .checkout-pro .voucher-check-note.is-error,
body:not(.admin-page) .voucher-choice .voucher-check-note.is-error{
  color:#e60023!important;
}
body:not(.admin-page) .voucher-check-note.is-ok,
body:not(.admin-page) .checkout-pro .voucher-check-note.is-ok,
body:not(.admin-page) .voucher-choice .voucher-check-note.is-ok{
  color:#087a3c!important;
}
body:not(.admin-page) .voucher-check-note.is-loading,
body:not(.admin-page) .checkout-pro .voucher-check-note.is-loading,
body:not(.admin-page) .voucher-choice .voucher-check-note.is-loading{
  color:#111!important;
}


/* =========================================================
   AGS V29 Voucher Validation Force Color — 2026-06-15
   Final override: state attribute + inline JS color guarantee.
   ========================================================= */
html body:not(.admin-page) [data-voucher-check-note],
html body:not(.admin-page) .voucher-check-note{
  display:block!important;
  width:100%!important;
  margin-top:10px!important;
  font-size:12px!important;
  line-height:1.45!important;
  font-weight:900!important;
  letter-spacing:.08em!important;
  text-transform:uppercase!important;
}
html body:not(.admin-page) [data-voucher-check-note][data-voucher-state="error"],
html body:not(.admin-page) .voucher-check-note.is-error,
html body:not(.admin-page) .checkout-pro .voucher-choice [data-voucher-check-note].is-error{
  color:#e60023!important;
}
html body:not(.admin-page) [data-voucher-check-note][data-voucher-state="ok"],
html body:not(.admin-page) .voucher-check-note.is-ok,
html body:not(.admin-page) .checkout-pro .voucher-choice [data-voucher-check-note].is-ok{
  color:#087a3c!important;
}
html body:not(.admin-page) [data-voucher-check-note][data-voucher-state="loading"],
html body:not(.admin-page) .voucher-check-note.is-loading,
html body:not(.admin-page) .checkout-pro .voucher-choice [data-voucher-check-note].is-loading{
  color:#111111!important;
}


/* =========================================================
   AGS V30 Payment Result BCA/Order Typography Polish — 2026-06-15
   Fixes oversized order number and broken copy buttons in checkout success popup.
   ========================================================= */
html body:not(.admin-page) .modal[data-checkout].open .checkout-pro.is-payment-view{
  width:min(1040px,94vw)!important;
  height:min(92dvh,840px)!important;
  max-height:92dvh!important;
}
html body:not(.admin-page) .modal[data-checkout].open .checkout-pro.is-payment-view .payment-result{
  padding:22px 28px 30px!important;
}

/* Top order card: smaller, readable order number and balanced actions */
html body:not(.admin-page) .payment-view-polished-v27 .payment-created-card-final,
html body:not(.admin-page) .payment-created-card-final{
  grid-template-columns:minmax(250px,.82fr) minmax(300px,1fr)!important;
  gap:18px!important;
  padding:20px 24px!important;
}
html body:not(.admin-page) .payment-view-polished-v27 .payment-created-copy strong,
html body:not(.admin-page) .payment-created-card-final .payment-created-copy strong{
  font-family:'DM Sans', system-ui, sans-serif!important;
  font-size:clamp(24px,3.2vw,38px)!important;
  line-height:1.02!important;
  letter-spacing:-.045em!important;
  font-weight:950!important;
  max-width:100%!important;
  overflow-wrap:anywhere!important;
  word-break:normal!important;
}
html body:not(.admin-page) .payment-view-polished-v27 .payment-success-kicker,
html body:not(.admin-page) .payment-created-card-final .payment-success-kicker{
  min-height:28px!important;
  padding:0 14px!important;
  font-size:10.5px!important;
  line-height:28px!important;
  letter-spacing:.1em!important;
}
html body:not(.admin-page) .payment-view-polished-v27 .btn-copy-order-mini,
html body:not(.admin-page) .payment-view-polished-v27 .payment-countdown-pill,
html body:not(.admin-page) .payment-view-polished-v27 .payment-countdown-card,
html body:not(.admin-page) .payment-created-card-final .btn-copy-order-mini,
html body:not(.admin-page) .payment-created-card-final .payment-countdown-pill,
html body:not(.admin-page) .payment-created-card-final .payment-countdown-card{
  min-height:50px!important;
  font-size:17px!important;
  line-height:1!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  padding:0 22px!important;
}

/* Main grid: give BCA/payment card enough room on wide screens */
html body:not(.admin-page) .payment-view-polished-v27 .payment-result-grid-final,
html body:not(.admin-page) .payment-view-polished-v27 .payment-result-grid-oneview{
  grid-template-columns:minmax(330px,.9fr) minmax(420px,1.1fr)!important;
  gap:18px!important;
  align-items:start!important;
}

/* BCA card: clean rows, no cramped/broken values */
html body:not(.admin-page) .payment-view-polished-v27 .payment-instruction-card,
html body:not(.admin-page) .payment-view-polished-v27 .payment-method-bca{
  min-width:0!important;
  padding:18px!important;
}
html body:not(.admin-page) .payment-view-polished-v27 .payment-card-head,
html body:not(.admin-page) .payment-view-polished-v27 .payment-card-head-minimal{
  margin-bottom:14px!important;
}
html body:not(.admin-page) .payment-view-polished-v27 .payment-card-head b,
html body:not(.admin-page) .payment-view-polished-v27 .payment-card-head-minimal b{
  font-size:17px!important;
  line-height:1.15!important;
  text-align:right!important;
  white-space:nowrap!important;
}
html body:not(.admin-page) .payment-view-polished-v27 .payment-box,
html body:not(.admin-page) .payment-view-polished-v27 .payment-box-compact{
  border-radius:16px!important;
  overflow:hidden!important;
}
html body:not(.admin-page) .payment-view-polished-v27 .payment-line{
  display:grid!important;
  grid-template-columns:minmax(120px,.95fr) minmax(128px,1.05fr)!important;
  align-items:center!important;
  gap:14px!important;
  padding:13px 14px!important;
}
html body:not(.admin-page) .payment-view-polished-v27 .payment-line span{
  font-size:12px!important;
  line-height:1.35!important;
  font-weight:760!important;
}
html body:not(.admin-page) .payment-view-polished-v27 .payment-line b{
  font-size:15.5px!important;
  line-height:1.25!important;
  font-weight:950!important;
  text-align:right!important;
  overflow-wrap:anywhere!important;
}

/* Copy buttons: never split words/letters */
html body:not(.admin-page) .payment-view-polished-v27 .payment-copy-actions,
html body:not(.admin-page) .payment-view-polished-v27 .compact-actions{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:10px!important;
  margin-top:16px!important;
}
html body:not(.admin-page) .payment-view-polished-v27 .payment-copy-actions .btn,
html body:not(.admin-page) .payment-view-polished-v27 .compact-actions .btn{
  width:100%!important;
  min-width:0!important;
  min-height:48px!important;
  padding:0 14px!important;
  border-radius:999px!important;
  font-size:14px!important;
  line-height:1.05!important;
  font-weight:950!important;
  letter-spacing:.01em!important;
  white-space:nowrap!important;
  word-break:keep-all!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
}

/* Summary typography: consistent and not too loud */
html body:not(.admin-page) .payment-view-polished-v27 .created-order-summary h3,
html body:not(.admin-page) .payment-view-polished-v27 .created-order-summary h4,
html body:not(.admin-page) .payment-view-polished-v27 .payment-summary-title{
  font-size:22px!important;
  line-height:1.12!important;
}
html body:not(.admin-page) .payment-view-polished-v27 .created-order-summary b,
html body:not(.admin-page) .payment-view-polished-v27 .payment-summary-row b{
  font-size:15px!important;
}
html body:not(.admin-page) .payment-view-polished-v27 .created-summary-total b,
html body:not(.admin-page) .payment-view-polished-v27 .payment-summary-total b,
html body:not(.admin-page) .payment-view-polished-v27 .estimated-total b{
  font-size:20px!important;
}

/* Finish button */
html body:not(.admin-page) .payment-view-polished-v27 [data-finish-order]{
  width:min(360px,100%)!important;
  min-height:54px!important;
  font-size:17px!important;
  white-space:nowrap!important;
}

/* Tablet/narrow popup: stack layout to prevent cramped BCA card/buttons */
@media(max-width:980px){
  html body:not(.admin-page) .modal[data-checkout].open .checkout-pro.is-payment-view{
    width:min(760px,94vw)!important;
  }
  html body:not(.admin-page) .payment-view-polished-v27 .payment-result-grid-final,
  html body:not(.admin-page) .payment-view-polished-v27 .payment-result-grid-oneview{
    grid-template-columns:1fr!important;
  }
  html body:not(.admin-page) .payment-view-polished-v27 .payment-created-card-final,
  html body:not(.admin-page) .payment-created-card-final{
    grid-template-columns:1fr!important;
  }
  html body:not(.admin-page) .payment-view-polished-v27 .payment-created-actions{
    grid-template-columns:1fr 1fr!important;
  }
  html body:not(.admin-page) .payment-view-polished-v27 .payment-copy-actions,
  html body:not(.admin-page) .payment-view-polished-v27 .compact-actions{
    grid-template-columns:1fr 1fr!important;
  }
}

/* Mobile: one column buttons and compact top */
@media(max-width:620px){
  html body:not(.admin-page) .modal[data-checkout].open .checkout-pro.is-payment-view{
    width:100vw!important;
    height:100dvh!important;
    max-height:100dvh!important;
    border-radius:0!important;
  }
  html body:not(.admin-page) .modal[data-checkout].open .checkout-pro.is-payment-view .payment-result{
    padding:14px 14px calc(116px + env(safe-area-inset-bottom))!important;
  }
  html body:not(.admin-page) .payment-view-polished-v27 .payment-created-card-final,
  html body:not(.admin-page) .payment-created-card-final{
    padding:16px!important;
  }
  html body:not(.admin-page) .payment-view-polished-v27 .payment-created-copy strong,
  html body:not(.admin-page) .payment-created-card-final .payment-created-copy strong{
    font-size:27px!important;
  }
  html body:not(.admin-page) .payment-view-polished-v27 .payment-created-actions,
  html body:not(.admin-page) .payment-view-polished-v27 .payment-copy-actions,
  html body:not(.admin-page) .payment-view-polished-v27 .compact-actions{
    grid-template-columns:1fr!important;
  }
  html body:not(.admin-page) .payment-view-polished-v27 .payment-copy-actions .btn,
  html body:not(.admin-page) .payment-view-polished-v27 .compact-actions .btn,
  html body:not(.admin-page) .payment-view-polished-v27 .btn-copy-order-mini,
  html body:not(.admin-page) .payment-view-polished-v27 .payment-countdown-pill,
  html body:not(.admin-page) .payment-view-polished-v27 .payment-countdown-card{
    min-height:46px!important;
    font-size:14.5px!important;
  }
  html body:not(.admin-page) .payment-view-polished-v27 .payment-line{
    grid-template-columns:1fr!important;
    gap:5px!important;
  }
  html body:not(.admin-page) .payment-view-polished-v27 .payment-line b{
    text-align:left!important;
  }
}


/* =========================================================
   AGS V31 Welcome Popup 24h Frequency
   Popup reappears only after 24 hours when user clicks Nanti Saja/Maybe Later.
   ========================================================= */
[data-welcome-popup].sk-hiding{
  pointer-events:none!important;
}


/* =========================================================
   AGS V32 Product Detail Recommendations — 2026-06-15
   Adds "Mungkin Kamu Suka" section below #product-detail.
   ========================================================= */
body:not(.admin-page) .related-products-section{
  padding-top:clamp(26px,4vw,54px)!important;
  padding-bottom:clamp(42px,6vw,82px)!important;
}
body:not(.admin-page) .related-products-head{
  align-items:flex-end!important;
  gap:18px!important;
  margin-bottom:18px!important;
}
body:not(.admin-page) .related-products-head h2{
  max-width:760px!important;
}
body:not(.admin-page) .related-products-desc{
  max-width:680px!important;
  margin:8px 0 0!important;
  color:rgba(0,0,0,.58)!important;
  font-size:15px!important;
  line-height:1.55!important;
  font-weight:600!important;
}
body:not(.admin-page) .related-products-row{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:clamp(12px,2vw,20px)!important;
  align-items:stretch!important;
}
body:not(.admin-page) .related-product-card{
  min-width:0!important;
  height:100%!important;
  background:#fff!important;
  border:1px solid rgba(0,0,0,.08)!important;
  border-radius:22px!important;
  padding:10px!important;
  box-shadow:0 18px 48px rgba(0,0,0,.06)!important;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease!important;
}
body:not(.admin-page) .related-product-card:hover{
  transform:translateY(-2px)!important;
  border-color:rgba(0,0,0,.16)!important;
  box-shadow:0 24px 58px rgba(0,0,0,.10)!important;
}
body:not(.admin-page) .related-product-card .product-art{
  border-radius:18px!important;
}
body:not(.admin-page) .related-product-card > b{
  display:block!important;
  margin:12px 6px 3px!important;
  color:#050505!important;
  font-size:15px!important;
  line-height:1.2!important;
  font-weight:950!important;
}
body:not(.admin-page) .related-product-card > small{
  display:block!important;
  margin:0 6px 8px!important;
  color:rgba(0,0,0,.55)!important;
  font-size:12px!important;
  line-height:1.35!important;
  font-weight:650!important;
}
body:not(.admin-page) .related-product-card .mini-price{
  margin:0 6px 4px!important;
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  flex-wrap:wrap!important;
}
body:not(.admin-page) .related-product-card .mini-price strong{
  color:#050505!important;
  font-size:14px!important;
  font-weight:950!important;
}
body:not(.admin-page) .related-product-card .mini-price del{
  color:rgba(0,0,0,.34)!important;
  font-size:12px!important;
  font-weight:700!important;
}
@media(max-width:1020px){
  body:not(.admin-page) .related-products-row{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
}
@media(max-width:720px){
  body:not(.admin-page) .related-products-head{
    align-items:flex-start!important;
  }
  body:not(.admin-page) .related-products-row{
    display:flex!important;
    overflow-x:auto!important;
    gap:12px!important;
    padding:2px 0 12px!important;
    scroll-snap-type:x mandatory!important;
    -webkit-overflow-scrolling:touch!important;
  }
  body:not(.admin-page) .related-product-card{
    flex:0 0 min(72vw,260px)!important;
    scroll-snap-align:start!important;
  }
  body:not(.admin-page) .related-products-row::-webkit-scrollbar{
    height:6px!important;
  }
  body:not(.admin-page) .related-products-row::-webkit-scrollbar-thumb{
    background:rgba(0,0,0,.18)!important;
    border-radius:999px!important;
  }
}
@media(max-width:460px){
  body:not(.admin-page) .related-product-card{
    flex-basis:78vw!important;
  }
  body:not(.admin-page) .related-products-desc{
    font-size:13px!important;
  }
}


/* =========================================================
   AGS V33 Product Detail Recommendation Spacing Tight — 2026-06-15
   Reduces excessive gap between #product-detail and "Mungkin Kamu Suka".
   ========================================================= */
body:not(.admin-page) #product-detail.product-detail-section{
  padding-bottom:clamp(18px,2.8vw,34px)!important;
  margin-bottom:0!important;
}
body:not(.admin-page) #product-detail .product-detail-card{
  margin-bottom:0!important;
}
body:not(.admin-page) #product-detail + .related-products-section{
  margin-top:0!important;
  padding-top:clamp(14px,2.2vw,28px)!important;
}
body:not(.admin-page) .related-products-section{
  padding-top:clamp(14px,2.2vw,28px)!important;
}
body:not(.admin-page) .related-products-head{
  margin-bottom:clamp(14px,2vw,20px)!important;
}
body:not(.admin-page) .related-products-head h2{
  margin-top:4px!important;
}
@media(max-width:760px){
  body:not(.admin-page) #product-detail.product-detail-section{
    padding-bottom:18px!important;
  }
  body:not(.admin-page) #product-detail + .related-products-section,
  body:not(.admin-page) .related-products-section{
    padding-top:12px!important;
  }
}


/* =========================================================
   AGS V35 Related Products: 1 Row / 4 Products Only — 2026-06-15
   Keeps recommendation section compact below product detail.
   ========================================================= */
body:not(.admin-page) .related-products-row{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:clamp(12px,1.6vw,18px)!important;
  align-items:stretch!important;
  overflow:visible!important;
}
body:not(.admin-page) .related-products-row .related-product-card:nth-child(n+5){
  display:none!important;
}
body:not(.admin-page) .related-product-card{
  width:100%!important;
  min-width:0!important;
}
body:not(.admin-page) .related-products-section{
  padding-bottom:clamp(38px,5vw,68px)!important;
}
body:not(.admin-page) .related-products-desc{
  max-width:620px!important;
}
@media(max-width:1020px){
  body:not(.admin-page) .related-products-row{
    grid-template-columns:repeat(4,minmax(180px,1fr))!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scroll-snap-type:x mandatory!important;
    -webkit-overflow-scrolling:touch!important;
    padding-bottom:10px!important;
  }
  body:not(.admin-page) .related-product-card{
    scroll-snap-align:start!important;
  }
}
@media(max-width:720px){
  body:not(.admin-page) .related-products-row{
    display:flex!important;
    flex-wrap:nowrap!important;
    gap:12px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    padding:2px 0 12px!important;
  }
  body:not(.admin-page) .related-product-card{
    flex:0 0 min(72vw,260px)!important;
  }
}
@media(max-width:460px){
  body:not(.admin-page) .related-product-card{
    flex-basis:78vw!important;
  }
}