/** Shopify CDN: Minification failed Line 146:0 All "@import" rules must come first **/ /* ============================================================ TheMeowPicks header restyle (Path B) Styles Dawn's STOCK header/mega-menu/drawer to our brand. Does NOT touch Dawn's Liquid or JS. Mechanics stay Dawn's. Add via: theme.liquid or a snippet, AFTER Dawn's CSS. ============================================================ */ :root{ --tmp-paper:#F8F7F2; --tmp-white:#fff; --tmp-cloud:#F1EEE6; --tmp-black:#15140F; --tmp-ink:#1A1813; --tmp-ink2:#6E6A60; --tmp-ink3:#9C988D; --tmp-line:#E4E0D5; --tmp-kick:#8A8576; --tmp-serif:"Fraunces",Georgia,serif; --tmp-sans:"Plus Jakarta Sans",sans-serif; } /* ---------- announcement bar ---------- */ .announcement-bar,.utility-bar{background:var(--tmp-black)!important} .announcement-bar__message, .announcement-bar__message *{ font-family:var(--tmp-sans)!important;font-size:11px!important;font-weight:400!important; letter-spacing:.18em!important;text-transform:uppercase!important;color:#e9e6dd!important; } .announcement-bar__message{padding:10px 16px!important} .announcement-bar__link{text-decoration:none!important} .announcement-bar__message .icon-arrow{width:12px!important;height:12px!important} /* ---------- header shell ---------- */ .header{ background:var(--tmp-paper)!important; font-family:var(--tmp-sans)!important; border-bottom:1px solid var(--tmp-line); padding-top:14px!important;padding-bottom:14px!important; } .header-wrapper{background:var(--tmp-paper)!important;border-bottom:0!important} /* logo wordmark (text fallback when no image logo) */ .header__heading-link, .header__heading .header__heading-link{ font-family:var(--tmp-serif)!important;font-weight:400!important; font-size:clamp(22px,2.2vw,28px)!important;letter-spacing:.005em!important;color:var(--tmp-black)!important; text-transform:none!important; } .header__heading{margin:0!important} .header__heading-logo{max-height:40px!important;width:auto!important} /* ---------- icons ---------- */ /* All icons (search, account, and the replaced cart svg) share an 18x19-scale canvas, so one uniform rule sizes them identically. */ .header__icons .header__icon{color:var(--tmp-ink)!important;height:auto!important;padding:0 6px!important} .header__icons .header__icon .svg-wrapper{ width:26px!important;height:26px!important; display:inline-flex!important;align-items:center!important;justify-content:center!important; } .header__icons .header__icon .svg-wrapper svg{width:21px!important;height:21px!important;flex:none!important} /* keep Dawn's search close (X) icon hidden until the search modal is open. Must out-specify the .svg-wrapper display rule above (4 classes vs 3). */ .header__icons .header__icon .svg-wrapper.header__icon-close{display:none!important} details[open] > .header__icon--search .svg-wrapper.header__icon-close{display:inline-flex!important} details[open] > .header__icon--search > span > .svg-wrapper:not(.header__icon-close){display:none!important} .header__icon--cart .cart-count-bubble{ background:var(--tmp-black)!important;color:var(--tmp-paper)!important; min-width:16px!important;height:16px!important; } .header__icon--cart .cart-count-bubble span{font-family:var(--tmp-sans)!important;font-size:10px!important} /* ---------- desktop nav items ---------- */ .header__inline-menu .list-menu__item, .header__menu-item{ font-family:var(--tmp-sans)!important;font-size:12px!important;font-weight:500!important; letter-spacing:.16em!important;text-transform:uppercase!important;color:var(--tmp-ink2)!important; } .header__menu-item:hover,.header__active-menu-item{color:var(--tmp-black)!important} .header__menu-item span{text-decoration:none!important} /* remove Dawn's default underline animation, use a clean one */ .header__menu-item::after{display:none!important} /* ---------- mega menu panel ---------- */ .mega-menu__content{ background:var(--tmp-paper)!important; border-top:1px solid var(--tmp-line)!important; border-bottom:1px solid var(--tmp-line)!important; box-shadow:0 22px 34px -14px rgba(21,20,15,.14)!important; padding-top:clamp(30px,3vw,48px)!important;padding-bottom:clamp(34px,3.4vw,52px)!important; } .mega-menu__list{gap:12px 40px!important} .mega-menu__link{ font-family:var(--tmp-serif)!important;font-weight:400!important; font-size:clamp(17px,1.4vw,21px)!important;letter-spacing:-.01em!important; color:var(--tmp-ink)!important;text-transform:none!important;padding:8px 0!important; transition:color .2s,padding-left .2s!important; } .mega-menu__link:hover{color:var(--tmp-ink2)!important;padding-left:6px!important} .mega-menu__link--level-2{font-size:clamp(18px,1.5vw,22px)!important} /* "Shop all [category]" link at the bottom of each mega menu column */ .tmp-mega-shopall-li{list-style:none!important;margin-top:18px!important} .tmp-mega-shopall-link{ font-family:var(--tmp-sans)!important;font-size:11px!important;font-weight:500!important; letter-spacing:.16em!important;text-transform:uppercase!important;color:var(--tmp-ink2)!important; text-decoration:none!important;display:inline-block!important; border-bottom:1px solid var(--tmp-ink3)!important;padding-bottom:3px!important; transition:color .2s,border-color .2s!important; } .tmp-mega-shopall-link:hover{color:var(--tmp-black)!important;border-color:var(--tmp-black)!important} /* ---------- mobile drawer ---------- */ .menu-drawer{background:var(--tmp-paper)!important;font-family:var(--tmp-sans)!important} .menu-drawer__menu-item{ font-family:var(--tmp-sans)!important;font-size:14px!important;font-weight:500!important; letter-spacing:.06em!important;text-transform:uppercase!important;color:var(--tmp-ink)!important; } .menu-drawer__menu-item:hover{color:var(--tmp-black)!important;background:transparent!important} .menu-drawer__submenu .menu-drawer__menu-item{ font-family:var(--tmp-serif)!important;font-size:18px!important;font-weight:400!important; letter-spacing:0!important;text-transform:none!important;color:var(--tmp-ink2)!important; } .menu-drawer__close-button{font-family:var(--tmp-sans)!important;color:var(--tmp-ink)!important} /* "Shop all" link in the mobile drawer submenu */ .menu-drawer__menu-item.tmp-drawer-shopall, a.tmp-drawer-shopall{ font-family:var(--tmp-sans)!important;font-size:12px!important;font-weight:500!important; letter-spacing:.1em!important;text-transform:uppercase!important;color:var(--tmp-ink2)!important; border-top:1px solid var(--tmp-line)!important;margin-top:6px!important;padding-top:14px!important; } .menu-drawer__menu-item.tmp-drawer-shopall:hover, a.tmp-drawer-shopall:hover{color:var(--tmp-black)!important} /* ---------- search (Dawn's built-in modal) ---------- */ .search-modal{background:var(--tmp-paper)!important} .search__input.field__input{ font-family:var(--tmp-serif)!important;font-size:clamp(18px,2vw,24px)!important; color:var(--tmp-ink)!important;border-color:var(--tmp-line)!important;background:transparent!important; } .predictive-search{background:var(--tmp-paper)!important;border-color:var(--tmp-line)!important} .predictive-search__heading{ font-family:var(--tmp-sans)!important;font-size:10.5px!important;letter-spacing:.2em!important; text-transform:uppercase!important;color:var(--tmp-kick)!important; } .predictive-search__item-heading{font-family:var(--tmp-serif)!important;color:var(--tmp-ink)!important} /* fonts fallback if theme hasn't loaded them */ @import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;1,9..144,400&family=Plus+Jakarta+Sans:wght@400;500&display=swap'); /* larger logo on mobile */ @media screen and (max-width: 749px){ .header__heading-logo-wrapper{width:auto!important} .header__heading-logo{ width:180px!important; max-width:52vw!important; height:auto!important; } }