/** Shopify CDN: Minification failed

Line 1437:10 Unexpected "1"

**/
/* ═══════════════════════════════════════════════
   SIGNAL STORE — Custom Theme Override
   Matches: shopify-phone-theme.html reference
═══════════════════════════════════════════════ */

/* ── Google Fonts fallback (Outfit-like) ── */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&display=swap');

/* ── Design Tokens ── */
:root {
  --signal-bg:        #f5f4f0;
  --signal-white:     #ffffff;
  --signal-surface:   #fdfcfa;
  --signal-border:    #e8e4dc;
  --signal-border-2:  #d4cfc5;
  --signal-text:      #18181b;
  --signal-text-2:    #52525b;
  --signal-text-3:    #a1a1aa;
  --signal-accent:    #e8271e;
  --signal-accent-dk: #cc2a1f;
  --signal-accent-lt: #fff1f0;
  --signal-blue:      #2563eb;
  --signal-blue-lt:   #eff6ff;
  --signal-amber:     #d97706;
  --signal-amber-lt:  #fffbeb;
  --signal-green:     #16a34a;
  --signal-green-lt:  #f0fdf4;
  --signal-navy:      #0f172a;

  --signal-r-sm: 10px;
  --signal-r-md: 16px;
  --signal-r-lg: 24px;
  --signal-r-xl: 32px;

  --signal-shadow-xs: 0 1px 2px rgba(0,0,0,.05);
  --signal-shadow-sm: 0 2px 8px rgba(0,0,0,.07);
  --signal-shadow-md: 0 8px 24px rgba(0,0,0,.09);
  --signal-shadow-lg: 0 20px 60px rgba(0,0,0,.12);
}

/* ── Base ── */
body {
  font-family: 'Outfit', var(--font-body-family), sans-serif !important;
  background: var(--signal-bg) !important;
  color: var(--signal-text) !important;
  -webkit-font-smoothing: antialiased;
  /* overflow-x: hidden removed — caused body to act as block formatting context,
     which clipped card border/shadow ::after pseudo-elements on mobile */
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4 {
  font-family: 'Outfit', var(--font-heading-family), sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.5px !important;
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--signal-bg); }
::-webkit-scrollbar-thumb { background: var(--signal-border-2); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--signal-text-3); }

/* ══════════════════════
   ANNOUNCEMENT BAR
══════════════════════ */
.shopify-section-header-top,
.announcement-bar,
[class*="announcement"] {
  background: var(--signal-navy) !important;
  color: #fff !important;
  font-family: 'Outfit', sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}
.announcement-bar__message,
.announcement-bar p,
.announcement-bar__link {
  color: #fff !important;
  font-size: 13px !important;
}
.announcement-bar__message strong,
.announcement-bar strong {
  color: #fbbf24 !important;
}

/* ══════════════════════
   HEADER / NAVBAR
══════════════════════ */
.header-wrapper,
.shopify-section-header-sticky,
.section-header {
  background: var(--signal-white) !important;
  border-bottom: 1px solid var(--signal-border) !important;
  box-shadow: var(--signal-shadow-xs) !important;
}

.header {
  background: var(--signal-white) !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
  min-height: 68px !important;
  display: flex !important;
  align-items: center !important;
  gap: 20px !important;
}

/* Logo */
.header__heading-link,
.header__heading {
  font-family: 'Outfit', sans-serif !important;
  font-size: 22px !important;
  font-weight: 900 !important;
  letter-spacing: -1px !important;
  color: var(--signal-text) !important;
  text-decoration: none !important;
}

/* Search */
.header__search .field,
.header__search .search-modal__form,
[id*="search-in-modal"],
.search-modal .field__input {
  border-radius: 50px !important;
  border: 1.5px solid var(--signal-border) !important;
  background: var(--signal-bg) !important;
  font-family: 'Outfit', sans-serif !important;
  font-size: 14px !important;
}
.field__input:focus,
.search-modal .field__input:focus {
  border-color: var(--signal-accent) !important;
  box-shadow: 0 0 0 3px rgba(255,68,56,.1) !important;
  background: var(--signal-white) !important;
}

/* Nav menu */
.header__menu-item,
.header__menu .header__menu-item,
.list-menu__item--link {
  font-family: 'Outfit', sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: var(--signal-text-2) !important;
  border-radius: 8px !important;
  padding: 6px 14px !important;
  transition: all .15s !important;
}
.header__menu-item:hover,
.list-menu__item--link:hover {
  color: var(--signal-text) !important;
  background: var(--signal-bg) !important;
}
.header__active-menu-item,
.header__menu-item.header__active-menu-item {
  color: var(--signal-accent) !important;
  background: var(--signal-accent-lt) !important;
}

/* Cart / icons */
.header__icon,
.header__icons .header__icon {
  width: 42px !important;
  height: 42px !important;
  border-radius: 12px !important;
  border: 1.5px solid var(--signal-border) !important;
  background: var(--signal-white) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all .2s !important;
  color: var(--signal-text) !important;
}
.header__icon:hover {
  border-color: var(--signal-text) !important;
  background: var(--signal-bg) !important;
}

/* Cart badge */
.cart-count-bubble,
.header__cart-bubble {
  background: var(--signal-accent) !important;
  color: #fff !important;
  border-radius: 50% !important;
  font-weight: 700 !important;
  font-size: 10px !important;
}

/* ══════════════════════
   BUTTONS
══════════════════════ */
.button,
.btn,
button.button {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 700 !important;
  border-radius: 50px !important;
  transition: all .2s !important;
  letter-spacing: 0 !important;
}
.button--primary,
.button:not(.button--secondary):not(.button--tertiary) {
  background: var(--signal-accent) !important;
  color: #fff !important;
  border: none !important;
}
.button--primary:hover,
.button:not(.button--secondary):not(.button--tertiary):hover {
  background: var(--signal-accent-dk) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(255,68,56,.3) !important;
}
.button--secondary {
  background: var(--signal-white) !important;
  color: var(--signal-text) !important;
  border: 1.5px solid var(--signal-border) !important;
}
.button--secondary:hover {
  border-color: var(--signal-text) !important;
}

/* ══════════════════════
   PRODUCT CARDS
══════════════════════ */
.card-wrapper,
.product-card-wrapper {
  border-radius: var(--signal-r-lg) !important;
  border: 1.5px solid var(--signal-border) !important;
  overflow: hidden !important;
  transition: transform .25s, box-shadow .25s, border-color .25s !important;
  cursor: pointer !important;
}
.card-wrapper:hover,
.product-card-wrapper:hover {
  transform: translateY(-6px) !important;
  box-shadow: var(--signal-shadow-lg) !important;
  border-color: transparent !important;
}

.card,
.card--product {
  background: var(--signal-white) !important;
  border: none !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  transition: none !important;
  cursor: pointer !important;
}

/* Card image */
.card__media,
.card__media .media,
.card__inner .card__media {
  background: var(--signal-bg) !important;
  aspect-ratio: 1 !important;
  border-radius: 0 !important;
}

/* Card info */
.card__content,
.card__information {
  padding: 16px !important;
  font-family: 'Outfit', sans-serif !important;
}

.card__heading,
.card__heading a {
  font-family: 'Outfit', sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--signal-text) !important;
  line-height: 1.35 !important;
}

/* Vendor/brand */
.card__vendor,
.caption-with-letter-spacing {
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: var(--signal-text-3) !important;
  font-family: 'Outfit', sans-serif !important;
}

/* Price */
.price,
.price__container {
  font-family: 'Outfit', sans-serif !important;
}
.price--large .price-item--regular,
.price .price-item--regular {
  font-size: 19px !important;
  font-weight: 800 !important;
  letter-spacing: -0.5px !important;
  color: var(--signal-text) !important;
}
.price .price-item--sale {
  font-size: 19px !important;
  font-weight: 800 !important;
  color: var(--signal-accent) !important;
}
.price .price-item--compare {
  font-size: 11.5px !important;
  color: var(--signal-text-3) !important;
  text-decoration: line-through !important;
}

/* Badges / labels */
.badge,
.product-card-wrapper .badge {
  border-radius: 50px !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  font-family: 'Outfit', sans-serif !important;
  padding: 3px 9px !important;
}
.badge--bottom-left,
.badge--top-left {
  border-radius: 50px !important;
}
.badge--sale,
.badge[class*="sale"] {
  background: var(--signal-amber-lt) !important;
  color: var(--signal-amber) !important;
  border: 1px solid #fcd34d !important;
}
.badge--new,
.badge[class*="new"] {
  background: var(--signal-text) !important;
  color: #fff !important;
}

/* ══════════════════════
   FEATURED COLLECTION SECTION
══════════════════════ */
.featured-collection,
[class*="featured-collection"],
.collection-list-section {
  background: var(--signal-bg) !important;
}

.section-header,
.collection-list__title,
.featured-collection .title {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.8px !important;
}

/* Section label accent */
.caption-with-letter-spacing--medium {
  color: var(--signal-accent) !important;
  font-weight: 800 !important;
  letter-spacing: 2px !important;
}

/* ══════════════════════
   PRODUCT GRID
══════════════════════ */
.product-grid,
.collection .product-grid {
  gap: 18px !important;
}

/* ══════════════════════
   FILTERS / FACETS
══════════════════════ */
.facets,
.facets-wrap {
  font-family: 'Outfit', sans-serif !important;
}
.facets__summary,
.active-facets__button,
.facets__label {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 600 !important;
  border-radius: 50px !important;
  border: 1.5px solid var(--signal-border) !important;
  background: var(--signal-white) !important;
  color: var(--signal-text-2) !important;
  padding: 9px 18px !important;
  transition: all .15s !important;
}
.facets__summary:hover,
.facets__label:hover {
  border-color: var(--signal-text-2) !important;
  color: var(--signal-text) !important;
}

/* ══════════════════════
   HERO / IMAGE BANNER
══════════════════════ */
.banner:not(.slideshow),
.banner__content {
  border-radius: var(--signal-r-xl) !important;
  overflow: hidden !important;
}
.banner__box {
  background: rgba(255,255,255,.9) !important;
  border-radius: var(--signal-r-lg) !important;
  backdrop-filter: blur(var(--signal-box-blur, 0px)) !important;
  -webkit-backdrop-filter: blur(var(--signal-box-blur, 0px)) !important;
}
.banner .button {
  border-radius: 50px !important;
}

/* ══════════════════════
   FOOTER
══════════════════════ */
.footer {
  background: var(--signal-white) !important;
  border-top: 1px solid var(--signal-border) !important;
  font-family: 'Outfit', sans-serif !important;
}
.footer__col-nav,
.footer-block__heading,
.footer .footer-block__heading {
  font-family: 'Outfit', sans-serif !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: var(--signal-text-3) !important;
  margin-bottom: 18px !important;
}
.footer-block__list a,
.footer__list a,
.footer a {
  font-family: 'Outfit', sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--signal-text-2) !important;
  text-decoration: none !important;
  transition: color .15s !important;
}
.footer-block__list a:hover,
.footer a:hover {
  color: var(--signal-accent) !important;
}
.footer-block__list,
.footer__list {
  gap: 10px !important;
}

/* Footer bottom */
.footer__copyright {
  font-size: 13px !important;
  color: var(--signal-text-3) !important;
  font-family: 'Outfit', sans-serif !important;
  border-top: 1px solid var(--signal-border) !important;
  padding: 20px 24px !important;
}

/* Social icons */
.social-icons a,
.footer__list--social a,
.list-social__link {
  width: 38px !important;
  height: 38px !important;
  border-radius: 10px !important;
  border: 1.5px solid var(--signal-border) !important;
  background: var(--signal-white) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all .2s !important;
}
.list-social__link:hover {
  border-color: var(--signal-accent) !important;
  background: var(--signal-accent-lt) !important;
  transform: translateY(-2px) !important;
}

/* ══════════════════════
   CART DRAWER
══════════════════════ */
.cart-drawer,
.cart-notification {
  font-family: 'Outfit', sans-serif !important;
  background: var(--signal-white) !important;
}
.cart-drawer__header {
  border-bottom: 1px solid var(--signal-border) !important;
  font-weight: 800 !important;
  font-family: 'Outfit', sans-serif !important;
}

/* ══════════════════════
   FORMS / INPUTS
══════════════════════ */
.field__input,
.select__select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
textarea {
  font-family: 'Outfit', sans-serif !important;
  border-radius: 50px !important;
  border: 1.5px solid var(--signal-border) !important;
  background: var(--signal-bg) !important;
  font-size: 14px !important;
  color: var(--signal-text) !important;
  transition: border-color .2s, box-shadow .2s !important;
}
.field__input:focus,
input[type="text"]:focus,
input[type="email"]:focus {
  border-color: var(--signal-accent) !important;
  box-shadow: 0 0 0 3px rgba(255,68,56,.1) !important;
  background: var(--signal-white) !important;
  outline: none !important;
}
textarea {
  border-radius: 16px !important;
}

/* ══════════════════════
   COLLECTION PAGE
══════════════════════ */

/* Wrapper utama collection */
.collection-hero {
  background: transparent !important;
  margin: 0 !important;
  padding: 40px 0 0 !important;
}

/* Inner hero: sama persis dengan .glvl-hdr */
.collection-hero__inner {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 24px 24px !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  border-bottom: 2px solid #e8e4dc !important;
  margin-bottom: 32px !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

/* Label "KOLEKSI" kecil di atas judul */
.collection-hero__text-wrapper::before {
  content: 'KOLEKSI' !important;
  display: block !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 2.5px !important;
  text-transform: uppercase !important;
  color: #e8271e !important;
  font-family: 'Outfit', sans-serif !important;
  margin-bottom: 10px !important;
}

/* Judul collection */
.collection-hero__title {
  font-size: 32px !important;
  font-weight: 900 !important;
  letter-spacing: -1.2px !important;
  margin: 0 !important;
  color: #0f172a !important;
  line-height: 1 !important;
  font-family: 'Outfit', sans-serif !important;
  background: transparent !important;
  padding: 0 !important;
  border: none !important;
}

/* visually-hidden span jangan ikut ditampilkan */
.collection-hero__title .visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
}

/* Filter + grid: bersih, ikut page-width bawaan */
.facets-wrapper,
.product-grid-container {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  margin: 0 !important;
}

/* Center filter bar */
.facets-wrapper {
  display: flex !important;
  justify-content: center !important;
}
facet-filters-form.facets {
  display: flex !important;
  justify-content: center !important;
  width: 100% !important;
}
form#FacetFiltersForm {
  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 2rem !important;
  width: auto !important;
  margin-bottom: 0 !important;
}
#FacetsWrapperDesktop {
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 1rem !important;
  margin-bottom: 0 !important;
}
.facets__heading { margin: 0 !important; }
.facets__summary { margin-bottom: 0 !important; }
.facets__disclosure { margin-right: 0 !important; }
.facet-filters { flex: 0 0 auto !important; }
.facet-filters__field { display: flex !important; align-items: center !important; gap: 1rem !important; }
.product-count { flex: 0 0 auto !important; margin: 0 !important; }

/* Section wrapper: buang padding bawaan Dawn */
.shopify-section:has(.collection-hero) {
  padding: 0 !important;
  margin: 0 !important;
}

/* ══════════════════════
   IMAGE WITH TEXT
══════════════════════ */
.image-with-text {
  border-radius: var(--signal-r-lg) !important;
  overflow: hidden !important;
}
.image-with-text__content {
  background: var(--signal-surface) !important;
  font-family: 'Outfit', sans-serif !important;
}

/* ══════════════════════
   RICH TEXT / SECTIONS
══════════════════════ */
.rich-text__text,
.rte {
  font-family: 'Outfit', sans-serif !important;
  color: var(--signal-text-2) !important;
  line-height: 1.7 !important;
}

/* ══════════════════════
   SECTION PADDING FIX
══════════════════════ */
.shopify-section {
  margin: 0 !important;
}
.page-width {
  max-width: 1200px !important;
  padding: 0 24px !important;
}

/* ══════════════════════
   NEWSLETTER / EMAIL SIGNUP
══════════════════════ */
.email-signup-banner,
.newsletter-section {
  border-radius: var(--signal-r-xl) !important;
  overflow: hidden !important;
}
[class*="email-signup"] .field__input {
  border-radius: 50px !important;
}

/* Wrapper kanan: override newsletter__wrapper padding-right yang 9rem
   agar form tidak terlalu mepet ke tepi kanan banner */
.email-signup-banner .newsletter__wrapper {
  padding-right: 3.5rem !important;
  padding-left: 3.5rem !important;
}

/* Form: natural width, tidak stretch 100% */
.email-signup-banner .newsletter-form {
  max-width: 100% !important;
  width: auto !important;
  align-items: stretch !important;
}

/* Stack: horizontal layout — width & flex diatur via inline style dari Liquid */
.email-signup-banner .signal-newsletter-stack {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Button: width diatur dari Liquid (auto untuk horizontal, 100% untuk vertikal) */
.email-signup-banner .signal-submit-btn {
  box-sizing: border-box !important;
}

/* ══════════════════════
   PREDICTIVE SEARCH
══════════════════════ */
.predictive-search {
  border-radius: var(--signal-r-md) !important;
  border: 1.5px solid var(--signal-border) !important;
  box-shadow: var(--signal-shadow-md) !important;
  font-family: 'Outfit', sans-serif !important;
  overflow: hidden !important;
}
.predictive-search__item-heading {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 700 !important;
  color: var(--signal-text) !important;
}
.predictive-search__item:hover {
  background: var(--signal-bg) !important;
}

/* ══════════════════════
   PRODUCT PAGE
══════════════════════ */
.product__info-wrapper,
.product__info-container {
  font-family: 'Outfit', sans-serif !important;
}
.product__title {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 900 !important;
  letter-spacing: -1px !important;
  color: var(--signal-text) !important;
}
.product__price .price-item--regular {
  font-size: 28px !important;
  font-weight: 800 !important;
  color: var(--signal-accent) !important;
}

/* Variant pills */
.variant-pills .swatch-input__button,
.variant-pills .swatch__media {
  border-radius: 50px !important;
  border: 1.5px solid var(--signal-border) !important;
  font-family: 'Outfit', sans-serif !important;
  font-weight: 600 !important;
  transition: all .15s !important;
}
.variant-pills .swatch-input__button:hover,
.variant-pills .swatch-input__button:checked + label {
  border-color: var(--signal-accent) !important;
  background: var(--signal-accent-lt) !important;
  color: var(--signal-accent) !important;
}

/* ══════════════════════
══════════════════════ */
.collection-list .card {
  border-radius: var(--signal-r-lg) !important;
  overflow: hidden !important;
  border: 1.5px solid var(--signal-border) !important;
  transition: transform .2s, box-shadow .2s !important;
}
.collection-list .card:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--signal-shadow-md) !important;
}

/* ══════════════════════
   MARQUEE / SCROLLING TEXT
══════════════════════ */
.scroll-trigger.animate--slide-in {
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* ══════════════════════
   TRUST/ICON BAR
══════════════════════ */
.multicolumn-list,
.multicolumn {
  font-family: 'Outfit', sans-serif !important;
}
.multicolumn-list__item .icon-with-text__icon {
  color: var(--signal-accent) !important;
}
.multicolumn-card__title,
.icon-with-text__heading {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 700 !important;
}
.multicolumn-card__description,
.icon-with-text__body {
  font-family: 'Outfit', sans-serif !important;
  color: var(--signal-text-2) !important;
}

/* Dark section (trust bar) */
.color-scheme-3,
.color-inverse {
  background: var(--signal-navy) !important;
  color: #fff !important;
}
.color-scheme-3 .multicolumn-card__title,
.color-inverse .icon-with-text__heading {
  color: #fff !important;
}
.color-scheme-3 .multicolumn-card__description,
.color-inverse .icon-with-text__body {
  color: #71717a !important;
}

/* ══════════════════════
   TESTIMONIALS / FEATURED BLOG
══════════════════════ */
.card--article,
.article-card {
  background: var(--signal-bg) !important;
  border: 1.5px solid var(--signal-border) !important;
  border-radius: var(--signal-r-md) !important;
  transition: box-shadow .2s !important;
  font-family: 'Outfit', sans-serif !important;
}
.card--article:hover {
  box-shadow: var(--signal-shadow-md) !important;
}

/* ══════════════════════
   PAGINATION
══════════════════════ */
.pagination__list {
  gap: 6px !important;
}
.pagination__item a,
.pagination__item span {
  border-radius: 12px !important;
  border: 1.5px solid var(--signal-border) !important;
  font-family: 'Outfit', sans-serif !important;
  font-weight: 600 !important;
  color: var(--signal-text-2) !important;
  transition: all .15s !important;
}
.pagination__item--current a,
.pagination__item--current span {
  background: var(--signal-text) !important;
  border-color: var(--signal-text) !important;
  color: #fff !important;
}
.pagination__item a:hover {
  border-color: var(--signal-text) !important;
  color: var(--signal-text) !important;
  background: var(--signal-bg) !important;
}

/* ══════════════════════
   BREADCRUMBS
══════════════════════ */
nav[aria-label="breadcrumbs"] a,
.breadcrumbs a,
.breadcrumb a {
  font-family: 'Outfit', sans-serif !important;
  font-size: 13px !important;
  color: var(--signal-text-2) !important;
}
nav[aria-label="breadcrumbs"] a:hover,
.breadcrumb a:hover {
  color: var(--signal-accent) !important;
}

/* ══════════════════════
   QUANTITY INPUT
══════════════════════ */
.quantity {
  border-radius: 12px !important;
  border: 1.5px solid var(--signal-border) !important;
  overflow: hidden !important;
  font-family: 'Outfit', sans-serif !important;
}
.quantity__button {
  background: var(--signal-bg) !important;
  border: none !important;
  color: var(--signal-text) !important;
  font-weight: 700 !important;
  transition: background .15s !important;
}
.quantity__button:hover {
  background: var(--signal-border) !important;
}
.quantity__input {
  border-radius: 0 !important;
  border: none !important;
  border-left: 1px solid var(--signal-border) !important;
  border-right: 1px solid var(--signal-border) !important;
  font-family: 'Outfit', sans-serif !important;
  font-weight: 600 !important;
}

/* ══════════════════════
   COMPLEMENTARY / RECOMMENDATIONS
══════════════════════ */
.complementary-products {
  border-radius: var(--signal-r-md) !important;
  border: 1.5px solid var(--signal-border) !important;
  overflow: hidden !important;
}

/* ══════════════════════
   MOBILE MENU
══════════════════════ */
.menu-drawer,
.menu-drawer__container {
  font-family: 'Outfit', sans-serif !important;
  background: var(--signal-white) !important;
}
.menu-drawer__menu-item,
.menu-drawer__navigation a {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 600 !important;
  color: var(--signal-text) !important;
  border-radius: 8px !important;
}
.menu-drawer__menu-item:hover {
  background: var(--signal-bg) !important;
  color: var(--signal-accent) !important;
}

/* ══════════════════════
   GENERAL CLEANUP
══════════════════════ */
/* Remove default outline in favour of our styles */
*:focus-visible {
  outline: 2px solid var(--signal-accent) !important;
  outline-offset: 2px !important;
}

/* Link hover accent */
a:hover {
  color: var(--signal-accent) !important;
}

/* Dividers */
hr {
  border-color: var(--signal-border) !important;
}

/* Active promo / sale colour */
.color-accent-1 {
  color: var(--signal-accent) !important;
}
.background-accent-1 {
  background: var(--signal-accent) !important;
}

/* ══════════════════════
   QUICK ADD BUTTON
══════════════════════ */
.quick-add__submit,
.card__footer .button {
  border-radius: 50px !important;
  font-family: 'Outfit', sans-serif !important;
  font-weight: 700 !important;
  background: #18181b !important;
  color: #fff !important;
  border: none !important;
  transition: all .2s !important;
  font-size: 1.3rem !important;
  padding: 1rem 2rem !important;
}
.quick-add__submit:hover,
.card__footer .button:hover {
  background: #e8271e !important;
  transform: translateY(-1px) !important;
}

/* ══════════════════════
   PRODUCT CARD BOTTOM
══════════════════════ */
.card__information {
  padding: 1.6rem !important;
  font-family: 'Outfit', sans-serif !important;
}
.card__information .price__container {
  margin-top: 0.8rem !important;
}
.card__information .card__heading {
  margin-bottom: 0.5rem !important;
}

/* ══════════════════════
   SECTION HEADINGS
══════════════════════ */
.collection-description-wrapper .rich-text__heading,
.section .collection__title,
.featured-collection .title,
.section-title {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.8px !important;
  color: #18181b !important;
}

/* "View all" link */
.link--text,
.link-all-items {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 1.35rem !important;
  font-weight: 700 !important;
  color: #52525b !important;
  text-decoration: none !important;
  padding: 9px 18px !important;
  border: 1.5px solid #e8e4dc !important;
  border-radius: 50px !important;
  transition: all .2s !important;
  font-family: 'Outfit', sans-serif !important;
}
.link--text:hover,
.link-all-items:hover {
  border-color: #18181b !important;
  color: #18181b !important;
  background: #f5f4f0 !important;
}

/* ══════════════════════
   MULTICOLUMN (TRUST BAR STYLE)
══════════════════════ */
.multicolumn-list__item {
  text-align: center !important;
}
.multicolumn-card {
  padding: 2.8rem 2.4rem !important;
  font-family: 'Outfit', sans-serif !important;
}
.multicolumn-card__title {
  font-size: 1.4rem !important;
  font-weight: 700 !important;
  margin-bottom: 0.4rem !important;
  font-family: 'Outfit', sans-serif !important;
}
.multicolumn-card__info {
  font-size: 1.2rem !important;
  color: #71717a !important;
  font-family: 'Outfit', sans-serif !important;
}

/* ══════════════════════
   EMAIL SIGNUP / NEWSLETTER
══════════════════════ */
.email-signup-banner {
  border-radius: var(--signal-r-xl) !important;
  overflow: hidden !important;
  margin: 0 2.4rem !important;
}
.email-signup-banner .email-signup-banner__cell {
  font-family: 'Outfit', sans-serif !important;
}
.email-signup-banner .email-signup-banner__heading {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 900 !important;
  letter-spacing: -1px !important;
}
.email-signup-banner .field__input {
  border-radius: 50px !important;
  background: rgba(255,255,255,.15) !important;
  border: 1.5px solid rgba(255,255,255,.25) !important;
  color: #fff !important;
  font-family: 'Outfit', sans-serif !important;
}
.email-signup-banner .button {
  border-radius: 50px !important;
  background: #fff !important;
  color: #e8271e !important;
  font-family: 'Outfit', sans-serif !important;
  font-weight: 800 !important;
}
.email-signup-banner .button:hover {
  background: #f1f5f9 !important;
  transform: translateY(-2px) !important;
}

/* ══════════════════════
   COLLAGE SECTION
══════════════════════ */
.collage {
  border-radius: var(--signal-r-lg) !important;
  overflow: hidden !important;
}
.collage-card {
  border-radius: var(--signal-r-lg) !important;
  overflow: hidden !important;
  transition: transform .2s !important;
}
.collage-card:hover {
  transform: translateY(-4px) !important;
}



/* ══════════════════════
   IMAGE BANNER ROUNDED
══════════════════════ */
@media (max-width: 749px) {
  /* Slideshow/banner: full-width, no side margin, no border-radius */
  .banner {
    margin: 0 !important;
    border-radius: 0 !important;
  }
  /* Image banner (non-slideshow) tetap pakai rounded + margin */
  .image-banner .banner,
  .shopify-section:not(:has(slideshow-component)) .banner {
    margin: 0 1.6rem !important;
    border-radius: var(--signal-r-lg) !important;
  }
  .email-signup-banner,
  .shopify-section .email-signup-banner,
  #shopify-section-email-signup-banner .email-signup-banner {
    margin: 0 12px !important;
    border-radius: var(--signal-r-lg) !important;
  }
  .card__heading {
    font-size: 1.4rem !important;
  }
  .price .price-item--regular,
  .price .price-item--sale {
    font-size: 1.6rem !important;
  }
}

/* ════════════════════════════════════════
   FIX 1: HEADER — SEARCH PILL + LAYOUT
════════════════════════════════════════ */

/* Force search to show inline in header row */
.header--middle-left .header__search,
.header--top-left .header__search,
.header .header__search {
  display: flex !important;
  align-items: center !important;
  flex: 1 !important;
  max-width: 780px !important;
  margin: 0 16px !important;
}

/* Search pill shape */
.header__search .search-modal__form,
.header__search .field,
.header__search form {
  width: 100% !important;
  border-radius: 50px !important;
  overflow: visible !important;
}

.header__search .field__input,
.search-modal__form .field__input,
.header__search input[type="search"],
.header__search input[type="text"] {
  border-radius: 50px !important;
  border: 1.5px solid #e8e4dc !important;
  background: #f5f4f0 !important;
  font-family: 'Outfit', sans-serif !important;
  font-size: 14px !important;
  padding: 10px 18px 10px 44px !important;
  width: 100% !important;
  color: #18181b !important;
  outline: none !important;
  transition: border-color .2s, box-shadow .2s !important;
  height: auto !important;
  min-height: 42px !important;
}

.header__search .field__input:focus,
.header__search input:focus {
  border-color: #e8271e !important;
  box-shadow: 0 0 0 3px rgba(255,68,56,.1) !important;
  background: #ffffff !important;
}

/* Hide the search icon that normally opens a modal — we show inline search */
.header__icon--search {
  display: none !important;
}

/* Show search form always (not just in modal) */
.header__search {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: static !important;
  transform: none !important;
}
.header__search .search-modal,
.header__search details,
.header__search details[open] {
  width: 100% !important;
}
.header__search details summary {
  display: none !important; /* hide toggle, show form directly */
}
.header__search details .search-modal__content {
  position: static !important;
  transform: none !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  animation: none !important;
}

/* Predictive search dropdown positioning */
.predictive-search {
  top: calc(100% + 4px) !important;
  border-radius: 16px !important;
  border: 1.5px solid #e8e4dc !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.09) !important;
}

/* Header layout — logo left, search center, icons right */
.header {
  display: grid !important;
  grid-template-columns: auto 1fr auto !important;
  grid-template-rows: auto !important;
  align-items: center !important;
  gap: 20px !important;
  min-height: 68px !important;
  padding: 0 24px !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
}

/* Logo area — force col 1, row 1 */
.header__heading,
.header__heading-link,
h1.header__heading {
  grid-column: 1 !important;
  grid-row: 1 !important;
  white-space: nowrap !important;
  align-self: center !important;
}

/* Search in middle — col 2, row 1 */
.header__search,
.signal-search-inline {
  grid-column: 2 !important;
  grid-row: 1 !important;
  align-self: center !important;
}

/* Icons on right — col 3, row 1 */
.header__icons {
  grid-column: 3 !important;
  grid-row: 1 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  align-self: center !important;
}

/* Icon buttons */
.header__icon {
  width: 42px !important;
  height: 42px !important;
  border-radius: 12px !important;
  border: 1.5px solid #e8e4dc !important;
  background: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all .2s !important;
  flex-shrink: 0 !important;
  text-decoration: none !important;
}
.header__icon:hover {
  border-color: #18181b !important;
  background: #f5f4f0 !important;
}
.header__icon svg { color: #18181b !important; }

/* Wishlist, account, cart — no border, flat */
.header__icon--wishlist,
.header__icon--account,
.header__icon--cart {
  border: none !important;
  background: none !important;
  border-radius: 8px !important;
  opacity: 1 !important;
}
.header__icon--wishlist:hover,
.header__icon--account:hover,
.header__icon--cart:hover {
  border: 1px solid #18181b !important;
  background: #f5f4f0 !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

/* Nav menu row below header */
.header-wrapper--border-bottom .header,
.header {
  border-bottom: none !important;
}
.nav-bar-row,
.header__submenu-row,
.header__menu {
  border-top: 1px solid #e8e4dc !important;
  background: #ffffff !important;
}

/* ════════════════════════════════════════
   INLINE SEARCH BAR STYLES (Final)
════════════════════════════════════════ */
.signal-search-inline {
  flex: 1 !important;
  max-width: 780px !important;
  min-width: 200px !important;
  position: relative !important;
  display: flex !important;
}
.signal-search-inline > * { width: 100% !important; }

.signal-search-form { width: 100% !important; position: relative !important; }
.signal-search-field { position: relative !important; width: 100% !important; }

.signal-search-icon {
  position: absolute !important;
  left: 16px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: #a1a1aa !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

.signal-search-input {
  width: 100% !important;
  padding: 11px 50px 11px 44px !important;
  border-radius: 50px !important;
  border: 1.5px solid #e8e4dc !important;
  background: #f5f4f0 !important;
  font-family: 'Outfit', sans-serif !important;
  font-size: 14px !important;
  color: #18181b !important;
  outline: none !important;
  transition: border-color .2s, box-shadow .2s !important;
  height: 44px !important;
  box-sizing: border-box !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  line-height: normal !important;
}
.signal-search-input::placeholder { color: #a1a1aa !important; }
.signal-search-input:focus {
  border-color: #e8271e !important;
  box-shadow: 0 0 0 3px rgba(255,68,56,.1) !important;
  background: #ffffff !important;
}

.signal-search-btn {
  position: absolute !important;
  right: 6px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  border: none !important;
  background: #18181b !important;
  color: #fff !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background .2s !important;
  padding: 0 !important;
}
.signal-search-btn:hover { background: #e8271e !important; }

/* Predictive search dropdown */
.signal-search-inline .predictive-search {
  position: absolute !important;
  top: calc(100% + 6px) !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 999 !important;
  background: #ffffff !important;
  border-radius: 16px !important;
  border: 1.5px solid #e8e4dc !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.09) !important;
  overflow: hidden !important;
}

/* Kill old modal toggle icon */
.header__icon--search.modal__toggle,
.header__icon--search.header__icon--summary,
details-modal .header__icon--summary {
  display: none !important;
}

/* Header grid layout — logo | search | icons, all on row 1 */
.header {
  display: grid !important;
  grid-template-columns: auto 1fr auto !important;
  grid-template-rows: auto !important;
  align-items: center !important;
  gap: 20px !important;
  min-height: 68px !important;
  padding: 0 24px !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  width: 100% !important;
}

/* Logo = col 1, row 1 */
.header__heading { grid-column: 1 !important; grid-row: 1 !important; white-space: nowrap !important; align-self: center !important; }
.header__heading-link { grid-column: 1 !important; grid-row: 1 !important; white-space: nowrap !important; align-self: center !important; }
h1.header__heading { grid-column: 1 !important; grid-row: 1 !important; }

/* Drawer button (mobile hamburger) — hidden on desktop only, shown on mobile */
@media screen and (min-width: 990px) {
  header-drawer { display: none !important; }
}

/* Search = col 2, row 1 */
.signal-search-inline { grid-column: 2 !important; grid-row: 1 !important; align-self: center !important; }
.header__search { grid-column: 2 !important; grid-row: 1 !important; align-self: center !important; }

/* Icons = col 3, row 1 */
.header__icons { grid-column: 3 !important; grid-row: 1 !important; align-self: center !important; }

/* Remove nav from header row */
.header__menu-items,
.list-menu--inline.header__menu-items {
  display: none !important;
}
   REVISI 1: MOBILE SEARCH BAR — row di bawah header
══════════════════════════════════════════════════ */

/* Mobile search bar: SELALU disembunyikan di desktop */
.signal-mobile-search-bar {
  display: none !important;
  background: #ffffff;
  border-bottom: 1px solid #e8e4dc;
  padding: 10px 16px;
  width: 100%;
}

/* Tablet & Mobile: tampilkan mobile search bar */
@media screen and (max-width: 989px) {
  .signal-mobile-search-bar {
    display: block !important;
  }

  /* Sembunyikan inline search dari header row di mobile */
  .header .signal-search-inline,
  .header .header__search {
    display: none !important;
  }

  /* Header mobile: keep base.css grid-areas, just resize */
  .header {
    grid-template-columns: auto 1fr auto !important;
    grid-template-areas: 'left-icons heading icons' !important;
    gap: 8px !important;
    min-height: unset !important;
    height: auto !important;
    padding: 14px 12px !important;
    align-items: center !important;
    box-sizing: border-box !important;
  }

  /* Pastikan header-wrapper tidak tambah padding ekstra */
  .header-wrapper .header,
  .section-header .header {
    padding-top: 14px !important;
    padding-bottom: 14px !important;
  }

  /* Margin bawah header wrapper mobile = 0, slideshow langsung nempel */
  .shopify-section-header-sticky,
  .section-header {
    margin-bottom: 0 !important;
  }

  /* Burger uses left-icons area */
  header-drawer {
    grid-area: left-icons !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-left: 0 !important;
  }

  /* Cancel search stealing left-icons on mobile */
  .header > .header__search,
  .header .signal-search-inline {
    grid-area: unset !important;
    display: none !important;
  }

  .header__heading,
  .header__heading-link {
    grid-area: heading !important;
    text-align: center !important;
    justify-self: center !important;
  }

  .header__icons {
    grid-area: icons !important;
    gap: 4px !important;
  }

  /* Icon size smaller on mobile */
  .header__icon {
    width: 38px !important;
    height: 38px !important;
  }
}

.signal-mobile-search-inner {
  position: relative;
  max-width: 100%;
}

.signal-mobile-search-form {
  width: 100%;
  position: relative;
}

.signal-mobile-search-field {
  position: relative;
  width: 100%;
}

.signal-mobile-search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #a1a1aa;
  pointer-events: none;
  z-index: 1;
}

.signal-mobile-search-input {
  width: 100%;
  padding: 11px 48px 11px 42px;
  border-radius: 50px;
  border: 1.5px solid #e8e4dc;
  background: #f5f4f0;
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  color: #18181b;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
  height: 44px;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
}

.signal-mobile-search-input::placeholder {
  color: #a1a1aa;
}

.signal-mobile-search-input:focus {
  border-color: #e8271e;
  box-shadow: 0 0 0 3px rgba(255,68,56,.1);
  background: #ffffff;
}

.signal-mobile-search-btn {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: #18181b;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s;
  padding: 0;
}

.signal-mobile-search-btn:hover {
  background: #e8271e;
}

/* Predictive search dropdown mobile */
.signal-mobile-search-inner .predictive-search {
  position: absolute !important;
  top: calc(100% + 6px) !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 999 !important;
  background: #ffffff !important;
  border-radius: 16px !important;
  border: 1.5px solid #e8e4dc !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.09) !important;
  overflow: hidden !important;
}


/* ── Featured Collection Mobile ── */
@media (max-width: 749px) {
  /* Container tidak overflow */
  .featured-collection,
  .section-featured-collection {
    padding: 0 12px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }
  /* 2 kolom grid di mobile */
  .featured-collection .product-grid,
  .section-featured-collection .product-grid,
  ul.product-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    width: 100% !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }
  .featured-collection .product-grid .grid__item,
  .section-featured-collection .product-grid .grid__item,
  ul.product-grid li {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    flex: unset !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }
  /* Card tidak overflow */
  .featured-collection .card-wrapper,
  .section-featured-collection .card-wrapper {
    width: 100% !important;
    overflow: hidden !important;
  }
  /* Title size */
  .featured-collection .title,
  .section-featured-collection .title {
    font-size: 20px !important;
  }
}

/* ══════════════════════════════════════════════════
   SECONDARY NAV BAR — Beranda, Katalog, Kontak
   Di bawah header row, tampil di semua layar
   Referensi: AA.html .nav-menu
══════════════════════════════════════════════════ */

.signal-secondary-nav {
  background: #ffffff;
  border-bottom: 1px solid #e8e4dc;
  width: 100%;
}

.signal-secondary-nav-inner {
  display: flex;
  align-items: center;
  gap: 2px !important;
  padding: 0 24px;
  height: 46px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  max-width: 1200px;
  margin: 0 auto;
}

.signal-secondary-nav-inner::-webkit-scrollbar {
  display: none;
}

.signal-secondary-nav-link {
  font-family: 'Outfit', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  color: #52525b;
  text-decoration: none;
  padding: 6px 14px !important;
  border-radius: 8px;
  transition: all .15s;
  white-space: nowrap;
  flex-shrink: 0;
}

.signal-secondary-nav-link:hover {
  color: #18181b;
  background: #f5f4f0;
}

.signal-secondary-nav-link.is-active {
  color: #e8271e;
  background: #fff1f0;
}

/* Mobile: padding lebih kecil */
@media screen and (max-width: 989px) {
  .signal-secondary-nav-inner {
    padding: 0 12px;
    height: 42px;
    gap: 0;
  }
  .signal-secondary-nav-link {
    font-size: 12.5px;
    padding: 5px 10px;
  }
}

/* Sembunyikan header__inline-menu bawaan tema agar tidak dobel */
.header__inline-menu {
  display: none !important;
}


/* ════════════════════════════════════════════════════════════
   SLIDESHOW & HERO LAYOUT — Clean rewrite (explicit heights)
   No height:100% chains. Concrete px/rem everywhere possible.
   ════════════════════════════════════════════════════════════ */

/* ── Rounded corners via clip-path — DISABLED on mobile (causes cut-off) ── */
@media screen and (min-width: 750px) {
  .slideshow {
    clip-path: inset(0 round var(--signal-r-xl));
  }
}
/* Mobile: no clip-path, no rounding, full-width */
@media screen and (max-width: 749px) {
  .slideshow {
    clip-path: none !important;
    border-radius: 0 !important;
  }
}

/* ── Slideshow controls: overlay di dalam slide ──────────────────────── */
/* Sembunyikan controls bar bawaan Dawn yang muncul DI BAWAH slide */
.slideshow__controls {
  position: absolute !important;
  bottom: 20px !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 10 !important;
  border: none !important;
  background: transparent !important;
  display: flex !important;
  justify-content: center !important;
}

/* Prev/next arrow buttons */
.slideshow__controls .slider-button {
  background: rgba(255,255,255,.9) !important;
  border-radius: 50% !important;
  border: none !important;
  width: 40px !important;
  height: 40px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.15) !important;
}

/* Dot counter */
.slider-counter__link--dots .slider-counter__item,
.slideshow__controls .slider-counter__link--dots .slider-counter__item {
  background: rgba(255,255,255,.5) !important;
  border-radius: 3px !important;
  height: 6px !important;
  transition: all .3s !important;
}
.slider-counter__link--dots .slider-counter__item.slider-counter__item--active,
.slideshow__controls .slider-counter__link--dots .slider-counter__item.slider-counter__item--active {
  width: 28px !important;
  background: #ffffff !important;
}

/* Slide CTA buttons */
.slideshow .button,
.banner .button {
  border-radius: 50px !important;
  font-family: 'Outfit', sans-serif !important;
  font-weight: 700 !important;
  padding: 1.3rem 2.8rem !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  transition: all .2s !important;
}

/* Slideshow section: strip default section padding */
.slideshow-section,
.section-slideshow {
  padding: 0 !important;
}
.section-slideshow .shopify-section-group-header-section,
.shopify-section:has(slideshow-component) {
  padding: 0 !important;
  margin: 0 !important;
}

/* ── HERO 3-COLUMN LAYOUT ─────────────────────────────────────────
   Strategy: let Shopify's .banner--medium/large min-height be the
   natural height driver. We only control the OUTER grid layout and
   the clipping/radius of the slideshow wrapper.
   NO overflow:hidden on grid — that was collapsing the slideshow.
   NO min-height:0 on .slideshow — that removed the only height anchor.
   ──────────────────────────────────────────────────────────────── */
.signal-hero-layout {
  max-width: 1200px;
  margin: 28px auto 28px;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 16px;
  align-items: stretch;
  /* Tinggi minimum agar kedua kartu + tombol muat */
  min-height: 420px;
}

/* Slideshow column wrapper */
.signal-hero-layout > .signal-slideshow-inner {
  border-radius: 32px;
  overflow: hidden;
  min-height: 0;
}

/* Side panel: kolom kanan, flex column, tinggi ikut grid */
.signal-hero-layout > .signal-side-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 420px;
}

/* slideshow-component: fill the full height of grid cell */
.signal-hero-layout slideshow-component {
  display: block !important;
  height: 100% !important;
  width: 100% !important;
}

/* Slideshow inner wrapper must stretch to fill grid cell */
.signal-hero-layout > .signal-slideshow-inner,
.signal-hero-layout > .signal-slideshow-inner > .shopify-section,
.signal-hero-layout > .signal-slideshow-inner > .section-slideshow {
  height: 100% !important;
}

/* The slide track: must fill 100% of slideshow-component height */
.signal-hero-layout .slideshow.banner,
.signal-hero-layout .slideshow {
  height: 100% !important;
  /* Kill any min-height from .banner--medium/large that would expand beyond aspect-ratio */
  min-height: 0 !important;
  clip-path: none !important;
}

/* Each slide: full height of the track */
.signal-hero-layout .slideshow__slide,
.signal-hero-layout .slider__slide {
  height: 100% !important;
  min-height: 0 !important;
  border-radius: 0;
}

/* banner--* min-heights must not fight aspect-ratio inside layout */
.signal-hero-layout .banner--small,
.signal-hero-layout .banner--medium,
.signal-hero-layout .banner--large,
.signal-hero-layout .banner--adapt_image {
  min-height: 0 !important;
}

/* Media (image) inside slide: absolutely fill slide */
.signal-hero-layout .banner__media {
  position: absolute !important;
  inset: 0 !important;
}

/* Fix Dawn's animate--zoom-in / animate--fixed (position:fixed escapes clip) */
.signal-hero-layout .banner__media.animate--zoom-in,
.signal-hero-layout .banner__media.animate--fixed,
slideshow-component .banner__media.animate--zoom-in,
slideshow-component .banner__media.animate--fixed {
  overflow: hidden !important;
  contain: layout style !important;
}
.signal-hero-layout .banner__media.animate--zoom-in > img,
.signal-hero-layout .banner__media.animate--zoom-in > svg,
.signal-hero-layout .banner__media.animate--fixed > img,
.signal-hero-layout .banner__media.animate--fixed > svg,
slideshow-component .banner__media.animate--zoom-in > img,
slideshow-component .banner__media.animate--zoom-in > svg,
slideshow-component .banner__media.animate--fixed > img,
slideshow-component .banner__media.animate--fixed > svg {
  position: absolute !important;
  inset: 0 !important;
  height: 100% !important;
  width: 100% !important;
  object-fit: cover !important;
  scale: 1 !important;
  transform: none !important;
}

/* Shopify section wrappers inside layout: no extra spacing */
.signal-hero-layout .section-slideshow,
.signal-hero-layout .shopify-section {
  margin: 0 !important;
  padding: 0 !important;
}


/* Side cards */
.signal-side-card {
  flex: 1 1 0;
  min-height: 160px;
  border-radius: 24px;
  padding: 24px 22px;
  cursor: pointer;
  transition: transform .2s, box-shadow .2s;
  position: relative;
  overflow: hidden;
  border: 1.5px solid transparent;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.signal-side-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,.09); }

.signal-side-card--dark  { background: linear-gradient(145deg, #1e293b, #334155); border-color: #475569; }
.signal-side-card--amber { background: linear-gradient(145deg, #fefce8, #fef3c7); border-color: #fde68a; }

.signal-side-card .sc-tag  { font-size: 10px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 8px; }
.signal-side-card--dark .sc-tag  { color: #94a3b8; }
.signal-side-card--amber .sc-tag { color: #d97706; }

.signal-side-card .sc-title { font-size: 20px; font-weight: 800; letter-spacing: -.5px; line-height: 1.2; margin-bottom: 6px; }
.signal-side-card--dark .sc-title  { color: #fff; }
.signal-side-card--amber .sc-title { color: #18181b; }

.signal-side-card .sc-desc { font-size: 12.5px; line-height: 1.5; margin-bottom: 16px; }
.signal-side-card--dark .sc-desc  { color: #94a3b8; }
.signal-side-card--amber .sc-desc { color: #52525b; }

.signal-side-card .sc-btn {
  font-family: 'Outfit', sans-serif; font-size: 12.5px; font-weight: 700;
  padding: 8px 18px; border-radius: 50px; border: none; cursor: pointer;
  width: fit-content; transition: all .2s; display: inline-block; text-decoration: none;
}
.signal-side-card--dark .sc-btn  { background: #fff; color: #0f172a; }
.signal-side-card--dark .sc-btn:hover  { background: #f1f5f9; }
.signal-side-card--amber .sc-btn { background: #d97706; color: #fff; }
.signal-side-card--amber .sc-btn:hover { background: #b45309; }

.signal-side-card .sc-emoji {
  position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  font-size: 54px; opacity: .2;
}

/* ── Hero side section positioning ───────────────────────────────── */
/*
 * Signal Hero Side Panel: overlay ke samping slideshow tanpa JS.
 * Caranya: section ini di-pull up sebesar tinggi slideshow (42rem di desktop)
 * menggunakan margin-top negatif, lalu diposisikan ke kanan via flex/absolute.
 * pointer-events: none pada section agar area slideshow tetap bisa diklik.
 * pointer-events: auto dikembalikan ke panel card itu sendiri.
 */
/* Slideshow section: biarkan overflow visible agar side panel bisa overlap di atasnya */
.section-slideshow:has(+ .signal-hero-side-section) {
  overflow: visible !important;
}

.signal-hero-side-section {
  position: relative;
  z-index: 10;
  pointer-events: none;
}

@media screen and (min-width: 990px) {
  .section-slideshow + .signal-hero-side-section {
    margin-top: -42rem;   /* sama dengan banner--medium min-height */
    height: 42rem;
    display: flex;
    align-items: stretch;
  }
  .section-slideshow + .signal-hero-side-section .signal-side-wrapper {
    width: 100%;
    max-width: 1200px;    /* ikut page-width */
    margin: 0 auto;
    padding: 0 24px;      /* ikut page-width padding */
    pointer-events: none;
  }
  .section-slideshow + .signal-hero-side-section .signal-side-panel {
    pointer-events: auto;
    margin-top: 0;
  }
}

/* Kalau slide_height = large (56rem), tambahkan class modifier */
.section-slideshow--large + .signal-hero-side-section {
  margin-top: -56rem;
  height: 56rem;
}
.section-slideshow--small + .signal-hero-side-section {
  margin-top: -26rem;
  height: 26rem;
}

/* ── Tablet: stack vertically ─────────────────────────────────────── */
@media (max-width: 989px) {
  .signal-hero-layout {
    grid-template-columns: 1fr;
    padding: 0 16px 16px;
    margin-top: 16px;
    gap: 12px;
  }
  .signal-hero-layout > .signal-slideshow-inner {
    border-radius: 24px;
  }
  .signal-hero-layout > .signal-side-panel {
    flex-direction: row;
    height: auto;
    gap: 12px;
  }
  .signal-side-card {
    flex: 1 1 0;
    min-height: 140px;
    padding: 18px 16px;
  }
  .signal-side-card .sc-desc,
  .signal-side-card p { display: none !important; }
}

/* ── Mobile ────────────────────────────────────── */
@media (max-width: 749px) {
  .signal-hero-layout {
    padding: 0 12px 12px;
    gap: 10px;
  }
  .signal-hero-layout > .signal-slideshow-inner {
    border-radius: 20px;
  }
  .signal-hero-layout > .signal-side-panel { flex-direction: row; gap: 10px; }
  .signal-side-card { min-height: 110px; padding: 14px 12px; border-radius: 16px; }
}


/* ════════════════════════════════════════════════════════════
   BRAND SCROLL — unlimited marquee, right → left, seamless
   ════════════════════════════════════════════════════════════ */
.signal-brand-scroll {
  background: #ffffff;
  border-top: 1px solid #e8e4dc;
  border-bottom: 1px solid #e8e4dc;
  padding: 20px 0;
  overflow: hidden;
  width: 100%;

}

/* Track: flex row, lebar 2x konten (original + klon) */
.signal-brand-track {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  width: max-content;
  /* Mulai dari kanan layar: translateX(0) = posisi normal,
     gerak ke kiri sampai -50% (tepat satu set konten),
     lalu loop seamless */
  animation: signalbrandscroll 28s linear infinite;
  will-change: transform;
}

/* Pause on hover */
.signal-brand-scroll:hover .signal-brand-track {
  animation-play-state: paused;
}

/* Keyframe: dari posisi awal (semua konten di kanan viewport),
   geser ke kiri sebesar 25% (= lebar 1 set dari 4 set clone) */
@keyframes signalbrandscroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-25%); }
}

/* Chip = pill block seperti nav menu item di referensi */
.signal-brand-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 20px;
  background: #f5f4f0;
  border: 1.5px solid #e8e4dc;
  border-radius: 50px;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color .2s, background .2s, color .2s;
  text-decoration: none;
  color: #18181b;
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 700;
}
.signal-brand-chip:hover {
  border-color: #e8271e !important;
  background: #fff1f0 !important;
  color: #e8271e !important;
}
.signal-brand-chip-icon {
  font-size: 17px;
  line-height: 1;
}

/* ══════════════════════════════════════════════
   COLLECTIONS PAGE — Signal Redesign v2
   GadgetLvlUp — gadgetlvlup.myshopify.com
══════════════════════════════════════════════ */

/* ── Section Header ── */
.glvl-collections-section {
  padding: 40px 0 48px;
}
.glvl-section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding-bottom: 24px;
  border-bottom: 1.5px solid var(--signal-border);
  margin-bottom: 32px;
}
.glvl-section-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--signal-accent);
  margin-bottom: 6px;
  display: block;
}
.glvl-section-title {
  font-size: 32px !important;
  font-weight: 900 !important;
  letter-spacing: -1.2px !important;
  margin: 0 !important;
  color: var(--signal-navy) !important;
  line-height: 1 !important;
}
.glvl-view-all-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Outfit', sans-serif !important;
  font-size: 13px;
  font-weight: 700;
  color: var(--signal-text-2);
  text-decoration: none;
  border: 1.5px solid var(--signal-border-2);
  border-radius: 50px;
  padding: 9px 20px;
  background: var(--signal-white);
  transition: all .2s;
}
.glvl-view-all-btn:hover {
  border-color: var(--signal-navy);
  color: var(--signal-navy);
  background: var(--signal-bg);
}
.glvl-view-all-btn svg {
  width: 14px;
  height: 14px;
  transition: transform .2s;
}
.glvl-view-all-btn:hover svg {
  transform: translateX(3px);
}

/* ── Collection Grid ── */
.glvl-collection-grid {
  display: grid;
  gap: 18px;
  margin-bottom: 18px;
}
.glvl-collection-grid--3 {
  grid-template-columns: repeat(3, 1fr);
}
.glvl-collection-grid--2 {
  grid-template-columns: repeat(2, 1fr);
}

/* ── Collection Card ── */
.glvl-col-card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  background: var(--signal-white);
  border: 1.5px solid var(--signal-border);
  display: flex;
  flex-direction: column;
  transition: transform .28s cubic-bezier(.25,.46,.45,.94), box-shadow .28s, border-color .28s;
}
.glvl-col-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 24px 56px rgba(0,0,0,.13);
  border-color: var(--signal-border-2);
}

/* Image area */
.glvl-col-card__media {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: #e8e4dc;
  display: flex;
  align-items: center;
  justify-content: center;
}
.glvl-col-card--tall .glvl-col-card__media {
  aspect-ratio: 3/4;
}
.glvl-col-card--wide .glvl-col-card__media {
  aspect-ratio: 16/7;
}
.glvl-col-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s cubic-bezier(.25,.46,.45,.94);
}
.glvl-col-card:hover .glvl-col-card__media img {
  transform: scale(1.07);
}
.glvl-col-card__media-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(15,23,42,.5) 0%, transparent 55%);
  opacity: 0;
  transition: opacity .28s;
}
.glvl-col-card:hover .glvl-col-card__media-overlay {
  opacity: 1;
}

/* Placeholder (no image) */
.glvl-col-card__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 60px;
  transition: transform .35s cubic-bezier(.25,.46,.45,.94);
}
.glvl-col-card:hover .glvl-col-card__placeholder {
  transform: scale(1.1);
}
.glvl-col-card__placeholder--blue   { background: linear-gradient(135deg, #eff6ff, #dbeafe); }
.glvl-col-card__placeholder--dark   { background: linear-gradient(135deg, #1e293b, #0f172a); }
.glvl-col-card__placeholder--red    { background: linear-gradient(135deg, #fff1f0, #ffe4e0); }
.glvl-col-card__placeholder--amber  { background: linear-gradient(135deg, #fffbeb, #fef3c7); }
.glvl-col-card__placeholder--green  { background: linear-gradient(135deg, #f0fdf4, #dcfce7); }
.glvl-col-card__placeholder--navy   { background: linear-gradient(135deg, #0f172a, #1e293b); }

/* Badge */
.glvl-col-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-radius: 50px;
  padding: 4px 12px;
  z-index: 2;
  color: #fff;
  background: var(--signal-accent);
}
.glvl-col-badge--new  { background: var(--signal-blue); }
.glvl-col-badge--sale { background: var(--signal-green); }
.glvl-col-badge--hot  { background: var(--signal-accent); }

/* Product count chip */
.glvl-col-count {
  position: absolute;
  bottom: 14px;
  right: 14px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 50px;
  padding: 4px 11px;
  color: var(--signal-text-2);
  z-index: 2;
}

/* Footer */
.glvl-col-card__footer {
  padding: 15px 18px 17px;
  background: var(--signal-white);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid var(--signal-border);
}
.glvl-col-card__info {
  min-width: 0;
}
.glvl-col-card__name {
  font-family: 'Outfit', sans-serif;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.3px;
  color: var(--signal-text);
  margin: 0 0 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.glvl-col-card__sub {
  font-size: 12px;
  color: var(--signal-text-3);
  font-weight: 500;
  margin: 0;
}
.glvl-col-card__arrow {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--signal-bg);
  border: 1.5px solid var(--signal-border);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .22s;
  color: var(--signal-text-2);
}
.glvl-col-card__arrow svg {
  width: 15px;
  height: 15px;
  transition: transform .22s;
}
.glvl-col-card:hover .glvl-col-card__arrow {
  background: var(--signal-accent);
  border-color: var(--signal-accent);
  color: #fff;
}
.glvl-col-card:hover .glvl-col-card__arrow svg {
  transform: rotate(-45deg);
}

/* ── List View (main-list-collections) ── */
.glvl-list-header {
  padding: 32px 0 24px;
  border-bottom: 1.5px solid var(--signal-border);
  margin-bottom: 32px;
}
.glvl-list-title {
  font-size: 28px !important;
  font-weight: 900 !important;
  letter-spacing: -0.8px !important;
  color: var(--signal-navy) !important;
  margin: 0 !important;
}

/* ── Mobile responsive ── */
@media screen and (max-width: 749px) {
  .glvl-collection-grid--3 {
    grid-template-columns: repeat(2, 1fr);
  }
  .glvl-collection-grid--2 {
    grid-template-columns: 1fr;
  }
  .glvl-section-title {
    font-size: 24px !important;
  }
  .glvl-col-card__placeholder {
    font-size: 44px;
  }
}
@media screen and (max-width: 480px) {
  .glvl-collection-grid--3 {
    grid-template-columns: 1fr;
  }
  .glvl-col-card__footer {
    padding: 12px 14px 14px;
  }
  .glvl-col-card__name {
    font-size: 14px;
  }
}

/* ── Grid column variants (all possible columns_desktop values) ── */
.glvl-collection-grid--1 { grid-template-columns: 1fr; }
.glvl-collection-grid--2 { grid-template-columns: repeat(2, 1fr); }
.glvl-collection-grid--3 { grid-template-columns: repeat(3, 1fr); }
.glvl-collection-grid--4 { grid-template-columns: repeat(4, 1fr); }
.glvl-collection-grid--5 { grid-template-columns: repeat(5, 1fr); }
.glvl-collection-grid--6 { grid-template-columns: repeat(6, 1fr); }
@media screen and (max-width: 749px) {
  .glvl-collection-grid--4,
  .glvl-collection-grid--5,
  .glvl-collection-grid--6 { grid-template-columns: repeat(2, 1fr); }
}