/** Shopify CDN: Minification failed

Line 33:0 All "@import" rules must come first
Line 291:0 All "@import" rules must come first

**/


/* ==========================================================
   Soft-minimal beauty theme styles (for Shopify Dawn)
   Aesthetic: warm neutrals, airy spacing, light type, pill buttons
   Install: Online Store > Themes > ... > Edit code > Assets
            > Add a new asset > create "custom-soft.css", paste this in.
            Then in layout/theme.liquid, just before </head>, add:
            {{ 'custom-soft.css' | asset_url | stylesheet_tag }}
   ========================================================== */

/* ---------- 1. Design tokens ---------- */
:root {
  --soft-bg: #f6f2ed;          /* warm off-white page */
  --soft-surface: #ece6de;     /* product card / section tint */
  --soft-surface-2: #e4dcd1;   /* hover tint */
  --soft-text: #1c1a18;        /* near-black */
  --soft-muted: #7a7168;       /* secondary text */
  --soft-line: #ddd5ca;        /* hairlines */
  --soft-accent: #c9a89a;      /* dusty rose accent */
  --soft-radius: 18px;
  --soft-pill: 999px;
  --soft-ease: cubic-bezier(.22,.61,.36,1);
}

/* Optional: load a clean, light sans (swap for your own brand font) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500&display=swap');

/* ---------- 2. Base ---------- */
html, body {
  background: var(--soft-bg) !important;
  color: var(--soft-text);
  font-family: 'Inter', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  font-weight: 300;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
}

.color-background-1,
.color-background-2,
.gradient,
body { background: var(--soft-bg); }

h1, h2, h3, h4, .h0, .h1, .h2, .h3, .h4 {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  letter-spacing: -0.02em;
  text-transform: lowercase;           /* lowercase headings */
  color: var(--soft-text);
}

a { color: var(--soft-text); text-decoration: none; }
a:hover { color: var(--soft-muted); }

/* Generous section spacing */
.section-template--padding,
.shopify-section > section,
.page-width { --section-padding: 72px; }
@media (min-width: 990px) {
  .shopify-section { margin-block: 24px; }
}

/* ---------- 3. Announcement bar ---------- */
.announcement-bar,
.utility-bar {
  background: var(--soft-text) !important;
  color: var(--soft-bg) !important;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: lowercase;
}
.announcement-bar a, .announcement-bar__message { color: var(--soft-bg) !important; }

/* ---------- 4. Header ---------- */
.header-wrapper,
.section-header,
sticky-header {
  background: var(--soft-bg) !important;
  border-bottom: 1px solid var(--soft-line) !important;
  box-shadow: none !important;
}
.header { padding-block: 14px; }
.header__heading-link {
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: lowercase;
}
.header__menu-item,
.header__menu-item span,
.list-menu__item--link {
  font-size: 13px;
  font-weight: 400;
  text-transform: lowercase;
  color: var(--soft-text);
  transition: opacity .3s var(--soft-ease);
}
.header__menu-item:hover { opacity: .55; text-decoration: none; }

/* Centered logo layout (works with Dawn "logo center" setting too) */
@media (min-width: 990px) {
  .header--middle-left, .header--top-center { justify-items: center; }
}

/* ---------- 5. Buttons (pill shaped) ---------- */
.button,
.shopify-challenge__button,
.customer button,
button.shopify-payment-button__button--unbranded,
.product-form__submit {
  --border-radius: var(--soft-pill);
  border-radius: var(--soft-pill) !important;
  background: var(--soft-text) !important;
  color: var(--soft-bg) !important;
  border: 1px solid var(--soft-text) !important;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: lowercase;
  min-height: 48px;
  padding: 0 32px;
  box-shadow: none !important;
  transition: background .3s var(--soft-ease), color .3s var(--soft-ease), transform .2s var(--soft-ease);
}
.button::before, .button::after { display: none !important; } /* remove Dawn border shadow */
.button:hover, .product-form__submit:hover {
  background: transparent !important;
  color: var(--soft-text) !important;
  transform: translateY(-1px);
}
.button--secondary {
  background: transparent !important;
  color: var(--soft-text) !important;
}
.button--secondary:hover {
  background: var(--soft-text) !important;
  color: var(--soft-bg) !important;
}

/* ---------- 6. Hero / banner ---------- */
.banner,
.slideshow {
  border-radius: var(--soft-radius);
  overflow: hidden;
  margin-inline: 16px;
}
.banner__heading, .slideshow__text h2 {
  font-size: clamp(2.2rem, 5vw, 4.2rem);
  font-weight: 300;
  letter-spacing: -0.035em;
  line-height: 1.02;
  text-transform: lowercase;
}
.banner__box { background: transparent !important; box-shadow: none !important; }

/* ---------- 7. Product cards ---------- */
.card-wrapper { background: transparent; }
.card,
.card--standard .card__inner,
.card--media .card__inner {
  background: var(--soft-surface) !important;
  border-radius: var(--soft-radius) !important;
  overflow: hidden;
  border: none !important;
  box-shadow: none !important;
}
.card__media,
.media { border-radius: var(--soft-radius); }
.card__media .media img {
  transition: transform .8s var(--soft-ease);
  mix-blend-mode: multiply;           /* blends white product photos into tint */
}
.card-wrapper:hover .card__media .media img { transform: scale(1.04); }

.card__heading,
.card__heading a {
  font-size: 14px;
  font-weight: 400;
  text-transform: lowercase;
  letter-spacing: 0;
}
.card-information { padding-top: 12px; }
.price, .price-item {
  font-size: 13px;
  color: var(--soft-muted);
  font-weight: 300;
}

/* Sale / sold-out badges as soft pills */
.badge {
  background: var(--soft-bg) !important;
  color: var(--soft-text) !important;
  border: none !important;
  border-radius: var(--soft-pill) !important;
  font-size: 11px;
  font-weight: 400;
  padding: 6px 12px;
  text-transform: lowercase;
  letter-spacing: 0.02em;
}

/* Product grid breathing room */
.grid { --grid-desktop-horizontal-spacing: 14px; --grid-desktop-vertical-spacing: 36px; }

/* ---------- 8. Product page ---------- */
.product__title h1 { font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 400; }
.product__media-wrapper .media { border-radius: var(--soft-radius); background: var(--soft-surface); }
.product__description { color: var(--soft-muted); line-height: 1.7; }

.product-form__input input[type='radio'] + label,
.swatch-input__label {
  border-radius: var(--soft-pill) !important;
  border: 1px solid var(--soft-line);
  background: transparent;
  font-size: 13px;
  text-transform: lowercase;
  padding: 10px 18px;
  transition: all .25s var(--soft-ease);
}
.product-form__input input[type='radio']:checked + label {
  background: var(--soft-text);
  color: var(--soft-bg);
  border-color: var(--soft-text);
}

/* Accordion collapsibles */
.accordion, .collapsible-content { border-color: var(--soft-line) !important; }
.accordion__title { font-size: 14px; font-weight: 400; text-transform: lowercase; }

/* ---------- 9. Forms & inputs ---------- */
.field__input,
.select__select,
.customer .field input,
.quantity {
  background: transparent !important;
  border-radius: var(--soft-pill) !important;
  box-shadow: none !important;
  border: 1px solid var(--soft-line) !important;
  font-weight: 300;
}
.field__input:focus { border-color: var(--soft-text) !important; }
.field::after, .field::before, .quantity::after, .quantity::before { display: none !important; }
textarea.field__input { border-radius: var(--soft-radius) !important; }

/* Newsletter */
.newsletter__wrapper { background: var(--soft-surface); border-radius: var(--soft-radius); padding: 48px 24px; }

/* ---------- 10. Footer ---------- */
.footer {
  background: var(--soft-bg) !important;
  border-top: 1px solid var(--soft-line) !important;
  font-size: 13px;
}
.footer-block__heading {
  font-size: 12px;
  font-weight: 500;
  text-transform: lowercase;
  letter-spacing: 0.06em;
  color: var(--soft-muted);
}
.footer a { color: var(--soft-text); text-transform: lowercase; }
.footer a:hover { opacity: .55; text-decoration: none; }

/* ---------- 11. Cart drawer ---------- */
.cart-drawer__dialog, .drawer__inner {
  background: var(--soft-bg) !important;
  border-radius: var(--soft-radius) 0 0 var(--soft-radius);
}
.cart-item__name { font-weight: 400; text-transform: lowercase; }

/* ---------- 12. Subtle motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  .scroll-trigger.animate--slide-in,
  .scroll-trigger.animate--fade-in {
    animation-duration: .9s;
    animation-timing-function: var(--soft-ease);
  }
}

/* ---------- 13. Mobile tweaks ---------- */
@media (max-width: 749px) {
  .banner, .slideshow { margin-inline: 8px; border-radius: 14px; }
  .button, .product-form__submit { width: 100%; }
  .card, .card__inner { border-radius: 14px !important; }
}
@import url("https://use.typekit.net/pxb7crk.css");
:root{--main-font:"tt-commons-pro",'Helvetica Neue',Arial,sans-serif}
body,h1,h2,h3,h4,h5,h6,.h0,.h1,.h2,.h3,.h4,.button,.header__menu-item,.card__heading,.card__heading a,.price,.footer a,.field__input,.badge{font-family:var(--main-font)!important}
h1,h2,h3,h4,.h0,.h1,.h2,.h3,.h4,.header__heading-link,.card__heading,.card__heading a,.button,.header__menu-item{font-weight:500!important}
/* ===== blue page, white rounded header + announcement bar ===== */
:root{--page-blue:#010164;--bar-radius:18px;--bar-gap:8px;--side-space:12px}

/* blue page background (overrides white-background.css) */
html,body,main,#MainContent,.gradient,.color-background-1,.footer,.shopify-section,.shopify-section-group-header-group{background:var(--page-blue)!important}

/* white, rounded announcement bar */
#shopify-section-announcement-bar,.shopify-section-group-header-group .announcement-bar,.announcement-bar,.utility-bar{background:#ffffff!important;color:#1c1a18!important;border-radius:var(--bar-radius)!important;overflow:hidden}
.announcement-bar__message,.announcement-bar p,.announcement-bar a{color:#1c1a18!important}
#shopify-section-announcement-bar{margin:var(--side-space) var(--side-space) var(--bar-gap)!important;background:transparent!important}

/* white, rounded header */
#shopify-section-header{margin:0 var(--side-space) var(--bar-gap)!important;background:transparent!important}
#shopify-section-header .header-wrapper,#shopify-section-header header,#shopify-section-header .header,.section-header .header-wrapper{background:#ffffff!important;border-radius:var(--bar-radius)!important;border:0!important;overflow:hidden}

/* keep hero tight under the header, with matching side space and rounding */
#MainContent>.shopify-section:first-child{margin:0 var(--side-space)!important;background:transparent!important}
#MainContent>.shopify-section:first-child .banner,#MainContent>.shopify-section:first-child .slideshow,#MainContent>.shopify-section:first-child .hero{border-radius:var(--bar-radius)!important;overflow:hidden}
/* narrower announcement bar (normal height), taller hero */
:root{--ann-width:40%;--hero-height:85vh}

/* announcement bar: narrower and centered */
#shopify-section-announcement-bar{width:var(--ann-width)!important;max-width:100%!important;margin-left:auto!important;margin-right:auto!important}
@media (max-width:749px){#shopify-section-announcement-bar{width:calc(100% - 24px)!important}}

/* hero: taller */
#MainContent>.shopify-section:first-child .banner,#MainContent>.shopify-section:first-child .slideshow,#MainContent>.shopify-section:first-child .hero,#MainContent>.shopify-section:first-child section,#MainContent>.shopify-section:first-child .banner__media,#MainContent>.shopify-section:first-child .slideshow__slide{min-height:var(--hero-height)!important}
#MainContent>.shopify-section:first-child img,#MainContent>.shopify-section:first-child video{height:100%!important;min-height:var(--hero-height);object-fit:cover}
/* announcement bar width - paste at the very bottom */
:root{--ann-width:98%}
.announcement-bar,.utility-bar,.announcement-bar-section,[class*="announcement"]:not(p):not(a):not([class*="message"]):not([class*="text"]){width:var(--ann-width)!important;max-width:100%!important;margin-left:auto!important;margin-right:auto!important;box-sizing:border-box}
@media (max-width:749px){.announcement-bar,.utility-bar{width:calc(100% - 24px)!important}}
/* Dwell: rounded frosted header floating over the hero photo
   Needs the theme setting: Header > Home page > "Transparent background" ON */
:root{--hero-gap:8px;--hdr-radius:18px;--hdr-inset:12px;--hdr-glass:rgba(255,255,255,.22);--hdr-blur:14px;--hdr-ink:#ffffff;--hdr-solid:#ffffff}

/* float the header as an inset pill instead of edge-to-edge */
#header-component[transparent]{
  inset-inline:var(--hdr-inset);
  top:calc(var(--hero-gap) + var(--hdr-inset));
  border-radius:var(--hdr-radius);
}

/* frosted glass while sitting on the photo */
#header-component[transparent]:not([data-sticky-state='active']){
  --color-background-top-row:var(--hdr-glass)!important;
  --color-background-bottom-row:var(--hdr-glass)!important;
  --color-transparent-text:var(--hdr-ink)!important;
  --color-transparent-text-rgb:255 255 255!important;
}
#header-component[transparent] .header__underlay{border-radius:var(--hdr-radius)}
#header-component[transparent]:not([data-sticky-state='active']) .header__underlay-closed{
  -webkit-backdrop-filter:blur(var(--hdr-blur));backdrop-filter:blur(var(--hdr-blur));
}

/* once scrolled, become a solid white rounded bar so it stays readable */
#header-component[transparent][data-sticky-state='active']{
  --color-background-top-row:var(--hdr-solid)!important;
  --color-background-bottom-row:var(--hdr-solid)!important;
}

/* hero starts a small gap below the announcement bar (the theme's default pull-up reaches behind the bar).
   If the gap looks off, change --hero-gap. Use a negative number to pull the hero up, positive to push it down. */
#header-group:has(> .header-section > #header-component[transparent]) ~ #MainContent > .shopify-section:first-child{
  margin-top:var(--hero-gap)!important;
}
:root{--hdr-ink:#000000} 
/* White frame around the hero photo: logo/icons in the white above, "Shop now" in the white below. Black text + icons.
   Paste at the very bottom of Custom CSS (below everything else). */
:root{
  --hero-top-space:120px;      /* white space above the photo (holds the header) - raise if the header overlaps the photo */
  --hero-bottom-space:90px;    /* white space below the photo (holds "Shop now") */
  --hero-ink:#000000;          /* text + icon color */
}

/* white background behind the photo */
.hero,.hero__container{background:#ffffff!important}

/* push the photo down and up so white shows above and below */
.hero__media-grid{
  inset-block-start:var(--hero-top-space)!important;
  inset-block-end:var(--hero-bottom-space)!important;
}
.hero__blurred-image{display:none!important}   /* remove the blurry reflection under the photo */

/* "Shop now" sits in the white strip under the photo, in black */
.hero__content-wrapper{
  margin-block-end:calc((var(--hero-bottom-space) - 44px) / 2)!important;
  --color-foreground:var(--hero-ink);
  --color-foreground-rgb:0 0 0;
}
.hero__content-wrapper :is(a,button,.button,span,p){color:var(--hero-ink)!important}

/* header icons + logo area: black ink while sitting on the white */
:root{--hdr-ink:#000000}
#header-component[transparent]:not([data-sticky-state='active']){
  --color-transparent-text:#000000!important;
  --color-transparent-text-rgb:0 0 0!important;
  --color-transparent-text-contrast:#ffffff!important;
}:root{--hero-top-space:80px}
#header-group{background:transparent!important}
#header-group > .shopify-section:not(.header-section){background:transparent!important}
@media (max-width:749px){
  :root{--hero-top-space:75px;--hero-bottom-space:75px;--hdr-inset:8px}
  .hero__media-grid{inset-inline:0!important}
}
/* Announcement bar (Dwell): white rounded pill, scrolling text, no brown corners.
   Paste at the very bottom of Custom CSS. Edit ONLY the three numbers on the next line, keep every ; in place. */
:root{--ann-width:calc(100% - 24px);--ann-radius:999px;--ann-speed:16s;}

/* remove the full-width rectangle behind the bar */
.shopify-section:has(> aside.announcement-bar){background:transparent!important}
.shopify-section:has(> aside.announcement-bar) > .section-background{display:none!important}

/* the pill itself (fallback values after the commas keep it working if a variable breaks) */
#header-group aside.announcement-bar{
  width:var(--ann-width,calc(100% - 24px))!important;max-width:100%!important;margin-inline:auto!important;
  background:#ffffff!important;color:#1c1a18!important;
  border-radius:var(--ann-radius,999px)!important;overflow:hidden;box-sizing:border-box}
@media (max-width:749px){#header-group aside.announcement-bar{width:calc(100% - 24px)!important}}

#header-group announcement-bar-component{width:100%!important;margin:0!important}
#header-group .announcement-bar__slider{width:100%!important}
#header-group .announcement-bar__slides{width:100%!important;max-width:none!important;margin:0!important;overflow:hidden}

/* scrolling text: starts already visible, then slides left in a loop */
#header-group .announcement-bar__text{
  display:inline-block!important;white-space:nowrap;margin:0!important;padding-inline-start:100%;
  color:#1c1a18!important;animation:ann-marquee var(--ann-speed,16s) linear infinite;animation-delay:-6s}
#header-group .announcement-bar__text *{color:#1c1a18!important}
#header-group .announcement-bar__slides:hover .announcement-bar__text{animation-play-state:paused}
@keyframes ann-marquee{from{transform:translateX(0)}to{transform:translateX(-100%)}}
@media (prefers-reduced-motion:reduce){#header-group .announcement-bar__text{animation:none;padding-inline-start:0}}
.hero,.hero__container{background:#010164!important}
:root{--hero-ink:#ffffff;--hdr-ink:#ffffff}
.hero__content-wrapper :is(a,button,.button,span,p){color:#ffffff!important}
#header-component[transparent]:not([data-sticky-state='active']){
  --color-transparent-text:#ffffff!important;
  --color-transparent-text-rgb:255 255 255!important;
  --color-transparent-text-contrast:#010164!important;
}
/* header on pages other than the home page (blog, products, etc.): navy, rounded, white icons */
#header-component:not([transparent]){
  margin-inline:12px;
  --color-background-top-row:#010164!important;
  --color-background-bottom-row:#010164!important;
}
#header-component:not([transparent]) .header__underlay{border-radius:18px}
#header-component:not([transparent]) .header__row{
  --color-foreground:#ffffff;
  --color-foreground-rgb:255 255 255;
  --color-border:#ffffff;
  --color-border-rgb:255 255 255;
}
#MainContent .image-block{
  margin-inline:auto!important;
  align-self:center!important;
}
.shopify-section:has([class*="blog-post"]) .image-block{
  justify-content:center!important;
  margin-inline:auto!important;
}
