/* ============================================================
   KERSANTARA FABRIC — UNIFIED NEO-BRUTALISM THEME (ALL PAGES)
   Color Palette:
     Ink / Foundation : #1C4B62 (Deep Petrol - border, text, solid shadow)
     Primary Action   : #E8A519 (Gold Kersantara - CTA, buttons, highlights)
     Accent / Sale    : #CD3318 (Crimson Bata - badges, alerts, sale tags)
     Paper Canvas     : #FFF8EB (Warm vintage paper background)
     Card Background  : #FFFFFF (White cards with thick #1C4B62 borders)
   ============================================================ */

/* ============================================================
   SECTION 1: UNIFIED HEADER, SLIM PROFILE & INDEPENDENT DRAWER
   (Extracted directly from Homepage v2 / index.html)
   ============================================================ */
/* ==========================================================================
   KERSANTARA FABRIC — PAGE /V2 100% INDEPENDENT HEADER & SIDEBAR NAVIGATION
   ========================================================================== */

/* 1. Reset / Neutralize conflicting neobrutalist header styles specifically on /v2 */
#v2-page a.menuToggle,
#v2-page .menuToggle,
#v2-page [data-hamburger-icon],
#v2-page .diamond-bar,
#v2-page #hamburger-bar {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  position: absolute !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* 2. Announcement bar strictly at the very top with ZERO gap */
#v2-page {
  --header-position: sticky !important;
  --announcement-height-desktop: 0px !important;
  --announcement-height-mobile: 0px !important;
}
#v2-page,
#v2-page .page-wrap {
  margin: 0 !important;
  padding: 0 !important;
}
#v2-page #shopify-section-sections--20532474609825__announcement {
  position: relative !important;
  z-index: 10001 !important;
  width: 100% !important;
  margin: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
#v2-page .announcement__wrapper,
#v2-page .announcement__wrapper--top,
#v2-page .announcement__bar-outer,
#v2-page announcement-bar {
  position: relative !important;
  z-index: 10001 !important;
  margin: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  display: block !important;
}
#v2-page .announcement__bar {
  margin: 0 !important;
  margin-bottom: 0 !important;
}
#v2-page .announcement__bar--error {
  display: none !important;
  height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 3. Header on Mobile & Tablet (<= 1024px) — Pristine Non-overlapping Layout */
@media (max-width: 1024px) {
  #v2-page {
    --header-position: relative !important;
  }
  #v2-page .site-header {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 54px !important;
    background: #1c4b62 !important;
    border-bottom: 1px solid rgba(232, 165, 25, 0.3) !important;
    z-index: 9999 !important;
  }
  #v2-page .site-header .container {
    padding: 0 14px !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  #v2-page .site-header .row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    min-height: 54px !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    position: relative !important;
  }
  #v2-page .site-header h1.nav-item.logo {
    margin: 0 !important;
    padding: 8px 0 !important;
    position: static !important;
    flex: 1 1 auto !important;
    max-width: none !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
    font-size: 1.08rem !important;
    letter-spacing: 0.12em !important;
    line-height: 1.2 !important;
    display: flex !important;
    align-items: center !important;
  }
  #v2-page .site-header h1.nav-item.logo .logo__text {
    color: #ffffff !important;
    white-space: nowrap !important;
    font-weight: 600 !important;
    letter-spacing: inherit !important;
    font-size: inherit !important;
    text-decoration: none !important;
    display: inline-block !important;
    padding: 0 !important;
  }
  #v2-page .site-header .header-fix-cont {
    margin: 0 0 0 10px !important;
    position: static !important;
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
  }
  #v2-page .site-header .header__icons {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    position: static !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
  }
  #v2-page .site-header .nav-standard {
    display: none !important;
  }
  #v2-page .site-header .desktop-cc,
  #v2-page .site-header .mobile-cc {
    display: none !important;
  }

  /* Icons styling: Uniform, tactile 36px rounded buttons */
  #v2-page .site-header .header__icons .nav-item,
  #v2-page .site-header .header__icons .search-popdown-bar,
  #v2-page .site-header .header__icons .v2-hamburger-btn {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    position: static !important;
    cursor: pointer !important;
    box-shadow: none !important;
    transition: background 0.2s ease, border-color 0.2s ease !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
  }
  #v2-page .site-header .header__icons .nav-item:hover,
  #v2-page .site-header .header__icons .search-popdown-bar:hover,
  #v2-page .site-header .header__icons .v2-hamburger-btn:hover {
    background: rgba(232, 165, 25, 0.25) !important;
    border-color: #e8a519 !important;
  }
  #v2-page .site-header .header__icons svg {
    width: 17px !important;
    height: 17px !important;
    stroke: #ffffff !important;
    fill: none !important;
  }
  #v2-page .site-header .header__icons svg path {
    stroke: #ffffff !important;
  }
}

/* Tablet view (601px - 1024px) */
@media (min-width: 601px) and (max-width: 1024px) {
  #v2-page .site-header h1.nav-item.logo {
    font-size: 1.15rem !important;
    letter-spacing: 0.16em !important;
  }
  #v2-page .site-header .header__icons {
    gap: 10px !important;
  }
}

/* Mobile screens (<= 600px) */
@media (max-width: 600px) {
  #v2-page .site-header .container {
    padding: 0 10px !important;
  }
  #v2-page .site-header h1.nav-item.logo {
    font-size: 0.95rem !important;
    letter-spacing: 0.08em !important;
  }
  #v2-page .site-header .header__icons {
    gap: 6px !important;
  }
  #v2-page .site-header .header__icons .nav-item,
  #v2-page .site-header .header__icons .search-popdown-bar,
  #v2-page .site-header .header__icons .v2-hamburger-btn {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
  }
  #v2-page .site-header .header__icons svg {
    width: 16px !important;
    height: 16px !important;
  }
}

/* Narrow mobile screens (<= 390px, e.g. iPhone 12/13/14, iPhone SE, small Androids) */
@media (max-width: 390px) {
  #v2-page .site-header .container {
    padding: 0 8px !important;
  }
  #v2-page .site-header h1.nav-item.logo {
    font-size: 0.84rem !important;
    letter-spacing: 0.05em !important;
  }
  #v2-page .site-header .header__icons {
    gap: 5px !important;
  }
  #v2-page .site-header .header__icons .nav-item,
  #v2-page .site-header .header__icons .search-popdown-bar,
  #v2-page .site-header .header__icons .v2-hamburger-btn {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
  }
  #v2-page .site-header .header__icons svg {
    width: 15px !important;
    height: 15px !important;
  }
}

/* Ultra small mobile screens (<= 340px) */
@media (max-width: 340px) {
  #v2-page .site-header .container {
    padding: 0 6px !important;
  }
  #v2-page .site-header h1.nav-item.logo {
    font-size: 0.74rem !important;
    letter-spacing: 0.02em !important;
  }
  #v2-page .site-header .header__icons {
    gap: 4px !important;
  }
  #v2-page .site-header .header__icons .nav-item,
  #v2-page .site-header .header__icons .search-popdown-bar,
  #v2-page .site-header .header__icons .v2-hamburger-btn {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
  }
}

/* 4. Dedicated Hamburger Button (3 crisp lines) */
#v2-page .v2-hamburger-btn {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4.5px !important;
}
@media (min-width: 1025px) {
  #v2-page .v2-hamburger-btn {
    display: none !important;
  }
}
#v2-page .v2-hamburger-line {
  display: block !important;
  width: 18px !important;
  height: 2px !important;
  background-color: #ffffff !important;
  border-radius: 2px !important;
  transition: transform 0.25s ease, opacity 0.25s ease !important;
}

/* ==========================================================================
   DESKTOP FLOATING HEADER (>= 1025px) — 50% SLIMMER PROFESSIONAL PROFILE
   ========================================================================== */
@media (min-width: 1025px) {
  #v2-page #shopify-section-sections--20532474609825__header {
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 99999 !important;
    margin: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  #v2-page .site-header {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    width: 100% !important;
    z-index: 99999 !important;
    background: #1c4b62 !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-bottom: 1px solid rgba(232, 165, 25, 0.25) !important;
    padding-top: 5px !important;
    padding-bottom: 5px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    height: auto !important;
    transition: background 0.3s ease, backdrop-filter 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease, padding 0.2s ease !important;
  }
  body#v2-page.v2-header-floating .site-header {
    background: rgba(28, 75, 98, 0.98) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    box-shadow: 0 8px 24px rgba(16, 41, 58, 0.25) !important;
    border-bottom: 1px solid rgba(232, 165, 25, 0.5) !important;
    top: 0 !important;
    padding-top: 5px !important;
    padding-bottom: 5px !important;
  }
  #v2-page .site-header .container {
    max-width: 1280px !important;
    padding: 0 32px !important;
    margin: 0 auto !important;
  }
  #v2-page .site-header .container > .row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 48px !important;
    height: auto !important;
    padding: 5px 0 !important;
    margin: 0 !important;
    width: 100% !important;
  }
  #v2-page .site-header h1.nav-item.logo {
    font-family: 'Jost', sans-serif !important;
    font-size: 1.22rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.24em !important;
    text-transform: uppercase !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #ffffff !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
  }
  #v2-page .site-header h1.nav-item.logo .logo__text {
    color: #ffffff !important;
    text-decoration: none !important;
    line-height: 1 !important;
  }
  #v2-page .site-header .header-fix-cont {
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    flex: 1 1 auto !important;
  }
  #v2-page .site-header .header-fix-cont-inner {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  #v2-page .site-header .nav-standard {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 1 1 auto !important;
  }
  #v2-page .site-header .nav-standard .menu {
    display: flex !important;
    align-items: center !important;
    gap: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }
  #v2-page .site-header .nav-standard .menu-item__link {
    color: #ffffff !important;
    font-family: 'Jost', sans-serif !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    padding: 4px 10px !important;
    line-height: 1.2 !important;
    border-radius: 5px !important;
    transition: color 0.2s ease, background 0.2s ease !important;
    display: inline-flex !important;
    align-items: center !important;
  }
  #v2-page .site-header .nav-standard .menu-item__link:hover {
    color: #e8a519 !important;
    background: rgba(255, 255, 255, 0.08) !important;
  }
  #v2-page .site-header .header__icons {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  #v2-page .site-header .header__icons .nav-item,
  #v2-page .site-header .header__icons .search-popdown-bar {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    border-radius: 7px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }
  #v2-page .site-header .header__icons .nav-item:hover,
  #v2-page .site-header .header__icons .search-popdown-bar:hover {
    background: rgba(232, 165, 25, 0.25) !important;
    border-color: #e8a519 !important;
    color: #e8a519 !important;
    transform: translateY(-1px) !important;
  }
  #v2-page .site-header .header__icons svg {
    width: 16px !important;
    height: 16px !important;
    stroke: #ffffff !important;
    fill: none !important;
    display: block !important;
    margin: auto !important;
  }
  #v2-page .site-header .header__icons svg path {
    stroke: #ffffff !important;
  }
  #v2-page .v2-hamburger-btn {
    display: none !important;
  }
}

/* 5. SIDEBAR DRAWER & BACKDROP (100% INDEPENDENT FOR /V2) */
#v2-drawer-backdrop {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: rgba(16, 41, 58, 0.65) !important;
  backdrop-filter: blur(5px) !important;
  -webkit-backdrop-filter: blur(5px) !important;
  z-index: 9999998 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.3s !important;
}
body#v2-page.v2-drawer-is-open #v2-drawer-backdrop {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

#v2-sidebar-drawer {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  bottom: 0 !important;
  width: 320px !important;
  max-width: 86vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  background: #ffffff !important;
  z-index: 9999999 !important;
  display: flex !important;
  flex-direction: column !important;
  box-shadow: 14px 0 50px rgba(0, 0, 0, 0.35) !important;
  transform: translateX(-100%) !important;
  visibility: hidden !important;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.35s !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}
body#v2-page.v2-drawer-is-open #v2-sidebar-drawer {
  transform: translateX(0) !important;
  visibility: visible !important;
}

/* Drawer Header */
.v2-drawer-header {
  padding: 18px 20px !important;
  background: #1c4b62 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-shrink: 0 !important;
  border-bottom: 2px solid #e8a519 !important;
}
.v2-drawer-brand {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}
.v2-drawer-logo {
  font-family: 'Jost', sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.24em !important;
  color: #ffffff !important;
  text-transform: uppercase !important;
}
.v2-drawer-sub {
  font-family: 'Jost', sans-serif !important;
  font-size: 10px !important;
  color: rgba(255, 255, 255, 0.7) !important;
  letter-spacing: 0.06em !important;
}
.v2-drawer-close-btn {
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.15) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  padding: 0 !important;
  margin: 0 !important;
}
.v2-drawer-close-btn:hover {
  background: #e8a519 !important;
  color: #1c4b62 !important;
  border-color: #e8a519 !important;
  transform: scale(1.08) !important;
}

/* Drawer Body */
.v2-drawer-body {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  padding: 16px 20px 40px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
  box-sizing: border-box !important;
}
.v2-nav-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}
.v2-nav-item {
  margin: 0 !important;
  padding: 0 !important;
  border-bottom: 1px solid rgba(28, 75, 98, 0.08) !important;
}
.v2-nav-link {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 14px 8px !important;
  font-family: 'Jost', sans-serif !important;
  font-size: 14.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: #1c4b62 !important;
  text-decoration: none !important;
  border-radius: 6px !important;
  transition: all 0.2s ease !important;
}
.v2-nav-link:hover {
  background: #fff8eb !important;
  color: #e8a519 !important;
  padding-left: 14px !important;
}
.v2-nav-arrow {
  font-size: 15px !important;
  opacity: 0.35 !important;
  transition: transform 0.2s ease, opacity 0.2s ease !important;
}
.v2-nav-link:hover .v2-nav-arrow {
  transform: translateX(3px) !important;
  opacity: 1 !important;
  color: #e8a519 !important;
}

/* Portal Cards */
.v2-drawer-portal {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  padding-top: 10px !important;
  border-top: 1px solid rgba(28, 75, 98, 0.1) !important;
}
.v2-portal-title {
  font-family: 'Jost', sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: #8c8275 !important;
  margin-bottom: 2px !important;
}
.v2-portal-card {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px 14px !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  background: #faf7f2 !important;
  border: 1px solid rgba(28, 75, 98, 0.1) !important;
  transition: all 0.2s ease !important;
}
.v2-portal-card:hover {
  background: #1c4b62 !important;
  border-color: #1c4b62 !important;
  transform: translateY(-1px) !important;
}
.v2-portal-card:hover .v2-portal-name {
  color: #ffffff !important;
}
.v2-portal-card:hover .v2-portal-desc {
  color: rgba(255, 255, 255, 0.7) !important;
}
.v2-portal-card:hover .v2-portal-icon {
  background: #e8a519 !important;
  color: #1c4b62 !important;
}
.v2-portal-icon {
  width: 34px !important;
  height: 34px !important;
  border-radius: 6px !important;
  background: rgba(28, 75, 98, 0.08) !important;
  color: #1c4b62 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  transition: all 0.2s ease !important;
}
.v2-portal-info {
  display: flex !important;
  flex-direction: column !important;
}
.v2-portal-name {
  font-family: 'Jost', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #1c4b62 !important;
  letter-spacing: 0.03em !important;
  transition: color 0.2s ease !important;
}
.v2-portal-desc {
  font-family: 'Jost', sans-serif !important;
  font-size: 11px !important;
  color: #7a7368 !important;
  transition: color 0.2s ease !important;
}

/* Contact Concierge */
.v2-drawer-contact {
  padding: 14px !important;
  background: #fff8eb !important;
  border-radius: 8px !important;
  border: 1px dashed rgba(232, 165, 25, 0.6) !important;
}
.v2-contact-badge {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: #e8a519 !important;
  margin-bottom: 4px !important;
}
.v2-contact-text {
  font-size: 12px !important;
  color: #555047 !important;
  margin: 0 0 10px 0 !important;
  line-height: 1.4 !important;
}
.v2-contact-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: #25d366 !important;
  color: #ffffff !important;
  padding: 8px 14px !important;
  border-radius: 6px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: opacity 0.2s ease !important;
}
.v2-contact-btn:hover {
  opacity: 0.9 !important;
}

/* Drawer Footer */
.v2-drawer-footer {
  padding: 14px 20px !important;
  border-top: 1px solid rgba(28, 75, 98, 0.06) !important;
  background: #faf7f2 !important;
  flex-shrink: 0 !important;
}
.v2-drawer-footer p {
  margin: 0 !important;
  font-size: 11px !important;
  color: #8c8275 !important;
  text-align: center !important;
}

/* 6. SECTION "NEW IN IKATAN" — 4 CARDS GRID + CENTERED BUTTON BELOW */
#shopify-section-template--20532473299105__section_collection_aNRUAa,
#collection-module-template--20532473299105__section_collection_aNRUAa.featured-collection {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 100% !important;
  max-width: 1400px !important;
  margin: 0 auto !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
  padding-bottom: 50px !important;
  box-sizing: border-box !important;
}

/* 4 Cards Grid - Desktop (>= 1025px) */
#shopify-section-template--20532473299105__section_collection_aNRUAa .collection-grid__row--grid,
#collection-module-template--20532473299105__section_collection_aNRUAa .collection-grid__row--grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 24px !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
}

#shopify-section-template--20532473299105__section_collection_aNRUAa .product-block,
#collection-module-template--20532473299105__section_collection_aNRUAa .product-block {
  width: 100% !important;
  max-width: 100% !important;
  flex: none !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

/* Tablet: 2x2 Grid (601px - 1024px) */
@media (max-width: 1024px) {
  #shopify-section-template--20532473299105__section_collection_aNRUAa .collection-grid__row--grid,
  #collection-module-template--20532473299105__section_collection_aNRUAa .collection-grid__row--grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 36px 24px !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* Mobile: Single Column Stack (<= 600px) */
@media (max-width: 600px) {
  #shopify-section-template--20532473299105__section_collection_aNRUAa,
  #collection-module-template--20532473299105__section_collection_aNRUAa.featured-collection {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  #shopify-section-template--20532473299105__section_collection_aNRUAa .collection-grid__row--grid,
  #collection-module-template--20532473299105__section_collection_aNRUAa .collection-grid__row--grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 36px !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
  }
}

/* BUTTON "CEK CATALOG >>" — TARUH DIBAWAH (TENGAH) SETELAH KE-4 CARD */
#shopify-section-template--20532473299105__section_collection_aNRUAa .button-wrapper,
#collection-module-template--20532473299105__section_collection_aNRUAa .button-wrapper {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  margin-top: 48px !important;
  margin-bottom: 20px !important;
  text-align: center !important;
  clear: both !important;
  float: none !important;
}

#shopify-section-template--20532473299105__section_collection_aNRUAa .button-wrapper .btn,
#collection-module-template--20532473299105__section_collection_aNRUAa .button-wrapper .btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 220px !important;
  padding: 14px 36px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  background-color: #e8a519 !important;
  color: #1c4b62 !important;
  border: 2.5px solid #1c4b62 !important;
  border-radius: 8px !important;
  box-shadow: 4px 4px 0px #1c4b62 !important;
  text-decoration: none !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer !important;
}

#shopify-section-template--20532473299105__section_collection_aNRUAa .button-wrapper .btn:hover,
#collection-module-template--20532473299105__section_collection_aNRUAa .button-wrapper .btn:hover {
  transform: translate(-2px, -2px) !important;
  box-shadow: 6px 6px 0px #1c4b62 !important;
  background-color: #f3b12b !important;
  color: #1c4b62 !important;
}

#shopify-section-template--20532473299105__section_collection_aNRUAa .button-wrapper .btn:active,
#collection-module-template--20532473299105__section_collection_aNRUAa .button-wrapper .btn:active {
  transform: translate(2px, 2px) !important;
  box-shadow: 2px 2px 0px #1c4b62 !important;
}

/* ============================================================
   SECTION 2: GLOBAL THEME & COMPONENT STYLING
   ============================================================ */
/* ============================================================
   Kersantara Fabric — Neobrutalism Homepage Theme
   Sumber tema : design Neo Brutalism.md (palet profesional)
     Ink / foundation : #1C4B62  (pengganti pure black —
                           border, teks, shadow, deep section)
     Primary action   : #E8A519  (CTA utama, highlight)
     Accent hemat     : #CD3318  (badge promo / sale / error,
                           maks ~15%, jangan fill besar)
     Paper background : #FFF8EB  (kanvas utama, tint hangat
                           turunan #E8A519)
   Aturan : HANYA visual (warna, border, shadow, radius).
   TIDAK mengubah susunan / layout / markup / font family.
   Scope  : body.page-v2 (homepage saja).
   Dimuat SETELAH kersantara-palette-override.css agar menang.
   Neo-brutalism : border tebal 2-4px, hard offset shadow
   4px 4px 0, flat tanpa gradient, radius kecil 8px.
   ============================================================ */

/* ---------- 1. Token & kanvas homepage ---------- */
body.page-v2 {
  --nb-ink: #1c4b62;
  --nb-ink-deep: #10293a;
  --nb-gold: #e8a519;
  --nb-gold-deep: #b57e0a;
  --nb-red: #cd3318;
  --nb-paper: #fff8eb;
  --nb-card: #ffffff;
  --nb-ink-soft: rgba(28, 75, 98, 0.72);
  --nb-ink-faint: rgba(28, 75, 98, 0.12);

  background-color: var(--nb-paper) !important;
  color: var(--nb-ink);

  /* Remap variabel theme — homepage saja (dimanfaatkan via inherit) */
  --COLOR-BACKGROUND: #fff8eb !important;
  --COLOR-BACKGROUND-ACCENT: #fdf1d7 !important;
  --COLOR-HEADING: #1c4b62 !important;
  --COLOR-TEXT: #1c4b62 !important;
  --COLOR-TEXT-DARK: #1c4b62 !important;
  --COLOR-TEXT-LIGHT: rgba(28, 75, 98, 0.72) !important;
  --COLOR-BORDER: #1c4b62 !important;
  --COLOR-BORDER-DARK: #1c4b62 !important;

  /* Tombol primer brutalist: gold fill, teks + border petrol */
  --BTN-PRIMARY-BORDER-COLOR: #1c4b62 !important;
  --BTN-PRIMARY-BG-COLOR: #e8a519 !important;
  --BTN-PRIMARY-TEXT-COLOR: #1c4b62 !important;
  --BTN-PRIMARY-BG-COLOR-BRIGHTER: #f2bc3f !important;

  --RADIUS: 8px !important;
}

body.page-v2 ::selection {
  background-color: #e8a519 !important;
  color: #1c4b62 !important;
}

/* Matikan gradient di homepage — flat paper */
body.page-v2 .trust,
body.page-v2 .circles,
body.page-v2 [style*="linear-gradient"] {
  background-image: none !important;
}

/* ---------- 2. Announcement & header ---------- */
body.page-v2 .announcement__bar-outer .announcement__bar,
body.page-v2 .announcement__wrapper--top {
  background-image: none !important;
  background-color: #1c4b62 !important;
  color: #ffffff !important;
  border-bottom: 3px solid #e8a519 !important;
}
body.page-v2 .announcement__text {
  letter-spacing: 0.14em !important;
  font-weight: 500 !important;
}

/* Header tetap overlay di atas hero — hanya pertegas menu */
body.page-v2 .site-header .menu-item__link {
  font-weight: 500 !important;
}
body.page-v2 .site-header .menu-item__link:hover {
  color: #e8a519 !important;
  text-decoration: underline !important;
  text-decoration-thickness: 3px !important;
  text-underline-offset: 6px !important;
}
/* Dropdown / search popdown jadi kartu brutalist */
body.page-v2 .meganav,
body.page-v2 .dropdown,
body.page-v2 .search-popdown__main {
  background-color: #fff8eb !important;
  border: 3px solid #1c4b62 !important;
  border-radius: 8px !important;
  box-shadow: 4px 4px 0 #1c4b62 !important;
}

/* ---------- 3. Tombol (semua varian, homepage) ---------- */
body.page-v2 .btn,
body.page-v2 button.btn {
  border: 3px solid #1c4b62 !important;
  border-radius: 8px !important;
  box-shadow: 4px 4px 0 #1c4b62 !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease,
    background-color 0.2s ease, color 0.2s ease !important;
}
body.page-v2 .btn:hover,
body.page-v2 button.btn:hover {
  transform: translate(-2px, -2px) !important;
  box-shadow: 6px 6px 0 #1c4b62 !important;
}
body.page-v2 .btn:active,
body.page-v2 button.btn:active {
  transform: translate(2px, 2px) !important;
  box-shadow: 0 0 0 #1c4b62 !important;
}
/* Primer + outline-primary: gold */
body.page-v2 .btn--primary,
body.page-v2 .btn--outline.btn--primary {
  background-color: #e8a519 !important;
  color: #1c4b62 !important;
}
/* Tombol Hero Banner: "Kebaya & Beskap" (bg gold #e8a519, shadow #1c4b62, text #1c4b62) */
body.template-index .banner .btn--white,
body.template-index .banner .btn--outline.btn--white,
body#v2-page.template-index .banner .btn--white,
body#v2-page.template-index .banner .btn--outline.btn--white,
body.template-index .banner .button-wrapper a,
body#v2-page.template-index .banner .button-wrapper a,
#Banner--template--20532473299105__section_image_with_text_overlay_XcNykN .btn,
#Banner--template--20532473299105__section_image_with_text_overlay_XcNykN a.btn,
#Banner--template--20532473299105__section_image_with_text_overlay_XcNykN .button-wrapper a,
#shopify-section-template--20532473299105__section_image_with_text_overlay_XcNykN .btn,
#shopify-section-template--20532473299105__section_image_with_text_overlay_XcNykN a.btn {
  background: #e8a519 !important;
  background-color: #e8a519 !important;
  color: #1c4b62 !important;
  border: 2.5px solid #1c4b62 !important;
  border-radius: 8px !important;
  box-shadow: 4px 4px 0px #1c4b62 !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer !important;
}
body.template-index .banner .btn--white:link,
body.template-index .banner .btn--white:visited,
body#v2-page.template-index .banner .button-wrapper a:link,
body#v2-page.template-index .banner .button-wrapper a:visited,
#Banner--template--20532473299105__section_image_with_text_overlay_XcNykN a.btn:link,
#Banner--template--20532473299105__section_image_with_text_overlay_XcNykN a.btn:visited {
  color: #1c4b62 !important;
}
body.template-index .banner .btn--white:hover,
body.template-index .banner .btn--outline.btn--white:hover,
body#v2-page.template-index .banner .btn--white:hover,
body#v2-page.template-index .banner .btn--outline.btn--white:hover,
body.template-index .banner .button-wrapper a:hover,
body#v2-page.template-index .banner .button-wrapper a:hover,
#Banner--template--20532473299105__section_image_with_text_overlay_XcNykN .btn:hover,
#Banner--template--20532473299105__section_image_with_text_overlay_XcNykN a.btn:hover,
#Banner--template--20532473299105__section_image_with_text_overlay_XcNykN .button-wrapper a:hover,
#shopify-section-template--20532473299105__section_image_with_text_overlay_XcNykN .btn:hover,
#shopify-section-template--20532473299105__section_image_with_text_overlay_XcNykN a.btn:hover {
  background: #f3b12b !important;
  background-color: #f3b12b !important;
  border-color: #1c4b62 !important;
  color: #1c4b62 !important;
  box-shadow: 6px 6px 0px #1c4b62 !important;
  transform: translate(-2px, -2px) !important;
}
body.template-index .banner .btn--white:active,
body.template-index .banner .btn--outline.btn--white:active,
body#v2-page.template-index .banner .btn--white:active,
body#v2-page.template-index .banner .btn--outline.btn--white:active,
body.template-index .banner .button-wrapper a:active,
body#v2-page.template-index .banner .button-wrapper a:active,
#Banner--template--20532473299105__section_image_with_text_overlay_XcNykN .btn:active,
#Banner--template--20532473299105__section_image_with_text_overlay_XcNykN a.btn:active,
#shopify-section-template--20532473299105__section_image_with_text_overlay_XcNykN .btn:active,
#shopify-section-template--20532473299105__section_image_with_text_overlay_XcNykN a.btn:active {
  color: #1c4b62 !important;
  transform: translate(2px, 2px) !important;
  box-shadow: 2px 2px 0px #1c4b62 !important;
}
body.page-v2:not(.template-index) .btn--white,
body.page-v2:not(.template-index) .btn--outline.btn--white {
  background-color: #e8a519 !important;
  border-color: #1c4b62 !important;
  color: #1c4b62 !important;
}
/* Ghost / outline netral: paper, hover jadi petrol */
body.page-v2 .btn--outline:not(.btn--primary):not(.btn--white) {
  background-color: #fff8eb !important;
  color: #1c4b62 !important;
}
body.page-v2 .btn--outline:not(.btn--primary):not(.btn--white):hover {
  background-color: #1c4b62 !important;
  color: #fff8eb !important;
}
/* Aksen merah (sale) — pakai hemat */
body.page-v2 .btn--sale,
body.page-v2 .btn--accent-red {
  background-color: #cd3318 !important;
  border-color: #1c4b62 !important;
  color: #ffffff !important;
}

/* Tombol "Why We Exist" pada section gelap .world: border putih, transparan, teks putih */
body.page-v2 .btn--w,
body#v2-page .btn--w,
body.template-index .btn--w,
.world a.btn--w,
.world .btn--w {
  background: transparent !important;
  background-color: transparent !important;
  border: 2px solid #ffffff !important;
  color: #ffffff !important;
  box-shadow: none !important;
  text-decoration: none !important;
  transition: all 0.25s ease !important;
}
body.page-v2 .btn--w:hover,
body#v2-page .btn--w:hover,
body.template-index .btn--w:hover,
.world a.btn--w:hover,
.world .btn--w:hover {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #1c4b62 !important;
  border-color: #ffffff !important;
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.4) !important;
  transform: translate(-2px, -2px) !important;
}

/* ---------- 4. Hero ---------- */
body.page-v2 .banner {
  border-bottom: 3px solid #1c4b62 !important;
}
/* Subheading hero jadi chip petrol */
body.page-v2 .page-title__subheading.subheading-text {
  display: inline-block !important;
  background-color: #1c4b62 !important;
  color: #ffffff !important;
  border: 3px solid #1c4b62 !important;
  border-radius: 8px !important;
  box-shadow: 4px 4px 0 #1c4b62 !important;
  padding: 0.45em 1em !important;
  font-weight: 700 !important;
}

/* ---------- 5. Rich text (㇑paper, marker gold) ---------- */
body.page-v2 .shopify-section--rich-text {
  background-color: #fff8eb !important;
}
body.page-v2 .rich__heading {
  color: #1c4b62 !important;
}
body.page-v2 .rich__content {
  color: rgba(28, 75, 98, 0.8) !important;
}
/* Subheading gold inline sulit dibaca di paper → petrol + marker gold */
body.page-v2 .rich__subheading.subheading-text {
  color: #1c4b62 !important;
}
body.page-v2 .rich__subheading.subheading-text::after {
  content: "" !important;
  display: block !important;
  width: 64px !important;
  height: 6px !important;
  margin: 12px auto 0 !important;
  background: #e8a519 !important;
  border: 2px solid #1c4b62 !important;
  border-radius: 4px !important;
}

/* ---------- 6. Value props (.circles) ---------- */
body.page-v2 .circles {
  background-color: #fff8eb !important;
}
body.page-v2 .circ {
  background-color: #ffffff !important;
  border: 3px solid #1c4b62 !important;
  border-radius: 12px !important;
  box-shadow: 4px 4px 0 #1c4b62 !important;
  padding: 18px 12px !important;
}
body.page-v2 .circ img {
  border: 3px solid #1c4b62 !important;
}

/* ---------- 7. Kartu produk ---------- */
body.page-v2 .product-block__inner {
  background-color: #ffffff !important;
  border: 3px solid #1c4b62 !important;
  border-radius: 8px !important;
  box-shadow: 4px 4px 0 #1c4b62 !important;
  overflow: hidden !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
body.page-v2 .product-block__inner:hover {
  transform: translate(-2px, -2px) !important;
  box-shadow: 6px 6px 0 #1c4b62 !important;
}
body.page-v2 .product-block__title a {
  color: #1c4b62 !important;
  font-weight: 600 !important;
}
body.page-v2 .product-block__price .price {
  color: #1c4b62 !important;
  font-weight: 600 !important;
}
body.page-v2 .price--sale,
body.page-v2 .sale-badge,
body.page-v2 .badge--sale {
  color: #cd3318 !important;
}
/* Badge produk: merah hemat + border petrol */
body.page-v2 .product__badge .product__badge__item,
body.page-v2 .product-block__badge {
  background-color: #cd3318 !important;
  color: #ffffff !important;
  border: 2px solid #1c4b62 !important;
  border-radius: 6px !important;
  box-shadow: 3px 3px 0 #1c4b62 !important;
  font-weight: 700 !important;
}
/* Quick view: petrol, hover gold */
body.page-v2 .quickView-button:hover {
  background: #e8a519 !important;
  background-color: #e8a519 !important;
}

/* ---------- 8. Tile koleksi ---------- */
body.page-v2 .collection-item {
  border: 3px solid #1c4b62 !important;
  border-radius: 12px !important;
  box-shadow: 5px 5px 0 #1c4b62 !important;
  overflow: hidden !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
body.page-v2 .collection-item:hover {
  transform: translate(-2px, -2px) !important;
  box-shadow: 7px 7px 0 #1c4b62 !important;
}
body.page-v2 .collection-item .desc {
  border-top: 3px solid #1c4b62 !important;
}

/* ---------- 9. Split boutiques: flat, tanpa bingkai ---------- */
body.page-v2 .split {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}
body.page-v2 .split__l {
  background-color: #fff8eb !important;
}
body.page-v2 .cta-u {
  display: inline-block !important;
  background-color: #e8a519 !important;
  color: #1c4b62 !important;
  border: 3px solid #1c4b62 !important;
  border-radius: 8px !important;
  box-shadow: 4px 4px 0 #1c4b62 !important;
  padding: 0.7em 1.6em !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
body.page-v2 .cta-u:hover {
  transform: translate(-2px, -2px) !important;
  box-shadow: 6px 6px 0 #1c4b62 !important;
}

/* ---------- 10. Trust bar: deep petrol, teks putih + gold ---------- */
body.page-v2 .trust {
  background-color: #1c4b62 !important;
  background-image: none !important;
  border-top: 3px solid #e8a519 !important;
  border-bottom: 3px solid #e8a519 !important;
}
body.page-v2 .trust__title {
  color: #e8a519 !important;
  font-weight: 700 !important;
}
body.page-v2 .trust__desc {
  color: #fff8eb !important;
}

/* ---------- 11. Input & focus ---------- */
body.page-v2 input:not(#v2-search-input),
body.page-v2 .sign-up-input,
body.page-v2 .search-popdown__input {
  background-color: #ffffff !important;
  border: 2px solid #1c4b62 !important;
  border-radius: 8px !important;
  color: #1c4b62 !important;
}
body.page-v2 input:not(#v2-search-input):focus,
body.page-v2 .sign-up-input:focus,
body.page-v2 .search-popdown__input:focus {
  outline: none !important;
  border-color: #1c4b62 !important;
  box-shadow: 0 0 0 3px #e8a519 !important;
}
body.page-v2 :focus-visible {
  outline: 3px solid #e8a519 !important;
  outline-offset: 2px !important;
}
body.page-v2 .errors,
body.page-v2 .sign-up-error {
  color: #cd3318 !important;
}

/* ---------- 12. Footer terang: semua teks petrol #1c4b62 ---------- */
body.page-v2 .site-footer {
  background-image: none !important;
  background-color: #fff8eb !important;
  color: #1c4b62 !important;
  border-top: 3px solid #1c4b62 !important;
}
body.page-v2 .site-footer .footer__block__title {
  color: #1c4b62 !important;
}
body.page-v2 .site-footer .footer__block__title::after {
  content: "" !important;
  display: block !important;
  width: 44px !important;
  height: 5px !important;
  margin-top: 10px !important;
  background: #e8a519 !important;
  border-radius: 3px !important;
}
body.page-v2 .site-footer .footer__block__menu-link a {
  color: #1c4b62 !important;
}
body.page-v2 .site-footer .footer__block__menu-link a:hover {
  color: #1c4b62 !important;
  text-decoration: underline !important;
  text-decoration-color: #e8a519 !important;
  text-decoration-thickness: 3px !important;
  text-underline-offset: 4px !important;
}
body.page-v2 .site-footer .footer__block__text {
  color: #1c4b62 !important;
}
body.page-v2 .site-footer .sign-up-input {
  background-color: #ffffff !important;
  border: 2px solid #1c4b62 !important;
  color: #1c4b62 !important;
}
body.page-v2 .site-footer .sign-up-submit {
  background-color: #e8a519 !important;
  border-color: #1c4b62 !important;
  color: #1c4b62 !important;
  box-shadow: 4px 4px 0 #1c4b62 !important;
}
body.page-v2 .site-footer .footer__logo img {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* ---------- 13. Mobile: shadow dirampingkan ---------- */
@media (max-width: 768px) {
  body.page-v2 .btn,
  body.page-v2 button.btn,
  body.page-v2 .product-block__inner,
  body.page-v2 .collection-item,
  body.page-v2 .circ {
    box-shadow: 3px 3px 0 #1c4b62 !important;
  }
  body.page-v2 .split {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
}

/* ---------- 14. Hormati reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  body.page-v2 .btn,
  body.page-v2 button.btn,
  body.page-v2 .cta-u,
  body.page-v2 .product-block__inner,
  body.page-v2 .collection-item {
    transition: none !important;
  }
  body.page-v2 .btn:hover,
  body.page-v2 button.btn:hover,
  body.page-v2 .cta-u:hover,
  body.page-v2 .product-block__inner:hover,
  body.page-v2 .collection-item:hover {
    transform: none !important;
  }
}

/* ============================================================
   15. HEADER & NAVIGASI — profesional, anti-tumpang-tindih
   Akar masalah di v2.html:
   - logo h1 punya inline-style nowrap + margin-left 48px yang
     mengalahkan ".logo__text{display:none}" theme di mobile,
     sehingga judul luber menabrak ikon;
   - currency switcher (.CC_KT_WRAPPER) position:absolute +
     .mobile-cc{left:29px} menumpuk area hamburger/logo;
   - .mobile-cc juga menyandang class .menuToggle yang
     absolute (left:0) — tepat di atas tombol hamburger;
   - target sentuh ikon hanya 32px, rapat di layar kecil.
   Semua diperbaiki di sini (CSS saja, markup tidak diubah).
   ============================================================ */

/* 15a. Baris header jadi flex anti-wrap */
body.page-v2 .site-header > .container > .row {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
}
body.page-v2 .site-header .header__icons {
  flex-wrap: nowrap !important;
  flex-shrink: 0 !important;
}
/* Matikan efek blur-on-hover bawaan theme (norak + jank) */
body.page-v2 .header__icons:hover .nav-item,
body.page-v2 .header__icons:hover header-search-popdown [role="button"] svg {
  opacity: 1 !important;
  filter: none !important;
}

/* 15b. Judul logo: bersih, responsif, ellipsis (tidak luber) */
body.page-v2 .site-header h1.nav-item.logo {
  margin: 0 !important;
  padding: 10px 0 !important;
  font-size: clamp(0.95rem, 0.6rem + 2.4vw, 1.35rem) !important;
  letter-spacing: 0.2em !important;
  line-height: 1.25 !important;
  text-shadow: none !important;
  -webkit-text-stroke: 0 !important;
  filter: none !important;
  flex: 0 1 auto !important;
  min-width: 0 !important;
  overflow: hidden !important;
}
body.page-v2 .site-header .logo__text {
  display: inline-block !important;
  max-width: 100% !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  vertical-align: middle !important;
}
/* Clearance tombol hamburger (absolute di kiri) */
@media (max-width: 1023px) {
  body.page-v2 .site-header h1.nav-item.logo {
    margin-left: 52px !important;
  }
  body.page-v2 .site-header .logo__text {
    letter-spacing: 0.14em !important;
  }
}
@media (max-width: 479px) {
  body.page-v2 .site-header h1.nav-item.logo {
    margin-left: 50px !important;
  }
  body.page-v2 .site-header .logo__text {
    letter-spacing: 0.1em !important;
  }
}

/* 15c. Tombol hamburger: 44px brutalist, ikut warna header */
body.page-v2 a.menuToggle[data-menu-toggle] {
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  margin: 0 !important;
  width: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 3px solid currentColor !important;
  border-radius: 8px !important;
  background: transparent !important;
}
body.page-v2 a.menuToggle[data-menu-toggle]:hover {
  background: #e8a519 !important;
  border-color: #e8a519 !important;
  color: #1c4b62 !important;
}
@media (min-width: 1024px) {
  body.page-v2 a.menuToggle[data-menu-toggle] {
    display: none !important;
  }
}

/* 15d. Currency switcher: masuk alur normal (tidak absolute) */
body.page-v2 .site-header .CC_KT_WRAPPER {
  position: static !important;
}
body.page-v2 .site-header div.mobile-cc.CC_KT_WRAPPER_MANUAL.menuToggle {
  position: static !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
  margin: 0 6px 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  width: auto !important;
}
body.page-v2 .site-header .CC_KT_WRAPPER .dropdown_head_CC_KT {
  border: 2px solid currentColor !important;
  border-radius: 8px !important;
  min-height: 40px !important;
  display: flex !important;
  align-items: center !important;
}

/* 15e. Ikon header: target sentuh 40px di mobile/tablet */
@media (max-width: 1023px) {
  body.page-v2 .header__icons .nav-item {
    width: 40px !important;
    height: 40px !important;
    margin-right: 4px !important;
  }
  body.page-v2 .header__icons .search-popdown-bar {
    width: 40px !important;
    height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-right: 4px !important;
  }
  body.page-v2 .header__icons .nav-item:last-child {
    margin-right: 0 !important;
  }
}

/* 15f. Drawer mobile/tablet: panel brutalist + link 52px */
body.page-v2 .nav-hamburger {
  background-color: #fff8eb !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-right: 3px solid #1c4b62 !important;
  max-width: 88vw !important;
}
body.page-v2 .nav-hamburger .menu-item {
  margin: 0 0 10px !important;
  line-height: 1.3 !important;
}
body.page-v2 .nav-hamburger .menu-item a {
  display: flex !important;
  align-items: center !important;
  min-height: 52px !important;
  padding: 10px 16px !important;
  border: 3px solid transparent !important;
  border-radius: 8px !important;
  color: #1c4b62 !important;
}
body.page-v2 .nav-hamburger .menu-item a:hover {
  background-color: #ffffff !important;
  border-color: #1c4b62 !important;
  box-shadow: 3px 3px 0 #1c4b62 !important;
}
body.page-v2 .nav-mobile-close {
  border: 3px solid #1c4b62 !important;
  border-radius: 8px !important;
  background: #e8a519 !important;
  color: #1c4b62 !important;
  box-shadow: 3px 3px 0 #1c4b62 !important;
  width: 44px !important;
  height: 44px !important;
  right: 16px !important;
  top: 14px !important;
}
body.page-v2 .nav-hamburger .nav-user__link {
  display: block !important;
  padding: 12px 16px !important;
  border: 2px solid #1c4b62 !important;
  border-radius: 8px !important;
  margin-bottom: 8px !important;
  color: #1c4b62 !important;
  font-weight: 500 !important;
}

/* 15g. Desktop (≥1024px): kerapian menu + logo tanpa indent */
@media (min-width: 1024px) {
  body.page-v2 .site-header h1.nav-item.logo {
    margin-left: 0 !important;
  }
  body.page-v2 .nav-standard .menu-item {
    margin: 0 2px 0 0 !important;
  }
  body.page-v2 .nav-standard .menu-item__link {
    padding: 10px 12px !important;
    font-weight: 500 !important;
    border-radius: 6px !important;
  }
  body.page-v2 .site-header .desktop-cc {
    margin-right: 8px !important;
  }
}

/* 15h. Mobile/tablet round 2 — currency ganda, logo vs ikon,
   drawer terlalu lebar. SATU pill currency (yang dikendalikan
   JS), logo dikunci dalam ruang sisa, drawer ramping + menu
   kartu inset (tidak menempel tepi). */
@media (max-width: 1023px) {
  body.page-v2 .site-header .desktop-cc.CC_KT_WRAPPER_MANUAL {
    position: static !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    width: auto !important;
    max-width: 76px !important;
    overflow: hidden !important;
    margin: 0 6px 0 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
  }
  body.page-v2 .site-header div.mobile-cc.CC_KT_WRAPPER_MANUAL.menuToggle {
    display: none !important;
  }
  body.page-v2 .site-header .CC_KT_WRAPPER .dropdown_head_CC_KT {
    font-size: 14px !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
  }
  body.page-v2 .site-header h1.nav-item.logo {
    max-width: calc(100vw - 252px) !important;
  }
  body.page-v2 .nav-hamburger {
    max-width: min(320px, 85vw) !important;
    padding-top: 80px !important;
  }
  body.page-v2 .nav-hamburger .menu,
  body.page-v2 .nav-hamburger .nav-user {
    margin-left: 16px !important;
    margin-right: 16px !important;
  }
  body.page-v2 .nav-hamburger .menu-item a {
    background-color: #ffffff !important;
    border-color: #1c4b62 !important;
    box-shadow: 3px 3px 0 #1c4b62 !important;
  }
  body.page-v2 .nav-hamburger .menu-item a:hover {
    background-color: #e8a519 !important;
    transform: translate(-1px, -1px) !important;
    box-shadow: 4px 4px 0 #1c4b62 !important;
  }
}
@media (max-width: 600px) {
  body.page-v2 .site-header h1.nav-item.logo {
    font-size: 0.78rem !important;
    max-width: calc(100vw - 238px) !important;
  }
  body.page-v2 .site-header .logo__text {
    letter-spacing: 0.06em !important;
  }
  body.page-v2 .site-header .desktop-cc.CC_KT_WRAPPER_MANUAL {
    max-width: 64px !important;
  }
}

/* 15i. Drawer: kartu tidak menyentuh tepi (padding simetris di
   wrapper, bukan margin di ul — anti overflow Asimetris) */
@media (max-width: 1023px) {
  body.page-v2 .nav-hamburger {
    width: min(320px, 85vw) !important;
  }
  body.page-v2 .nav-hamburger .nav-inner-wrapper {
    box-sizing: border-box !important;
    padding-left: 16px !important;
    padding-right: 19px !important;
  }
  body.page-v2 .nav-hamburger .menu,
  body.page-v2 .nav-hamburger .nav-user {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* ============================================================
   16. KARTU KATEGORI (6 card) — warna full-width, tanpa oval
   Asal: .circ > .ring (lingkaran 175px) + span label.
   Baru : kartu persegi — gambar full-bleed persegi di atas,
   badan kartu full warna, label menyatu di warna kartu.
   Pola warna selang-seling profesional:
   petrol → gold → putih, diulang 2x.
   Markup tidak diubah, murni override (kalahkan inline <style>
   lewat spesifisitas + !important).
   ============================================================ */
body.page-v2 .circles {
  gap: 14px !important;
  align-items: stretch !important;
}
body.page-v2 .circles .circ {
  width: 200px !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  border: 3px solid #1c4b62 !important;
  border-radius: 12px !important;
  box-shadow: 5px 5px 0 #1c4b62 !important;
  overflow: hidden !important;
  text-decoration: none !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
/* Warna full-width tiap kartu */
body.page-v2 .circles .circ:nth-child(1),
body.page-v2 .circles .circ:nth-child(4) {
  background-color: #1c4b62 !important;
}
body.page-v2 .circles .circ:nth-child(2),
body.page-v2 .circles .circ:nth-child(5) {
  background-color: #e8a519 !important;
}
body.page-v2 .circles .circ:nth-child(3),
body.page-v2 .circles .circ:nth-child(6) {
  background-color: #ffffff !important;
}
body.page-v2 .circles .circ:hover {
  transform: translate(-2px, -2px) !important;
  box-shadow: 7px 7px 0 #1c4b62 !important;
}
/* Gambar: persegi full-bleed, oval dihapus total */
body.page-v2 .circles .circ .ring {
  width: 100% !important;
  height: auto !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
  border-bottom: 3px solid #1c4b62 !important;
  flex: 0 0 auto !important;
}
body.page-v2 .circles .circ:hover .ring {
  transform: none !important;
  box-shadow: none !important;
  filter: none !important;
}
body.page-v2 .circles .circ .ring .art {
  position: static !important;
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 0 !important;
  background-size: cover !important;
  background-position: center top !important;
}
/* Label: bar warna menyatu dengan kartu */
body.page-v2 .circles .circ span {
  margin: 0 !important;
  padding: 12px 8px !important;
  flex: 1 1 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
}
body.page-v2 .circles .circ:nth-child(1) span,
body.page-v2 .circles .circ:nth-child(4) span {
  color: #fff8eb !important;
}
body.page-v2 .circles .circ:nth-child(2) span,
body.page-v2 .circles .circ:nth-child(5) span,
body.page-v2 .circles .circ:nth-child(3) span,
body.page-v2 .circles .circ:nth-child(6) span {
  color: #1c4b62 !important;
}
/* Mobile (≤600px): grid 2 kolom bawaan dipertahankan */
@media (max-width: 600px) {
  body.page-v2 .circles .circ {
    width: 100% !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  body.page-v2 .circles .circ {
    transition: none !important;
  }
  body.page-v2 .circles .circ:hover {
    transform: none !important;
  }
}

/* ============================================================
   17. KARTU PRODUK — gambar full-bleed mentok atas
   Asal: .product-block__image { padding-top:140% } menampung
   gambar 125% yang di-center → strip putih di atas (+bawah).
   Baru : box luar dikempiskan, gambar jadi penentu tinggi,
   mentok ke border atas kartu. Info bawah tidak diubah.
   Badge "Limited Edition" tetap overlay kiri-atas gambar.
   ============================================================ */
body.page-v2 .featured-collection .product-block__image {
  padding-top: 0 !important;
}
body.page-v2 .featured-collection .product-block__image-container {
  position: static !important;
  display: block !important;
}
body.page-v2 .featured-collection .product__badge {
  margin: 10px 0 0 10px !important;
}
/* Gambar dikunci di dalam radius kartu (tidak luber) */
body.page-v2 .featured-collection .product-block__image {
  border-radius: 5px 5px 0 0 !important;
  overflow: hidden !important;
  isolation: isolate !important;
}
body.page-v2 .featured-collection .product-block__image img {
  display: block !important;
}
/* Jarak profesional gambar → teks + harga sejajar */
body.page-v2 .featured-collection .product-block__info {
  padding: 16px 12px 18px !important;
}
body.page-v2 .featured-collection .product-block__title {
  margin-bottom: 6px !important;
  min-height: 2.4em !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ============================================================
   18. TILE KOLEKSI (5 card) — jarak profesional
   Asal: #collection-featured { gap:.25rem } → card ber-border
   + shadow jadi saling menempel.
   Baru : gap 20px desktop / 16px tablet / 14px mobile,
   basis card dihitung ulang agar 5-3-1 kolom tetap pas,
   padding kontainer dilegakan (bayangan tidak kepotong).
   Komposisi, tinggi, dan snap-scroll tidak diubah.
   ============================================================ */
body.page-v2 #collection-featured {
  gap: 20px !important;
  padding: 8px max(1.5rem, 4vw) 18px !important;
  scroll-padding-inline: max(1.5rem, 4vw) !important;
}
body.page-v2 #collection-featured a.collection-item {
  flex: 0 0 calc((100% - 80px) / 5) !important;
}
@media (max-width: 991px) {
  body.page-v2 #collection-featured {
    gap: 16px !important;
    padding: 8px 20px 18px !important;
  }
  body.page-v2 #collection-featured a.collection-item {
    flex: 0 0 calc((100% - 32px) / 3) !important;
  }
}
@media (max-width: 600px) {
  body.page-v2 #collection-featured {
    gap: 14px !important;
    padding: 8px 16px 16px !important;
    scroll-padding-inline: 16px !important;
  }
  body.page-v2 #collection-featured a.collection-item {
    flex: 0 0 66% !important;
  }
}

/* ============================================================
   19. FOOTER mobile/tablet — 1 kolom rata kiri, target sentuh
   Asal: judul center + marker gold rata kiri (janggal),
   2 kolom sempit sehingga link panjang terhimpit.
   Baru : ≤767px jadi 1 kolom full-width rata kiri;
   ≤1023px semua teks rata kiri + link ber-padding lega.
   ============================================================ */
@media (max-width: 1023px) {
  body.page-v2 .footer__blocks {
    text-align: left !important;
  }
  body.page-v2 .footer__block__title {
    text-align: left !important;
    margin-bottom: 12px !important;
  }
  body.page-v2 .footer__block__menu-link a {
    display: block !important;
    padding: 9px 0 !important;
  }
  body.page-v2 .footer__block .sign-up-form {
    margin-right: 5px !important;
  }
}
@media (max-width: 767px) {
  body.page-v2 .footer__blocks {
    grid-template-columns: 100% !important;
    justify-content: start !important;
    gap: 0 !important;
  }
  body.page-v2 .footer__block {
    margin: 0 0 2em !important;
    max-width: 100% !important;
  }
  body.page-v2 .footer__block--newsletter,
  body.page-v2 .footer__block--logo {
    grid-column: auto !important;
  }
}

/* ============================================================
   20. SWIPE HINT — panah putih transparan tengah-kanan tile
   koleksi (mobile/tablet saja; desktop muat 5 tile penuh).
   Murni CSS: lingkaran petrol transparan + chevron SVG putih,
   animasi nudge kanan lembut, pointer-events none (tak blokir
   klik), sembunyi saat reduced-motion.
   ============================================================ */
@keyframes nb-swipe-hint {
  0%,
  100% {
    transform: translate(0, -50%);
    opacity: 0.95;
  }
  50% {
    transform: translate(10px, -50%);
    opacity: 0.6;
  }
}
@media (max-width: 991px) {
  body.page-v2 div[id$="__section_custom_code_48RNTb"] {
    position: relative !important;
  }
  body.page-v2 div[id$="__section_custom_code_48RNTb"]::after {
    content: "" !important;
    position: absolute !important;
    right: 14px !important;
    top: 50% !important;
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    border: 2.5px solid rgba(255, 255, 255, 0.9) !important;
    background-color: rgba(28, 75, 98, 0.55) !important;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M9 5l7 7-7 7"/></svg>') !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 22px 22px !important;
    box-shadow: 3px 3px 0 rgba(28, 75, 98, 0.9) !important;
    z-index: 5 !important;
    pointer-events: none !important;
    animation: nb-swipe-hint 2s ease-in-out infinite !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  body.page-v2 div[id$="__section_custom_code_48RNTb"]::after {
    animation: none !important;
    opacity: 0.7 !important;
  }
}



/* ============================================================
   KERSANTARA FABRIC — GLOBAL NEO-BRUTALISM COMPONENT STYLES
   Mencakup seluruh 15 halaman (Catalog, Product, Cart, Testimoni,
   Blog, Article, Membership, Login, Register, Info, FAQs, 404)
   ============================================================ */

/* ---------- A. Global Canvas, Sections & Backgrounds ---------- */
html,
body,
body#v2-page,
body.page-v2,
body.template-collection,
body.template-product,
body.template-cart,
body.template-page,
body.template-blog,
body.template-article,
body.template-404,
body.template-customers-login,
body.template-customers-register {
  background-color: #fff8eb !important;
  color: #1c4b62 !important;
}

body#v2-page .main-content,
body.page-v2 .main-content,
body#v2-page .body-wrap,
body.page-v2 .body-wrap,
body#v2-page .page-wrap,
body.page-v2 .page-wrap,
body#v2-page section.section-padding,
body.page-v2 section.section-padding,
body#v2-page .container-wrap,
body.page-v2 .container-wrap {
  background-color: #fff8eb !important;
}

/* ---------- B. Unified Brutalist Buttons Global (Non-Homepage) ---------- */
body#v2-page:not(.template-index) .btn,
body.page-v2:not(.template-index) .btn,
body#v2-page:not(.template-index) button.btn,
body.page-v2:not(.template-index) button.btn,
body#v2-page:not(.template-index) input[type="submit"],
body.page-v2:not(.template-index) input[type="submit"],
body#v2-page:not(.template-index) .cta-u,
body.page-v2:not(.template-index) .cta-u,
body#v2-page:not(.template-index) .product__form-submit,
body.page-v2:not(.template-index) .product__form-submit,
body#v2-page:not(.template-index) .cart__checkout,
body.page-v2:not(.template-index) .cart__checkout {
  background-color: #e8a519 !important;
  color: #1c4b62 !important;
  border: 3px solid #1c4b62 !important;
  border-radius: 8px !important;
  box-shadow: 4px 4px 0 #1c4b62 !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease !important;
}

body#v2-page:not(.template-index) .btn:hover,
body.page-v2:not(.template-index) .btn:hover,
body#v2-page:not(.template-index) button.btn:hover,
body.page-v2:not(.template-index) button.btn:hover,
body#v2-page:not(.template-index) input[type="submit"]:hover,
body.page-v2:not(.template-index) input[type="submit"]:hover,
body#v2-page:not(.template-index) .cta-u:hover,
body.page-v2:not(.template-index) .cta-u:hover,
body#v2-page:not(.template-index) .product__form-submit:hover,
body.page-v2:not(.template-index) .product__form-submit:hover,
body#v2-page:not(.template-index) .cart__checkout:hover,
body.page-v2:not(.template-index) .cart__checkout:hover {
  transform: translate(-2px, -2px) !important;
  box-shadow: 6px 6px 0 #1c4b62 !important;
  background-color: #f2bc3f !important;
  color: #1c4b62 !important;
}

body#v2-page:not(.template-index) .btn:active,
body.page-v2:not(.template-index) .btn:active,
body#v2-page:not(.template-index) button.btn:active,
body.page-v2:not(.template-index) button.btn:active {
  transform: translate(2px, 2px) !important;
  box-shadow: 0 0 0 #1c4b62 !important;
}

/* Secondary / Outline button */
body#v2-page:not(.template-index) .btn--outline:not(.btn--primary),
body.page-v2:not(.template-index) .btn--outline:not(.btn--primary) {
  background-color: #ffffff !important;
  color: #1c4b62 !important;
  border: 2.5px solid #1c4b62 !important;
  box-shadow: 3px 3px 0 #1c4b62 !important;
}
body#v2-page:not(.template-index) .btn--outline:not(.btn--primary):hover,
body.page-v2:not(.template-index) .btn--outline:not(.btn--primary):hover {
  background-color: #1c4b62 !important;
  color: #fff8eb !important;
}

/* ---------- C. Global Forms & Inputs ---------- */
body#v2-page input[type="text"],
body.page-v2 input[type="text"],
body#v2-page input[type="email"],
body.page-v2 input[type="email"],
body#v2-page input[type="password"],
body.page-v2 input[type="password"],
body#v2-page input[type="search"]:not(#v2-search-input),
body.page-v2 input[type="search"]:not(#v2-search-input),
body#v2-page input[type="tel"],
body.page-v2 input[type="tel"],
body#v2-page input[type="number"]:not(.qty__adjust-input),
body.page-v2 input[type="number"]:not(.qty__adjust-input),
body#v2-page select,
body.page-v2 select,
body#v2-page textarea,
body.page-v2 textarea,
body#v2-page .sign-up-input,
body.page-v2 .sign-up-input {
  background-color: #ffffff !important;
  border: 2.5px solid #1c4b62 !important;
  border-radius: 8px !important;
  color: #1c4b62 !important;
  font-family: inherit !important;
}

body#v2-page input:not(#v2-search-input):focus,
body.page-v2 input:not(#v2-search-input):focus,
body#v2-page textarea:focus,
body.page-v2 textarea:focus,
body#v2-page select:focus,
body.page-v2 select:focus {
  outline: none !important;
  border-color: #1c4b62 !important;
  box-shadow: 0 0 0 3px #e8a519 !important;
}

/* ---------- D. Halaman Katalog (/catalog) ---------- */
body#v2-page,
body.page-v2,
body#v2-page .page-wrap,
body.page-v2 .page-wrap,
body#v2-page .main-content,
body.page-v2 .main-content,
body#v2-page .collection,
body.page-v2 .collection,
body#v2-page .collection-grid,
body.page-v2 .collection-grid,
body#v2-page .collection-grid__wrapper,
body.page-v2 .collection-grid__wrapper,
body#v2-page .collection__filters,
body.page-v2 .collection__filters,
body#v2-page .collection__filters--left,
body.page-v2 .collection__filters--left,
.collection__filters,
.collection__filters--left,
.collection__filters-wrapper {
  background: #fff8eb !important;
  background-color: #fff8eb !important;
  background-image: none !important;
}

/* RESET SEMUA PADDING & WIDTH CONTAINER DI DALAM SIDEBAR FILTER */
body#v2-page .collection__filters,
body.page-v2 .collection__filters,
body#v2-page .collection__filters--left,
body.page-v2 .collection__filters--left,
.collection__filters--left {
  box-sizing: border-box !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  background: #fff8eb !important;
  background-color: #fff8eb !important;
  background-image: none !important;
  padding: 0 !important;
}

body#v2-page .collection__filters .container,
body.page-v2 .collection__filters .container,
.collection__filters .container,
body#v2-page .collection__filters-list,
body.page-v2 .collection__filters-list,
.collection__filters-list,
body#v2-page .collection__filters-form,
body.page-v2 .collection__filters-form,
.collection__filters-form,
body#v2-page accordion-elements,
body.page-v2 accordion-elements {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  border-bottom: none !important;
  box-sizing: border-box !important;
  float: none !important;
  position: static !important;
  display: block !important;
}

/* Filter Sidebar Header Bar */
.v2-filter-sidebar-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: #ffffff !important;
  border: 2px solid #1c4b62 !important;
  border-radius: 8px !important;
  box-shadow: 2.5px 2.5px 0 #1c4b62 !important;
  padding: 7px 11px !important;
  min-height: 38px !important;
  margin-bottom: 7px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.v2-filter-sidebar-title {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  color: #1c4b62 !important;
  white-space: nowrap !important;
}
.v2-filter-reset-all-btn {
  font-size: 11.5px !important;
  font-weight: 700 !important;
  color: #cd3318 !important;
  background: #fff0ed !important;
  border: 1.5px solid #cd3318 !important;
  border-radius: 6px !important;
  padding: 3px 8px !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: all 0.15s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  white-space: nowrap !important;
}
.v2-filter-reset-all-btn:hover {
  background: #cd3318 !important;
  color: #ffffff !important;
}

/* Filter Accordion Cards (Category, Color, Materials, Craft, Collection) */
body#v2-page .collection__filter,
body.page-v2 .collection__filter,
.collection__filter {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  background-color: #ffffff !important;
  border: 2px solid #1c4b62 !important;
  border-radius: 8px !important;
  box-shadow: 2.5px 2.5px 0 #1c4b62 !important;
  margin: 0 0 6px 0 !important;
  margin-right: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}
body#v2-page .collection__filter:hover,
body.page-v2 .collection__filter:hover,
.collection__filter:hover {
  transform: translate(-1px, -1px) !important;
  box-shadow: 3.5px 3.5px 0 #1c4b62 !important;
}

/* Accordion Summary / Title */
body#v2-page .collection__filter-title,
body.page-v2 .collection__filter-title,
.collection__filter-title {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 7px 11px !important;
  min-height: 38px !important;
  margin: 0 !important;
  border: none !important;
  border-bottom: none !important;
  background-color: #ffffff !important;
  color: #1c4b62 !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  cursor: pointer !important;
  list-style: none !important;
  user-select: none !important;
  transition: background-color 0.15s ease !important;
}
body#v2-page .collection__filter-title::-webkit-details-marker,
body.page-v2 .collection__filter-title::-webkit-details-marker,
.collection__filter-title::-webkit-details-marker {
  display: none !important;
}
body#v2-page details.collection__filter[open] > .collection__filter-title,
body.page-v2 details.collection__filter[open] > .collection__filter-title,
details.collection__filter[open] > .collection__filter-title {
  border-bottom: 2px solid #1c4b62 !important;
  background-color: #ffffff !important;
}
body#v2-page .collection__filter-title .collection__filter-group,
body.page-v2 .collection__filter-title .collection__filter-group,
.collection__filter-title .collection__filter-group {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: #1c4b62 !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  letter-spacing: 0.5px !important;
  white-space: nowrap !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
body#v2-page .collection__filter-title .collection__filter-count,
body.page-v2 .collection__filter-title .collection__filter-count,
.collection__filter-title .collection__filter-count {
  display: none !important;
}
body#v2-page .collection__filter-title .icon-arrow,
body.page-v2 .collection__filter-title .icon-arrow,
.collection__filter-title .icon-arrow {
  position: static !important;
  margin: 0 0 0 auto !important;
  width: 13px !important;
  height: 13px !important;
  min-width: 13px !important;
  flex-shrink: 0 !important;
  fill: #1c4b62 !important;
  transition: transform 0.25s ease !important;
}
body#v2-page details.collection__filter[open] > .collection__filter-title .icon-arrow,
body.page-v2 details.collection__filter[open] > .collection__filter-title .icon-arrow,
details.collection__filter[open] > .collection__filter-title .icon-arrow {
  transform: rotate(180deg) !important;
}

/* Badge jumlah filter terpilih pada header accordion */
.v2-filter-count-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: #e8a519 !important;
  color: #1c4b62 !important;
  border: 1.5px solid #1c4b62 !important;
  border-radius: 99px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  width: 20px !important;
  height: 20px !important;
  margin-left: 6px !important;
}

/* Container di dalam accordion saat terbuka */
body#v2-page .collection__filter-container,
body.page-v2 .collection__filter-container,
.collection__filters--left .collection__filter-container,
.collection__filter-container {
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  padding: 10px 12px 14px !important;
  margin: 0 !important;
  background-color: #ffffff !important;
  overflow: visible !important;
  pointer-events: auto !important;
  max-height: none !important;
}
body#v2-page .collection__filter-tags,
body.page-v2 .collection__filter-tags,
.collection__filter-tags {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
  border-bottom: none !important;
  max-height: 260px !important;
  overflow-y: auto !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Opsi Checkbox Standar (Category, Materials, Craft, Collection) */
body#v2-page .collection__filter-tag,
body.page-v2 .collection__filter-tag,
.collection__filter-tag {
  margin: 0 !important;
  position: relative !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
body#v2-page .collection__filter-tag--default .collection__filter-tag-btn,
body.page-v2 .collection__filter-tag--default .collection__filter-tag-btn,
.collection__filter-tag--default .collection__filter-tag-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 6px 8px !important;
  margin: 0 !important;
  border: 1.5px solid transparent !important;
  border-radius: 6px !important;
  background: transparent !important;
  box-shadow: none !important;
  cursor: pointer !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #1c4b62 !important;
  transition: all 0.15s ease !important;
  text-align: left !important;
  line-height: normal !important;
}
body#v2-page .collection__filter-tag--default .collection__filter-tag-btn:hover,
body.page-v2 .collection__filter-tag--default .collection__filter-tag-btn:hover,
.collection__filter-tag--default .collection__filter-tag-btn:hover {
  background-color: #fff8eb !important;
  border-color: #1c4b62 !important;
  transform: none !important;
}
/* Kotak Checkbox Neobrutalis */
body#v2-page .collection__filter-tag--default .collection__filter-tag-btn::before,
body.page-v2 .collection__filter-tag--default .collection__filter-tag-btn::before,
.collection__filter-tag--default .collection__filter-tag-btn::before {
  content: "" !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: static !important;
  width: 16px !important;
  height: 16px !important;
  border: 2px solid #1c4b62 !important;
  border-radius: 4px !important;
  background-color: #ffffff !important;
  margin-right: 9px !important;
  flex-shrink: 0 !important;
  box-shadow: 1px 1px 0 #1c4b62 !important;
  transition: all 0.15s ease !important;
}
/* Checked State */
body#v2-page .collection__filter-tag--default input:checked + .collection__filter-tag-btn,
body.page-v2 .collection__filter-tag--default input:checked + .collection__filter-tag-btn,
.collection__filter-tag--default input:checked + .collection__filter-tag-btn {
  background-color: #fdf2dc !important;
  border-color: #1c4b62 !important;
  color: #1c4b62 !important;
  font-weight: 700 !important;
}
body#v2-page .collection__filter-tag--default input:checked + .collection__filter-tag-btn::before,
body.page-v2 .collection__filter-tag--default input:checked + .collection__filter-tag-btn::before,
.collection__filter-tag--default input:checked + .collection__filter-tag-btn::before {
  background-color: #e8a519 !important;
  border-color: #1c4b62 !important;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.5 7.5L5.5 10.5L11.5 3.5' stroke='%231c4b62' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 11px 11px !important;
}
body#v2-page .collection__filter-tag--default .collection__filter-tag-btn .icon-check,
body.page-v2 .collection__filter-tag--default .collection__filter-tag-btn .icon-check,
.collection__filter-tag--default .collection__filter-tag-btn .icon-check {
  display: none !important;
}

/* Opsi Filter Warna (Color Swatches) */
body#v2-page .collection__filter-tags--swatches,
body.page-v2 .collection__filter-tags--swatches,
.collection__filter-tags--swatches {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  width: 100% !important;
}
body#v2-page .collection__filter-tag--swatch,
body.page-v2 .collection__filter-tag--swatch,
.collection__filter-tag--swatch {
  width: 100% !important;
}
body#v2-page .collection__filter-tag--swatch .collection__filter-tag-btn,
body.page-v2 .collection__filter-tag--swatch .collection__filter-tag-btn,
.collection__filter-tag--swatch .collection__filter-tag-btn {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 5px 8px !important;
  margin: 0 !important;
  border: 1.5px solid transparent !important;
  border-radius: 6px !important;
  background: transparent !important;
  box-shadow: none !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}
body#v2-page .collection__filter-tag--swatch .collection__filter-tag-btn:hover,
body.page-v2 .collection__filter-tag--swatch .collection__filter-tag-btn:hover,
.collection__filter-tag--swatch .collection__filter-tag-btn:hover {
  background-color: #fff8eb !important;
  border-color: #1c4b62 !important;
}
body#v2-page .collection__filter-tag--swatch .swatch__label,
body.page-v2 .collection__filter-tag--swatch .swatch__label,
.collection__filter-tag--swatch .swatch__label {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  cursor: pointer !important;
  height: auto !important;
}
body#v2-page .collection__filter-tag--swatch .swatch__color,
body.page-v2 .collection__filter-tag--swatch .swatch__color,
.collection__filter-tag--swatch .swatch__color {
  display: inline-block !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  border: 2px solid #1c4b62 !important;
  margin-right: 9px !important;
  flex-shrink: 0 !important;
  box-shadow: 1px 1px 0 #1c4b62 !important;
}
/* Palet Warna Alami Kersantara */
.swatch__color--sappanpink { background-color: #d96b82 !important; }
.swatch__color--sappanpink-lavender { background-color: #c49cb5 !important; }
.swatch__color--sweetindigo-black { background-color: #1c2630 !important; }
.swatch__color--sweetindigo-blue,
.swatch__color--sweetindigo-medium-blue { background-color: #2b5c7d !important; }
.swatch__color--sweetindigo-forest { background-color: #2c544d !important; }
.swatch__color--sweetindigo-porcelain { background-color: #ede7da !important; }
.swatch__color--threebark-red,
.swatch__color--threebark-red-seasonal { background-color: #9c382c !important; }

body#v2-page .collection__filter-tag--swatch .swatch__color-name,
body.page-v2 .collection__filter-tag--swatch .swatch__color-name,
.collection__filter-tag--swatch .swatch__color-name {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #1c4b62 !important;
}
body#v2-page .collection__filter-tag--swatch:has(input:checked) .collection__filter-tag-btn,
body.page-v2 .collection__filter-tag--swatch:has(input:checked) .collection__filter-tag-btn,
.collection__filter-tag--swatch:has(input:checked) .collection__filter-tag-btn {
  background-color: #fdf2dc !important;
  border-color: #1c4b62 !important;
}
body#v2-page .collection__filter-tag--swatch:has(input:checked) .swatch__color-name,
body.page-v2 .collection__filter-tag--swatch:has(input:checked) .swatch__color-name,
.collection__filter-tag--swatch:has(input:checked) .swatch__color-name {
  font-weight: 700 !important;
}
body#v2-page .collection__filter-tag--swatch:has(input:checked) .swatch__color,
body.page-v2 .collection__filter-tag--swatch:has(input:checked) .swatch__color,
.collection__filter-tag--swatch:has(input:checked) .swatch__color {
  box-shadow: 0 0 0 2px #e8a519, 2px 2px 0 #1c4b62 !important;
  transform: scale(1.1) !important;
}

/* Active Filter Chips Container */
body#v2-page .collection__active__filters,
body.page-v2 .collection__active__filters {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin: 0 0 14px 0 !important;
}
.v2-active-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background-color: #e8a519;
  color: #1c4b62;
  border: 2px solid #1c4b62;
  border-radius: 99px;
  padding: 3px 10px;
  font-size: 11.5px;
  font-weight: 700;
  box-shadow: 2px 2px 0 #1c4b62;
  cursor: pointer;
  transition: all 0.15s ease;
}
.v2-active-filter-chip:hover {
  background-color: #cd3318;
  color: #ffffff;
  transform: translate(-1px, -1px);
}
.v2-active-filter-chip-remove {
  font-size: 13px;
  line-height: 1;
}

/* Catalog Results Top Bar (Counter & Active Chips) */
.v2-catalog-top-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin-bottom: 20px !important;
  padding: 10px 16px !important;
  background-color: #ffffff !important;
  border: 2.5px solid #1c4b62 !important;
  border-radius: 10px !important;
  box-shadow: 3px 3px 0 #1c4b62 !important;
  box-sizing: border-box !important;
  width: 100% !important;
}
.v2-catalog-results-count {
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: #1c4b62 !important;
}
.v2-catalog-results-count strong {
  color: #1c4b62 !important;
  font-weight: 800 !important;
}

/* Sort dropdown popout */
body#v2-page .popout__toggle,
body.page-v2 .popout__toggle {
  background-color: #ffffff !important;
  border: 2.5px solid #1c4b62 !important;
  border-radius: 8px !important;
  box-shadow: 3px 3px 0 #1c4b62 !important;
  color: #1c4b62 !important;
  font-weight: 600 !important;
}
body#v2-page .popout-list,
body.page-v2 .popout-list {
  background-color: #ffffff !important;
  border: 3px solid #1c4b62 !important;
  border-radius: 10px !important;
  box-shadow: 5px 5px 0 #1c4b62 !important;
}

/* ============================================================
   RESPONSIVE LAYOUT (DESKTOP / TABLET / MOBILE)
   /* 1. DESKTOP (>= 1024px) */
@media (min-width: 1024px) {
  body#v2-page .collection-grid:not(.featured-collection),
  body.page-v2 .collection-grid:not(.featured-collection),
  .collection-grid:not(.featured-collection) {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 24px !important;
    max-width: 1440px !important;
    margin: 0 auto !important;
    padding: 24px 32px 64px !important;
    box-sizing: border-box !important;
    width: 100% !important;
  }

  body#v2-page .collection__filters--left,
  body.page-v2 .collection__filters--left,
  .collection__filters--left {
    float: none !important;
    width: 240px !important;
    min-width: 240px !important;
    max-width: 240px !important;
    flex: 0 0 240px !important;
    position: sticky !important;
    top: 96px !important;
    max-height: calc(100vh - 116px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    z-index: 10 !important;
  }

  .collection__filters--left::-webkit-scrollbar {
    width: 5px;
  }
  .collection__filters--left::-webkit-scrollbar-track {
    background: transparent;
  }
  .collection__filters--left::-webkit-scrollbar-thumb {
    background: #1c4b6240;
    border-radius: 4px;
  }

  body#v2-page .collection-grid__wrapper,
  body.page-v2 .collection-grid__wrapper,
  .collection-grid__wrapper {
    float: none !important;
    flex: 1 1 0% !important;
    min-width: 0 !important;
    width: auto !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .collection-grid__wrapper > .container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  body#v2-page .collection-grid:not(.featured-collection) .collection-grid__row--grid,
  body.page-v2 .collection-grid:not(.featured-collection) .collection-grid__row--grid,
  .collection-grid:not(.featured-collection) .collection-grid__row--grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 24px !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }
}

/* 2. TABLET (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
  body#v2-page .collection-grid:not(.featured-collection),
  body.page-v2 .collection-grid:not(.featured-collection),
  .collection-grid:not(.featured-collection) {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 20px !important;
    padding: 20px 24px 48px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  body#v2-page .collection__filters--left,
  body.page-v2 .collection__filters--left,
  .collection__filters--left {
    float: none !important;
    width: 240px !important;
    min-width: 240px !important;
    max-width: 240px !important;
    flex: 0 0 240px !important;
    position: sticky !important;
    top: 80px !important;
    max-height: calc(100vh - 100px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    z-index: 10 !important;
  }

  body#v2-page .collection-grid__wrapper,
  body.page-v2 .collection-grid__wrapper,
  .collection-grid__wrapper {
    float: none !important;
    flex: 1 1 0% !important;
    min-width: 0 !important;
    width: auto !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .collection-grid__wrapper > .container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  body#v2-page .collection-grid:not(.featured-collection) .collection-grid__row--grid,
  body.page-v2 .collection-grid:not(.featured-collection) .collection-grid__row--grid,
  .collection-grid:not(.featured-collection) .collection-grid__row--grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }
}

/* 3. MOBILE (< 768px) */
@media (max-width: 767px) {
  body#v2-page .collection-grid:not(.featured-collection),
  body.page-v2 .collection-grid:not(.featured-collection),
  .collection-grid:not(.featured-collection) {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    padding: 12px 14px 40px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  body#v2-page .collection__filters--left,
  body.page-v2 .collection__filters--left,
  .collection__filters--left {
    float: none !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    position: static !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 0 !important;
    margin: 0 0 8px 0 !important;
  }

  body#v2-page .collection-grid__wrapper,
  body.page-v2 .collection-grid__wrapper,
  .collection-grid__wrapper {
    float: none !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .collection-grid__wrapper > .container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  body#v2-page .collection-grid:not(.featured-collection) .collection-grid__row--grid,
  body.page-v2 .collection-grid:not(.featured-collection) .collection-grid__row--grid,
  .collection-grid:not(.featured-collection) .collection-grid__row--grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }
}

  .v2-catalog-top-bar {
    padding: 8px 12px !important;
    margin-bottom: 14px !important;
    font-size: 12px !important;
  }
  .v2-catalog-results-count {
    font-size: 12px !important;
  }

  /* Proporsi ukuran kartu di HP */
  body#v2-page .collection-grid .product-block__info,
  body.page-v2 .collection-grid .product-block__info {
    padding: 10px 8px 12px !important;
    min-height: 60px !important;
  }
  body#v2-page .collection-grid .product-block__title a,
  body.page-v2 .collection-grid .product-block__title a {
    font-size: 12px !important;
    line-height: 1.3 !important;
  }
  body#v2-page .collection-grid .price,
  body.page-v2 .collection-grid .price {
    font-size: 12px !important;
  }
  body#v2-page .collection-grid .product__badge__item,
  body.page-v2 .collection-grid .product__badge__item {
    font-size: 9.5px !important;
    padding: 2px 5px !important;
  }
}

/* 4. EXTRA SMALL MOBILE (< 420px) */
@media (max-width: 419px) {
  body#v2-page .collection-grid,
  body.page-v2 .collection-grid,
  .collection-grid {
    padding: 10px 8px 36px !important;
    gap: 12px !important;
  }

  body#v2-page .collection-grid__row--grid,
  body.page-v2 .collection-grid__row--grid,
  .collection-grid__row--grid {
    gap: 8px !important;
  }

  body#v2-page .collection-grid .product-block__info,
  body.page-v2 .collection-grid .product-block__info {
    padding: 8px 6px 10px !important;
  }
  body#v2-page .collection-grid .product-block__title a,
  body.page-v2 .collection-grid .product-block__title a {
    font-size: 11px !important;
  }
  body#v2-page .collection-grid .price,
  body.page-v2 .collection-grid .price {
    font-size: 11.5px !important;
  }
}

/* ============================================================
   KARTU PRODUK (/catalog) — GAMBAR FULL BLEED & FLUSH SEJAJAR
   - Tanpa space kosong di atas (full mentok lekukan border kartu)
   - Tanpa space kosong di bawah (menempel rata garis pembatas)
   - Seluruh swatch kotak kecil di footer disembunyikan
   ============================================================ */
body#v2-page .collection-grid .product-block__inner,
body.page-v2 .collection-grid .product-block__inner {
  background-color: #ffffff !important;
  border: 3px solid #1c4b62 !important;
  border-radius: 12px !important;
  box-shadow: 4px 4px 0 #1c4b62 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
body#v2-page .collection-grid .product-block__inner:hover,
body.page-v2 .collection-grid .product-block__inner:hover {
  transform: translate(-2px, -2px) !important;
  box-shadow: 7px 7px 0 #1c4b62 !important;
}

/* Container Gambar: Mentok Atas & Sejajar Garis Bawah */
.no-touch .product-block__image,
.product-block__image,
body#v2-page .collection-grid .product-block__image,
body.page-v2 .collection-grid .product-block__image {
  padding-top: 0 !important;
  margin: 0 !important;
  position: relative !important;
  width: 100% !important;
  overflow: hidden !important;
  border-radius: 9px 9px 0 0 !important;
  border-bottom: 2.5px solid #1c4b62 !important;
  background-color: transparent !important;
  line-height: 0 !important;
  font-size: 0 !important;
}
.product-block__image-container,
body#v2-page .collection-grid .product-block__image-container,
body.page-v2 .collection-grid .product-block__image-container {
  position: static !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
}
/* Rasio 4:5 (125%) seragam di semua kartu, tanpa celah atas/bawah */
.product-block__image .image-wrapper:not(.product-block__image-hover__image),
body#v2-page .collection-grid .product-block__image .image-wrapper:not(.product-block__image-hover__image),
body.page-v2 .collection-grid .product-block__image .image-wrapper:not(.product-block__image-hover__image) {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  height: 0 !important;
  padding-top: 125% !important;
  overflow: hidden !important;
  margin: 0 !important;
  background-color: transparent !important;
}
.product-block__image img,
body#v2-page .collection-grid .product-block__image img,
body.page-v2 .collection-grid .product-block__image img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Link & Hover Gambar */
body#v2-page .collection-grid .product-block__image__link,
body.page-v2 .collection-grid .product-block__image__link {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  z-index: 2 !important;
}
body#v2-page .collection-grid .product-block__image-hover,
body.page-v2 .collection-grid .product-block__image-hover {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 2 !important;
}
body#v2-page .collection-grid .product-block__image-hover .image-wrapper,
body.page-v2 .collection-grid .product-block__image-hover .image-wrapper {
  padding-top: 0 !important;
  width: 100% !important;
  height: 100% !important;
}
body#v2-page .collection-grid .product-block__image-hover img,
body.page-v2 .collection-grid .product-block__image-hover img {
  object-fit: cover !important;
  width: 100% !important;
  height: 100% !important;
}

/* Badge (New Color / Limited) Overlay */
body#v2-page .collection-grid .product__badge,
body.page-v2 .collection-grid .product__badge {
  position: absolute !important;
  top: 10px !important;
  left: 10px !important;
  z-index: 4 !important;
  margin: 0 !important;
}
body#v2-page .collection-grid .product__badge__item,
body.page-v2 .collection-grid .product__badge__item {
  background-color: #cd3318 !important;
  color: #ffffff !important;
  border: 2px solid #1c4b62 !important;
  border-radius: 6px !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  padding: 3px 8px !important;
  box-shadow: 2px 2px 0 #1c4b62 !important;
}

/* Footer Info Kartu Produk */
body#v2-page .collection-grid .product-block__info,
body.page-v2 .collection-grid .product-block__info {
  background-color: #ffffff !important;
  padding: 14px 12px 16px !important;
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  min-height: 72px !important;
}
body#v2-page .collection-grid .product-block__title,
body.page-v2 .collection-grid .product-block__title {
  margin: 0 0 6px !important;
  min-height: 2.4em !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}
body#v2-page .collection-grid .product-block__title a,
body.page-v2 .collection-grid .product-block__title a {
  color: #1c4b62 !important;
  font-weight: 700 !important;
  font-size: 13.5px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  line-height: 1.35 !important;
}
body#v2-page .collection-grid .price,
body.page-v2 .collection-grid .price {
  color: #1c4b62 !important;
  font-weight: 800 !important;
  font-size: 13.5px !important;
  margin: 0 !important;
}

/* Sembunyikan Kotak Swatch Footer di Semua Kartu */
body#v2-page .product-block__swatch,
body.page-v2 .product-block__swatch,
body#v2-page [data-grid-swatches],
body.page-v2 [data-grid-swatches] {
  display: none !important;
}

/* Pagination */
body#v2-page .pagination-page,
body.page-v2 .pagination-page {
  border: 2px solid #1c4b62 !important;
  border-radius: 6px !important;
  background-color: #ffffff !important;
  color: #1c4b62 !important;
  font-weight: 700 !important;
  box-shadow: 2px 2px 0 #1c4b62 !important;
}
body#v2-page .pagination-page.is-current,
body.page-v2 .pagination-page.is-current {
  background-color: #e8a519 !important;
}

/* ---------- E. Halaman Produk (/product) ---------- */
body#v2-page .product,
body.page-v2 .product,
body#v2-page .featured-product,
body.page-v2 .featured-product {
  background-color: #fff8eb !important;
}
body#v2-page .product-image,
body.page-v2 .product-image {
  border: none !important;
  box-shadow: none !important;
  background-color: transparent !important;
  margin-bottom: 0 !important;
}
body#v2-page .product-single__media,
body.page-v2 .product-single__media {
  border: 3px solid #1c4b62 !important;
  border-radius: 12px !important;
  box-shadow: 5px 5px 0 #1c4b62 !important;
  overflow: hidden !important;
  background-color: #ffffff !important;
  margin-bottom: 18px !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
body#v2-page .product-single__media:hover,
body.page-v2 .product-single__media:hover {
  box-shadow: 7px 7px 0 #1c4b62 !important;
}
body#v2-page .product__title,
body.page-v2 .product__title {
  color: #1c4b62 !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
}
body#v2-page .product__price,
body.page-v2 .product__price {
  color: #1c4b62 !important;
  font-weight: 800 !important;
  font-size: 1.6rem !important;
}
body#v2-page .product__price--sale,
body.page-v2 .product__price--sale {
  color: #cd3318 !important;
}


/* ---------- F. Halaman Cart (/cart) ---------- */
body#v2-page .cart-wrapper,
body.page-v2 .cart-wrapper,
body#v2-page .cart,
body.page-v2 .cart {
  background-color: #fff8eb !important;
}
body#v2-page .cart__table,
body.page-v2 .cart__table {
  background-color: #ffffff !important;
  border: 3px solid #1c4b62 !important;
  border-radius: 12px !important;
  box-shadow: 5px 5px 0 #1c4b62 !important;
  padding: 20px !important;
  margin-bottom: 24px !important;
}
body#v2-page .cart__table-header,
body.page-v2 .cart__table-header {
  border-bottom: 3px solid #1c4b62 !important;
  font-weight: 700 !important;
  color: #1c4b62 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
}
body#v2-page .cart__table-row,
body.page-v2 .cart__table-row {
  border-bottom: 2px solid rgba(28, 75, 98, 0.15) !important;
}
body#v2-page .checkout-buttons,
body.page-v2 .checkout-buttons,
body#v2-page .cart-totals,
body.page-v2 .cart-totals {
  background-color: #ffffff !important;
  border: 3px solid #1c4b62 !important;
  border-radius: 12px !important;
  box-shadow: 5px 5px 0 #1c4b62 !important;
  padding: 20px !important;
}
body#v2-page .cart-total-price,
body.page-v2 .cart-total-price {
  color: #1c4b62 !important;
  font-weight: 800 !important;
  font-size: 1.3rem !important;
}

/* ---------- G. Halaman Testimoni (/testimoni) ---------- */
body#v2-page .testimoni-hero,
body.page-v2 .testimoni-hero {
  background-color: #fff8eb !important;
  border-bottom: 3px solid #1c4b62 !important;
}
body#v2-page .testimoni-card,
body.page-v2 .testimoni-card {
  background-color: #ffffff !important;
  border: 3px solid #1c4b62 !important;
  border-radius: 12px !important;
  box-shadow: 5px 5px 0 #1c4b62 !important;
  padding: 22px !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
body#v2-page .testimoni-card:hover,
body.page-v2 .testimoni-card:hover {
  transform: translate(-2px, -2px) !important;
  box-shadow: 7px 7px 0 #1c4b62 !important;
}
body#v2-page .jdgm-rev__rating,
body.page-v2 .jdgm-rev__rating {
  color: #e8a519 !important;
  font-weight: 800 !important;
}
body#v2-page .testimoni-nav,
body.page-v2 .testimoni-nav {
  width: 50px !important;
  height: 50px !important;
  background-color: #ffffff !important;
  color: #1c4b62 !important;
  border: 2.5px solid #1c4b62 !important;
  box-shadow: 4px 4px 0 #1c4b62 !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 10 !important;
  cursor: pointer !important;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
}
body#v2-page .testimoni-nav svg,
body.page-v2 .testimoni-nav svg {
  display: block !important;
  width: 22px !important;
  height: 22px !important;
  stroke: #1c4b62 !important;
  stroke-width: 2.8px !important;
  fill: none !important;
  pointer-events: none !important;
  transition: stroke 0.2s ease, transform 0.2s ease !important;
}
body#v2-page .testimoni-nav svg polyline,
body.page-v2 .testimoni-nav svg polyline,
body#v2-page .testimoni-nav svg path,
body.page-v2 .testimoni-nav svg path {
  stroke: #1c4b62 !important;
  stroke-width: 2.8px !important;
  fill: none !important;
}
body#v2-page .testimoni-nav:hover,
body.page-v2 .testimoni-nav:hover {
  background-color: #e8a519 !important;
  border-color: #1c4b62 !important;
  color: #1c4b62 !important;
  box-shadow: 6px 6px 0 #1c4b62 !important;
}
body#v2-page .testimoni-nav:active,
body.page-v2 .testimoni-nav:active {
  box-shadow: 2px 2px 0 #1c4b62 !important;
  background-color: #d89614 !important;
}
body#v2-page .testimoni-nav.is-hidden,
body.page-v2 .testimoni-nav.is-hidden,
body#v2-page .testimoni-nav[hidden],
body.page-v2 .testimoni-nav[hidden],
body#v2-page .testimoni-slider-wrapper.is-vertical .testimoni-nav,
body.page-v2 .testimoni-slider-wrapper.is-vertical .testimoni-nav,
body#v2-page.is-testimoni-vertical .testimoni-nav,
body.page-v2.is-testimoni-vertical .testimoni-nav,
body#v2-page.is-testimoni-vertical .testimoni-header-nav,
body.page-v2.is-testimoni-vertical .testimoni-header-nav,
body#v2-page.is-testimoni-vertical .testimoni-mini-nav,
body.page-v2.is-testimoni-vertical .testimoni-mini-nav,
body#v2-page .testimoni-header-nav.is-hidden,
body.page-v2 .testimoni-header-nav.is-hidden {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
body#v2-page .testimoni-mini-nav,
body.page-v2 .testimoni-mini-nav {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  border: 2.5px solid #1c4b62 !important;
  background-color: #ffffff !important;
  color: #1c4b62 !important;
  box-shadow: 3px 3px 0 #1c4b62 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.18s ease !important;
}
body#v2-page .testimoni-mini-nav:hover,
body.page-v2 .testimoni-mini-nav:hover {
  background-color: #e8a519 !important;
  transform: translate(-1.5px, -1.5px) !important;
  box-shadow: 4.5px 4.5px 0 #1c4b62 !important;
}
body#v2-page .testimoni-mini-nav:active,
body.page-v2 .testimoni-mini-nav:active {
  background-color: #d89614 !important;
  transform: translate(1px, 1px) !important;
  box-shadow: 1.5px 1.5px 0 #1c4b62 !important;
}
body#v2-page .testimoni-mini-nav svg,
body.page-v2 .testimoni-mini-nav svg {
  display: block !important;
  stroke: #1c4b62 !important;
  stroke-width: 2.8px !important;
  fill: none !important;
  pointer-events: none !important;
}

/* ---------- H. Halaman Blog & Article (/blog, /article) ---------- */
body#v2-page .blog-module-posts.grid,
body.page-v2 .blog-module-posts.grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  column-gap: 26px !important;
  row-gap: 34px !important;
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 10px 16px 40px !important;
}

@media only screen and (max-width: 1023px) {
  body#v2-page .blog-module-posts.grid,
  body.page-v2 .blog-module-posts.grid {
    grid-template-columns: repeat(2, 1fr) !important;
    column-gap: 20px !important;
    row-gap: 28px !important;
  }
}

@media only screen and (max-width: 599px) {
  body#v2-page .blog-module-posts.grid,
  body.page-v2 .blog-module-posts.grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    padding: 10px 12px 30px !important;
  }
}

body#v2-page .blog-module-posts__post,
body.page-v2 .blog-module-posts__post {
  background-color: #ffffff !important;
  border: 2.5px solid #e8a519 !important;
  border-radius: 12px !important;
  box-shadow: 4px 4px 0 #e8a519 !important;
  overflow: hidden !important;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  float: none !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 1 !important;
}

body#v2-page .blog-module-posts:hover .blog-module-posts__post,
body.page-v2 .blog-module-posts:hover .blog-module-posts__post {
  opacity: 1 !important;
}

body#v2-page .blog-module-posts__post:hover,
body.page-v2 .blog-module-posts__post:hover {
  transform: translate(-3px, -3px) !important;
  box-shadow: 7px 7px 0 #e8a519 !important;
  border-color: #e8a519 !important;
  opacity: 1 !important;
}

body#v2-page .blog-module-posts__post-block,
body.page-v2 .blog-module-posts__post-block {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
  font-size: 0 !important;
  display: block !important;
}

body#v2-page .blog-module-posts__post .post__image,
body.page-v2 .blog-module-posts__post .post__image {
  border-bottom: 2.5px solid #e8a519 !important;
  display: block !important;
  width: 100% !important;
  overflow: hidden !important;
  line-height: 0 !important;
  font-size: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
}

body#v2-page .blog-module-posts__post .post__image .image-wrapper,
body.page-v2 .blog-module-posts__post .post__image .image-wrapper {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  height: 0 !important;
  padding-top: 55.5556% !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-bottom: 0 !important;
  line-height: 0 !important;
}

body#v2-page .blog-module-posts__post .post__image img,
body.page-v2 .blog-module-posts__post .post__image img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

body#v2-page .blog-module-posts__post:hover .post__image img,
body.page-v2 .blog-module-posts__post:hover .post__image img {
  transform: scale(1.05) !important;
}

body#v2-page .article__info,
body.page-v2 .article__info {
  padding: 16px 18px 20px !important;
  background-color: #ffffff !important;
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  text-decoration: none !important;
}

body#v2-page .article__title,
body.page-v2 .article__title {
  color: #1c4b62 !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  line-height: 1.38 !important;
  letter-spacing: 0.4px !important;
  text-transform: uppercase !important;
  margin: 0 !important;
}

body#v2-page .article,
body.page-v2 .article,
body#v2-page [data-section-type="article"],
body.page-v2 [data-section-type="article"] {
  color: #1c4b62 !important;
}

/* ---------- I. Halaman Membership (/membership) ---------- */
body#v2-page #shopify-section-template--20532473659553__section_icons_row_37D893,
body.page-v2 #shopify-section-template--20532473659553__section_icons_row_37D893,
body#v2-page .icons-row,
body.page-v2 .icons-row,
body#v2-page .icons-row__background,
body.page-v2 .icons-row__background {
  background-color: transparent !important;
  background: transparent !important;
}

body#v2-page .icons-row-wrapper,
body.page-v2 .icons-row-wrapper {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 28px !important;
  justify-content: center !important;
  align-items: stretch !important;
  margin: 0 auto !important;
  width: 100% !important;
}

body#v2-page .icons-row__item,
body.page-v2 .icons-row__item {
  flex: 1 1 0 !important;
  width: auto !important;
  max-width: 380px !important;
  background-color: #ffffff !important;
  background: #ffffff !important;
  border: 3px solid #1c4b62 !important;
  border-radius: 14px !important;
  box-shadow: 5px 5px 0 #1c4b62 !important;
  padding: 36px 28px !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  box-sizing: border-box !important;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

body#v2-page .icons-row__item:hover,
body.page-v2 .icons-row__item:hover {
  transform: translate(-3px, -3px) !important;
  box-shadow: 8px 8px 0 #1c4b62 !important;
}

body#v2-page .icons-row__item svg,
body.page-v2 .icons-row__item svg {
  max-height: 48px !important;
  width: auto !important;
  margin: 0 auto !important;
  display: inline-block !important;
}

body#v2-page .icons-row__title,
body.page-v2 .icons-row__title {
  color: #1c4b62 !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  margin-top: 16px !important;
  margin-bottom: 12px !important;
}

body#v2-page .icons-row__content,
body.page-v2 .icons-row__content,
body#v2-page .icons-row__content p,
body.page-v2 .icons-row__content p {
  color: #1c4b62 !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  margin: 0 !important;
}

@media (max-width: 768px) {
  body#v2-page .icons-row-wrapper,
  body.page-v2 .icons-row-wrapper {
    flex-direction: column !important;
    gap: 20px !important;
    align-items: center !important;
  }
  body#v2-page .icons-row__item,
  body.page-v2 .icons-row__item {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Membership Hero Section - Remove #fff8ec top gap & enlarge hero layout */
body#v2-page.template-page #MainContent:has(#Banner--template--20532473659553__section_image_with_text_overlay_qG6kwD),
body.page-v2.template-page #MainContent:has(#Banner--template--20532473659553__section_image_with_text_overlay_qG6kwD),
body#v2-page .main-content:has(#shopify-section-template--20532473659553__section_image_with_text_overlay_qG6kwD),
body.page-v2 .main-content:has(#shopify-section-template--20532473659553__section_image_with_text_overlay_qG6kwD) {
  padding-top: 0 !important;
}

body#v2-page #shopify-section-template--20532473659553__main,
body.page-v2 #shopify-section-template--20532473659553__main {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

body#v2-page #shopify-section-template--20532473659553__section_image_with_text_overlay_qG6kwD,
body.page-v2 #shopify-section-template--20532473659553__section_image_with_text_overlay_qG6kwD,
body#v2-page #shopify-section-template--20532473659553__section_image_with_text_overlay_qG6kwD section,
body.page-v2 #shopify-section-template--20532473659553__section_image_with_text_overlay_qG6kwD section {
  padding-top: 0 !important;
  margin-top: 0 !important;
  position: relative !important;
}

body#v2-page #Banner--template--20532473659553__section_image_with_text_overlay_qG6kwD,
body.page-v2 #Banner--template--20532473659553__section_image_with_text_overlay_qG6kwD {
  min-height: 720px !important;
  height: 75vh !important;
  max-height: 880px !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}

body#v2-page #Banner--template--20532473659553__section_image_with_text_overlay_qG6kwD .banner__inner,
body.page-v2 #Banner--template--20532473659553__section_image_with_text_overlay_qG6kwD .banner__inner {
  height: 100% !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 60px 20px !important;
}

body#v2-page #Banner--template--20532473659553__section_image_with_text_overlay_qG6kwD .banner__image,
body.page-v2 #Banner--template--20532473659553__section_image_with_text_overlay_qG6kwD .banner__image,
body#v2-page #Banner--template--20532473659553__section_image_with_text_overlay_qG6kwD .image__hero__pane,
body.page-v2 #Banner--template--20532473659553__section_image_with_text_overlay_qG6kwD .image__hero__pane,
body#v2-page #Banner--template--20532473659553__section_image_with_text_overlay_qG6kwD .image__hero__scale,
body.page-v2 #Banner--template--20532473659553__section_image_with_text_overlay_qG6kwD .image__hero__scale {
  height: 100% !important;
  min-height: 100% !important;
  width: 100% !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
}

body#v2-page #Banner--template--20532473659553__section_image_with_text_overlay_qG6kwD .image__hero__scale img,
body.page-v2 #Banner--template--20532473659553__section_image_with_text_overlay_qG6kwD .image__hero__scale img {
  height: 100% !important;
  width: 100% !important;
  object-fit: cover !important;
}

@media (max-width: 768px) {
  body#v2-page #Banner--template--20532473659553__section_image_with_text_overlay_qG6kwD,
  body.page-v2 #Banner--template--20532473659553__section_image_with_text_overlay_qG6kwD {
    min-height: 520px !important;
    height: 65vh !important;
  }
}

/* Membership Comparison Table (Non-Member vs Member) */
body#v2-page .custom-code .table-container,
body.page-v2 .custom-code .table-container {
  max-width: 820px !important;
  margin: 0 auto !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

body#v2-page .tableizer-table,
body.page-v2 .tableizer-table {
  width: 100% !important;
  border-collapse: collapse !important;
}

body#v2-page .tableizer-table th,
body.page-v2 .tableizer-table th {
  color: #1c4b62 !important;
  font-family: var(--HEADING-FONT-FAMILY, Jost, sans-serif) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  padding: 16px 20px !important;
  border-bottom: 1.5px solid rgba(28, 75, 98, 0.2) !important;
}

body#v2-page .tableizer-table th:first-child,
body.page-v2 .tableizer-table th:first-child {
  width: 50% !important;
  text-align: left !important;
}

body#v2-page .tableizer-table th:not(:first-child),
body.page-v2 .tableizer-table th:not(:first-child) {
  width: 25% !important;
  text-align: center !important;
}

body#v2-page .tableizer-table td,
body.page-v2 .tableizer-table td {
  color: #1c4b62 !important;
  font-size: 14.5px !important;
  padding: 14px 20px !important;
  border-bottom: 1px solid rgba(28, 75, 98, 0.12) !important;
}

body#v2-page .tableizer-table td:first-child,
body.page-v2 .tableizer-table td:first-child {
  text-align: left !important;
  font-weight: 500 !important;
}

body#v2-page .tableizer-table td:not(:first-child),
body.page-v2 .tableizer-table td:not(:first-child) {
  text-align: center !important;
  font-size: 16px !important;
}

body#v2-page .tableizer-table tr:hover td,
body.page-v2 .tableizer-table tr:hover td {
  background-color: rgba(28, 75, 98, 0.04) !important;
}

body#v2-page .member-check,
body.page-v2 .member-check,
.member-check {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 22px !important;
  height: 22px !important;
  background-color: #1c4b62 !important;
  border-radius: 50% !important;
  box-shadow: 0 1px 3px rgba(28, 75, 98, 0.25) !important;
  vertical-align: middle !important;
  margin: 0 auto !important;
}

body#v2-page .member-check svg,
body.page-v2 .member-check svg,
.member-check svg {
  width: 13px !important;
  height: 13px !important;
  display: block !important;
}



/* ---------- J. Halaman Auth (/login, /register) ---------- */
body#v2-page .auth-wrap,
body.page-v2 .auth-wrap {
  background-color: #fff8eb !important;
}
body#v2-page .auth-card,
body.page-v2 .auth-card {
  background-color: #ffffff !important;
  border: 3.5px solid #1c4b62 !important;
  border-radius: 14px !important;
  box-shadow: 6px 6px 0 #1c4b62 !important;
  padding: 36px 28px !important;
  max-width: 480px !important;
  margin: 0 auto !important;
}
body#v2-page .auth-eyebrow,
body.page-v2 .auth-eyebrow {
  display: table !important;
  margin: 0 auto 12px auto !important;
  text-align: center !important;
  background-color: #1c4b62 !important;
  color: #ffffff !important;
  padding: 4px 14px !important;
  border-radius: 6px !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
}
body#v2-page .auth-title,
body.page-v2 .auth-title {
  color: #1c4b62 !important;
  font-weight: 800 !important;
  font-size: 2rem !important;
  letter-spacing: -0.01em !important;
  margin-bottom: 8px !important;
  text-align: center !important;
}
body#v2-page .auth-subtitle,
body.page-v2 .auth-subtitle {
  text-align: center !important;
}
body#v2-page .auth-form button[type="submit"],
body.page-v2 .auth-form button[type="submit"] {
  width: 100% !important;
  background-color: #e8a519 !important;
  color: #1c4b62 !important;
  border: 3px solid #1c4b62 !important;
  border-radius: 8px !important;
  box-shadow: 4px 4px 0 #1c4b62 !important;
  font-weight: 800 !important;
  padding: 14px !important;
  font-size: 15px !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  margin-top: 12px !important;
}

/* ---------- K. Halaman FAQs & Informasi (About, Contact, FAQs, 404, Shipping, Terms) ---------- */
body#v2-page .main-content details,
body.page-v2 .main-content details,
body#v2-page .faq-accordion details,
body.page-v2 .faq-accordion details {
  background-color: #ffffff !important;
  border: 2.5px solid #1c4b62 !important;
  border-radius: 10px !important;
  box-shadow: 4px 4px 0 #1c4b62 !important;
  padding: 16px 20px !important;
  margin-bottom: 14px !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}
body#v2-page .main-content details:hover,
body.page-v2 .main-content details:hover,
body#v2-page .faq-accordion details:hover,
body.page-v2 .faq-accordion details:hover {
  transform: translate(-1px, -1px) !important;
  box-shadow: 5px 5px 0 #1c4b62 !important;
}
body#v2-page .main-content details[open],
body.page-v2 .main-content details[open],
body#v2-page .faq-accordion details[open],
body.page-v2 .faq-accordion details[open] {
  border-color: #1c4b62 !important;
  box-shadow: 5px 5px 0 #1c4b62 !important;
}
body#v2-page .main-content details summary,
body.page-v2 .main-content details summary,
body#v2-page .faq-accordion details summary,
body.page-v2 .faq-accordion details summary {
  color: #1c4b62 !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  cursor: pointer !important;
}

/* Header Details & Popdown Absolute Clean Reset: Cegah background putih/box pada tombol header */
#v2-page .site-header details,
#v2-page .site-header header-search-popdown,
#v2-page .site-header header-search-popdown details,
#v2-page .site-header .header__icons details,
body.page-v2 .site-header details,
body.page-v2 .site-header header-search-popdown {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: auto !important;
  height: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* 404 Box */
body#v2-page.template-404 .main-content .container,
body.page-v2.template-404 .main-content .container {
  background-color: #ffffff !important;
  border: 3.5px solid #1c4b62 !important;
  border-radius: 16px !important;
  box-shadow: 6px 6px 0 #1c4b62 !important;
  padding: 48px 32px !important;
}


/* ==========================================================================
   NEO-BRUTALIST SEARCH MODAL & BACKDROP (GLOBAL STOREFRONT)
   ========================================================================== */
#v2-search-backdrop {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(15, 43, 56, 0.65) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  z-index: 10000000 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.25s linear !important;
}

body.v2-search-is-open #v2-search-backdrop {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

#v2-search-modal {
  position: fixed !important;
  top: 10% !important;
  left: 50% !important;
  transform: translate(-50%, -10px) scale(0.97) !important;
  width: min(680px, 94vw) !important;
  max-width: 94vw !important;
  max-height: 82vh !important;
  background: #fff8eb !important;
  border: 3px solid #1c4b62 !important;
  border-radius: 16px !important;
  box-shadow: 8px 8px 0px #1c4b62 !important;
  z-index: 10000001 !important;
  display: flex !important;
  flex-direction: column !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1), transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.25s linear !important;
  font-family: inherit !important;
  overflow: hidden !important;
}

body.v2-search-is-open #v2-search-modal {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translate(-50%, 0) scale(1) !important;
}

body.v2-search-is-open {
  overflow: hidden !important;
}

/* Modal Internal Layout */
.v2-search-modal-container {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  max-height: 82vh !important;
}

/* Header */
.v2-search-header {
  display: flex !important;
  align-items: center !important;
  position: relative !important;
  padding: 14px 60px 14px 22px !important;
  background: #fff8eb !important;
  border-bottom: 2px solid #1c4b62 !important;
  min-height: 54px !important;
  box-sizing: border-box !important;
}

.v2-search-header-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: #1c4b62 !important;
  color: #fff8eb !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: 5px 12px !important;
  border-radius: 999px !important;
  border: 1.5px solid #1c4b62 !important;
  box-shadow: 2px 2px 0px #e8a519 !important;
}

.v2-search-badge-dot {
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: #e8a519 !important;
  display: inline-block !important;
  animation: v2Pulse 1.8s infinite ease-in-out !important;
}

@keyframes v2Pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.35); opacity: 0.7; }
}

.v2-search-close-btn {
  position: absolute !important;
  top: 10px !important;
  right: 18px !important;
  background: #ffffff !important;
  border: 2px solid #1c4b62 !important;
  border-radius: 8px !important;
  box-shadow: 2px 2px 0px #1c4b62 !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  color: #1c4b62 !important;
  transition: all 0.15s ease !important;
  padding: 0 !important;
  z-index: 50 !important;
}

.v2-search-close-btn:hover {
  background: #e8a519 !important;
  transform: translate(-1px, -1px) !important;
  box-shadow: 3px 3px 0px #1c4b62 !important;
}

.v2-search-close-btn:active {
  transform: translate(1px, 1px) !important;
  box-shadow: 1px 1px 0px #1c4b62 !important;
}

/* Search Form Bar */
.v2-search-form {
  padding: 18px 22px 12px !important;
  background: #fff8eb !important;
  margin: 0 !important;
}

.v2-search-input-wrap {
  display: flex !important;
  align-items: center !important;
  position: relative !important;
  background: #ffffff !important;
  border: 2.5px solid #1c4b62 !important;
  border-radius: 12px !important;
  box-shadow: 4px 4px 0px #1c4b62 !important;
  padding: 4px 6px 4px 16px !important;
  min-height: 52px !important;
  box-sizing: border-box !important;
  transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.15s ease !important;
}

.v2-search-input-wrap:focus-within {
  box-shadow: 5px 5px 0px #e8a519 !important;
  border-color: #1c4b62 !important;
}

.v2-search-input-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-right: 10px !important;
  color: #1c4b62 !important;
  flex-shrink: 0 !important;
  width: 22px !important;
  height: 22px !important;
  pointer-events: none !important;
}

.v2-search-input-icon svg {
  width: 20px !important;
  height: 20px !important;
  display: block !important;
  stroke: #1c4b62 !important;
}

/* THE INPUT: completely borderless, seamless, transparent, and CENTERED */
body#v2-page input#v2-search-input,
body.page-v2 input#v2-search-input,
body input#v2-search-input,
#v2-search-modal input.v2-search-input,
.v2-search-input-wrap input.v2-search-input,
input.v2-search-input {
  all: unset !important;
  box-sizing: border-box !important;
  display: block !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 40px !important;
  line-height: 40px !important;
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  border-style: none !important;
  border-radius: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  font-family: inherit !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #1c4b62 !important;
  text-align: center !important;
  padding: 0 10px !important;
  margin: 0 !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

body#v2-page input#v2-search-input:focus,
body.page-v2 input#v2-search-input:focus,
body input#v2-search-input:focus,
#v2-search-modal input.v2-search-input:focus,
.v2-search-input-wrap input.v2-search-input:focus,
input.v2-search-input:focus {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  text-align: center !important;
}

/* Sample text / placeholder positioned in the center, professional and clean */
body#v2-page input#v2-search-input::placeholder,
body.page-v2 input#v2-search-input::placeholder,
body input#v2-search-input::placeholder,
#v2-search-modal input.v2-search-input::placeholder,
.v2-search-input-wrap input.v2-search-input::placeholder,
input.v2-search-input::placeholder {
  text-align: center !important;
  color: #8c7f70 !important;
  font-size: 14.5px !important;
  font-weight: 500 !important;
  opacity: 0.9 !important;
  letter-spacing: 0.2px !important;
}

.v2-search-input::-webkit-search-cancel-button,
.v2-search-input::-webkit-search-decoration {
  -webkit-appearance: none !important;
  appearance: none !important;
  display: none !important;
}

/* Clear button: hidden by default, shown only when text is entered */
.v2-search-clear-btn {
  background: #f0e6d6 !important;
  border: 1.5px solid #1c4b62 !important;
  border-radius: 6px !important;
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  min-height: 26px !important;
  display: none;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  color: #1c4b62 !important;
  margin: 0 8px 0 4px !important;
  flex-shrink: 0 !important;
  transition: all 0.15s ease !important;
  padding: 0 !important;
}

.v2-search-clear-btn.is-active,
.v2-search-clear-btn[style*="display: flex"],
.v2-search-clear-btn[style*="display: inline-flex"],
.v2-search-clear-btn[style*="display:block"] {
  display: flex !important;
}

.v2-search-clear-btn:hover {
  background: #ffdede !important;
  border-color: #c92a2a !important;
  color: #c92a2a !important;
  transform: scale(1.05) !important;
}

/* Submit button: crisp neo-brutalist pill button */
.v2-search-submit-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  background: #e8a519 !important;
  color: #1c4b62 !important;
  border: 2px solid #1c4b62 !important;
  border-radius: 8px !important;
  box-shadow: 2px 2px 0px #1c4b62 !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  padding: 8px 15px !important;
  height: 38px !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  transition: all 0.15s ease !important;
  box-sizing: border-box !important;
}

.v2-search-submit-btn:hover {
  background: #1c4b62 !important;
  color: #fff8eb !important;
  transform: translate(-1px, -1px) !important;
  box-shadow: 3px 3px 0px #e8a519 !important;
}

.v2-search-submit-btn:active {
  transform: translate(1px, 1px) !important;
  box-shadow: 1px 1px 0px #1c4b62 !important;
}

/* Quick Suggestion Tags */
.v2-search-quick-tags {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  padding: 4px 22px 14px !important;
  background: #fff8eb !important;
  border-bottom: 1.5px solid rgba(28, 75, 98, 0.15) !important;
}

.v2-quick-tag-label {
  font-size: 11px !important;
  font-weight: 800 !important;
  color: #1c4b62 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  margin-right: 6px !important;
}

.v2-quick-tags-list {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}

.v2-quick-tag {
  background: #ffffff !important;
  color: #1c4b62 !important;
  border: 1.5px solid #1c4b62 !important;
  border-radius: 999px !important;
  box-shadow: 2px 2px 0px #1c4b62 !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  padding: 4px 11px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  text-decoration: none !important;
  font-family: inherit !important;
  line-height: 1.2 !important;
}

.v2-quick-tag:hover {
  background: #e8a519 !important;
  color: #1c4b62 !important;
  transform: translate(-1px, -1px) !important;
  box-shadow: 3px 3px 0px #1c4b62 !important;
}

.v2-quick-tag:active {
  transform: translate(1px, 1px) !important;
  box-shadow: 1px 1px 0px #1c4b62 !important;
}

/* Results Area */
.v2-search-results-area {
  flex: 1 !important;
  overflow-y: auto !important;
  padding: 14px 22px !important;
  max-height: 48vh !important;
  background: #fff8eb !important;
  scrollbar-width: thin !important;
  scrollbar-color: #e8a519 #fff8eb !important;
}

.v2-search-results-area::-webkit-scrollbar {
  width: 6px !important;
}
.v2-search-results-area::-webkit-scrollbar-thumb {
  background: #e8a519 !important;
  border-radius: 4px !important;
}

.v2-search-section-title {
  font-size: 11px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: #6d6053 !important;
  margin: 4px 0 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.v2-search-result-item {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 10px 14px !important;
  background: #ffffff !important;
  border: 2px solid #1c4b62 !important;
  border-radius: 12px !important;
  box-shadow: 3px 3px 0px #1c4b62 !important;
  margin-bottom: 10px !important;
  text-decoration: none !important;
  color: #1c4b62 !important;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.v2-search-result-item:hover {
  background: #ffffff !important;
  transform: translate(-2px, -2px) !important;
  box-shadow: 4px 4px 0px #e8a519 !important;
  border-color: #1c4b62 !important;
  color: #1c4b62 !important;
}

.v2-search-item-thumb {
  width: 52px !important;
  height: 56px !important;
  border-radius: 8px !important;
  border: 1.5px solid #1c4b62 !important;
  object-fit: cover !important;
  background: #f0e6d6 !important;
  flex-shrink: 0 !important;
}

.v2-search-item-info {
  flex: 1 !important;
  min-width: 0 !important;
}

.v2-search-item-title {
  font-size: 14.5px !important;
  font-weight: 700 !important;
  color: #1c4b62 !important;
  line-height: 1.3 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.v2-search-item-sub {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-top: 4px !important;
}

.v2-search-item-price {
  font-size: 13px !important;
  font-weight: 800 !important;
  color: #b85c38 !important;
}

.v2-search-item-tag {
  font-size: 10px !important;
  font-weight: 700 !important;
  background: #fff1d6 !important;
  color: #1c4b62 !important;
  border: 1px solid rgba(28, 75, 98, 0.3) !important;
  padding: 2px 7px !important;
  border-radius: 4px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
}

.v2-search-item-arrow {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  background: #fff8eb !important;
  color: #1c4b62 !important;
  border: 1.5px solid #1c4b62 !important;
  border-radius: 50% !important;
  box-shadow: 1.5px 1.5px 0px #1c4b62 !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  flex-shrink: 0 !important;
  transition: all 0.15s ease !important;
}

.v2-search-result-item:hover .v2-search-item-arrow {
  background: #e8a519 !important;
  color: #1c4b62 !important;
  transform: translateX(2px) !important;
  box-shadow: 2px 2px 0px #1c4b62 !important;
}

/* View all results button */
.v2-search-all-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  margin-top: 10px !important;
  padding: 12px !important;
  background: #1c4b62 !important;
  color: #fff8eb !important;
  border: 2px solid #1c4b62 !important;
  border-radius: 10px !important;
  box-shadow: 3px 3px 0px #e8a519 !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}

.v2-search-all-btn:hover {
  background: #e8a519 !important;
  color: #1c4b62 !important;
  transform: translate(-1px, -1px) !important;
  box-shadow: 4px 4px 0px #1c4b62 !important;
}

/* Empty state in results */
.v2-search-empty-state {
  text-align: center !important;
  padding: 28px 12px !important;
}

.v2-search-empty-icon {
  font-size: 32px !important;
  margin-bottom: 8px !important;
}

.v2-search-empty-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #1c4b62 !important;
  margin-bottom: 4px !important;
}

.v2-search-empty-desc {
  font-size: 12.5px !important;
  color: #7d6f62 !important;
  margin-bottom: 12px !important;
}

/* Footer Hint */
.v2-search-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 12px 22px !important;
  background: #fff1d6 !important;
  border-top: 2px solid #1c4b62 !important;
  font-size: 12px !important;
}

.v2-search-footer-tip {
  color: #6d6053 !important;
  font-weight: 600 !important;
}

.v2-search-footer-tip kbd {
  background: #ffffff !important;
  border: 1.5px solid #1c4b62 !important;
  border-radius: 4px !important;
  padding: 2px 6px !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  box-shadow: 1.5px 1.5px 0px #1c4b62 !important;
  color: #1c4b62 !important;
  margin-right: 3px !important;
}

.v2-search-footer-link {
  color: #1c4b62 !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  border-bottom: 1.5px solid #1c4b62 !important;
  padding-bottom: 1px !important;
  transition: all 0.15s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.v2-search-footer-link:hover {
  color: #b85c38 !important;
  border-color: #b85c38 !important;
  transform: translateX(2px) !important;
}

/* Mobile Drawer Search Bar */
.v2-drawer-search-box {
  padding: 12px 18px 4px !important;
}

.v2-drawer-search-trigger {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  background: #ffffff !important;
  border: 2px solid #1c4b62 !important;
  border-radius: 10px !important;
  box-shadow: 3px 3px 0px #1c4b62 !important;
  padding: 9px 12px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: #6d6053 !important;
  cursor: pointer !important;
  text-align: left !important;
  transition: all 0.15s ease !important;
  font-family: inherit !important;
}

.v2-drawer-search-trigger:hover {
  background: #fff1d6 !important;
  transform: translate(-1px, -1px) !important;
  box-shadow: 4px 4px 0px #1c4b62 !important;
  color: #1c4b62 !important;
}

.v2-drawer-search-trigger span {
  flex: 1 !important;
}

.v2-search-kbd {
  background: #fff8eb !important;
  border: 1.5px solid #1c4b62 !important;
  border-radius: 4px !important;
  padding: 1px 6px !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  color: #1c4b62 !important;
}

/* Catalog Page Filter Banner & Empty State */
.v2-catalog-search-banner {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  background: #fff1d6 !important;
  border: 2.5px solid #1c4b62 !important;
  border-radius: 12px !important;
  box-shadow: 4px 4px 0px #1c4b62 !important;
  padding: 12px 18px !important;
  margin: 10px 0 24px !important;
}

.v2-search-banner-info {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  color: #1c4b62 !important;
}

.v2-search-banner-text strong {
  color: #b85c38 !important;
  font-weight: 800 !important;
}

.v2-search-banner-reset {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: #ffffff !important;
  color: #1c4b62 !important;
  border: 2px solid #1c4b62 !important;
  border-radius: 8px !important;
  box-shadow: 2px 2px 0px #1c4b62 !important;
  padding: 6px 12px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  transition: all 0.15s ease !important;
}

.v2-search-banner-reset:hover {
  background: #c92a2a !important;
  color: #ffffff !important;
  border-color: #c92a2a !important;
  transform: translate(-1px, -1px) !important;
  box-shadow: 3px 3px 0px #1c4b62 !important;
}

.v2-catalog-no-results {
  text-align: center !important;
  padding: 48px 20px !important;
  background: #fff8eb !important;
  border: 2.5px dashed #1c4b62 !important;
  border-radius: 16px !important;
  margin: 20px 0 40px !important;
}

.v2-catalog-no-results h3 {
  font-size: 20px !important;
  font-weight: 800 !important;
  color: #1c4b62 !important;
  margin: 12px 0 8px !important;
}

.v2-catalog-no-results p {
  font-size: 14px !important;
  color: #6d6053 !important;
  max-width: 480px !important;
  margin: 0 auto 20px !important;
}

/* Header Search Icon Specific Rules: Harmonis dengan User & Cart Icons */
#v2-page .site-header .header__icons .search-popdown-bar,
#v2-page .site-header .header__icons .v2-search-trigger-btn {
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  color: #ffffff !important;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
  outline: none !important;
  box-shadow: none !important;
}

#v2-page .site-header .header__icons .search-popdown-bar::-webkit-details-marker {
  display: none !important;
}
#v2-page .site-header .header__icons .search-popdown-bar::marker {
  content: "" !important;
}

#v2-page .site-header .header__icons .search-popdown-bar:hover,
#v2-page .site-header .header__icons .v2-search-trigger-btn:hover {
  background: rgba(232, 165, 25, 0.25) !important;
  border-color: #e8a519 !important;
  color: #e8a519 !important;
  transform: translateY(-1px) !important;
}

#v2-page .site-header .header__icons .search-popdown-bar svg,
#v2-page .site-header .header__icons .v2-search-trigger-btn svg {
  width: 17px !important;
  height: 17px !important;
  stroke: #ffffff !important;
  fill: none !important;
  transition: transform 0.2s ease, stroke 0.2s ease !important;
}

#v2-page .site-header .header__icons .search-popdown-bar:hover svg,
#v2-page .site-header .header__icons .v2-search-trigger-btn:hover svg {
  transform: scale(1.05) !important;
}

#v2-page .site-header .header__icons .search-popdown-bar svg path,
#v2-page .site-header .header__icons .v2-search-trigger-btn svg path {
  stroke: #ffffff !important;
}

#v2-page .site-header .header__icons .search-popdown-bar:hover svg path,
#v2-page .site-header .header__icons .v2-search-trigger-btn:hover svg path {
  stroke: #e8a519 !important;
}

/* Hide legacy inside-header popup to prevent any stacking context collisions */
header-search-popdown .search-popdown,
header-search-popdown .drawer__underlay {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Mobile Responsive Adjustments (Ultra Mobile Friendly) */
@media (max-width: 640px) {
  #v2-search-modal {
    top: max(8px, env(safe-area-inset-top, 8px)) !important;
    left: 50% !important;
    transform: translate(-50%, 0) !important;
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    max-height: calc(100vh - max(16px, env(safe-area-inset-top, 8px) + env(safe-area-inset-bottom, 8px))) !important;
    border-width: 2.5px !important;
    border-radius: 14px !important;
    box-shadow: 4px 4px 0px #1c4b62 !important;
  }
  .v2-search-header {
    padding: 8px 48px 8px 12px !important;
    min-height: 48px !important;
    position: relative !important;
  }
  .v2-search-header-badge {
    font-size: 10px !important;
    padding: 3px 8px !important;
    letter-spacing: 0.05em !important;
  }
  .v2-search-close-btn {
    position: absolute !important;
    top: 8px !important;
    right: 10px !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
  }
  .v2-search-form {
    padding: 10px 12px 6px !important;
  }
  .v2-search-input-wrap {
    padding: 3px 4px 3px 12px !important;
    border-width: 2px !important;
    border-radius: 12px !important;
    min-height: 46px !important;
  }
  .v2-search-input-icon svg {
    width: 18px !important;
    height: 18px !important;
  }
  body#v2-page input#v2-search-input,
  body.page-v2 input#v2-search-input,
  body input#v2-search-input,
  #v2-search-modal input.v2-search-input,
  .v2-search-input-wrap input.v2-search-input,
  .v2-search-input {
    font-size: 16px !important; /* Critical: Mencegah auto-zoom di iOS Safari */
    padding: 0 6px !important;
    line-height: 1.3 !important;
    text-align: center !important;
    height: 36px !important;
    border: none !important;
    border-width: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
  }
  body#v2-page input#v2-search-input::placeholder,
  body.page-v2 input#v2-search-input::placeholder,
  body input#v2-search-input::placeholder,
  #v2-search-modal input.v2-search-input::placeholder,
  .v2-search-input-wrap input.v2-search-input::placeholder,
  .v2-search-input::placeholder {
    text-align: center !important;
    font-size: 13.5px !important;
  }
  .v2-search-clear-btn {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    margin: 0 4px !important;
  }
  .v2-search-submit-btn {
    padding: 6px 12px !important;
    font-size: 12px !important;
    letter-spacing: 0.03em !important;
    height: 34px !important;
  }
  .v2-search-submit-btn svg {
    width: 13px !important;
    height: 13px !important;
  }
  /* Horizontal swipeable chip pills bar for mobile */
  .v2-search-quick-tags {
    padding: 5px 12px 9px !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    gap: 6px !important;
  }
  .v2-search-quick-tags::-webkit-scrollbar {
    display: none !important;
  }
  .v2-quick-tag-label {
    font-size: 11px !important;
    flex-shrink: 0 !important;
    margin-right: 2px !important;
  }
  .v2-quick-tags-list {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    flex-shrink: 0 !important;
  }
  .v2-quick-tag {
    font-size: 11px !important;
    padding: 3px 8px !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
  }
  .v2-search-results-area {
    padding: 8px 12px !important;
    max-height: 50vh !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .v2-search-result-item {
    padding: 7px 9px !important;
    gap: 10px !important;
    border-width: 1.5px !important;
    box-shadow: 2.5px 2.5px 0px #1c4b62 !important;
    margin-bottom: 7px !important;
  }
  .v2-search-item-thumb {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    border-radius: 6px !important;
  }
  .v2-search-item-title {
    font-size: 13px !important;
    white-space: normal !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 1 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }
  .v2-search-item-price {
    font-size: 12px !important;
  }
  .v2-search-item-arrow {
    width: 24px !important;
    height: 24px !important;
    font-size: 12px !important;
  }
  .v2-search-footer {
    padding: 8px 12px !important;
    flex-direction: column !important;
    gap: 5px !important;
    text-align: center !important;
  }
  .v2-search-footer-tip {
    font-size: 11px !important;
  }
  .v2-search-footer-link {
    font-size: 11px !important;
  }
}

/* ==============================================================================
   NEO-BRUTALISM PRODUCT LANDING PAGE & TESTIMONIAL POPUP SYSTEM
   (Kersantara Fabric Neo-Brutalist Theme)
   ============================================================================== */

/* ---------- 1. Testimonial Popup / Modal System (Magnific Popup & Judge.me) ---------- */
.jm-mfp-bg,
.mfp-bg,
body.jm-mfp-is-open .jm-mfp-bg {
  background: rgba(15, 30, 40, 0.85) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  opacity: 1 !important;
  z-index: 1040 !important;
}

.jm-mfp-wrap,
.mfp-wrap,
body.jm-mfp-is-open .jm-mfp-wrap {
  z-index: 1045 !important;
}

.jdgm-rev-popup .jm-mfp-container.jm-mfp-container,
.jm-mfp-container {
  padding: 32px 18px !important;
}

/* Modal Content Card */
.jdgm-rev-popup .jm-mfp-content.jm-mfp-content,
.jdgm-full-rev-modal .jm-mfp-container .jm-mfp-content,
.jm-mfp-content {
  background-color: #fff8eb !important;
  border: 3.5px solid #1c4b62 !important;
  border-radius: 16px !important;
  box-shadow: 8px 8px 0px #1c4b62 !important;
  max-width: 980px !important;
  width: 92% !important;
  padding: 36px 30px 32px !important;
  margin: 40px auto !important;
  position: relative !important;
  color: #1c4b62 !important;
  overflow: visible !important;
}

/* Modal Header Title */
.jdgm-rev-popup .jm-mfp-content .jdgm-rev-widg__title {
  color: #1c4b62 !important;
  font-family: inherit !important;
  font-weight: 800 !important;
  font-size: 24px !important;
  text-align: center !important;
  margin-bottom: 20px !important;
  letter-spacing: 0.02em !important;
}

/* Neo-Brutalist Close Button Badge */
.jdgm-rev-popup .jm-mfp-close,
.jm-mfp-close,
button.jm-mfp-close,
.mfp-close {
  position: absolute !important;
  top: -18px !important;
  right: -18px !important;
  width: 44px !important;
  height: 44px !important;
  line-height: 40px !important;
  text-align: center !important;
  background-color: #e8a519 !important;
  color: #1c4b62 !important;
  border: 3px solid #1c4b62 !important;
  border-radius: 50% !important;
  box-shadow: 3px 3px 0px #1c4b62 !important;
  font-size: 26px !important;
  font-weight: 900 !important;
  opacity: 1 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  z-index: 1050 !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease !important;
}

.jdgm-rev-popup .jm-mfp-close:hover,
.jm-mfp-close:hover,
button.jm-mfp-close:hover,
.mfp-close:hover {
  transform: translate(-2px, -2px) scale(1.08) !important;
  box-shadow: 5px 5px 0 #1c4b62 !important;
  background-color: #f2bc3f !important;
  color: #1c4b62 !important;
  opacity: 1 !important;
}

.jdgm-rev-popup .jm-mfp-close:active,
.jm-mfp-close:active,
button.jm-mfp-close:active,
.mfp-close:active {
  transform: translate(2px, 2px) scale(0.95) !important;
  box-shadow: 0 0 0 #1c4b62 !important;
}

/* Dropdown filter inside popup & on page */
.jdgm-row-search,
.jdgm-rev-widg__sort-wrapper,
.jdgm-sort-dropdown__wrapper,
.jdgm-sort-dropdown-wrapper {
  margin-bottom: 24px !important;
  display: flex !important;
  align-items: center !important;
}

/* Base sort container / dropdown */
.jdgm-sort-dropdown,
.jdgm-sort-dropdown__button,
.jdgm-rev-widg__sort-wrapper select,
.jdgm-sort-dropdown__wrapper select,
.jdgm-sort-dropdown-wrapper select,
select.jdgm-sort-dropdown {
  background-color: #ffffff !important;
  border: 2.5px solid #1c4b62 !important;
  border-radius: 8px !important;
  box-shadow: 3px 3px 0px #1c4b62 !important;
  color: #1c4b62 !important;
  font-family: inherit !important;
  font-weight: 700 !important;
  font-size: 13.5px !important;
  cursor: pointer !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  text-decoration: none !important;
  line-height: 1.4 !important;
  outline: none !important;
  box-sizing: border-box !important;
}

/* Native select elements: use appearance none and neobrutalist SVG icons */
.jdgm-rev-widg__sort-wrapper select,
.jdgm-sort-dropdown__wrapper select,
.jdgm-sort-dropdown-wrapper select,
select.jdgm-sort-dropdown {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  padding: 9px 36px 9px 38px !important;
  background-image: 
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%231c4b62' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' y1='6' x2='20' y2='6'%3E%3C/line%3E%3Cline x1='4' y1='12' x2='15' y2='12'%3E%3C/line%3E%3Cline x1='4' y1='18' x2='9' y2='18'%3E%3C/line%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%231c4b62' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
  background-repeat: no-repeat, no-repeat !important;
  background-position: left 12px center, right 12px center !important;
  background-size: 16px 16px, 12px 12px !important;
}

/* Button & div sort components: rely on child SVGs with NO background-image to prevent double icons */
button.jdgm-sort-dropdown,
.jdgm-sort-dropdown__button,
div.jdgm-sort-dropdown,
a.jdgm-sort-dropdown {
  padding: 9px 16px !important;
  gap: 8px !important;
  background-image: none !important;
}

.jdgm-sort-dropdown .jdgm-custom-sort-icon,
.jdgm-sort-dropdown__button .jdgm-custom-sort-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  pointer-events: none !important;
  flex-shrink: 0 !important;
}

.jdgm-sort-dropdown:hover,
.jdgm-sort-dropdown__button:hover,
.jdgm-rev-widg__sort-wrapper select:hover,
.jdgm-sort-dropdown__wrapper select:hover,
.jdgm-sort-dropdown-wrapper select:hover,
select.jdgm-sort-dropdown:hover {
  transform: translate(-1px, -1px) !important;
  box-shadow: 4px 4px 0 #1c4b62 !important;
  background-color: #fbfbfb !important;
}

.jdgm-sort-dropdown:active,
.jdgm-sort-dropdown__button:active,
.jdgm-rev-widg__sort-wrapper select:active,
.jdgm-sort-dropdown__wrapper select:active,
.jdgm-sort-dropdown-wrapper select:active,
select.jdgm-sort-dropdown:active {
  transform: translate(1px, 1px) !important;
  box-shadow: 1.5px 1.5px 0 #1c4b62 !important;
}

/* Popup carousel wrapper & photos view */
.jdgm-rev-popup__pic-actions {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 16px !important;
}

.jdgm-rev-popup .jdmg-rev-popup__back,
.jdgm-rev-popup .jdmg-rev-popup__back:empty {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background-color: #ffffff !important;
  color: #1c4b62 !important;
  border: 2px solid #1c4b62 !important;
  border-radius: 8px !important;
  box-shadow: 2.5px 2.5px 0px #1c4b62 !important;
  padding: 7px 16px !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.jdgm-rev-popup .jdmg-rev-popup__back:hover {
  background-color: #e8a519 !important;
  color: #1c4b62 !important;
  transform: translate(-1px, -1px) !important;
  box-shadow: 3.5px 3.5px 0px #1c4b62 !important;
}

/* Slide buttons (carousel arrows): HIDE on page body / outside popup so no curved arcs appear */
.jdgm-rev-carousel-prev,
.jdgm-rev-carousel-next,
.jdgm-glider-prev,
.jdgm-glider-next,
.jdgm-carousel-arrow,
.jdgm-carousel-arrow-prev,
.jdgm-carousel-arrow-next,
.jdgm-row-carousel .jdgm-rev-carousel-prev,
.jdgm-row-carousel .jdgm-rev-carousel-next,
.jdgm-widget:not(.jdgm-rev-popup) .jdgm-rev-carousel-prev,
.jdgm-widget:not(.jdgm-rev-popup) .jdgm-rev-carousel-next {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Glider buttons & raw arrow buttons: ALWAYS HIDE EVERYWHERE to prevent duplicates */
.jdgm-glider-prev,
.jdgm-glider-next,
.jdgm-carousel-arrow,
.jdgm-carousel-arrow-prev,
.jdgm-carousel-arrow-next,
.jdgm-rev-popup .jdgm-glider-prev,
.jdgm-rev-popup .jdgm-glider-next,
.jm-mfp-content .jdgm-glider-prev,
.jm-mfp-content .jdgm-glider-next,
.mfp-content .jdgm-glider-prev,
.mfp-content .jdgm-glider-next {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Slide buttons: SHOW ONLY inside Testimonial Popup */
.jdgm-rev-popup .jdgm-rev-carousel-prev,
.jdgm-rev-popup .jdgm-rev-carousel-next,
.jm-mfp-content .jdgm-rev-carousel-prev,
.jm-mfp-content .jdgm-rev-carousel-next,
.mfp-content .jdgm-rev-carousel-prev,
.mfp-content .jdgm-rev-carousel-next,
.jdgm-widget__popup-content .jdgm-rev-carousel-prev,
.jdgm-widget__popup-content .jdgm-rev-carousel-next {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  width: 46px !important;
  height: 46px !important;
  background-color: #ffffff !important;
  border: 2.5px solid #1c4b62 !important;
  border-radius: 50% !important;
  box-shadow: 3px 3px 0px #1c4b62 !important;
  color: #1c4b62 !important;
  font-size: 0 !important; /* Hides any font glyphs or raw text nodes */
  line-height: 0 !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  z-index: 99999 !important;
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  transition: all 0.15s ease !important;
  outline: none !important;
  padding: 0 !important;
  overflow: hidden !important;
}

.jdgm-rev-popup .jdgm-rev-carousel-prev svg,
.jdgm-rev-popup .jdgm-rev-carousel-next svg,
.jm-mfp-content .jdgm-rev-carousel-prev svg,
.jm-mfp-content .jdgm-rev-carousel-next svg,
.mfp-content .jdgm-rev-carousel-prev svg,
.mfp-content .jdgm-rev-carousel-next svg {
  display: block !important;
  margin: auto !important;
  width: 20px !important;
  height: 20px !important;
  pointer-events: none !important;
  flex-shrink: 0 !important;
}

/* Hide duplicate siblings if multiple prev/next buttons exist in DOM */
.jm-mfp-content .jdgm-rev-carousel-prev ~ .jdgm-rev-carousel-prev,
.mfp-content .jdgm-rev-carousel-prev ~ .jdgm-rev-carousel-prev,
.jdgm-rev-popup .jdgm-rev-carousel-prev ~ .jdgm-rev-carousel-prev,
.jm-mfp-content .jdgm-rev-carousel-next ~ .jdgm-rev-carousel-next,
.mfp-content .jdgm-rev-carousel-next ~ .jdgm-rev-carousel-next,
.jdgm-rev-popup .jdgm-rev-carousel-next ~ .jdgm-rev-carousel-next {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* STRICTLY ELIMINATE ALL PSEUDO-ELEMENTS (BEFORE & AFTER) TO PREVENT DOUBLE ICONS */
.jdgm-rev-carousel-prev::before,
.jdgm-rev-carousel-prev:before,
.jdgm-rev-carousel-next::before,
.jdgm-rev-carousel-next:before,
.jdgm-glider-prev::before,
.jdgm-glider-prev:before,
.jdgm-glider-next::before,
.jdgm-glider-next:before,
.jdgm-carousel-arrow::before,
.jdgm-carousel-arrow-prev::before,
.jdgm-carousel-arrow-next::before,
.jdgm-rev-popup .jdgm-rev-carousel-prev::before,
.jdgm-rev-popup .jdgm-rev-carousel-prev:before,
.jdgm-rev-popup .jdgm-rev-carousel-next::before,
.jdgm-rev-popup .jdgm-rev-carousel-next:before,
.jm-mfp-content .jdgm-rev-carousel-prev::before,
.jm-mfp-content .jdgm-rev-carousel-prev:before,
.jm-mfp-content .jdgm-rev-carousel-next::before,
.jm-mfp-content .jdgm-rev-carousel-next:before,
.mfp-content .jdgm-rev-carousel-prev::before,
.mfp-content .jdgm-rev-carousel-prev:before,
.mfp-content .jdgm-rev-carousel-next::before,
.mfp-content .jdgm-rev-carousel-next:before,
.jdgm-rev-carousel-prev::after,
.jdgm-rev-carousel-prev:after,
.jdgm-rev-carousel-next::after,
.jdgm-rev-carousel-next:after,
.jm-mfp-content .jdgm-rev-carousel-prev::after,
.jm-mfp-content .jdgm-rev-carousel-prev:after,
.jm-mfp-content .jdgm-rev-carousel-next::after,
.jm-mfp-content .jdgm-rev-carousel-next:after,
.mfp-content .jdgm-rev-carousel-prev::after,
.mfp-content .jdgm-rev-carousel-prev:after,
.mfp-content .jdgm-rev-carousel-next::after,
.mfp-content .jdgm-rev-carousel-next:after {
  display: none !important;
  content: "" !important;
  content: none !important;
  font-size: 0 !important;
  line-height: 0 !important;
  width: 0 !important;
  height: 0 !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

.jdgm-rev-popup .jdgm-rev-carousel-prev,
.jm-mfp-content .jdgm-rev-carousel-prev,
.mfp-content .jdgm-rev-carousel-prev {
  left: -23px !important;
}

.jdgm-rev-popup .jdgm-rev-carousel-next,
.jm-mfp-content .jdgm-rev-carousel-next,
.mfp-content .jdgm-rev-carousel-next {
  right: -23px !important;
}

@media (max-width: 768px) {
  .jdgm-rev-popup .jdgm-rev-carousel-prev,
  .jm-mfp-content .jdgm-rev-carousel-prev,
  .mfp-content .jdgm-rev-carousel-prev {
    left: 4px !important;
    width: 38px !important;
    height: 38px !important;
    font-size: 0 !important;
  }
  .jdgm-rev-popup .jdgm-rev-carousel-next,
  .jm-mfp-content .jdgm-rev-carousel-next,
  .mfp-content .jdgm-rev-carousel-next {
    right: 4px !important;
    width: 38px !important;
    height: 38px !important;
    font-size: 0 !important;
  }
}

.jdgm-rev-popup .jdgm-rev-carousel-prev:hover,
.jdgm-rev-popup .jdgm-rev-carousel-next:hover,
.jm-mfp-content .jdgm-rev-carousel-prev:hover,
.jm-mfp-content .jdgm-rev-carousel-next:hover,
.mfp-content .jdgm-rev-carousel-prev:hover,
.mfp-content .jdgm-rev-carousel-next:hover {
  background-color: #e8a519 !important;
  color: #1c4b62 !important;
  transform: translateY(-50%) translate(-1px, -1px) scale(1.06) !important;
  box-shadow: 4px 4px 0px #1c4b62 !important;
}

.jdgm-rev-popup .jdgm-rev-carousel-prev:active,
.jdgm-rev-popup .jdgm-rev-carousel-next:active,
.jm-mfp-content .jdgm-rev-carousel-prev:active,
.jm-mfp-content .jdgm-rev-carousel-next:active,
.mfp-content .jdgm-rev-carousel-prev:active,
.mfp-content .jdgm-rev-carousel-next:active {
  transform: translateY(-50%) translate(1px, 1px) scale(0.96) !important;
  box-shadow: 1px 1px 0px #1c4b62 !important;
}

.jdgm-rev-popup .jm-mfp-content,
.jm-mfp-content,
.mfp-content {
  overflow: visible !important;
}

/* Testimonial Author Profile Avatar styling */
.jdgm-rev__icon,
.jdgm-rev__avatar {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  border: 2px solid #1c4b62 !important;
  box-shadow: 2px 2px 0px #1c4b62 !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: #ffffff !important;
  color: #1c4b62 !important;
  flex-shrink: 0 !important;
}

.jdgm-rev__icon img,
.jdgm-rev__avatar img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 50% !important;
  display: block !important;
}

/* ---------- 2. Testimonial Cards (In Popup & On Product Page) ---------- */
body#v2-page .testimoni-card,
body.page-v2 .testimoni-card,
.jdgm-rev-popup .testimoni-card,
.jdgm-rev-popup .jdgm-rev,
.jdgm-rev-carousel .jdgm-rev,
.jdgm-rev {
  background-color: #ffffff !important;
  border: 2.5px solid #1c4b62 !important;
  border-radius: 12px !important;
  box-shadow: 4px 4px 0px #1c4b62 !important;
  padding: 22px !important;
  color: #1c4b62 !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

body#v2-page .testimoni-card:hover,
body.page-v2 .testimoni-card:hover,
.jdgm-rev-popup .testimoni-card:hover,
.jdgm-rev-popup .jdgm-rev:hover,
.jdgm-rev-carousel .jdgm-rev:hover {
  transform: translateY(-3px) !important;
  box-shadow: 6px 6px 0px #1c4b62 !important;
}

/* Vertical Testimonial Card in Expanded View */
body#v2-page .testimoni-card-vertical,
body.page-v2 .testimoni-card-vertical {
  background-color: #ffffff !important;
  border: 2.5px solid #1c4b62 !important;
  border-radius: 12px !important;
  box-shadow: 4px 4px 0px #1c4b62 !important;
  padding: 22px !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

body#v2-page .testimoni-card-vertical:hover,
body.page-v2 .testimoni-card-vertical:hover {
  transform: translateY(-2px) !important;
  box-shadow: 6px 6px 0px #1c4b62 !important;
}

/* Avatar icon in review cards */
body#v2-page .jdgm-rev__icon,
body.page-v2 .jdgm-rev__icon,
.testimoni-card .jdgm-rev__icon,
.testimoni-card-vertical span[style*="border-radius:50%"] {
  background-color: #1c4b62 !important;
  color: #fff8eb !important;
  border: 2px solid #1c4b62 !important;
  box-shadow: 2px 2px 0px #e8a519 !important;
  font-weight: 800 !important;
}

/* Star rating colors */
body#v2-page .jdgm-rev__rating,
body.page-v2 .jdgm-rev__rating,
body#v2-page .jdgm-star,
body.page-v2 .jdgm-star,
.testimoni-card .jdgm-rev__rating,
.testimoni-card-vertical span[style*="color:#1c4b62"] {
  color: #e8a519 !important;
}

/* Review image / media - Neobrutalism Theme */
body#v2-page .testimoni-card img,
body.page-v2 .testimoni-card img,
body#v2-page .testimoni-card-vertical img,
body.page-v2 .testimoni-card-vertical img,
.testimoni-card img,
.testimoni-card-vertical img,
.testimoni-card__img,
.testimoni-card-vertical__img,
.jdgm-rev-popup .testimoni-card img,
.jdgm-rev-popup .testimoni-card-vertical img,
.jdgm-rev-popup .jdgm-rev img,
.jdgm-rev-popup .jdgm-rev__pic-img,
.jdgm-rev-popup .jdgm-rev-popup__pic img,
.jdgm-rev__pics img,
.jdgm-rev__pic-img,
.jdgm-rev__pic-link img,
.jdgm-gallery__thumbnail-wrapper img,
.jdgm-gallery__thumbnail img {
  border: 2.5px solid #1c4b62 !important;
  border-radius: 8px !important;
  box-shadow: 3px 3px 0px #1c4b62 !important;
  background-color: #ffffff !important;
  box-sizing: border-box !important;
  object-fit: cover !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

body#v2-page .testimoni-card img:hover,
body.page-v2 .testimoni-card img:hover,
.testimoni-card img:hover,
body#v2-page .testimoni-card-vertical img:hover,
body.page-v2 .testimoni-card-vertical img:hover,
.testimoni-card-vertical img:hover,
.jdgm-rev__pics img:hover,
.jdgm-rev__pic-link img:hover {
  transform: translate(-1px, -1px) !important;
  box-shadow: 4px 4px 0px #1c4b62 !important;
}

/* Margin and spacing so shadow never gets clipped */
body#v2-page .testimoni-card .jdgm-rev__pics,
body.page-v2 .testimoni-card .jdgm-rev__pics,
.testimoni-card .jdgm-rev__pics {
  padding: 2px 4px 6px 2px !important;
}

body#v2-page .testimoni-card img,
body.page-v2 .testimoni-card img,
.testimoni-card img {
  width: calc(100% - 4px) !important;
  margin-bottom: 4px !important;
}

body#v2-page .testimoni-card-vertical img,
body.page-v2 .testimoni-card-vertical img,
.testimoni-card-vertical img {
  margin-bottom: 4px !important;
  margin-right: 4px !important;
}

/* Review Photo Full Lightbox Modal in Judge.me */
.jdgm-rev-popup__pic .jdgm-rev__pic-img {
  border: 3px solid #1c4b62 !important;
  border-radius: 10px !important;
  box-shadow: 5px 5px 0px #1c4b62 !important;
  background-color: #ffffff !important;
  max-width: calc(100% - 16px) !important;
  margin: 10px auto !important;
  display: inline-block !important;
}

/* Review Title & Body text */
body#v2-page .jdgm-rev__title,
body.page-v2 .jdgm-rev__title,
.testimoni-card b,
.testimoni-card-vertical b {
  color: #1c4b62 !important;
  font-weight: 800 !important;
  font-size: 16px !important;
}

body#v2-page .jdgm-rev__body,
body.page-v2 .jdgm-rev__body,
.testimoni-card p,
.testimoni-card-vertical p {
  color: #2c4452 !important;
  line-height: 1.6 !important;
}

/* Review Date */
body#v2-page time,
body.page-v2 time {
  color: #6a8292 !important;
  font-weight: 600 !important;
  font-size: 12px !important;
}

/* ---------- 3. "READ MORE REVIEWS" & Action Buttons ---------- */
#readMoreReviews,
.read-more-reviews-btn,
.jdgm-row-readmore .jdgm-btn,
.jdgm-btn--dark,
.jdgm-paginate__load-more {
  background-color: #e8a519 !important;
  color: #1c4b62 !important;
  border: 3px solid #1c4b62 !important;
  border-radius: 10px !important;
  box-shadow: 4px 4px 0px #1c4b62 !important;
  padding: 13px 36px !important;
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  display: inline-block !important;
  text-decoration: none !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease !important;
}

#readMoreReviews:hover,
.read-more-reviews-btn:hover,
.jdgm-row-readmore .jdgm-btn:hover,
.jdgm-btn--dark:hover,
.jdgm-paginate__load-more:hover {
  transform: translate(-2px, -2px) !important;
  box-shadow: 6px 6px 0px #1c4b62 !important;
  background-color: #f2bc3f !important;
  color: #1c4b62 !important;
}

#readMoreReviews:active,
.read-more-reviews-btn:active,
.jdgm-row-readmore .jdgm-btn:active,
.jdgm-btn--dark:active,
.jdgm-paginate__load-more:active {
  transform: translate(2px, 2px) !important;
  box-shadow: 0 0 0 #1c4b62 !important;
}

/* Judge.me "Write a review" & "Ask a question" action buttons */
.jdgm-write-rev-link,
a.jdgm-write-rev-link,
.jdgm-write-rev-btn,
button.jdgm-write-rev-btn {
  background-color: #ffffff !important;
  background-image: none !important;
  color: #1c4b62 !important;
  border: 2.5px solid #1c4b62 !important;
  border-radius: 8px !important;
  box-shadow: 3.5px 3.5px 0px #1c4b62 !important;
  padding: 11px 24px !important;
  font-weight: 800 !important;
  font-size: 13.5px !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  display: inline-block !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.jdgm-write-rev-link:hover,
a.jdgm-write-rev-link:hover,
.jdgm-write-rev-btn:hover {
  background-color: #e8a519 !important;
  background-image: none !important;
  color: #1c4b62 !important;
  transform: translate(-2px, -2px) !important;
  box-shadow: 5.5px 5.5px 0px #1c4b62 !important;
}

.jdgm-ask-question-btn,
a.jdgm-ask-question-btn,
button.jdgm-ask-question-btn {
  background-color: #ffffff !important;
  background-image: none !important;
  color: #1c4b62 !important;
  border: 2.5px solid #1c4b62 !important;
  border-radius: 8px !important;
  box-shadow: 3.5px 3.5px 0px #1c4b62 !important;
  padding: 11px 24px !important;
  font-weight: 800 !important;
  font-size: 13.5px !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  display: inline-block !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.jdgm-ask-question-btn:hover,
a.jdgm-ask-question-btn:hover,
button.jdgm-ask-question-btn:hover {
  background-color: #fff8eb !important;
  background-image: none !important;
  color: #1c4b62 !important;
  transform: translate(-2px, -2px) !important;
  box-shadow: 5.5px 5.5px 0px #1c4b62 !important;
}

/* Judge.me Form Submit Button ("Submit Review" / "Submit Question") */
.jdgm-form input[type="submit"],
.jdgm-form input[type="button"].jdgm-submit-rev,
.jdgm-submit-rev,
.jdgm-form__submit-btn,
.jdgm-btn--primary,
input.jdgm-submit-rev {
  background-color: #e8a519 !important;
  background-image: none !important;
  color: #1c4b62 !important;
  border: 2.5px solid #1c4b62 !important;
  border-radius: 10px !important;
  box-shadow: 4px 4px 0px #1c4b62 !important;
  font-weight: 800 !important;
  font-size: 14.5px !important;
  letter-spacing: 0.04em !important;
  padding: 12px 28px !important;
  cursor: pointer !important;
  display: inline-block !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease !important;
}

.jdgm-form input[type="submit"]:hover,
.jdgm-submit-rev:hover,
.jdgm-form__submit-btn:hover,
.jdgm-btn--primary:hover {
  background-color: #f2bc3f !important;
  color: #1c4b62 !important;
  transform: translate(-2px, -2px) !important;
  box-shadow: 6px 6px 0px #1c4b62 !important;
}

.jdgm-form input[type="submit"]:active,
.jdgm-submit-rev:active,
.jdgm-form__submit-btn:active,
.jdgm-btn--primary:active {
  transform: translate(2px, 2px) !important;
  box-shadow: 0 0 0 #1c4b62 !important;
}

/* Judge.me Form Cancel Button ("Cancel") */
.jdgm-form a.jdgm-cancel-rev,
.jdgm-cancel-rev,
.jdgm-form__cancel-btn,
.jdgm-close-form,
.jdgm-close-form-btn {
  background-color: #ffffff !important;
  background-image: none !important;
  color: #1c4b62 !important;
  border: 2.5px solid #1c4b62 !important;
  border-radius: 8px !important;
  box-shadow: 3px 3px 0px #1c4b62 !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  padding: 11px 24px !important;
  display: inline-block !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease !important;
}

.jdgm-form a.jdgm-cancel-rev:hover,
.jdgm-cancel-rev:hover,
.jdgm-form__cancel-btn:hover,
.jdgm-close-form:hover,
.jdgm-close-form-btn:hover {
  background-color: #fff8eb !important;
  color: #1c4b62 !important;
  transform: translate(-1px, -1px) !important;
  box-shadow: 4px 4px 0px #1c4b62 !important;
}

/* Judge.me Form Inputs & Textareas */
.jdgm-form input[type="text"],
.jdgm-form input[type="email"],
.jdgm-form textarea,
.jdgm-form select {
  background-color: #ffffff !important;
  border: 2px solid #1c4b62 !important;
  border-radius: 8px !important;
  box-shadow: 2px 2px 0px rgba(28, 75, 98, 0.2) !important;
  padding: 10px 14px !important;
  color: #1c4b62 !important;
  font-family: inherit !important;
  transition: all 0.2s ease !important;
}

.jdgm-form input[type="text"]:focus,
.jdgm-form input[type="email"]:focus,
.jdgm-form textarea:focus,
.jdgm-form select:focus {
  outline: none !important;
  border-color: #1c4b62 !important;
  box-shadow: 3px 3px 0px #1c4b62 !important;
  background-color: #fffdfa !important;
}

/* Judge.me Pagination Numbers */
.jdgm-paginate__page {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  background-color: #ffffff !important;
  color: #1c4b62 !important;
  border: 2px solid #1c4b62 !important;
  border-radius: 8px !important;
  box-shadow: 2.5px 2.5px 0 #1c4b62 !important;
  font-weight: 700 !important;
  margin: 0 4px !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.jdgm-paginate__page:hover {
  background-color: #fff8eb !important;
  transform: translate(-1px, -1px) !important;
  box-shadow: 3.5px 3.5px 0 #1c4b62 !important;
}

.jdgm-paginate__page.jdgm-curt {
  background-color: #e8a519 !important;
  color: #1c4b62 !important;
  box-shadow: 2.5px 2.5px 0 #1c4b62 !important;
}

/* ---------- 4. ALL Product Landing Page Buttons & Controls ---------- */

/* A. Primary Add to Cart Button */
body#v2-page .product__form-submit,
body.page-v2 .product__form-submit,
.product__form-submit.btn--primary {
  background-color: #e8a519 !important;
  color: #1c4b62 !important;
  border: 3px solid #1c4b62 !important;
  border-radius: 10px !important;
  box-shadow: 4px 4px 0px #1c4b62 !important;
  font-weight: 800 !important;
  font-size: 15px !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  padding: 15px 36px !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  cursor: pointer !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease !important;
}

body#v2-page .product__form-submit:hover,
body.page-v2 .product__form-submit:hover,
.product__form-submit.btn--primary:hover {
  transform: translate(-2px, -2px) !important;
  box-shadow: 6px 6px 0px #1c4b62 !important;
  background-color: #f2bc3f !important;
  color: #1c4b62 !important;
}

body#v2-page .product__form-submit:active,
body.page-v2 .product__form-submit:active,
.product__form-submit.btn--primary:active {
  transform: translate(2px, 2px) !important;
  box-shadow: 0 0 0 #1c4b62 !important;
}

body#v2-page .product__form-submit svg,
body.page-v2 .product__form-submit svg {
  fill: #1c4b62 !important;
}

/* B. Dynamic Checkout / Buy It Now */
.shopify-payment-button__button,
.shopify-payment-button__button--unbranded {
  background-color: #1c4b62 !important;
  color: #fff8eb !important;
  border: 3px solid #1c4b62 !important;
  border-radius: 10px !important;
  box-shadow: 4px 4px 0px #1c4b62 !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  padding: 15px 36px !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.shopify-payment-button__button:hover,
.shopify-payment-button__button--unbranded:hover {
  transform: translate(-2px, -2px) !important;
  box-shadow: 6px 6px 0px #1c4b62 !important;
  background-color: #133647 !important;
}

/* C. Quantity Stepper Widget & Add to Cart - Left-Aligned & Proportional Rhythm */
body#v2-page .product__form,
body.page-v2 .product__form,
body#v2-page .product__container--vertical .product__form,
body.page-v2 .product__container--vertical .product__form,
body#v2-page .product__info__wrapper,
body.page-v2 .product__info__wrapper,
body#v2-page [data-product-form-container],
body.page-v2 [data-product-form-container] {
  text-align: left !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  margin-left: 0 !important;
}

body#v2-page .product__form label,
body.page-v2 .product__form label {
  text-align: left !important;
  margin-left: 0 !important;
}

body#v2-page .product__form-block:not(.product__form-block--swatches),
body.page-v2 .product__form-block:not(.product__form-block--swatches) {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  margin-top: 0 !important;
  margin-bottom: 18px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: 440px !important;
  text-align: left !important;
}

body#v2-page .qty__adjust,
body.page-v2 .qty__adjust,
body.template-product .qty__adjust,
.product__container--vertical .qty__adjust,
.qty__adjust {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  height: 48px !important;
  width: 132px !important;
  min-width: 132px !important;
  max-width: 132px !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  border: 2.5px solid #1c4b62 !important;
  border-radius: 10px !important;
  box-shadow: 3.5px 3.5px 0px #1c4b62 !important;
  overflow: hidden !important;
  position: relative !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  margin: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  flex: 0 0 132px !important;
}

body#v2-page .qty__adjust-btn,
body.page-v2 .qty__adjust-btn,
body.template-product .qty__adjust-btn,
.qty__adjust-btn {
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  width: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;
  height: 100% !important;
  flex: 0 0 40px !important;
  background-color: #e8a519 !important;
  border: none !important;
  border-radius: 0 !important;
  color: #1c4b62 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  transition: background-color 0.15s ease, color 0.15s ease !important;
}

body#v2-page .qty__adjust-btn--minus,
body.page-v2 .qty__adjust-btn--minus,
body.template-product .qty__adjust-btn--minus,
.qty__adjust-btn--minus {
  border-right: 2.5px solid #1c4b62 !important;
  order: 1 !important;
}

body#v2-page .qty__adjust-btn--plus,
body.page-v2 .qty__adjust-btn--plus,
body.template-product .qty__adjust-btn--plus,
.qty__adjust-btn--plus {
  border-left: 2.5px solid #1c4b62 !important;
  order: 3 !important;
}

body#v2-page .qty__adjust-btn:hover,
body.page-v2 .qty__adjust-btn:hover,
body.template-product .qty__adjust-btn:hover,
.qty__adjust-btn:hover {
  background-color: #f2bc3f !important;
  color: #1c4b62 !important;
}

body#v2-page .qty__adjust-btn:active,
body.page-v2 .qty__adjust-btn:active,
body.template-product .qty__adjust-btn:active,
.qty__adjust-btn:active {
  background-color: #d89610 !important;
}

body#v2-page .qty__adjust-btn svg,
body.page-v2 .qty__adjust-btn svg,
body.template-product .qty__adjust-btn svg,
.qty__adjust-btn svg {
  fill: currentColor !important;
  width: 14px !important;
  height: 14px !important;
  display: block !important;
  margin: auto !important;
  pointer-events: none !important;
}

body#v2-page .qty__adjust-input,
body.page-v2 .qty__adjust-input,
body.template-product .qty__adjust-input,
body#v2-page input[type="number"].qty__adjust-input,
body.page-v2 input[type="number"].qty__adjust-input,
body.template-product input[type="number"].qty__adjust-input,
input.qty__adjust-input,
.qty__adjust-input {
  position: static !important;
  order: 2 !important;
  width: 48px !important;
  min-width: 40px !important;
  flex: 1 1 auto !important;
  height: 100% !important;
  border: none !important;
  border-width: 0 !important;
  border-style: none !important;
  border-color: transparent !important;
  outline: none !important;
  box-shadow: none !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  font-family: inherit !important;
  font-weight: 800 !important;
  font-size: 16px !important;
  color: #1c4b62 !important;
  text-align: center !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  -webkit-appearance: none !important;
  -moz-appearance: textfield !important;
  appearance: none !important;
}

body#v2-page .qty__adjust-input:focus,
body.page-v2 .qty__adjust-input:focus,
body.template-product .qty__adjust-input:focus,
body#v2-page input[type="number"].qty__adjust-input:focus,
body.page-v2 input[type="number"].qty__adjust-input:focus,
.qty__adjust-input:focus,
body#v2-page .qty__adjust-input:active,
body.page-v2 .qty__adjust-input:active,
body.template-product .qty__adjust-input:active,
body#v2-page input[type="number"].qty__adjust-input:active,
body.page-v2 input[type="number"].qty__adjust-input:active,
.qty__adjust-input:active {
  outline: none !important;
  border: none !important;
  border-width: 0 !important;
  border-color: transparent !important;
  box-shadow: none !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
}

body#v2-page .qty__adjust-input::-webkit-outer-spin-button,
body#v2-page .qty__adjust-input::-webkit-inner-spin-button,
body.page-v2 .qty__adjust-input::-webkit-outer-spin-button,
body.page-v2 .qty__adjust-input::-webkit-inner-spin-button,
body.template-product .qty__adjust-input::-webkit-outer-spin-button,
body.template-product .qty__adjust-input::-webkit-inner-spin-button,
.qty__adjust-input::-webkit-outer-spin-button,
.qty__adjust-input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}

body#v2-page .product__form-buttons,
body.page-v2 .product__form-buttons {
  flex: 1 1 200px !important;
  max-width: 260px !important;
  margin: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  display: block !important;
}

body#v2-page .product__form-submit,
body.page-v2 .product__form-submit,
.product__form-submit.btn--primary {
  width: 100% !important;
  max-width: 100% !important;
  height: 48px !important;
  margin: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding: 0 20px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  background-color: #e8a519 !important;
  color: #1c4b62 !important;
  border: 2.5px solid #1c4b62 !important;
  border-radius: 10px !important;
  box-shadow: 3.5px 3.5px 0px #1c4b62 !important;
  cursor: pointer !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease !important;
}

body#v2-page .product__form-submit:hover,
body.page-v2 .product__form-submit:hover,
.product__form-submit.btn--primary:hover {
  transform: translate(-1px, -1px) !important;
  box-shadow: 4.5px 4.5px 0px #1c4b62 !important;
  background-color: #f2bc3f !important;
}

body#v2-page .product__form-submit:active,
body.page-v2 .product__form-submit:active,
.product__form-submit.btn--primary:active {
  transform: translate(1px, 1px) !important;
  box-shadow: 2px 2px 0px #1c4b62 !important;
}

/* Collapse empty Kiwi sizing / app blocks */
body#v2-page #shopify-block-AcDhHalpqZEFDMUFXZ__kiwi_size_chart_recommender_kiwi_sizing_H64DdV,
body.page-v2 #shopify-block-AcDhHalpqZEFDMUFXZ__kiwi_size_chart_recommender_kiwi_sizing_H64DdV,
body#v2-page .ks-container-app-block:empty,
body.page-v2 .ks-container-app-block:empty {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
}

/* Product Description: Proportional Spacing & Left Alignment */
body#v2-page .product__description,
body.page-v2 .product__description,
.product__info__wrapper .product__description {
  margin-top: 0 !important;
  margin-bottom: 18px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding: 0 !important;
  padding-bottom: 0 !important;
  --PBB: 0px !important;
  text-align: left !important;
}

body#v2-page .product__description p,
body.page-v2 .product__description p,
.product__description p {
  text-align: left !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.6 !important;
  font-size: 14.5px !important;
  color: #1c4b62 !important;
}

body#v2-page .product__description p span,
body.page-v2 .product__description p span {
  color: #1c4b62 !important;
  font-size: inherit !important;
  line-height: inherit !important;
}

@media only screen and (max-width: 480px) {
  body#v2-page .product__form-block:not(.product__form-block--swatches),
  body.page-v2 .product__form-block:not(.product__form-block--swatches) {
    flex-wrap: wrap !important;
    gap: 12px !important;
  }
  body#v2-page .product__form-buttons,
  body.page-v2 .product__form-buttons {
    flex: 1 1 100% !important;
    max-width: 100% !important;
  }
}

/* D. Size Chart Button */
body#v2-page .size-chart-link,
body.page-v2 .size-chart-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 8px 18px !important;
  background-color: #ffffff !important;
  color: #1c4b62 !important;
  border: 2.5px solid #1c4b62 !important;
  border-radius: 8px !important;
  box-shadow: 3px 3px 0px #1c4b62 !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  text-decoration: none !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease !important;
}

body#v2-page .size-chart-link:hover,
body.page-v2 .size-chart-link:hover {
  transform: translate(-1px, -1px) !important;
  box-shadow: 4px 4px 0px #1c4b62 !important;
  background-color: #fff8eb !important;
  color: #1c4b62 !important;
}

body#v2-page .size-chart-link:active,
body.page-v2 .size-chart-link:active {
  transform: translate(1px, 1px) !important;
  box-shadow: 1px 1px 0px #1c4b62 !important;
}

/* Inner elements inside size-chart-link: prevent double-border box and hide broken icons */
body#v2-page .size-chart-link span,
body.page-v2 .size-chart-link span,
body#v2-page .size-chart-link .ks-chart-modal-link,
body.page-v2 .size-chart-link .ks-chart-modal-link {
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  background: transparent !important;
  color: inherit !important;
}

body#v2-page .size-chart-link img,
body.page-v2 .size-chart-link img,
.size-chart-link img,
.sizechart img,
.ks-chart-modal-link img {
  display: none !important;
}

/* E. Accordion Headers & Items - Proportional Spacing & Neobrutalism */
body#v2-page .accordion,
body.page-v2 .accordion,
p + .accordion {
  margin-top: 14px !important;
  margin-bottom: 24px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

body#v2-page .accordion-item,
body.page-v2 .accordion-item {
  margin-bottom: 10px !important;
  border: none !important;
}

body#v2-page .accordion-header,
body.page-v2 .accordion-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  background-color: #ffffff !important;
  color: #1c4b62 !important;
  border: 2.5px solid #1c4b62 !important;
  border-radius: 8px !important;
  box-shadow: 3px 3px 0px #1c4b62 !important;
  padding: 13px 18px !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  margin: 0 !important;
  user-select: none !important;
  transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.15s ease !important;
}

body#v2-page .accordion-header:hover,
body.page-v2 .accordion-header:hover {
  background-color: #fff8eb !important;
  transform: translate(-1px, -1px) !important;
  box-shadow: 4px 4px 0px #1c4b62 !important;
}

body#v2-page .accordion-item.accordion-active .accordion-header,
body.page-v2 .accordion-item.accordion-active .accordion-header {
  background-color: #e8a519 !important;
  color: #1c4b62 !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  box-shadow: 3px 3px 0px #1c4b62 !important;
}

body#v2-page .accordion-content,
body.page-v2 .accordion-content {
  display: none;
  background-color: #ffffff !important;
  border: 2.5px solid #1c4b62 !important;
  border-top: none !important;
  border-bottom-left-radius: 8px !important;
  border-bottom-right-radius: 8px !important;
  box-shadow: 3px 3px 0px #1c4b62 !important;
  padding: 18px 20px !important;
  color: #1c4b62 !important;
  line-height: 1.65 !important;
}

body#v2-page .accordion-item.accordion-active .accordion-content,
body.page-v2 .accordion-item.accordion-active .accordion-content {
  display: block !important;
}

body#v2-page .accordion-toggle-icon,
body.page-v2 .accordion-toggle-icon {
  width: 24px !important;
  height: 24px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 900 !important;
  font-size: 20px !important;
  color: #1c4b62 !important;
  transition: transform 0.2s ease !important;
}

body#v2-page .accordion-toggle-icon::before,
body.page-v2 .accordion-toggle-icon::before {
  content: '+' !important;
}

body#v2-page .accordion-item.accordion-active .accordion-toggle-icon::before,
body.page-v2 .accordion-item.accordion-active .accordion-toggle-icon::before {
  content: '−' !important;
}

/* F. Swatches (Color & Variant selection) - Kersantara Neobrutalism */
body#v2-page .product__form-block.product__form-block--swatches,
body.page-v2 .product__form-block.product__form-block--swatches {
  display: block !important;
  width: 100% !important;
  margin-top: 0 !important;
  margin-bottom: 16px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding: 0 !important;
  text-align: left !important;
}

body#v2-page .variant-wrapper--color,
body.page-v2 .variant-wrapper--color,
.variant-wrapper--color {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  border: none !important;
  padding: 0 !important;
  text-align: left !important;
}

body#v2-page .variant-label--color,
body.page-v2 .variant-label--color,
.variant-label--color {
  color: #1c4b62 !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  margin-bottom: 8px !important;
  display: block !important;
  text-align: left !important;
}

body#v2-page .variant-label__value,
body.page-v2 .variant-label__value,
.variant-label__value {
  color: #1c4b62 !important;
  font-weight: 800 !important;
  margin-left: 6px !important;
}

body#v2-page fieldset.variant-input-wrap,
body.page-v2 fieldset.variant-input-wrap,
fieldset.variant-input-wrap {
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

body#v2-page .swatch,
body.page-v2 .swatch,
.swatch {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  margin: 0 !important;
  border: none !important;
  padding: 0 !important;
}

/* Hide native variant select dropdown */
body#v2-page select.product-single__variants,
body.page-v2 select.product-single__variants,
body#v2-page label[for*="product-select"],
body.page-v2 label[for*="product-select"],
.product-single__variants {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
}

body#v2-page .swatch__element,
body.page-v2 .swatch__element,
.swatch__element {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
}

body#v2-page .swatch--circle .swatch__label,
body.page-v2 .swatch--circle .swatch__label,
.swatch--circle .swatch__label,
.variant__button-label--color.swatch__label {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  max-width: 44px !important;
  max-height: 44px !important;
  border-radius: 50% !important;
  background-color: #ffffff !important;
  border: 2.5px solid #1c4b62 !important;
  box-shadow: 3px 3px 0px #1c4b62 !important;
  padding: 4px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
  position: relative !important;
  line-height: normal !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease, outline 0.15s ease !important;
}

body#v2-page .swatch--circle .swatch__label:hover,
body.page-v2 .swatch--circle .swatch__label:hover,
.swatch--circle .swatch__label:hover {
  transform: translate(-1px, -1px) scale(1.06) !important;
  box-shadow: 4px 4px 0px #1c4b62 !important;
}

body#v2-page .swatch__input:checked + .swatch__label,
body.page-v2 .swatch__input:checked + .swatch__label,
.swatch__input:checked + .swatch__label {
  border: 2.5px solid #1c4b62 !important;
  outline: 3px solid #e8a519 !important;
  outline-offset: 3px !important;
  box-shadow: 4px 4px 0px #1c4b62 !important;
  transform: translate(-1px, -1px) scale(1.08) !important;
}

body#v2-page .swatch--circle .swatch__color,
body.page-v2 .swatch--circle .swatch__color,
.swatch--circle .swatch__color {
  position: static !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
  border: 1px solid rgba(0, 0, 0, 0.15) !important;
  box-sizing: border-box !important;
}

body#v2-page .swatch__color--sweetindigo-black,
body.page-v2 .swatch__color--sweetindigo-black,
.swatch__color--sweetindigo-black {
  background-color: #121721 !important;
  background: #121721 !important;
}

body#v2-page .swatch__color--threebark-red-seasonal,
body.page-v2 .swatch__color--threebark-red-seasonal,
.swatch__color--threebark-red-seasonal {
  background-color: #a3302b !important;
  background: #a3302b !important;
}

/* Sold out diagonal slash indicator */
body#v2-page .swatch__element[data-value*="Sweetindigo"] .swatch__label::after,
body.page-v2 .swatch__element[data-value*="Sweetindigo"] .swatch__label::after,
body#v2-page .swatch__element.is-soldout .swatch__label::after,
body.page-v2 .swatch__element.is-soldout .swatch__label::after,
.swatch__element[data-value*="Sweetindigo"] .swatch__label::after {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 130% !important;
  height: 2.5px !important;
  background-color: #cd3318 !important;
  transform: translate(-50%, -50%) rotate(-45deg) !important;
  z-index: 5 !important;
  pointer-events: none !important;
  border-radius: 2px !important;
}

/* Professional Neobrutal tooltip */
body#v2-page .swatch__element:after,
body.page-v2 .swatch__element:after {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #1c4b62 !important;
  background-color: #ffffff !important;
  border: 2px solid #1c4b62 !important;
  border-radius: 6px !important;
  box-shadow: 2px 2px 0px #1c4b62 !important;
  padding: 3px 8px !important;
  margin-top: 10px !important;
  white-space: nowrap !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
}

/* G. Review Rating Badge in Hero Info */
body#v2-page .jdgm-prev-badge,
body.page-v2 .jdgm-prev-badge {
  background-color: #ffffff !important;
  border: 2px solid #1c4b62 !important;
  border-radius: 8px !important;
  box-shadow: 3px 3px 0px #1c4b62 !important;
  padding: 6px 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-weight: 700 !important;
  color: #1c4b62 !important;
  cursor: pointer !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

body#v2-page .jdgm-prev-badge:hover,
body.page-v2 .jdgm-prev-badge:hover {
  transform: translate(-1px, -1px) !important;
  box-shadow: 4px 4px 0px #1c4b62 !important;
}

/* H. Header, Nav, Drawer & Cart Buttons on Product Page */
body#v2-page .site-hamburger-btn,
body.page-v2 .site-hamburger-btn,
body#v2-page .v2-search-trigger-btn,
body.page-v2 .v2-search-trigger-btn {
  background-color: #ffffff !important;
  border: 2.5px solid #1c4b62 !important;
  border-radius: 8px !important;
  box-shadow: 3px 3px 0px #1c4b62 !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

body#v2-page .site-hamburger-btn:hover,
body.page-v2 .site-hamburger-btn:hover,
body#v2-page .v2-search-trigger-btn:hover,
body.page-v2 .v2-search-trigger-btn:hover {
  transform: translate(-1px, -1px) !important;
  box-shadow: 4px 4px 0px #1c4b62 !important;
  background-color: #fff8eb !important;
}

body#v2-page .drawer-close-btn,
body.page-v2 .drawer-close-btn,
body#v2-page .cart-close,
body.page-v2 .cart-close,
body#v2-page .nav-mobile-close,
body.page-v2 .nav-mobile-close {
  background-color: #e8a519 !important;
  color: #1c4b62 !important;
  border: 2.5px solid #1c4b62 !important;
  border-radius: 8px !important;
  box-shadow: 2.5px 2.5px 0px #1c4b62 !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

body#v2-page .drawer-close-btn:hover,
body.page-v2 .drawer-close-btn:hover,
body#v2-page .cart-close:hover,
body.page-v2 .cart-close:hover {
  transform: translate(-1px, -1px) !important;
  box-shadow: 3.5px 3.5px 0px #1c4b62 !important;
}

/* Cart Checkout Button */
.cart__checkout,
.btn--solid.btn--primary {
  background-color: #e8a519 !important;
  color: #1c4b62 !important;
  border: 3px solid #1c4b62 !important;
  border-radius: 10px !important;
  box-shadow: 4px 4px 0px #1c4b62 !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.cart__checkout:hover,
.btn--solid.btn--primary:hover {
  transform: translate(-2px, -2px) !important;
  box-shadow: 6px 6px 0px #1c4b62 !important;
  background-color: #f2bc3f !important;
}

/* I. Photoswipe Gallery Modal Buttons */
body#v2-page .pswp__button,
body.page-v2 .pswp__button {
  background-color: #ffffff !important;
  border: 2px solid #1c4b62 !important;
  border-radius: 8px !important;
  box-shadow: 2.5px 2.5px 0px #1c4b62 !important;
  margin: 6px !important;
  opacity: 1 !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease !important;
}

body#v2-page .pswp__button:hover,
body.page-v2 .pswp__button:hover {
  background-color: #e8a519 !important;
  transform: translate(-1px, -1px) !important;
  box-shadow: 3.5px 3.5px 0px #1c4b62 !important;
}

/* J. Universal button fallback for .template-product */
body.template-product button:not(.jdgm-star):not(.hamburger-bar):not(.glider-dot),
body.template-product .btn {
  font-family: inherit !important;
}

/* ============================================================
   K. Homepage Why We Exist Button Absolute Rules
   Border putih, transparan, teks putih, hover background putih
   ============================================================ */
#whyWeExistBtn,
.world a.btn--w,
.world .btn--w,
.world .btn,
body#v2-page .world .btn,
body.page-v2 .world .btn,
body.template-index .world .btn,
body#v2-page .world a.btn--w,
body.page-v2 .world a.btn--w,
body.template-index .world a.btn--w,
body#v2-page.template-index a.btn--w {
  background: transparent !important;
  background-color: transparent !important;
  border: 2px solid #ffffff !important;
  border-color: #ffffff !important;
  color: #ffffff !important;
  box-shadow: none !important;
  text-decoration: none !important;
  transition: all 0.25s ease !important;
}

#whyWeExistBtn:hover,
.world a.btn--w:hover,
.world .btn--w:hover,
.world .btn:hover,
body#v2-page .world .btn:hover,
body.page-v2 .world .btn:hover,
body.template-index .world .btn:hover,
body#v2-page .world a.btn--w:hover,
body.page-v2 .world a.btn--w:hover,
body.template-index .world a.btn--w:hover,
body#v2-page.template-index a.btn--w:hover {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #1c4b62 !important;
  border-color: #ffffff !important;
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.4) !important;
  transform: translate(-2px, -2px) !important;
}

/* Membership Banner CTA Button */
.membership-hero-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  background-color: transparent !important;
  color: #ffffff !important;
  border: 2px solid #ffffff !important;
  border-radius: 999px !important;
  padding: 13px 32px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: none !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
  backdrop-filter: blur(2px) !important;
  -webkit-backdrop-filter: blur(2px) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15) !important;
}
.membership-hero-btn svg,
.membership-hero-btn__icon {
  width: 18px !important;
  height: 18px !important;
  flex-shrink: 0 !important;
  stroke: currentColor !important;
  transition: transform 0.28s ease !important;
}
.membership-hero-btn:hover {
  background-color: #ffffff !important;
  color: #1c4b62 !important;
  border-color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25) !important;
}
.membership-hero-btn:hover svg,
.membership-hero-btn:hover .membership-hero-btn__icon {
  stroke: #1c4b62 !important;
  transform: scale(1.08) !important;
}
@media (max-width: 991px) {
  .membership-hero-btn {
    padding: 12px 28px !important;
    font-size: 14.5px !important;
  }
}
@media (max-width: 600px) {
  .membership-hero-btn {
    padding: 11px 22px !important;
    font-size: 13.5px !important;
    gap: 8px !important;
  }
  .membership-hero-btn svg,
  .membership-hero-btn__icon {
    width: 16px !important;
    height: 16px !important;
  }
}