:root {
  color-scheme: light;
  --ink: #211b31;
  --paper: #fffdf9;
  --canvas: #eee8ff;
  --primary: #159da0;
  --primary-soft: #bce8e5;
  --accent: #ffdc58;
  --line: 3px solid var(--ink);
  --shadow-sm: 3px 3px 0 var(--ink);
  --shadow: 5px 5px 0 var(--ink);
  --shadow-lg: 7px 7px 0 var(--ink);
  --radius: 18px;
}
[data-theme="biru"] { --primary:#3282d9; --primary-soft:#c9e1ff; --accent:#0000ff; }
[data-theme="hijau"] { --primary:#159da0; --primary-soft:#bce8e5; --accent:#00ff00; }
[data-theme="ungu"] { --primary:#7050ee; --primary-soft:#ded5ff; --accent:#9933ff; }
[data-theme="merah"] { --primary:#d83d83; --primary-soft:#f6c9dd; --accent:#ff0000; }
[data-theme="kuning"] { --primary:#ed6a24; --primary-soft:#ffe0c8; --accent:#ffdc58; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 100px; }
body {
  margin: 0; min-height: 100vh; overflow-x: clip;
  color: var(--ink); font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  background-color: var(--canvas);
  background-image: linear-gradient(rgba(33,27,49,.065) 1px, transparent 1px), linear-gradient(90deg, rgba(33,27,49,.065) 1px, transparent 1px);
  background-size: 36px 36px; background-attachment: fixed; background-position: 0 0;
  padding-top: 90px; padding-bottom: 105px;
}
h1,h2,h3,h4,h5,.font-display { font-family: "Space Grotesk", Inter, sans-serif; letter-spacing: -.025em; }
button,input,select,textarea { font: inherit; }
button,a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
button:disabled { opacity: .55; cursor: not-allowed; transform: none !important; box-shadow: var(--shadow-sm) !important; }
::selection { color: var(--ink); background: var(--accent); }
:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; }
.neo-box,.neo-box-lg,.neo-btn {
  border: var(--line) !important; border-color: var(--ink) !important;
  border-radius: var(--radius) !important; transition: transform .16s ease, box-shadow .16s ease, background-color .18s ease, border-color .18s ease;
}
.neo-box { box-shadow: var(--shadow-sm); }
.neo-box-lg { box-shadow: var(--shadow-lg); }
.neo-btn { box-shadow: var(--shadow); font-weight: 750; user-select: none; }
.neo-btn:hover { transform: translate(-2px,-2px); box-shadow: 7px 7px 0 var(--ink); }
.neo-btn:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 var(--ink); }
.bg-white { background-color: var(--paper) !important; }
.bg-gray-50,.bg-gray-100 { background-color: #f5f1ff !important; }
.bg-gray-200 { background-color: #e4def3 !important; }
.bg-gray-300 { background-color: #d4cde6 !important; }
.bg-yellow-100,.bg-yellow-200,.bg-yellow-300,.bg-yellow-400 { background-color: var(--accent) !important; }
.bg-emerald-100,.bg-emerald-200,.bg-emerald-300,.bg-emerald-400 { background-color: var(--primary-soft) !important; }
.bg-blue-100,.bg-blue-200,.bg-blue-300 { background-color: #c9e1ff !important; }
.bg-purple-100,.bg-purple-200,.bg-purple-300 { background-color: #ded5ff !important; }
.bg-red-100,.bg-red-200,.bg-red-300,.bg-red-400 { background-color: #f6c9dd !important; }
.bg-theme { background-color: var(--primary) !important; color: var(--ink) !important; }
.bg-theme-light { background-color: var(--primary-soft) !important; }
.text-theme { color: color-mix(in srgb, var(--primary) 65%, var(--ink)) !important; }
.bg-theme svg.stroke-white { stroke: var(--ink) !important; }
.border-theme { border-color: var(--primary) !important; }
.text-gray-900,.text-gray-800,.text-gray-700,.text-gray-600,.text-gray-500 { color: #625b73 !important; }
.text-black { color: var(--ink) !important; }
.border-black { border-color: var(--ink) !important; }
.shadow-\[2px\_2px\_0\_\#111\],.shadow-\[3px\_3px\_0\_\#111\],.shadow-\[4px\_4px\_0\_\#111111\] { --tw-shadow: var(--shadow-sm) !important; box-shadow: var(--shadow-sm) !important; }
header.fixed { background: var(--accent) !important; border-color: var(--ink) !important; box-shadow: 0 5px 0 var(--ink) !important; }
nav.fixed { background: var(--paper) !important; border-color: var(--ink) !important; box-shadow: 0 -5px 0 var(--ink) !important; padding-bottom: max(8px, env(safe-area-inset-bottom)); }
#sidebar-drawer { background: var(--paper); border-color: var(--ink); }
#sidebar-overlay { backdrop-filter: blur(3px); }
.sidebar-link { border-color: var(--ink) !important; }
#theme-dropdown-menu { background: var(--paper) !important; border-color: var(--ink) !important; }
#app-router-view { padding-top: 18px; }
#app-router-view > * { min-width: 0; }
#app-router-view section,.page-enter { animation: pageEnter .32s cubic-bezier(.2,.8,.2,1) both; }
input:not([type="checkbox"]):not([type="radio"]),select,textarea {
  max-width: 100%; color: var(--ink); background: var(--paper) !important;
  border: 2px solid var(--ink) !important; border-radius: 12px !important;
}
input::placeholder,textarea::placeholder { color: #827a92; opacity: 1; }
input:focus,select:focus,textarea:focus { border-color: var(--primary) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent); outline: 0; }
input[type="checkbox"],input[type="radio"] { accent-color: var(--primary); }
table { border-color: var(--ink); }
th,td { border-color: #d8d1e7; }
img { max-width: 100%; }
.product-card { cursor: pointer; }
.product-card img { background: var(--primary-soft); }
.product-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
#chess-board { overflow: hidden; border: 4px solid var(--ink) !important; border-radius: 16px !important; box-shadow: var(--shadow-lg) !important; }
#chess-board button { min-width: 0; aspect-ratio: 1; border: 0; display: flex; align-items: center; justify-content: center; font-size: clamp(1.25rem, 6vw, 2.6rem); line-height: 1; }
#chess-board .chess-square-light { background: #fff8e7 !important; }
#chess-board .chess-square-dark { background: #a8d9d4 !important; color: var(--ink); }
#chess-board .chess-square-selected { background: var(--accent) !important; outline: 3px solid var(--ink); outline-offset: -4px; }
#chess-board button:focus-visible { outline: 3px solid #7050ee; outline-offset: -4px; z-index: 1; }
.ttt-cell { min-width: 0; border-radius: 14px !important; font-size: clamp(2rem, 10vw, 4rem) !important; }
#ttt-grid { max-width: min(100%, 360px); }
#ttt-status { max-width: 100%; text-align: center; }
#modal-qris-gateway { background: rgba(33,27,49,.68) !important; backdrop-filter: blur(5px); }
#modal-qris-gateway > div { background: var(--paper) !important; color: var(--ink) !important; border-color: var(--ink) !important; border-radius: 24px !important; box-shadow: 9px 9px 0 var(--ink) !important; }
#modal-qris-gateway [class*="bg-[#181d2a]"],#modal-qris-gateway [class*="bg-[#10141e]"],#modal-qris-gateway [class*="bg-[#0c0f17]"],#modal-qris-gateway [class*="bg-[#1f1b2e]"] { background: #f5f1ff !important; color: var(--ink) !important; border-color: #d2c9e5 !important; }
#modal-testi-detail > div { background: var(--paper) !important; color: var(--ink) !important; border-color: var(--ink) !important; border-radius: 24px !important; box-shadow: 9px 9px 0 var(--ink) !important; }
#modal-testi-detail .text-white,#modal-testi-detail .text-gray-300,#modal-testi-detail .text-gray-200 { color: var(--ink) !important; }
#modal-qris-gateway .text-white,#modal-qris-gateway .text-gray-300,#modal-qris-gateway .text-gray-200 { color: var(--ink) !important; }
#modal-qris-gateway .text-blue-400 { color: var(--primary) !important; }
#qris-image-container { background: white; border-radius: 10px; }
#qris-validation-error { color: #a61e55 !important; }
#toast-container > div { border-color: var(--ink) !important; box-shadow: var(--shadow) !important; border-radius: 14px !important; }
@keyframes neoFloat { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-7px) rotate(2deg); } }
@keyframes neoSpinSlow { to { transform: rotate(360deg); } }
@keyframes marqueeScroll { to { transform: translateX(-50%); } }
@keyframes pageEnter { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes toastSlideIn { from { opacity: 0; transform: translateY(-10px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes toastSlideOut { to { opacity: 0; transform: translateY(-8px) scale(.98); } }
.anim-float { animation: neoFloat 4s ease-in-out infinite; }
.anim-float-delayed { animation: neoFloat 4.6s ease-in-out 1.2s infinite; }
.anim-spin-slow { animation: neoSpinSlow 26s linear infinite; }
.marquee-track { display: flex; width: max-content; animation: marqueeScroll 28s linear infinite; }
.page-enter { animation: pageEnter .28s cubic-bezier(.16,1,.3,1) both; }
.toast-enter { animation: toastSlideIn .18s ease-out both; }
.toast-exit { animation: toastSlideOut .16s ease-in both; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #f5f1ff; border-left: 2px solid var(--ink); }
::-webkit-scrollbar-thumb { background: #b7afcc; border: 2px solid #f5f1ff; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--primary); }

@media (max-width: 640px) {
  body { padding-top: 84px; padding-bottom: 0; background-size: 28px 28px; }
  header.fixed { padding-left: 10px; padding-right: 10px; }
  #app-router-view { padding-left: 12px; padding-right: 12px; }
  .neo-box-lg { box-shadow: 5px 5px 0 var(--ink); }
  .neo-btn { box-shadow: 3px 3px 0 var(--ink); }
  .neo-btn:hover { box-shadow: 4px 4px 0 var(--ink); }
  nav.fixed .nav-bottom-item { min-height: 54px; }
  #modal-qris-gateway { align-items: flex-start; }
  #modal-qris-gateway > div { margin-top: 10px; margin-bottom: 10px; }
  h1 { overflow-wrap: anywhere; }
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}
.bg-blue-600 { background-color: #c9e1ff !important; color: var(--ink) !important; }
.bg-purple-600 { background-color: #ded5ff !important; color: var(--ink) !important; }
.bg-emerald-500,.bg-green-400 { background-color: #9bd8d3 !important; color: var(--ink) !important; }
.bg-red-500 { background-color: #e9b2cb !important; color: var(--ink) !important; }
.bg-gray-700,.bg-gray-800 { background-color: #e4def3 !important; color: var(--ink) !important; }
.bg-yellow-50 { background-color: #fff8e7 !important; }
.text-blue-400,.text-blue-700,.text-purple-200,.text-purple-700,.text-emerald-700 { color: color-mix(in srgb, var(--primary) 60%, var(--ink)) !important; }
.text-red-400,.text-red-600,.text-red-700 { color: #a61e55 !important; }

#modal-testi-detail [class*="bg-[#181d2a]"],#modal-testi-detail [class*="bg-[#10141e]"],#modal-testi-detail [class*="bg-[#0c0f17]"],#modal-testi-detail [class*="bg-[#1f1b2e]"] { background: #f5f1ff !important; color: var(--ink) !important; border-color: #d2c9e5 !important; }
.brand-wordmark > span:first-child {
  font-family: "Playfair Display", Georgia, serif !important;
  font-weight: 900 !important;
  letter-spacing: -.045em !important;
  font-size: clamp(1.12rem, 4vw, 1.55rem) !important;
  line-height: 1.02 !important;
}
.brand-wordmark > span:last-child {
  font-family: "DM Sans", Inter, sans-serif !important;
  font-size: .62rem !important;
  letter-spacing: .16em !important;
  font-weight: 800 !important;
}
body { font-family: "DM Sans", Inter, ui-sans-serif, system-ui, sans-serif; }
h1,h2,h3,h4,h5,.font-display { font-family: "Space Grotesk", "DM Sans", sans-serif; }
.category-strip {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  flex-wrap: nowrap !important;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--primary) transparent;
  padding: 8px 6px 14px 3px;
  scroll-snap-type: x proximity;
}
.category-strip .filter-category-btn {
  flex: 0 0 auto;
  scroll-snap-align: start;
  min-height: 44px;
  padding: 10px 20px !important;
  border-radius: 999px !important;
  font-size: .78rem !important;
  letter-spacing: .015em;
}
.category-strip::-webkit-scrollbar { height: 5px; }
.category-strip::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 999px; }
.category-strip::-webkit-scrollbar-track { background: transparent; }
#app-router-view h1 { text-wrap: balance; line-height: 1.08; }
#app-router-view h2, #app-router-view h3 { text-wrap: pretty; }
#app-router-view p { line-height: 1.65; }
#app-router-view .page-enter { padding-top: 8px; }
@media (max-width: 640px) {
  #app-router-view { padding-left: 14px; padding-right: 14px; }
  .brand-wordmark > span:last-child { font-size: .54rem !important; letter-spacing: .13em !important; }
  .category-strip .filter-category-btn { padding: 9px 17px !important; }
}
.product-card,
.testi-card {
  position: relative;
  min-width: 0;
  overflow: visible;
  border: 3px solid var(--ink) !important;
  box-shadow: 7px 7px 0 #000 !important;
  transition: transform .22s ease, box-shadow .22s ease, opacity .28s ease;
  will-change: transform, opacity;
}
.product-card {
  background: var(--accent) !important;
  transform-origin: center center;
  margin: 4px 3px 8px;
}
.product-card:nth-child(odd) { --card-tilt: -1.25deg; }
.product-card:nth-child(even) { --card-tilt: 1deg; }
.product-card.is-visible { transform: rotate(var(--card-tilt, -1deg)); }
.product-card:hover { transform: translateY(-3px) rotate(var(--card-tilt, -1deg)); box-shadow: 9px 10px 0 #000 !important; }
.product-art { border: 3px solid var(--ink) !important; border-radius: 18px !important; box-shadow: 4px 4px 0 #000; }
.product-art img { display: block; object-fit: cover; }
.product-name-pill,
.product-description-pill,
.testi-name-pill,
.testi-price-pill {
  width: fit-content;
  max-width: 100%;
  min-width: 0;
  overflow-wrap: anywhere;
  white-space: pre-line;
  border: 3px solid var(--ink);
  border-radius: 999px;
  box-shadow: 4px 4px 0 #000;
  padding: 9px 15px;
  line-height: 1.25;
}
.product-name-pill { background: var(--paper); display: inline-flex; align-items: flex-start; gap: 10px; }
.product-name-pill::before,
.testi-product-name::before { content: ""; display: inline-block; flex: 0 0 12px; width: 12px; height: 12px; margin-top: .34em; border-radius: 50%; background: #000; }
.product-description-pill { background: var(--paper); border: 0 !important; box-shadow: none !important; border-radius: 0 !important; padding: 4px 2px !important; width: 100%; }
.product-actions { width: 100%; margin-top: auto; }
.product-action { min-width: 0; min-height: 48px; border-radius: 999px !important; box-shadow: 4px 4px 0 #000 !important; }
.product-action span { min-width: 0; overflow-wrap: anywhere; }
.product-action:hover { transform: translateY(-2px) rotate(-1deg); box-shadow: 6px 6px 0 #000 !important; }

.testi-grid { min-width: 0; }
.testi-card {
  display: grid;
  grid-template-columns: minmax(108px, 31%) minmax(0, 1fr);
  align-items: stretch;
  gap: clamp(12px, 2.5vw, 24px);
  background: var(--accent) !important;
  margin: 4px 4px 9px;
  transform-origin: center center;
}
.testi-card:nth-of-type(odd) { --card-tilt: -1deg; }
.testi-card:nth-of-type(even) { --card-tilt: 1deg; }
.testi-card.is-visible { transform: rotate(var(--card-tilt, -1deg)); }
.testi-card:hover { transform: translateY(-2px) rotate(var(--card-tilt, -1deg)); box-shadow: 9px 9px 0 #000 !important; }
.testi-proof {
  display: block;
  position: relative;
  align-self: center;
  width: 100%;
  min-width: 0;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 17px;
  box-shadow: 4px 4px 0 #000;
  padding: 0;
  cursor: pointer;
}
.testi-proof img { width: 100%; height: 100%; object-fit: cover; display: block; }
.testi-info { min-width: 0; align-self: stretch; display: flex; flex-direction: column; align-items: flex-start; }
.testi-name-pill { background: var(--primary); color: #fff; font-size: clamp(.9rem, 2.3vw, 1.25rem); display: inline-flex; align-items: flex-start; gap: 10px; width: fit-content; max-width: 100%; min-width: 0; padding: 9px 15px; border: 3px solid var(--ink); border-radius: 999px; box-shadow: 4px 4px 0 #000; line-height: 1.25; text-align: left; white-space: normal; overflow-wrap: anywhere; }
.testi-name-pill > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.testi-name-dot { display: inline-block; flex: 0 0 12px; width: 12px; height: 12px; margin-top: .28em; border-radius: 50%; background: #000; }
.testi-product-name { display: flex; align-items: flex-start; gap: 9px; width: fit-content; max-width: 100%; min-width: 0; overflow-wrap: anywhere; white-space: normal; color: var(--ink); font-size: clamp(.9rem, 2.3vw, 1.2rem); line-height: 1.3; }
.testi-product-name::before { flex-basis: 10px; width: 10px; height: 10px; margin-top: .38em; }
.testi-posted { max-width: 100%; overflow-wrap: anywhere; font-size: .72rem; font-weight: 800; line-height: 1.35; }
.testi-posted span { display: block; margin-top: 3px; color: #625b73; font: 600 .68rem/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; }
.testi-role { max-width: 100%; overflow-wrap: anywhere; font-size: .72rem; font-weight: 700; color: #625b73; }
.testi-price-pill { background: #f6c9dd; font-weight: 900; font-size: clamp(1rem, 2.7vw, 1.45rem); }
.testi-details-btn { display: inline-flex; align-self: flex-end; margin-top: auto; width: fit-content; max-width: 100%; align-items: center; justify-content: center; gap: 9px; background: var(--primary-soft) !important; color: var(--ink) !important; border-radius: 999px !important; box-shadow: 4px 4px 0 #000 !important; white-space: nowrap; }
.testi-details-btn span { line-height: 1; }
.testi-arrow { width: 22px; height: 22px; flex: 0 0 auto; animation: detailsArrowNudge 1s ease-in-out infinite alternate; }
.testi-day-separator { position: relative; z-index: 1; }
.fall-reveal { opacity: 0; transform: translateY(-34px) rotate(0deg); }
.fall-reveal.is-visible { animation: fallCardDrop .68s cubic-bezier(.18,.82,.25,1.12) both; }
.reveal-piece { opacity: 0; transform: translateY(-25px); }
.fall-reveal.is-visible .reveal-piece { animation: fallPieceDrop .52s cubic-bezier(.18,.82,.25,1.15) both; }
.reveal-piece-1 { animation-delay: 0s !important; }
.reveal-piece-2 { animation-delay: .07s !important; }
.reveal-piece-3 { animation-delay: .13s !important; }
.reveal-piece-4 { animation-delay: .19s !important; }
.reveal-piece-5 { animation-delay: .25s !important; }
@keyframes fallCardDrop {
  0% { opacity: 0; transform: translateY(-34px) rotate(0deg); }
  72% { opacity: 1; transform: translateY(3px) rotate(calc(var(--card-tilt, -1deg) * 1.35)); }
  100% { opacity: 1; transform: translateY(0) rotate(var(--card-tilt, -1deg)); }
}
@keyframes fallPieceDrop {
  0% { opacity: 0; transform: translateY(-25px); }
  75% { opacity: 1; transform: translateY(2px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes detailsArrowNudge {
  from { transform: translateX(-3px); }
  to { transform: translateX(4px); }
}
@media (max-width: 480px) {
  .product-card { padding: 12px !important; gap: 13px !important; }
  .product-name-pill, .testi-name-pill, .testi-price-pill { padding: 8px 11px; }
  .testi-name-pill { gap: 8px; }
  .testi-name-dot { flex-basis: 10px; width: 10px; height: 10px; }
  .product-description-pill { padding: 4px 2px !important; }
  .product-action { padding-left: 8px !important; padding-right: 8px !important; gap: 6px !important; font-size: .65rem !important; }
  .testi-card { grid-template-columns: minmax(92px, 32%) minmax(0, 1fr); gap: 11px; padding: 10px !important; }
  .testi-proof { border-radius: 13px; }
  .testi-posted { font-size: .65rem; }
  .testi-posted span, .testi-role { font-size: .6rem; }
  .testi-details-btn { padding: 8px 11px !important; gap: 6px; font-size: .7rem; }
  .testi-arrow { width: 18px; height: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .fall-reveal, .fall-reveal.is-visible, .fall-reveal.is-visible .reveal-piece, .testi-arrow { animation: none !important; transition: none !important; }
  .fall-reveal, .reveal-piece { opacity: 1; transform: none; }
}
.product-carousel{display:block;width:100%;max-width:100%;overflow-x:auto;overflow-y:visible;scroll-snap-type:x mandatory;scroll-behavior:smooth;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch;touch-action:pan-x pan-y;}
.product-carousel::-webkit-scrollbar{display:none}
.product-track{display:flex;flex-flow:row nowrap;align-items:stretch;gap:0;width:100%;} .product-row{width:100%;min-width:0;}
.product-page{box-sizing:border-box;flex:0 0 100%;width:100%;min-width:100%;max-width:100%;scroll-snap-align:start;scroll-snap-stop:always;}
.product-page-grid{display:grid;grid-template-columns:minmax(0,1fr);align-items:stretch;gap:0;padding:8px 10px 12px;width:100%;box-sizing:border-box;max-width:760px;margin:0 auto;}
.product-page-grid>.product-card{min-width:0;width:100%;}
.product-dots{display:flex;justify-content:center;align-items:center;gap:.5rem;padding:.75rem 0 .25rem}
.product-dot{width:7px;height:7px;border-radius:999px;background:#a3a3a3;border:1px solid #111;transition:width .2s,background .2s;padding:0;flex:none}
.product-dot.active{width:20px;background:#111}
@media(max-width:520px){.product-page-grid{grid-template-columns:minmax(0,1fr);gap:0;padding:7px 8px 12px}.product-page-grid .product-card{padding:12px !important;gap:13px !important}.product-page-grid .product-art{aspect-ratio:4/3}.product-page-grid .product-name-pill{font-size:clamp(.9rem,4vw,1.1rem);line-height:1.25;padding:8px 9px}.product-page-grid .product-description-pill{font-size:clamp(.82rem,3.5vw,.98rem);line-height:1.55;overflow-wrap:anywhere}.product-page-grid .product-actions{gap:.55rem}.product-page-grid .product-action{min-width:0;min-height:46px;padding:.7rem .4rem;font-size:clamp(.65rem,2.8vw,.8rem);gap:5px}.product-page-grid .product-action span{overflow-wrap:anywhere}}

.fall-real-footer {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-bottom: 16px !important;
  color: #171717 !important;
  background: #bcebd8 !important;
  border-top: 4px solid #171717 !important;
  box-shadow: 0 -5px 0 #171717;
}
.fall-real-footer::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .24;
  background-image: radial-gradient(#171717 1.3px, transparent 1.3px);
  background-size: 14px 14px;
}
.fall-real-footer > * { position: relative; z-index: 1; }
.fall-real-footer a { min-height: 46px; }
.fall-real-footer a:focus-visible { outline: 3px solid #171717; outline-offset: 3px; }
@media (max-width: 640px) { .fall-real-footer { padding-bottom: 16px !important; } }

html, body { width: 100%; max-width: 100%; }
html { overflow-x: clip; }
body { min-height: 100vh; min-height: 100dvh; overflow-x: clip; }
#app-router-view, #app-router-view > *, .home-page-layout, .product-row, .product-carousel, .product-track, .product-page { min-width: 0; max-width: 100%; }
#app-router-view { box-sizing: border-box; }
.home-page-layout { display:flex; flex-direction:column; min-height:calc(100dvh - 84px - 102px - 18px); gap:0 !important; row-gap:0 !important; }
.home-page-layout > section:first-child { margin-bottom: 28px !important; }
.home-page-layout > section:nth-child(2) { margin-bottom: 28px !important; }
.home-page-layout > .fall-real-footer { margin-top:auto !important; margin-bottom:0 !important; flex-shrink:0; position:relative; width:auto; max-width:none; }
.fall-real-footer { box-sizing:border-box; padding-top:30px !important; padding-bottom:22px !important; border-bottom:0 !important; }
.product-row { position:relative; }
.product-slide-arrow { position:absolute; z-index:5; right:2px; top:50%; transform:translateY(-50%); width:42px; height:48px; display:flex; align-items:center; justify-content:center; border:3px solid var(--ink); border-radius:12px; background:var(--accent); color:var(--ink); box-shadow:3px 3px 0 var(--ink); transition:left .18s, right .18s, transform .18s, background .18s; }
.product-slide-arrow svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.product-slide-arrow.is-prev { right:auto; left:2px; background:#bcebd8; }
.product-slide-arrow:active { transform:translateY(calc(-50% + 2px)); box-shadow:1px 1px 0 var(--ink); }
.product-slide-arrow[hidden] { display:none !important; }
@media(max-width:640px) {
  body { padding-top:84px !important; padding-bottom:calc(88px + env(safe-area-inset-bottom)) !important; }
  #app-router-view { padding-left:12px; padding-right:12px; padding-bottom:0 !important; }
  #app-router-view:has(.home-page-layout) { padding-top:0 !important; }
  .home-page-layout { min-height:calc(100dvh - 84px - 100px - env(safe-area-inset-bottom)) !important; padding-top:16px !important; padding-bottom:0 !important; }
  .home-page-layout > .fall-real-footer { margin-bottom:0 !important; padding-left:18px !important; padding-right:18px !important; }
  .product-slide-arrow { width:36px; height:42px; right:1px; }
  .product-slide-arrow.is-prev { left:1px; right:auto; }
  .product-page-grid { padding-left:6px; padding-right:6px; }
  img, video, canvas, iframe { max-width:100%; }
}
@media (prefers-reduced-motion: reduce) { .product-slide-arrow { transition:none; } }

#theme-dropdown-menu .theme-choice-btn.bg-yellow-200,
#theme-dropdown-menu .theme-choice-btn:has(.active-tick:not(.hidden)) {
  background-color: #ffdc58 !important;
  color: #211b31 !important;
}
#theme-dropdown-menu .theme-choice-btn .active-tick {
  color: #8a6500 !important;
}
#theme-dropdown-menu [data-theme-target="kuning"] .w-4.h-4 {
  background-color: #ffdc58 !important;
}

.product-catalog-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(10px,2vw,20px);align-items:stretch;width:100%;max-width:1100px;margin-inline:auto;padding:6px;}
.product-catalog-grid>.product-card{min-width:0;width:100%;height:100%;padding:clamp(10px,1.6vw,16px)!important;gap:clamp(9px,1.4vw,14px)!important;}
.product-catalog-grid .product-art{width:100%;aspect-ratio:4/3;}
.product-catalog-grid .product-name-pill{font-size:clamp(.88rem,1.5vw,1.15rem);overflow-wrap:anywhere;}
.product-catalog-grid .product-description-pill{font-size:clamp(.75rem,1.25vw,.95rem);overflow-wrap:anywhere;}
.product-catalog-grid .product-actions{gap:clamp(6px,1vw,12px);}
.product-catalog-grid .product-action{min-height:40px;padding:8px 6px!important;font-size:clamp(.62rem,1vw,.78rem)!important;gap:5px!important;}
.product-catalog-grid .product-action svg{width:15px;height:15px;}
.product-carousel,.product-track,.product-page,.product-page-grid,.product-dots,.product-slide-arrow{display:none!important;}
@media(max-width:360px){.product-catalog-grid{gap:8px;padding:2px}.product-catalog-grid>.product-card{padding:8px!important;gap:8px!important}.product-catalog-grid .product-action{font-size:.58rem!important;}}

.product-catalog-grid{
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  align-items:stretch;
  gap:clamp(8px,1.5vw,16px) !important;
  padding:clamp(4px,1vw,8px) !important;
}
.product-catalog-grid > .product-card{
  box-sizing:border-box;
  min-width:0 !important;
  width:100% !important;
  height:auto !important;
  min-height:0 !important;
  padding:clamp(7px,1.2vw,12px) !important;
  gap:clamp(7px,1vw,11px) !important;
  overflow:hidden;
}
.product-catalog-grid .product-art{
  width:100% !important;
  aspect-ratio:4 / 3 !important;
  min-height:0 !important;
  flex:none;
}
.product-catalog-grid .product-art img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.product-catalog-grid .product-art > span{
  top:5px !important;
  left:5px !important;
  font-size:clamp(6px,1.4vw,9px) !important;
  line-height:1.2 !important;
  padding:2px 4px !important;
  max-width:calc(100% - 10px);
}
.product-catalog-grid .product-copy{
  min-width:0;
  gap:clamp(5px,.8vw,8px) !important;
}
.product-catalog-grid .product-name-pill{
  font-size:clamp(.72rem,2.7vw,1rem) !important;
  line-height:1.2 !important;
  overflow-wrap:anywhere;
  max-width:100%;
}
.product-catalog-grid .product-description-pill{
  font-size:clamp(.62rem,2.2vw,.82rem) !important;
  line-height:1.35 !important;
  overflow-wrap:anywhere;
  max-width:100%;
}
.product-catalog-grid .product-actions{
  gap:clamp(4px,.7vw,7px) !important;
  width:100%;
  margin-top:auto;
}
.product-catalog-grid .product-action{
  min-width:0 !important;
  min-height:30px !important;
  padding:6px 4px !important;
  font-size:clamp(.52rem,1.9vw,.7rem) !important;
  line-height:1.15 !important;
  gap:3px !important;
  white-space:normal;
}
.product-catalog-grid .product-action svg{
  width:clamp(11px,2.5vw,14px) !important;
  height:clamp(11px,2.5vw,14px) !important;
  flex-shrink:0;
}
@media(max-width:380px){
  .product-catalog-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:7px !important;padding:3px !important}
  .product-catalog-grid>.product-card{padding:7px !important;gap:7px !important}
  .product-catalog-grid .product-name-pill{font-size:.7rem !important}
  .product-catalog-grid .product-description-pill{font-size:.6rem !important}
  .product-catalog-grid .product-action{min-height:28px !important;font-size:.5rem !important;padding:5px 2px !important}
}

.product-catalog-grid .product-name-pill {
  box-shadow: none !important;
  border-width: 2px !important;
}

.product-catalog-grid .product-art,
.product-card .product-art {
  box-shadow: none !important;
  border-width: 2px !important;
}

.product-name-pill::before {
  flex: 0 0 9px !important;
  width: 9px !important;
  height: 9px !important;
  margin-top: .32em !important;
  align-self: flex-start;
}