:root {
  --silt-paper: #fbfbef;
  --silt-ink: #231916;
  --silt-ink-secondary: #52403a;
  --silt-on-dark: #e4e0d4;
  --silt-line: rgba(36, 29, 25, 0.22);
}

/*
 * The migrated site ships three label classes with conflicting defaults. The
 * legacy `.text-label` was beige even on the light paper surface. Treat
 * dark text as the default and opt into light text only for image/dark areas.
 */
body {
  color: var(--silt-ink);
}

.text-label,
.text-label-2,
.text-label-3,
.text-label-click {
  color: var(--silt-ink);
}

.text-label.light,
.text-label-2.light,
.text-label-3.light,
.text-label-click.light,
.home-section-01 .text-label,
.product-detail-section-03-text-inner .text-label {
  color: var(--silt-on-dark);
}

.menu-left .text--body-large {
  color: var(--silt-on-dark);
}

.menu-left {
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.08)),
    url("/assets/4a6c7c61118f-68a5b48d8e7e3942ae82229e_orla8.webp");
}

.menu-logo .header-logo-img {
  width: auto;
  height: 24px;
}

.cart-button {
  position: relative;
  color: var(--silt-on-dark);
}

.header-container.dark .cart-button {
  color: var(--silt-ink);
}

.silt-cart-icon {
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  display: flex;
}

.silt-cart-icon svg {
  width: 23px;
  height: 23px;
  display: block;
}

.silt-cart-count {
  position: absolute;
  top: -6px;
  right: -7px;
  min-width: 15px;
  height: 15px;
  box-sizing: border-box;
  margin: 0;
  border-radius: 999px;
  padding: 0 4px;
  /* Badge tracks the icon color: light chip on dark headers, dark chip on
     light headers. Always contrasts the background and never reads as a
     detached dark blob. */
  color: var(--silt-ink);
  background: var(--silt-on-dark);
  text-align: center;
  font-size: 10px;
  font-weight: 500;
  line-height: 15px;
}

.header-container.dark .silt-cart-count {
  color: var(--silt-paper);
  background: var(--silt-ink);
}

/* The header is position:fixed. On pages that start over a dark hero the cart is
   light; once scrolled onto the light content below, storefront.js adds this
   class so the bag turns dark and stays visible. */
.silt-cart-dark .cart-button {
  color: var(--silt-ink);
}

.silt-cart-dark .silt-cart-count {
  color: var(--silt-paper);
  background: var(--silt-ink);
}

.footer .text-label,
.footer .text-label-2,
.footer .text-label-3,
.footer_top-wrapper .text-label,
.footer_top-wrapper .text-label-2,
.footer_top-wrapper .text-label-3 {
  color: var(--silt-ink);
  /* The hovered color change happens on this text child, so the transition
     must live here too — otherwise the footer links snap instead of fading. */
  transition: color 200ms ease;
}

.footer-link-group > .text-label,
.silt-placeholder-link {
  display: none !important;
}

.footer_link,
.footer_link1,
.footer_social,
.footer_social-1 {
  transition: color 180ms ease, opacity 180ms ease;
}

.footer_link:hover,
.footer_link1:hover,
.footer_social:hover,
.footer_social-1:hover,
.footer_link:hover .text-label-2,
.footer_link1:hover .text-label-2 {
  color: rgba(35, 25, 22, 0.54) !important;
  opacity: 1;
}

.silt-footer-social-list {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}

.footer_social,
.footer_social-1 {
  color: var(--silt-ink);
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}

.footer_social-icon {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin: 0;
}

.footer_social-icon svg {
  display: block;
}

/* Footer nav — two equal-width columns of three links each, in the footer's
   natural (content) position. The two text link groups are flattened into the
   grid (display: contents) and column-flow fills column 1 (COLLECTION / JOURNAL /
   STORE) then column 2 (ABOUT / SHIPPING / PRIVACY); the socials form a third
   column. The © line is a separate cell of .footer_top-wrapper. */

/* The first link of each list (.footer_link1 — COLLECTION, SHIPPING) carries extra
   top padding from the original vertical layout; in the grid that drops it below
   its row-mate, so match every footer link's top padding for aligned rows. */
.footer_menu-wrapper .footer_link1 {
  padding-top: 0.55rem !important;
}

@media (min-width: 480px) {
  .footer_menu-wrapper {
    display: grid !important;
    grid-auto-flow: column;
    grid-template-columns: 1fr 1fr auto !important;
    grid-template-rows: repeat(3, auto) !important;
    grid-template-areas: none !important;
    justify-items: start;
    width: max-content;
    column-gap: 56px;
    row-gap: 8px;
    align-items: start;
  }

  .footer_menu-wrapper > .footer_link-list:not(.silt-footer-social-list) {
    display: contents;
  }

  /* Follow-us icons: a third column, stacked vertically (the original design).
     The !important beats Webflow's per-node #w-node-… id rule
     (grid-column/row: span 1) that would otherwise mis-place the group. */
  .footer_menu-wrapper > .silt-footer-social-list {
    grid-column: 3 !important;
    grid-row: 1 / -1 !important;
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
    justify-content: flex-start;
  }

  /* Strip the social anchors' stray top/bottom padding so the two icons stack at
     the same 40px pitch as the text rows and top-align with them. */
  .silt-footer-social-list .footer_social-1 {
    padding: 0 !important;
    height: auto !important;
  }

  /* Collapse any leftover empty group so it adds no phantom row. */
  .footer_menu-wrapper > .footer_link-list:empty {
    display: none;
  }

  /* Product-template footer (.footer-container) now holds the same
     .footer_menu-wrapper the homepage uses; lay it out title-left / nav-right and
     drop the old 5-column areas so both footer templates match. The !important
     placements beat Webflow's per-node #w-node id rules (which span the title and
     license across both columns and push the nav to its own row). */
  .footer-container {
    grid-template-columns: auto auto !important;
    grid-template-areas: none !important;
    grid-column-gap: 8vw;
    align-items: start;
  }

  .footer-container > .footer-title {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  .footer-container > .footer_menu-wrapper {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }

  .footer-container > .footer-license {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
  }
}

.store-section-02-container .silt-store-list {
  grid-column: 2;
  grid-row-gap: 42px;
  grid-template-columns: 1fr;
}

.silt-store-spacer {
  min-height: 1px;
}

.silt-store-address {
  line-height: 1.55;
}

a:focus-visible,
button:focus-visible,
select:focus-visible,
input:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

.silt-no-ix .page-in,
.silt-no-ix [data-w-id][style*="opacity:0"] {
  opacity: 1 !important;
}

.silt-no-ix [data-w-id][style*="filter:blur"] {
  filter: none !important;
}

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

.w-commerce-commercecartcontainerwrapper,
.w-commerce-commercecartcontainer {
  display: none !important;
}

.w-commerce-commerceaddtocartform {
  display: block !important;
}

.w-commerce-commerceaddtocartbutton {
  cursor: pointer;
}

/* Product story — narrative + intention as one lead paragraph. The Formula /
   Material / Care blocks live in .silt-product-specifications below and share one
   style, so nothing formula-specific is set here. */
.silt-product-story {
  width: min(620px, 100%);
  margin: 0 auto;
  text-align: center;
}

.silt-story-lead {
  max-width: 34em;
  margin: 0 auto;
  font-size: 16px !important;
  line-height: 1.95 !important;
  color: var(--silt-ink) !important;
}

/* Formula / Material / Care / note. The first three are identical blocks
   (heading + body), evenly spaced; extra top margin sets them a little below the
   narrative. */
.silt-product-specifications {
  width: min(720px, 100%);
  margin: 76px auto 0;
  text-align: center;
}

.silt-details-kicker {
  margin-top: 36px;
  text-align: center;
}

.silt-product-specification + .silt-product-specification {
  margin-top: 60px;
}

/* Headings/body use the site's native label + body typography (.text-label /
   .text--body-large), so only spacing is set here. */
.silt-spec-heading {
  margin: 0 0 14px;
}

.silt-spec-body {
  margin: 0;
  line-height: 1.7;
}

/* Closing "please note" line — same Bdogrotesk label type as .silt-spec-heading
   (via .text-label), but sentence-cased (override .text-label's uppercase) and
   softened so it reads as a faint aside. */
.silt-spec-note {
  margin: 0;
  text-transform: none !important;
  color: var(--silt-ink-secondary) !important;
  opacity: 0.55;
  line-height: 1.7;
}

/* Desktop language switch — a globe icon in .header-right that opens a language
   dropdown. Shown ≥992px only (replacing the old desktop MENU); the mobile MENU
   (.mobile-menu-wrap) keeps its own behaviour. The globe colour is synced to the
   nav text by bindCartContrast; the dropdown is always ink-on-paper for contrast. */
.silt-lang {
  display: none;
  position: relative;
}

@media (min-width: 992px) {
  .silt-lang {
    display: inline-flex;
  }
}

.silt-lang-toggle {
  -webkit-appearance: none;
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  color: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}

.silt-lang-globe {
  width: 20px;
  height: 20px;
  display: block;
}

.silt-lang-menu {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  z-index: 60;
  margin: 0;
  padding: 6px;
  min-width: 148px;
  list-style: none;
  background: var(--silt-paper);
  color: var(--silt-ink);
  border: 1px solid var(--silt-line);
  box-shadow: 0 18px 44px rgba(12, 10, 8, 0.16);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 160ms ease, transform 160ms ease, visibility 0s linear 160ms;
}

.silt-lang.is-open .silt-lang-menu {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 160ms ease, transform 160ms ease;
}

.silt-lang-menu li {
  margin: 0;
}

.silt-lang-item {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 9px 12px;
  color: var(--silt-ink);
  font-family: "Bdogrotesk Vf", Arial, sans-serif;
  font-size: 12px;
  letter-spacing: 0.04em;
  opacity: 0.62;
  transition: opacity 160ms ease;
}

.silt-lang-item:hover {
  opacity: 1;
}

.silt-lang-item.is-active {
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.w-webflow-badge {
  display: none !important;
}

.silt-cart-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(12, 10, 8, 0.42);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}

.silt-cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 9999;
  width: min(460px, 100vw);
  height: 100dvh;
  box-sizing: border-box;
  padding: 28px;
  color: var(--silt-ink);
  background: var(--silt-paper);
  transform: translateX(102%);
  transition: transform 220ms ease, visibility 0s linear 220ms;
  display: flex;
  flex-direction: column;
  box-shadow: -20px 0 60px rgba(0, 0, 0, 0.16);
  visibility: hidden;
}

.silt-cart-open .silt-cart-backdrop {
  opacity: 1;
  pointer-events: auto;
}

.silt-cart-open .silt-cart-drawer {
  transform: translateX(0);
  visibility: visible;
  transition-delay: 0s;
}

body.silt-cart-open {
  overflow: hidden;
}

body.silt-menu-open {
  overflow: hidden;
}

.silt-cart-heading,
.silt-cart-footer,
.silt-cart-row,
.silt-cart-quantity {
  display: flex;
  align-items: center;
}

.silt-cart-heading {
  justify-content: space-between;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--silt-line);
}

.silt-cart-heading h2 {
  margin: 0;
  font: inherit;
  font-size: 22px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.silt-cart-close,
.silt-cart-remove,
.silt-cart-quantity button {
  border: 0;
  padding: 6px;
  color: inherit;
  background: transparent;
  cursor: pointer;
}

.silt-cart-close {
  font-size: 26px;
}

.silt-cart-items {
  flex: 1;
  overflow: auto;
}

.silt-cart-row {
  align-items: flex-start;
  gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid var(--silt-line);
}

.silt-cart-row img {
  width: 84px;
  height: 104px;
  object-fit: cover;
  background: #e4e0d4;
}

.silt-cart-details {
  flex: 1;
}

.silt-cart-details h3,
.silt-cart-details p {
  margin: 0 0 8px;
}

.silt-cart-quantity {
  gap: 10px;
}

.silt-cart-quantity button {
  width: 30px;
  height: 30px;
  border: 1px solid var(--silt-line);
}

.silt-cart-remove {
  margin-left: auto;
}

.silt-cart-quantity .silt-cart-remove {
  width: 30px;
  height: 30px;
  border: 0;
  padding: 6px;
}

.silt-cart-remove svg {
  width: 18px;
  height: 18px;
  display: block;
}

.silt-cart-empty {
  padding: 44px 0;
  color: var(--silt-ink-secondary);
}

.silt-cart-footer {
  display: block;
  padding-top: 20px;
  border-top: 1px solid var(--silt-line);
}

.silt-cart-total {
  display: flex;
  justify-content: space-between;
  margin-bottom: 16px;
  font-size: 18px;
}

.silt-checkout-button {
  width: 100%;
  border: 1px solid var(--silt-ink);
  padding: 15px 18px;
  color: var(--silt-paper);
  background: var(--silt-ink);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
}

.silt-checkout-button:disabled {
  cursor: wait;
  opacity: 0.58;
}

.silt-cart-status {
  min-height: 1.4em;
  margin: 10px 0 0;
  font-size: 13px;
}

.silt-standalone {
  min-height: 100dvh;
  margin: 0;
  padding: 32px;
  color: var(--silt-ink);
  background: var(--silt-paper);
  font-family: Arial, sans-serif;
}

.silt-standalone header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: min(14vh, 140px);
}

.silt-standalone header img {
  width: 110px;
}

.silt-standalone a {
  color: inherit;
}

.silt-standalone main {
  width: min(900px, 100%);
  margin: auto;
}

.silt-standalone h1 {
  margin: 0 0 24px;
  font-size: clamp(34px, 6vw, 58px);
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
}

/* Checkout is a form, not a landing page — keep the cart, address fields and
   summary in one calm, readable column instead of stretching the inputs across
   the full page width. */
.silt-page-cart,
.silt-checkout-form {
  max-width: 620px;
}

.silt-page-cart {
  margin-top: 40px;
  border-top: 1px solid var(--silt-line);
}

.silt-checkout-form {
  margin-top: 36px;
}

.silt-address-section {
  padding: 24px 0;
  border-top: 1px solid var(--silt-line);
}

.silt-address-section h2 {
  margin: 0 0 18px;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.silt-address-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 14px;
}

.silt-field {
  display: grid;
  gap: 6px;
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.silt-field-wide {
  grid-column: 1 / -1;
}

.silt-field small {
  color: var(--silt-ink-secondary);
  font: inherit;
  letter-spacing: 0;
  text-transform: none;
}

.silt-field input,
.silt-field select {
  width: 100%;
  min-height: 42px;
  box-sizing: border-box;
  border: 1px solid var(--silt-line);
  border-radius: 0;
  padding: 9px 11px;
  color: var(--silt-ink);
  background: transparent;
  /* 16px keeps iOS from zooming the viewport on focus. */
  font: 16px/1.2 Arial, sans-serif;
}

.silt-checkout-summary {
  margin-top: 12px;
}

.silt-checkout-summary .silt-cart-total {
  font-size: 15px;
}

.silt-checkout-summary .silt-cart-total strong {
  text-align: right;
}

.silt-checkout-summary .silt-estimated-total {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--silt-line);
  font-size: 20px;
}

/* Purchase CTA — one consistent look everywhere: a solid dark bar with a light
   "VIEW PRODUCT" label and a light arrow, both on the mobile bar and on desktop
   hover. The label class varies by card (text-label / -2 / -3 / -click), so
   cover all four, scoped to .product-button so titles and prices are untouched.
   The dark bar is forced here rather than relying on the theme, and both arrow
   copies are forced light so the slide never flickers. */
.product-button .text-label,
.product-button .text-label-2,
.product-button .text-label-3,
.product-button .text-label-click {
  opacity: 1 !important;
}

.product-list-item-link:hover .product-button,
.product-button:hover {
  background-color: var(--silt-ink) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.product-list-item-link:hover .product-button .text-label,
.product-list-item-link:hover .product-button .text-label-2,
.product-list-item-link:hover .product-button .text-label-3,
.product-list-item-link:hover .product-button .text-label-click,
.product-button:hover .text-label,
.product-button:hover .text-label-2,
.product-button:hover .text-label-3,
.product-button:hover .text-label-click {
  color: var(--silt-on-dark) !important;
}

.product-list-item-link:hover .product-button .button-circle,
.product-button:hover .button-circle {
  border-color: var(--silt-on-dark) !important;
}

.product-list-item-link:hover .product-button .button-arrow .icon-12,
.product-button:hover .button-arrow .icon-12 {
  filter: brightness(0) invert(1) !important;
}

/* On phones/tablets the CTA is always the dark bar — force it, and keep its
   label + arrow light so "VIEW PRODUCT" is always visible, not just an arrow. */
@media (max-width: 991px) {
  .product-button {
    background-color: var(--silt-ink) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  .product-button .text-label,
  .product-button .text-label-2,
  .product-button .text-label-3,
  .product-button .text-label-click {
    display: block !important;
    color: var(--silt-on-dark) !important;
  }

  .product-button .button-circle {
    border-color: var(--silt-on-dark) !important;
  }

  .product-button .button-arrow .icon-12 {
    filter: brightness(0) invert(1) !important;
  }
}

@media (max-width: 600px) {
  .silt-product-specification + .silt-product-specification {
    margin-top: 48px;
  }

  .silt-cart-drawer,
  .silt-standalone {
    padding: 20px;
  }

  .silt-cart-quantity {
    flex-wrap: wrap;
  }

  .silt-cart-remove {
    margin-left: 0;
  }

  .silt-address-grid {
    grid-template-columns: 1fr;
  }

  .silt-field-wide {
    grid-column: auto;
  }

  .store-section-02-container .silt-store-list {
    grid-column: 1;
  }

  .product-button .button-text.light-mobile,
  .product-button .button-text.light-mobile .text-label,
  .product-button .button-text.light-mobile .text-label-click {
    color: var(--silt-on-dark) !important;
  }

  .product-button .button-circle.light-mobile {
    border-color: currentColor !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .silt-cart-backdrop,
  .silt-cart-drawer {
    transition: none;
  }
}