/** Shopify CDN: Minification failed

Line 1201:0 Unexpected "}"

**/
/* OddBrew — store-wide skin.
   Applies the design system to EVERY template: collection, cart, search, blog,
   account, 404, contact, and every section the theme renders.
   Loaded after base.css so it wins without !important where possible. */

:root,
.color-background-1,
.color-background-2,
.color-accent-1,
.color-accent-2,
.color-inverse {
  --ob-ink: #000;
  --ob-bg: #fff;
  --ob-muted: rgba(0, 0, 0, .62);
  --ob-meta: rgba(0, 0, 0, .55);
  --ob-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --ob-text: 'DM Sans', system-ui, sans-serif;
}

/* ---------- 1. kill the cream/brown scheme store-wide ---------- */

body,
.color-background-1,
.color-background-2 {
  --color-background: 255, 255, 255;
  --color-foreground: 0, 0, 0;
  --color-base-text: 0, 0, 0;
  --color-base-background-1: 255, 255, 255;
  --color-base-background-2: 255, 255, 255;
  --color-base-accent-1: 0, 0, 0;
  --color-base-accent-2: 0, 0, 0;
  --color-base-solid-button-labels: 255, 255, 255;
  --color-base-outline-button-labels: 0, 0, 0;
  --color-link: 0, 0, 0;
  --color-button: 0, 0, 0;
  --color-button-text: 255, 255, 255;
  --gradient-background: #fff;
  background-color: #fff;
  color: #000;
}

/* The inverse scheme stays inverted — black panels are part of the design. */
.color-inverse {
  --color-background: 0, 0, 0;
  --color-foreground: 255, 255, 255;
  --gradient-background: #000;
  background-color: #000;
  color: #fff;
}

/* ---------- 2. type ---------- */

body {
  font-family: var(--ob-text);
  color: #000;
}

h1, h2, h3, h4, h5,
.h0, .h1, .h2, .h3, .h4, .h5,
.title,
.card__heading,
.banner__heading,
.section-heading,
.rte h1, .rte h2, .rte h3, .rte h4 {
  font-family: var(--ob-display);
  font-weight: 800;
  letter-spacing: -.045em;
  color: #000;
  text-transform: none;
}

.h0, .h1, h1 { line-height: .9; }

p, li, .rte, .field__input, .select__select, textarea {
  font-family: var(--ob-text);
}

a { color: #000; }
a:hover { color: rgba(0, 0, 0, .6); }

/* small caps meta text, per the design's nav / label rule */
.header__menu-item span,
.list-menu__item,
.footer-block__heading,
.facets__label,
.facet-checkbox,
.product-form__input .form__label,
.breadcrumbs,
.pagination__list {
  font-family: var(--ob-text);
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 500;
}

/* ---------- 3. buttons — pills everywhere ---------- */

.button,
.shopify-payment-button__button--unbranded,
.shopify-challenge__button,
.customer button,
button.button,
a.button {
  font-family: var(--ob-text);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
  border-radius: 100px;
  padding: 18px 30px;
  min-height: 0;
  background: #000;
  color: #fff;
  border: 0;
  box-shadow: none;
  transition: opacity .2s ease;
}

.button:hover,
.shopify-payment-button__button--unbranded:hover {
  opacity: .85;
  background: #000;
  color: #fff;
  box-shadow: none;
}

.button--secondary,
.button--tertiary {
  background: transparent;
  color: #000;
  border: 2px solid #000;
}
.button--secondary:hover,
.button--tertiary:hover {
  background: transparent;
  color: #000;
  opacity: .7;
}

.button::after,
.button::before { display: none; }

.button--small { padding: 13px 22px; font-size: 11px; }

/* ---------- 4. fields ---------- */

.field__input,
.select__select,
.customer input,
.customer select,
textarea {
  border-radius: 100px;
  border: 2px solid rgba(0, 0, 0, .2);
  background: #fff;
  color: #000;
  font-family: var(--ob-text);
  padding: 16px 22px;
  box-shadow: none;
}

textarea { border-radius: 18px; }

.field__input:focus,
.select__select:focus {
  border-color: #000;
  box-shadow: none;
  outline: 0;
}

.field::after,
.field::before,
.select::after,
.select::before { display: none; }

.field__label {
  font-family: var(--ob-text);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, .55);
}

/* ---------- 5. cards — the wonky corners, applied site-wide ---------- */

.card-wrapper .card,
.card,
.collection-card,
.article-card {
  background: #fff;
  border-radius: 0;
  box-shadow: none;
  border: 0;
}

.card__media,
.card .media,
.card .card__inner .card__media,
.collection-card__image,
.article-card__image-wrapper {
  border: 0 !important;
  border-radius: 20px 30px 22px 32px !important;
  overflow: hidden;
  background: #FAFAFA;
}

/* cycle the wonky radii so no two neighbouring cards match */
.grid__item:nth-child(5n + 2) .card__media,
.grid__item:nth-child(5n + 2) .card .media { border-radius: 30px 20px 32px 22px !important; }
.grid__item:nth-child(5n + 3) .card__media,
.grid__item:nth-child(5n + 3) .card .media { border-radius: 22px 32px 20px 30px !important; }
.grid__item:nth-child(5n + 4) .card__media,
.grid__item:nth-child(5n + 4) .card .media { border-radius: 32px 22px 30px 20px !important; }
.grid__item:nth-child(5n + 5) .card__media,
.grid__item:nth-child(5n + 5) .card .media { border-radius: 24px 28px 34px 24px !important; }

.card__heading,
.card__heading a {
  font-family: var(--ob-text);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  color: #000;
}

.card__information { padding-top: 14px; }

.price,
.price-item {
  font-family: var(--ob-text);
  font-weight: 400;
  font-size: 13px;
  color: rgba(0, 0, 0, .55);
}
.price--on-sale .price-item--sale { color: #000; }

/* ---------- 6. badges ---------- */

.badge {
  background: #000;
  color: #fff;
  border: 0;
  border-radius: 4px !important;
  font-family: var(--ob-text);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: 8px 13px;
  transform: none;
}

/* ---------- 7. header + footer ---------- */

.header-wrapper,
.header {
  background: #fff;
  color: #000;
  border-bottom: 1px solid #000 !important;
}

.header__heading-link,
.header__heading-link .h2,
.header__heading-link span {
  font-family: var(--ob-display);
  font-weight: 800;
  font-size: 26px;
  letter-spacing: -.045em;
  text-transform: none;
  color: #000;
}

.header__icon,
.header__menu-item { color: #000; }

/* (removed: black pill on the active nav link) */

.footer {
  background: #fff;
  color: rgba(0, 0, 0, .55);
  border-top: 1px solid #000 !important;
}
.footer__content-top { border: 0; }
.footer-block__heading {
  color: #000;
  font-family: var(--ob-text);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.footer a { color: rgba(0, 0, 0, .55); }
.footer a:hover { color: #000; }

/* ---------- 8. collection / facets / pagination ---------- */

.facets__summary,
.facets__button,
.facet-filters__label {
  font-family: var(--ob-text);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, .55);
}

.facets-wrapper,
.facets__display {
  border: 2px solid #000;
  border-radius: 18px;
  background: #fff;
}

.active-facets__button,
.facets__reset {
  border-radius: 100px;
  border: 2px solid #000;
}

.pagination__item {
  font-family: var(--ob-text);
  border-radius: 100px;
  color: #000;
}
.pagination__item--current {
  background: #000;
  color: #fff;
}

.collection-hero,
.collection__title {
  background: #fff;
  border-bottom: 1px solid #000;
}

/* ---------- 9. cart ---------- */

.cart-item__name,
.cart-drawer-item__name {
  font-family: var(--ob-text);
  font-weight: 600;
  color: #000;
  text-transform: none;
}

.cart__blocks .button,
cart-drawer .button { width: 100%; }

.cart-drawer,
.drawer__inner,
.cart-notification {
  background: #fff;
  color: #000;
  border-left: 1px solid #000;
}

.quantity {
  border: 2px solid rgba(0, 0, 0, .2);
  border-radius: 100px;
  background: #fff;
}
.quantity__input { color: #000; font-family: var(--ob-text); }
.quantity::after,
.quantity::before { display: none; }

/* ---------- 10. variant pickers on the standard product template ---------- */

.product-form__input .form__label { color: #000; }

.product-form__input input[type="radio"] + label,
variant-radios label,
.product-form__input--pill label {
  border: 2px solid rgba(0, 0, 0, .2);
  border-radius: 100px;
  background: #fff;
  color: #000;
  font-family: var(--ob-text);
  font-size: 13px;
  padding: 12px 18px;
}

.product-form__input input[type="radio"]:checked + label,
variant-radios input[type="radio"]:checked + label {
  background: #000;
  color: #fff;
  border-color: #000;
}

/* ---------- 11. misc surfaces ---------- */

.section-header,
.shopify-section { background: #fff; }
.color-inverse.shopify-section,
.shopify-section .color-inverse { background: #000; }

hr,
.section-divider { border-color: #000; }

blockquote { border-left: 2px solid #000; }

.modal__content,
.menu-drawer {
  background: #fff;
  color: #000;
  border-right: 1px solid #000;
}

/* keep the scroll-progress bar and mascot behaviour consistent everywhere */
#ob-progress-track { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 80; pointer-events: none; }
#ob-progress { width: 0; height: 100%; background: #fff; mix-blend-mode: difference; }

@media (prefers-reduced-motion: reduce) {
  .button { transition: none; }
}


/* ---------- newsletter submit ---------- */

.newsletter-form__button,
.field__button {
  border-radius: 100px !important;
  padding: 14px 24px;
  position: static;
  width: auto;
  height: auto;
  background: #000;
  color: #fff;
  font: 700 13px/1 var(--ob-text);
  letter-spacing: .1em;
  text-transform: uppercase;
  border: 0;
}

/* ---------- footer: one clean black bar ---------- */

.footer,
.footer .footer__content-top,
.footer .footer__content-bottom,
.footer.color-background-1,
.footer.color-background-2 {
  background: #000 !important;
  color: rgba(255, 255, 255, .72) !important;
  border-top: 0 !important;
}
.footer .footer__content-top { padding-block: 48px; }
.footer .footer__content-bottom { border-top: 1px solid rgba(255, 255, 255, .16) !important; }
.footer a,
.footer .list-menu__item { color: rgba(255, 255, 255, .72) !important; }
.footer a:hover { color: #fff !important; }
.footer .footer-block__heading,
.footer h2, .footer h3 { color: #fff !important; }
.footer .field__input {
  background: transparent;
  border: 2px solid rgba(255, 255, 255, .3);
  color: #fff;
}
.footer .field__input::placeholder { color: rgba(255, 255, 255, .5); }
.footer .field__label { color: rgba(255, 255, 255, .5); }
.footer .newsletter-form__button,
.footer .field__button { background: #fff !important; color: #000 !important; }
.footer .copyright__content,
.footer .policies { color: rgba(255, 255, 255, .5) !important; }

/* ---------- navigation: lighter, with icons ---------- */

.header__menu-item span,
.header__menu-item,
.header__inline-menu .list-menu--inline > li > .header__menu-item {
  font-weight: 400 !important;
  letter-spacing: .12em;
}

.header__inline-menu .list-menu--inline > li > .header__menu-item {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
}

.header__inline-menu .list-menu--inline > li > .header__menu-item::before {
  content: "";
  width: 15px; height: 15px; flex: none;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}

.header__inline-menu .list-menu--inline > li:nth-child(1) > .header__menu-item::before {
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M3 10.5 12 3l9 7.5"/><path d="M5 9.5V21h14V9.5"/></svg>');
          mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M3 10.5 12 3l9 7.5"/><path d="M5 9.5V21h14V9.5"/></svg>');
}

/* ---------- landing header: wordmark, Home, labelled Cart ---------- */

/* Shrine prints the shop name inside the heading link; the ::after wordmark landed
   on top of it, so ODDBREW appeared twice. Hide the inner text, keep the ::after. */
.ob-landing .header__heading-link > *,
.ob-landing .header__heading-link img,
.ob-landing .header__heading-link .h2 { display: none !important; }

.ob-landing .header__heading-link {
  font-size: 0 !important;
  line-height: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.ob-landing .header__heading-link::after {
  content: "ODDBREW";
  font-family: var(--ob-display);
  font-weight: 800;
  font-size: 30px;
  line-height: 1;
  letter-spacing: -.045em;
  color: #000;
}

/* no search, no account — Home stays, Cart stays */
.ob-landing .header__search,
.ob-landing .header__icon--search,
.ob-landing .header__icon--account,
.ob-landing .header__icons a[href*="account"],
.ob-landing predictive-search,
.ob-landing details-modal { display: none !important; }

.ob-landing .header__inline-menu { display: block !important; }
/* (removed: rule that hid all header links except Home) */

.ob-landing .header__icons a[href*="/cart"],
.ob-landing #cart-icon-bubble {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  width: auto !important;
  padding: 10px 18px;
  border: 2px solid #000;
  border-radius: 100px;
  color: #000;
  text-decoration: none;
}
.ob-landing .header__icons a[href*="/cart"]::after,
.ob-landing #cart-icon-bubble::after {
  content: "CART";
  font-family: var(--ob-text);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .12em;
}
.ob-landing .header__icons a[href*="/cart"]:hover,
.ob-landing #cart-icon-bubble:hover { background: #000; color: #fff; }
.ob-landing .header__icons a[href*="/cart"]:hover svg,
.ob-landing #cart-icon-bubble:hover svg { color: #fff; }

.ob-landing .header {
  grid-template-columns: 1fr auto 1fr !important;
  align-items: center;
  padding-block: 22px;
}
.ob-landing .header__inline-menu { justify-self: start; }
.ob-landing .header__icons { justify-self: end; }

/* ---------- header layout: one consistent bar on every page ---------- */

/* Shrine's header is a 5-column grid, so the wordmark never sat truly centred.
   Flex with three equal groups puts it dead centre at any width. */
.ob-landing .header {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 32px !important;
  grid-template-columns: none !important;
}

.ob-landing .header__inline-menu { flex: 1 1 0; min-width: 0; }
.ob-landing .header__heading,
.ob-landing .header__heading-link { flex: 0 0 auto; margin: 0; }
.ob-landing .header__icons {
  flex: 1 1 0;
  display: flex !important;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
}

/* The hamburger and drawer are the mobile navigation now, so this only holds
   on desktop where the inline links are visible instead. It used to apply at
   every width, which is why there was no way to navigate on a phone. */
@media screen and (min-width: 750px) {
  .ob-landing .header__icon--menu,
  .ob-landing menu-drawer,
  .ob-landing .menu-drawer,
  .ob-landing .menu-drawer-container,
  .ob-landing .header__icon--menu ~ * { display: none !important; }
}

@media screen and (max-width: 749px) {
  .ob-landing .header { padding: 10px 18px !important; }
  .ob-landing .header__heading-link::after { font-size: 22px; }
  .ob-landing .header__icons a[href*="/cart"],
  .ob-landing #cart-icon-bubble { padding: 8px 14px; }
  .ob-landing .header__icons a[href*="/cart"]::after,
  .ob-landing #cart-icon-bubble::after { font-size: 11px; }
  .ob-landing .header__inline-menu .list-menu--inline > li:first-child > .header__menu-item { font-size: 11px; }
}


/* ---------- header, final ---------- */
/* The real Shopify logo replaces the text wordmark. */

.ob-landing .header__heading-link::after,
.ob-landing .header__heading::after { content: none !important; }

.ob-landing .header__heading-link { font-size: inherit !important; line-height: normal; }
.ob-landing .header__heading-link > *,
.ob-landing .header__heading > a > * { display: revert !important; }

.ob-landing .header__heading-link img,
.ob-landing .header__heading img {
  display: block !important;
  width: auto !important;
  max-width: none !important;
  height: 96px !important;
  max-height: none !important;
}

/* All three menu items show, set in the display face to match the hero type. */

.ob-landing .header__inline-menu .list-menu--inline {
  display: flex;
  align-items: center;
  gap: 26px;
}

.ob-landing .header__inline-menu .list-menu--inline > li > .header__menu-item,
.ob-landing .header__inline-menu .list-menu--inline > li > .header__menu-item span {
  font-family: var(--ob-display) !important;
  font-weight: 800 !important;
  font-size: 15px !important;
  letter-spacing: -.02em !important;
  text-transform: none !important;
  color: #000;
}

/* icons belong to the old uppercase nav — drop them now the type is the display face */
.ob-landing .header__inline-menu .list-menu--inline > li > .header__menu-item::before { display: none !important; }

.ob-landing .header__active-menu-item,
.ob-landing .header__menu-item.header__active-menu-item {
  background: none !important;
  color: #000 !important;
  padding: 0 !important;
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 2px;
}

/* Shrine marks the current page with an inner span that has a black background
   AND black text, so the label vanished. Strip the chip, keep the underline. */
.ob-landing .header__active-menu-item-v2,
.ob-landing .header__menu-item .header__active-menu-item-v2,
.ob-landing .header__menu-item span.color-accent-1 {
  background: none !important;
  background-color: transparent !important;
  color: #000 !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

/* Desktop only: the heading box was fixed at logo_width, so a narrow logo sat
   left inside it and read as off-centre. */
@media screen and (min-width: 750px) {
  .ob-landing .header__heading,
  .ob-landing .header__heading-link {
    width: auto !important;
    max-width: none !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
  }
}


/* ---------- logo: size the ratio box, not the image ----------
   Shrine renders the logo as a `.ratio` box with the <img> absolutely
   positioned inside it. Sizing the image alone left it floating outside a
   0x0 parent, which is why it sat low and off-centre. Size the box instead
   and let the image fill it. The logo is 1.10:1, hence the aspect-ratio. */

.ob-landing .header__heading {
  display: flex !important;
  align-items: center;
  justify-content: center;
  line-height: normal !important;
  margin: 0 !important;
  font-size: 0 !important;
}

.ob-landing .header__heading-link {
  position: relative !important;
  display: block !important;
  padding: 0 !important;
  overflow: visible !important;
  line-height: normal !important;
}

/* Desktop sizing only — mobile is handled by Shopify's mobile_logo_width. */
@media screen and (min-width: 750px) {
  .ob-landing .header__heading-link {
    height: 92px !important;
    width: auto !important;
    aspect-ratio: 1.101 / 1;
  }
  .ob-landing .header__heading-link img,
  .ob-landing .header__heading img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }
}

.ob-landing .header__heading-link img,
.ob-landing .header__heading img {
  position: static !important;
  inset: auto !important;
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  display: block !important;
}

/* one row, everything on the same centre line */
.ob-landing .header {
  align-items: center !important;
  min-height: 116px;
}
.ob-landing .header__inline-menu,
.ob-landing .header__icons { align-self: center; }

@media screen and (max-width: 749px) {
    .ob-landing .header { min-height: 78px; }
}

/* Nav and icons are never exactly equal in width, so centring the logo by flex
   leaves it a few px off. Pin it to true centre — desktop only. */
.ob-landing .header { position: relative; }
@media screen and (min-width: 750px) {
  .ob-landing .header__heading {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 2;
  }
}


/* Inactive links: plain black text, no chip. */
.header__menu-item,
.header__menu-item span {
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
  color: #000 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  text-decoration: none !important;
}

/* Current page / clicked: keep the black highlight, white label on top. */
.header__active-menu-item,
.header__active-menu-item-v2,
.header__menu-item .header__active-menu-item-v2,
.header__menu-item span.color-accent-1,
.header__inline-menu .header__menu-item[aria-current],
.header__inline-menu .header__menu-item[aria-current] span {
  background: #000 !important;
  background-color: #000 !important;
  color: #fff !important;
  border-radius: 6px !important;
  padding: 6px 12px !important;
  box-shadow: none !important;
  text-decoration: none !important;
}

/* nav hover/press/focus is defined once, at the end of this file */

/* The homepage wraps the logo in <h1 class="header__heading">; every other page
   puts .header__heading-link straight inside .header. Centre whichever exists —
   the two selectors are mutually exclusive, so they never double up. */
.ob-landing .header > .header__heading-link {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  margin: 0 !important;
  z-index: 2;
}

/* ---------- header click / focus highlight ----------
   Was a solid black fill (Shrine's focus-inset style). Now a soft warm tint
   with a thin underline, so it reads as "selected" without a black block.
   Change --ob-highlight to recolour it. */

:root { --ob-highlight: #000; }

.ob-landing .header a,
.ob-landing .header button {
  -webkit-tap-highlight-color: var(--ob-highlight);
  border-radius: 6px;
  transition: background-color .15s ease;
}

/* keyboard users still get a clear ring */
.ob-landing .header a:focus-visible,
.ob-landing .header button:focus-visible {
  outline: 2px solid #000 !important;
  outline-offset: 3px !important;
}

/* Shrine's inset focus outline paints a black block — off. */
.ob-landing .header .focus-inset:focus,
.ob-landing .header .focus-inset:focus-visible { box-shadow: none !important; }

/* text selection anywhere on the site */
::selection { background: #000; color: #fff; }


/* ---------- fill the window at any zoom / width ----------
   Shrine caps .page-width (and so the header) at a fixed width, and the
   OddBrew shell was capped at 1600px. Both left white gutters when the
   window was wider or the user zoomed out. */

.ob-landing .header,
.ob-landing .header-wrapper > .page-width,
.ob-page .footer > .page-width,
.ob-page .footer__content-top,
.ob-page .footer__content-bottom {
  max-width: none !important;
  width: 100% !important;
}

.ob-landing .header { padding-inline: clamp(18px, 3vw, 56px) !important; }

.ob-page .ob-shell { max-width: none !important; }

/* keep long text from stretching to unreadable line lengths on very wide screens */
.ob-hero__intro,
.ob-story__copy p,
.ob-showcase__head p { max-width: 56ch; }

/* ---------- cart drawer + cart page fixes ---------- */
/* My global .button rule was painting these black, which hid a black X icon
   inside a black circle and left the checkout button unreadable. */

/* Checkout: always solid black with a white label, never faint. */
.cart__checkout-button,
.cart__ctas .button,
.drawer__footer .button,
button[name="checkout"],
.cart__dynamic-checkout-buttons + .cart__checkout-button {
  background: #000 !important;
  color: #fff !important;
  border: 0 !important;
  opacity: 1 !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
}
.cart__checkout-button:hover,
button[name="checkout"]:hover { background: #000 !important; color: #fff !important; opacity: .85 !important; }

/* Remove (X): no black pill, just a visible black glyph. */
cart-remove-button,
cart-remove-button .button,
.cart-item__remove,
.cart-drawer-item__cart-remove-button,
.cart-drawer-item__cart-remove-button .button {
  background: none !important;
  background-color: transparent !important;
  border: 0 !important;
  color: #000 !important;
  padding: 6px !important;
  min-width: 0 !important;
}
cart-remove-button svg,
.cart-drawer-item__cart-remove-button svg,
.cart-item__remove svg {
  color: #000 !important;
  fill: currentColor;
  width: 16px;
  height: 16px;
  opacity: 1 !important;
}
cart-remove-button:hover svg { opacity: .6 !important; }

/* Discount / bundle savings ribbon: highlighted, not washed out. */
.discounts__discount,
.cart-item__discount,
.cart-drawer-item__discount,
ul.discounts li,
.cart-item__discount-list li,
[class*="discount"] .badge {
  background: #000 !important;
  color: #fff !important;
  border-radius: 100px !important;
  padding: 7px 14px !important;
  font-family: var(--ob-text) !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  opacity: 1 !important;
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
}
.discounts__discount svg,
.cart-item__discount svg,
ul.discounts li svg { color: #fff !important; fill: currentColor; }

/* savings line in the footer reads as a win */
.totals__subtotal-value,
.cart__savings,
[class*="savings"] { color: #000 !important; }

/* The X svg had height but zero width — a more specific Shrine rule was winning.
   Pin both dimensions with a stronger selector. */
cart-remove-button .button svg,
.cart-drawer-item__cart-remove-button .button svg,
.cart-item__remove .button svg,
cart-remove-button button svg {
  width: 16px !important;
  min-width: 16px !important;
  height: 16px !important;
  flex: 0 0 16px !important;
  display: block !important;
  color: #000 !important;
}
cart-remove-button .button,
cart-remove-button button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: auto !important;
  min-width: 28px !important;
}

/* ---------- buttons: rounded rectangles, not pills ----------
   Matches the capacity boxes (12px). Applies site-wide: theme buttons, OddBrew
   buttons, pickers, inputs, cart and checkout. Genuinely circular things — the
   glaze dots and slideshow dots — are left alone on purpose. */

.ob-btn,
.ob-chip,
.ob-size,
.ob-pair__btn,
.ob-qty__box,
.ob-thumb,
.ob-atc,
.button,
.button--secondary,
.button--tertiary,
.shopify-payment-button__button,
.shopify-payment-button__button--unbranded,
.shopify-challenge__button,
.newsletter-form__button,
.field__button,
.cart__checkout-button,
button[name="checkout"],
.field__input,
.select__select,
.customer input,
.customer select,
textarea,
.header__icons a[href*="/cart"],
#cart-icon-bubble,
.quantity,
.pagination__item,
.active-facets__button,
.facets__reset,
.ob-says,
.ob-pin,
.ob-price__save,
.ob-slideshow__arrow {
  border-radius: 12px !important;
}

/* accelerated checkout has its own custom property */
shopify-accelerated-checkout,
shopify-accelerated-checkout-cart {
  --shopify-accelerated-checkout-button-border-radius: 12px !important;
}

/* keep the true circles circular */
.ob-dots span,
.ob-slideshow__dot { border-radius: 100px !important; }

/* ---------- footer logo ----------
   The logo file is black artwork; the footer is black, so it is inverted to
   white here rather than needing a separate white asset. */

.footer .footer-block--image img,
.footer .footer-block__image img,
.footer-block img {
  /* the white logo asset is used directly — no filter, so brand colours stay true */
  max-width: 260px;
  height: auto;
  display: block;
}

.footer .footer-block--image { display: flex; flex-direction: column; gap: 14px; }
.footer .footer-block--image::after {
  content: "Ceramics for everyday rituals.";
  font: 400 14px/1.5 var(--ob-text);
  color: rgba(255, 255, 255, .72);
}

/* ---------- cart count: beside the label, not on top of the bag ----------
   Shrine absolutely positions the count over the icon. In a pill button with a
   text label that reads as a collision, so it becomes a normal flex item. */

.ob-landing #cart-icon-bubble,
.ob-landing .header__icon--cart {
  display: inline-flex !important;
  align-items: center;
  gap: 9px;
}

.ob-landing #cart-icon-bubble svg { order: 0; }
.ob-landing #cart-icon-bubble::after { order: 1; }

.ob-landing #cart-icon-bubble .cart-count-bubble,
.ob-landing .header__icon--cart .cart-count-bubble {
  position: static !important;
  order: 2;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  background: #000 !important;
  color: #fff !important;
  font: 700 11px/1 var(--ob-text) !important;
  border-radius: 6px !important;
}

/* hover keeps the count readable when the pill inverts */
.ob-landing #cart-icon-bubble:hover .cart-count-bubble {
  background: #fff !important;
  color: #000 !important;
}

/* ---------- responsive header ----------
   The logo is absolutely centred on wide screens, which is what makes it overlap
   the nav and the cat once space runs out. Below 1100px it returns to the flow
   and the row simply distributes: nav | logo | cart. */

.ob-landing .header__inline-menu .list-menu--inline > li > .header__menu-item { white-space: nowrap; }

@media screen and (max-width: 1100px) {
  .ob-landing .header { padding-inline: 20px !important; gap: 12px; }
  .ob-landing .header__heading,
  .ob-landing .header > .header__heading-link {
    position: static !important;
    transform: none !important;
    left: auto !important;
    top: auto !important;
  }
    .ob-landing .header__inline-menu .list-menu--inline { gap: 16px; }
  .ob-landing .header__inline-menu .list-menu--inline > li > .header__menu-item { font-size: 13px !important; }
  /* the mascot is the first thing to go — it is decoration, not navigation */
  .ob-landing .header__icons .ob-spot { display: none; }
}

@media screen and (max-width: 860px) {
    .ob-landing .header__inline-menu .list-menu--inline > li > .header__menu-item { font-size: 12px !important; }
  .ob-landing #cart-icon-bubble { padding: 8px 12px; gap: 7px; }
}

/* Small screens: two tidy rows — logo and cart on top, nav centred beneath. */
@media screen and (max-width: 749px) {
  .ob-landing .header {
    flex-wrap: wrap !important;
    justify-content: space-between;
    row-gap: 10px;
    padding: 12px 16px !important;
    min-height: 0;
  }
  .ob-landing .header__heading,
  .ob-landing .header > .header__heading-link { order: 1; }
  .ob-landing .header__icons { order: 2; flex: 0 0 auto; }
  .ob-landing .header__inline-menu {
    order: 3;
    flex: 1 0 100%;
    justify-self: stretch;
  }
  .ob-landing .header__inline-menu .list-menu--inline {
    justify-content: center;
    gap: 22px;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .ob-landing .header__inline-menu .list-menu--inline::-webkit-scrollbar { display: none; }
    .ob-landing #cart-icon-bubble::after { content: "CART"; font-size: 11px; }
}

/* nothing on the site should ever push the page sideways */
html, body { overflow-x: hidden; max-width: 100%; }
img, svg, video, iframe { max-width: 100%; }

/* ---------- nav alignment ----------
   The current-page chip carries padding, which made it taller than its sibling
   and knocked the two links out of line. Align on the cross axis and keep them
   on one row so they can never stagger. */

.ob-landing .header__inline-menu .list-menu--inline {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
}

.ob-landing .header__inline-menu .list-menu--inline > li {
  display: flex !important;
  align-items: center;
}

.ob-landing .header__inline-menu .list-menu--inline > li > .header__menu-item {
  display: inline-flex !important;
  align-items: center;
  line-height: 1 !important;
  padding-block: 6px !important;
}

/* the active chip must not change the row's height */
.ob-landing .header__active-menu-item,
.ob-landing .header__active-menu-item-v2,
.ob-landing .header__menu-item span.color-accent-1 {
  display: inline-flex !important;
  align-items: center;
  line-height: 1 !important;
}

/* ---------- mobile header: explicit grid, no overlap possible ----------
   Flex-wrap plus an absolutely-positioned logo left too many ways for these
   three items to collide. Below 750px the header becomes a two-row grid with
   named areas, so each element has its own cell and nothing can stack. */

@media screen and (max-width: 749px) {
  /* Option A: one row — logo centred, cart right, no nav.
     Both products are reachable from the page body and the footer, so the nav
     was costing ~80px of a phone screen for links nobody needed up here. */
  /* Flex with the logo absolutely centred — a stray zero-height child was
     taking a grid cell and shunting the logo off-centre. */
  .ob-landing .header {
    display: flex !important;
    justify-content: flex-end;
    align-items: center;
    position: relative;
    padding: 10px 16px !important;
    min-height: 92px !important;
  }

  .ob-landing .header__heading,
  .ob-landing .header > .header__heading-link {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
  }

  .ob-landing .header__icons {
    margin-left: auto;
    flex: 0 0 auto !important;
    z-index: 2;
  }

  /* nav is off on phones — it lives in the footer and in the page itself */
  .ob-landing .header__inline-menu { display: none !important; }

  .ob-landing .header__icons .ob-spot { display: none !important; }
  .ob-landing #cart-icon-bubble { padding: 7px 11px; gap: 6px; }
  .ob-landing #cart-icon-bubble::after { font-size: 11px; }
}
}

/* ---------- footer on mobile ----------
   Shrine's footer keeps its desktop column widths on small screens, so the logo
   column was too narrow for the mark (it clipped mid-word) and the link column
   sat beside it. Below 750px every block goes full width and stacks. */

@media screen and (max-width: 749px) {
  .footer .footer__content-top {
    display: flex !important;
    flex-direction: column;
    gap: 30px;
    padding: 36px 20px 28px !important;
  }

  .footer .footer-block,
  .footer .footer-block--desktop-3,
  .footer .grid__item {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    text-align: left;
  }

  /* the logo gets room to sit whole rather than being cropped by its column */
  .footer .footer-block--image img,
  .footer-block img {
    max-width: 150px !important;
    width: 150px !important;
    height: auto !important;
  }

  .footer .footer-block__details-content { margin: 0 !important; }
  .footer .footer-block__heading { margin-bottom: 12px !important; }

  /* newsletter field and its button share one row cleanly */
  .footer .newsletter-form,
  .footer .footer-block__newsletter form {
    display: flex !important;
    gap: 8px;
    align-items: stretch;
    width: 100%;
  }
  .footer .newsletter-form__field-wrapper { flex: 1 1 auto; min-width: 0; }
  .footer .newsletter-form__field-wrapper .field { width: 100%; }
  .footer .newsletter-form__button { flex: 0 0 auto; }

  .footer .footer__content-bottom { padding: 20px !important; }
  .footer .list-payment { justify-content: flex-start; gap: 6px; }
  .footer .copyright__content,
  .footer .policies { text-align: left; font-size: 12px; }
}


/* ---------- mobile logo: hands off ----------
   Shopify's mobile_logo_width (90px) sizes it via Shrine's inline style. My
   desktop rules are scoped to min-width 750px so they cannot leak down here. */
@media screen and (max-width: 749px) {
  /* No width here on purpose — Shrine's inline style sets it from
     mobile_logo_width (90px). Overriding it was what blew the logo up. */
  .ob-landing .header__heading-link {
    height: auto !important;
    aspect-ratio: auto !important;
    position: relative !important;
    padding: 0 !important;
  }

  /* Shrine reserves the aspect ratio with a ::before pseudo-element, not with
     padding on the box itself — that pseudo is what made the logo cell 163px
     tall while the image was only 82px. */
  .ob-landing .header__heading-link::before,
  .ob-landing .header__heading::before {
    content: none !important;
    display: none !important;
    padding-bottom: 0 !important;
  }
  /* Shrine renders TWO logos — main and secondary (for the sticky/transparent
     header). Absolutely positioned they overlap; in normal flow they stacked,
     which is what doubled the header height. Show the main one only. */

  .ob-landing .header__heading-link img,
  .ob-landing .header__heading img {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }
}


/* ---------- one logo, not two ----------
   Shrine ships a main and a secondary logo image for its transparent/sticky
   header variants. We use neither, and with the images in normal flow they
   stack. Hide the secondary at every width. Specificity is deliberately high
   to beat the blanket `.header__heading-link img { display: block }` above. */

.ob-landing .header__heading-link img.header__heading-logo--secondary,
.ob-landing .header__heading img.header__heading-logo--secondary,
.header__heading-link img.header__heading-logo--secondary {
  display: none !important;
}

/* ---------- mobile footer, final ----------
   Appended last on purpose: the earlier "bigger footer logo" rule (260px) and
   Shrine's .grid__item column widths were both winning over my first attempt. */

@media screen and (max-width: 749px) {
  .footer .footer__content-top,
  .footer .footer__content-top.page-width {
    display: flex !important;
    flex-direction: column !important;
    gap: 28px;
    padding: 32px 20px 26px !important;
  }

  .footer .footer__content-top .footer-block,
  .footer .footer__content-top .footer-block.grid__item,
  .footer .footer__content-top .grid__item {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* the logo has to fit inside a full-width column now, not a 163px one */
  .footer .footer__content-top .footer-block img,
  .footer .footer-block--image img,
  .footer-block img {
    width: 140px !important;
    max-width: 140px !important;
    height: auto !important;
  }

  .footer .footer-block__heading { margin-bottom: 10px !important; }
  .footer .footer-block__details-content { margin: 0 !important; }
}

@media screen and (max-width: 749px) {
  /* logo lines up with the text blocks beneath it */
  .footer .footer__content-top .footer-block--image,
  .footer .footer__content-top .footer-block--image > * {
    align-items: flex-start !important;
    justify-content: flex-start !important;
    text-align: left !important;
  }
  .footer .footer__content-top .footer-block img { margin-inline: 0 !important; }
}

@media screen and (max-width: 749px) {
  /* the image block wraps the logo in .footer-block__image-wrapper, which carries
     an inline max-width and centres itself — pin it left with the text */
  .footer .footer-block__image-wrapper {
    max-width: 140px !important;
    margin-left: 0 !important;
    margin-right: auto !important;
  }
}


/* ---------- late fixes ---------- */

/* the white input was painting over the pill's rounded corners */
.quantity {
  overflow: hidden;
  border-radius: 12px !important;
}
.quantity__input,
.quantity__button { background: transparent !important; }

/* "Log in to check out faster" — the link had lost every affordance */
.cart__login-paragraph a,
.cart__login-paragraph .link,
.cart__login-paragraph .underlined-link {
  color: #000 !important;
  font-weight: 700 !important;
  text-decoration: underline !important;
  text-underline-offset: 4px;
  text-decoration-thickness: 2px;
}

/* review-app star badges on product cards: one product has them, the other
   doesn't, so the grid looked broken. Hide on cards; PDP keeps its own. */
.card__information .jdgm-widget,
.card__information .jdgm-prev-badge,
.card-information .jdgm-widget,
.card-information .jdgm-prev-badge,
.card__information .shopify-product-reviews-badge,
.card-information .shopify-product-reviews-badge,
.card__information .spr-badge,
.card-information .spr-badge { display: none !important; }


/* The catalogue is two products, so Shrine's filter bar rendered as an empty
   pill with a stray count. Hide it until there is something worth filtering. */
.facets-container,
.facets-wrapper,
#main-collection-filters,
.collection__title .product-count,
.product-count { display: none !important; }

/* ---------- country / currency selector ----------
   The footer paints its children white, which is right against the black bar
   but not inside the dropdown, which Shrine renders on a white panel. Every
   country was present and invisible. Pin the panel dark-on-white. */

.footer .disclosure__list,
.disclosure__list {
  background: #fff !important;
  border: 2px solid var(--ob-ink, #000) !important;
  border-radius: 12px !important;
  padding: 6px !important;
  max-height: 60vh;
  overflow-y: auto;
}

.footer .disclosure__list a,
.footer .disclosure__list button,
.footer .disclosure__link,
.disclosure__list a,
.disclosure__link {
  color: var(--ob-ink, #000) !important;
  opacity: 1 !important;
  display: block;
  padding: 10px 14px !important;
  border-radius: 8px;
  text-decoration: none !important;
}

.footer .disclosure__list a:hover,
.disclosure__link:hover,
.disclosure__link[aria-current="true"] {
  background: rgba(0, 0, 0, .06) !important;
  color: var(--ob-ink, #000) !important;
}

/* the closed button sits on the black footer, so it stays light */
.footer .disclosure__button,
.footer localization-form button[aria-expanded] {
  color: var(--ob-ink, #000) !important;
  background: #fff !important;
}

/* ================= header nav: one chip, smoothly =================
   The active state was painting a chip on the link AND on the span inside it,
   so the highlight was effectively double-padded. Paint it once, on the link,
   and give it something to animate. */

.header__inline-menu .list-menu--inline > li > .header__menu-item {
  display: inline-flex;
  align-items: center;
  line-height: 1;
  border-radius: 6px;
  padding: 6px 10px !important;
  transition: background-color .2s ease, color .2s ease;
  -webkit-tap-highlight-color: transparent;
}

/* inner spans never carry the chip */
.header__inline-menu .header__menu-item span,
.header__inline-menu .header__active-menu-item span,
.header__inline-menu .header__menu-item .header__active-menu-item-v2,
.header__inline-menu .header__menu-item span.color-accent-1 {
  background: none !important;
  background-color: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  color: inherit !important;
  box-shadow: none !important;
}

/* the chip itself — snug, not chunky */
.header__inline-menu .header__menu-item.header__active-menu-item,
.header__inline-menu .header__menu-item[aria-current],
.header__inline-menu .header__menu-item[aria-current="page"] {
  background-color: #000 !important;
  color: #fff !important;
  border-radius: 6px !important;
  padding: 6px 10px !important;
}

@media (prefers-reduced-motion: reduce) {
  .header__inline-menu .list-menu--inline > li > .header__menu-item { transition: none; }
}

/* ---------- collection grid: even cards ----------
   Signature carries a review badge and the others don't, so its card was taller
   and the rows sat out of line. Stretch the cards and pin the button. */

.product-grid .grid__item,
.collection .grid__item { display: flex; }

.product-grid .card-wrapper,
.collection .card-wrapper { display: flex; flex-direction: column; width: 100%; }

.product-grid .card__content,
.collection .card__content { display: flex; flex-direction: column; flex: 1 1 auto; }

.product-grid .card__information,
.collection .card__information { display: flex; flex-direction: column; flex: 1 1 auto; }

.product-grid .quick-add,
.collection .quick-add { margin-top: auto; padding-top: 12px; }

/* the sold-out button shouldn't look like a live buy button */
.quick-add__submit[aria-disabled="true"],
.card-wrapper .quick-add__submit.is-sold-out {
  background: transparent !important;
  color: rgba(0, 0, 0, .55) !important;
  border: 1px solid rgba(0, 0, 0, .18) !important;
}

/* the grid was align-items:flex-start, so cards never stretched to row height */
.product-grid.grid,
.collection .grid.product-grid { align-items: stretch !important; }
.product-grid .grid__item { align-self: stretch; }

/* ---------- footer: same container standard as everything else ---------- */
.footer__content-top,
.footer__content-bottom {
  padding-inline: max(var(--ob-gutter, 46px), calc((100% - var(--ob-max, 1600px)) / 2)) !important;
  box-sizing: border-box;
}
.footer__content-top .page-width,
.footer__content-bottom .page-width {
  max-width: none !important;
  padding-inline: 0 !important;
  margin-inline: 0 !important;
}

/* ================= header: transparent, on every template =================
   The bar has no ground of its own anywhere on the site — the page shows
   through it, exactly as it does over the hero on the homepage. It only
   takes a background once it pins on scroll, so type stays legible over
   whatever is moving underneath it. */

.header-wrapper,
.header-wrapper.color-background-1,
.section-header,
.header {
  background: transparent !important;
  background-color: transparent !important;
  border-bottom: 0 !important;
}

/* pinned on scroll: it needs ground under it, or the type sits on the page */
.header-wrapper--sticky,
.header-wrapper--sticky .header,
.shopify-section-header-sticky .header-wrapper,
.shopify-section-header-sticky .header {
  background-color: #F3EEE6 !important;
  border-bottom: 1px solid rgba(0, 0, 0, .10) !important;
}

/* every piece of header type stays legible on the warm ground */
.header__menu-item,
.header__menu-item span,
.header__icons a,
.header__icons button,
.header__icon,
.header__icon .icon,
.header__heading-link,
.cart-count-bubble ~ span,
.header__icons .header__icon--cart span {
  color: #14130F !important;
}

.header__icon .icon,
.header__icons svg { stroke: #14130F; }

/* the cart pill reads as an outline on cream */
.header__icons a[href*="/cart"],
#cart-icon-bubble {
  background: transparent !important;
  border: 1.5px solid #14130F !important;
  color: #14130F !important;
}








/* once the page scrolls, Shrine pins the header — give it its ground back so
   type never sits on moving imagery */


/* the hero must start at the very top, behind the header */



/* …and its copy needs to clear the floating header */


@media screen and (max-width: 1100px) {
  /* stacked layout: the header sits on the photo, copy is below it anyway */
  .ob-home .ob-story--hero .ob-story__copy { padding-top: 40px !important; }
  .ob-home .ob-story--hero .ob-story__bg { padding-top: 0; }
}

/* ================= header nav: smoother =================
   The chip was snapping between states with a short linear-ish transition and a
   heavy grey hover. Softer easing, lighter hover, and a press state that reads
   as a button rather than a jump. */

.header__inline-menu .list-menu--inline > li > .header__menu-item {
  transition:
    background-color .26s cubic-bezier(.2,.7,.2,1),
    color .26s cubic-bezier(.2,.7,.2,1),
    transform .16s cubic-bezier(.2,.7,.2,1) !important;
  will-change: background-color, transform;
}

/* cart pill matches the same feel */
.header__icons a[href*="/cart"],
#cart-icon-bubble {
  transition: background-color .26s cubic-bezier(.2,.7,.2,1), color .26s cubic-bezier(.2,.7,.2,1), transform .16s cubic-bezier(.2,.7,.2,1) !important;
}
.header__icons a[href*="/cart"]:hover { background: rgba(0,0,0,.05) !important; }
.header__icons a[href*="/cart"]:active { transform: scale(.97); }

/* a page-load progress cue, so clicking a nav link doesn't feel like nothing
   happened while the next page fetches */
/* ---------- rating stars: legible gold ----------
   #F5B301 measured 1.5:1 on the cream hero and 1.9:1 on white — effectively
   invisible. A deeper amber keeps the gold reading while clearing 4.5:1. */

.ob-stars,
.ob-review__stars,
.ob-tm__stars,
.ob-hero__rating .ob-stars,
.ob-hero__quote .ob-stars {
  color: #8A5D00 !important;
}

/* ---------- newsletter sign-up button ----------
   On the light newsletter block this button rendered white text with a white
   border on a white ground — a 1.00 contrast ratio, i.e. invisible. Give it the
   same solid treatment as every other primary button on a light surface. */

.newsletter__wrapper .newsletter__solid-btn,
.newsletter__wrapper button.newsletter__solid-btn {
  background-color: #000 !important;
  color: #fff !important;
  border: 1.5px solid #000 !important;
  border-radius: 100px !important;
  transition: opacity .24s cubic-bezier(.2,.7,.2,1), transform .16s cubic-bezier(.2,.7,.2,1);
}
.newsletter__wrapper .newsletter__solid-btn:hover { opacity: .86; }
.newsletter__wrapper .newsletter__solid-btn:active { transform: scale(.98); }

/* if the block is ever set to a dark scheme, flip it back rather than vanish */
.newsletter__wrapper.color-scheme-inverse .newsletter__solid-btn,
.footer .newsletter__solid-btn {
  background-color: #fff !important;
  color: #000 !important;
  border-color: #fff !important;
}

/* ---------- header: tighter, less dead space ----------
   The 92px logo was setting the bar height at 116px. Bring both down. */

.ob-landing .header,
.header {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
  min-height: 0 !important;
}

.header__heading-logo,
.header__heading-link img,
.header__heading img {
  max-height: 62px !important;
  height: auto !important;
  width: auto !important;
}

@media screen and (max-width: 749px) {
  .header__heading-logo,
  .header__heading-link img,
  .header__heading img { max-height: 46px !important; }
}

/* ---------- cart count bubble ----------
   The header type rules had turned the bubble's label dark, leaving a black
   number on a black circle — it read as a solid square. */

.cart-count-bubble {
  background-color: #000 !important;
  color: #fff !important;
  border-radius: 100px !important;
  min-width: 18px;
  height: 18px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  font: 700 11px/1 var(--ob-text, sans-serif) !important;
  padding: 0 5px;
}
.cart-count-bubble span,
.cart-count-bubble * { color: #fff !important; }
.cart-count-bubble .visually-hidden { color: transparent !important; }

/* ---------- ticker: single source of truth ----------
   This token lives here, not in oddbrew.css, because oddbrew.css is only
   loaded on the home and product templates. The header offset is derived
   from it, so it has to resolve on every page or the bar drifts. */
:root { --ob-ticker-h: 32px; }
@media screen and (max-width: 749px) { :root { --ob-ticker-h: 28px; } }

.horizontal-ticker,
.horizontal-ticker__container {
  font-size: 12px !important;
  letter-spacing: .1em;
}
@media screen and (max-width: 749px) {
  .horizontal-ticker,
  .horizontal-ticker__container { font-size: 11px !important; }
}

/* pin the ticker to an exact height so the floating header can sit flush
   underneath it rather than guessing an offset */
.horizontal-ticker {
  height: var(--ob-ticker-h) !important;
  min-height: var(--ob-ticker-h) !important;
  padding-block: 0 !important;
  display: flex !important;
  align-items: center;
  overflow: hidden;
}

/* ---------- header mascot ----------
   Header chrome belongs in this file, not oddbrew.css, which only loads on the
   home and product templates. Unsized, the cat SVG renders at its natural size
   and pushes the bar to 122px on every other page. */
.header__icons .ob-spot {
  position: static !important;
  width: 76px !important;
  bottom: auto !important;
  left: auto !important;
  display: flex !important;
  align-items: center;
  flex: none;
  z-index: auto;
}
.header__icons .ob-spot svg { width: 76px !important; height: auto !important; }

/* first thing to go when space is tight */
@media screen and (max-width: 1100px) {
  .header__icons .ob-spot { display: none !important; }
}

/* the logo lives in a .ratio box, so sizing the <img> does nothing — size the
   link that wraps it. Shrine's own inline rule was not winning here. */
.header__heading-link,
.header__heading-link.media,
.header__heading,
.header__heading .header__heading-link {
  width: 54px !important;
  max-width: 54px !important;
}
.header__heading-logo,
.header__heading-link img {
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
}

@media screen and (max-width: 749px) {
  .header__heading-link,
  .header__heading-link.media,
  .header__heading .header__heading-link { width: 42px !important; max-width: 42px !important; }
}

/* the header's containing block already begins below the ticker, so offsetting
   it by the ticker height again pushed it twice as far down */


/* Only the section should be positioned. The wrapper inside it was also
   absolute with its own offset, so the header landed twice as far down. */



/* higher specificity than the earlier .ob-home .header-wrapper rules, which kept
   re-applying the ticker offset on top of the already-offset section */


/* ==================================================================
   MOBILE FIXES — appended last so nothing earlier re-breaks them
   1. the hero photo was absolutely positioned behind an opaque copy
      block, so the image was invisible on a phone
   2. the floating header overlapped the headline
   3. the nav links were display:none with no hamburger to replace them
   ================================================================== */

@media screen and (max-width: 989px) {

  /* header returns to normal flow so nothing sits under it */
  body.ob-home .shopify-section-group-header-group.section-header,
  body.ob-home .shopify-section-header,
  body.ob-home .header-wrapper.header-wrapper {
    position: relative !important;
    top: 0 !important;
    background: transparent !important;
  }
  body.ob-home .header,
  body.ob-home .header-wrapper .header { background: transparent !important; }

  /* The hero used to be broken into image-then-white-text-block here. That is
     what made the mobile homepage so tall. The overlay composition now lives
     in oddbrew.css under "MOBILE HOMEPAGE". Nothing replaces this block. */
}

@media screen and (max-width: 749px) {
  .header__inline-menu .header__menu-item { font-size: 12px !important; padding: 5px 8px !important; }
}

/* ---------- logo: kill the ratio box ----------
   .ratio holds height open with a padding-bottom percentage, so the link stayed
   92px tall around a 49px image and overflowed the bar top and bottom. */

.header__heading-link.ratio::before,
.header__heading-link::before {
  display: none !important;
  padding-bottom: 0 !important;
  content: none !important;
}

.header__heading-link,
.header__heading-link.media,
.header__heading-link.ratio {
  height: auto !important;
  min-height: 0 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

.header__heading-link img,
.header__heading-logo {
  position: static !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  object-fit: contain;
}

/* centre it in the bar on every breakpoint */
.header__heading,
.header .header__heading {
  display: flex !important;
  align-items: center;
  justify-content: center;
  margin: 0 !important;
}

/* ---------- mobile nav ----------
   Shrine hides the inline menu below 990px and swaps in a hamburger drawer,
   which this header no longer renders — so the phone had no navigation at all.
   Two links fit fine, so show them. Higher specificity than Shrine's rule. */

@media screen and (max-width: 989px) {
  .header .header__inline-menu,
  .header__inline-menu.header__inline-menu {
    display: flex !important;
    align-items: center;
    flex: 0 1 auto;
    width: auto !important;
  }
  .header .header__inline-menu > .list-menu,
  .header .header__inline-menu .list-menu--inline {
    display: flex !important;
    flex-wrap: nowrap;
    gap: 2px;
    width: auto !important;
    padding: 0;
    margin: 0;
  }
  .header .header__inline-menu .header__menu-item {
    white-space: nowrap;
    font-size: 12px !important;
    padding: 5px 8px !important;
  }
  /* keep the row balanced: links left, logo centre, cart right */
  .header { gap: 6px; }
  .header__heading { flex: 0 0 auto; }
  .header__icons { flex: 0 0 auto; }
}

@media screen and (max-width: 420px) {
  .header .header__inline-menu .header__menu-item { font-size: 11px !important; padding: 4px 6px !important; }
}

/* ---------- mobile header layout ----------
   Links + logo + cart total 359px of a 375px screen, so a centred logo would be
   squeezed against its neighbours. Use the conventional phone layout instead:
   logo left, links beside it, cart right. Desktop keeps the centred logo. */

@media screen and (max-width: 749px) {
  .header {
    display: flex !important;
    align-items: center;
    justify-content: flex-start !important;
    gap: 8px;
    padding-inline: 14px !important;
  }
  .header__heading {
    order: 1;
    flex: 0 0 auto;
    margin-right: 2px !important;
  }
  .header .header__inline-menu {
    order: 2;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
  }
  .header .header__inline-menu .list-menu--inline { gap: 0; }
  .header__icons {
    order: 3;
    flex: 0 0 auto;
    margin-left: auto !important;
  }
  /* the cat mascot has no room on a phone */
  .header__icons .ob-spot { display: none !important; }
}

/* This forced the logo back into the flow because the inline nav links shared
   the row and the two collided. The links live in the drawer now, so the row
   is hamburger | logo | cart and centring is correct again. Superseded by the
   compact-header block further down. */

/* ---------- mobile header: make the three parts actually fit ----------
   logo 54 + links 197 + cart 106 came to 370px of a 375px screen, so the row
   wrapped and the links ran under the cart. Dropping the word "CART" frees
   ~50px and lets everything sit on one line with room to spare. */

@media screen and (max-width: 749px) {
  .header {
    flex-wrap: nowrap !important;
    min-height: 0 !important;
  }
  .header__icons {
    position: static !important;
    flex: 0 0 auto !important;
    gap: 4px;
  }
  /* icon + count only */
  .header__icons a[href*="/cart"] {
    padding: 7px 9px !important;
    font-size: 0 !important;          /* hides the label text node */
    gap: 4px;
  }
  .header__icons a[href*="/cart"] .icon,
  .header__icons a[href*="/cart"] svg { width: 20px; height: 20px; }
  .header__icons a[href*="/cart"] .cart-count-bubble { font-size: 11px !important; }

  .header .header__inline-menu {
    flex: 0 1 auto !important;
    min-width: 0;
    overflow: hidden;
  }
  .header .header__inline-menu .list-menu--inline { flex-wrap: nowrap !important; }
  .header .header__inline-menu .header__menu-item {
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* ---------- mobile header: two rows ----------
   Logo + links + cart need ~370px of a 375px screen, so any single-row layout
   collides. Give the links their own row instead of shaving pixels: row one is
   logo and cart, row two is navigation. Nothing overlaps at any width. */

@media screen and (max-width: 749px) {
  .header {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center;
    row-gap: 0;
    column-gap: 8px;
    padding: 6px 14px 4px !important;
  }

  /* The homepage wraps the logo in <h1 class="header__heading">; every other
     template puts .header__heading-link straight inside .header, where the
     desktop rule centres it absolutely on the header's midline. On a two-row
     mobile header that midline falls between the rows, so the logo landed on
     top of the nav links. Put it back in the flow for both markups. */
  /* one row: menu on the left, logo centred, cart on the right. The inline
     links moved into Shrine's drawer, which was already in the markup with a
     hamburger that had simply never been shown. */
  .header { position: relative; }
  .header header-drawer { order: 1 !important; flex: 0 0 auto !important; display: block !important; }
  .header .header__icon--menu { display: flex !important; }
  .header .header__inline-menu { display: none !important; }

  /* Absolute centring is safe again now the header is one row — it was only
     taken out because on a two-row header the midline fell between the rows
     and the logo landed on the nav links. */
  .header__heading,
  .header > .header__heading-link,
  .ob-landing .header > .header__heading-link {
    order: 2 !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    z-index: 1;
  }

  .header__icons {
    order: 3 !important;
    flex: 0 0 auto !important;
    margin-left: auto !important;
  }
  /* the label can come back — there is room again on its own row */
  .header__icons a[href*="/cart"] { font-size: 12px !important; padding: 7px 12px !important; }

  .header .header__inline-menu {
    order: 3 !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    overflow: visible;
    padding-top: 2px;
  }
  .header .header__inline-menu .list-menu--inline {
    justify-content: flex-start;
    gap: 4px;
    flex-wrap: nowrap !important;
  }
  .header .header__inline-menu .header__menu-item { font-size: 12px !important; padding: 5px 9px !important; }
}

/* ---------- cart count: the number itself ----------
   The bubble was black with white text, but the inner <span aria-hidden> that
   actually holds the digit was being coloured by the header type rule, so the
   number was black on black. Target the span directly. */

.header__icons .cart-count-bubble,
.header__icons .cart-count-bubble span,
.header__icons .cart-count-bubble span[aria-hidden="true"],
#cart-icon-bubble .cart-count-bubble span {
  color: #fff !important;
}

/* ---------- breathing room under the ticker ---------- */
.header-wrapper { margin-top: 10px !important; }

@media screen and (max-width: 749px) {
  .header-wrapper { margin-top: 8px !important; }
}



/* ==================================================================
   NAVIGATION — one interaction model, defined once
   Several generations of hover treatments had stacked up here: two
   grey background washes, a black pill on :active/:focus and three
   competing focus rings. Together they drew a button inside a button.
   All of it is gone. What remains:

     active page   the black pill, unchanged, and it does not react
     inactive      black text on nothing
     hover         a 2px underline opening from the centre outward
     press         scale(.98), 100ms — no colour, no shift
     keyboard      a 2px ring, offset 3px

   No background, no border, no shadow and no positional movement on
   any inactive link, in any state.
   ================================================================== */

/* the reset deliberately skips the current page — it is the one link that
   keeps a background, and a blanket transparent rule here outranks the pill */
.header__inline-menu .list-menu--inline > li > .header__menu-item {
  border: 0 !important;
  box-shadow: none !important;
  text-decoration: none !important;
  transform: none;
  transition: transform .1s ease !important;
}
.header__inline-menu .list-menu--inline > li > .header__menu-item:not([aria-current]):not(.header__active-menu-item) {
  background: none !important;
  background-color: transparent !important;
}

/* the underline hangs off the text itself, not the padding box, so it
   stays correct if the link's spacing is ever retuned */
.header__inline-menu .list-menu--inline > li > .header__menu-item > span {
  position: relative;
  display: inline-block;
}
.header__inline-menu .list-menu--inline > li > .header__menu-item:not([aria-current]):not(.header__active-menu-item) > span::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .22s cubic-bezier(.2, .7, .2, 1);
  pointer-events: none;
}

/* touch devices have no hover — only a real pointer opens the line */
@media (hover: hover) and (pointer: fine) {
  .header__inline-menu .list-menu--inline > li > .header__menu-item:not([aria-current]):not(.header__active-menu-item):hover > span::after {
    transform: scaleX(1);
  }
}
.header__inline-menu .list-menu--inline > li > .header__menu-item:not([aria-current]):not(.header__active-menu-item):focus-visible > span::after {
  transform: scaleX(1);
}

/* hover changes nothing except that line */
.header__inline-menu .header__menu-item:not([aria-current]):not(.header__active-menu-item),
.header__inline-menu .header__menu-item:not([aria-current]):not(.header__active-menu-item):hover,
.header__inline-menu .header__menu-item:not([aria-current]):not(.header__active-menu-item):hover span,
.header__inline-menu .header__menu-item:not([aria-current]):not(.header__active-menu-item):focus,
.header__inline-menu .header__menu-item:not([aria-current]):not(.header__active-menu-item):active {
  background: none !important;
  background-color: transparent !important;
  color: #000 !important;
  box-shadow: none !important;
  text-decoration: none !important;
}

/* the current page keeps its pill and holds still. Selectors carry the full
   > li > chain so they outrank the reset above. */
.header__inline-menu .list-menu--inline > li > .header__menu-item[aria-current],
.header__inline-menu .list-menu--inline > li > .header__menu-item.header__active-menu-item,
.header__inline-menu .list-menu--inline > li > .header__menu-item[aria-current]:hover,
.header__inline-menu .list-menu--inline > li > .header__menu-item.header__active-menu-item:hover,
.header__inline-menu .list-menu--inline > li > .header__menu-item[aria-current]:focus,
.header__inline-menu .list-menu--inline > li > .header__menu-item.header__active-menu-item:focus {
  background-color: #000 !important;
  color: #fff !important;
  border-radius: 6px !important;
  opacity: 1 !important;
  box-shadow: none !important;
}
.header__inline-menu .header__menu-item[aria-current] span,
.header__inline-menu .header__menu-item.header__active-menu-item span,
.header__inline-menu .header__menu-item[aria-current]:hover span,
.header__inline-menu .header__menu-item.header__active-menu-item:hover span {
  color: #fff !important;
}

/* press — tactile, and the only transform in the whole nav */
.header__inline-menu .header__menu-item:active {
  transform: scale(.98) !important;
  transition: transform .1s ease !important;
}

/* keyboard: a ring, and only for keyboard */
.header__inline-menu .header__menu-item:focus {
  outline: none;
  box-shadow: none;
}
.header__inline-menu .header__menu-item:focus-visible {
  outline: 2px solid #000 !important;
  outline-offset: 3px !important;
  border-radius: 6px !important;
  box-shadow: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .header__inline-menu .list-menu--inline > li > .header__menu-item,
  .header__inline-menu .list-menu--inline > li > .header__menu-item > span::after {
    transition: none !important;
  }
  .header__inline-menu .header__menu-item:active { transform: none !important; }
}

/* ---------- mobile tap targets on the cart ----------
   This page is on the checkout path and does not load oddbrew.css, so the
   stepper sizing has to live here. 36px was below the 44px touch minimum. */
@media screen and (max-width: 749px) {
  .quantity__button,
  cart-items .quantity__button,
  .cart-item .quantity__button {
    min-height: 44px;
    min-width: 44px;
  }
  .quantity { min-height: 44px; }
}

/* ==================================================================
   CART DRAWER — breathing room
   Shrine ships the drawer's header, body and footer at padding 0, so
   the title, the close button, the line prices, the subtotal and the
   checkout button all ran hard against the panel edge and under the
   scrollbar. One inset, applied to the three regions, so everything
   inside lines up on the same margin.
   ================================================================== */

.cart-drawer { --ob-drawer-pad: 20px; }

.cart-drawer .drawer__header,
.cart-drawer .cart-drawer__body,
.cart-drawer .drawer__footer {
  padding-inline: var(--ob-drawer-pad) !important;
}

/* the timer already carries its own inset — don't double it up */
.cart-drawer .cart-drawer__body .cart-timer {
  margin-inline: calc(var(--ob-drawer-pad) * -1);
  padding-inline: var(--ob-drawer-pad) !important;
}

/* the scrolling region needs the gap on the inside of the scrollbar */
.cart-drawer .cart-drawer__body { scrollbar-gutter: stable; }

/* line items sit on the same margin as everything else */
.cart-drawer .cart-item,
.cart-drawer .cart-items,
.cart-drawer cart-drawer-items { padding-inline: 0 !important; }

.cart-drawer .drawer__header { padding-block: 16px 12px !important; }
.cart-drawer .drawer__footer { padding-block: 14px 18px !important; }

/* Shrine pins the close button with right:-10px, so it hung past the panel
   edge whatever padding the header carried. Bring it inside the inset. */
.cart-drawer .drawer__close {
  right: var(--ob-drawer-pad) !important;
  margin-right: 0 !important;
}

@media screen and (max-width: 749px) {
  .cart-drawer { --ob-drawer-pad: 16px; }
}