/** Shopify CDN: Minification failed

Line 5863:19 Unexpected "{"
Line 5863:26 Expected ":"
Line 5863:33 Unexpected "{"

**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */


/* CSS from section stylesheet tags */
/* START_SECTION:404 (INDEX:0) */
.not-found {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex: 1;
  gap: 2em;
  padding: 5em 0;
}

.not-found-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 1em;
  width: 75%;
  max-width: 800px;
}

.not-found h1 {
  font-size: 2.5rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.not-found-hero {
  min-width: 150px;
  width: 50%;
  max-width: 300px;
  color: rgb(var(--color-brand-navy));
}

.not-found-path-wrap {
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-size: 0.9em;
  opacity: 0.5;
  user-select: none;
  pointer-events: none;
}

.not-found-path {
  padding: 0.4em 0.6em;
  background-color: rgb(var(--color-brand-beige));
  border-radius: 0.4em;
  font-size: 0.9em;
  font-family: var(--font-monospace--family);
  user-select: text;
  pointer-events: auto;
}
/* END_SECTION:404 */

/* START_SECTION:announcement-bar (INDEX:3) */
.announcement-bar {
position: relative;
background: rgb(var(--color-brand-navy));
color: #fff;
}

.announcement-bar__link {
position: absolute;
inset: 0;
z-index: 1;
}

.announcement-bar:has(.announcement-bar__link):hover .announcement-bar__inner {
text-decoration: underline;
}

.announcement-bar__inner {
max-width: var(--page-width);
margin: 0 auto;
padding: 1.1em var(--page-margin, 20px);
display: flex;
align-items: center;
justify-content: center;
text-align: center;
font-size: 0.875em;
font-weight: 600;
gap: 0.5em;
}

.link-icon {
display: flex;
align-items: center;
justify-content: center;
width: 1em;
height: 1em;
color: currentColor;
}

.announcement-bar__close {
position: absolute;
top: 50%;
left: var(--page-margin, 20px);
transform: translateY(-50%);
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
width: 1em;
height: 1em;
padding: 0;
border: 0;
background: none;
color: currentColor;
cursor: pointer;
}

.announcement-bar__close svg {
width: 100%;
height: 100%;
}

.announcement-bar[hidden] {
display: none;
}
/* END_SECTION:announcement-bar */

/* START_SECTION:article-grid-arrow (INDEX:5) */
.article-grid-arrow__inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 0.5fr 17.5rem 0.5fr;
}

@media (max-width: 1023px) {
  .article-grid-arrow__inner {
    display: flex;
    flex-direction: column;
    gap: 2.5em;
  }
}
/* END_SECTION:article-grid-arrow */

/* START_SECTION:article-grid-blog-archive (INDEX:6) */
.ag__wrap {
margin: 0 auto;
box-sizing: border-box;
}

/* ── Tab bar ── */
.ag__tab-bar {
display: flex;
align-items: flex-end;
gap: 2em;
margin-bottom: 1em;
overflow-x: hidden; /* hide until JS decides which mode to show */
scrollbar-width: none;
-ms-overflow-style: none;
position: relative;
}

.ag__tab-bar::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 1px;
border-bottom: 0.1em solid rgb(var(--color-brand-beige));
}

.ag__tab-bar::-webkit-scrollbar { display: none; }

/* ── Category dropdown (shown when tabs overflow) ── */
.ag__select {
display: none;
width: 100%;
margin-bottom: 1em;
}

.ag__tab {
display: inline-flex;
align-items: center;
gap: 1em;
padding: 1em 0;
background: none;
border: none;
border-bottom: 0.3em solid transparent;
margin-bottom: -1.5px;
cursor: pointer;
font-size: 14px;
font-weight: 600;
color: rgb(var(--color-brand-navy));
font-family: var(--font-primary--family);
white-space: nowrap;
transition: color 0.15s, border-color 0.15s;
text-decoration: none;
position: relative;
z-index: 1;
}
.ag__tab:hover { color: rgb(var(--color-brand-navy-light)); }

.ag__tab:hover:not(.ag-active) {
border-bottom-color: rgb(var(--color-brand-navy-light));
}

.ag__tab.ag-active {
border-bottom-color: rgb(var(--color-brand-green));
color: rgb(var(--color-brand-green));
}

.ag__tab svg {
width: 1em;
height: 1em;
color: currentColor;
}

/* ── Grid ── */
.ag__grid {
display: grid;
gap: 1.5em;
align-items: start;
}

.ag__grid > * {
height: 100%;
}

/* Card visual styling is provided by article-card.liquid's own stylesheet. */

/* ── Load more ── */
.ag__footer {
display: flex;
justify-content: center;
margin-top: 1em;
}
.ag__load-more {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 13px 32px;
background: rgb(var(--color-brand-navy));
color: #ffffff;
border: none;
border-radius: 100px;
font-size: 14px;
font-weight: 600;
font-family: var(--font-primary--family);
cursor: pointer;
transition: opacity 0.15s;
}
.ag__load-more:hover { opacity: 0.85; }
.ag__load-more[hidden] { display: none; }

/* ── Empty state ── */
.ag__empty {
grid-column: 1 / -1;
text-align: center;
padding: 48px 24px;
color: rgb(var(--color-utility-disabled));
font-family: var(--font-primary--family);
font-size: 14px;
}
/* END_SECTION:article-grid-blog-archive */

/* START_SECTION:article-grid-categories (INDEX:7) */
.ag__wrap {
margin: 0 auto;
box-sizing: border-box;
}

/* ── Tab bar ── */
.ag__tab-bar {
display: flex;
align-items: flex-end;
gap: 2em;
margin-bottom: 1em;
overflow-x: hidden; /* hide until JS decides which mode to show */
scrollbar-width: none;
-ms-overflow-style: none;
position: relative;
}

.ag__tab-bar::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 1px;
border-bottom: 0.1em solid rgb(var(--color-brand-beige));
}

.ag__tab-bar::-webkit-scrollbar { display: none; }

/* ── Category dropdown (shown when tabs overflow) ── */
.ag__select {
display: none;
width: 100%;
margin-bottom: 1em;
}

.ag__tab {
display: inline-flex;
align-items: center;
gap: 1em;
padding: 1em 0;
background: none;
border: none;
border-bottom: 0.3em solid transparent;
margin-bottom: -1.5px;
cursor: pointer;
font-size: 14px;
font-weight: 600;
color: rgb(var(--color-brand-navy));
font-family: var(--font-primary--family);
white-space: nowrap;
transition: color 0.15s, border-color 0.15s;
text-decoration: none;
position: relative;
z-index: 1;
}
.ag__tab:hover { color: rgb(var(--color-brand-navy-light)); }

.ag__tab:hover:not(.ag-active) {
border-bottom-color: rgb(var(--color-brand-navy-light));
}

.ag__tab.ag-active {
border-bottom-color: rgb(var(--color-brand-green));
color: rgb(var(--color-brand-green));
}

.ag__tab svg {
width: 1em;
height: 1em;
color: currentColor;
}

/* ── Grid ── */
.ag__grid {
display: grid;
gap: 1.5em;
align-items: start;
}

.ag__grid > * {
height: 100%;
}

/* Card visual styling is provided by article-card.liquid's own stylesheet. */

/* ── Load more ── */
.ag__footer {
display: flex;
justify-content: center;
margin-top: 1em;
}
.ag__load-more {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 13px 32px;
background: rgb(var(--color-brand-navy));
color: #ffffff;
border: none;
border-radius: 100px;
font-size: 14px;
font-weight: 600;
font-family: var(--font-primary--family);
cursor: pointer;
transition: opacity 0.15s;
}
.ag__load-more:hover { opacity: 0.85; }
.ag__load-more[hidden] { display: none; }

/* ── Empty state ── */
.ag__empty {
grid-column: 1 / -1;
text-align: center;
padding: 48px 24px;
color: rgb(var(--color-utility-disabled));
font-family: var(--font-primary--family);
font-size: 14px;
}
/* END_SECTION:article-grid-categories */

/* START_SECTION:article-hero (INDEX:9) */
/* ── Outer wrapper ────────────────────────────────────────────────── */
.arth {
height: clamp(25em, 30vw, 35em);
position: relative;
align-items: flex-end;
padding-top: var(--header-height);
}

/* ── Background image ─────────────────────────────────────────────── */
.arth__bg {
position: absolute;
inset: 0;
z-index: 0;
background: rgb(var(--color-brand-navy, 0 38 58));
}
.arth__bg img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}

/* ── Gradient overlay ─────────────────────────────────────────────── */
.arth__overlay {
position: absolute;
inset: 0;
z-index: 1;
}

/* ── Content area ─────────────────────────────────────────────────── */
.arth__content {
position: relative;
z-index: 2;
margin-bottom: 1em;
display: flex;
flex-direction: column;
gap: 10px;
}

@media (min-width: 600px) {
.arth__content {
margin-bottom: 2em;
}
}

@media (min-width: 1200px) {
.arth__content {
margin-bottom: 3em;
}
}

/* ── Tag pills ────────────────────────────────────────────────────── */
.arth__tags {
display: flex;
flex-wrap: wrap;
gap: 6px;
align-items: center;
}

/* ── Blog type link ───────────────────────────────────────────────── */
.arth__blogtype-link {
display: inline-flex;
text-decoration: none;
color: inherit;
}
.arth__blogtype-link:hover {
opacity: 0.85;
}

/* ── Title ────────────────────────────────────────────────────────── */
.arth__title {
font-family: var(--font-primary--family);
font-weight: 700;
color: #fff;
margin: 0;
line-height: 1.2;
text-shadow: 0 2px 25px rgba(0, 0, 0, 0.35);
}

/* ── Date ─────────────────────────────────────────────────────────── */
.arth__date {
font-family: var(--font-primary--family);
font-size: 13px;
font-weight: 500;
color: rgba(255, 255, 255, 0.75);
}
/* END_SECTION:article-hero */

/* START_SECTION:article (INDEX:10) */
/* ── Outer wrapper ──────────────────────────────────────────────────────── */
.art {
background: #ffffff;
padding: 3em 0;
}
.art__inner {
max-width: 800px;
margin: 0 auto;
padding: 0 24px;
}

/* ── Author row ─────────────────────────────────────────────────────────── */
.art__author {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 32px;
padding-bottom: 24px;
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.art__author-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
background: rgb(var(--color-brand-green, 0 188 112));
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-size: 16px;
font-weight: 700;
color: #fff;
font-family: var(--font-primary--family);
}
.art__author-name {
font-family: var(--font-primary--family);
font-size: 14px;
font-weight: 600;
color: rgb(var(--color-brand-navy));
}
.art__author-label {
font-family: var(--font-primary--family);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #00BC70;
}

/* ── Prose content ──────────────────────────────────────────────────────── */
.art__prose {
font-family: var(--font-primary--family);
font-size: 1rem;
line-height: 1.8;
color: rgb(var(--color-brand-navy));
}
.art__prose > * + * {
margin-top: 1.35em;
}

/* Headings */
.art__prose h2 {
font-size: 1.6em;
font-weight: 700;
line-height: 1.2;
margin-top: 2em;
margin-bottom: 0.5em;
color: rgb(var(--color-brand-navy));
}
.art__prose h3 {
font-size: 1.25em;
font-weight: 700;
line-height: 1.25;
margin-top: 1.75em;
margin-bottom: 0.4em;
color: rgb(var(--color-brand-navy));
}
.art__prose h4 {
font-size: 1.05em;
font-weight: 700;
margin-top: 1.5em;
margin-bottom: 0.35em;
color: rgb(var(--color-brand-navy));
}
.art__prose :is(h2, h3, h4) + * {
margin-top: 0;
}

/* Paragraphs */
/* Links */

/* Lists */
.art__prose ul,
.art__prose ol {
padding-left: 1.5em;
}
.art__prose li {
margin-top: 0.4em;
}
.art__prose li::marker {
color: #00BC70;
}

/* Blockquote */
.art__prose blockquote {
border-left: 3px solid #00BC70;
margin-left: 0;
margin-right: 0;
padding: 12px 20px;
background: #00BC700d;
border-radius: 0 8px 8px 0;
font-style: italic;
color: rgb(var(--color-brand-navy));
}
.art__prose blockquote p {
margin: 0;
}

/* Inline code */
.art__prose code {
font-size: 0.875em;
background: rgba(0, 0, 0, 0.06);
padding: 2px 6px;
border-radius: 4px;
font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', monospace;
}

/* Code blocks */
.art__prose pre {
background: rgb(var(--color-brand-navy));
color: #e2e8f0;
padding: 20px 24px;
border-radius: 8px;
overflow-x: auto;
font-size: 0.875em;
line-height: 1.7;
}
.art__prose pre code {
background: none;
padding: 0;
border-radius: 0;
color: inherit;
font-size: inherit;
}

/* Horizontal rule */
.art__prose hr {
border: none;
border-top: 1px solid rgba(0, 0, 0, 0.1);
margin: 2.5em 0;
}

/* Images */
.art__prose img {
border-radius: 8px;
width: 100%;
height: auto;
}

/* Tables */
.art__prose table {
width: 100%;
border-collapse: collapse;
font-size: 0.9em;
}
.art__prose th {
background: rgb(var(--color-brand-navy));
color: #fff;
padding: 10px 14px;
text-align: left;
font-weight: 600;
}
.art__prose td {
padding: 9px 14px;
border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}
.art__prose tr:nth-child(even) td {
background: rgba(0, 0, 0, 0.025);
}

/* ── Share bar ──────────────────────────────────────────────────────────── */
.art__share {
display: flex;
align-items: center;
gap: 10px;
margin-top: 40px;
padding-top: 28px;
border-top: 1px solid rgba(0, 0, 0, 0.08);
flex-wrap: wrap;
}
.art__share-label {
font-family: var(--font-primary--family);
font-size: 13px;
font-weight: 600;
margin-right: 4px;
color: rgb(var(--color-brand-navy));
}
.art__share-btn {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--font-primary--family);
font-size: 12px;
font-weight: 600;
color: rgb(var(--color-brand-navy));
background: rgba(0, 0, 0, 0.05);
border: none;
padding: 7px 14px;
border-radius: 100px;
cursor: pointer;
text-decoration: none;
transition: background 0.15s, color 0.15s;
}
.art__share-btn:hover {
background: #00BC70;
color: #fff;
}

/* ── Mobile ─────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
.art__prose {
font-size: 0.97rem;
}
.art__prose h2 { font-size: 1.35em; }
.art__prose h3 { font-size: 1.15em; }
}
/* END_SECTION:article */

/* START_SECTION:blog-article-grid (INDEX:13) */
/* Card visual styling is provided by article-card.liquid's own stylesheet block. */
/* END_SECTION:blog-article-grid */

/* START_SECTION:blog-hero (INDEX:14) */
.ac {
position: relative;
overflow: hidden;
background: #00263A;
user-select: none;
}

.ac__bg {
position: absolute;
inset: 0;
overflow: hidden;
}
.ac__bg img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}

.ac__card {
position: absolute;
bottom: 0;
left: calc((100vw - var(--content-width)) / 2);
transform: translateY(0);
}
.ac__slide:not(.is-active) .ac__card {
transform: translateY(12px);
opacity: 0;
}

.ac__tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 14px;
align-items: center;
}

.ac__blogtype-link {
display: inline-flex;
text-decoration: none;
color: inherit;
}
.ac__blogtype-link:hover {
opacity: 0.85;
}

.ac__title {
font-weight: 700;
color: #ffffff;
font-family: var(--font-primary--family);
line-height: 1.2;
margin: 0 0 12px;
}

.ac__excerpt {
font-size: 14px;
line-height: 1.65;
color: rgba(255, 255, 255, 0.75);
font-family: var(--font-primary--family);
margin: 0 0 20px;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
}

.ac__nav {
position: absolute;
right: calc((100vw - var(--content-width)) / 2);
display: flex;
gap: 10px;
align-items: center;
}

@media (max-width: 640px) {
.ac__card {
left: 0;
right: 0;
}
.ac__slide:not(.is-active) .ac__card {
transform: none;
opacity: 1;
}
.ac__nav {
right: 12px;
}
}
/* END_SECTION:blog-hero */

/* START_SECTION:blog-latest-article (INDEX:15) */
.bfl {
display: flex;
gap: 0;
border-radius: 0.5em;
overflow: hidden;
min-height: 460px;
text-decoration: none;
cursor: pointer;
}

@media (min-width: 768px) {
  .bfl {
    border-radius: 1.5em;
  }
}
.bfl__img-col {
flex: 3;
position: relative;
overflow: hidden;
}
.bfl__img {
width: 100%;
height: 100%;
max-height: 30em;
object-fit: cover;
display: block;
transition: transform 0.5s ease;
}
.bfl:hover .bfl__img {
transform: scale(1.03);
}
.bfl__card {
flex: 2;
background: rgb(var(--color-brand-navy));
padding: 44px;
display: flex;
flex-direction: column;
justify-content: center;
gap: 1em;
}

@media (min-width: 768px) {
.bfl__img-col {
border-radius: 1.5em 0 1.5em 1.5em;
}

.bfl__card {
height: fit-content;
border-radius: 0 1.5em 1.5em 0;
}
}

.bfl__tags {
display: flex;
flex-wrap: wrap;
gap: 7px;
}
.bfl__tag {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 12px;
border-radius: 100px;
font-size: 11px;
font-weight: 700;
font-family: var(--font-primary--family);
border: 1.5px solid rgba(255, 255, 255, 0.3);
color: rgba(255, 255, 255, 0.9);
background: transparent;
text-transform: capitalize;
}
.bfl__tag.is-feat {
background: #00BC70;
border-color: #00BC70;
color: #fff;
}
.bfl__blogtype-link {
display: inline-flex;
text-decoration: none;
color: inherit;
position: relative;
z-index: 1;
}
.bfl__blogtype-link:hover {
opacity: 0.85;
}
.bfl__title {
font-size: 2em;
font-weight: 700;
color: #fff;
font-family: var(--font-primary--family);
margin: 0;
line-height: 1.25;
}
.bfl__excerpt {
font-size: 1em;
line-height: 1.65;
color: #fff;
font-family: var(--font-primary--family);
margin-bottom: 1em;
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
}
@media (max-width: 768px) {
.bfl {
flex-direction: column;
min-height: auto;
}
.bfl__img-col {
min-height: 220px;
}
.bfl__card {
padding: 24px;
}
}
/* END_SECTION:blog-latest-article */

/* START_SECTION:card-carousel (INDEX:17) */
.card-carousel {
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: 2em;
position: relative;
}

/* Header row */
.card-carousel-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1em;
}

.card-carousel-heading {
display: flex;
align-items: center;
gap: 12px;
}

/* Track */
.card-carousel-track-wrap {
overflow: hidden;
position: relative;
}

.card-carousel-track-wrap::before,
.card-carousel-track-wrap::after {
content: '';
position: absolute;
top: 0;
width: 80px;
height: 100%;
pointer-events: none;
z-index: 10;
opacity: 0;
transition: opacity 0.2s ease;
}

.card-carousel-track-wrap::before {
left: 0;
background: linear-gradient(to right, rgba(255,255,255,0.85), transparent);
}

.card-carousel-track-wrap::after {
right: 0;
background: linear-gradient(to left, rgba(255,255,255,0.85), transparent);
}

.card-carousel-track-wrap.show-fade-left::before  { opacity: 1; }
.card-carousel-track-wrap.show-fade-right::after  { opacity: 1; }

.card-carousel-track {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: none;
scroll-behavior: smooth;
padding-bottom: 4px;
cursor: default;
user-select: none;
-webkit-user-select: none;
--gutter: 1.5em;
gap: var(--gutter);
-webkit-overflow-scrolling: touch;
overscroll-behavior-x: contain;
}

.card-carousel-track[data-draggable="true"] { cursor: grab; }

.card-carousel-track::-webkit-scrollbar { display: none; }

.card-carousel-track[data-draggable="true"].is-dragging {
cursor: grabbing;
scroll-behavior: auto;
}

/* Nav & Scrollbar */
.card-carousel-nav {
display: flex;
align-items: center;
gap: 0.5em;
}

.card-carousel-scrollbar {
position: relative;
width: 100%;
height: 4px;
background: #d9d9d9;
border-radius: 999px;
overflow: hidden;
transition: opacity 0.2s ease;
}

.card-carousel-scrollbar.is-hidden {
opacity: 0;
pointer-events: none;
display: none;
}

.card-carousel-scrollbar__thumb {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 20%;
background: rgb(var(--color-brand-green));
border-radius: 999px;
transition: transform 0.1s linear, width 0.1s linear;
will-change: transform, width;
}

@media screen and (max-width: 749px) {
.card-carousel-track-wrap::before,
.card-carousel-track-wrap::after { width: 40px; }
}
/* END_SECTION:card-carousel */

/* START_SECTION:category-carousel-meta (INDEX:19) */
/* ── Category Carousel — shared styles ──────────────────────────────────────
Used by both category-carousel.liquid (manual) and
category-carousel-meta.liquid (metaobject-driven).
Shopify deduplicates {% stylesheet %} so this outputs once per page.
─────────────────────────────────────────────────────────────────────────── */

.cc-block {
box-sizing: border-box;
}

/* Header row */
.cc-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-bottom: 28px;
}

.cc-heading {
display: flex;
align-items: center;
gap: 1em;
}

.cc-heading__icon {
display: flex;
align-items: center;
flex-shrink: 0;
color: rgb(var(--color-brand-green));
}

.cc-heading__icon svg {
width: 1.2em;
height: 1.2em;
transform: rotate(90deg);
}

.cc-heading__text {
margin: 0;
font-size: clamp(1.1rem, 2.2vw, 1.5rem);
font-weight: 500;
line-height: 1.3;
}

/* Track */
.cc-track-wrap {
overflow: hidden;
position: relative;
}

.cc-track-wrap::after {
content: '';
position: absolute;
top: 0;
right: 0;
width: 80px;
height: 100%;
background: linear-gradient(to right, transparent, rgba(255,255,255,0.85));
pointer-events: none;
z-index: 1;
}

.cc-track {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: none;
scroll-behavior: smooth;
padding-bottom: 4px;
cursor: grab;
user-select: none;
-webkit-user-select: none;
}

.cc-track::-webkit-scrollbar { display: none; }

.cc-track.is-dragging {
cursor: grabbing;
scroll-behavior: auto;
}

/* Card */
.cc-card {
flex: 0 0 320px;
background: rgb(var(--color-brand-beige-light));
border-radius: 18px;
overflow: hidden;
scroll-snap-align: start;
display: flex;
flex-direction: column;
flex-shrink: 0;
}

.cc-card__content {
padding: 32px;
display: flex;
flex-direction: column;
flex: 1;
}

.cc-card__icon {
margin-bottom: 22px;
width: 36px;
height: 36px;
}

.cc-card__icon img {
width: 36px;
height: 36px;
object-fit: contain;
filter: invert(55%) sepia(60%) saturate(450%) hue-rotate(92deg) brightness(98%) contrast(90%);
}

.cc-card__title {
font-size: clamp(1.1rem, 2vw, 1.45rem);
line-height: 1.15;
font-weight: 600;
color: #06263f;
margin: 0 0 14px;
}

.cc-card__text {
font-size: 0.9rem;
line-height: 1.6;
color: #374151;
margin: 0 0 24px;
flex: 1;
}

.cc-card__footer {
margin-top: auto;
}

.cc-card__btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 9px 16px;
background: #c0de82;
color: #06263f;
text-decoration: none;
border-radius: 999px;
font-size: 0.82rem;
font-weight: 600;
line-height: 1;
transition: background 0.2s ease;
white-space: nowrap;
}

.cc-card__btn:hover { background: #aed065; }

.cc-card__btn svg {
width: 0.85em;
height: 0.85em;
flex-shrink: 0;
}

.cc-card__image {
width: 100%;
aspect-ratio: 4 / 3;
overflow: hidden;
flex-shrink: 0;
}

.cc-card__image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}

/* Scrollbar */
.cc-scrollbar {
position: relative;
width: 100%;
height: 4px;
background: #d9d9d9;
border-radius: 999px;
overflow: hidden;
margin-top: 20px;
}

.cc-scrollbar__thumb {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 20%;
background: #00b140;
border-radius: 999px;
transition: transform 0.1s linear, width 0.1s linear;
will-change: transform, width;
}

/* Responsive */
@media screen and (max-width: 749px) {
.cc-card          { flex: 0 0 82vw !important; }
.cc-card__content { padding: 24px; }
.cc-card__title   { font-size: 1.15rem; }
.cc-track-wrap::after { width: 40px; }
}
/* END_SECTION:category-carousel-meta */

/* START_SECTION:collection-hero (INDEX:20) */
/* ─── Collection Hero ──────────────────────────────── */

.ch {
overflow: hidden;
padding-top: calc(var(--header-height));
display: flex;
align-items: flex-end;
background: rgb(var(--color-brand-navy));
}

.ch__media {
position: absolute;
inset: 0;
z-index: 0;
}

.ch__bg {
position: absolute;
inset: 0;
object-fit: cover;
display: block;
z-index: 0;
height: 100%;
width: 100%;
}

.ch__gradient {
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(
to top,
rgb(var(--color-brand-navy)) 0%,
transparent 50%
), linear-gradient(
to bottom,
rgb(var(--color-brand-navy)) 0%,
transparent 50%
);
opacity: 0.75;
}

.ch__inner {
position: relative;
z-index: 2;
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 5em;
width: var(--content-width);
margin: 2em auto;
}

.ch__left {
display: flex;
flex-direction: column;
gap: 16px;
}

.ch__icon {
width: 7em;
height: 7em;
position: relative;
}

.ch__icon-placeholder {
width: 3em;
height: 3em;
position: relative;
margin-bottom: -2em;
}

.ch__icon-bg {
position: absolute;
inset: 0;
z-index: -1;
display: flex;
align-items: center;
justify-content: center;
color: rgb(var(--color-brand-navy));
}

.ch__icon-bg.invert {
color: rgba(0,0,0,0.25);
}

.ch__icon-bg svg {
width: 100%;
height: 100%;
}

.ch__icon-inner {
position: relative;
z-index: 1;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}

.ch__icon-inner img {
object-fit: contain;
object-position: center bottom;
width: 100%;
height: 100%;
padding: 0.75em;
}

/* ─── Parent collection subheading ─────────────────── */

.ch__parent {
font-family: var(--font-primary--family, sans-serif);
font-size: 1.1em;
font-weight: 600;
letter-spacing: 0.04em;
color: rgba(255, 255, 255, 0.7);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 0.8em;
transition: color 0.15s ease;
}
a.ch__parent:hover {
color: #ffffff;
}

.ch__parent svg {
width: 0.5em;
height: 0.5em;
transform: rotate(90deg);
top: 0.1em;
position: relative;
}

.ch__heading {
font-weight: 700;
line-height: 1.1;
color: #ffffff;
font-family: var(--font-primary--family, sans-serif);
margin: 0;
}

.ch__heading_group {
display: flex;
flex-direction: column;
gap: 0.5em;
}

.ch__card {
background: rgb(var(--color-brand-navy));
border-radius: 1em;
padding: 1.5em 2em;
max-width: 40em;
}

.ch__card-body {
color: rgb(var(--color-brand-navy)) !important;
font-family: var(--font-primary--family, sans-serif);
}
.ch__card-body h1,
.ch__card-body h2,
.ch__card-body h3,
.ch__card-body h4,
.ch__card-body h5 {
color: rgb(var(--color-brand-navy)) !important;
font-family: var(--font-primary--family, sans-serif);
}

@media screen and (min-width: 768px) {
.ch__card-body {
color: #ffffff !important;
font-family: var(--font-primary--family, sans-serif);
}
.ch__card-body h1,
.ch__card-body h2,
.ch__card-body h3,
.ch__card-body h4,
.ch__card-body h5 {
color: #ffffff !important;
font-family: var(--font-primary--family, sans-serif);
}
}

@media (max-width: 1024px) {

}

@media (max-width: 767px) {
.ch {
height: auto;
display: flex;
flex-direction: column;
align-items: stretch;
padding-top: 0;
}

.ch__media {
position: relative;
inset: auto;
width: 100%;
height: calc(35vw + var(--header-height));
flex-shrink: 0;
}

.ch__inner {
margin-top: -8em;
gap: 1em;
flex-direction: column;
align-items: flex-start;
}

.ch__icon {
width: 4em;
height: 4em;
}

.ch__icon-placeholder {
width: 1.5em;
height: 1.5em;
margin-bottom: -1em;
}

.ch__card {
align-self: stretch;
max-width: calc(100% + 4em);
margin: 0 -2em -2em -2em;
background: rgb(var(--color-brand-beige-light));
}

.ch__card-body {
color: rgb(var(--color-brand-navy));
}

.ch__heading { font-size: 1.8em; }
}
/* END_SECTION:collection-hero */

/* START_SECTION:collection-product-grid (INDEX:21) */
/* ── Outer wrapper ── */
.collection-product-grid {
box-sizing: border-box;
margin-bottom: 2em;
}

/* ── Top bar: heading + sort ── */
.collection-product-grid__topbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-top: 4em;
margin-bottom: 28px;
flex-wrap: wrap;
}

.collection-product-grid__heading {
font-size: 2.2em;
font-weight: 700;
color: #00263A;
margin: 0;
font-family: var(--font-primary--family, sans-serif);
line-height: 1.2;
}

.collection-product-grid__sort-wrap {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}

.collection-product-grid__sort-label {
font-size: 0.875rem;
color: #00263A;
font-family: var(--font-primary--family, sans-serif);
white-space: nowrap;
}

.collection-product-grid__sort-select {
min-width: 160px;
}

.collection-product-grid__sort-select:focus {
outline: none;
border-color: #00263A;
}

/* ── Body layout: sidebar + main ── */
.collection-product-grid__layout {
display: flex;
gap: 32px;
align-items: flex-start;
}

/* ── Filter sidebar ── */
.collection-product-grid__sidebar {
flex: 0 0 240px;
padding: 0 0.4em;
width: 240px;
min-width: 0;
position: sticky;
top: 10em;
max-height: calc(100vh - 10em);
overflow-y: auto;
scrollbar-width: none;
}

.collection-product-grid__sidebar::-webkit-scrollbar {
display: none;
}

.collection-product-grid__sidebar-title {
font-size: 1rem;
font-weight: 500;
letter-spacing: 0.02em;
color: #00263A;
margin: 0 0 16px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}

.collection-product-grid__sidebar-title-left {
display: flex;
align-items: center;
gap: 8px;
}

.collection-product-grid__active-badge {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
border-radius: 50%;
background: rgb(var(--color-brand-light-green));
color: rgb(var(--color-brand-navy));
font-size: 0.7rem;
font-weight: 700;
line-height: 1;
}

.collection-product-grid__sidebar-title-right {
display: flex;
align-items: center;
gap: 12px;
}

.collection-product-grid__clear-all {
display: flex;
align-items: center;
gap: 0.5em;
justify-content: center;
font-size: 0.9rem;
font-weight: 400;
color: rgb(var(--color-brand-green));
font-weight: 600;
cursor: pointer;
background: none;
border: none;
padding: 0;
font-family: inherit;
transition: color 0.2s;
}

.collection-product-grid__clear-all svg {
width: 1em;
height: 1em;
padding: 0.2em;
flex-shrink: 0;
background: rgb(var(--color-brand-green));
border-radius: 50%;
color: #fff;
transition: background 0.2s;
}

.collection-product-grid__clear-all:hover {
color: rgb(var(--color-brand-navy));
}

.collection-product-grid__clear-all:hover svg {
background: rgb(var(--color-brand-navy));
}

.collection-product-grid__sidebar-toggle-icon {
display: none;
color: #00263A;
flex-shrink: 0;
width: 12px;
height: 12px;
}

.collection-product-grid__filter {
border-top: 1px solid #e0ddd6;
}

.collection-product-grid__filter:last-child {
border-bottom: 1px solid #e0ddd6;
}

.collection-product-grid__filter-header {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 0;
background: none;
border: none;
cursor: pointer;
font-size: 0.9em;
letter-spacing: 0.02em;
font-weight: 600;
color: #00263A;
font-family: var(--font-primary--family, sans-serif);
text-align: left;
}

.collection-product-grid__filter-toggle {
flex-shrink: 0;
color: #00263A;
width: 12px;
height: 12px;
display: flex;
align-items: center;
justify-content: center;
}

.collection-product-grid__filter-body {
display: none;
padding-bottom: 14px;
}

.collection-product-grid__filter-body.is-open {
display: block;
}

.collection-product-grid__filter-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 8px;
}

.collection-product-grid__filter-option {
display: flex;
align-items: center;
gap: 10px;
cursor: pointer;
font-size: 0.9rem;
color: #00263A;
font-family: var(--font-primary--family, sans-serif);
}

.collection-product-grid__filter-count {
margin-left: auto;
font-size: 0.8rem;
color: rgba(var(--color-brand-navy), 0.5);
background-color: rgba(var(--color-brand-navy), 0.05);
padding: 0 6px;
border-radius: 1em;
display: flex;
height: 1.5em;
width: fit-content;
align-items: center;
justify-content: center;
}

/* ── Price range filter ── */
.collection-product-grid__price-form {
display: flex;
flex-direction: column;
gap: 10px;
}

.collection-product-grid__price-inputs {
display: flex;
align-items: center;
gap: 8px;
}

.collection-product-grid__price-field {
position: relative;
flex: 1;
min-width: 0;
}

.collection-product-grid__price-field.is-active input[type="number"].collection-product-grid__price-input {
border-color: rgb(var(--color-brand-green));
}

.collection-product-grid__price-symbol {
position: absolute;
left: 8px;
top: 50%;
transform: translateY(-50%);
font-size: 0.85rem;
pointer-events: none;
line-height: 1;
color: rgb(var(--color-brand-navy));
}

input[type="number"].collection-product-grid__price-input {
width: 100%;
min-width: 0;
font-size: 0.9em;
padding-left: 1.4em;
box-sizing: border-box;
}

.collection-product-grid__price-sep {
color: #00263A;
font-size: 0.9rem;
flex-shrink: 0;
}

/* ── Visual Filter Swatches & Images ── */
.collection-product-grid__swatch {
display: inline-block;
width: 18px;
height: 18px;
border-radius: 50%;
border: 1px solid rgba(0, 38, 58, 0.2);
flex-shrink: 0;
background-position: center;
box-shadow: inset 0 0 2px rgba(0,0,0,0.1);
}

.collection-product-grid__filter-image-wrap {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
overflow: hidden;
border-radius: 4px;
border: 1px solid rgba(0, 38, 58, 0.1);
background: #fff;
flex-shrink: 0;
}

.collection-product-grid__filter-image-wrap img {
width: 100%;
height: 100%;
object-fit: contain;
}

.collection-product-grid__filter-list--swatch .collection-product-grid__filter-option {
gap: 0.5em;
}

/* ── Active Filter Pills (Top Bar Component) ── */
.collection-product-grid__active-filters {
display: flex;
flex-wrap: wrap;
gap: 0.5em;
margin-bottom: 1em;
width: 100%;
}

.collection-product-grid__active-pill {
display: inline-flex;
align-items: center;
gap: 0.5em;
padding: 0.4em 0.8em;
border-radius: 1em;
font-size: 0.9em;
line-height: 1;
text-decoration: none;
transition: background 0.2s, color 0.2s;
border: none;
cursor: pointer;
}

.collection-product-grid__active-pills-link {
background-color: rgb(var(--color-brand-beige));
color: #00263A;
}

.collection-product-grid__active-pills-link:hover {
background-color: rgba(var(--color-brand-light-green), 0.3);
color: rgb(var(--color-brand-green));
}

.collection-product-grid__active-pill svg {
width: 1em;
height: 1em;
padding: 0.2em;
flex-shrink: 0;
background: rgb(var(--color-brand-navy));
border-radius: 50%;
color: #fff;
transition: background 0.2s;
}

.collection-product-grid__active-pill:hover svg {
background: rgb(var(--color-brand-green));
}

/* ── Product grid main area ── */
.collection-product-grid__main {
flex: 1;
min-width: 0;
width: 100%;
position: relative;
transition: height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
overflow: hidden;
}

.collection-product-grid__main.is-settled {
overflow: visible;
}

.collection-product-grid__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5em;
}

.collection-product-grid__item {
min-width: 0;
}

/* ── Load more button ── */
.collection-product-grid__load-more-wrap {
display: flex;
justify-content: center;
margin-top: 40px;
}

.collection-product-grid__load-more {
font-weight: 600;
text-decoration: none;
position: relative;
overflow: hidden;
border-radius: 0.3em;
padding: 0.6em 1.1em;
display: flex;
gap: 0.75em;
transition: background 0.3s ease;
width: fit-content;
letter-spacing: 0.01em;
background: rgb(var(--color-brand-light-green));
color: rgb(var(--color-brand-navy));
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}

.collection-product-grid__load-more > div {
z-index: 1; display: flex; align-items: center; gap: 0.75em;
}

.collection-product-grid__load-more::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
background: linear-gradient(97deg, rgba(255, 255, 255, 0.50) 0%, rgba(255, 255, 255, 0.00) 55.8%), linear-gradient(277deg, rgba(var(--color-brand-green), 0.25) 0%, rgba(var(--color-brand-green), 0) 55.8%), rgb(var(--color-brand-light-green));
transition: opacity 0.3s ease;
}

.collection-product-grid__load-more:hover::after {
opacity: 1;
}

.collection-product-grid__load-more svg {
width: 1em;
height: 1em;
flex-shrink: 0;
}

.collection-product-grid__load-more.is-loading svg {
animation-duration: 0.9s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}

/* ── Empty state ── */
.collection-product-grid__empty {
padding: 48px 0;
text-align: center;
font-family: var(--font-primary--family, sans-serif);
}

.collection-product-grid__empty-message {
color: rgba(0,38,58,0.5);
font-size: 1rem;
margin: 0 0 16px;
}

.collection-product-grid__empty-clear {
display: inline-block;
padding: 10px 24px;
background: #00263A;
color: #fff;
border-radius: 999px;
font-size: 0.875rem;
font-family: var(--font-primary--family, sans-serif);
text-decoration: none;
cursor: pointer;
transition: background 0.2s;
}

.collection-product-grid__empty-clear:hover {
background: #0a3857;
}

/* ── Mobile Base Drawer Fallbacks ── */
.collection-product-grid__sidebar-backdrop {
display: none;
}
.collection-product-grid__drawer-header {
display: none;
}
body.filters-drawer-open {
overflow: hidden;
}

/* ── Mobile Layout Adjustments ── */
@media (max-width: 900px) {
.collection-product-grid__layout {
flex-direction: column;
}

.collection-product-grid__sidebar {
width: 100%;
flex: none;
position: static;
max-height: none;
overflow-y: visible;
}

.collection-product-grid__grid {
grid-template-columns: repeat(2, 1fr);
}

.collection-product-grid__sidebar-title {
cursor: pointer;
user-select: none;
margin-bottom: 0;
padding: 14px 0;
border-top: 1px solid #e0ddd6;
border-bottom: 1px solid #e0ddd6;
}

.collection-product-grid__sidebar-toggle-icon {
display: flex;
align-items: center;
justify-content: center;
}

/* Transform sidebar into a modern bottom anchored sheet drawer */
.collection-product-grid__sidebar-body {
display: block !important;
position: fixed;
bottom: 0;
left: 0;
right: 0;
width: 100%;
max-height: 80vh;
overflow-y: auto;
background: #fff;
z-index: 1001;
padding: 0 20px 24px;
box-sizing: border-box;
border-top-left-radius: 16px;
border-top-right-radius: 16px;
box-shadow: 0 -10px 30px rgba(0,0,0,0.15);
transform: translateY(100%);
transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.collection-product-grid__sidebar-body.is-open {
transform: translateY(0);
}

.collection-product-grid__sidebar-title.is-open {
border-bottom: 1px solid #e0ddd6;
}

/* Active Drawer Dimming Backdrop */
.collection-product-grid__sidebar-backdrop {
display: block;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 38, 58, 0.4);
z-index: 1000;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
}

.collection-product-grid__sidebar-backdrop.is-open {
opacity: 1;
pointer-events: auto;
}

/* Drawer Sticky Title Header */
.collection-product-grid__drawer-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 0;
border-bottom: 1px solid #e0ddd6;
margin-bottom: 16px;
position: sticky;
top: 0;
background: #fff;
z-index: 10;
}

.collection-product-grid__drawer-title {
font-size: 1.2rem;
font-weight: 700;
color: #00263A;
font-family: var(--font-primary--family, sans-serif);
}

.collection-product-grid__drawer-close {
background: none;
border: none;
padding: 8px;
margin-right: -8px;
cursor: pointer;
color: #00263A;
display: flex;
align-items: center;
justify-content: center;
}

.collection-product-grid__drawer-close svg {
width: 16px;
height: 16px;
}
}

/* Desktop: sidebar body always visible */
@media (min-width: 901px) {
.collection-product-grid__sidebar-body {
display: block !important;
}

.collection-product-grid__sidebar-title {
cursor: default;
}
}

@media (max-width: 540px) {
.collection-product-grid__grid {
grid-template-columns: 1fr;
}

.collection-product-grid__topbar {
flex-direction: column;
align-items: flex-start;
}
}
/* END_SECTION:collection-product-grid */

/* START_SECTION:collection (INDEX:22) */
.collection-products {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
  }
/* END_SECTION:collection */

/* START_SECTION:collections (INDEX:23) */
/* ── Collections grid — shared card styles ─────────────────────────── */
.cls-card {
  display: flex;
  flex-direction: column;
  background: rgb(var(--color-brand-beige-light));
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease, background 0.2s ease;
}

.cls-card:hover {
  background: rgb(var(--color-brand-light-green));
}

.cls-card__img-wrap {
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: #e8e6df;
  flex-shrink: 0;
}

.cls-card__img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}

.cls-card:hover .cls-card__img-wrap img {
  transform: scale(1.04);
}

.cls-card__img-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #b0afa9;
}

.cls-card__img-placeholder svg {
  width: 40px;
  height: 40px;
}

.cls-card__body {
  padding: 20px 24px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.cls-card__title {
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  font-weight: 600;
  color: #00263a;
  margin: 0;
  line-height: 1.2;
  flex: 1;
}

.cls-card__count {
  font-size: 0.8rem;
  color: #6b7280;
  white-space: nowrap;
  flex-shrink: 0;
}

.cls-card__arrow {
  display: flex;
  align-items: center;
  color: #00bc70;
  flex-shrink: 0;
  font-size: 1rem;
}

.cls-card__arrow svg {
  height: 1.2em;
  width: 1.2em;
  position: relative;
  left: 0;
  transition: left 0.2s ease, color 0.2s ease;
}

.cls-card:hover .cls-card__arrow svg {
  color: rgb(var(--color-brand-navy));
  left: 0.2em;
}
/* END_SECTION:collections */

/* START_SECTION:colophon (INDEX:24) */
.colophon {
    background-color: rgb(var(--color-brand-navy));
}

.shopify-section-group-footer-group + .shopify-section-group-footer-group .colophon__inner {
    border-top: 0.1em solid rgb(var(--color-brand-green));
}

.colophon__inner {
    display: flex;
    flex-direction: column;
    gap: 25px;
    padding: 25px 0;
}

.colophon__secure-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-bottom: 1.5rem;
    border-bottom: 0.05em solid rgba(255,255,255,0.25);
    flex-direction: column;
    gap: 1em;
}

.colophon__secure-label {
    display: flex;
    align-items: center;
    gap: 25px;
    color: white;
    font-size: 16px;
    font-family: 'Host Grotesk', sans-serif;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0.32px;
}

.colophon__secure-icon {
    color: white;
    font-size: 14px;
    line-height: 16px;
    letter-spacing: 0.28px;
}

.colophon__payment {
    display: flex;
    gap: 1rem;
    width: 337.5px;
    justify-content: space-between;
    align-items: center;
}

.colophon__copy-row {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    font-size: 0.8em;
    color: rgba(255, 255, 255, 0.5);
    gap: 0.5em;
}

@media screen and (min-width: 1200px) {
    .colophon__copy-row {
        justify-content: space-between;
        flex-direction: row;
        align-items: center;
    }
}

.colophon__copy {
    color: white;
}

.colophon__copy a {
    color: inherit;
    text-decoration: none;
}

.colophon__copy-links {
    display: flex;
    align-items: center;
    gap: 25px;
}

.colophon__copy-credit {
    display: flex;
    align-items: center;
    gap: 0.5em;
    opacity: 0.5;
}

.colophon__copy-credit a {
    display: flex;
    align-items: center;
    color: inherit;
    text-decoration: none;
    gap: 0.2em;
}

.colophon__copy-credit a:hover {
    opacity: 1;
}

.colophon__copy-credit-logo {
    display: inline-block;
    height: 0.9em;
}

.colophon__copy-links {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    align-items: flex-start;
}

@media screen and (min-width: 768px) {
    .colophon__secure-row {
        flex-direction: row;
        align-items: center;
    }

    .colophon__copy-links {
        gap: 1rem;
        flex-direction: row;
    }

    .colophon__copy-links-nav + .colophon__copy-credit {
        border-left: 0.1em solid currentColor;
        padding-left: 1rem;
    }
}

.colophon__copy-links-nav {
    display: flex;
    gap: 1rem;
}

.colophon__copy-links-nav a {
    text-decoration: none;
    color: rgba(255, 255, 255, 0.5);
}
/* END_SECTION:colophon */

/* START_SECTION:custom-section (INDEX:26) */
.custom-section {
    position: relative;
    /* overflow-x: auto lets wide block content scroll rather than clip.
       The background image is self-contained in its own overflow:hidden div
       so it won't trigger an unwanted scrollbar. */
    overflow-x: auto;
    overflow-y: visible;
    width: 100%;
  }
  .custom-section__background {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden; /* keeps the bg image contained */
  }
  .custom-section__background img {
    position: absolute;
    width: 100%;
    height: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .custom-section__content {
    display: grid;
    grid-template-columns: var(--content-grid);
    min-width: 0; /* allow content grid to shrink within the section */
  }
  .custom-section__content > * {
    grid-column: 2;
    min-width: 0; /* allow each block to shrink; content wider than cell scrolls */
    overflow-x: auto;
    overflow-y: visible;
  }
/* END_SECTION:custom-section */

/* START_SECTION:divider (INDEX:27) */
.divider {
  height: 0.1em;
  width: 100%;
  position: relative;
}
/* END_SECTION:divider */

/* START_SECTION:dynamic-card-carousel (INDEX:28) */
.dcc-wrap {
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: 2em;
}

/* Header */
.dcc-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1em;
}

.dcc-heading-area {
display: flex;
align-items: center;
gap: 12px;
flex: 1;
min-width: 0;
}

.dcc-nav {
display: flex;
align-items: center;
gap: 0.5em;
flex-shrink: 0;
}

/* Track */
.dcc-track-wrap {
overflow: hidden;
position: relative;
}

.dcc-track-wrap::before,
.dcc-track-wrap::after {
content: '';
position: absolute;
top: 0;
width: 80px;
height: 100%;
pointer-events: none;
z-index: 10;
opacity: 0;
transition: opacity 0.2s ease;
}

.dcc-track-wrap::before {
left: 0;
background: linear-gradient(to right, rgba(255,255,255,0.9), transparent);
}

.dcc-track-wrap::after {
right: 0;
background: linear-gradient(to left, rgba(255,255,255,0.9), transparent);
}

.dcc-track-wrap.show-fade-left::before  { opacity: 1; }
.dcc-track-wrap.show-fade-right::after  { opacity: 1; }

.dcc-track {
display: flex;
align-items: flex-start;
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: none;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
overscroll-behavior-x: contain;
gap: 1.5em;
cursor: default;
user-select: none;
-webkit-user-select: none;
}

.dcc-track:has(.dcc-hc-group) {
gap: 2.5em;
}

.dcc-track::-webkit-scrollbar { display: none; }
.dcc-track[data-draggable="true"] { cursor: grab; }
.dcc-track[data-draggable="true"].is-dragging {
cursor: grabbing;
scroll-behavior: auto;
}

/* Scrollbar */
.dcc-scrollbar {
position: relative;
width: 100%;
height: 4px;
background: #d9d9d9;
border-radius: 999px;
overflow: hidden;
transition: opacity 0.2s ease;
}

.dcc-scrollbar.is-hidden {
opacity: 0;
pointer-events: none;
display: none;
}

.dcc-scrollbar__thumb {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 20%;
background: rgb(var(--color-brand-green));
border-radius: 999px;
transition: left 0.1s linear, width 0.1s linear;
will-change: left, width;
}

@media screen and (max-width: 749px) {
.dcc-track-wrap::before,
.dcc-track-wrap::after { width: 40px; }
}
/* END_SECTION:dynamic-card-carousel */

/* START_SECTION:featured-collection-grid (INDEX:29) */
/* ─────────────────────────────────────────────────────────────────────────────
   Shared product-card styles for featured-collection-grid
   Single source of truth for all dynamic tab blocks in this section
   (_collection-grid-tab-recent, -search, -recommended).
   Hoisted to <head> once by Shopify regardless of how many blocks render.
───────────────────────────────────────────────────────────────────────────── */

/* ── Card shell ── */
.product-card {
  height: 100%;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: #F9F7F0;
  transition: background 0.3s ease;
  cursor: pointer;
}
.product-card:hover {
  background: linear-gradient(0deg, rgba(255,255,255,0.25), rgba(255,255,255,0.25)), #C6DE82;
}

/* ── Image ── */
.product-card__image {
  aspect-ratio: 1 / 1;
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 10px 10px 0 0;
}
.product-card__img {
  height: 100%;
  object-fit: cover;
  display: block;
  width: 100%;
  transition: transform 0.4s ease;
}
.product-card:hover .product-card__img { transform: scale(1.05); }

/* ── Top row (badge + cart btn) ── */
.product-card__top {
  position: absolute;
  top: 20px; left: 20px; right: 20px;
  display: flex;
  justify-content: space-between;
  z-index: 1;
  align-items: center;
}

/* ── Cart button ── */
.product-card .cart-btn {
  width: 41px; height: 41px;
  background: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: rgb(var(--color-brand-navy));
  position: relative;
  transition: background 0.3s ease;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.product-card .cart-btn:hover { background: #C6DE82; }
.product-card .cart-btn svg { width: 1.1em; }
.product-card .cart-btn--loading,
.product-card .cart-btn--loading:hover {
  animation: cart-btn-add-badge-pulse 0.5s infinite ease-in-out;
  animation-direction: alternate;
  background: #fff;
  color: rgb(var(--color-brand-navy));
}

/* ── Cart badge ── */
.product-card .cart-btn .cart-btn-add-badge {
  position: absolute;
  top: -0.25em; right: -0.25em;
  width: 1em; height: 1em;
  background: rgb(var(--color-brand-light-green));
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  transition: transform 0.2s cubic-bezier(.4,0,0,1), background 0.3s cubic-bezier(.4,0,0,1),
              color 0.3s cubic-bezier(.4,0,0,1), box-shadow 0.3s cubic-bezier(.4,0,0,1);
}
.product-card .cart-btn-add-badge svg { width: 0.5em; }
.product-card .cart-btn:hover .cart-btn-add-badge {
  transform: scale(1.2);
  color: rgb(var(--color-brand-navy));
  box-shadow: 0 0.1em 0.2em rgba(0,0,0,0.25);
}
.product-card .cart-btn .cart-btn-add-badge span {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}
.product-card .cart-btn .cart-btn-add-badge:not(.cart-btn-add-badge--added) .cart-btn-add-badge--check { visibility: hidden; opacity: 0; }
.product-card .cart-btn:not(.cart-btn--loading) .cart-btn-add-badge .cart-btn-add-badge--loading { visibility: hidden; opacity: 0; }
.product-card .cart-btn .cart-btn-add-badge.cart-btn-add-badge--added .cart-btn-add-badge--check { visibility: visible; opacity: 1; }
.product-card .cart-btn.cart-btn--loading .cart-btn-add-badge .cart-btn-add-badge--loading { visibility: visible; opacity: 1; }
.product-card .cart-btn .cart-btn-add-badge--added .cart-btn-add-badge--plus,
.product-card .cart-btn.cart-btn--loading .cart-btn-add-badge .cart-btn-add-badge--plus { visibility: hidden; opacity: 0; }
.product-card .cart-btn .cart-btn-add-badge.cart-btn-add-badge--added,
.product-card .cart-btn:hover .cart-btn-add-badge.cart-btn-add-badge--added {
  transform: scale(1.5);
  background: rgb(var(--color-brand-green));
  color: #fff;
  box-shadow: none;
}
.cart-btn-add-badge--loading svg {
  width: 0.5em; height: 0.5em;
  transform-origin: center;
  animation: cart-btn-loading-spin 1s linear infinite;
}
@keyframes cart-btn-add-badge-pulse { from { opacity: 1; } to { opacity: 0.5; } }
@keyframes cart-btn-loading-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* ── Content area ── */
.product-card__content {
  padding: 2em;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 25px;
  background: #F9F7F0;
  transition: background 0.3s ease, transform 0.3s ease;
  flex: 1;
  position: relative;
}
.product-card:hover .product-card__content {
  background: linear-gradient(0deg, rgba(255,255,255,0.25), rgba(255,255,255,0.25)), #C6DE82;
  transform: translateY(-0.75em);
}
.product-card__content-top { display: flex; flex-direction: column; gap: 0.5em; }
.product-card__brand { font-size: 15px; color: rgb(var(--color-brand-navy)); }
.product-card__title { font-size: 17px; font-weight: 600; color: rgb(var(--color-brand-navy)); }
.price-old { font-size: 15px; color: rgba(0,38,58,0.5); text-decoration: line-through; }
.price { font-size: 17px; font-weight: 600; color: rgb(var(--color-brand-navy)); }

/* ── Stock badge (used by JS-built dynamic cards) ── */
.sb-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px 6px 8px;
  background: #00263A;
  border-radius: 100px;
  line-height: 1;
}
.sb-badge__dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.sb-badge__text {
  color: #fff;
  font-size: 12px; font-weight: 600;
  font-family: var(--font-primary--family, sans-serif);
  white-space: nowrap;
}
/* END_SECTION:featured-collection-grid */

/* START_SECTION:footer (INDEX:30) */
.footer {
  background: rgb(var(--color-brand-navy));
}

.footer__inner {
  display: flex;
  flex-direction: column;
  margin-bottom: 2em;
  color: #fff;
}

.footer__top-bar {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  height: 54px;
}

.footer__logo {
  width: 15em;
}

.footer__logo svg {
  color: #fff;
}

.footer__tagline {
  width: 21em;
}

.footer__tagline svg {
  color: #fff;
}

.footer__columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));
  gap: 1.5em;
}

.footer .footer__columns .shopify-section-group {
  flex: 1;
}

.footer .footer__columns .shopify-section-group .group {
  height: 100%;
}

.footer .footer__columns .shopify-section-group .group .group--horizontal {
  align-items: flex-end;
}

.footer .footer__columns .shopify-block-heading {
  width: 100%;
}

.footer .footer__columns .shopify-section-link-list {
  width: 100%;
}

@media screen and (min-width: 768px) {
  .footer__columns {
    grid-template-columns: repeat(auto-fit, minmax(calc(50% - 2em), 1fr));
  }
}

@media screen and (min-width: 1200px) {
.footer__columns {
grid-template-columns: repeat(auto-fit, minmax(calc(25% - 2em), 1fr));
}
}

.footer h3 {
  padding-bottom: 1.25em;
  border-bottom: 0.1em solid rgba(var(--color-brand-green));
  width: 100%;
  display: block;
  margin-bottom: 0.5em;
  color: #fff;
  font-size: 1.1em;
  font-weight: 600;
}

.footer h4 {
  margin-top: 0 !important;
  color: #fff;
}

.footer p {
  margin-bottom: 0 !important;
}

.footer p + p {
margin-top: 1em !important;
}

/* link-list block stylesheet is not emitted inside section groups —
   reset list styling here so bullets don't appear in the footer nav */
.footer .link-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer .link-list__item {
  list-style: none;
}
/* END_SECTION:footer */

/* START_SECTION:grid-layout (INDEX:31) */
/* ── Grid shell (static — no per-instance settings) ───────────────────────── */
.grid-layout__grid {
display: grid;
grid-auto-rows: auto;
}

/* ── Cell shell (static — spans are handled per-instance in <style>) ─────── */
.grid-layout__cell {
min-width: 0; /* allow cell to shrink below content size */
overflow-x: auto; /* scroll rather than clip if content overflows */
overflow-y: visible;
display: flex;
}

.grid-layout__cell > * {
flex: 1;
}
/* END_SECTION:grid-layout */

/* START_SECTION:header-background (INDEX:32) */
.section-header-background::before {
    content: "";
    display: absolute;
    inset: 0;
    height: 100vh;
    width: 100vw;
    background-size: 100%;
    background-position: top center;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: -1;
}

.section-header-background {
    position: relative;
    height: var(--header-height);
}
/* END_SECTION:header-background */

/* START_SECTION:header (INDEX:33) */
/* ── Header Base Setup ── */

header {
position: fixed;
top: 0;
left: 0;
z-index: 100;
display: flex;
flex-direction: column;
width: 100%;
padding: 0 var(--page-margin);
background: transparent;
transition: background 0.3s cubic-bezier(.4,0,0,1), padding 0.3s cubic-bezier(.4,0,0,1), box-shadow 0.3s cubic-bezier(.4,0,0,1), top 0.3s cubic-bezier(.4,0,0,1);
box-sizing: border-box;
--nav-background-material: #ffffff;
--nav-foreground-colour: rgb(var(--color-brand-navy));
pointer-events: none;
}

/* When an announcement bar is present, push the header below it until the
   header switches to its scrolled/sticky state, at which point it reclaims
   the full top of the viewport. Detected purely in CSS via :has() so this
   works even when the theme editor injects the bar via AJAX section
   rendering (inline <script> tags in injected HTML never execute). */
body:has(.announcement-bar) header:not(.scrolled) {
top: var(--announcement-bar-height, 48px);
}

header.has-inner-focus {
background: rgb(var(--color-brand-navy));
backdrop-filter: blur(10px);
box-shadow: 0 4px 20px rgba(0,0,0,0.15);
pointer-events: auto;
}

[data-hero-colour="dark"] header.in-hero,
header.has-inner-focus {
--nav-background-material: rgba(0,0,0,0.2);
--nav-foreground-colour: #ffffff;
}

header.scrolled {
--nav-background-material: rgba(var(--color-brand-navy), 0.5);
--nav-foreground-colour: #ffffff;
}

/* ── Progressive Blur ── */

.header-progressive-blur {
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
left: 0;
right: 0;
pointer-events: none;
height: 10rem;
display: block;
}

header:not(.scrolled) .header-progressive-blur,
header.has-inner-focus .header-progressive-blur,
header.scrolled:has(.menu-bar.open) .header-progressive-blur {
display: none;
}

.header-progressive-blur > div,
.header-progressive-blur::before,
.header-progressive-blur::after {
position: absolute;
inset: 0;
}
.header-progressive-blur::before {
content: "";
z-index: 1;
backdrop-filter: blur(0.5px);
mask: linear-gradient(
to top,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 1) 12.5%,
rgba(0, 0, 0, 1) 25%,
rgba(0, 0, 0, 0) 37.5%
);
}
.header-progressive-blur > div:nth-of-type(1) {
z-index: 2;
backdrop-filter: blur(1px);
mask: linear-gradient(
to top,
rgba(0, 0, 0, 0) 12.5%,
rgba(0, 0, 0, 1) 25%,
rgba(0, 0, 0, 1) 37.5%,
rgba(0, 0, 0, 0) 50%
);
}
.header-progressive-blur > div:nth-of-type(2) {
z-index: 3;
backdrop-filter: blur(2px);
mask: linear-gradient(
to top,
rgba(0, 0, 0, 0) 25%,
rgba(0, 0, 0, 1) 37.5%,
rgba(0, 0, 0, 1) 50%,
rgba(0, 0, 0, 0) 62.5%
);
}
.header-progressive-blur > div:nth-of-type(3) {
z-index: 4;
backdrop-filter: blur(4px);
mask: linear-gradient(
to top,
rgba(0, 0, 0, 0) 37.5%,
rgba(0, 0, 0, 1) 50%,
rgba(0, 0, 0, 1) 62.5%,
rgba(0, 0, 0, 0) 75%
);
}
.header-progressive-blur > div:nth-of-type(4) {
z-index: 5;
backdrop-filter: blur(8px);
mask: linear-gradient(
to top,
rgba(0, 0, 0, 0) 50%,
rgba(0, 0, 0, 1) 62.5%,
rgba(0, 0, 0, 1) 75%,
rgba(0, 0, 0, 0) 87.5%
);
}
.header-progressive-blur > div:nth-of-type(5) {
z-index: 6;
backdrop-filter: blur(16px);
mask: linear-gradient(
to top,
rgba(0, 0, 0, 0) 62.5%,
rgba(0, 0, 0, 1) 75%,
rgba(0, 0, 0, 1) 87.5%,
rgba(0, 0, 0, 0) 100%
);
}
.header-progressive-blur > div:nth-of-type(6) {
z-index: 7;
backdrop-filter: blur(32px);
mask: linear-gradient(
to top,
rgba(0, 0, 0, 0) 75%,
rgba(0, 0, 0, 1) 87.5%,
rgba(0, 0, 0, 1) 100%
);
}
.header-progressive-blur::after {
content: "";
z-index: 8;
backdrop-filter: blur(64px);
mask: linear-gradient(
to top,
rgba(0, 0, 0, 0) 87.5%,
rgba(0, 0, 0, 1) 100%
);
}

/* ── Links ── */

header a {
position: relative;
text-decoration: none;
color: var(--color-foreground);
display: flex;
align-items: center;
justify-content: center;
}

header a sup {
position: absolute;
left: 100%;
overflow: hidden;
max-width: var(--page-margin);
}

/* ── Primary Row Structure ── */

.header__primary {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
margin: 1.9em 0;
gap: 1.5rem;
transition: all 0.3s cubic-bezier(.4,0,0,1);
pointer-events: auto;
}

.header__logo { flex: 1; display: flex; align-items: center; justify-content: flex-start; }
header.scrolled .header__logo { flex: 0 0 auto; }

.logo-sticky { display: none; }
.logo-default { position: relative; }
header.scrolled .logo-default { display: none; }
header.scrolled .logo-sticky { display: block; position: relative; }

.header__logo svg {
height: 3em;
color: rgb(var(--color-brand-navy));
}

header.has-inner-focus .header__logo svg,
[data-hero-colour="dark"] header.in-hero .header__logo svg {
color: #fff;
}

header.has-inner-focus .header__logo svg {
transition: color 0.2s ease-in-out, height 0.3s ease;
}

.header__search-container {
pointer-events: auto;
}

header > .header__search-container {
display: none;
position: absolute;
left: 0;
right: 0;
top: 0.75em;
justify-content: center;
margin: 0 auto;
max-width: 50vw;
}

/* ── Sticky Nav ── */

.header__sticky-nav {
position: absolute;
display: flex;
background: var(--nav-background-material);
border: none;
border-radius: 12px;
padding: 6px;
gap: 6px;
align-items: center;
opacity: 0;
pointer-events: none;
width: max-content;
visibility: hidden;
left: 2em;
transition: background 0.2s ease, left 0.1s cubic-bezier(.4,0,0,1), opacity 0.1s ease, visibility 0.2s ease;
}

.header__sticky-nav .mega-toggle {
height: 40px;
display: flex;
align-items: center;
border-radius: 8px;
padding: 0 14px;
}

.header__sticky-nav .nav-hamburger { border: none; cursor: pointer; }

/* ── Header Left & Actions ── */

.header__left {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 1em;
position: relative;
}

.header__actions {
flex: 1;
display: flex;
align-items: center;
justify-content: flex-end;
gap: 0.4rem;
padding: 6px;
transition: background 0.2s ease;
position: relative;
right: -0.4em;
}

.header__actions .button { display: none !important; }

.header__actions > a,
.header__actions > shopify-account {
display: flex;
border-radius: 8px;
}

.header__actions > a:not(.button),
.header__actions > shopify-account {
background: var(--nav-background-material);
height: 40px;
min-width: 40px;
display: flex;
align-items: center;
justify-content: center;
color: var(--nav-foreground-colour);
transition: background 0.2s ease;
}

.header__actions svg { width: 1.25rem; height: 1.25rem; }

/* ── Cart Count ── */

.cart-item-count {
position: absolute;
top: -0.75em;
right: -0.75em;
background: rgb(var(--color-brand-navy));
color: #fff;
border-radius: 50%;
font-size: 0.75em;
font-weight: 500;
height: 1.2rem;
width: 1.2rem;
display: flex;
align-items: center;
justify-content: center;
}

.cart-item-count.is-hidden {
display: none !important;
}

/* ── Menu Bar Transitions ── */

.menu-bar .mega-toggle-container,
.menu-bar .nav-right {
transition: visibility 0.2s ease 0s, display 0.2s ease, opacity 0.2s ease;
transition-behavior: allow-discrete;
}

/* ── Mega Column Placeholder ── */

.mega-col__placeholder {
display: block;
visibility: hidden;
transition: visibility 0.2s ease, opacity 0.2s ease;
height: 0;
opacity: 0;
margin-left: 1em;
margin-right: 1em;
}

.mega-col__placeholder.visible {
visibility: visible;
height: 100%;
opacity: 1;
}

/* ── Menu Bar ── */

.menu-bar {
background: var(--nav-background-material);
flex: 1;
width: calc(100% + 1rem);
padding: 0.5rem;
border-radius: 0.75rem;
backdrop-filter: blur(10px);
position: relative;
transition: all 0.3s cubic-bezier(.4,0,0,1);
inset: 0 -0.5rem;
margin: 0 0 1rem;
font-size: 0.95rem;
letter-spacing: 0.015em;
opacity: 1;
pointer-events: auto;
}

.menu-bar.open .nav-container { border-bottom: 1px solid rgba(255, 255, 255, 0.1); padding-bottom: 0.75rem; }

.menu-bar.open {
width: calc(100% + 1.5rem);
padding: 0.75rem;
border-radius: 1rem;
inset: -0.25rem -0.75rem;
margin: 0 0 0.25rem;
}

/* ── Nav Container ── */

.nav-container {
display: flex;
align-items: center;
justify-content: space-between;
transition: all 0.4s cubic-bezier(.4, 0, 0, 1);
border-bottom: 1px solid transparent;
}

.nav-left { display: flex; gap: 0.5em; align-items: center; list-style: none; margin: 0; padding: 0; }
.nav-left a { text-decoration: none; border-radius: 0.3em; padding: 0.6em 1.1em; display: flex; gap: 0.75em; transition: background 0.3s ease; }
.nav-left a:not(.mega-toggle) { color: var(--nav-foreground-colour); }

[data-hero-colour="light"] header:not(.scrolled):not(:has(.menu-bar.open)) .nav-left a:not(.mega-toggle):hover,
[data-hero-colour="light"] header:not(.scrolled):not(:has(.menu-bar.open)) .nav-left a:not(.mega-toggle).active {
background: rgb(var(--color-brand-beige));
}
.nav-left a:not(.mega-toggle):hover,
.nav-left a:not(.mega-toggle).active {
background: rgb(var(--color-brand-navy));
}

/* ── Mega Toggle ── */

.mega-toggle {
background: rgb(var(--color-brand-light-green));
color: rgb(var(--color-brand-navy));
font-weight: 600;
text-decoration: none;
transition: background 0.3s ease;
position: relative;
overflow: hidden;
}

.mega-toggle > div { z-index: 1; display: flex; align-content: center; gap: 0.75em; }
.mega-toggle:hover .mega-toggle-icons { transform: scale(1.1); }
.mega-toggle-icons { display: flex; align-items: center; gap: 0.5em; transition: transform 0.2s ease; }
.mega-toggle svg { width: 1em; }

header.mega-open .mega-toggle-icons { transform: scale(1); }
header.mega-open .mega-toggle-icon-closed,
header:not(.mega-open) .mega-toggle-icon-open { display: none; }

.mega-toggle::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
background: linear-gradient(97deg, rgba(255, 255, 255, 0.50) 0%, rgba(255, 255, 255, 0.00) 55.8%), linear-gradient(277deg, rgba(var(--color-brand-green), 0.25) 0%, rgba(var(--color-brand-green), 0) 55.8%), rgb(var(--color-brand-light-green));
transition: opacity 0.3s ease;
}

.mega-toggle:hover::after { opacity: 1; }
header.mega-open .mega-toggle::after { opacity: 0; transition: opacity 0.1s ease; }
header.mega-open .mega-toggle { background: rgb(var(--color-brand-green)); transition: background 0.1s ease; }

/* ── Nav Right ── */

.nav-right { display: flex; align-items: center; gap: 0.5em; }
.nav-text { font-weight: 600; color: var(--nav-foreground-colour); }

.call-btn {
background: #ffffff;
color: rgb(var(--color-brand-navy));
padding: 8px 14px;
border-radius: 8px;
text-decoration: none;
font-weight: 600;
display: flex;
align-items: center;
gap: 0.5em;
}

.call-btn .icon { width: 1em; height: 1em; }

/* ── Desktop: hide mobile-only elements ── */

.mega-mobile { display: none; }
.nav-container .nav-hamburger { display: none; }
.nav-right .nav-hamburger { display: none; }

.mega-header { font-size: 1.6em; }

/* ── Shared icon / link styles ── */

.mega-icon,
.mega-icon-generic-object {
flex-shrink: 0; opacity: 0.8; height: 14px; width: 14px;
object-fit: contain; object-position: center;
}
.mega-icon { filter: drop-shadow(0 100px 0 currentColor); transform: translateY(-100px); }
.mega-link-title-group { display: flex; align-items: center; gap: 15px; }

/* ── Desktop Mega Menu ── */

.mega-menu { height: var(--mega-h, 0px); overflow: hidden; transition: height 0.3s cubic-bezier(.4,0,0,1); }
.mega-menu h2 {
color: #fff;
padding: 0.5em 1em;
grid-column: span 3;
}
.mega-columns { display: grid; grid-template-columns: repeat(3, 1fr); padding: 12px 0 16px; }
.mega-col { list-style: none; margin: 0; padding: 0 8px; max-height: 40vh; overflow-y: scroll; position: relative; }

.mega-col.overflowing::after {
display: block;
content: '';
position: sticky;
bottom: 0;
width: 100%;
height: 2em;
z-index: 1;
mix-blend-mode: multiply;
background: linear-gradient(0deg, rgba(var(--color-brand-navy), 1) 0%, rgba(var(--color-brand-navy), 0) 100%);
pointer-events: none;
}

@supports not selector(::-webkit-scrollbar) {
.mega-col.overflowing {
scrollbar-color: rgb(var(--color-brand-light-green)) rgba(255, 255, 255, 0.2);
scrollbar-width: thin;
scrollbar-gutter: stable;
scrollbar-track-color: rgba(255,255,255,0.2);
scrollbar-highlight-color: #fff;
}
}

@supports selector(::-webkit-scrollbar) {
.mega-col.overflowing::-webkit-scrollbar {
-webkit-appearance: none;
width: 0.5rem;
}

.mega-col.overflowing::-webkit-scrollbar-thumb {
background-color: rgb(var(--color-brand-light-green));
border-radius: 10px;
}

.mega-col.overflowing::-webkit-scrollbar-track {
background-color: rgba(255,255,255,0.2);
border-radius: 10px;
}
}

.mega-col:last-child { border-right: none; }
.mega-col__item a {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
padding: 1em 1.25em; border-radius: 6px; color: rgba(255, 255, 255, 0.75);
text-decoration: none; transition: background 0.15s ease, color 0.15s ease; overflow: hidden; font-size: 0.95em;
}
.mega-col__item.active > a, .mega-col__item:hover > a { background: rgba(255, 255, 255, 0.05); color: rgb(var(--color-brand-light-green)); }
.mega-col__item--all { margin-top: 4px; border-top: 1px solid rgba(255, 255, 255, 0.08); padding-top: 4px; }
.mega-arrow { margin-left: auto; opacity: 0.4; font-size: 1.1em; line-height: 1; transition: left 0.1s ease; position: relative; left: 0; flex-shrink: 0; }
.mega-arrow svg { width: 1em; height: 1em; }
.mega-col__item > a:hover .mega-arrow, .mega-col__item.active > a .mega-arrow { left: 0.2em; }
.mega-col__item.active > a .mega-arrow { opacity: 1; }
.mega-col--l1, .mega-col--l2 { opacity: 0; transition: opacity 0.15s ease; }
.mega-col--l1.visible, .mega-col--l2.visible { opacity: 1; }

/* ── Nav Drawer ── */

.nav-drawer {
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: min(320px, 85vw);
background: rgb(var(--color-brand-navy));
z-index: 2000;
display: flex;
flex-direction: column;
transform: translateX(-100%);
transition: transform 0.3s cubic-bezier(.4,0,0,1);
overflow-y: auto;
pointer-events: auto;
}

.nav-drawer.is-open { transform: translateX(0); }
.nav-drawer__backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: 1999; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }
.nav-drawer__backdrop.is-open { opacity: 1; pointer-events: auto; }
.nav-drawer__inner { display: flex; flex-direction: column; height: 100%; padding: 1.5rem 0; }
.nav-drawer__links { list-style: none; margin: 0; padding: 0 1rem; flex: 1; }
.nav-drawer__link { display: block; padding: 0.85em 1em; border-radius: 8px; color: rgba(255, 255, 255, 0.8); text-decoration: none; transition: background 0.15s ease, color 0.15s ease; }
.nav-drawer__link:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.nav-drawer__footer { padding: 1rem 1.5rem; border-top: 1px solid rgba(255, 255, 255, 0.08); margin-top: 1rem; }
.nav-drawer__call { display: flex; align-items: center; gap: 0.6em; color: rgba(255, 255, 255, 0.6); text-decoration: none; transition: color 0.15s ease; }
.nav-drawer__call:hover { color: #fff; }
.nav-drawer__call .icon { width: 1em; height: 1em; opacity: 0.6; }

/* ── min-width: 1200px ── */

@media (min-width: 1200px) {
.menu-bar {
width: calc(100% + 2rem);
padding: 1rem;
border-radius: 1.25rem;
inset: 0 -1rem;
margin: 0 0 1.75rem;
}

.menu-bar.open {
width: calc(100% + 3rem);
inset: -0.5rem -1.5rem;
padding: 1.5rem;
margin: 0 0 0.5rem;
border-radius: 1.5rem;
background: rgba(0, 0, 0, 0.25);
}

.menu-bar.open .nav-container { padding-bottom: 1.5rem; }
}

/* ── min-width: 1024px ── */

@media (min-width: 1024px) {
.mobile-content { display: none; }

header > .header__search-container { display: flex; }
.nav-right .header__search-container { display: none; }
.nav-right { gap: 1.5em; }

header.scrolled .header__actions > a:not(.button),
header.scrolled .header__actions > shopify-account {
background: rgba(255, 255, 255, 0.08);
}

header.scrolled .menu-bar .mega-toggle-container,
header.scrolled .menu-bar .nav-right {
visibility: hidden;
display: none;
opacity: 0;
}

header.scrolled .header__sticky-nav {
opacity: 1;
pointer-events: auto;
visibility: visible;
left: 4em;
transition: background 0.2s ease, left 0.3s cubic-bezier(.4,0,0,1), opacity 0.3s ease, visibility 0.2s ease;
}

header.scrolled .header__logo svg { height: 2.475em; top: -0.15em; position: relative; }

header.scrolled .header__actions {
background: var(--nav-background-material);
border: none;
border-radius: 12px;
gap: 0.7rem;
flex: 0 0 auto;
}

header.scrolled .header__actions .button { display: flex !important; margin-right: -0.35em; }

header.scrolled .menu-bar {
margin: -0.25em 0 1.75rem;
visibility: hidden;
opacity: 0;
top: -1em;
transition: top 0.3s cubic-bezier(.4,0,0,1), opacity 0.3s cubic-bezier(.4,0,0,1), visibility 0.3s cubic-bezier(.4,0,0,1);
}

header.scrolled .menu-bar.open {
background: rgba(0, 0, 0, 0.25);
padding: 1.5rem;
top: -0.25rem;
border-radius: 1.25rem;
margin-bottom: 1rem;
visibility: visible;
opacity: 1;
}

[data-hero-colour="light"] header:not(.scrolled):not(:has(.menu-bar.open)) .nav-right .button {
background: var(--nav-foreground-colour) !important;
color: var(--nav-background-material) !important;
}

[data-hero-colour="light"] header:not(.scrolled):not(:has(.menu-bar.open)) .nav-right .button:hover {
background: rgb(var(--color-brand-navy-light)) !important;
}
}

/* ── max-width: 1300px ── */

@media (max-width: 1300px) {
.nav-text { display: none; }
}

/* ── max-width: 1024px ── */

@media (max-width: 1024px) {
header.scrolled .header__primary { margin: 0.5rem 0; }
header.scrolled .header__logo svg { height: 2em; }
}

/* ── max-width: 1023px ── */

@media (max-width: 1023px) {
.desktop-content { display: none; }

.header__actions { right: -0.7em; }

.header__action > * { background: var(--nav-background-material); }

.nav-right .button {
height: 2.6em;
width: 2.6em;
padding: 0;
background: rgba(255,255,255,0.2) !important;
color: #fff !important;
}

.mega-columns { display: none; }
.mega-mobile { display: block; padding: 8px 0 12px; }
.menu-bar.open .mega-menu { overflow-y: auto; }
.nav-main-link { display: none; }

.nav-right .nav-hamburger {
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.2);
border: none;
border-radius: 0.4em;
padding: 0.5em;
cursor: pointer;
color: #fff;
transition: background 0.2s ease;
width: 3em;
height: 3em;
}
.nav-right .nav-hamburger:hover { background: rgba(255, 255, 255, 0.18); }
.nav-hamburger__icon, .nav-hamburger__icon svg { width: 1.25em; height: 1.25em; }
.nav-hamburger__icon--close { display: none; }
.nav-hamburger.is-open .nav-hamburger__icon--open { display: none; }
.nav-hamburger.is-open .nav-hamburger__icon--close { display: block; }

.mega-mobile__header { display: flex; align-items: center; gap: 8px; padding: 4px 8px 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); margin-bottom: 6px; }
.mega-mobile__back { display: flex; align-items: center; gap: 6px; background: none; border: none; color: rgba(255, 255, 255, 0.6); font-size: 0.85rem; cursor: pointer; padding: 6px 10px; border-radius: 6px; transition: color 0.15s ease, background 0.15s ease; }
.mega-mobile__back:hover { color: #fff; background: rgba(255, 255, 255, 0.06); }
.mega-mobile__back svg { width: 1em; height: 1em; }
.mega-mobile__breadcrumb { font-size: 0.8rem; color: rgba(255, 255, 255, 0.35); margin-left: auto; }
.mega-mobile__panel { list-style: none; margin: 0; padding: 0 8px; animation: mobilePanelIn 0.2s ease; }
.mega-mobile__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 13px 20px; border-radius: 6px; color: rgba(255, 255, 255, 0.75); text-decoration: none; font-size: 0.9rem; background: none; border: none; cursor: pointer; text-align: left; box-sizing: border-box; transition: background 0.15s ease, color 0.15s ease; overflow: hidden; }
.mega-mobile__row:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.mega-mobile__item--all { margin-top: 4px; border-top: 1px solid rgba(255, 255, 255, 0.08); padding-top: 4px; }
.mega-mobile__item--all .mega-mobile__row { color: rgba(255, 255, 255, 0.5); font-size: 0.85rem; }
.mega-mobile__item--all .mega-mobile__row:hover { color: #b7e26a; }

@keyframes mobilePanelIn {
from { opacity: 0; transform: translateX(12px); }
to   { opacity: 1; transform: translateX(0); }
}

/* ── Light hero: override variables so all nav-material consumers respond at once ── */

[data-hero-colour="light"] header.in-hero:not(.scrolled):not(:has(.menu-bar.open)) {
--nav-background-material: rgba(var(--color-brand-navy), 0.08) !important;
--nav-foreground-colour: rgb(var(--color-brand-navy)) !important;
}

[data-hero-colour="light"] header.in-hero:not(.scrolled):not(:has(.menu-bar.open)) .cart-item-count {
background: rgb(var(--color-brand-navy));
color: #fff;
}

/* ── Mobile search expanded: hide other nav elements ── */

.menu-bar:has(.search-bar-inner.is-open) .nav-left,
.menu-bar:has(.search-bar-inner.is-open) .nav-right > .mobile-content,
.menu-bar:has(.search-bar-inner.is-open) .nav-right > .nav-hamburger {
display: none;
}

.menu-bar:has(.search-bar-inner.is-open) .nav-right {
flex: 1;
}


.menu-bar:has(.search-bar-inner.is-open) .nav-right .header__search-container {
flex: 1;
width: 100%;
}

[data-hero-colour="light"] header.in-hero:not(.scrolled):not(:has(.menu-bar.open)) .nav-right .button,
[data-hero-colour="light"] header.in-hero:not(.scrolled):not(:has(.menu-bar.open)):not(:has(.search-bar-inner.is-open)) .nav-right .search-bar-button,
[data-hero-colour="light"] header.in-hero:not(.scrolled):not(:has(.menu-bar.open)) .nav-right .nav-hamburger {
background: rgba(var(--color-brand-navy), 0.1) !important;
color: rgb(var(--color-brand-navy)) !important;
}

}

/* ── Light hero icon colour fix ── */

/* ── max-width: 600px ── */

@media (max-width: 600px) {
.call-btn span:not(.icon) { display: none; }
.call-btn { padding: 0.5em; border-radius: 0.4em; }
}

@media (max-width: 1023px) {
[data-hero-colour="light"] header:has(.search-bar-inner.is-open),
[data-hero-colour="light"] header:has(.search-bar-inner.is-open).in-hero:not(.scrolled) {
--nav-background-material: rgba(0,0,0,0.2) !important;
--nav-foreground-colour: #ffffff !important;
}
}
/* END_SECTION:header */

/* START_SECTION:image-carousel (INDEX:36) */
.logo-carousel-wrap {
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: 2em;
}

/* Header */
.logo-carousel-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1em;
}

.logo-carousel-heading {
display: flex;
align-items: center;
gap: 12px;
}

.logo-carousel-nav {
display: flex;
align-items: center;
gap: 0.5em;
flex-shrink: 0;
margin-left: auto;
}

/* Track */
.logo-carousel-outer {
overflow: hidden;
position: relative;
-webkit-mask-image: linear-gradient(to right, transparent, #000 10em, #000 calc(100% - 10em), transparent);
mask-image: linear-gradient(to right, transparent, #000 10em, #000 calc(100% - 10em), transparent);
}

.logo-track {
display: flex;
gap: 3em;
align-items: center;
width: max-content;
will-change: transform;
}

.logo-track[data-draggable="true"] { cursor: grab; }
.logo-track[data-draggable="true"].is-dragging { cursor: grabbing; }

/* Override block defaults so images size correctly inside the track */
.logo-track > * {
flex-shrink: 0 !important;
width: auto !important;
height: auto !important;
min-width: 0 !important;
max-width: none !important;
overflow: visible !important;
}

.logo-track > * img {
display: block !important;
width: auto !important;
max-width: 220px !important;
max-height: 100px !important;
min-width: 80px;
height: auto !important;
object-fit: contain !important;
object-position: center;
padding: 0.5em 1.5em;
opacity: 0.85;
transition: opacity 0.3s ease;
pointer-events: none;
}

.logo-track > *:hover img { opacity: 1; }

/* Scrollbar */
.logo-carousel-scrollbar {
position: relative;
width: 100%;
height: 4px;
background: #d9d9d9;
border-radius: 999px;
overflow: hidden;
}

.logo-carousel-scrollbar__thumb {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 20%;
background: rgb(var(--color-brand-green));
border-radius: 999px;
transition: left 0.1s linear, width 0.1s linear;
will-change: left, width;
}
/* END_SECTION:image-carousel */

/* START_SECTION:page (INDEX:38) */
.section-page--inner {
  padding-bottom: 6em;
  min-height: 50svh;
  max-width: 800px;
  margin: 0 auto;
}

.title-icon {
  display: block;
  width: 0.5em;
  height: 0.5em;
  color: rgb(var(--color-brand-green));
}

.section-page--inner p+p { margin: 1em 0 0 0; }
.section-page--inner h2,
.section-page--inner h3,
.section-page--inner h4,
.section-page--inner h5,
.section-page--inner h6 {
margin: 0.75em 0 0.25em;
line-height: 1.2;
}

.section-page--inner h1 {
margin-bottom: 1em;
text-align: center;
}

.page-title {
display: flex;
align-items: center;
flex-direction: column;
gap: 0.5em;
max-width: 600px;
margin: 0.75em auto;
padding-top: 0.75em;
line-height: 1.1;
}

.section-page--inner strong { font-weight: 700; }
.section-page--inner em { font-style: italic; }
.section-page--inner ul,
.section-page--inner ol {
padding-left: 1.5em;
margin: 0 0 1em;
}
.section-page--inner blockquote {
margin: 1em 0;
padding: 0.5em 1em;
color: #555;
font-style: italic;
}
.section-page--inner code {
font-family: 'Courier New', monospace;
background: #f4f4f4;
padding: 0.1em 0.4em;
border-radius: 3px;
font-size: 0.9em;
}
.section-page--inner pre {
background: #f4f4f4;
padding: 1em;
overflow-x: auto;
border-radius: 4px;
}
.section-page--inner img {
max-width: 100%;
height: auto;
display: block;
margin: 1em auto;
}
/* END_SECTION:page */

/* START_SECTION:product-hero (INDEX:40) */
/* ─── Product Hero ─────────────────────────────────── */

.ph {
background-size: cover;
padding: 48px 0;
}
.ph__wrap {
margin: 0 auto;
}
.ph__inner {
display: flex;
align-items: flex-start;
gap: 48px;
}

/* ── Gallery column ── */
.ph__gallery {
padding-top: calc(var(--header-height) / 2);
margin-top: calc(var(--header-height) / 2);
width: 48%;
flex-shrink: 0;
position: sticky;
top: 24px;
}
.phg__inner {
display: flex;
align-items: flex-start;
gap: 8px;
}
.phg__thumbs {
display: flex;
flex-direction: column;
gap: 8px;
width: 72px;
flex-shrink: 0;
max-height: 560px;
overflow-y: auto;
overflow-x: hidden;
scroll-behavior: smooth;
}
.phg__thumbs::-webkit-scrollbar { width: 3px; }
.phg__thumbs::-webkit-scrollbar-thumb { background: #ccc; border-radius: 2px; }
.phg__thumbs::-webkit-scrollbar-track { background: transparent; }

.phg__thumb {
width: 100%;
aspect-ratio: 1 / 1;
border: 2px solid transparent;
border-radius: 8px;
overflow: hidden;
cursor: pointer;
background: #F9F7F0;
flex-shrink: 0;
transition: border-color 0.15s ease;
padding: 0;
position: relative;
border: none;
}

.phg__thumb::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgb(var(--color-brand-light-green));
border-radius: 8px;
pointer-events: none;
transition: opacity 0.25s ease;
opacity: 0;
z-index: 10;
mix-blend-mode: multiply;
}

.phg__thumb.is-active::after {
opacity: 0.5;
}

.phg__thumb:hover:not(.is-active)::after {
opacity: 0.5;
}
.phg__thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }

.phg__main {
flex: 1;
min-width: 0;
position: relative;
border-radius: 16px;
overflow: hidden;
background: #F9F7F0;
}
.phg__img {
width: 100%;
height: auto;
display: block;
object-fit: contain;
transition: opacity 0.15s ease;
}
.phg__img.is-loading { opacity: 0.5; }

.phg__magnify {
position: absolute;
top: 12px;
right: 12px;
width: 40px;
height: 40px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.92);
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
transition: background 0.15s ease, transform 0.15s ease;
color: rgb(var(--color-brand-navy));
padding: 0;
z-index: 2;
}
.phg__magnify:hover { background: #fff; transform: scale(1.08); }
.phg__magnify svg { width: 18px; height: 18px; display: block; }

/* ── Floating sticky bar ── */
.phf {
position: fixed;
bottom: 2em;
left: 50%;
transform: translateX(-50%) translateY(calc(100% + 28px));
opacity: 0;
z-index: 500;
width: var(--content-width);
pointer-events: none;
transition: transform 0.35s cubic-bezier(0.34, 1.26, 0.64, 1), opacity 0.25s ease;
}
.phf.is-visible {
transform: translateX(-50%) translateY(0);
opacity: 1;
pointer-events: auto;
}
.phf__inner {
display: flex;
align-items: center;
gap: 14px;
padding: 1em 2em;
border-radius: 100px;
background: rgba(255, 255, 255, 0.72);
backdrop-filter: blur(24px) saturate(180%);
-webkit-backdrop-filter: blur(24px) saturate(180%);
box-shadow: 0 8px 32px rgba(0,0,0,0.10), 0 2px 8px rgba(0,0,0,0.07);
}
.phf__img-wrap {
width: 52px;
height: 52px;
border-radius: 0.5em;
background: #F9F7F0;
overflow: hidden;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}
.phf__img { width: 100%; height: 100%; object-fit: contain; display: block; }
.phf__info { flex: 1; min-width: 0; }
.phf__vendor {
font-size: 0.9em;
color: rgba(var(--color-brand-navy), 0.5);
margin: 0;
letter-spacing: 0.02em;
}
.phf__title {
font-size: 1.1em;
font-weight: 600;
color: rgb(var(--color-brand-navy));
margin: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.phf__prices { flex-shrink: 0; text-align: right; }
.phf__price-label {
font-size: 0.9em;
color: rgb(var(--color-brand-green));
font-weight: 600;
display: block;
margin-bottom: 1px;
}
.phf__price-row { display: flex; align-items: baseline; gap: 6px; }
.phf__compare {
font-size: 0.9em;
color: #9CA3AF;
text-decoration: line-through;
}
.phf__price {
font-size: 1.3em;
font-weight: 600;
color: rgb(var(--color-brand-navy));
line-height: 1;
}
.phf__qty {
display: flex;
align-items: center;
background: rgba(0,0,0,0.06);
border-radius: 100px;
padding: 2px;
flex-shrink: 0;
}
.phf__qty-btn {
width: 35px;
height: 35px;
border-radius: 50%;
border: none;
background: transparent;
cursor: pointer;
font-size: 1.5em;
font-weight: 400;
color: rgb(var(--color-brand-navy));
display: flex;
align-items: center;
justify-content: center;
transition: background 0.15s;
line-height: 1;
}
.phf__qty-btn:hover { background: rgba(255,255,255,0.7); }
.phf__qty-val {
min-width: 24px;
text-align: center;
font-size: 1em;
font-weight: 600;
color: rgb(var(--color-brand-navy));
}
.phf__atc {
display: flex;
align-items: center;
gap: 7px;
padding: 0 20px;
height: 40px;
background: rgb(var(--color-brand-light-green));
color: rgb(var(--color-brand-navy));
font-family: var(--font-primary--family);
border: none;
border-radius: 100px;
font-size: 1em;
font-weight: 700;
cursor: pointer;
white-space: nowrap;
flex-shrink: 0;
transition: opacity 0.15s, transform 0.15s;
}
.phf__atc:hover { opacity: 0.9; transform: scale(1.02); }
.phf__atc:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
.phf__atc svg { flex-shrink: 0; }

@media (max-width: 600px) {
.phf { bottom: 12px; width: calc(100% - 24px); }
.phf__inner { padding: 8px 10px 8px 8px; gap: 10px; }
.phf__img-wrap,
.phf__vendor,
.phf__price-label { display: none; }
.phf__price { font-size: 15px; }
.phf__atc { padding: 0 14px; font-size: 12px; }
}

.phf__atc svg {
width: 1em;
}

/* ── Lightbox ── */
.ph-lb {
display: none;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.88);
z-index: 10000;
align-items: center;
justify-content: center;
padding: 24px;
}
.ph-lb.is-open { display: flex; }
.ph-lb__img {
max-width: 100%; max-height: 100%;
object-fit: contain; border-radius: 4px; display: block;
box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
}
.ph-lb__close {
position: absolute; top: 16px; right: 16px;
width: 44px; height: 44px; border-radius: 50%;
background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.25);
color: #fff; font-size: 22px; cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: background 0.15s ease;
line-height: 1;
}
.ph-lb__close:hover { background: rgba(255, 255, 255, 0.22); }

/* ── Info column ── */
.ph__info {
display: flex;
flex-direction: column;
gap: 1em;
flex: 1;
min-width: 0;
margin-top: var(--header-height);
}
.ph__vendor {
font-size: 1.3em;
font-weight: 300;
letter-spacing: 0.04em;
}
.ph__brand-logo {
height: 36px;
width: auto;
object-fit: contain;
display: block;
margin-bottom: 14px;
}
.ph__title {
font-size: 2.5rem;
font-weight: 700;
color: rgb(var(--color-brand-navy));
line-height: 1.1;
margin: 0;
}

/* ── Price ── */
.ph__price {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 0.1em;
flex-wrap: wrap;
}
.ph__price-current {
display: flex;
align-items: center;
gap: 0.5em;
font-size: 1.5em;
font-weight: 700;
}
.ph__price-compare {
font-size: 1.1em;
color: #9CA3AF;
text-decoration: line-through;
}
.ph__price-save {
font-size: 0.6em;
font-weight: 600;
background: rgb(var(--color-brand-light-green));
padding: 3px 8px;
border-radius: 4px;
}

/* ── Availability ── */
.ph__avail {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 13px;
font-weight: 600;
margin-bottom: 20px;
color: rgb(var(--color-brand-navy));
}
.ph__avail-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: rgb(var(--color-brand-green));
flex-shrink: 0;
}
.ph__avail.out-of-stock .ph__avail-dot { background: #EF4444; }

.ph__divider { height: 1px; background: #E5E7EB; margin: 20px 0; }

/* ── Description ── */
.ph__desc {
font-size: 1em;
line-height: 1.65;
color: #374151;
}
.ph__desc p { margin: 0 0 10px; }
.ph__desc p:last-child { margin-bottom: 0; }

/* ── Variant selectors ── */
.ph__options { display: flex; flex-direction: column; gap: 16px; margin-bottom: 24px; }
.ph__option-label {
font-size: 13px;
font-weight: 600;
color: rgb(var(--color-brand-navy));
margin-bottom: 8px;
}
.ph__option-select {
width: 100%;
}

/* ── Purchase options (selling plans / subscriptions) ── */
.ph__po { margin-bottom: 20px; }
.ph__po-label {
font-size: 13px;
font-weight: 600;
color: rgb(var(--color-brand-navy));
margin-bottom: 8px;
}
.ph__po-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.ph__po-option {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 14px;
border-radius: 0.5em;
border: 1px solid rgb(var(--color-brand-beige));
cursor: pointer;
transition: border-color 0.15s ease, background 0.15s ease;
}
.ph__po-option:hover { border-color: rgb(var(--color-brand-green)); }
.ph__po-option.is-selected {
border-color: rgb(var(--color-brand-green));
background: rgb(var(--color-brand-beige-light));
}
/* Visually hide the native radio while keeping it in the tab order and screen-reader accessible */
.ph__po-radio {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.ph__po-radio:focus-visible ~ .ph__po-option-main {
outline: 2px solid rgb(var(--color-brand-green));
outline-offset: 2px;
border-radius: 0.25em;
}
.ph__po-option-main {
flex: 1;
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
font-size: 0.9em;
}
.ph__po-option-name { font-weight: 600; color: rgb(var(--color-brand-navy)); }
.ph__po-option-price { font-weight: 700; color: rgb(var(--color-brand-navy)); white-space: nowrap; }

/* ── Qty + ATC ── */
.ph__purchase { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; }
.ph__qty {
display: flex;
align-items: center;
border-radius: 0.4em;
flex-shrink: 0;
overflow: hidden;
transition: box-shadow 0.2s ease, outline 0.1s ease;
box-shadow: 0 0px 2px 0 rgba(0, 0, 0, 0), 0 0px 5px 0 rgba(0, 0, 0, 0);
outline: 0 solid rgba(0, 0, 0, 0.05);
}
.ph__qty-btn {
width: 40px;
height: 48px;
border: none;
background: rgb(var(--color-brand-beige-light));
color: rgb(var(--color-brand-navy));
font-size: 1.3em;
font-weight: 300;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.15s;
flex-shrink: 0;
transition: background 0.2s ease, color 0.2s ease;
}
.ph__qty-btn:hover { background: rgb(var(--color-brand-beige)); }
input[type="number"].ph__qty-input {
width: 48px;
height: 48px;
border: none;
text-align: center;
font-size: 1.1em;
color: rgb(var(--color-brand-navy));
-moz-appearance: textfield;
appearance: textfield;
border-radius: 0;
padding: 0;
}
input[type="number"].ph__qty-input::-webkit-inner-spin-button,
input[type="number"].ph__qty-input::-webkit-outer-spin-button {
-webkit-appearance: none;
appearance: none;
margin: 0;
}

input[type="number"].ph__qty-input:focus-visible {
outline: none;
box-shadow: none;
}

.ph__qty:has(input:focus-visible) {
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.10), 0 2px 5px 0 rgba(0, 0, 0, 0.10);
outline: 0.4em solid rgba(0, 0, 0, 0.05);
}

.ph__qty:has(input:focus-visible) .ph__qty-btn {
background: #fff;
}

.ph__atc {
font-family: var(--font-primary--family);
flex: 1;
min-width: 160px;
height: 48px;
background: rgb(var(--color-brand-light-green));
border: none;
border-radius: 0.3em;
font-size: 1em;
letter-spacing: 0.01em;
font-weight: 600;
cursor: pointer;
transition: background 0.15s ease, color 0.1s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 0.75em;
position: relative;
overflow: hidden;
}

.ph__atc > div {
z-index: 1; display: flex; align-items: center; gap: 0.75em;
}

.ph__atc::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
background: linear-gradient(97deg, rgba(255, 255, 255, 0.50) 0%, rgba(255, 255, 255, 0.00) 55.8%), linear-gradient(277deg, rgba(var(--color-brand-green), 0.25) 0%, rgba(var(--color-brand-green), 0) 55.8%), rgb(var(--color-brand-light-green));
transition: opacity 0.3s ease;
}

.ph__atc:hover::after { opacity: 1; }
.ph__atc:active { transform: translateY(0); }
.ph__atc:disabled { background: #D1D5DB; cursor: not-allowed; transform: none; opacity: 1; }

.ph__atc svg {
width: 1.1em;
}

.ph__payment { margin-bottom: 16px; }

.ph__payment button {
font-family: inherit;
background-color: rgb(var(--color-brand-navy));
color: #ffffff;
border: none;
border-radius: 0.4em;
padding: 12px 16px;
}

.ph__tax-note {
font-size: 12px;
color: #9CA3AF;
}

/* ── Product Info Tabs ── */
.pit__nav {
display: flex;
align-items: stretch;
border-bottom: 1px solid #E5E7EB;
overflow-x: auto;
scrollbar-width: none;
position: relative;
gap: 1em;
}


.pit__nav::-webkit-scrollbar { display: none; }
.pit__nav-btn {
font-family: inherit;
display: inline-flex;
align-items: center;
gap: 1em;
padding: 11px 14px;
background: none;
border: none;
border-bottom: 3px solid transparent;
margin-bottom: -1px;
font-size: 1em;
font-weight: 700;
color: rgb(var(--color-brand-navy));
cursor: pointer;
white-space: nowrap;
transition: color 0.15s, border-color 0.15s;
flex-shrink: 0;
position: relative;
z-index: 1;
}
.pit__nav-btn svg { width: 0.8em; height: 0.8em; flex-shrink: 0; }
.pit__nav-btn:hover { color: rgb(var(--color-brand-navy)); }
.pit__nav-btn.is-active {
color: rgb(var(--color-brand-green));
border-bottom-color: rgb(var(--color-brand-green));
font-weight: 600;
}

.pit__panel { display: none; }
.pit__panel.is-active { display: block; }

/* Spec accordions */
.pit__acc { border-bottom: 1px solid rgb(var(--color-brand-green)); }
.pit__acc-btn {
width: 100%;
display: flex;
align-items: center;
gap: 1em;
padding: 1em 0;
background: none;
border: none;
cursor: pointer;
font-family: var(--font-primary--family);
font-size: 0.9em;
font-weight: 600;
color: rgb(var(--color-brand-navy));
text-align: left;
}
.pit__acc-icon { width: 1em; height: 1em; flex-shrink: 0; color: rgb(var(--color-brand-navy)); }
.pit__acc-toggle {
margin-left: auto;
width: 1em; height: 1em;
flex-shrink: 0;
color: rgb(var(--color-brand-green));
transition: transform 0.2s;
}
.pit__acc.is-open .pit__acc-toggle { transform: rotate(45deg); }
.pit__acc-body {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 0.3s ease;
}
.pit__acc-body > * {
overflow: hidden;
min-height: 0;
padding-bottom: 4px;
}
.pit__acc.is-open .pit__acc-body {
grid-template-rows: 1fr;
}

.pit__acc.is-open .pit__acc-btn { border-bottom: 1px solid rgb(var(--color-brand-beige)); }

/* Spec rows */
.pit__row {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: 1em 0;
border-bottom: 1px solid rgb(var(--color-brand-beige-light));
font-size: 0.9em;
}
.pit__row:last-child { border-bottom: none; }
.pit__row-label { font-weight: 700; flex-shrink: 0; }
.pit__row-value { text-align: right; }

/* Attachments list */
.pit__attachments {
padding-bottom: 4px;
}
.pit__attachment {
display: flex;
align-items: center;
gap: 1em;
padding: 1em 0;
border-bottom: 1px solid rgb(var(--color-brand-beige-light));
font-size: 0.9em;
text-decoration: none;
color: rgb(var(--color-brand-navy));
transition: color 0.15s ease;
}
.pit__attachment:last-child { border-bottom: none; }
.pit__attachment:hover { color: rgb(var(--color-brand-green)); }
.pit__attachment-icon {
flex-shrink: 0;
display: flex;
color: rgb(var(--color-brand-navy));
}
.pit__attachment-name {
flex: 1;
font-size: 1em;
font-weight: 600;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.pit__attachment-download {
flex-shrink: 0;
height: 1em;
width: 1em;
display: flex;
color: rgb(var(--color-brand-green));
transition: color 0.15s ease;
}

.pit__attachment:hover .pit__attachment-download { color: rgb(var(--color-brand-navy)); }

/* Disclosures list */
.pit__disclosures {
padding-bottom: 4px;
}
.pit__disclosure {
padding: 1em 0;
border-bottom: 1px solid rgb(var(--color-brand-beige-light));
font-size: 0.9em;
}
.pit__disclosure:last-child { border-bottom: none; }
.pit__disclosure-header {
display: flex;
align-items: center;
gap: 0.6em;
margin-bottom: 0.5em;
}
.pit__disclosure-symbol {
flex-shrink: 0;
width: 1em;
height: 1em;
object-fit: contain;
}
.pit__disclosure-title {
font-weight: 700;
}
.pit__disclosure-content {
color: rgb(var(--color-brand-navy));
opacity: 0.85;
line-height: 1.5;
}
.pit__disclosure-content p { margin: 0 0 0.5em; }
.pit__disclosure-content p:last-child { margin-bottom: 0; }

/* Bulky warning */
.pit__bulky {
background: rgb(251,217,211);
border-radius: 0.5em;
padding: 1.2em;
display: flex;
gap: 1em;
align-items: flex-start;
font-size: 0.9em;
}
.pit__bulky-icon { flex-shrink: 0; color: currentColor; height: 1em; width: 1em; position: relative; top: 0.1em; }
.pit__bulky-heading { font-weight: 700; font-size: 1.1em; color: currentColor; margin: 0 0 4px; }
.pit__bulky-body { color: currentColor; margin: 0; }

/* Pickup availability */
.pit__pickup {
padding: 16px 0;
border-bottom: 1px solid #E5E7EB;
}
.pit__pickup-summary {
display: flex;
align-items: center;
gap: 10px;
}
.pit__pickup-icon {
flex-shrink: 0;
width: 1.2em;
height: 1.2em;
color: rgb(var(--color-brand-navy));
}
.pit__pickup-text {
flex: 1;
display: flex;
flex-direction: column;
gap: 2px;
}
.pit__pickup-status {
font-size: 0.9em;
font-weight: 700;
color: rgb(var(--color-brand-navy));
}
.pit__pickup-status.is-unavailable { color: #9CA3AF; }
.pit__pickup-detail {
font-size: 0.85em;
color: #6B7280;
}
.pit__pickup-toggle {
flex-shrink: 0;
background: none;
border: none;
font-family: var(--font-primary--family);
font-size: 0.85em;
font-weight: 600;
color: rgb(var(--color-brand-green));
cursor: pointer;
padding: 6px 10px;
white-space: nowrap;
}
.pit__pickup-toggle:hover { text-decoration: underline; }
.pit__pickup-list {
margin-top: 12px;
padding-top: 8px;
border-top: 1px solid #F3F4F6;
}
.pit__pickup-location {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 0;
font-size: 0.85em;
border-bottom: 1px solid #F3F4F6;
}
.pit__pickup-location:last-child { border-bottom: none; }
.pit__pickup-location-name { font-weight: 600; color: rgb(var(--color-brand-navy)); }
.pit__pickup-location-status { color: #9CA3AF; }
.pit__pickup-location-status.is-available { color: rgb(var(--color-brand-green)); font-weight: 600; }

/* Shipping form */
.pit__ship { padding: 16px 0; }
.pit__ship-row { display: flex; gap: 10px; align-items: flex-end; }
.pit__ship-field { display: flex; flex-direction: column; gap: 5px; flex: 1; }
.pit__ship-label { font-size: 12px; font-weight: 600; color: #374151; }
.pit__ship-select,
.pit__ship-input {
width: 100%;
}
.pit__ship-input::placeholder { color: #9CA3AF; }
.pit__ship-btn {
height: 40px;
padding: 0 16px;
background: rgb(var(--color-brand-light-green));
color: rgb(var(--color-brand-navy));
border: none;
border-radius: 0.5em;
font-size: 0.9em;
letter-spacing: 0.02em;
font-weight: 600;
cursor: pointer;
white-space: nowrap;
flex-shrink: 0;
transition: opacity 0.15s;
font-family: var(--font-primary--family);
}
.pit__ship-btn:hover { opacity: 0.85; }
.pit__ship-results { margin-top: 12px; }
.pit__ship-rate {
display: flex;
justify-content: space-between;
padding: 8px 0;
border-bottom: 1px solid #F3F4F6;
font-size: 13px;
color: rgb(var(--color-brand-navy));
}
.pit__ship-rate:last-child { border-bottom: none; }
.pit__ship-rate-name { font-weight: 500; }
.pit__ship-rate-price { font-weight: 700; color: rgb(var(--color-brand-green)); }
.pit__ship-error { color: #EF4444; font-size: 13px; padding: 8px 0; }
.pit__ship-loading { color: #9CA3AF; font-size: 13px; padding: 8px 0; }

/* Description toggle — hidden on desktop, shown on mobile */
.ph__desc-toggle { display: none; }

/* ── Mobile ── */
@media (max-width: 768px) {
.ph__inner { flex-direction: column; gap: 16px; }
.ph__gallery { width: 100%; position: static; }
.phg__inner { flex-direction: column-reverse; }
.phg__thumbs {
flex-direction: row;
width: 100%;
max-height: none;
overflow-x: auto;
overflow-y: hidden;
}
.phg__thumb { width: 64px; flex-shrink: 0; }
.ph__title { font-size: 22px; }

/* Contain all content within screen width */
.ph__wrap { box-sizing: border-box; }
.ph__info { box-sizing: border-box; width: 100%; min-width: 0; overflow-x: hidden; margin-top: 0; }

/* Description collapsed by default; toggle button reveals it */
.ph__desc { display: none; }
.ph__desc.is-visible { display: block; }
.ph__desc-toggle {
display: inline-flex;
align-items: center;
gap: 6px;
background: none;
border: none;
font-size: 0.875em;
font-weight: 600;
color: rgb(var(--color-brand-green));
cursor: pointer;
padding: 0;
margin-bottom: 16px;
font-family: var(--font-primary--family);
}
.ph__desc-toggle svg { transition: transform 0.2s; }
.ph__desc-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

/* Stack qty + ATC button so neither clips off screen */
.ph__purchase { flex-direction: column; align-items: stretch; }
.ph__qty { align-self: flex-start; }
.ph__atc { width: 100%; min-width: 0; height: auto; padding: 14px 20px; }
}

/* ── Tabs wrap on very small screens instead of scrolling off ── */
@media (max-width: 600px) {
.pit__nav { flex-wrap: wrap; overflow-x: visible; gap: 2px 0; }
.pit__nav-btn {
flex: 1 1 auto;
justify-content: center;
font-size: 0.85em;
padding: 10px 8px;
white-space: normal;
text-align: center;
}
}
/* END_SECTION:product-hero */

/* START_SECTION:proof-points-banner (INDEX:41) */
.proof-points-banner__content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 1em;
}

.proof-points-banner__content h1,
.proof-points-banner__content h2,
.proof-points-banner__content h3,
.proof-points-banner__content h4,
.proof-points-banner__content h5,
.proof-points-banner__content h6 {
    margin: 0;
    color: currentColor;
    font-size: 1em;
    font-weight: 500;
}

.proof-points-banner__pills {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    text-align: center;
    width: 100%;
}

.proof-points-banner__content .pill,
.proof-points-banner__content .shopify-block-pill {
    width: 100%;
}

.proof-points-banner__content .pill {
    font-size: 0.9em;
}

@media screen and (min-width: 600px) {
    .proof-points-banner__content {
        gap: 1.5em;
    }

    .proof-points-banner__pills {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.5em;
        width: fit-content;
    }
}

@media screen and (min-width: 980px) {
    .proof-points-banner__pills {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.5em;
    }
}

@media screen and (min-width: 1200px) {
    .proof-points-banner__pills {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        gap: 0.5em;
    }
    .proof-points-banner__content .pill,
    .proof-points-banner__content .shopify-block-pill {
        width: fit-content;
    }
}

@media screen and (min-width: 1400px) {
    .proof-points-banner__content {
        flex-direction: row;
    }
}
/* END_SECTION:proof-points-banner */

/* START_SECTION:search (INDEX:42) */
.sr {
padding: 3em 0 5em;
}
.sr__inner {
width: var(--content-width);
margin: 0 auto;
}

/* ── Header / search form ── */
.sr__header {
display: flex;
flex-direction: column;
gap: 1.25em;
margin-bottom: 2em;
}
.sr__header--centered {
align-items: center;
text-align: center;
}

.sr__heading {
font-size: 2em;
font-weight: 700;
color: rgb(var(--color-brand-navy));
font-family: var(--font-primary--family, sans-serif);
margin: 0;
}

.sr__form {
max-width: 32em;
}

/* Static duplicate of the header search bar's pill design (visual only —
no dropdown, no is-open/mobile-collapse JS states from search-bar.liquid) */
.sr__searchbar-inner {
display: flex;
align-items: center;
background-color: #ffffff;
border-radius: 999px;
padding: 0.3em 0.3em 0.3em 1.5em;
gap: 8px;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.10), 0 2px 5px 0 rgba(0, 0, 0, 0.10);
transition: box-shadow 0.2s ease, outline 0.2s ease;
}
.sr__searchbar-inner:focus-within {
box-shadow: 0 2px 0 rgba(0, 0, 0, 0.06);
outline: 5px solid rgba(255, 255, 255, 0.25);
}

.sr__searchbar-input {
flex: 1;
min-width: 0;
border: none;
outline: none;
background: transparent;
font-size: 1em;
color: rgb(var(--color-brand-navy));
font-family: inherit;
line-height: 1.5;
-webkit-appearance: none;
appearance: none;
padding: 0;
}
.sr__searchbar-input::placeholder {
color: #9B988D;
}
.sr__searchbar-input::-webkit-search-decoration,
.sr__searchbar-input::-webkit-search-cancel-button,
.sr__searchbar-input::-webkit-search-results-button,
.sr__searchbar-input::-webkit-search-results-decoration {
display: none;
}

.sr__searchbar-button {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
background-color: rgb(var(--color-brand-light-green));
border: none;
padding: 0 2em;
border-radius: 5em 10em 10em 5em;
height: 3.5em;
cursor: pointer;
color: #2d3a1e;
transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
.sr__searchbar-button:hover {
background-color: rgb(var(--color-brand-green));
color: #fff;
transform: scale(1.02);
}
.sr__searchbar-button:active {
background-color: rgb(var(--color-brand-navy));
color: #fff;
transform: scale(0.98);
}
.sr__searchbar-button svg {
height: 1.25em;
display: block;
}

/* ── Result groups ── */
.sr__results-wrap {
position: relative;
transition: height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
overflow: hidden;
}
.sr__results-wrap.is-settled {
overflow: visible;
}

.sr__group + .sr__group {
margin-top: 3em;
}

.sr__group-header {
display: flex;
align-items: center;
gap: 0.6em;
margin-bottom: 0.75em;
}
.sr__group-icon {
width: 1.1em;
height: 1.1em;
color: rgb(var(--color-brand-navy));
opacity: 0.5;
display: flex;
flex-shrink: 0;
}
.sr__group-icon svg {
width: 100%;
height: 100%;
}
.sr__group-title {
font-size: 0.85em;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: rgb(var(--color-brand-navy));
opacity: 0.65;
font-family: var(--font-primary--family, sans-serif);
}
.sr__group-count {
font-size: 0.85em;
color: rgba(0, 38, 58, 0.35);
font-family: var(--font-primary--family, sans-serif);
}
.sr__divider {
height: 1px;
background: rgba(0, 38, 58, 0.1);
margin-bottom: 1.5em;
}

/* ── Results grid ── */
.sr__results {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 2em;
}

/* Page results via the content-card snippet */
.sr__page-card {
height: 100%;
}

/* ── Empty state ── */
.sr__empty {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 1.25em;
padding: 2em 0;
}
.sr__empty-text {
font-family: var(--font-primary--family, sans-serif);
color: rgb(var(--color-brand-navy));
margin: 0;
}

/* ── Pagination ── */
.sr__pagination {
display: flex;
justify-content: center;
align-items: center;
gap: 0.4em;
margin-top: 3em;
font-family: var(--font-primary--family, sans-serif);
}
.sr__pagination a,
.sr__pagination .page.current {
display: flex;
align-items: center;
justify-content: center;
min-width: 2.25em;
height: 2.25em;
padding: 0 0.6em;
border-radius: 0.4em;
text-decoration: none;
color: rgb(var(--color-brand-navy));
font-weight: 600;
transition: background 0.15s ease, color 0.15s ease;
}
.sr__pagination a:hover {
background: rgb(var(--color-brand-beige-light));
}
.sr__pagination .page.current {
background: rgb(var(--color-brand-navy));
color: #fff;
}

@media (max-width: 640px) {
.sr__form {
max-width: none;
}
.sr__results {
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 1em;
}
}
/* END_SECTION:search */

/* CSS from block stylesheet tags */
/* START_BLOCK:_article-grid-arrow-card (INDEX:45) */
.article-arrow-card {
    display: grid;
    grid-template-rows: subgrid;
    height: 100%;
    grid-row: span 3;
    gap: 2em;
}

.article-arrow-card__header {
    display: flex;
    gap: 1em;
    max-width: 85%;
    flex-direction: column;
}

.article-arrow-card__header img {
    height: 2em;
    object-fit: contain;
    width: fit-content;
}

.article-arrow-card__header h3 {
    font-size: 1.4em;
    font-weight: 600;
}

.article-grid-arrow__inner .article-arrow-card:nth-child(1) .article-arrow-card__image {
    background-color: #f0f0f0;
    clip-path: polygon(0% 0%, 85% 0%, 100% 50%, 85% 100%, 0% 100%);
    border-radius: 1em 0 0 1em;
}

.article-grid-arrow__inner .article-arrow-card:nth-child(2) .article-arrow-card__image {
    background-color: #f0f0f0;
    clip-path: polygon(calc(100% - 15%) 0%, 100% 50%, calc(100% - 15%) 100%, 0% 100%, 15% 50%, 0% 0%);
}

.article-grid-arrow__inner .article-arrow-card:nth-child(3) .article-arrow-card__image {
    background-color: #f0f0f0;
    clip-path: polygon(100% 0, 100% 100%, 0% 100%, 15% 50%, 0% 0%);
    border-radius: 0 1em 1em 0;
}

.article-arrow-card__image {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.article-arrow-card__image img {
    object-fit: cover;
    object-position: center;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.article-arrow-card__body {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-between;
    gap: 2em;
    max-width: 85%;
}

@media (max-width: 1023px) {
.article-arrow-card {
grid-row: span 1;
display: flex;
flex-direction: column;
gap: 1.25em;
}

.article-arrow-card__image {
aspect-ratio: 16 / 7;
max-height: 12em;
}

.article-grid-arrow__inner .article-arrow-card:nth-child(1) .article-arrow-card__image,
.article-grid-arrow__inner .article-arrow-card:nth-child(2) .article-arrow-card__image,
.article-grid-arrow__inner .article-arrow-card:nth-child(3) .article-arrow-card__image {
clip-path: none;
border-radius: 0.75em;
}

.article-arrow-card__header,
.article-arrow-card__body {
max-width: 100%;
}

.article-arrow-card__body {
height: fit-content;
}

}
/* END_BLOCK:_article-grid-arrow-card */

/* START_BLOCK:_collection-grid-tab-products (INDEX:46) */
/* ── Product grid ─────────────────────────────────────────────────────────── */
/* Duplicated from _collection-grid-tab so the grid works even when no
   collection tab blocks exist on the same page. Shopify deduplicates
   identical stylesheet content across block renders. */
.pgt-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: auto;
  gap: 1.5em;
  width: 100%;
  margin: 0 auto;
}
@media (max-width: 900px) {
  .pgt-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .pgt-grid { grid-template-columns: 1fr; }
}

/* ── Empty / helper states ────────────────────────────────────────────────── */
.pgt-tab-empty {
  color: #999;
  font-family: var(--font-primary--family);
  font-size: 14px;
  padding: 20px 0;
  margin: 0;
}
.pgt-tab-empty strong {
  color: rgb(var(--color-brand-navy, 0 38 58));
  font-weight: 600;
}
/* END_BLOCK:_collection-grid-tab-products */

/* START_BLOCK:_collection-grid-tab-recent (INDEX:47) */
/* ── Product grid layout ── */
.pgt-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: auto;
  gap: 1.5em;
  width: 100%;
  margin: 0 auto;
}
@media (max-width: 900px) { .pgt-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .pgt-grid { grid-template-columns: 1fr; } }

/* ── Dynamic tab loading / empty states ── */
.pgt-grid--dynamic { min-height: 200px; }
.pgt-dyn-loading {
  grid-column: 1 / -1;
  display: flex; align-items: center; justify-content: center;
  min-height: 200px;
}
.pgt-dyn-spinner {
  width: 28px; height: 28px;
  border: 3px solid #e5e7eb;
  border-top-color: #00bc70;
  border-radius: 50%;
  animation: pgt-spin 0.7s linear infinite;
  display: block;
}
@keyframes pgt-spin { to { transform: rotate(360deg); } }
.pgt-dyn-empty {
  grid-column: 1 / -1;
  color: #9ca3af;
  font-family: var(--font-primary--family, sans-serif);
  font-size: 14px;
  padding: 24px 0;
  text-align: center;
}
/* END_BLOCK:_collection-grid-tab-recent */

/* START_BLOCK:_collection-grid-tab-recommended (INDEX:48) */
/* ── Product grid layout ── */
.pgt-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: auto;
  gap: 1.5em;
  width: 100%;
  margin: 0 auto;
}
@media (max-width: 900px) { .pgt-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .pgt-grid { grid-template-columns: 1fr; } }

/* ── Dynamic tab loading / empty states ── */
.pgt-grid--dynamic { min-height: 200px; }
.pgt-dyn-loading {
  grid-column: 1 / -1;
  display: flex; align-items: center; justify-content: center;
  min-height: 200px;
}
.pgt-dyn-spinner {
  width: 28px; height: 28px;
  border: 3px solid #e5e7eb;
  border-top-color: #00bc70;
  border-radius: 50%;
  animation: pgt-spin 0.7s linear infinite;
  display: block;
}
@keyframes pgt-spin { to { transform: rotate(360deg); } }
.pgt-dyn-empty {
  grid-column: 1 / -1;
  color: #9ca3af;
  font-family: var(--font-primary--family, sans-serif);
  font-size: 14px;
  padding: 24px 0;
  text-align: center;
}
/* END_BLOCK:_collection-grid-tab-recommended */

/* START_BLOCK:_collection-grid-tab-search (INDEX:49) */
/* ── Product grid layout ── */
.pgt-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: auto;
  gap: 1.5em;
  width: 100%;
  margin: 0 auto;
}
@media (max-width: 900px) { .pgt-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .pgt-grid { grid-template-columns: 1fr; } }

/* ── Dynamic tab loading / empty states ── */
.pgt-grid--dynamic { min-height: 200px; }
.pgt-dyn-loading {
  grid-column: 1 / -1;
  display: flex; align-items: center; justify-content: center;
  min-height: 200px;
}
.pgt-dyn-spinner {
  width: 28px; height: 28px;
  border: 3px solid #e5e7eb;
  border-top-color: #00bc70;
  border-radius: 50%;
  animation: pgt-spin 0.7s linear infinite;
  display: block;
}
@keyframes pgt-spin { to { transform: rotate(360deg); } }
.pgt-dyn-empty {
  grid-column: 1 / -1;
  color: #9ca3af;
  font-family: var(--font-primary--family, sans-serif);
  font-size: 14px;
  padding: 24px 0;
  text-align: center;
}
/* END_BLOCK:_collection-grid-tab-search */

/* START_BLOCK:_collection-grid-tab (INDEX:50) */
.pgt-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: auto;
  gap: 1.5em;
  width: 100%;
  margin: 0 auto;
}
@media (max-width: 900px) {
  .pgt-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .pgt-grid { grid-template-columns: 1fr; }
}
/* END_BLOCK:_collection-grid-tab */

/* START_BLOCK:_footer-header (INDEX:52) */
.footer-header {
    display: flex;
    flex-wrap: nowrap;
    overflow: hidden;
    width: 100%;
    margin: 2.5em 0;
    gap: 2.5em;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
  }
/* END_BLOCK:_footer-header */

/* START_BLOCK:_home-hero-slide (INDEX:53) */
.home-hero__block {
height: 100%;
max-width: var(--content-width);
}

.home-hero__triangle {
fill: rgb(var(--color-brand-navy));
height: 100%;
width: 60%;
z-index: 1;
position: relative;
}

.home-hero__content {
display: flex;
align-items: flex-end;
height: 100%;
z-index: 1;
position: relative;
width: 45%;
}

.home-hero__slideText {
display: flex;
flex-direction: column;
gap: 1rem;
justify-content: center;
flex: 1;
height: calc(100% - var(--header-height));
position: relative;
padding-top: 2.5em;
padding-bottom: 5em;
}

.home-hero__slideText h1,
.home-hero__slideText h3,
.home-hero__slideText h4,
.home-hero__slideText h5,
.home-hero__slideText h6 {
    color: #fff;
}

.home-hero__slideText h1,
.home-hero__slideText h3 {
    font-weight: 500;
    font-size: 2rem;
}

.home-hero__slideText h2 {
    color: rgb(var(--color-brand-light-green));
    font-weight: 700;
    font-size: 2rem;
}


.home-hero__background {
height: 100%;
flex: 1;
position: absolute;
top: 0;
right: 0;
left: 35%;
z-index: 0;
}

.home-hero__background {
background-color: rgb(var(--color-brand-light-green));
}

.home-hero__background-image {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
}

.home-hero__background-image img {
object-fit: cover;
width: 100%;
height: 100%;
}

@media screen and (min-width: 1200px) {
.home-hero__slideText h1,
.home-hero__slideText h2,
.home-hero__slideText h3 {
font-size: 2.4rem;
}
}

@media screen and (max-width: 767px) {
.home-hero__block {
display: flex;
flex-direction: column;
max-width: 100%;
width: 100%;
height: 100%;
}

.home-hero__slideText h1,
.home-hero__slideText h2,
.home-hero__slideText h3 {
font-size: 1.5rem;
}

.home-hero__triangle {
display: none;
}

/* Pull image to top regardless of DOM order */
.home-hero__background {
order: -1;
position: relative;
inset: auto;
width: 100%;
}

.home-hero__background-image::before {
content: "";
display: block;
position: absolute;
top: 0;
right: 0;
left: 0;
background: linear-gradient(rgb(var(--color-brand-navy)), transparent);
z-index: 0;
height: calc(var(--header-height) * 1.5);
}

.home-hero__content {
order: 0;
flex: 1;
width: 100%;
height: auto;
align-items: flex-start;
position: relative;
z-index: 1;
/* Overlap into the image by the triangle depth */
margin-top: -3rem;
padding: 0 var(--page-margin, 1.5rem);
background-color: rgb(var(--color-brand-navy));
/* ∧ arrow pointing up into the image */
clip-path: polygon(0 3rem, 50% 0, 100% 3rem, 100% 100%, 0 100%);
}

.home-hero__slideText {
height: 100%;
width: 100%;
max-width: 480px;
/* Push text below the triangle tip */
padding-top: 5rem;
padding-bottom: 2rem;
justify-content: flex-end;
}
}
/* END_BLOCK:_home-hero-slide */

/* START_BLOCK:_mega-info-card (INDEX:57) */
.mega-info-card {
        display: flex;
        overflow: hidden;
        width: 100%;
        padding: 2em;
        gap: 1.5em;
        flex-direction: column;
        justify-content: space-between;
        background-color: rgba(255,255,255,0.1);
        border-radius: 1em;
        color: #fff;
        font-size: 1rem;
    }

    .mega-info-card h2.block-heading {
        margin: 0;
        padding: 0;
        font-size: 1.5rem;
    }

.mega-info-card p {
    margin: 0;
padding: 0;
}
/* END_BLOCK:_mega-info-card */

/* START_BLOCK:_product-card (INDEX:59) */
/* ── Product card — canonical styles ────────────────────────────────────────
   Hoisted to <head> once by Shopify regardless of how many cards are on the
   page. The dynamic tab blocks (recent/search/recommended) duplicate this
   content in their own {% stylesheet %} blocks as a fallback for pages that
   have no static product cards.
── */
.product-card {
  height: 100%;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: #F9F7F0;
  transition: background 0.3s ease;
  cursor: pointer;
}
.product-card:hover {
  background: linear-gradient(0deg, rgba(255,255,255,0.25), rgba(255,255,255,0.25)), #C6DE82;
}

/* ── Image ── */
.product-card__image {
  aspect-ratio: 1 / 1;
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 10px 10px 0 0;
}
.product-card__img {
  height: 100%;
  object-fit: cover;
  display: block;
  width: 100%;
  transition: transform 0.4s ease;
}
.product-card:hover .product-card__img { transform: scale(1.05); }

/* ── Top row ── */
.product-card__top {
  position: absolute;
  top: 20px; left: 20px; right: 20px;
  display: flex;
  justify-content: space-between;
  z-index: 1;
  align-items: center;
}

/* ── Cart button ── */
.product-card .cart-btn {
  width: 41px; height: 41px;
  background: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: rgb(var(--color-brand-navy));
  position: relative;
  transition: background 0.3s ease;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.product-card .cart-btn:hover { background: #C6DE82; }
.product-card .cart-btn svg { width: 1.1em; }
.product-card .cart-btn--loading,
.product-card .cart-btn--loading:hover {
  animation: cart-btn-add-badge-pulse 0.5s infinite ease-in-out;
  animation-direction: alternate;
  background: #fff;
  color: rgb(var(--color-brand-navy));
}

/* ── Cart badge ── */
.product-card .cart-btn .cart-btn-add-badge {
  position: absolute;
  top: -0.25em; right: -0.25em;
  width: 1em; height: 1em;
  background: rgb(var(--color-brand-light-green));
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  transition: transform 0.2s cubic-bezier(.4,0,0,1), background 0.3s cubic-bezier(.4,0,0,1),
              color 0.3s cubic-bezier(.4,0,0,1), box-shadow 0.3s cubic-bezier(.4,0,0,1);
}
.product-card .cart-btn-add-badge svg { width: 0.5em; }
.product-card .cart-btn:hover .cart-btn-add-badge {
  transform: scale(1.2);
  color: rgb(var(--color-brand-navy));
  box-shadow: 0 0.1em 0.2em rgba(0,0,0,0.25);
}
.product-card .cart-btn .cart-btn-add-badge span {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}
.product-card .cart-btn .cart-btn-add-badge:not(.cart-btn-add-badge--added) .cart-btn-add-badge--check { visibility: hidden; opacity: 0; }
.product-card .cart-btn:not(.cart-btn--loading) .cart-btn-add-badge .cart-btn-add-badge--loading { visibility: hidden; opacity: 0; }
.product-card .cart-btn .cart-btn-add-badge.cart-btn-add-badge--added .cart-btn-add-badge--check { visibility: visible; opacity: 1; }
.product-card .cart-btn.cart-btn--loading .cart-btn-add-badge .cart-btn-add-badge--loading { visibility: visible; opacity: 1; }
.product-card .cart-btn .cart-btn-add-badge--added .cart-btn-add-badge--plus,
.product-card .cart-btn.cart-btn--loading .cart-btn-add-badge .cart-btn-add-badge--plus { visibility: hidden; opacity: 0; }
.product-card .cart-btn .cart-btn-add-badge.cart-btn-add-badge--added,
.product-card .cart-btn:hover .cart-btn-add-badge.cart-btn-add-badge--added {
  transform: scale(1.5);
  background: rgb(var(--color-brand-green));
  color: #fff;
  box-shadow: none;
}
.cart-btn-add-badge--loading svg {
  width: 0.5em; height: 0.5em;
  transform-origin: center;
  animation: cart-btn-loading-spin 1s linear infinite;
}
@keyframes cart-btn-add-badge-pulse { from { opacity: 1; } to { opacity: 0.5; } }
@keyframes cart-btn-loading-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* ── Content ── */
.product-card__content {
  padding: 2em;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 25px;
  background: #F9F7F0;
  transition: background 0.3s ease, transform 0.3s ease;
  flex: 1;
  position: relative;
}
.product-card:hover .product-card__content {
  background: linear-gradient(0deg, rgba(255,255,255,0.25), rgba(255,255,255,0.25)), #C6DE82;
  transform: translateY(-0.75em);
}
.product-card__content-top { display: flex; flex-direction: column; gap: 0.5em; }
.product-card__brand { font-size: 15px; color: rgb(var(--color-brand-navy)); }
.product-card__title { font-size: 17px; font-weight: 600; color: rgb(var(--color-brand-navy)); }
.price-old { font-size: 15px; color: rgba(0,38,58,0.5); text-decoration: line-through; }
.price { font-size: 17px; font-weight: 600; color: rgb(var(--color-brand-navy)); }
/* END_BLOCK:_product-card */

/* START_BLOCK:card-stack-blog (INDEX:67) */
.cs-wrapper {
position: relative;
overflow: hidden;
}

/* ── Stacking wrapper ── */
.stacked-card-block {
position: absolute;
width: calc(100% - 7em);
height: calc(100% - 1em);
border-radius: 0.5em;
overflow: hidden;
opacity: 0;
left: 0.5em;
transition: transform 0.4s cubic-bezier(.4,0,0,1), opacity 0.4s cubic-bezier(.4,0,0,1);
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

.cs-wrapper .stacked-card-block:not(:has(~ .stacked-card-block)):not(.stacked-card-block ~ .stacked-card-block) {
width: calc(100% - 1em);
}

.stacked-card-block .article-card {
height: 100%;
border-radius: 0;
}

/* ── Nav buttons ── */
.stacked-card-nav {
position: absolute;
bottom: 3em;
right: 8.5em;
display: flex;
gap: 0.5em;
z-index: 10;
}

.cs-wrapper:has(.stacked-card-block):not(:has(.stacked-card-block ~ .stacked-card-block)) .stacked-card-nav {
right: 2em;
}

/* ── Stack position states ── */
.stacked-card-block.active {
opacity: 1;
z-index: 3;
transform: translate(0,0) scale(1);
}

.stacked-card-block.active .card,
.stacked-card-block.active .article-card__content {
background: #fff !important;
}

.stacked-card-block.next {
opacity: 1;
z-index: 2;
transform: translate(4em,0) scale(0.94);
}

.stacked-card-block.after {
opacity: 1;
z-index: 1;
transform: translate(8em,0) scale(0.88);
}

.stacked-card-block.next,
.stacked-card-block.after {
pointer-events: none;
}

@media screen and (max-width: 749px) {
.stacked-card-block       { width: calc(100% - 3em); }
.stacked-card-block.next  { transform: translate(1.5em, 0) scale(0.97); }
.stacked-card-block.after { transform: translate(3em,   0) scale(0.94); }
.stacked-card-nav           { right: 4.5em; }
}
/* END_BLOCK:card-stack-blog */

/* START_BLOCK:card (INDEX:69) */
.content-card {
    height: 100%;
    border-radius: 0.6em;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    text-align: left;
    position: relative;
    background: var(--card-background);
    color: var(--card-foreground);
}

shopify-visual-preview-section-list-item .content-card {
    max-width: 380px;
}

.content-card .block-heading {
    color: var(--card-foreground);
}

/* ── Content area ── */

.content-card__content {
    padding: 2em;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1.5em;
    background: var(--card-background);
    transition: background 0.3s ease, transform 0.3s ease;
    flex: 1;
    position: relative;
}

.content-card__header {
    display: flex;
    flex-direction: column;
    gap: 1em;
}

/* ── Image ── */

.content-card__image {
    position: relative;
    height: clamp(10em, 10vw, 12.5em);
    width: 100%;
    overflow: hidden;
    flex-shrink: 0;
    margin: 0;
    padding: 0;
}

.content-card__image .block-image {
    width: 100% !important;
    height: 100% !important;
    display: block;
    margin: 0;
    padding: 0;
}

.content-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    margin: 0;
    padding: 0;
}
/* END_BLOCK:card */

/* START_BLOCK:custom-html (INDEX:71) */
.custom-html {
width: 100%;
}
/* END_BLOCK:custom-html */

/* START_BLOCK:group (INDEX:73) */
.group {
    display: flex;
    flex-wrap: nowrap;
    overflow: hidden;
    width: 100%;
  }

  .group--horizontal {
    flex-direction: row;
    justify-content: var(--alignment);
    align-items: var(--content-alignment);
    padding-left: var(--padding-before);
    padding-right: var(--padding-after);
    gap: var(--gap);
  }

  .group--vertical {
    flex-direction: column;
    align-items: var(--alignment);
    justify-content: var(--content-alignment);
    text-align: var(--text-align);
    padding-top: var(--padding-before);
    padding-bottom: var(--padding-after);
    gap: var(--gap);
  }
/* END_BLOCK:group */

/* START_BLOCK:heading (INDEX:74) */
.block-heading {
    margin: 0;
    padding: 0;
  }

  .block-heading .house-icon svg {
    height: 0.75em;
    width: 0.75em;
    color: rgb(var(--color-brand-green));
  }

  .block-heading:not(.block-heading--centred) .house-icon svg {
    transform: rotate(90deg);
  }
/* END_BLOCK:heading */

/* START_BLOCK:house-card (INDEX:75) */
.block-icon-card--{{ block.id }} {
  display: flex;
  justify-content: center;
}
/* END_BLOCK:house-card */

/* START_BLOCK:image (INDEX:77) */
.block-image {
    display: flex;
    overflow: hidden;
}

.block-image img {
    width: 100%;
    display: block;
}
/* END_BLOCK:image */

/* START_BLOCK:logo (INDEX:80) */
.shopify-block-logo {
  display: block;
  width: fit-content;
}
/* END_BLOCK:logo */

/* START_BLOCK:promo-card (INDEX:84) */
.promo-card {
position: relative;
display: flex;
align-items: stretch;
border-radius: 0.75rem;
overflow: hidden;
background: rgba(var(--color-brand-light-green), 0.25);
height: 20rem;
color: rgb(var(--color-brand-navy));
transition: background 0.2s ease;
cursor: pointer;
}

.promo-card:hover {
background: rgba(var(--color-brand-light-green), 1);
}

/* ── Left content column ── */
.promo-card__body {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 1.5rem;
padding: 2.25rem 2rem 2rem;
width: 55%;
flex-shrink: 0;
}

.promo-card__content {
display: flex;
flex-direction: column;
justify-content: flex-start;
gap: 1rem;
}

/* ── Badge ── */
.promo-card .pill {
background: rgb(var(--color-brand-green));
transition: background 0.2s ease;
}

.promo-card .pill span {
font-weight: 600;
font-size: 0.95rem;
}

.promo-card:hover .pill {
background: rgb(var(--color-brand-navy));
}

/* ── Heading ── */
.promo-card h3 {
font-size: clamp(1.2rem, 1.5vw, 1.5rem);
font-weight: 500;
line-height: 1.2;
margin: 0;
flex: 1;
display: flex;
align-items: center;
}

/* ── Arrow link ── */
.promo-card__arrow {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
color: rgb(var(--color-brand-green));
text-decoration: none;
line-height: 1;
transition: left 0.2s ease, color 0.2s ease;
width: fit-content;
position: relative;
left: 0;
}

.promo-card:hover .promo-card__arrow {
left: 0.1em;
color: rgb(var(--color-brand-navy));
}

.promo-card__arrow svg {
width: 1em;
color: currentColor;
}

/* ── Image panel ── */
.promo-card__media {
position: absolute;
inset: 0;
left: 35%;
/* Chevron pointing left: flat right edge, V notch on left */
clip-path: polygon(30% 50%, 85% 0%, 100% 0%, 100% 100%, 85% 100%);
transition: clip-path 0.2s ease;
background: #B8B8B8;
}

.promo-card:hover .promo-card__media {
clip-path: polygon(27.5% 50%, 82.5% 0%, 100% 0%, 100% 100%, 82.5% 100%);
}

.promo-card__media img,
.promo-card__media svg.promo-card__placeholder {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}

/* ── Responsive ── */
@media (min-width: 500px) and (max-width: 1023px) {
    .promo-card__media {
    /* Chevron pointing left: flat right edge, V notch on left */
    clip-path: polygon(40% 50%, 85% 0%, 100% 0%, 100% 100%, 85% 100%);
    transition: clip-path 0.2s ease;
    }

    .promo-card:hover .promo-card__media {
    clip-path: polygon(37.5% 50%, 82.5% 0%, 100% 0%, 100% 100%, 82.5% 100%);
    }
}
/* END_BLOCK:promo-card */

/* START_BLOCK:rich-text (INDEX:85) */
.block-rich-text .rte-body p+p { margin: 1em 0 0 0; }
  .block-rich-text .rte-body h1,
  .block-rich-text .rte-body h2,
  .block-rich-text .rte-body h3,
  .block-rich-text .rte-body h4,
  .block-rich-text .rte-body h5,
  .block-rich-text .rte-body h6 {
    margin: 0.75em 0 0.25em;
    line-height: 1.2;
  }
  .block-rich-text .rte-body strong { font-weight: 700; }
  .block-rich-text .rte-body em { font-style: italic; }
  .block-rich-text .rte-body ul,
  .block-rich-text .rte-body ol {
    padding-left: 1.5em;
    margin: 0 0 1em;
  }
  .block-rich-text .rte-body blockquote {
    margin: 1em 0;
    padding: 0.5em 1em;
    color: #555;
    font-style: italic;
  }
  .block-rich-text .rte-body code {
    font-family: 'Courier New', monospace;
    background: #f4f4f4;
    padding: 0.1em 0.4em;
    border-radius: 3px;
    font-size: 0.9em;
  }
  .block-rich-text .rte-body pre {
    background: #f4f4f4;
    padding: 1em;
    overflow-x: auto;
    border-radius: 4px;
  }
  .block-rich-text .rte-body img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 1em auto;
  }
/* END_BLOCK:rich-text */

/* CSS from snippet stylesheet tags */
/* START_SNIPPET:article-card (INDEX:91) */
.article-card {
height: 100%;
border-radius: 0.6em;
overflow: hidden;
display: flex;
flex-direction: column;
background: rgb(var(--color-brand-beige-light));
transition: background 0.3s ease;
cursor: pointer;
text-align: left;
position: relative;
}
.article-card:hover {
background: rgb(var(--color-brand-light-green-light));
}

shopify-visual-preview-section-list-item .article-card {
max-width: 380px;
}

/* ── Image ── */
.article-card__image {
aspect-ratio: 16 / 9;
position: relative;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
border-radius: 0.6em 0.6em 0 0;
}
.article-card__img {
height: 100%;
object-fit: cover;
display: block;
width: 100%;
transition: transform 0.4s ease;
}
.article-card__img--placeholder {
opacity: 0.15;
}
.article-card:hover .article-card__img { transform: scale(1.05); }

.article-card .button {
transition: all 0.3s ease;
}

.article-card:hover .button {
transform: translateY(0.8em);
}

/* ── Content area ── */
.article-card__content {
padding: 2em;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 1.6em;
background: #F9F7F0;
transition: background 0.3s ease, transform 0.3s ease;
flex: 1;
position: relative;
}
.article-card:hover .article-card__content {
background: rgb(var(--color-brand-light-green-light));
transform: translateY(-0.8em);
}
.article-card__content-top { display: flex; flex-direction: column; gap: 0.8em; }

/* ── Meta ── */
.article-card__meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.4em;
}

.article-card__reading-time {
color: rgb(var(--color-brand-green));
}

/* ── Tags ── */
.article-card__tags {
display: flex;
flex-wrap: wrap;
gap: 0.4em;
position: absolute;
top: 1em;
left: 1em;
z-index: 1;
}

.article-card__blogtype-link {
display: inline-flex;
text-decoration: none;
color: inherit;
}
.article-card__blogtype-link:hover {
opacity: 0.85;
}

/* ── Text ── */
.article-card__title {
font-size: 1.3em;
font-weight: 600;
line-height: 1.2;
}
/* END_SNIPPET:article-card */

/* START_SNIPPET:basic_button (INDEX:94) */
.button {
    font-weight: 600;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    border-radius: 0.3em;
    padding: 0.6em 1.1em;
    display: flex;
    gap: 0.75em;
    transition: background 0.3s ease;
    width: fit-content;
    letter-spacing: 0.01em;
  }

  .button.size-large {
    font-size: 1.1em;
  }

  .button > div {
    z-index: 1; display: flex; align-items: center; gap: 0.75em;
  }

  .button svg {
    width: 1em; position: relative; left: 0; transition: left 0.2s ease, transform 0.2s ease;
  }

  .button:hover .button__icon svg,
  .product-card:hover .button .button__icon svg,
  .article-card:hover .button .button__icon svg {
    transform: scale(1.05);
  }

  .button:hover .button__icon.icon-arrow svg,
  .product-card:hover .button .button__icon.icon-arrow svg,
  .article-card:hover .button .button__icon.icon-arrow svg {
    left: 0.1em;
    transform: scale(1);
  }

  .button.colour-green {
    background: rgb(var(--color-brand-light-green));
    color: rgb(var(--color-brand-navy));
  }

  .button.colour-white {
    background: rgb(255,255,255);
    color: rgb(var(--color-brand-navy));
  }

  .button.colour-navy {
    background: rgb(var(--color-brand-navy));
    color: rgb(255,255,255);
  }

  .button.colour-green::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    background: linear-gradient(97deg, rgba(255, 255, 255, 0.50) 0%, rgba(255, 255, 255, 0.00) 55.8%), linear-gradient(277deg, rgba(var(--color-brand-green), 0.25) 0%, rgba(var(--color-brand-green), 0) 55.8%), rgb(var(--color-brand-light-green));
    transition: opacity 0.3s ease;
  }

  .button.colour-green:hover::after,
  .product-card:hover .button.colour-green::after,
  .article-card:hover .button.colour-green::after {
    opacity: 1;
  }

  .button.colour-white:hover,
  .product-card:hover .button.colour-white,
  .article-card:hover .button.colour-white {
    background: rgb(var(--color-brand-light-green));
    color: rgb(var(--color-brand-navy));
  }

  .button.colour-navy:hover,
  .product-card:hover .button.colour-navy,
  .article-card:hover .button.colour-navy {
    background: rgb(var(--color-brand-navy-light));
    color: rgb(255,255,255);
  }
/* END_SNIPPET:basic_button */

/* START_SNIPPET:bullet-title (INDEX:97) */
.section-heading {
  display: flex;
  align-items: center;
  gap: 14px;
}

.section-heading__icon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.section-heading__title {
  margin: 0;
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  font-weight: 600;
  color: #1a2e44;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
/* END_SNIPPET:bullet-title */

/* START_SNIPPET:content_two_col (INDEX:100) */
.ctc {
    display: flex;
    align-items: center;
    gap: 10em;
  }
  .ctc--no-image .ctc__left {
    max-width: 640px;
  }

  /* ── Left column ── */
  .ctc__left {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .ctc__icon {
    margin-bottom: 16px;
    display: block;
    line-height: 0;
  }

.ctc__icon svg {
    width: 1.2em;
    height: 1.2em;
    color: rgb(var(--color-brand-green));
    transform: rotate(90deg);
  }

  .ctc__title {
    margin: 0 0 1em;
  }

  .ctc__body {
    margin-bottom: 1em;
  }

  /* ── Right column: image card ── */
  .ctc__right {
    flex: 0 0 45%;
    max-width: 45%;
    background: #ffffff;
    border-radius: 16px;
    padding: 1em;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }

  .ctc__img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
    max-height: 400px;
  }

  /* ── Mobile ── */
  @media (max-width: 768px) {
    .ctc {
      flex-direction: column;
      gap: 32px;
    }
    .ctc__right {
      flex: none;
      max-width: 100%;
      width: 100%;
    }
  }
/* END_SNIPPET:content_two_col */

/* START_SNIPPET:house-card (INDEX:103) */
.hc-shape {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.hc-img {
  position: absolute;
  width: 90%;
  height: 90%;
  object-fit: contain;
  z-index: 2;
  transition: transform 0.3s ease;
}

.hc-img--contain {
  width: 50%;
  height: 50%;
}

.hc-link:hover .hc-img {
  transform: translateY(-5%);
}
/* END_SNIPPET:house-card */

/* START_SNIPPET:image (INDEX:104) */
.image {
    display: block;
    position: relative;
    overflow: hidden;
    width: 100%;
    height: auto;
  }

  .image > img {
    width: 100%;
    height: auto;
  }
/* END_SNIPPET:image */

/* START_SNIPPET:loading-logo (INDEX:105) */
.loading-logo {
display: block;            /* block so the sticky child can fill full width */
opacity: 0;
pointer-events: none;
position: absolute;
inset: 0;
z-index: 10;
border-radius: 4px;
transition: opacity 0.25s ease;
}

.loading-logo.is-visible {
opacity: 1;
pointer-events: auto;
}

.loading-logo.is-done {
opacity: 0;
pointer-events: none;
transition: opacity 0.35s ease;
}

/* Sticky inner wrapper keeps the icon centred in the viewport slice
of the overlay during height expansion. min(100vh, 100%) means:
- clamped/short state: 100% wins, icon centred in the overlay exactly
- expanding state: 100vh wins, sticky anchors icon to viewport */
.loading-logo__inner {
position: sticky;
top: 0;
width: 100%;               /* span the full overlay width for horizontal centering */
height: min(100vh, 100%);
display: flex;
align-items: center;
justify-content: center;
}

.loading-logo__droplet {
filter: drop-shadow(0 4px 16px rgba(0,0,0,0.10));
}

/* fill-rise base: start empty, no animation until a phase class is added */
.loading-logo__droplet .loading-logo__fill-rise {
transform: translateY(22px);
animation: none;
}

/* Phase 1 — rise to ~65% then hold */
.loading-logo__droplet.is-fetching .loading-logo__fill-rise {
animation: loading-logo-fill-fetch 1.4s cubic-bezier(0.2,0.6,0.5,1) forwards;
}

/* Phase 2 — snap to 100% */
.loading-logo__droplet.is-done .loading-logo__fill-rise {
animation: loading-logo-fill-done 0.3s cubic-bezier(0.4,0,0.2,1) forwards;
}

/*
* translateY key values:
*   22px  = 0%   empty
*    0px  ≈ 65%  hold point during fetch
*  -12px  = 100% full
*/
@keyframes loading-logo-fill-fetch {
from { transform: translateY(22px); }
to   { transform: translateY(0px);  }
}

@keyframes loading-logo-fill-done {
from { transform: translateY(0px);  }
to   { transform: translateY(-12px); }
}

/* Wave slides continuously throughout both phases */
.loading-logo__droplet .loading-logo__wave-slide {
animation: loading-logo-wave 0.7s linear infinite;
}

@keyframes loading-logo-wave {
from { transform: translateX(0);     }
to   { transform: translateX(-22px); }
}
/* END_SNIPPET:loading-logo */

/* START_SNIPPET:product-card (INDEX:112) */
.product-card {
height: 100%;
border-radius: 10px;
overflow: hidden;
display: flex;
flex-direction: column;
background: #F9F7F0;
transition: background 0.3s ease;
cursor: pointer;
}
.product-card:hover {
background: linear-gradient(0deg, rgba(255,255,255,0.25), rgba(255,255,255,0.25)), #C6DE82;
}

/* ── Image ── */
.product-card__image {
aspect-ratio: 1 / 1;
position: relative;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
border-radius: 10px 10px 0 0;
}
.product-card__img {
height: 100%;
object-fit: cover;
display: block;
width: 100%;
transition: transform 0.4s ease;
}
.product-card__img--placeholder {
opacity: 0.15;
}
.product-card:hover .product-card__img { transform: scale(1.05); }

/* ── Top row (badge + cart btn) ── */
.product-card__top {
position: absolute;
top: 20px; left: 20px; right: 20px;
display: flex;
justify-content: space-between;
z-index: 1;
align-items: center;
}

/* ── Cart button ── */
.product-card .cart-btn {
width: 41px; height: 41px;
background: #fff;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
color: rgb(var(--color-brand-navy));
position: relative;
transition: background 0.3s ease;
cursor: pointer;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.product-card .cart-btn:hover { background: #C6DE82; }
.product-card .cart-btn svg { width: 1.1em; }
.product-card .cart-btn--loading,
.product-card .cart-btn--loading:hover {
animation: cart-btn-add-badge-pulse 0.5s infinite ease-in-out;
animation-direction: alternate;
background: #fff;
color: rgb(var(--color-brand-navy));
}

/* ── Cart badge ── */
.product-card .cart-btn .cart-btn-add-badge {
position: absolute;
top: -0.25em; right: -0.25em;
width: 1em; height: 1em;
background: rgb(var(--color-brand-light-green));
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
overflow: hidden;
transition: transform 0.2s cubic-bezier(.4,0,0,1), background 0.3s cubic-bezier(.4,0,0,1),
color 0.3s cubic-bezier(.4,0,0,1), box-shadow 0.3s cubic-bezier(.4,0,0,1);
}
.product-card .cart-btn-add-badge svg { width: 0.5em; }
.product-card .cart-btn:hover .cart-btn-add-badge {
transform: scale(1.2);
color: rgb(var(--color-brand-navy));
box-shadow: 0 0.1em 0.2em rgba(0,0,0,0.25);
}
.product-card .cart-btn .cart-btn-add-badge span {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
}
.product-card .cart-btn .cart-btn-add-badge:not(.cart-btn-add-badge--added) .cart-btn-add-badge--check { visibility: hidden; opacity: 0; }
.product-card .cart-btn:not(.cart-btn--loading) .cart-btn-add-badge .cart-btn-add-badge--loading { visibility: hidden; opacity: 0; }
.product-card .cart-btn .cart-btn-add-badge.cart-btn-add-badge--added .cart-btn-add-badge--check { visibility: visible; opacity: 1; }
.product-card .cart-btn.cart-btn--loading .cart-btn-add-badge .cart-btn-add-badge--loading { visibility: visible; opacity: 1; }
.product-card .cart-btn .cart-btn-add-badge--added .cart-btn-add-badge--plus,
.product-card .cart-btn.cart-btn--loading .cart-btn-add-badge .cart-btn-add-badge--plus { visibility: hidden; opacity: 0; }
.product-card .cart-btn .cart-btn-add-badge.cart-btn-add-badge--added,
.product-card .cart-btn:hover .cart-btn-add-badge.cart-btn-add-badge--added {
transform: scale(1.5);
background: rgb(var(--color-brand-green));
color: #fff;
box-shadow: none;
}
.cart-btn-add-badge--loading svg {
width: 0.5em; height: 0.5em;
transform-origin: center;
animation: cart-btn-loading-spin 1s linear infinite;
}
@keyframes cart-btn-add-badge-pulse { from { opacity: 1; } to { opacity: 0.5; } }
@keyframes cart-btn-loading-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* ── Content area ── */
.product-card__content {
padding: 2em;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 25px;
background: #F9F7F0;
transition: background 0.3s ease, transform 0.3s ease;
flex: 1;
position: relative;
}
.product-card:hover .product-card__content {
background: linear-gradient(0deg, rgba(255,255,255,0.25), rgba(255,255,255,0.25)), #C6DE82;
transform: translateY(-0.75em);
}
.product-card__content-top { display: flex; flex-direction: column; gap: 0.5em; }

/* ── Text ── */
.product-card__brand { font-size: 15px; color: rgb(var(--color-brand-navy)); }
.product-card__title { font-size: 17px; font-weight: 600; color: rgb(var(--color-brand-navy)); }
.price-old { font-size: 15px; color: rgba(0,38,58,0.5); text-decoration: line-through; }
.price { font-size: 17px; font-weight: 600; color: rgb(var(--color-brand-navy)); }
/* END_SNIPPET:product-card */

/* START_SNIPPET:product_card_layout (INDEX:113) */
.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 columns */
  grid-auto-rows: auto;                  /* rows adjust to content */
  gap: 1.5em;                             /* spacing between cards */
  width: 100%;
  margin: 0 auto;
}
/* END_SNIPPET:product_card_layout */

/* START_SNIPPET:search-bar (INDEX:114) */
/* ── Wrapper ── */
  .search-bar-wrapper {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 16px 24px;
    background-color: #ffffff00;
    width: 100%;
    box-sizing: border-box;
    position: relative;
    z-index: 1000;
    max-width: 35vw;
  }

  @media screen and (min-width: 1300px) {
    .search-bar-wrapper {
      width: 40vw;
      max-width: 800px;
    }
  }

  .search-bar-form {
    width: 100%;
    position: relative;
    z-index: 1000;
  }

  /* ── Input row ── */
  .search-bar-inner {
    display: flex;
    align-items: center;
    background-color: #ffffff;
    border-radius: 999px;
    padding: 0.3em 0.3em 0.3em 1.5em;
    gap: 8px;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.10), 0 2px 5px 0 rgba(0, 0, 0, 0.10);
    outline: 0 solid rgba(255,255,255,0);
    transition: all 0.2s ease;
    position: relative;
    z-index: 2;
    cursor: pointer;
  }

  .search-bar-inner:hover:not(.is-open):not(.is-focused):not(:has(input:focus)) {
    background-color: rgb(var(--color-brand-beige-light));
  }

  .search-bar-inner.is-open,
  .search-bar-inner.is-focused,
  .search-bar-inner:has(input:focus) {
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.06);
    outline: 5px solid rgba(255,255,255,0.25);
    cursor: text;
    padding: 0.3em 0.3em 0.3em 2em;
  }

  input[type="search"].search-bar-input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 1em;
    color: rgb(var(--color-brand-navy));
    font-family: inherit;
    line-height: 1.5;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    padding: 0;
  }

  input[type="search"].search-bar-input:focus {
    cursor: text;
    box-shadow: none;
  }

input[type="search"].search-bar-input::placeholder { color: #9B988D; }

input[type="search"].search-bar-input::-webkit-search-decoration,
input[type="search"].search-bar-input::-webkit-search-cancel-button,
input[type="search"].search-bar-input::-webkit-search-results-button,
input[type="search"].search-bar-input::-webkit-search-results-decoration { display: none; }

  .search-bar-button {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background-color: rgb(var(--color-brand-light-green));
    border: none;
    padding: 0 2em;
    border-radius: 5em 10em 10em 5em;
    height: 3.5em;
    cursor: pointer;
    color: #2d3a1e;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease, padding 0.2s ease;
  }

  .search-bar-inner.is-open .search-bar-button,
  .search-bar-inner.is-focused .search-bar-button,
  .search-bar-inner:has(input:focus) .search-bar-button {
    padding: 0 2.5em;
  }

  .search-bar-button:hover  { background-color: rgb(var(--color-brand-green)); color: #fff; transform: scale(1.02); }
  .search-bar-button:active { background-color: rgb(var(--color-brand-navy)); color: #fff; transform: scale(0.98); }
  .search-bar-icon          { display: block; }

  .search-bar-button svg {
    height: 1.25em;
  }

  /* ── Dropdown ── */
  .search-bar-dropdown {
    position: absolute;
    top: 100%;
    left: calc(50% - 100vw / 2);
    right: 0;
    width: 100vw;
    background: rgb(var(--color-brand-navy));
    overflow: hidden;
    z-index: 1000;
    transition: background 0.2s ease-in-out;
    animation: dropdownFade 0.4s ease-in-out;
  }

  .search-bar-dropdown[hidden] { display: none; }

  @keyframes dropdownFade {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  @keyframes sbDropIn {
    from { opacity: 0; transform: scale(0.95); }
    to   { opacity: 1; transform: scale(1); }
  }

  .search-bar-results-container {
    padding: 2em;
    background: rgba(0,0,0,0.25);
    border-radius: 1em;
    margin: calc(var(--page-margin) * 0.75);
    margin-top: 0.75rem;
    animation: sbDropIn 0.4s ease-in-out;
  }

  @media screen and (min-width: 1024px) {
    .search-bar-results-container {
      margin: 0.75em calc(var(--page-margin) * 0.6) calc(var(--page-margin) * 0.6);
    }
  }

  .search-bar-results-inner {
    max-width: var(--page-width);
    margin: 0 auto;
    position: relative;
  }

  /* ── Section headings ── */
  .sb-section-title {
    font-size: 0.7em;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.4);
    padding: 0.75em 10px 0.5em;
  }

  .sb-section-title:first-child {
    padding-top: 0;
  }

  /* ── Divider ── */
  .sb-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.07);
    margin: 6px 0;
  }

  /* ── Result row ── */
  .sb-result-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    color: #e8eef4;
    text-decoration: none;
    font-size: 14.5px;
    cursor: pointer;
    gap: 12px;
    transition: all 0.2s ease;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    box-sizing: border-box;
    border-radius: 1em;
  }

  .sb-result-row:hover,
  .sb-result-row.is-active {
    background-color: rgb(var(--color-brand-navy));
    color: rgb(var(--color-brand-light-green));
  }

  .sb-result-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
  }

  /* Product thumbnail */
  .sb-result-img {
    width: 36px;
    height: 36px;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.08);
  }

  .sb-result-img-placeholder {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.07);
  }

  /* Inline icon */
  .sb-result-icon {
    flex-shrink: 0;
    opacity: 0.45;
    width: 18px;
    height: 18px;
  }

  .sb-result-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .sb-result-meta {
    font-size: 11px;
    color: rgba(255,255,255,0.35);
    white-space: nowrap;
    flex-shrink: 0;
  }

  .sb-result-price {
    font-size: 13px;
    color: #8fa8c0;
    flex-shrink: 0;
  }

  .sb-result-arrow {
    flex-shrink: 0;
    opacity: 0.3;
    width: 16px;
    height: 16px;
  }

  /* Loading / empty states */
  .sb-state {
    padding: 18px 24px;
    color: #6b8aaa;
    font-size: 14px;
    text-align: center;
  }

  /* ── Backdrop ── */
  .search-bar-backdrop {
    position: fixed;
    inset: 0;
    z-index: 999;
  }

  .search-bar-backdrop[hidden] { display: none; }

  /* ── Mobile Styles ── */
  @media screen and (max-width: 1023px) {
    .search-bar-wrapper {
      width: auto;
      max-width: none;
      padding: 0;
      display: inline-flex;
      transition: flex 0.25s cubic-bezier(.4,0,0,1), width 0.25s cubic-bezier(.4,0,0,1);
    }

    .search-bar-form {
      width: auto;
      transition: width 0.25s cubic-bezier(.4,0,0,1);
    }

    .search-bar-inner {
      background-color: transparent !important;
      box-shadow: none !important;
      padding: 0 !important;
      gap: 0 !important;
      border-radius: 999px;
      transition: background-color 0.2s ease, border-radius 0.2s ease,
      padding 0.2s ease, max-height 0.2s ease, gap 0.2s ease !important;
    }

    .search-bar-inner:hover {
      background-color: transparent !important;
    }

    .search-bar-input {
      width: 0;
      opacity: 0;
      padding: 0;
      margin: 0;
      pointer-events: none;
      transition: width 0.25s cubic-bezier(.4,0,0,1), opacity 0.2s ease;
      background: transparent !important;
    }

    /* Collapsed mobile button */
    .search-bar-inner:not(.is-open):not(.is-focused) .search-bar-button {
      border-radius: 0.3em !important;
      width: 3em !important;
      height: 3em !important;
      padding: 0 !important;
      background: rgba(255,255,255,0.2);
      color: #fff;
    }

    /* ── Expanded state: inline within menu bar ── */
    .search-bar-wrapper:has(.search-bar-inner.is-open),
    .search-bar-wrapper:has(.search-bar-inner.is-focused) {
      flex: 1;
      width: 100% !important;
      max-width: none !important;
      padding: 0 !important;
    }

    .search-bar-wrapper:has(.search-bar-inner.is-open) .search-bar-form,
    .search-bar-wrapper:has(.search-bar-inner.is-focused) .search-bar-form {
      width: 100% !important;
    }

    .search-bar-wrapper:has(.search-bar-inner.is-open) .search-bar-inner,
    .search-bar-wrapper:has(.search-bar-inner.is-focused) .search-bar-inner {
      background-color: transparent !important;
      box-shadow: none !important;
      padding: 0.4em 0.4em 0.4em 1em !important;
      gap: 8px !important;
      width: 100% !important;
      border-radius: 0.5em !important;
      max-height: 2.6em !important;
      box-sizing: border-box !important;
      outline: none !important;
    }

    .search-bar-wrapper:has(.search-bar-inner.is-open) .search-bar-input,
    .search-bar-wrapper:has(.search-bar-inner.is-focused) .search-bar-input {
      width: 100% !important;
      opacity: 1 !important;
      pointer-events: auto !important;
      color: #ffffff !important;
      background: transparent !important;
      transition: width 0.25s cubic-bezier(.4,0,0,1), opacity 0.2s ease 0.05s !important;
    }

    .search-bar-wrapper:has(.search-bar-inner.is-open) .search-bar-input::placeholder,
    .search-bar-wrapper:has(.search-bar-inner.is-focused) .search-bar-input::placeholder {
      color: rgba(255,255,255,0.45) !important;
    }

    /* Close button replaces green search button when expanded */
    .search-bar-wrapper:has(.search-bar-inner.is-open) .search-bar-button,
    .search-bar-wrapper:has(.search-bar-inner.is-focused) .search-bar-button {
      width: 2.5em !important;
      height: 2.5em !important;
      min-height: unset !important;
      padding: 0 !important;
      border-radius: 50% !important;
      background: rgba(255,255,255,0.15) !important;
      color: #fff !important;
      flex-shrink: 0;
      transform: none !important;
      transition: background 0.2s ease, transform 0.15s ease !important;
    }

    .search-bar-wrapper:has(.search-bar-inner.is-open) .search-bar-button:hover,
    .search-bar-wrapper:has(.search-bar-inner.is-focused) .search-bar-button:hover {
      background: rgba(255,255,255,0.25) !important;
      transform: none !important;
    }

    /* Search icon on left when expanded — fade in with slight delay */
    .search-bar-wrapper:has(.search-bar-inner.is-open) .search-bar-inner::before,
    .search-bar-wrapper:has(.search-bar-inner.is-focused) .search-bar-inner::before {
      content: '';
      display: block;
      width: 1.25em;
      height: 1.25em;
      flex-shrink: 0;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.5)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C%2Fsvg%3E");
      background-repeat: no-repeat;
      background-size: contain;
      opacity: 0;
      animation: sbIconFadeIn 0.2s ease 0.1s forwards;
    }

    @keyframes sbIconFadeIn {
      from { opacity: 0; transform: scale(0.8); }
      to   { opacity: 1; transform: scale(1); }
    }

    /* Dropdown sits below the full header */
    .search-bar-dropdown {
      position: fixed !important;
      width: 100vw !important;
      height: 100vh !important;
      overflow-y: auto !important;
      z-index: 1000 !important;
    }

    .search-bar-results-container {
      margin: 0.75em !important;
      padding: 1em !important;
    }

    .search-bar-wrapper:has(.search-bar-inner.is-open) .search-bar-backdrop[hidden],
    .search-bar-wrapper:has(.search-bar-inner.is-focused) .search-bar-backdrop[hidden] {
      display: block !important;
    }
  }

  @media (max-width: 480px) {
    .search-bar-input   { font-size: 14px !important; }
    .sb-result-row      { padding: 10px 16px !important; font-size: 14px !important; }
  }
/* END_SNIPPET:search-bar */