/** Shopify CDN: Minification failed

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

**/
/* sync:2026-05-10T11:50 */
/*
 * Reishore Clothing — Brand Customizations
 * Product image gradient background derived from brand teal #41BBAC
 * Add new brand overrides here rather than editing core theme files.
 */

/* ============================================================
   Hero — push content below transparent header dynamically.
   --header-height is set by Horizon JS so it adapts to the
   2-row nav without a hardcoded value.
   ============================================================ */
.shopify-section:has(.hero) .hero {
  padding-block-start: calc(var(--header-height, 80px) + 16px) !important;
}

/* ============================================================
   Hero — brand gradient background (from Claude Design mockup)
   Layered: radial teal gradient base + subtle linear fade overlay.
   Scoped to homepage hero (section id: hero_main).
   ============================================================ */
.hero {
  background:
    linear-gradient(180deg, rgba(149,192,187,0) 40%, rgba(142,182,196,0.35) 100%),
    radial-gradient(ellipse at 70% 30%, #a9cec9 0%, #95c0bb 40%, #8eb6c4 100%) !important;
}

.hero .hero__media-grid {
  display: none !important;
}

/* Hero heading — white, 25% larger than global h1, center aligned */
.hero h1,
.hero .h1,
.hero h2,
.hero .h2 {
  color: #ffffff !important;
  font-size: clamp(2.1875rem, 10vw, 4.375rem) !important;
  text-align: center !important;
}

/* Hero body text — white */
.hero p,
.hero .rte,
.hero .text-block {
  color: #ffffff !important;
  --color-foreground: 255, 255, 255;
  --color-foreground-heading: 255, 255, 255;
}

/* "planet." — earth image mask */
.hero em,
.hero i {
  font-style: normal !important;
  display: inline-block !important;
  background-image: url('/cdn/shop/files/ChatGPT_Image_May_7_2026_07_25_14_PM.png?v=1778196430') !important;
  background-size: 350% !important;
  background-position: center 60% !important;
  background-repeat: no-repeat !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}

/* ============================================================
   Product card image — brand gradient behind product photos
   Shows as placeholder color before images load and in any
   transparent areas of the product media.
   ============================================================ */
.card-gallery {
  background: radial-gradient(ellipse at 70% 30%, #a9cec9 0%, #95c0bb 40%, #8eb6c4 100%);
}

/* ============================================================
   Announcement bar — spread 3 items across full width
   ============================================================ */


/* ============================================================
   H1 — Mulish 800 tight styling to match design
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Mulish:wght@800&display=swap');

h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
  font-family: 'Mulish', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em !important;
  line-height: 0.96 !important;
}

/* ============================================================
   Desktop navigation — use Horizon's native overflow-list dropdown nav
   reishore-2row-nav stays in DOM (hidden) so header-menu.js still inits.
   ============================================================ */

/* Hide flat nav everywhere — drawer handles mobile, overflow-list handles desktop */
.reishore-2row-nav {
  display: none !important;
}

@media screen and (min-width: 750px) {
  /* Restore native dropdown nav on desktop */
  .reishore-2row-nav ~ .header-menu__inner {
    display: flex !important;
    height: 100%;
  }
}

/* ============================================================
   Header — top padding so logo/nav sit away from page edge
   ============================================================ */
.header__row--top .header__columns {
  padding-block-start: 40px !important;
  padding-block-end: 40px !important;
}

/* ============================================================
   Header CTA button — desktop only, links to contact/quote page
   ============================================================ */
.reishore-header-cta {
  display: none;
}

@media screen and (min-width: 750px) {
  .reishore-header-cta {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    font-family: 'Mulish', sans-serif;
    font-size: 0.875rem;
    font-weight: 700;
    text-decoration: none;
    padding: 8px 18px;
    border: none;
    border-radius: 6px;
    margin-inline-start: 20px;
    background-color: #ffffff;
    color: #41BBAC;
    transition: background-color 0.2s ease, color 0.2s ease;
    line-height: 1.3;
  }

  .reishore-header-cta:hover {
    background-color: rgba(255, 255, 255, 0.85);
  }
}


/* ============================================================
   Homepage transparent header — same white-lock as category pages.
   Horizon fires --color-foreground: inherit on the whole row on
   any hover, flipping all links at once. We override per-element.
   ============================================================ */
body:has(.hero) .header__row--top a:not(.reishore-header-cta),
body:has(.hero) .header__row--top button,
body:has(.hero) .header__row--top .reishore-2row-nav__link {
  color: #ffffff !important;
}

body:has(.hero) .header__row--top svg {
  color: #ffffff;
}

body:has(.hero) .header__row--top .header__icon,
body:has(.hero) .header__row--top .header-icon,
body:has(.hero) .header__row--top [class*="icon"] {
  color: #ffffff !important;
  --color-icons: 255, 255, 255;
}

/* Individual link hover — must outspecify the white-lock rule above */
body:has(.hero) .header__row--top a.reishore-2row-nav__link:hover {
  color: #000000 !important;
  transition: color 0.15s ease;
}

/* ============================================================
   Logo — lock inverse (white) logo visible on transparent header,
   hide original (color) logo regardless of nav hover state
   ============================================================ */
.header[transparent] .header-logo__image-container--inverse {
  display: block !important;
}

.header[transparent] .header-logo:has(.header-logo__image-container--inverse) .header-logo__image-container--original {
  display: none !important;
}

/* ============================================================
   Transparent header — stay transparent on hover
   Only show solid background when a submenu is actually open
   ============================================================ */
.header[transparent] {
  --closed-underlay-height: 0px !important;
}

[data-transparent-color-scheme='top']:hover .header__row--top,
[data-transparent-color-scheme='top']:focus-within .header__row--top,
[data-transparent-color-scheme='both']:hover .header__row--top,
[data-transparent-color-scheme='both']:focus-within .header__row--top {
  --color-background: unset !important;
  --color-background-rgb: unset !important;
}

/* ============================================================
   Collection card hover — zoom + darken
   ============================================================ */
.collection-list .card__media,
.collection-list [class*="card"] .media {
  overflow: hidden;
}

.collection-list .card__media img,
.collection-list [class*="card"] .media img {
  transition: transform 0.4s ease, filter 0.4s ease;
}

.collection-list .card:hover .card__media img,
.collection-list [class*="card"]:hover .media img {
  transform: scale(1.07);
  filter: brightness(0.72);
}

/* ============================================================
   Pink accent — #DE5285
   Use only for micro-accents: sale badges, highlight marks,
   "New" labels, or a single CTA per page when you want to
   create real urgency. Never for backgrounds or large elements.
   ============================================================ */
.badge--sale,
.badge--new {
  background-color: #DE5285;
  color: #ffffff;
}

/* ============================================================
   Yellow accent — #F4E026
   Used on dark teal backgrounds (scheme-4 and scheme-5) for
   primary CTAs. Also available as a highlight color.
   ============================================================ */
.highlight--yellow {
  color: #F4E026;
}

/* ============================================================
   Category / nav pages — header stays transparent on scroll.
   Overrides Horizon's scroll-based [transparent] toggling.
   Targets any page that contains a .rch-section (category hero).
   ============================================================ */
body:has(.rch-section) .header,
body:has(.rch-section) .header__row--top {
  background-color: transparent !important;
  --color-background: transparent;
  --color-foreground: 255, 255, 255;
  --color-foreground-heading: 255, 255, 255;
  --color-links: 255, 255, 255;
  --closed-underlay-height: 0px !important;
}

/* Keep white (inverse) logo on category/nav pages */
body:has(.rch-section) .header {
  --header-logo-display: none !important;
  --header-logo-inverse-display: block !important;
}

/* Keep nav links white — lock against Horizon's row-wide color-scheme flip on hover */
body:has(.rch-section) .header__row--top a:not(.reishore-header-cta),
body:has(.rch-section) .header__row--top button,
body:has(.rch-section) .header__row--top .header-menu__link {
  color: #ffffff !important;
  --color-foreground: 255, 255, 255;
}

/* Individual link hover — must outspecify the white-lock rule above */
body:has(.rch-section) .header__row--top a.reishore-2row-nav__link:hover {
  color: #000000 !important;
  transition: color 0.15s ease;
}

/* Keep CTA button styled consistently with homepage */
body:has(.rch-section) .reishore-header-cta {
  background-color: #ffffff !important;
  color: #41BBAC !important;
}

/* Force all header icons/SVGs white on category pages — use color only, not fill */
body:has(.rch-section) .header__row--top svg {
  color: #ffffff;
}
body:has(.rch-section) .header__row--top .header__icon,
body:has(.rch-section) .header__row--top .header-icon,
body:has(.rch-section) .header__row--top [class*="icon"] {
  color: #ffffff !important;
  --color-icons: 255, 255, 255;
}

/* ============================================================
   Footer — hide built-in menu block heading (we use separate text blocks above)
   ============================================================ */
footer .menu__heading__default,
footer .menu__heading__accordion {
  display: none !important;
}

/* ============================================================
   Footer — brand column takes 1.5x width so shop/support/reach
   out spread evenly across the remaining space
   ============================================================ */
@media screen and (min-width: 990px) {
  .footer-content[style*="--grid-columns: 4"] {
    grid-template-columns: 1.5fr 1fr 1fr 1fr !important;
  }
}

/* ============================================================
   Mobile typography & layout overrides
   Horizon sets font sizes globally via CSS variables derived
   from settings_data.json. We scale them down for small screens
   so headings don't overflow or wrap awkwardly.
   ============================================================ */
@media screen and (max-width: 749px) {

  /* Scale headings down for mobile */
  h1, .h1 { font-size: clamp(1.75rem, 8vw, 2.5rem) !important; }
  .hero h1  { font-size: clamp(2.1875rem, 10vw, 3.125rem) !important; }
  h2, .h2 { font-size: clamp(1.5rem, 6vw, 2rem)   !important; }
  h3, .h3 { font-size: clamp(1.25rem, 5vw, 1.75rem) !important; }

  /* Hero: reduce bottom padding so content isn't pushed off screen */
  .shopify-section:has(.hero) {
    --section-padding-bottom: 48px;
  }

  /* Ensure hero text blocks fill the mobile viewport width */
  .hero .text-block,
  .hero [class*="block"] {
    max-width: 100% !important;
    width: 100% !important;
  }

  /* Hero CTA: compact, centered, rounded — not full width */
  .hero .button,
  .hero .button-secondary {
    display: flex;
    width: fit-content;
    min-width: max-content;
    margin-inline: auto;
    border-radius: 8px;
    text-align: center;
    justify-content: center;
  }

  /* Product & collection cards: comfortable 2-column grid */
  .card-grid {
    gap: 10px;
  }

  /* Quote form: single column rows already handled in section CSS */

  /* Footer: increase tap target spacing */
  footer a {
    display: inline-block;
    padding-block: 4px;
  }

  /* Logo marquee: no padding on mobile */
  .rlm {
    padding-block: 0;
  }

  /* Mobile hamburger drawer — centered modal, cream bg, black text */
  .menu-drawer {
    inset: auto !important;
    top: 50% !important;
    left: 50% !important;
    width: 86vw !important;
    max-width: 380px !important;
    height: auto !important;
    max-height: 78vh !important;
    transform: translate(-50%, -50%) scale(0.95) !important;
    background-color: #eee9df !important;
    border-radius: 14px !important;
    border: 0 !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4) !important;
    opacity: 0;
    visibility: hidden;
    transition: transform 0.25s ease, opacity 0.25s ease, visibility 0.25s ease !important;
  }
  .menu-open > .menu-drawer {
    transform: translate(-50%, -50%) scale(1) !important;
    opacity: 1;
    visibility: visible !important;
  }
  .menu-drawer,
  .menu-drawer .menu-drawer__menu-item,
  .menu-drawer .menu-drawer__menu-item-text,
  .menu-drawer .menu-drawer__menu a,
  .menu-drawer .menu-drawer__navigation,
  .menu-drawer .menu-drawer__inner-container,
  .menu-drawer .menu-drawer__close-button {
    color: #000 !important;
  }

  /* Center nav menu items */
  .menu-drawer .menu-drawer__menu-item,
  .menu-drawer .menu-drawer__menu a {
    text-align: center !important;
    justify-content: center !important;
  }
  .menu-drawer .menu-drawer__menu-item-text {
    text-align: center !important;
    width: 100% !important;
  }

  /* Close X — force black */
  .menu-drawer .menu-drawer__close-button,
  .menu-drawer .menu-drawer__close-button .svg-wrapper,
  .menu-drawer .menu-drawer__close-button svg {
    color: #000 !important;
    fill: #000 !important;
    stroke: #000 !important;
  }
}

/* ============================================================
   Collection page — filter + sort brand styling
   ============================================================ */
.facets__see-results {
  background-color: #41bbac !important;
  color: #ffffff !important;
  border-color: #41bbac !important;
}

.facets__see-results:hover {
  background-color: #329088 !important;
  border-color: #329088 !important;
}

.facets-horizontal-remove {
  background-color: rgba(65, 187, 172, 0.12) !important;
  border-color: #41bbac !important;
  color: #1f6862 !important;
}

.facets-horizontal-remove:hover {
  background-color: rgba(65, 187, 172, 0.22) !important;
}

.facets__clear-all-link--active,
.facets__clear-all--active {
  color: #41bbac !important;
}

/* ============================================================
   Collection page product card — brand-styled badge + hover
   ============================================================ */
.product-badges__badge--rectangle {
  background-color: #41bbac !important;
  color: #ffffff !important;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.product-grid__card .card-gallery {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.product-grid__card:hover .card-gallery {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
}

/* ============================================================
   Product grid — smaller cards with more breathing room
   Force 4 equal columns and increase gap so cards breathe.
   ============================================================ */
@media screen and (min-width: 750px) {
  .product-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 2.5rem !important;
    padding-inline: 2.5rem !important;
  }
}

/* ============================================================
   Contained dropdown submenu
   ============================================================ */

/* Keep header transparent when submenu opens — suppress underlay */
.header__underlay {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Force header transparent on hero/category pages at ALL times */
body:has(.hero) .header,
body:has(.hero) .header__row--top,
body:has(.rch-section) .header,
body:has(.rch-section) .header__row--top {
  background-color: transparent !important;
  background: transparent !important;
  --color-background: transparent !important;
}

/* ============================================================
   Header layout — wider nav, icons pinned top-right
   ============================================================ */
@media screen and (min-width: 750px) {
  .header__row--top {
    position: relative !important;
  }

  /* Let nav fill available space between logo and right edge */
  .header__row--top .header__columns {
    --header-left: auto !important;
    --header-center: 1fr !important;
    --header-right: 0px !important;
  }

  /* Pin actions (cart, account, CTA) to top-right corner */
  .header__row--top header-actions {
    position: absolute !important;
    right: 48px !important;
    top: 14px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }

  /* Get a Quote button — 25% larger */
  .reishore-header-cta {
    font-size: 1.1rem !important;
    padding: 10px 22px !important;
  }

  /* Fill the center grid column */
  header-menu {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
  }

  .header-menu__inner,
  .header-menu__inner .menu-list,
  .header-menu__inner .overflow-menu {
    display: flex !important;
    width: 100% !important;
    flex: 1 1 auto !important;
  }

  /* Target the shadow DOM list part — spread items with some padding from edges */
  .header-menu__inner .overflow-menu::part(list) {
    justify-content: space-evenly !important;
    width: 100% !important;
    padding-inline: 4rem !important;
  }

  /* Larger nav link text */
  .header-menu__inner .menu-list__link,
  .header-menu__inner .menu-list__link-title {
    font-size: 1.15rem !important;
    font-weight: 600 !important;
  }

  /* Down chevron on nav items with submenus */
  .header-menu__inner .menu-list__link[aria-haspopup='true'] .menu-list__link-title::after {
    content: '';
    display: inline-block;
    width: 7px;
    height: 7px;
    border-right: 2.5px solid currentColor;
    border-bottom: 2.5px solid currentColor;
    transform: rotate(45deg);
    margin-left: 10px;
    margin-bottom: 3px;
    vertical-align: middle;
    opacity: 1;
  }
}

/* Make the list item the positioning context */
.menu-list__list-item:where(:not([slot='overflow'])) {
  position: relative !important;
}

/* Override full-width mega menu with contained dropdown */
.menu-list__list-item:where(:not([slot='overflow'])) > .menu-list__submenu {
  width: auto !important;
  min-width: 200px !important;
  left: 50% !important;
  transform: translateX(-50%) translateY(-6px) !important;
  clip-path: none !important;
  padding: 0 !important;
  top: 100% !important;
  border-radius: 0 !important;
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease !important;
}

.menu-list__list-item:has([aria-expanded='true']) > .menu-list__submenu {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateX(-50%) translateY(0) !important;
}

/* Semi-transparent white background, teal top accent
   Reset --color-background so cascaded transparent value doesn't win */
.menu-list__submenu {
  --color-background: 255, 255, 255 !important;
  --color-background-rgb: 255, 255, 255 !important;
  background-color: rgba(255, 255, 255, 0.6) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  border-top: 3px solid #41BBAC !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12) !important;
}

.menu-list__submenu-inner {
  --color-background: 255, 255, 255 !important;
  background-color: transparent !important;
  --submenu-padding-block-start: 0px !important;
  --submenu-padding-block-end: 0px !important;
  padding: 0 !important;
  transform: none !important;
}

/* Remove all padding/margin from mega-menu containers; force block layout so items fill full width */
.menu-list__submenu .mega-menu,
.menu-list__submenu .mega-menu__grid,
.menu-list__submenu .section,
.menu-list__submenu .mega-menu__list,
.menu-list__submenu ul,
.menu-list__submenu li {
  display: block !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  --section-padding-top: 0 !important;
  --section-padding-bottom: 0 !important;
  list-style: none !important;
}

/* Uppercase dark link text — extra class to beat white-lock :not() specificity */
body:has(.hero) .header__row--top .menu-list__submenu .mega-menu__column a,
body:has(.rch-section) .header__row--top .menu-list__submenu .mega-menu__column a,
.menu-list__submenu a,
.menu-list__submenu .mega-menu__link {
  color: #1a1a1a !important;
  padding: 0.7rem 1.25rem !important;
  display: block !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  border-bottom: 1px solid #e8e8e8 !important;
}

.menu-list__submenu li:last-child a,
.menu-list__submenu li:last-child .mega-menu__link {
  border-bottom: none !important;
}

/* Hover: teal background + yellow text */
body:has(.hero) .header__row--top .menu-list__submenu .mega-menu__column a:hover,
body:has(.rch-section) .header__row--top .menu-list__submenu .mega-menu__column a:hover,
.menu-list__submenu a:hover,
.menu-list__submenu .mega-menu__link:hover {
  color: #F4E026 !important;
  background: #41BBAC !important;
}