/** Shopify CDN: Minification failed

Line 17:0 All "@import" rules must come first

**/
/* ============================================================
   SAVI ORGANICS — Brand Tokens & Theme Overrides
   Applies the Savi Organics design system to Shopify Dawn.
   ============================================================ */

/* Samakan rem base dengan Dawn (1rem = 10px) agar section sizing konsisten */
html {
  font-size: 62.5%;
}

/* Jost — geometric sans, substitute for Futura */
@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');

/* Fahkwang — display serif, brand-supplied */
@font-face {
  font-family: 'Fahkwang';
  font-weight: 200;
  font-style: normal;
  src: url('Fahkwang-ExtraLight.ttf') format('truetype');
  font-display: swap;
}

@font-face {
  font-family: 'Fahkwang';
  font-weight: 200;
  font-style: italic;
  src: url('Fahkwang-ExtraLightItalic.ttf') format('truetype');
  font-display: swap;
}

@font-face {
  font-family: 'Fahkwang';
  font-weight: 300;
  font-style: normal;
  src: url('Fahkwang-Light.ttf') format('truetype');
  font-display: swap;
}

@font-face {
  font-family: 'Fahkwang';
  font-weight: 300;
  font-style: italic;
  src: url('Fahkwang-LightItalic.ttf') format('truetype');
  font-display: swap;
}

@font-face {
  font-family: 'Fahkwang';
  font-weight: 400;
  font-style: normal;
  src: url('Fahkwang-Regular.ttf') format('truetype');
  font-display: swap;
}

@font-face {
  font-family: 'Fahkwang';
  font-weight: 400;
  font-style: italic;
  src: url('Fahkwang-Italic.ttf') format('truetype');
  font-display: swap;
}

@font-face {
  font-family: 'Fahkwang';
  font-weight: 500;
  font-style: normal;
  src: url('Fahkwang-Medium.ttf') format('truetype');
  font-display: swap;
}

@font-face {
  font-family: 'Fahkwang';
  font-weight: 500;
  font-style: italic;
  src: url('Fahkwang-MediumItalic.ttf') format('truetype');
  font-display: swap;
}

@font-face {
  font-family: 'Fahkwang';
  font-weight: 600;
  font-style: normal;
  src: url('Fahkwang-SemiBold.ttf') format('truetype');
  font-display: swap;
}

@font-face {
  font-family: 'Fahkwang';
  font-weight: 600;
  font-style: italic;
  src: url('Fahkwang-SemiBoldItalic.ttf') format('truetype');
  font-display: swap;
}

@font-face {
  font-family: 'Fahkwang';
  font-weight: 700;
  font-style: normal;
  src: url('Fahkwang-Bold.ttf') format('truetype');
  font-display: swap;
}

@font-face {
  font-family: 'Fahkwang';
  font-weight: 700;
  font-style: italic;
  src: url('Fahkwang-BoldItalic.ttf') format('truetype');
  font-display: swap;
}

/* ============================================================
   Brand tokens
   ============================================================ */
:root {
  /* Colour */
  --savi-dark: #22333B;
  --savi-sage: #57886C;
  --savi-sage-hover: #4B7860;
  --savi-taupe: #D3C9C2;
  --savi-light: #EAEAEA;
  --savi-offwhite: #F7F4F2;
  --savi-mauve: #65555A;
  --savi-teal: #224444;
  --savi-white: #FFFFFF;

  /* Typography */
  --savi-font-display: 'Fahkwang', Georgia, 'Times New Roman', serif;
  --savi-font-body: 'Jost', 'Century Gothic', Calibri, 'Helvetica Neue', Arial, sans-serif;

  /* Radii */
  --savi-radius-sm: 6px;
  --savi-radius-md: 12px;
  --savi-radius-lg: 20px;
  --savi-radius-pill: 999px;

  /* Shadows */
  --savi-shadow-card: 0 2px 16px rgba(0, 0, 0, 0.06);
  --savi-shadow-card-hover: 0 8px 28px rgba(0, 0, 0, 0.10);

  /* Motion */
  --savi-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --savi-duration-fast: 160ms;
  --savi-duration-base: 240ms;
  --savi-duration-slow: 420ms;
}

/* ============================================================
   Override Dawn's font families
   ============================================================ */
:root {
  --font-body-family: var(--savi-font-body);
  --font-heading-family: var(--savi-font-display);
  --font-heading-style: normal;
  --font-heading-weight: 300;
  --font-body-weight: 400;
}

/* ============================================================
   Page background & body
   ============================================================ */
body {
  background-color: var(--savi-offwhite) !important;
  font-family: var(--savi-font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  color: var(--savi-dark);
  line-height: 1.7;
}

/* ============================================================
   Headings — Fahkwang, light weight, sentence case
   ============================================================ */
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.card__heading,
.card__title,
.product-card-wrapper .card__heading {
  font-family: var(--savi-font-display) !important;
  font-weight: 300;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

/* ============================================================
   Body & UI — Jost
   ============================================================ */
p,
li,
label,
input,
select,
textarea,
button,
a,
.caption,
.overline,
.eyebrow,
nav,
.header__menu-item {
  font-family: var(--savi-font-body);
}

/* ============================================================
   Colour scheme overrides
   Scheme 1 = page default (offwhite)
   Scheme 2 = muted / taupe
   Scheme 3 = dark / slate (storytelling sections)
   Scheme 4 = sage accent
   Scheme 5 = badge accent (reuses sage)
   ============================================================ */

/* Scheme 1 — offwhite page */
.color-scheme-1,
.color-scheme-1.gradient {
  --color-background: 247, 244, 242;
  --gradient-background: #F7F4F2;
  --color-foreground: 34, 51, 59;
  --color-button: 87, 136, 108;
  --color-button-text: 255, 255, 255;
  --color-secondary-button-text: 34, 51, 59;
  background-color: #F7F4F2;
  color: #22333B;
}

/* Scheme 2 — taupe muted */
.color-scheme-2,
.color-scheme-2.gradient {
  --color-background: 211, 201, 194;
  --gradient-background: #D3C9C2;
  --color-foreground: 34, 51, 59;
  --color-button: 87, 136, 108;
  --color-button-text: 255, 255, 255;
  background-color: #D3C9C2;
  color: #22333B;
}

/* Scheme 3 — dark slate */
.color-scheme-3,
.color-scheme-3.gradient {
  --color-background: 34, 51, 59;
  --gradient-background: #22333B;
  --color-foreground: 247, 244, 242;
  --color-button: 87, 136, 108;
  --color-button-text: 255, 255, 255;
  --color-secondary-button-text: 247, 244, 242;
  background-color: #22333B;
  color: #F7F4F2;
}

/* Scheme 4 — teal deep dark */
.color-scheme-4,
.color-scheme-4.gradient {
  --color-background: 34, 68, 68;
  --gradient-background: #224444;
  --color-foreground: 247, 244, 242;
  --color-button: 87, 136, 108;
  --color-button-text: 255, 255, 255;
  background-color: #224444;
  color: #F7F4F2;
}

/* Scheme 5 — sage accent (badges, sale) */
.color-scheme-5,
.color-scheme-5.gradient {
  --color-background: 87, 136, 108;
  --gradient-background: #57886C;
  --color-foreground: 255, 255, 255;
  --color-button: 34, 51, 59;
  --color-button-text: 255, 255, 255;
  background-color: #57886C;
  color: #FFFFFF;
}

/* ============================================================
   Buttons
   ============================================================ */
.button,
.shopify-payment-button__button,
button[type="submit"]:not(.quantity__button):not(.search__button):not(.mobile-facets__open) {
  border-radius: var(--savi-radius-md) !important;
  transition:
    background-color var(--savi-duration-base) var(--savi-ease),
    transform var(--savi-duration-base) var(--savi-ease),
    box-shadow var(--savi-duration-base) var(--savi-ease);
  font-family: var(--savi-font-body);
  font-weight: 500;
  letter-spacing: 0.02em;
}

.button--primary,
.button:not(.button--secondary):not(.button--tertiary) {
  background-color: var(--savi-sage);
  color: var(--savi-white);
  border-color: var(--savi-sage);
}

.button--primary:hover,
.button:not(.button--secondary):not(.button--tertiary):hover {
  background-color: var(--savi-sage-hover);
  transform: translateY(-2px);
  box-shadow: var(--savi-shadow-card);
}

.button--secondary {
  background-color: transparent;
  border-color: var(--savi-taupe);
  color: var(--savi-dark);
}

.button--secondary:hover {
  background-color: rgba(211, 201, 194, 0.15);
}

/* ============================================================
   Cards — product, collection, article
   ============================================================ */
.card-wrapper,
.product-card-wrapper,
.card {
  border-radius: var(--savi-radius-md) !important;
}

.card:not(.ratio) {
  border-radius: var(--savi-radius-md) !important;
  box-shadow: var(--savi-shadow-card);
  border: 0.5px solid var(--savi-taupe);
  transition:
    transform var(--savi-duration-base) var(--savi-ease),
    box-shadow var(--savi-duration-base) var(--savi-ease);
  overflow: hidden;
}

.card:not(.ratio):hover {
  transform: translateY(-4px);
  box-shadow: var(--savi-shadow-card-hover);
}

/* ============================================================
   Media (product images)
   ============================================================ */
.media,
.media>img,
.card__media {
  border-radius: var(--savi-radius-md) var(--savi-radius-md) 0 0 !important;
}

/* ============================================================
   Form inputs
   ============================================================ */
.field__input,
.select__select,
.customer .field input,
.search__input,
.newsletter__input,
.input-group-field {
  border-radius: var(--savi-radius-md) !important;
  border-color: var(--savi-taupe);
  font-family: var(--savi-font-body);
  transition: border-color var(--savi-duration-base) var(--savi-ease);
}

.field__input:focus,
.select__select:focus,
.search__input:focus,
.newsletter__input:focus,
.input-group-field:focus {
  border-color: var(--savi-sage);
  outline: none;
  box-shadow: 0 0 0 2px rgba(87, 136, 108, 0.15);
}

/* ============================================================
   Newsletter inline form (input + button side-by-side)
   ============================================================ */
.input-group {
  display: flex;
  align-items: stretch;
  gap: 8px;
}

.input-group .input-group-field {
  flex: 1;
  border-radius: var(--savi-radius-md) !important;
  border: 1px solid rgba(247, 244, 242, 0.35);
  padding: 12px 16px;
  font-family: var(--savi-font-body);
  font-size: 1.4rem;
  color: #F7F4F2;
  background: rgba(247, 244, 242, 0.10);
  transition: border-color var(--savi-duration-base) var(--savi-ease),
              box-shadow var(--savi-duration-base) var(--savi-ease),
              background var(--savi-duration-base) var(--savi-ease);
}

.input-group .input-group-field:focus {
  border-color: rgba(247, 244, 242, 0.7);
  background: rgba(247, 244, 242, 0.15);
  outline: none;
  box-shadow: 0 0 0 2px rgba(247, 244, 242, 0.10);
}

.input-group .input-group-field::placeholder {
  color: #F7F4F2;
  opacity: 0.45;
}

/* Input pada latar terang — override ke dark */
.color-scheme-1 .input-group .input-group-field,
.color-scheme-2 .input-group .input-group-field {
  border: 1px solid var(--savi-taupe);
  color: var(--savi-dark);
  background: #FFFFFF;
}

.color-scheme-1 .input-group .input-group-field:focus,
.color-scheme-2 .input-group .input-group-field:focus {
  border-color: var(--savi-sage);
  background: #FFFFFF;
  box-shadow: 0 0 0 2px rgba(87, 136, 108, 0.15);
}

.color-scheme-1 .input-group .input-group-field::placeholder,
.color-scheme-2 .input-group .input-group-field::placeholder {
  color: var(--savi-dark);
  opacity: 0.45;
}

.input-group .input-group-btn {
  flex-shrink: 0;
}

.input-group .input-group-btn .btn {
  border-radius: var(--savi-radius-md) !important;
  height: 100%;
  padding: 12px 22px;
  white-space: nowrap;
}

/* ============================================================
   Links
   ============================================================ */
a {
  transition:
    color var(--savi-duration-base) var(--savi-ease),
    border-color var(--savi-duration-base) var(--savi-ease);
}

/* ============================================================
   Header
   ============================================================ */
.section-header {
  background-color: var(--savi-offwhite);
  border-bottom: 1px solid var(--savi-taupe);
}

.header__menu-item,
.header__menu-item:link {
  font-family: var(--savi-font-body);
  font-weight: 400;
  letter-spacing: 0.02em;
  font-size: 1.25rem;
  color: var(--savi-dark);
}

/* ============================================================
   Announcement bar
   ============================================================ */
.announcement-bar {
  background-color: var(--savi-dark);
  color: var(--savi-offwhite);
  font-family: var(--savi-font-body);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ============================================================
   Section / page layout
   ============================================================ */
.section {
  padding-top: 72px;
  padding-bottom: 72px;
}

@media screen and (max-width: 749px) {
  .section {
    padding-top: 48px;
    padding-bottom: 48px;
  }
}

/* ============================================================
   Price / badges
   ============================================================ */
.price-item--sale,
.price--on-sale .price-item--regular {
  color: var(--savi-mauve);
  font-family: var(--savi-font-body);
}

.badge {
  border-radius: var(--savi-radius-pill) !important;
  font-family: var(--savi-font-body);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
}

/* ============================================================
   Footer
   ============================================================ */
.footer {
  background-color: var(--savi-dark);
  color: var(--savi-offwhite);
  font-family: var(--savi-font-body);
}

.footer a {
  color: var(--savi-taupe);
}

.footer a:hover {
  color: var(--savi-offwhite);
  border-bottom-color: var(--savi-taupe);
}

/* ============================================================
   Cart drawer & notification
   ============================================================ */
.cart-notification,
.cart-drawer {
  border-radius: var(--savi-radius-lg) var(--savi-radius-lg) 0 0;
  font-family: var(--savi-font-body);
}

/* ============================================================
   Selection & focus highlight
   ============================================================ */
::selection {
  background: var(--savi-sage);
  color: var(--savi-white);
}

:focus-visible {
  outline: 2px solid var(--savi-sage);
  outline-offset: 3px;
}

/* ============================================================
   Eyebrow / overline utility
   ============================================================ */
.eyebrow,
.overline,
.caption-with-letter-spacing {
  font-family: var(--savi-font-body);
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--savi-mauve);
}

/* ============================================================
   Decorative motifs — soft blob background
   Used via .savi-blob-bg utility on section wrappers
   ============================================================ */
.savi-blob-bg {
  position: relative;
  overflow: hidden;
}

.savi-blob-bg::before {
  content: '';
  position: absolute;
  top: -20%;
  right: -10%;
  width: 50%;
  padding-bottom: 50%;
  background: var(--savi-taupe);
  opacity: 0.08;
  border-radius: 60% 40% 55% 45% / 50% 60% 40% 50%;
  pointer-events: none;
  animation: savi-blob-drift 12s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
}

@keyframes savi-blob-drift {
  from {
    transform: translate(0, 0) scale(1);
  }

  to {
    transform: translate(-3%, 4%) scale(1.04);
  }
}

/* ============================================================
   Curved divider lines — decorative accent
   ============================================================ */
.savi-curved-lines {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 80px;
  margin: 1.5rem 0;
}

.savi-curved-lines span {
  display: block;
  height: 1.5px;
  background: var(--savi-taupe);
  border-radius: 999px;
  transform-origin: left;
}

.savi-curved-lines span:nth-child(1) {
  transform: scaleX(1) rotate(-1deg);
}

.savi-curved-lines span:nth-child(2) {
  transform: scaleX(0.85) rotate(-2deg);
}

.savi-curved-lines span:nth-child(3) {
  transform: scaleX(0.65) rotate(-3deg);
}

/* ============================================================
   Trust bar strip
   ============================================================ */
.trust-bar {
  background-color: var(--savi-taupe);
  padding: 16px 0;
  font-family: var(--savi-font-body);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--savi-dark);
  text-align: center;
}

/* ============================================================
   Responsive grid gap
   ============================================================ */
@media screen and (min-width: 750px) {

  .grid--2-col-tablet,
  .grid--3-col-tablet,
  .grid--4-col-desktop {
    gap: 28px;
  }
}

/* ============================================================
   Impulse header z-index — pastikan nav selalu di atas sections home
   Sections home bisa membuat stacking context baru (position+overflow)
   ============================================================ */
.site-header,
.site-header--stuck,
.site-header--opening,
.site-header .site-nav__dropdown,
.site-header .site-nav__dropdown-trigger,
#SiteNavLabel-primary {
  z-index: 300 !important;
}

/* ============================================================
   Impulse theme — CSS variable overrides
   Maps Savi brand tokens ke Impulse's variable names
   ============================================================ */
:root {
  --colorBody:         #F7F4F2;
  --colorBodyDim:      #EDE9E6;
  --colorTextBody:     #22333B;
  --colorLink:         #57886C;
  --colorBorder:       #D3C9C2;
  --colorBtnPrimary:   #57886C;
  --colorBtnPrimaryText: #FFFFFF;
  --colorBtnSecondary: transparent;
  --colorBtnSecondaryText: #22333B;
  --font-body-family:  'Jost', 'Century Gothic', Arial, sans-serif;
  --font-heading-family: 'Fahkwang', Georgia, serif;
}

/* Body & html background */
body,
html {
  background-color: #F7F4F2 !important;
  font-family: 'Jost', 'Century Gothic', Arial, sans-serif;
}

/* Impulse headings */
.h1, .h2, .h3, .h4, .h5, .h6,
h1, h2, h3, h4, h5, h6,
.section-header__title,
.hero__title,
.banner__heading,
.product-block__title,
.collection-hero__title {
  font-family: 'Fahkwang', Georgia, serif !important;
  font-weight: 300;
  letter-spacing: -0.01em;
}

/* Impulse nav & UI text */
.site-nav__link,
.site-nav__dropdown-link,
.drawer-nav__link,
.btn,
.text-link,
.product-block__meta,
.price-ui-badges,
.cart__checkout {
  font-family: 'Jost', 'Century Gothic', Arial, sans-serif;
  font-size: 13px !important;
}

/* Impulse primary button */
.btn--primary,
.btn:not(.btn--secondary):not(.btn--tertiary) {
  background-color: #57886C;
  border-color: #57886C;
  color: #FFFFFF;
}

.btn--primary:hover,
.btn:not(.btn--secondary):not(.btn--tertiary):hover {
  background-color: #4B7860;
  border-color: #4B7860;
}

/* Impulse section spacing */
.index-section {
  padding-top: 72px;
  padding-bottom: 72px;
}

@media screen and (max-width: 749px) {
  .index-section {
    padding-top: 48px;
    padding-bottom: 48px;
  }
}

/* Shopify policy container — styling untuk /policies/ routes
   (policy.liquid tidak dirender; Shopify render kontennya sendiri ke container ini) */
.shopify-policy__container {
  max-width: 760px !important;
  margin: 0 auto !important;
  padding: 72px 32px 104px !important;
  background: #F7F4F2;
}

@media screen and (max-width: 749px) {
  .shopify-policy__container {
    padding: 48px 20px 72px !important;
  }
}

/* Title */
.shopify-policy__container h1 {
  font-family: 'Fahkwang', Georgia, serif !important;
  font-weight: 300 !important;
  font-size: 38px !important;
  letter-spacing: 0.02em !important;
  color: #22333B !important;
  line-height: 1.2 !important;
  margin: 0 0 2.4rem !important;
  text-transform: none !important;
}

@media screen and (max-width: 749px) {
  .shopify-policy__container h1 {
    font-size: 26px !important;
  }
}

/* Body text */
.shopify-policy__container p,
.shopify-policy__container li {
  font-family: 'Jost', 'Century Gothic', Arial, sans-serif !important;
  font-size: 15px !important;
  line-height: 1.85 !important;
  color: rgba(34, 51, 59, 0.75) !important;
  margin-bottom: 1.4em !important;
}

/* Headings dalam body */
.shopify-policy__container h2 {
  font-family: 'Fahkwang', Georgia, serif !important;
  font-weight: 400 !important;
  font-size: 19px !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  color: #22333B !important;
  margin: 2.8em 0 0.8em !important;
  padding-bottom: 0.6em !important;
  border-bottom: 1px solid #E4E0DC !important;
}

.shopify-policy__container h3 {
  font-family: 'Fahkwang', Georgia, serif !important;
  font-weight: 300 !important;
  font-size: 15px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #22333B !important;
  margin: 2em 0 0.6em !important;
}

/* Links */
.shopify-policy__container a {
  color: #57886C !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}

/* Lists */
.shopify-policy__container ul,
.shopify-policy__container ol {
  padding-left: 1.8em !important;
  margin-bottom: 1.4em !important;
}

/* HR */
.shopify-policy__container hr {
  border: none !important;
  border-top: 1px solid #E4E0DC !important;
  margin: 2.8em 0 !important;
}

/* Made consciously — compact padding (savi-standard page) */
[id$="__made_consciously"].index-section {
  padding-top: 48px;
  padding-bottom: 48px;
}

@media screen and (max-width: 749px) {
  [id$="__made_consciously"].index-section {
    padding-top: 32px;
    padding-bottom: 32px;
  }
}

/* Pull quote — compact padding (homepage & about page) */
#shopify-section-pull_quote_dominique.index-section,
[id$="__pull_quote_about"].index-section {
  padding-top: 48px;
  padding-bottom: 48px;
}

@media screen and (max-width: 749px) {
  #shopify-section-pull_quote_dominique.index-section,
  [id$="__pull_quote_about"].index-section {
    padding-top: 32px;
    padding-bottom: 32px;
  }
}

/* ============================================================
   Collection page — slideshow hero dipaksa 25vh
   Section ID: 164776615215c07a53
   ============================================================ */
[data-section-id="164776615215c07a53"] .slideshow,
[data-section-id="164776615215c07a53"] .slideshow__slide,
[data-section-id="164776615215c07a53"] .slideshow-wrapper {
  height: 25vh !important;
  min-height: 160px !important;
  max-height: 240px !important;
}

/* ============================================================
   Collection page — compact hero (25vh, title centred)
   ============================================================ */

/* Force height on the hero container — override Impulse's padding-based sizing */
#CollectionHeaderSection .collection-hero,
.collection-hero {
  position: relative !important;
  height: 25vh !important;
  min-height: 140px !important;
  max-height: 220px !important;
  overflow: hidden !important;
  background-color: #22333B !important;
}

/* Parallax wrapper must also be constrained */
#CollectionHeaderSection .parallax-container,
.collection-hero .parallax-container {
  height: 100% !important;
}

/* Image fills the short hero */
.collection-hero__image {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  opacity: 0.45 !important;
}

/* Content overlay — centre the title */
.collection-hero__content {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
}

.collection-hero__content .page-width {
  width: 100%;
}

/* Hide breadcrumbs and shadow wrapper — show only title */
.collection-hero__content .section-header__shadow {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

.collection-hero__content .breadcrumb {
  display: none !important;
}

/* Title */
.collection-hero__content .section-header__title {
  font-family: 'Fahkwang', Georgia, serif !important;
  font-weight: 300 !important;
  font-size: 3.2rem !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: #F7F4F2 !important;
  text-align: center !important;
  margin: 0 !important;
  text-shadow: 0 2px 16px rgba(0,0,0,0.35);
}

/* No-image fallback (plain title bar) */
.page-content--top .section-header__title {
  font-family: 'Fahkwang', Georgia, serif !important;
  font-weight: 300 !important;
  font-size: 2.6rem !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: #22333B !important;
}

/* ============================================================
   Collection sort bar (kanan atas) — disembunyikan,
   sort sudah ada di dalam sidebar
   ============================================================ */
.collection-filter__sort-container,
.collection-filter__item--sort {
  display: none !important;
}

/* ============================================================
   Collection filter sidebar — minimal styling
   ============================================================ */

/* Sidebar */
.collection-sidebar {
  padding-right: 2rem;
  font-family: 'Jost', 'Century Gothic', Arial, sans-serif;
}

/* Filter group heading */
.collection-sidebar__group .collapsible-trigger__icon,
.collection-sidebar__group button.collapsible-trigger {
  font-family: 'Jost', 'Century Gothic', Arial, sans-serif !important;
  font-size: 1.15rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.09em !important;
  text-transform: uppercase !important;
  color: #22333B !important;
  background: none !important;
  border: none !important;
  border-bottom: 1px solid #E8E4E0 !important;
  padding: 1.2rem 0 !important;
  width: 100% !important;
  text-align: left !important;
}

/* Tag list spacing */
.tag-list { margin: 0; padding: 0.6rem 0 0; }

.tag { list-style: none; margin-bottom: 0.2rem; }

/* Label row */
.tag__checkbox-wrapper {
  display: flex !important;
  align-items: center !important;
  gap: 1rem !important;
  padding: 0.45rem 0 !important;
  cursor: pointer !important;
}

/* Restyle the Impulse custom checkbox span */
.tag__checkbox {
  width: 15px !important;
  height: 15px !important;
  border: 1.5px solid #C0B9B3 !important;
  border-radius: 3px !important;
  background: #fff !important;
  flex-shrink: 0 !important;
  transition: border-color 180ms ease, background 180ms ease !important;
  /* reset any Impulse icon/pseudo content */
  background-image: none !important;
}

/* Checked state — dark fill + checkmark via outline only (no SVG conflict) */
.tag--active .tag__checkbox,
.tag__input:checked + .tag__checkbox {
  border-color: #22333B !important;
  background-color: #22333B !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='7' fill='none'%3E%3Cpath d='M1 3.5l2.5 2.5L8 1' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

/* Tag text */
.tag__text {
  font-family: 'Jost', 'Century Gothic', Arial, sans-serif !important;
  font-size: 1.3rem !important;
  color: #555 !important;
  font-weight: 400 !important;
}

.tag--active .tag__text {
  color: #22333B !important;
  font-weight: 500 !important;
}

/* Active filter remove pills */
.tag-list--active-tags { margin-bottom: 1rem; }

.tag--remove {
  display: inline-block;
  margin: 0 0.4rem 0.4rem 0;
}

.tag--remove .btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  font-family: 'Jost', 'Century Gothic', Arial, sans-serif !important;
  font-size: 1.2rem !important;
  font-weight: 400 !important;
  color: #22333B !important;
  background: transparent !important;
  border: 1px solid #D3C9C2 !important;
  border-radius: 999px !important;
  padding: 0.35em 1em !important;
  transition: border-color 180ms ease !important;
}

.tag--remove .btn:hover {
  border-color: #22333B !important;
  background: transparent !important;
}

.tag--remove .icon-close {
  width: 9px !important;
  height: 9px !important;
  stroke: currentColor;
}

/* Sort bar */
.collection-filter {
  font-family: 'Jost', 'Century Gothic', Arial, sans-serif;
  font-size: 1.3rem;
  color: #22333B;
  border-bottom: 1px solid #E8E4E0;
  padding-bottom: 1rem;
  margin-bottom: 0.5rem;
}

.collection-filter__item {
  font-family: 'Jost', 'Century Gothic', Arial, sans-serif;
  font-size: 1.3rem;
}

/* Price range */
.price-range__display-wrapper {
  font-family: 'Jost', 'Century Gothic', Arial, sans-serif;
  font-size: 1.3rem;
  color: #22333B;
  margin-bottom: 0.8rem;
}

.price-range__input {
  font-family: 'Jost', 'Century Gothic', Arial, sans-serif;
  font-size: 1.3rem;
  border: 1px solid #D3C9C2 !important;
  border-radius: 6px !important;
  padding: 0.4em 0.7em !important;
  color: #22333B;
  background: #fff;
}

/* ============================================================
   Product grid card — Impulse (.grid-product)
   ============================================================ */

/* ── Equal-height cards: CSS Grid pada collection wrapper saja ── */
.collection-grid__wrapper .grid.grid--uniform {
  display: grid !important;
  float: none !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  align-items: stretch;
}

/* Override float-based widths dari Impulse pada context ini */
.collection-grid__wrapper .grid.grid--uniform > .grid__item {
  width: 100% !important;
  float: none !important;
  display: flex;
  flex-direction: column;
  padding: 0 !important;
}

/* Tablet: 3 kolom */
@media screen and (max-width: 1024px) {
  .collection-grid__wrapper .grid.grid--uniform {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.6rem;
  }
}

/* Mobile: 2 kolom */
@media screen and (max-width: 768px) {
  .collection-grid__wrapper .grid.grid--uniform {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.2rem;
  }
}

/* Padding bawah section collection */
.collection-grid__wrapper {
  padding-bottom: 8rem;
}

@media screen and (max-width: 768px) {
  .collection-grid__wrapper {
    padding-bottom: 5rem;
  }
}

/* ── Card flex column agar tinggi seragam ─────── */
.grid-product {
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: transform 280ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.grid-product__content {
  display: flex;
  flex-direction: column;
  flex: 1;
  background: #FFFFFF;
  border-radius: 16px;
  overflow: hidden;
  box-shadow:
    0 1px 3px rgba(34, 51, 59, 0.04),
    0 4px 16px rgba(34, 51, 59, 0.06);
  border: 1px solid rgba(211, 201, 194, 0.5);
  transition:
    transform 280ms cubic-bezier(0.22, 0.61, 0.36, 1),
    box-shadow 280ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.grid-product__content:hover {
  transform: translateY(-6px);
  box-shadow:
    0 2px 6px rgba(34, 51, 59, 0.04),
    0 16px 40px rgba(34, 51, 59, 0.12);
}

/* Link flex column: gambar atas, meta bawah */
.grid-product__link {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.grid-product__meta {
  flex-shrink: 0;
}

/* Image mask — aspect ratio tetap, gambar cover tanpa distorsi */
.grid-product__image-mask {
  position: relative;
  width: 100%;
  padding-bottom: 100%; /* 1:1 — ubah ke 120% untuk portrait */
  overflow: hidden;
  background-color: #F0ECE8;
  border-radius: 16px 16px 0 0;
  flex-shrink: 0;
}

/* Reset wrapper inline padding yang di-set Impulse */
.grid-product__image-mask .image-wrap {
  position: absolute !important;
  inset: 0 !important;
  height: 100% !important;
  padding-bottom: 0 !important;
}

.grid-product__image-mask .grid__image-ratio {
  position: absolute !important;
  inset: 0 !important;
  padding-bottom: 0 !important;
}

/* Gambar memenuhi container dengan object-fit: cover */
.grid-product__image-mask img.grid-product__image,
.grid-product__image-mask img.lazyload,
.grid-product__image-mask img.lazyloaded,
.grid-product__image-mask .grid__image-ratio img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center top !important;
}

.grid-product__image,
.grid__image-ratio img {
  transition: transform 700ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.grid-product__content:hover .grid-product__image,
.grid-product__content:hover .grid__image-ratio img {
  transform: scale(1.05);
}

/* Meta / text area */
.grid-product__meta {
  padding: 1.4rem 1.6rem 1.8rem;
  background: #FFFFFF;
  border-top: 1px solid rgba(211, 201, 194, 0.3);
}

/* Product title */
.grid-product__title {
  font-family: 'Fahkwang', Georgia, serif !important;
  font-weight: 300 !important;
  font-size: 1.45rem !important;
  letter-spacing: 0.01em;
  color: #22333B;
  line-height: 1.35;
  margin-bottom: 0.4rem;
}

/* Vendor */
.grid-product__vendor {
  font-family: 'Jost', 'Century Gothic', Arial, sans-serif;
  font-size: 1.05rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #57886C;
  margin-bottom: 0.4rem;
  font-weight: 500;
}

/* ── Price area ─────────────────────────────────
   Struktur HTML saat sale:
   .grid-product__price
     span.grid-product__price--original  (harga asli, coret)
     [text node]                          (harga sale, current)
     span.grid-product__price--savings   (hemat berapa)
   ─────────────────────────────────────────────── */
.grid-product__price {
  font-family: 'Jost', 'Century Gothic', Arial, sans-serif;
  font-size: 1.5rem;
  font-weight: 600;
  color: #22333B;
  margin-top: 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

/* Baris atas: harga asli (coret) + badge hemat, ditampilkan horizontal */
.grid-product__price--original {
  display: inline;
  font-size: 1.15rem;
  font-weight: 400;
  color: #B0A89F;
  text-decoration: line-through;
}

/* Badge savings — sejajar dengan harga asli */
.grid-product__price--savings {
  display: inline-block;
  align-self: center;
  width: fit-content;
  font-size: 1.05rem;
  font-weight: 600;
  color: #fff;
  background: #57886C;
  border-radius: 999px;
  padding: 0.15em 0.7em;
  letter-spacing: 0.02em;
}

/* Baris yang berisi original + savings dibungkus flex row */
.grid-product__price--original ~ .grid-product__price--savings {
  /* sudah inline, tidak perlu override lebih */
}

/* Unit price */
.product__unit-price {
  font-family: 'Jost', 'Century Gothic', Arial, sans-serif;
  font-size: 1.1rem;
  color: #9A928C;
  font-weight: 400;
  margin-top: 0.2rem;
}

/* ── Badges ─────────────────────────────────────
   Positioned absolute inside .grid-product__image-mask
   ─────────────────────────────────────────────── */
.grid-product__tag {
  position: absolute;
  top: 1.2rem;
  left: 1.2rem;
  right: auto;
  z-index: 2;
  display: inline-block;
  font-family: 'Jost', 'Century Gothic', Arial, sans-serif;
  font-size: 1.0rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 0.4em 1.1em;
  line-height: 1;
  width: auto;
}

/* Sale — sage solid */
.grid-product__tag--sale {
  background: #57886C;
  color: #fff;
}

/* Sold Out — dark warm taupe, legible on white */
.grid-product__tag--sold-out {
  background: #3D3530;
  color: #F7F4F2;
}

/* Custom label */
.grid-product__tag--custom {
  background: #22333B;
  color: #F7F4F2;
}

/* Quick shop button */
.quick-product__btn {
  font-family: 'Jost', 'Century Gothic', Arial, sans-serif;
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: rgba(247, 244, 242, 0.88);
  color: #22333B;
  border-radius: 999px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(211, 201, 194, 0.6);
  transition:
    background 200ms ease,
    transform 200ms ease,
    box-shadow 200ms ease;
}

.quick-product__btn:hover {
  background: #fff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(34,51,59,0.12);
}

/* Collection grid gap */
.product-grid-container,
.grid--uniform {
  gap: 2rem;
}

/* Pagination */
.pagination .btn,
.pagination__item {
  font-family: 'Jost', 'Century Gothic', Arial, sans-serif;
  font-size: 1.3rem;
  border-radius: 999px !important;
  border-color: #D3C9C2;
  color: #22333B;
  transition: all 200ms ease;
}

.pagination .btn--primary,
.pagination__item--current {
  background-color: #57886C !important;
  border-color: #57886C !important;
  color: #fff !important;
}

/* ============================================================
   Quick view modal — opaque white background
   ============================================================ */
.modal--quick-shop .modal__centered-content,
.modal--quick-shop .modal__inner,
.modal--quick-shop .modal__centered {
  background-color: #F7F4F2 !important;
  color: #22333B !important;
}

.modal--quick-shop {
  background: rgba(34, 51, 59, 0.55) !important;
}

/* Ensure all text inside modal is legible */
.modal--quick-shop .product-block__title,
.modal--quick-shop .product-title,
.modal--quick-shop h1,
.modal--quick-shop h2,
.modal--quick-shop h3,
.modal--quick-shop p,
.modal--quick-shop label,
.modal--quick-shop .price {
  color: #22333B !important;
}

.modal--quick-shop .modal__close {
  color: #22333B !important;
}

.modal--quick-shop .modal__close:hover {
  color: #57886C !important;
}

/* ============================================================
   PhotoSwipe — fix lightbox overflow beyond viewport
   ============================================================ */
.pswp {
  position: fixed !important;
  height: 100vh !important;
  height: 100dvh !important;
}

/* Background overlay: dark + blur */
.pswp__bg {
  background: rgba(22, 34, 38, 0.88) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

/* ============================================================
   Product Page — Hide breadcrumbs
   ============================================================ */
.template-product .breadcrumb {
  display: none !important;
}

/* ============================================================
   Product Page — Accordion / Collapsible Tabs
   ============================================================ */

/* Wrapper: remove default box shadow / background, keep only bottom border */
.product-block .collapsibles-wrapper,
.product-block .collapsibles-wrapper--border-bottom {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  border-bottom: 1px solid #E4E0DC !important;
  margin-bottom: 0 !important;
}

/* Remove left/right/top borders from the trigger button itself */
.product-block .collapsible-trigger-btn--borders {
  border: none !important;
  border-left: none !important;
  border-right: none !important;
  border-top: none !important;
  border-bottom: none !important;
}

/* Remove border box from the content area */
.product-block .collapsible-trigger-btn--borders + .collapsible-content .collapsible-content__inner {
  border: none !important;
}

/* Trigger button */
.product-block .collapsible-trigger-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  padding: 1.6rem 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  font-family: 'Fahkwang', Georgia, serif !important;
  font-size: 1.3rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: #22333B !important;
  cursor: pointer !important;
  transition: color 160ms ease !important;
}

.product-block .collapsible-trigger-btn:hover {
  color: #57886C !important;
}

/* Hide the default Impulse collapsible icon */
.product-block .collapsible-trigger-btn .icon-wrap,
.product-block .collapsible-trigger-btn svg:not(.savi-accordion-icon) {
  display: none !important;
}

/* Custom + / × icon */
.product-block .collapsible-trigger-btn::after {
  content: '+';
  font-family: 'Jost', Arial, sans-serif;
  font-size: 1.8rem;
  font-weight: 300;
  line-height: 1;
  color: #22333B;
  flex-shrink: 0;
  transition: transform 240ms ease, color 160ms ease;
}

.product-block .collapsible-trigger-btn[aria-expanded="true"]::after {
  content: '×';
  font-size: 2rem;
  color: #57886C;
}

/* Content area */
.product-block .collapsible-content__inner {
  padding: 0 0 1.8rem !important;
  font-family: 'Jost', 'Century Gothic', Arial, sans-serif !important;
  font-size: 1.4rem !important;
  line-height: 1.75 !important;
  color: #3D3530 !important;
}

/* First accordion (Description) — open by default via JS below */
/* All tabs start closed; JS opens the first one */

/* ============================================================
   Product Page — Customer Reviews Section (product-full-width)
   ============================================================ */
#shopify-section-sub {
  background: #F7F4F2;
  border-top: 1px solid #E4E0DC;
  padding: 4rem 0;
}

/* ============================================================
   Product Page — "You May Also Like" Recommendations
   ============================================================ */
#shopify-section-product-recommendations {
  border-top: none;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

#shopify-section-product-recommendations .savi-rec-section {
  padding: 5rem 0 5rem !important;
  margin-bottom: 0 !important;
}

/* Override global index-section padding khusus section ini */
#shopify-section-product-recommendations .index-section {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Heading */
#shopify-section-product-recommendations .section-header__title,
#shopify-section-product-recommendations h3 {
  font-family: 'Fahkwang', Georgia, serif !important;
  font-weight: 300 !important;
  font-size: 2.2rem !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: #F7F4F2 !important;
  text-align: center !important;
}

#shopify-section-product-recommendations .section-header {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  padding-bottom: 2rem !important;
  margin-bottom: 0 !important;
}

/* Product title & price — terang di atas background gelap */
#shopify-section-product-recommendations .grid-product__title,
#shopify-section-product-recommendations .grid-product__meta .grid-product__title {
  color: #F7F4F2 !important;
}

#shopify-section-product-recommendations .grid-product__price {
  color: #D3C9C2 !important;
}

#shopify-section-product-recommendations .grid-product__price--original {
  color: #9E9690 !important;
}

/* Grid — scoped ke .product-recommendations wrapper */
.product-recommendations .grid.grid--uniform {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 2rem !important;
  align-items: stretch !important;
}

.product-recommendations .grid.grid--uniform > .grid__item {
  width: 100% !important;
  float: none !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
}

@media (max-width: 1024px) {
  .product-recommendations .grid.grid--uniform {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media (max-width: 768px) {
  .product-recommendations .grid.grid--uniform {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Top border before the first collapsible in product blocks */
.product-block:first-of-type .collapsibles-wrapper {
  border-top: 1px solid #E4E0DC !important;
}

/* ============================================================
   Search — Savi brand overrides
   Fixes transparent backgrounds and applies brand typography
   ============================================================ */

/* Header search slide-down panel */
.site-header__search {
  background-color: #F7F4F2 !important;
  color: #22333B !important;
  box-shadow: 0 8px 32px rgba(34, 51, 59, 0.12) !important;
  border-bottom: 1px solid #D3C9C2 !important;
}

/* Search input inside header panel */
.site-header__search-input {
  background: transparent !important;
  color: #22333B !important;
  font-family: 'Jost', 'Century Gothic', Arial, sans-serif !important;
  font-size: 18px !important;
  letter-spacing: 0.02em !important;
  border: 0 !important;
  caret-color: #57886C !important;
}

.site-header__search-input::placeholder {
  color: rgba(34, 51, 59, 0.42) !important;
  font-style: italic !important;
}

.site-header__search-input:focus {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

/* Search icon buttons in header */
.site-header__search-btn {
  color: #22333B !important;
}

.site-header__search-btn .icon path,
.site-header__search-btn .icon line,
.site-header__search-btn .icon circle {
  stroke: #22333B !important;
}

/* Predictive / autocomplete dropdown */
.predictive-results {
  background-color: #FFFFFF !important;
  color: #22333B !important;
  border: 1px solid #D3C9C2 !important;
  border-top: none !important;
  box-shadow: 0 12px 36px rgba(34, 51, 59, 0.12) !important;
  border-radius: 0 0 8px 8px !important;
}

.predictive__label {
  font-family: 'Jost', 'Century Gothic', Arial, sans-serif !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: #57886C !important;
  border-bottom-color: #E4E0DC !important;
}

.predictive-results a,
.predictive-results .predictive-result__title {
  font-family: 'Jost', 'Century Gothic', Arial, sans-serif !important;
  color: #22333B !important;
}

.predictive-results a:hover {
  color: #57886C !important;
}

.predictive-results__footer {
  background-color: #F7F4F2 !important;
  border-top: 1px solid #E4E0DC !important;
  padding: 14px 20px !important;
}

.predictive-results__footer a,
.predictive-results__footer button {
  font-family: 'Jost', 'Century Gothic', Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: #22333B !important;
}

/* Search page (main-search.liquid) */
.search-bar--page {
  max-width: 560px !important;
  margin-top: 0 !important;
  margin-bottom: 2rem !important;
}

.search-bar--page .input-group-field {
  font-family: 'Jost', 'Century Gothic', Arial, sans-serif !important;
  font-size: 15px !important;
  color: #22333B !important;
  background: #FFFFFF !important;
  border: 1px solid #D3C9C2 !important;
  border-radius: 6px 0 0 6px !important;
  padding: 12px 16px !important;
  transition: border-color 0.2s ease !important;
  outline: none !important;
}

.search-bar--page .input-group-field:focus {
  border-color: #57886C !important;
  box-shadow: none !important;
}

.search-bar--page .input-group-btn .btn {
  background: #22333B !important;
  color: #F7F4F2 !important;
  border: none !important;
  border-radius: 0 6px 6px 0 !important;
  padding: 12px 20px !important;
  transition: background 0.2s ease !important;
}

.search-bar--page .input-group-btn .btn:hover {
  background: #57886C !important;
}

/* Drawer search bar (mobile nav) */
.search-bar--drawer .input-group-field {
  font-family: 'Jost', 'Century Gothic', Arial, sans-serif !important;
  font-size: 14px !important;
  color: #22333B !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid #D3C9C2 !important;
  border-radius: 0 !important;
  padding: 10px 0 !important;
}

.search-bar--drawer .input-group-field::placeholder {
  color: rgba(34, 51, 59, 0.45) !important;
}

.search-bar--drawer {
  border-bottom-color: #E4E0DC !important;
}

@media (max-width: 768px) {
  .site-header__search-input {
    font-size: 15px !important;
  }
}