/** Shopify CDN: Minification failed

Line 73:67 Unexpected "p"

**/
/*
 * emc-overrides.css
 * ---------------------------------------------------------------------------
 * Page/template-specific brand overrides.
 *
 * These were edits made directly inside assets/base.css before the Fabric
 * 4.1.1 migration. base.css is a STOCK file that Shopify replaces on every
 * theme update, so anything living there is lost (or conflicts) on upgrade.
 * They live here instead — this file is ours and Shopify will never ship it.
 *
 * Loaded from snippets/stylesheets.liquid, after base.css.
 *
 * Add new page/component overrides here rather than editing base.css.
 */

/* Header raster icons -------------------------------------------------------
   The header uses <img> icons (cart3/account3/wishlist3.svg) rather than the
   theme's inline SVGs. Without these size caps an <img> renders at its natural
   SVG size, which blows the header apart. */
.icon-svg {
  display: block;
}

.icon-svg--header {
  width: 28px;
  height: 28px;
  max-width: 28px;
  max-height: 28px;
}

/* Swym wishlist button (injected by the app) */
.swym-wishlist {
  height: 44px;
  width: 44px;
  display: flex;
  justify-content: center;
  align-items: center;
}

@media screen and (width < 750px) {
  .swym-wishlist {
    display: none;
  }
}

/* Cards inside the header/drawer shouldn't lift on hover like grid cards do */
.header .product-card:hover,
.header .collection-card:hover,
.header .resource-card:hover,
.header-drawer .product-card:hover,
.header-drawer .collection-card:hover,
.header-drawer .resource-card:hover {
  z-index: auto;
  transform: none;
  box-shadow: none;
}

/* Sale collection pages (collection.sale -> body.template-collection-sale, and
   collection.labor-day-sale -> body.template-collection-labor-day-sale).
   Compact collection cards with a green label band instead of imagery. Live
   sizes these via assets/custom.css (which isn't loaded here), so the rules
   live in this loaded layer. Add other sale templates to the :is() as needed. */
:is(.template-collection-sale, .template-collection-labor-day-sale).section-collection-list {
  padding-block-start: 1rem;
  padding-block-end: 1rem;
}

:is(.template-collection-sale, .template-collection-labor-day-sale)p {
  font-size: 0.7rem;
}

:is(.template-collection-sale, .template-collection-labor-day-sale).collection-card__image {
  display: none;
}

:is(.template-collection-sale, .template-collection-labor-day-sale).collection-card__link {
  min-height: 55px !important;
}

:is(.template-collection-sale, .template-collection-labor-day-sale).collection-list .collection-card__inner,
:is(.template-collection-sale, .template-collection-labor-day-sale).collection-list__item .collection-card__inner {
  padding: 0.5rem 0.25rem;
}

:is(.template-collection-sale, .template-collection-labor-day-sale).text-block:not(.text-block--full-width).rte {
  color: #ffffff !important;
  align-items: center;
  width: 100% !important;
  letter-spacing: 1px;
  text-transform: uppercase;
  justify-content: center;
  background: #009344; /* brand green */
  min-height: 40px;
}

:is(.template-collection-sale, .template-collection-labor-day-sale).collection-card__content p {
  text-align: center !important;
}

:is(.template-collection-sale, .template-collection-labor-day-sale).collection-list__carousel slideshow-arrows .slideshow-control {
  background: #ffffff;
  color: #009344; /* brand green */
}

/* --- Footer ---------------------------------------------------------------
 * The footer group is brand green (#009344) with white copy. In 3.4.0 that came
 * from colour scheme-3 (background #009344 / foreground #ffffff).
 *
 * 4.1.1 has no colour schemes: `contrast-override` derives the foreground itself,
 * and it keeps the GLOBAL page text colour whenever that clears 4.5:1 against the
 * background. Black on this green is 5.25:1 (white is only 4.0:1), so black wins
 * and the footer columns render dark.
 *
 * Blocks that expose a `text_color` setting are set to #ffffff in
 * sections/footer-group.json. `custom-liquid` has NO colour setting at all, so its
 * columns can only be corrected here.
 */
footer .group-block-content {
  --color: #ffffff;
  --color-foreground: #ffffff;
  color: #ffffff;
}

/* The section above the footer is the same brand green, so the two run together
 * with no seam. This rule is the divider between them.
 *
 * It sits on <footer> rather than on the section's `.section-background`: that
 * element is absolutely positioned *inside* the section wrapper, so a border on it
 * would scroll under the section above instead of separating the two. Each section
 * paints its own green below this line, which keeps the rule full-bleed.
 */
footer {
  border-top: 1px solid #ffffff;
}

/* Footer column widths (desktop): 20 / 20 / 20 / 40.
 *
 * The merchant's own footer CSS (in the custom_liquid_Emk3XB block) sizes the last
 * two columns with `.group-block-content > div:nth-child(3)` and `:nth-child(4)`,
 * which matched the logo and social columns in 3.4.0's DOM.
 *
 * 4.1.1 renders each coloured block's `contrast-override` output as an inline
 * <style> *inside* .group-block-content, so those two columns are now children 5
 * and 6 and both rules match nothing — the columns collapse to content width.
 *
 * Restated here by type: `div:nth-of-type` counts only div siblings, so the
 * injected <style> nodes can't shift it. This lives in our layer rather than being
 * fixed in place because resync-from-live.sh re-copies custom_liquid verbatim from
 * live, which would revert an edit there.
 */
@media screen and (width > 750px) {
  footer .group-block-content > div:nth-of-type(1) {
    flex: 0 0 20%;
  }

  footer .group-block-content > div:nth-of-type(2) {
    flex: 0 0 40%;
  }
}

/* --- Cart drawer ----------------------------------------------------------
 * Restore the modal backdrop. 4.1.1 still sets
 *   --backdrop-color-rgb: var(--color-shadow-rgb)
 * but `--color-shadow-rgb` is never defined anywhere in the theme: in 3.4.0 it
 * came from `color-schemes.liquid` (`--color-shadow: rgba({{ scheme.settings.shadow.rgba }})`),
 * and 4.1.1 deleted that file along with colour schemes. So the backdrop resolves
 * to `rgb( / 0.15)` — invalid, therefore fully transparent, and the drawer opens
 * with no dimming behind it.
 *
 * This restates 3.4.0's formula (foreground at --backdrop-opacity), which measures
 * identical to live: rgb(3 3 2 / 0.15). Deriving it from --color-foreground rather
 * than hardcoding keeps it correct if the palette changes.
 */
.dialog-modal::backdrop,
.theme-drawer__dialog::backdrop {
  /* !important is load-bearing: styles.css carries
   * `.theme-drawer__dialog::backdrop` at identical specificity and is linked after
   * this file, so its (broken) declaration would win on source order. */
  background: rgb(from var(--color-foreground) r g b / var(--backdrop-opacity, 0.15)) !important;
}

/* Drawer rules are the light neutral, not the brand green.
 * The gift-options snippet is byte-identical to 3.4.0 and asks for
 * `var(--color-border)`. In 3.4.0 the drawer's scheme resolved that to #d3cec5;
 * in 4.1.1 contrast-override derives it instead and lands on brand green, so the
 * divider above the gift box rendered green while the neighbouring quantity
 * selectors stayed grey. Live measures #d3cec5 throughout the drawer. */
cart-drawer-component,
.cart-drawer,
.theme-drawer__dialog {
  --color-border: #d3cec5;
}

/* Live styles this label uppercase via CSS (the string stays "Discount"). */
.cart-discount__label {
  text-transform: uppercase;
}

/* One price per cart line, in the right-hand column.
 *
 * 4.1.1 ships `.cart-items__unit-price-wrapper`, which repeats the line price
 * underneath the variant — so every line showed the price twice. 3.4.0 deleted the
 * markup outright ("no price beneath the size"); that deletion did not survive the
 * port because the block is stock in 4.1.1 rather than something we added.
 *
 * Hidden rather than deleted: same rendered result, but it stays in our layer
 * instead of becoming a ~29-line deletion inside a stock snippet to re-apply on
 * every upgrade.
 *
 * Safe because every grid layout defining a `unit_price` area also defines a
 * `price` area, so no breakpoint is left without a price. True unit pricing
 * (per-100g and friends) is a separate `unit-price` render guarded by
 * `item.unit_price_measurement` and is untouched.
 */
.cart-items__unit-price-wrapper {
  display: none;
}

/* --- Collection-list category cards -------------------------------------
 * 3.4.0 rendered these "Shop X% off / Sale <category>" collection cards as flat
 * colour-scheme buttons with no image. 4.1.4 redesigned `collection-card` to
 * always render the collection image (blocks/collection-card snippet), so the
 * green category buttons came through as image cards with the colour dropped.
 *
 * The green is restored in the block data (background_color + text_color from the
 * live scheme). This hides the image ONLY on cards that carry a custom background
 * (`color-custom-<id>`, added when background_color is set) so they read as the
 * flat buttons live shows. Image-only cards (no background) are untouched. */
/* The labor-day sale nav is a collection-list whose card links to filtered
 * collections. 4.1.4 draws each collection's featured image at the SECTION level
 * (ignoring the block's green background), and 4.1.4 dropped the `template-<name>`
 * body class 3.4.0 used for scoping — so this is scoped by the section key. */
[id$="__collection_list_apYPx3"] .collection-card {
  background: #009344 !important;
}
[id$="__collection_list_apYPx3"] .collection-card .collection-card__image {
  display: none !important;
}
[id$="__collection_list_apYPx3"] .collection-card__link,
[id$="__collection_list_apYPx3"] .collection-card__content,
[id$="__collection_list_apYPx3"] .collection-card__content * {
  color: #ffffff !important;
}
[id$="__collection_list_apYPx3"] .collection-card__content {
  justify-content: center;
  text-align: center;
}

/* --- Designer pick badge ---------------------------------------------------
 * Products tagged `emilysdesignerpicks` show a corner badge on the product card
 * ("Emily's Designer Pick"). Ported from live 3.4.0 (was in the custom
 * snippets/product-card.liquid stylesheet, which 4.1.4 replaced with a native
 * card). The badge markup is injected in snippets/product-card.liquid (gated on
 * the tag); the art is assets/designer-pick.png.
 *
 * position:relative on the card gives the absolutely-positioned badge its
 * anchor. pointer-events:none keeps clicks passing through to the card link
 * (.product-card__link is an inset:0 overlay); z-index:2 lifts the badge above
 * both the link overlay and .product-card__content. */
.product-card {
  position: relative;
}

.product-card__badge {
  position: absolute;
  inset-block-start: var(--padding-sm, 8px);
  inset-inline-end: var(--padding-sm, 8px);
  z-index: 2;
  pointer-events: none;
  width: 25%; /* scales with the card */
  aspect-ratio: 96 / 58; /* keeps the badge art's proportions */
  height: auto;
  background-image: var(--designer-pick-image);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

@media (max-width: 580px) {
  .product-card__badge {
    inset-block-start: 0;
    inset-inline-end: 8px;
    width: 56px;
    height: 56px;
  }
}

/* --- Quick-add "Add / Choose" button ---------------------------------------
 * 4.1.4's native quick-add button inherits the card color scheme and renders as
 * a green outline. Live styles it as a brand cream pill with pink text (values
 * measured from live: bg #f9f5f2, text #e646a5, 100px pill, Figtree uppercase).
 * Restated here so the card CTA matches live. The doubled class (.quick-add__button
 * twice) lifts specificity above the stock button rule, which ships in an inline
 * section <style> that would otherwise win on source order.
 *
 * The green "border" is NOT a real border: `.button` in base.css draws its edge
 * with `box-shadow: inset 0 0 0 var(--button-border-width) var(--button-border-color)`,
 * and on a card `--button-border-color` resolves to the green foreground — so
 * `border: none` can't remove it. Live overrides box-shadow to the popover drop
 * shadow (`--shadow-popover`) with a transparent border; we mirror that here. */
.quick-add__button.quick-add__button {
  background: #f9f5f2;
  color: #e646a5;
  border-color: transparent;
  box-shadow: var(--shadow-popover);
  border-radius: 100px;
  padding: 8px 11.2px;
  font-family: Figtree, sans-serif;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.188em;
  text-transform: uppercase;
  width: fit-content;
}

/* Hover keeps the resting cream/pink - the stock button only expands its text on
 * hover (no colour change), so don't flip to a filled pink. */
.quick-add__button.quick-add__button:hover,
.quick-add__button.quick-add__button:focus-visible {
  background: #f9f5f2;
  color: #e646a5;
}

/* --- Platmart swatches off on PLP ------------------------------------------
 * The platmart-swatches app injects `.pl-swatches-collection` onto collection /
 * search cards. Live does not use platmart on listing views (only PDP), so the
 * 4.1.4 card DOM triggering it here is a regression. Hide the collection variant
 * only; the PDP variant (a different class) is untouched. */
.pl-swatches-collection {
  display: none !important;
}

/* --- Accordion: drop the fallback top border on the first row --------------
 * accordion-styles.liquid (stock) draws a fallback divider above the first
 * `.accordion--dividers` row when the accordion's own border is off, which the
 * FAQ section does. Remove that top line. Overridden here rather than editing
 * the stock file; !important beats the inline section <style>. */
.accordion--dividers accordion-custom:first-child .details {
  border-block-start: none !important;
}

/* --- Portrait product-card / media ratio = 2:3 -----------------------------
 * The client's product photography is 230x345 (2:3). Stock 'portrait' is 4/5,
 * which card-gallery.liquid applies via an inline `--gallery-aspect-ratio`
 * custom property on the `[data-image-ratio='portrait']` gallery. Override that
 * property here instead of editing the stock snippet (keeps drift clean);
 * !important beats the inline value it sets. */
.card-gallery[data-image-ratio='portrait'] {
  --gallery-aspect-ratio: 2 / 3 !important;
}

/* --- Moved from the Shopify Custom CSS field (settings_data) ----------------
 * The settings Custom CSS field is size-limited and a theme-editor save can
 * silently wipe it (it did on 2026-09-22). These app-integration overrides
 * live here instead so they are durable and versioned. Carried from live.
 * NOTE: the swym rules below override the swym styling in product.css because
 * this file loads after it (per snippets/stylesheets.liquid order). */

/* Component tweaks */
.product-badges__badge { letter-spacing: 0.05rem; font-size: 0.75rem; }
.menu-drawer__menu-item--parent { font-size: 1.35rem; letter-spacing: 0.1625rem !important; text-transform: uppercase; }
.announcement-bar__slider { z-index: 10; }
.button.cart-items__remove svg { min-width: 20px; }

/* Yotpo: center the photo-gallery upload header, hide reviews tab(s) */
.yotpo-gallery-668
.yotpo-pictures-gallery-header-wrapper
.yotpo-pictures-gallery-upload-button-wrapper { text-align: center !important; }
.yotpo-reviews-tab,
.yotpo-reviews-tab-layout { display: none !important; }

/* Hide express-checkout buttons (PayPal / Amazon Pay / accelerated cart) */
shopify-paypal-button,
shopify-accelerated-checkout-cart,
#AcceleratedCheckoutAmazonPayButtonContainercart_page1 { display: none !important; }

/* Tertiary button (e.g. cart "Go to Cart" CTA) */
.button--tertiary { background-color: #ffffff; color: #000000; border: 1px solid #000000; width: 100%; }
.button--tertiary:hover,
.button--tertiary:focus-visible { background-color: #000000; color: #ffffff; border-color: #000000; }

/* Button letter-spacing (primary / secondary / custom / payment button) */
.button,
.button-secondary,
.button-custom,
button.shopify-payment-button { letter-spacing: 0.188rem; }

/* PDP: space out the product-information row (from live) */
#ProductInformation-template--18991605645399__product-information
  > div
  > div.group-block-content.layout-panel-flex.layout-panel-flex--column
  > div:nth-child(2)
  > div.group-block-content.layout-panel-flex.layout-panel-flex--row.mobile-column { justify-content: space-between !important; }

/* Product details group-block spacing + Yotpo layout tweaks */
.product-details > :nth-child(1 of .group-block) .group-block-content { justify-content: space-between !important; }
.product-details > :nth-child(2 of .group-block) .group-block-content {}
.yotpo-bold-layout .yotpo-head { justify-content: center !important; }
.yotpo-empty-state svg { display: none !important; }

/* Swym wishlist button */
button.swym-button.swym-add-to-wishlist-view-product { position: relative !important; text-align: center !important; }
.swym-button-bar.swym-wishlist-button-bar.swym-inject,
.swym-btn-container.swym-inject,
button.swym-button.swym-add-to-wishlist.swym-loaded {
  width: 100% !important;
  max-width: 100% !important;
  color: green !important;
  outline: none !important;
  text-align: center !important;
  text-transform: uppercase !important;
  letter-spacing: 0.88px;
  box-shadow: none !important;
}
button.swym-button.swym-add-to-wishlist.swym-inject.swym-iconbtnlink.swym-heart.swym-loaded:after {
  line-height: unset !important;
  position: relative !important;
  left: -130px;
  color: green !important;
}
button.swym-button.swym-add-to-wishlist.swym-inject.swym-iconbtnlink.swym-heart:after { top: 3px !important; }
.swym-btn-container[data-position="default"] .swym-add-to-wishlist.swym-iconbtnlink { text-indent: 0 !important; }
.swym-add-to-wishlist.swym-iconbtnlink { text-transform: uppercase !important; }

/* --- Pagination: match live's boxed style ----------------------------------
 * Live (snippets/pagination.liquid) renders bordered square buttons: each page
 * and arrow is a 1px black box (border-radius 0, padding .5em 1em), the current
 * page is filled black with white text, and the arrows are « / ». 4.1.4's stock
 * pagination-controls.liquid instead ships fixed 36px chevron buttons with an
 * animated active chip; restyle it to match live. */
.pagination {
  margin: 3em auto 0 !important;
  padding: 0.5em var(--padding-sm) 5em !important;
  font-size: 13px !important;
  border-top: none !important;
}
.pagination__list { gap: 2px !important; }

/* Boxed buttons: override the stock fixed 36px square + rectangular padding */
.pagination__item { width: auto !important; aspect-ratio: auto !important; }
.pagination__link {
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  padding: 0.5em 1em !important;
  border: 1px solid #000000 !important;
  border-radius: 0 !important;
  color: #000000 !important;
  font-size: 13px !important;
  font-weight: 400 !important;
}
/* Strip the stock animated hover/active chip (::before indicators) */
.pagination__link::before,
.pagination__list::before { content: none !important; background: none !important; }
/* Current page + hover = filled black, white text */
.pagination__link--current,
.pagination__link[aria-current='page'],
.pagination__link:hover:not(.pagination__link--gap):not(.pagination__link--disabled) {
  background: #000000 !important;
  color: #ffffff !important;
  text-decoration: none !important;
}
/* Arrows: replace stock SVG chevrons with « / » like live */
.pagination__link--arrow .svg-wrapper,
.pagination__link--arrow svg { display: none !important; }
.pagination__item:first-child .pagination__link--arrow::after { content: "\00AB"; }
.pagination__item:last-child .pagination__link--arrow::after { content: "\00BB"; }

/* --- Collection filters (facets): brand overrides --------------------------
 * Live and 4.1.4 ship different facets component *versions* (different class
 * names / DOM), so live's facets stylesheet can't be dropped over the stock
 * blocks/filters.liquid one without breaking the filters. These are the
 * portable brand customizations from live: the Gotham Book filter labels and
 * the vertical-facet column width. (Flat min-width queries for compatibility.) */
@media screen and (min-width: 750px) { .collection-wrapper { --facets-vertical-col-width: 6; } }
@media screen and (min-width: 990px) { .collection-wrapper { --facets-vertical-col-width: 5; } }

.facets__label {
  font-family: 'Gotham Book', sans-serif;
  font-size: 0.8rem;
}

.products-count-wrapper,
.facets--horizontal .products-count-wrapper {
  font-family: 'Gotham Book', sans-serif;
  font-size: 0.8rem;
  text-transform: uppercase;
}

/* --- PDP details column: fixed width to match live -------------------------
 * At >=1200px, 4.1.4 (product-information-content.liquid) switches the details
 * (right) column to a proportional `2fr 1fr`, so it grows to ~1/3 of the
 * content width (viewport-dependent: ~447-496px). Live keeps it fixed at
 * --sidebar-width. Restore the fixed `min(50vw, --sidebar-width)` track so the
 * details content is ~380px like live instead of scaling with the viewport.
 * Verified in-browser: this yields a 400px column / 380px content at 1539px. */
@media screen and (min-width: 1200px) {
  .product-information__grid:not(.product-information__grid--half, .product-information--media-none).product-information--media-left {
    grid-template-columns: 1fr min(50vw, var(--sidebar-width)) !important;
  }
  .product-information__grid:not(.product-information__grid--half, .product-information--media-none).product-information--media-right {
    grid-template-columns: min(50vw, var(--sidebar-width)) 1fr !important;
  }
}

/* --- Default divider / border / HR color = brand warm grey -----------------
 * color-palette.liquid maps --color-border to page_text_color (the near-black
 * foreground #030302), so every stock divider, border and <hr> renders black.
 * Live uses the warm grey #d3cec5 (rgb 211 206 197). Set the token on `body`
 * (a descendant of :root) so it overrides the inherited palette value for the
 * whole page — color-palette.liquid's :root loads AFTER this file, so a :root
 * override here would lose on source order, whereas body wins by proximity and
 * still lets any legitimate per-section override win closer in. */
body {
  --color-border: rgba(211 206 197 / 1.0);
  --color-border-rgb: 211 206 197;
}

/* --- Blog post cards --------------------------------------------------------
 * Uppercase, letter-spaced card copy + Gotham Medium titles, and nudge the
 * card image focal point up slightly. */
.blog-post-card__content a {
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 3px;
}
.blog-post-card__title-link {
  font-family: "Gotham Medium", sans-serif !important;
  letter-spacing: 0.375rem !important;
  text-transform: uppercase !important;
}
.blog-post-card__image {
  object-position: center 35% !important;
}