/** Shopify CDN: Minification failed

Line 1234:0 Unexpected "}"

**/
/* ============================================================
   Mint Cards — site-wide custom polish
   - dot separators in top nav
   - softer header, minimal vibe
   ============================================================ */

/* Hide announcement-bar underline/separator for cleaner feel */
.utility-bar {
  border-bottom: 0 !important;
}

/* Header: minimal padding, thinner line */
.header-wrapper {
  border-bottom: 1px solid rgba(var(--color-foreground), 0.08);
}

.header__heading-logo {
  transition: opacity 0.2s ease;
}
.header__heading-logo:hover {
  opacity: 0.75;
}

/* ----- Dot-separated top nav (desktop dropdown menu) ----- */
.header__inline-menu .list-menu--inline {
  gap: 0;
  align-items: center;
}

.header__inline-menu .list-menu--inline > li {
  position: relative;
  padding: 0 1.4rem;
}

.header__inline-menu .list-menu--inline > li + li::before {
  content: "·";
  position: absolute;
  left: -0.3rem;
  top: 50%;
  transform: translateY(-55%);
  font-size: 1.8rem;
  opacity: 0.5;
  pointer-events: none;
}

.header__inline-menu .list-menu--inline > li a,
.header__inline-menu .list-menu--inline > li summary {
  font-size: 1.3rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  padding: 0.8rem 0;
}

.header__inline-menu .list-menu--inline > li a:hover,
.header__inline-menu .list-menu--inline > li summary:hover {
  opacity: 0.65;
  text-decoration: none;
}

/* Kill the underline hover on top-level nav for cleaner feel */
.header__menu-item:hover span,
.header__menu-item span {
  text-decoration: none !important;
}

/* ----- Announcement bar: minimal typography ----- */
.announcement-bar__message {
  font-size: 1.1rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  font-weight: 400;
}

/* ----- Footer: tighter, quieter ----- */
.footer {
  padding-top: 4rem;
  padding-bottom: 2rem;
}
.footer__content-top {
  padding-bottom: 2rem;
}
.footer__copyright {
  font-size: 1.1rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.6;
}

/* ----- Product cards: cleaner, no borders ----- */
.card--standard:not(.card--card) {
  background: transparent;
}
.card--card {
  box-shadow: none;
}

/* ============================================================
   Custom Trending card (.t-card) — clean rewrite, no Horizon conflict.
   Premium navy foil-pack aesthetic. Big readable type.
   ============================================================ */

.t-card {
  --rx: 0deg;
  --ry: 0deg;
  --mx: 50%;
  --my: 50%;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background: linear-gradient(155deg, #1a2a5e 0%, #0c1638 60%, #142766 100%);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 0.4rem 1.2rem rgba(0, 0, 0, 0.25);
  text-decoration: none;
  color: #fff;
  position: relative;
  transform: perspective(1200px) rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.3s ease;
  isolation: isolate;
}
.t-card__media-link,
.t-card__title-link {
  display: block;
  text-decoration: none;
  color: inherit;
}
.t-card__title-link:hover .t-card__title { opacity: 0.85; }
.t-card:hover {
  transform: perspective(1200px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(-0.4rem);
  box-shadow: 0 0.8rem 2rem rgba(0, 0, 0, 0.35), 0 0 50px -20px rgba(124, 77, 255, 0.4);
  text-decoration: none;
}

/* Animated holographic border — hover only */
.t-card__holo {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(
    from var(--angle, 0deg),
    #7c4dff,
    #4cc9f0,
    #06d6a0,
    #ffd166,
    #b5179e,
    #7c4dff
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  pointer-events: none;
  z-index: 5;
  transition: opacity 0.3s ease;
}
.t-card:hover .t-card__holo {
  opacity: 0.85;
  animation: t-card-rotate 6s linear infinite;
}
@keyframes t-card-rotate {
  to { --angle: 360deg; }
}

/* Cursor-tracking shine */
.t-card__shine {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 4;
  background: radial-gradient(circle at var(--mx) var(--my),
    rgba(255, 255, 255, 0.18),
    rgba(255, 255, 255, 0) 50%);
  opacity: 0;
  transition: opacity 0.25s ease;
  mix-blend-mode: overlay;
}
.t-card:hover .t-card__shine { opacity: 1; }

/* Subtle red corner glow at rest (keep some warmth) */
.t-card::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 60% 40% at 100% 0%, rgba(185, 28, 28, 0.18) 0%, transparent 60%);
  z-index: 1;
}

/* Quantity selector — pinned to bottom of card body */
.t-card__qty {
  position: relative;
  z-index: 6;
  margin-top: auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  box-sizing: border-box;
  max-width: 100%;
  width: 100%;
}
.t-card__qty-btn {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 2rem;
  font-weight: 700;
  padding: 0.6rem 0;
  cursor: pointer;
  line-height: 1;
  transition: background 0.15s ease;
}
.t-card__qty-btn:hover { background: rgba(255, 255, 255, 0.1); }
.t-card__qty-btn:active { background: rgba(255, 255, 255, 0.18); }
.t-card__qty-input {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 1.6rem;
  font-weight: 700;
  text-align: center;
  width: 100%;
  padding: 0.6rem 0;
  -moz-appearance: textfield;
  appearance: textfield;
}
.t-card__qty-input::-webkit-outer-spin-button,
.t-card__qty-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.t-card__qty-input:focus {
  outline: none;
  background: rgba(255, 255, 255, 0.06);
}

/* Add-to-cart button — always visible, full-width below qty */
.t-card__quick-add {
  position: relative;
  z-index: 6;
  margin-top: 0.8rem;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1.3rem 1.4rem;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: #ffffff;
  background: #10b981;
  border: none;
  border-radius: 14px;
  cursor: pointer;
  box-shadow: 0 0.3rem 0.8rem rgba(16, 185, 129, 0.4);
  transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.t-card__quick-add:hover {
  transform: translateY(-1px);
  background: #0ea674;
  box-shadow: 0 0.6rem 1.4rem rgba(16, 185, 129, 0.55);
}
.t-card__quick-add svg { display: block; }
.t-card__quick-add[data-loading] {
  pointer-events: none;
  opacity: 0.7;
}
.t-card__quick-add[data-added] {
  background: linear-gradient(180deg, #34d399 0%, #10b981 100%);
  color: #fff;
}
.t-card__quick-add--disabled,
.t-card__quick-add:disabled {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.5);
  box-shadow: none;
  cursor: not-allowed;
}
.t-card__quick-add--disabled:hover,
.t-card__quick-add:disabled:hover {
  transform: none;
  box-shadow: none;
  background: rgba(255, 255, 255, 0.08);
}

@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

/* Image window — flex-centered. Zero padding so the product fills the
   window edge-to-edge (the source images already have their own breathing
   room; no need to add more). */
.t-card__media {
  position: relative;
  margin: 1rem 1rem 0 1rem;
  background: linear-gradient(180deg, #f8fafc 0%, #e6eaf2 100%);
  border-radius: 12px;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-sizing: border-box;
}
.t-card__img,
.t-card__placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  /* Slight zoom to crop out source-image white border + emphasize the product */
  transform: scale(1.05);
}

/* Badge */
.t-card__badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 3;
  background: linear-gradient(180deg, #d72727 0%, #b91c1c 100%);
  color: #ffffff;
  font-size: 1.3rem;
  font-weight: 800;
  padding: 0.6rem 1.2rem;
  letter-spacing: 0.1em;
  border-radius: 999px;
  text-transform: uppercase;
  box-shadow: 0 0.4rem 1rem rgba(185, 28, 28, 0.45);
  line-height: 1;
}
.t-card__badge--soldout {
  background: linear-gradient(180deg, #555 0%, #333 100%);
  box-shadow: 0 0.4rem 1rem rgba(0, 0, 0, 0.5);
}

/* Text body — flex column so price sticks to the bottom of every card,
   keeping prices aligned across cards even with different title lengths. */
.t-card__body {
  padding: 1.4rem 1.6rem 1.8rem;
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  box-sizing: border-box;
}
.t-card__price {
  margin-top: 1rem;
  margin-bottom: 0;
}
.t-card__title {
  font-size: 1.85rem;
  line-height: 1.25;
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 1rem 0;
  letter-spacing: -0.01em;
  text-shadow: 0 0.1rem 0.4rem rgba(0, 0, 0, 0.45);
  word-break: normal;
  overflow-wrap: break-word;
  /* Lock to a uniform 2-line block so price/qty/button align across cards */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(1.85rem * 1.25 * 2);
}
.t-card__price {
  font-size: 2.8rem;
  font-weight: 900;
  color: #ffffff;
  margin: 0;
  letter-spacing: -0.015em;
  text-shadow: 0 0.1rem 0.4rem rgba(0, 0, 0, 0.45);
}

/* Site-wide header — add top breathing room so logo doesn't sit flush against the browser */
body .section-header .header-wrapper {
  padding-top: 0.1rem;
}
body .section-header .header {
  margin-top: 0;
}
@media (max-width: 749px) {
  body .section-header .header-wrapper {
    padding-top: 0;
  }
}

/* Collection pages banner — add top spacing so the title doesn't crowd the header */
.collection-hero {
  padding-top: 6rem;
}
@media (max-width: 749px) {
  .collection-hero {
    padding-top: 4rem;
  }
}

/* Section wrappers that contain our cards: drop the rectangular backdrop
   so cards float on the page gradient with their own rounded corners. */
.shopify-section:has(.t-card),
.shopify-section:has(.t-card) > *,
.shopify-section:has(.t-card) > * > *,
.shopify-section:has(.t-card) > * > * > *,
.shopify-section:has(.t-card) .gradient,
.shopify-section:has(.t-card) [class*="color-scheme-"],
.shopify-section:has(.t-card) .collection,
.shopify-section:has(.t-card) slider-component,
.gradient:has(.t-card),
.gradient:has(.product-card-wrapper),
.color-scheme-1:has(.t-card),
.color-scheme-2:has(.t-card),
.color-scheme-3:has(.t-card),
.color-scheme-4:has(.t-card),
.color-scheme-5:has(.t-card) {
  background: transparent !important;
  background-image: none !important;
  background-color: transparent !important;
  background-attachment: initial !important;
  box-shadow: none !important;
}

/* Keep .t-card itself opaque — it's a real card, not a wrapper */
.t-card {
  background: linear-gradient(155deg, #1a2a5e 0%, #0c1638 60%, #142766 100%) !important;
}

/* ============================================================
   Cart drawer — Continue Shopping + visible items on dark theme
   ============================================================ */
.mint-cart-ctas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.8rem;
}
.mint-cart-continue {
  background: transparent !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  padding: 1.2rem 1rem !important;
  font-weight: 700 !important;
  border-radius: 12px !important;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.mint-cart-continue:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.6) !important;
}
@media (max-width: 480px) {
  .mint-cart-ctas { grid-template-columns: 1fr; }
}

/* Cart drawer: if cart has any items, always show header + items table,
   defeating Horizon's stale .is-empty class that lingers after dynamic adds. */
cart-drawer.is-empty:has(.cart-items) .drawer__header,
cart-drawer.is-empty:has(tbody tr) .drawer__header {
  display: flex !important;
}
cart-drawer.is-empty:has(.cart-items) .drawer__inner,
cart-drawer.is-empty:has(tbody tr) .drawer__inner {
  display: flex !important;
  flex-direction: column !important;
  padding: revert !important;
  align-items: stretch !important;
}
cart-drawer-items.is-empty:has(tbody tr) {
  display: block;
}

/* Force visible text inside cart drawer items on dark background */
cart-drawer .drawer__inner {
  color: #fff;
}
cart-drawer .cart-item__name,
cart-drawer .product-option,
cart-drawer .cart-item__details,
cart-drawer .cart-item__price-wrapper,
cart-drawer .price,
cart-drawer .totals,
cart-drawer .totals__total,
cart-drawer .totals__total-value,
cart-drawer .drawer__heading,
cart-drawer th,
cart-drawer .tax-note {
  color: #fff !important;
}
cart-drawer .cart-item__name:hover { opacity: 0.85; }
cart-drawer .quantity__input { color: #fff !important; }
cart-drawer .quantity__button svg,
cart-drawer .cart-remove-button svg { color: #fff; fill: currentColor; }

/* Grid + slider items with our cards: stretch all items to equal height
   so qty + Add to cart buttons line up across the row regardless of title length. */
.grid__item:has(.t-card),
.slider__slide:has(.t-card) {
  display: flex;
  height: auto;
  align-self: stretch;
}
.grid__item:has(.t-card) > .t-card,
.slider__slide:has(.t-card) > .t-card {
  width: 100%;
  height: auto;
  flex: 1;
}
.shopify-section:has(.t-card) > .gradient,
.shopify-section:has(.t-card) > div.gradient,
[class*="color-scheme-"]:has(> .collection .t-card) {
  background: transparent !important;
  background-image: none !important;
}

/* Mobile sizing */
@media screen and (max-width: 749px) {
  .t-card__title {
    font-size: 1.5rem;
    line-height: 1.25;
    min-height: calc(1.5rem * 1.25 * 2);
  }
  .t-card__price { font-size: 2rem; }
  .t-card__media { margin: 0.8rem 0.8rem 0; }
  .t-card__body { padding: 1.2rem 1.2rem 1.4rem; }

  /* Bigger tap targets on mobile (44px min) */
  .t-card__qty {
    margin-top: 1.2rem;
    border-radius: 999px;
  }
  .t-card__qty-btn {
    font-size: 2.2rem;
    padding: 1rem 0;
    min-height: 4.4rem;
  }
  .t-card__qty-input {
    font-size: 1.6rem;
    padding: 1rem 0;
  }
  .t-card__quick-add {
    margin-top: 0.8rem;
    font-size: 1.4rem;
    padding: 1.3rem 1rem;
    min-height: 4.6rem;
    border-radius: 12px;
  }
}

/* Extra small viewports — single column collection grids */
@media screen and (max-width: 480px) {
  .t-card__title { font-size: 1.6rem; }
  .t-card__price { font-size: 2.2rem; }
  .t-card__quick-add { font-size: 1.5rem; }
}

/* ============================================================
   Quick Add modal — variant selector
   ============================================================ */
.qa-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(4, 8, 30, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.qa-backdrop[data-open] {
  opacity: 1;
  pointer-events: auto;
}

.qa-modal {
  position: fixed;
  z-index: 9999;
  top: 50%;
  left: 50%;
  width: min(92vw, 520px);
  max-height: 86vh;
  overflow-y: auto;
  transform: translate(-50%, -45%) scale(0.96);
  background: linear-gradient(155deg, #1a2a5e 0%, #0c1638 60%, #142766 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 22px;
  color: #fff;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.qa-modal[data-open] {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}

.qa-modal__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 999px;
  border: none;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
}
.qa-modal__close:hover { background: rgba(255, 255, 255, 0.2); }

.qa-modal__body {
  padding: 2.4rem 2.4rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}

.qa-modal__header {
  display: flex;
  gap: 1.4rem;
  align-items: center;
}

.qa-modal__image {
  width: 9rem;
  height: 9rem;
  border-radius: 12px;
  background: linear-gradient(180deg, #f8fafc 0%, #e6eaf2 100%);
  flex-shrink: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.qa-modal__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 8%;
}

.qa-modal__title {
  font-size: 1.7rem;
  font-weight: 800;
  line-height: 1.2;
  margin: 0 0 0.4rem;
  letter-spacing: -0.01em;
}
.qa-modal__price {
  font-size: 2.2rem;
  font-weight: 900;
  margin: 0;
  letter-spacing: -0.01em;
}

.qa-modal__option {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.qa-modal__option-label {
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  opacity: 0.75;
}
.qa-modal__option-values {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.qa-modal__value {
  padding: 0.8rem 1.4rem;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
  font-size: 1.3rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
.qa-modal__value:hover {
  border-color: rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.1);
}
.qa-modal__value[data-selected] {
  background: #fff;
  color: #0c1638;
  border-color: #fff;
}
.qa-modal__value[data-unavailable] {
  opacity: 0.35;
  cursor: not-allowed;
  text-decoration: line-through;
}

.qa-modal__submit {
  margin-top: 0.8rem;
  width: 100%;
  padding: 1.4rem;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #0c1638;
  background: linear-gradient(180deg, #ffffff 0%, #e6eaf2 100%);
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: transform 0.15s ease, opacity 0.2s ease;
}
.qa-modal__submit:hover { transform: translateY(-1px); }
.qa-modal__submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}
.qa-modal__submit[data-loading]::after {
  content: '...';
}
.qa-modal__submit[data-success] {
  background: linear-gradient(180deg, #34d399 0%, #10b981 100%);
  color: #fff;
}

.qa-modal__error {
  color: #fca5a5;
  font-size: 1.3rem;
  margin: 0;
  display: none;
}
.qa-modal__error[data-visible] { display: block; }

/* ============================================================
   Apply the same navy foil-pack aesthetic to ALL Shopify product cards
   site-wide (related products, /collections/all, search results, etc.)
   Targets .product-card-wrapper, the standard Horizon product card class.
   ============================================================ */

.product-card-wrapper {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  background: linear-gradient(155deg, #1a2a5e 0%, #0c1638 60%, #142766 100%) !important;
  border: 0 !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  box-shadow: 0 1.2rem 3rem rgba(0, 0, 0, 0.45) !important;
  outline: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  text-decoration: none !important;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.25s ease;
}
.product-card-wrapper:hover {
  transform: translateY(-0.3rem);
  box-shadow: 0 1.8rem 4rem rgba(0, 0, 0, 0.55) !important;
}

/* Holographic red corner glow */
.product-card-wrapper::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 60% 40% at 100% 0%, rgba(185, 28, 28, 0.22) 0%, transparent 60%);
  z-index: 1;
}

/* Strip inner containers (.card, .card--standard, .card--media etc) */
.product-card-wrapper .card,
.product-card-wrapper .card--standard,
.product-card-wrapper .card--media,
.product-card-wrapper .card--card,
.product-card-wrapper .card--card.gradient {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border: 0 !important;
  height: auto !important;
  min-height: 0 !important;
}

/* Image window — light bg, inset from card edges, FORCED SQUARE to match .t-card */
.product-card-wrapper .card__inner,
.product-card-wrapper .card__inner.gradient {
  background: linear-gradient(180deg, #f8fafc 0%, #e6eaf2 100%) !important;
  border: 0 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  margin: 1rem 1rem 0 1rem !important;
  position: relative;
  z-index: 2;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  aspect-ratio: 1 / 1 !important;
  --ratio-percent: 100% !important;
  padding-bottom: 0 !important;
  height: auto !important;
}
.product-card-wrapper .card__inner.ratio::before,
.product-card-wrapper .card__inner::before {
  display: none !important;
}
/* Also flatten the outer .card's ratio so it doesn't push the card taller */
.product-card-wrapper .card.ratio,
.product-card-wrapper .card {
  --ratio-percent: 100% !important;
  padding-bottom: 0 !important;
  height: auto !important;
}
.product-card-wrapper .card.ratio::before {
  display: none !important;
}
.product-card-wrapper .card__media {
  margin: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}
.product-card-wrapper .card__media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  padding: 0 !important;
  transform: scale(1.05);
}

/* Hide the duplicate title/badge overlay inside card__inner */
.product-card-wrapper .card__inner > .card__content,
.product-card-wrapper .card__inner > .card__badge {
  display: none !important;
}

/* Text body — clean dark card, big white type */
.product-card-wrapper > .card .card__content,
.product-card-wrapper .card > .card__content,
.product-card-wrapper > .card__content {
  background: transparent !important;
  padding: 1.4rem 1.6rem 1.8rem !important;
  position: relative;
  z-index: 2;
}
.product-card-wrapper .card__information {
  padding: 0 !important;
  gap: 0.8rem !important;
}

/* Title — large, white, full text shown (no truncation) */
.product-card-wrapper .card__heading,
.product-card-wrapper .card__heading.h5 {
  font-size: 1.85rem !important;
  line-height: 1.25 !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  margin: 0 0 1rem 0 !important;
  letter-spacing: -0.01em !important;
  text-shadow: 0 0.1rem 0.4rem rgba(0, 0, 0, 0.45) !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
  display: block !important;
  -webkit-line-clamp: unset !important;
  overflow: visible !important;
  text-overflow: clip !important;
}
.product-card-wrapper .card__heading a,
.product-card-wrapper .card__heading a:link,
.product-card-wrapper .card__heading a:visited {
  color: #ffffff !important;
  text-decoration: none !important;
}

/* Price — huge, white, bold */
.product-card-wrapper .price,
.product-card-wrapper .price-item,
.product-card-wrapper .price__regular .price-item,
.product-card-wrapper .price__sale .price-item,
.product-card-wrapper .price-item--last,
.product-card-wrapper .price-item--regular {
  font-size: 2.6rem !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  letter-spacing: -0.015em !important;
  text-shadow: 0 0.1rem 0.4rem rgba(0, 0, 0, 0.45) !important;
}
.product-card-wrapper .price {
  margin-top: 0.4rem !important;
}

/* Badge — red pill, larger, sits at top-left of image */
.product-card-wrapper .card__badge {
  top: 1.6rem !important;
  left: 1.6rem !important;
  z-index: 3;
}
.product-card-wrapper .badge--low-stock {
  background: linear-gradient(180deg, #d72727 0%, #b91c1c 100%) !important;
  color: #ffffff !important;
  font-size: 1.3rem !important;
  font-weight: 800 !important;
  padding: 0.6rem 1.2rem !important;
  letter-spacing: 0.1em !important;
  border-radius: 999px !important;
  border: 0 !important;
  text-transform: uppercase !important;
  box-shadow: 0 0.4rem 1rem rgba(185, 28, 28, 0.45) !important;
  line-height: 1 !important;
}

/* Mobile tweaks */
@media screen and (max-width: 749px) {
  .product-card-wrapper .card__heading,
  .product-card-wrapper .card__heading.h5 {
    font-size: 1.7rem !important;
  }
  .product-card-wrapper .price,
  .product-card-wrapper .price-item {
    font-size: 2.4rem !important;
  }
  .product-card-wrapper > .card .card__content,
  .product-card-wrapper > .card__content {
    padding: 1.2rem 1.4rem 1.6rem !important;
  }
  .product-card-wrapper .card__inner {
    margin: 0.8rem 0.8rem 0 0.8rem !important;
  }
}

/* Slides STRETCH to match the tallest one — all cards same height.
   Combined with .t-card flexing the price to the bottom, prices align. */
.collection .grid,
.collection .product-grid,
.collection .slider,
.template-search .grid,
.template-search .product-grid {
  align-items: stretch !important;
}
.collection .slider__slide,
.collection .grid__item,
.template-search .grid__item {
  align-self: stretch !important;
  display: flex !important;
}
.collection .slider__slide > a,
.collection .slider__slide > .card-wrapper,
.collection .grid__item > a,
.collection .grid__item > .card-wrapper,
.template-search .grid__item > a.t-card,
.template-search .grid__item > .card-wrapper {
  width: 100%;
}

/* CARD WRAPPER: premium navy foil-pack tile. No outline/border, just a
   deep gradient and shadow. */
.collection .card-wrapper {
  position: relative !important;
  background: linear-gradient(155deg, #1a2a5e 0%, #0c1638 60%, #142766 100%) !important;
  border: 0 !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  box-shadow: 0 1.2rem 3rem rgba(0, 0, 0, 0.45) !important;
  outline: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Subtle holographic shine accent on card edge (top-right corner glow) */
.collection .card-wrapper::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse 60% 40% at 100% 0%,
    rgba(185, 28, 28, 0.18) 0%,
    transparent 60%
  );
  z-index: 1;
}

/* Strip inner containers of their own backgrounds — the wrapper owns the look */
.collection .card,
.collection .card--standard,
.collection .card--media,
.collection .card--card,
.collection .card--card.gradient,
.collection .card__inner,
.collection .card__inner.gradient,
.collection .grid__item,
.collection .slider__slide {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* Image window: white-ish surface, sized like a card display window */
.collection .card__inner {
  background: linear-gradient(180deg, #f8fafc 0%, #e8ecf3 100%) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  margin: 1rem 1rem 0 1rem !important;
  position: relative;
  z-index: 2;
}
.collection .card__media {
  margin: 0 !important;
  width: 100% !important;
}
.collection .card__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 1.4rem;
}

/* Hide the duplicate title/badge overlay inside card__inner */
.collection .card__inner > .card__content {
  display: none !important;
}
.collection .card__inner > .card__badge {
  display: none !important;
}

/* Text content section: roomy padding, large type, on the navy card */
.collection .card-wrapper > .card__content,
.collection .card > .card__content {
  background: transparent !important;
  padding: 1.4rem 1.6rem 1.8rem !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.8rem !important;
  position: relative;
  z-index: 2;
}
.collection .card__information {
  padding: 0 !important;
  gap: 0.8rem !important;
}

/* Product title: HUGE, white, readable. 2-line clamp. */
.collection .card__heading,
.collection .card__heading.h5 {
  font-size: 2.6rem !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  margin: 0 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  letter-spacing: -0.01em !important;
  text-shadow: 0 0.1rem 0.4rem rgba(0, 0, 0, 0.45);
}
.collection .card__heading a,
.collection .card__heading a:link,
.collection .card__heading a:visited {
  color: #ffffff !important;
  text-decoration: none !important;
}

/* Price: HUGE, white, very bold */
.collection .price {
  font-size: 3rem !important;
  font-weight: 900 !important;
  margin-top: 0.6rem !important;
  color: #ffffff !important;
  letter-spacing: -0.015em !important;
}
.collection .price__regular .price-item,
.collection .price__sale .price-item,
.collection .price-item--last,
.collection .price-item--regular,
.collection .price-item {
  font-size: 3rem !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  text-shadow: 0 0.1rem 0.4rem rgba(0, 0, 0, 0.45);
}

/* Badge: red pill, large, bold — top-left of image window */
.collection .card__badge {
  top: 1.6rem !important;
  left: 1.6rem !important;
  z-index: 3;
}
.collection .badge--low-stock {
  background: linear-gradient(180deg, #d72727 0%, #b91c1c 100%) !important;
  color: #ffffff !important;
  font-size: 1.4rem !important;
  font-weight: 800 !important;
  padding: 0.7rem 1.3rem !important;
  letter-spacing: 0.1em !important;
  border-radius: 999px !important;
  border: 0 !important;
  text-transform: uppercase !important;
  box-shadow: 0 0.4rem 1rem rgba(185, 28, 28, 0.45) !important;
}
  /* Kill any forced height on the card wrapper/grid item */
  .collection .card-wrapper,
  .collection .grid__item {
    height: auto !important;
  }
  .collection .card,
  .collection .card__inner,
  .collection .card--card,
  .collection .card--standard {
    height: auto !important;
    min-height: 0 !important;
  }

  /* HIDE the duplicate title that sits overlaid inside card__inner.
     The visible/readable title is the one OUTSIDE card__inner (.card__heading.h5).
     Also hide the duplicate badge inside card__inner — the second one
     (outside card__inner) is the one we keep visible. */
  .collection .card__inner > .card__content {
    display: none !important;
  }

  /* The visible card__content (outside card__inner) — clean padding */
  .collection .card-wrapper > .card__content,
  .collection .card-wrapper .card-wrapper > .card__content,
  .collection > .card-wrapper .card__content:not(.card__inner > .card__content) {
    padding: 1rem 1.2rem 1.4rem !important;
  }
  .collection .card-wrapper .card__content {
    padding: 1rem 1.2rem 1.4rem !important;
  }
  .collection .card__information {
    padding: 0 !important;
    gap: 0.4rem !important;
  }

  /* Visible product title (h3.card__heading.h5) — readable size, 2-line max */
  .collection .card__heading.h5,
  .collection .card__heading {
    font-size: 1.4rem !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;
    margin: 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .collection .card__heading a {
    text-decoration: none !important;
    color: inherit !important;
  }

  /* Price: bold and prominent */
  .collection .price {
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    margin-top: 0.4rem !important;
  }
  .collection .price__regular .price-item,
  .collection .price__sale .price-item,
  .collection .price-item--last {
    font-size: 1.5rem !important;
    font-weight: 700 !important;
  }

  /* "Only N left" badge: keep visible (it's at top-left of card) */
  .collection .card__badge {
    top: 0.6rem !important;
    left: 0.6rem !important;
  }
  .collection .badge--low-stock {
    font-size: 1rem !important;
    padding: 0.4rem 0.8rem !important;
    letter-spacing: 0.04em !important;
  }

  /* Product image area: square aspect, no extra padding */
  .collection .card__media {
    margin: 0 !important;
    width: 100% !important;
  }
  .collection .card__inner {
    border-radius: 12px !important;
    overflow: hidden !important;
  }

  /* Slider control margins */
  .collection .slider-counter,
  .collection slider-component {
    margin-top: 1rem !important;
  }
}

/* ----- Make the slider arrow buttons (prev/next under the trending cards)
   visible against the dark navy background. Default theme makes them
   semi-transparent dark which disappears against the navy bg. ----- */
.slider-buttons .slider-button,
.slider-button {
  color: rgba(255, 255, 255, 0.92) !important;
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  border-radius: 50% !important;
  width: 3.6rem !important;
  height: 3.6rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background 0.18s ease, color 0.18s ease, opacity 0.18s ease !important;
}
.slider-button:not([disabled]):hover {
  background: rgba(255, 255, 255, 0.22) !important;
  color: #ffffff !important;
}
.slider-button[disabled] {
  opacity: 0.35 !important;
  cursor: not-allowed;
}
.slider-button .icon {
  width: 1.4rem !important;
  height: 1.4rem !important;
  color: currentColor !important;
}
/* "1/7" counter text */
.slider-counter {
  color: #ffffff !important;
  font-weight: 600;
  letter-spacing: 0.05em;
}

/* ----- Buttons: sharper, more premium ----- */
.button,
.shopify-payment-button__button--unbranded {
  border-radius: 0 !important;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 1.2rem;
  padding: 1.3rem 2.6rem;
}

/* ----- Section titles: airier ----- */
.section-header__title,
.title,
.h1,
.h2 {
  letter-spacing: -0.015em;
}

/* ----- Rich text sections: bigger headings, lighter body ----- */
.rich-text__heading {
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ----- Hide cart count bubble border for minimal ----- */
.cart-count-bubble {
  box-shadow: none;
}

/* ----- Header icon pill: even spacing between search, account, cart -----
   Slightly more right padding (1.2rem) than left (0.4rem) because the cart
   SVG has tighter intrinsic margins than the search SVG — visually balancing
   the icons inside the pill. */
.header__icons {
  align-items: center !important;
  gap: 0.4rem;
  padding-left: 0.4rem !important;
  padding-right: 1.2rem !important;
}

/* ----- Hero slideshow prev/next arrow buttons (positioned JUST OUTSIDE
   the image, in the empty space around the stage but close to its edges).
   Vertically centered on the image. ----- */
.fch-slideshow {
  position: relative;
}
/* Stage-wrap: a positioning context that's exactly the size of the stage.
   Arrows are absolutely positioned within this wrapper, so top:50% aligns
   them with the stage's true vertical center (not the slideshow column's). */
.fch-slideshow__stage-wrap {
  position: relative;
  width: min(100%, calc(100dvh - 13rem));
  margin-inline: auto;
}
@media screen and (max-width: 749px) {
  .fch-slideshow__stage-wrap {
    width: min(72vw, 300px);
    max-width: 300px;
    margin: 0 auto;
  }
}
.fch-slideshow__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 4.4rem;
  height: 4.4rem;
  border-radius: 50%;
  background: rgba(15, 31, 74, 0.55);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 5;
  padding: 0;
  transition: background 0.18s ease, opacity 0.18s ease;
  opacity: 0.9;
}
.fch-slideshow__arrow:hover,
.fch-slideshow__arrow:focus-visible {
  background: rgba(15, 31, 74, 0.85);
  opacity: 1;
  outline: 0;
}
.fch-slideshow__arrow svg {
  width: 1.6rem;
  height: 1.6rem;
  display: block;
}
/* Arrows are positioned just outside the stage-wrap (which equals the stage
   width) — `right: calc(100% + gap)` puts them outside the right edge etc. */
.fch-slideshow__arrow--prev {
  right: calc(100% + 0.8rem);
}
.fch-slideshow__arrow--prev svg {
  transform: scaleX(-1);
}
.fch-slideshow__arrow--next {
  left: calc(100% + 0.8rem);
}
@media screen and (max-width: 749px) {
  .fch-slideshow__arrow {
    width: 3.6rem;
    height: 3.6rem;
  }
  .fch-slideshow__arrow--prev { right: calc(100% + 0.6rem); }
  .fch-slideshow__arrow--next { left: calc(100% + 0.6rem); }
}

/* ----- Header fade overlay: soft gradient mask below the header that
   makes scrolling content fade INTO the page background (matching the
   gradient bg) so the header pills blend seamlessly with the page below.
   This is the "soft fog" / "fade-to-bg" iOS-style effect. ----- */
body .section-header,
body .shopify-section-group-header-group {
  background: transparent !important;
  pointer-events: none !important;
  position: fixed !important;
}
body .section-header .header,
body .shopify-section-group-header-group .header {
  pointer-events: auto;
  position: relative;
  z-index: 2;
}
/* The fade-overlay pseudo-element. Spans from above the header (fully opaque
   to cover any content that would otherwise peek above the icon pills) down
   to ~8rem below the header where it fades to transparent. Content scrolling
   under it fades smoothly into the navy page color. */
/* Stacked overlay approach for the header fade:
   - .mc-header-fade        → opaque navy gradient that fades to transparent
   - .mc-header-blur        → backdrop-filter blur with its own gradient mask
   Two separate layers so backdrop-filter isn't disabled by mask-image
   (browsers drop backdrop-filter when the element has CSS masks). */
/* Original fade overlay: pseudo-element on section-header with a soft
   gradient mask from opaque navy at top → transparent at bottom.
   Reduced the bottom extension so the fade ends sooner. */
body .section-header::before,
body .shopify-section-group-header-group::before {
  content: '';
  position: absolute;
  inset: -4rem 0 -3rem 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(20, 39, 102, 1) 0%,
    rgba(20, 39, 102, 1) 55%,
    rgba(20, 39, 102, 0.85) 72%,
    rgba(20, 39, 102, 0.45) 88%,
    rgba(20, 39, 102, 0) 100%
  );
  z-index: 1;
}

/* ----- MINT logo placement -----
   Mobile / tablet: absolute-centered (no hamburger or icons can throw it off-center).
   Desktop (≥ 990px): anchored to the LEFT of the header so it sits opposite
   the nav/icons pill on the right. ----- */
.header {
  position: relative !important;
}
.header__heading,
.header__heading-link {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  margin: 0 !important;
  pointer-events: auto;
  z-index: 5;
}
.header__heading-link img,
.header__heading-link svg {
  display: block;
  margin: 0 auto;
}

@media screen and (min-width: 990px) {
  .header__heading,
  .header__heading-link {
    left: 2rem !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
  }
  .header__heading-link img {
    max-width: 14rem;
    max-height: 6rem;
    height: auto;
  }
}
.header__icons > .header__icon,
.header__icons > header-search-toggle,
.header__icons > header-search-toggle > .header__icon {
  margin: 0 !important;
}
.header__icon,
.header__icon--account,
.header__icon--cart,
.header__icon--summary {
  width: 4rem !important;
  height: 4rem !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
}

/* Cart count bubble — visible red pill on top of the cart icon when items > 0 */
.cart-count-bubble {
  position: absolute !important;
  top: 0.4rem !important;
  right: 0.2rem !important;
  background: #b91c1c !important;
  color: #ffffff !important;
  min-width: 1.8rem !important;
  height: 1.8rem !important;
  padding: 0 0.4rem !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.1rem !important;
  font-weight: 800 !important;
  box-shadow: 0 0.2rem 0.6rem rgba(0, 0, 0, 0.5) !important;
  z-index: 5 !important;
  line-height: 1 !important;
}
.cart-count-bubble:empty {
  display: none !important;
}
.header__icon .svg-wrapper {
  width: 2.2rem !important;
  height: 2.2rem !important;
}

/* ============================================================
   Mobile menu drawer redesign — branded, premium feel
   ============================================================ */

/* Higher specificity to beat .gradient.color-scheme-1 (set transparent in
   floating-cards-hero.css for the WebGL fade — we need a solid black drawer). */
body .menu-drawer,
body .menu-drawer.gradient,
body .menu-drawer.gradient.color-scheme-1,
body .menu-drawer.color-scheme-1 {
  background: #000000 !important;
  background-color: #000000 !important;
  background-image: none !important;
}

/* Cart drawer — same solid black treatment as the menu drawer */
body cart-drawer,
body cart-drawer.drawer,
body cart-drawer .drawer__inner,
body cart-drawer .drawer__inner.gradient,
body cart-drawer .drawer__inner-empty,
body cart-drawer .drawer__inner.gradient.color-scheme-1,
body cart-notification,
body cart-notification .cart-notification,
body cart-notification .cart-notification.gradient {
  background: #000000 !important;
  background-color: #000000 !important;
  background-image: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* Cart drawer header bar (close X + "Your cart" title) */
body cart-drawer .drawer__header {
  background: transparent !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
body cart-drawer .drawer__heading,
body cart-drawer .drawer__close,
body cart-drawer .drawer__inner * {
  color: #ffffff;
}

/* Cart footer (totals + checkout button area) */
body cart-drawer .drawer__footer,
body cart-drawer cart-drawer-items + .drawer__footer {
  background: rgba(255, 255, 255, 0.03) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* Ensure cart drawer empty state is visible + cart items render */
body cart-drawer .drawer__inner-empty {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;
  text-align: center;
  color: #ffffff !important;
}
body cart-drawer .cart__empty-text,
body cart-drawer .cart__login-title,
body cart-drawer .cart__login-paragraph {
  color: #ffffff !important;
}
body cart-drawer .drawer__inner-empty .button {
  background: #b91c1c !important;
  color: #ffffff !important;
  border: 0 !important;
  margin-top: 1.5rem;
}
body cart-drawer cart-drawer-items,
body cart-drawer .cart__contents,
body cart-drawer .drawer__contents,
body cart-drawer .cart-items {
  background: transparent !important;
  color: #ffffff !important;
}
body cart-drawer .cart-item__name,
body cart-drawer .cart-item__details,
body cart-drawer .cart-item__price,
body cart-drawer .cart-item__price-wrapper,
body cart-drawer .product-option,
body cart-drawer .cart-items th,
body cart-drawer .cart-items td {
  color: #ffffff !important;
}

.menu-drawer__inner-container {
  padding: 0 !important;
  display: flex !important;
  flex-direction: column;
  min-height: 100%;
}

/* MINT logo at the top of the drawer */
.menu-drawer__brand {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 7rem 2rem 2.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.menu-drawer__brand img {
  width: auto;
  max-width: 14rem;
  height: auto;
  filter: drop-shadow(0 0.4rem 1.2rem rgba(0, 0, 0, 0.5));
}

/* Navigation list */
.menu-drawer__navigation-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 1.5rem 0;
}
.menu-drawer__navigation {
  flex: 1;
}
.menu-drawer__menu {
  list-style: none;
  padding: 0 !important;
  margin: 0 !important;
}

/* Each menu item: bigger, with arrow indicator on the right */
.menu-drawer__menu > li {
  margin: 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.menu-drawer__menu-item {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  padding: 1.8rem 2.4rem !important;
  font-size: 1.5rem !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.92) !important;
  text-decoration: none !important;
  position: relative;
  transition: background 0.18s ease, color 0.18s ease, padding-left 0.18s ease;
}
.menu-drawer__menu-item::after {
  content: '→';
  font-size: 1.6rem;
  color: rgba(255, 255, 255, 0.4);
  font-weight: 400;
  transition: transform 0.2s ease, color 0.2s ease;
}
.menu-drawer__menu-item:hover,
.menu-drawer__menu-item:focus {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #ffffff !important;
  padding-left: 2.8rem !important;
}
.menu-drawer__menu-item:hover::after,
.menu-drawer__menu-item:focus::after {
  transform: translateX(0.4rem);
  color: #ffffff;
}

/* Active item: subtle red accent stripe + brighter text */
.menu-drawer__menu-item--active {
  color: #ffffff !important;
  background: rgba(185, 28, 28, 0.12) !important;
}
.menu-drawer__menu-item--active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 0.4rem;
  background: #b91c1c;
}

/* Close button (X) — refined, positioned top-right */
.menu-drawer__close-button {
  position: absolute !important;
  top: 1.8rem !important;
  right: 1.8rem !important;
  width: 4rem !important;
  height: 4rem !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border-radius: 50% !important;
  border: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #ffffff !important;
  transition: background 0.18s ease;
}
.menu-drawer__close-button:hover {
  background: rgba(255, 255, 255, 0.16) !important;
}
.menu-drawer__close-button .svg-wrapper {
  width: 1.6rem;
  height: 1.6rem;
}

/* Utility section at bottom: login + socials */
.menu-drawer__utility-links {
  padding: 2rem 2.4rem 3rem !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.15);
  display: flex !important;
  flex-direction: column;
  gap: 1.5rem;
}

/* Log in: styled as a proper CTA pill */
.menu-drawer__account {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.8rem !important;
  padding: 1.4rem 2rem !important;
  background: #b91c1c !important;
  color: #ffffff !important;
  font-size: 1.3rem !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  border-radius: 999px !important;
  text-decoration: none !important;
  transition: background 0.18s ease, transform 0.12s ease;
}
.menu-drawer__account:hover {
  background: #d72727 !important;
  transform: translateY(-1px);
}
.menu-drawer__account .svg-wrapper {
  width: 1.8rem;
  height: 1.8rem;
}

/* Social links: clean row, centered */
.menu-drawer__utility-links .list-social {
  display: flex !important;
  justify-content: center !important;
  gap: 1.2rem !important;
  padding: 0 !important;
  margin: 0 !important;
}
.menu-drawer__utility-links .list-social__item {
  margin: 0 !important;
}
.menu-drawer__utility-links .list-social__link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 3.4rem !important;
  height: 3.4rem !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border-radius: 50% !important;
  color: rgba(255, 255, 255, 0.7) !important;
  transition: background 0.18s ease, color 0.18s ease;
}
.menu-drawer__utility-links .list-social__link:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
}
.menu-drawer__utility-links .list-social__link .svg-wrapper {
  width: 1.6rem;
  height: 1.6rem;
}

/* ============================================================
   Performance overrides — kill animations/transforms that lag
   on browsers without GPU acceleration. Affects software-rendering
   Chrome, older devices, accessibility-restricted environments.
   ============================================================ */

/* Disable scroll-reveal animations everywhere — they force constant
   transform/opacity recomputation as sections enter viewport. */
.scroll-trigger,
.scroll-trigger--offscreen,
.scroll-trigger--design-mode,
.animate--slide-in,
.animate--fade-in,
.animate--ambient {
  animation: none !important;
  transition: none !important;
  opacity: 1 !important;
  transform: none !important;
}

/* Kill smooth-scroll — browsers without GPU accel jank during smooth scroll */
html {
  scroll-behavior: auto !important;
}

/* Remove hover transforms that cause repaints on cards */
.card-wrapper:hover .card__media,
.card:hover .card__media,
.card-wrapper:hover img,
.card:hover img {
  transform: none !important;
}

/* ============================================================
   Virtualize off-screen content. content-visibility:auto tells
   the browser to SKIP layout + paint for sections that aren't in
   the viewport — single biggest perf win for software-rendering
   browsers (no GPU). contain-intrinsic-size reserves space so the
   scrollbar/positions stay stable.
   ============================================================ */

/* Skip rendering for sections below the first one. Header, hero,
   and the active main section still render normally; everything else
   is virtualized until it scrolls near the viewport. */
.shopify-section + .shopify-section,
.shopify-section + .shopify-section + .shopify-section,
.shopify-section + .shopify-section + .shopify-section + .shopify-section,
.shopify-section + .shopify-section + .shopify-section + .shopify-section + .shopify-section {
  content-visibility: auto;
  contain-intrinsic-size: 1px 700px;
}

/* Virtualize individual product cards in long grids (collection pages, search). */
.grid__item,
.card-wrapper {
  content-visibility: auto;
  contain-intrinsic-size: 1px 420px;
}

/* Footer can be aggressively virtualized */
.shopify-section-footer-group,
.shopify-section[id*="footer"] {
  content-visibility: auto;
  contain-intrinsic-size: 1px 500px;
}

/* ----- Collection page header: centered title with back link above ----- */
.collection-hero__inner {
  position: relative;
  padding-top: 3rem;
  flex-direction: column !important;
  align-items: stretch !important;
}
.collection-hero__text-wrapper {
  text-align: center !important;
  width: 100%;
}
.collection-hero__title-row,
.collection-hero__text-wrapper .collection-hero__title-row {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
}
.collection-hero__title,
.collection-hero__title-row .collection-hero__title {
  display: block !important;
  width: 100% !important;
  flex: none !important;
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Back-to-collections: block-level row above the title, left-aligned */
.collection-hero__back {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.2rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  opacity: 0.75;
  text-decoration: none;
  transition: opacity 0.2s ease;
  margin-bottom: 2rem;
  white-space: nowrap;
}
.collection-hero__back:hover {
  opacity: 1;
  text-decoration: none;
}
.collection-hero__back .svg-wrapper {
  display: inline-flex;
  width: 1.6rem;
  height: 1.6rem;
  flex-shrink: 0;
  transform: scaleX(-1);
}
.collection-hero__back .svg-wrapper svg {
  width: 100%;
  height: 100%;
}

/* Product detail "Back to..." link, above the product title */
.product__back {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.2rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  margin-bottom: 1.5rem;
  transition: color 0.2s ease;
}
.product__back:hover {
  color: #ffffff;
  text-decoration: none;
}
.product__back .svg-wrapper {
  display: inline-flex;
  width: 1.6rem;
  height: 1.6rem;
  flex-shrink: 0;
  transform: scaleX(-1);
}
.product__back .svg-wrapper svg {
  width: 100%;
  height: 100%;
}

/* Force the mobile filter button to be visible and styled on mobile */
@media screen and (max-width: 749px) {
  .mobile-facets__wrapper {
    display: flex !important;
    justify-content: center;
    margin: 1.5rem 0 0.5rem;
  }
  .mobile-facets__open {
    display: inline-flex !important;
    align-items: center;
    gap: 0.8rem;
    width: auto !important;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 999px;
    padding: 1rem 2.2rem !important;
    color: #fff;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-size: 1.2rem;
  }
  .mobile-facets__open .svg-wrapper {
    width: 1.6rem;
    height: 1.6rem;
  }
  /* Ensure account icon is visible on mobile alongside search/cart */
  .header__icon--account {
    display: inline-flex !important;
  }

  /* Mobile menu drawer: make the entire row clickable, not just the text */
  .menu-drawer__menu-item,
  .menu-drawer summary.menu-drawer__menu-item {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box;
  }
  .menu-drawer__menu li {
    list-style: none;
  }

}

/* ============================================================
   Software-render-only overrides (when WebGL is unavailable, i.e.
   browser has no GPU acceleration). Detected by render-mode-detect.js
   which sets .mc-software-render on <html> BEFORE first paint.
   GPU users keep the full visual experience.
   ============================================================ */

/* Strip all transitions, animations, and box-shadows site-wide —
   each is an expensive software-paint operation. */
html.mc-software-render *,
html.mc-software-render *::before,
html.mc-software-render *::after {
  transition: none !important;
  animation: none !important;
  box-shadow: none !important;
  filter: none !important;
  backdrop-filter: none !important;
}

/* Keep sticky header position: fixed, but kill the slide-in/out animation
   that's expensive in software rendering. The header stays pinned at the
   top without animated transitions. */
html.mc-software-render .shopify-section-header-sticky,
html.mc-software-render sticky-header,
html.mc-software-render .shopify-section-group-header-group,
html.mc-software-render .section-header,
html.mc-software-render .section-header.animate {
  transition: none !important;
  animation: none !important;
}
html.mc-software-render body.header-hidden .section-header,
html.mc-software-render body.header-hidden .shopify-section-group-header-group {
  transform: translateY(0) !important;
}

/* Promote text-only rendering inside cards (kill image hover effects, etc.) */
html.mc-software-render .card-wrapper *,
html.mc-software-render .card * {
  transform: none !important;
  opacity: 1 !important;
}

/* ----- Low-stock badge ("Only N left") ----- */
.badge--low-stock {
  background: #C8102E;
  color: #ffffff;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* ----- Hide predictive-search spinner on initial load -----
   component-predictive-search.css is lazy-loaded via media="print" → "all",
   so its display:none rule isn't active on first paint and the spinner flashes
   in the header. The deferred [loading] rule has higher specificity and will
   still show the spinner when search is actively loading. */
.predictive-search__loading-state {
  display: none;
}

/* ============================================================
   Mint Cards — custom product-page price block (.mc-product-price)
   Self-contained class names so no Horizon styles can override.
   Replaces the {% render 'price' %} call in sections/main-product.liquid.
   ============================================================ */
.mc-product-price {
  margin: 0 0 1.6rem;
}
.mc-product-price__row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 1.2rem;
}
.mc-product-price__amount {
  font-size: 2.8rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: #ffffff;
  text-shadow: 0 0.2rem 0.8rem rgba(0, 0, 0, 0.35);
}
@media screen and (min-width: 750px) {
  .mc-product-price__amount {
    font-size: 3.6rem;
  }
}
.mc-product-price__amount--sale {
  color: #ff5757;
}
.mc-product-price__amount--compare {
  font-size: 2.4rem;
  color: rgba(255, 255, 255, 0.6);
  text-decoration: line-through;
  font-weight: 600;
  letter-spacing: 0;
}
.mc-product-price__pill {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1.1rem;
  border-radius: 999px;
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1;
  margin-bottom: 0.6rem;
}
.mc-product-price__pill--sale {
  background: linear-gradient(180deg, #d72727 0%, #b91c1c 100%);
  color: #ffffff;
  box-shadow: 0 0.4rem 1rem rgba(185, 28, 28, 0.45);
}
.mc-product-price__pill--sold-out {
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
  border: 0.1rem solid rgba(255, 255, 255, 0.3);
}
.mc-product-price--sold-out .mc-product-price__amount {
  opacity: 0.55;
}

/* Bigger price on the product page. Universal selector chain for max
   specificity. Targets EVERY product-page price block variant. */
body.template-product .price,
body.template-product .price.price--large,
body.template-product .price__container,
body.template-product .price__regular,
body.template-product .price__sale,
body.template-product .price-item,
body.template-product .price-item.price-item--regular,
body.template-product .price-item.price-item--sale,
body.template-product .price-item.price-item--last,
body.template-product .product .price-item,
body.template-product .product__info-container .price-item,
body.template-product .product__info-container .price-item--regular,
body.template-product .product__info-container .price-item--sale,
body.template-product .product__info-container .price-item--last,
body.template-product .product__info-container .price,
body.template-product .product__info-container .price.price--large {
  font-size: 4.8rem !important;
  font-weight: 900 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.05 !important;
}
@media screen and (min-width: 750px) {
  body.template-product .price,
  body.template-product .price.price--large,
  body.template-product .price-item,
  body.template-product .price-item.price-item--regular,
  body.template-product .price-item.price-item--sale,
  body.template-product .price-item.price-item--last,
  body.template-product .product__info-container .price-item,
  body.template-product .product__info-container .price-item--regular,
  body.template-product .product__info-container .price-item--sale,
  body.template-product .product__info-container .price-item--last {
    font-size: 6.4rem !important;
  }
}

/* Remove the dark focus rectangle around the header search input. The
   actual culprit is the .field::after pseudo-element (base.css:1633-1650)
   which draws a box-shadow ring around the wrapper. Hide the ::after on
   any search-related .field. */
.field.header__search-field::after,
.field.header__search-field::before,
.search .field::after,
.search .field::before,
predictive-search .field::after,
predictive-search .field::before {
  content: none !important;
  display: none !important;
  box-shadow: none !important;
  border: 0 !important;
}

.search__input.field__input:focus,
.search__input.field__input:focus-visible,
.search__input.search__input:focus,
.search__input.search__input:focus-visible,
.field__input.field__input:focus,
.field__input.field__input:focus-visible,
.header__search-input:focus,
.header__search-input:focus-visible,
#Search-In-Modal:focus,
#Search-In-Modal:focus-visible,
#Search-In-Template:focus,
#Search-In-Template:focus-visible,
.field:focus-within,
.field.header__search-field:focus-within,
.header__search-field:focus-within,
predictive-search:focus-within,
.search.header__search-form:focus-within {
  outline: 0 !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
  border-color: transparent !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* iOS Safari auto-zooms when an input has font-size < 16px on focus.
   Force all inputs to 16px on small viewports. Specificity boosted via
   chained class selectors + descendant from html so it beats component
   CSS that uses .header__search--toggle .field__input { font-size: 1.5rem !important }. */
@media screen and (max-width: 749px) {
  html input[type='search'],
  html input[type='text'],
  html input[type='number'],
  html input[type='email'],
  html input[type='tel'],
  html input[type='url'],
  html input[type='password'],
  html textarea,
  html .field__input.field__input,
  html .search__input.search__input,
  html .search__input.field__input.field__input,
  html .header__search-input.header__search-input,
  html .header__search-input.field__input.field__input,
  html .header__search--toggle.header__search--toggle .field__input,
  html .header__search--toggle.header__search--toggle input.search__input,
  html .header__search--toggle.header__search--toggle .header__search-input.field__input,
  html .header__search-panel .field__input,
  html .header__search-panel .search__input,
  html .header__search-panel input[type='search'],
  html #Search-In-Modal,
  html #Search-In-Template {
    font-size: 16px !important;
  }
}

/* ============================================================
   Search-page filters + predictive-search dropdown
   Responsive across all viewports. Forces the floating panels
   onto a light color scheme regardless of the parent navy theme
   by overriding the --color-foreground / --color-background
   tokens that Horizon components read from.
   ============================================================ */

/* --- Filter form: horizontal pill row, wraps cleanly --- */
.template-search .facets__form,
.collection .facets__form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem 1.2rem;
  grid-template-columns: none;
  padding: 0;
  margin: 0 0 1.6rem;
}
.template-search .facets__wrapper,
.collection .facets__wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  align-items: center;
  width: auto;
  flex: 0 1 auto;
  margin: 0;
}
.template-search .facets__form .facet-filters.sorting,
.collection .facets__form .facet-filters.sorting {
  margin: 0;
  flex: 0 0 auto;
}
.template-search .facets__form .facet-filters__field,
.collection .facets__form .facet-filters__field {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.template-search .facets__form .product-count,
.collection .facets__form .product-count {
  flex: 1 1 100%;
  margin: 0.4rem 0 0;
  font-size: 1.3rem;
  opacity: 0.75;
}
.template-search .facets__disclosure,
.collection .facets__disclosure {
  margin: 0;
  flex: 0 0 auto;
  position: relative;
}
.template-search .facets__summary,
.collection .facets__summary {
  margin: 0;
  padding: 0.4rem 1.2rem 0.4rem 0;
  font-size: 1.3rem;
}

@media screen and (max-width: 749px) {
  .template-search .facets__form,
  .collection .facets__form {
    gap: 0.6rem 0.8rem;
  }
  .template-search .facets__form .facet-filters__label,
  .collection .facets__form .facet-filters__label {
    display: none;
  }
  .template-search .facets__summary,
  .collection .facets__summary {
    font-size: 1.2rem;
    padding: 0.4rem 1rem 0.4rem 0;
  }
}

/* --- Filter dropdown panel: always light, readable, mobile-safe --- */
.template-search .facets__display,
.collection .facets__display {
  /* Override inherited color-scheme tokens so children render correctly */
  --color-foreground: 0, 0, 0 !important;
  --color-background: 255, 255, 255 !important;
  --color-link: 0, 0, 0 !important;
  background-color: #ffffff !important;
  background-image: none !important;
  color: #000000 !important;
  border: 0.1rem solid rgba(0, 0, 0, 0.1) !important;
  border-radius: 1.2rem !important;
  box-shadow: 0 1.2rem 3rem rgba(0, 0, 0, 0.35) !important;
  position: absolute;
  top: calc(100% + 0.6rem);
  left: 0;
  width: 32rem;
  max-width: calc(100vw - 3rem);
  max-height: min(60vh, 50rem);
  overflow-y: auto;
  z-index: 60;
}
.template-search .facets__display .facets__header,
.collection .facets__display .facets__header {
  background: #ffffff;
  color: #000000;
  border-bottom: 0.1rem solid rgba(0, 0, 0, 0.08);
  padding: 1.2rem 1.6rem;
  font-size: 1.3rem;
}
.template-search .facets__display .facets__header *,
.collection .facets__display .facets__header * {
  color: #000000;
}
.template-search .facets__display .facets__list,
.collection .facets__display .facets__list {
  padding: 0.8rem 1.6rem 1.6rem;
}
.template-search .facets__display label,
.template-search .facets__display .facet-checkbox,
.collection .facets__display label,
.collection .facets__display .facet-checkbox {
  color: #000000;
  font-size: 1.4rem;
}
.template-search .facets__display .facets__price,
.collection .facets__display .facets__price {
  padding: 1.6rem;
}
.template-search .facets__display .facets__price .field,
.collection .facets__display .facets__price .field {
  --color-foreground: 18, 18, 18;
  --color-background: 255, 255, 255;
}
.template-search .facets__display .facets__price input[type='number'],
.collection .facets__display .facets__price input[type='number'] {
  color: #000000;
  background: #ffffff;
}

/* Anchor dropdowns to the viewport edges on mobile so they don't get clipped */
@media screen and (max-width: 749px) {
  .template-search .facets__display,
  .collection .facets__display {
    position: fixed !important;
    top: auto !important;
    left: 1.2rem !important;
    right: 1.2rem !important;
    width: auto !important;
    max-width: none !important;
    max-height: 70vh !important;
    margin-top: 0.6rem;
  }
  /* Stack header items vertically on mobile (title + Reset button) */
  .template-search .facets__display .facets__header,
  .collection .facets__display .facets__header {
    flex-direction: row;
    align-items: center;
    padding: 1.2rem 1.4rem;
  }
  /* Price-range FROM/TO inputs share the row 50/50 */
  .template-search .facets__display .facets__price,
  .collection .facets__display .facets__price {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 1rem !important;
    align-items: end !important;
    padding: 1.4rem !important;
  }
  .template-search .facets__display .facets__price > .field,
  .collection .facets__display .facets__price > .field {
    flex: 1 1 calc(50% - 2rem) !important;
    min-width: 0 !important;
  }
  .template-search .facets__display .facets__price .field-currency,
  .collection .facets__display .facets__price .field-currency {
    color: #000000 !important;
  }
}

/* --- Predictive search dropdown on the search results page --- */
.template-search .predictive-search,
.template-search .predictive-search.predictive-search--search-template {
  --color-foreground: 18, 18, 18;
  --color-background: 255, 255, 255;
  --color-link: 18, 18, 18;
  background-color: #ffffff;
  color: #000000;
  border: 0.1rem solid rgba(0, 0, 0, 0.08);
  border-radius: 0 0 1rem 1rem;
  box-shadow: 0 1.6rem 4rem rgba(0, 0, 0, 0.22);
  z-index: 80;
}
.template-search .predictive-search,
.template-search .predictive-search * {
  text-shadow: none !important;
  -webkit-text-stroke: 0 !important;
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
}

.template-search .facets__display,
.template-search .facets__display * {
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  text-shadow: none !important;
}
.collection .facets__display,
.collection .facets__display * {
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  text-shadow: none !important;
}
.template-search .predictive-search a,
.template-search .predictive-search a.link,
.template-search .predictive-search a.link--text,
.template-search .predictive-search .predictive-search__item,
.template-search .predictive-search .predictive-search__item-heading,
.template-search .predictive-search .predictive-search__item-vendor,
.template-search .predictive-search p,
.template-search .predictive-search span,
.template-search .predictive-search mark {
  color: #000000;
  background: transparent;
}
.template-search .predictive-search .predictive-search__heading {
  color: rgba(18, 18, 18, 0.6);
  font-family: var(--font-body-family, inherit);
  font-weight: 600;
  font-size: 1.1rem;
  letter-spacing: 0.13rem;
  text-transform: uppercase;
  border-bottom: 0.1rem solid rgba(0, 0, 0, 0.08);
  margin: 0 1.6rem;
  padding: 1.4rem 0 0.6rem;
}
.template-search .predictive-search .predictive-search__item {
  padding: 1rem 1.6rem;
}
.template-search .predictive-search .predictive-search__item-heading {
  font-size: 1.4rem;
  font-weight: 600;
  margin: 0;
  line-height: 1.3;
}
.template-search .predictive-search .predictive-search__item--link-with-thumbnail {
  display: grid;
  grid-template-columns: 4.8rem 1fr;
  grid-column-gap: 1.4rem;
  align-items: center;
}
.template-search .predictive-search .predictive-search__image {
  width: 4.8rem;
  height: 4.8rem;
  object-fit: cover;
  border-radius: 0.6rem;
  background: #f5f5f5;
}
.template-search .predictive-search .price,
.template-search .predictive-search .price *,
.template-search .predictive-search .price-item,
.template-search .predictive-search .price-item--regular,
.template-search .predictive-search .price-item--last {
  color: #000000;
  font-size: 1.3rem;
  font-weight: 500;
}
.template-search .predictive-search .predictive-search__list-item:hover,
.template-search .predictive-search .predictive-search__list-item[aria-selected='true'] {
  background-color: rgba(0, 0, 0, 0.04);
}
.template-search .predictive-search .predictive-search__list-item:hover > *,
.template-search .predictive-search .predictive-search__list-item[aria-selected='true'] > * {
  color: #000000;
  background-color: transparent;
}