{"id":2041899,"name":"Variation 1","modifications":[{"id":6379320,"selector":"","type":"customScriptNew"},{"id":6379321,"selector":"","type":"addCSS","value":"#footer-element {padding-bottom: calc(1.75em + 60px) !important;} /* padding so #peak-tab-btn doesn't overlap footer content */\n\n/* Main Bottom Bar Styles --------------------------------------------- */\n#peak-bottom-bar-global {\n position: fixed;\n left: 0; right: 0; bottom: 0;\n width: 100%;\n z-index: 9999999999; /* minimum for bottom bar/overlay to float over the chat icon, subscription tab, site header */\n}\n\nbody:has(.mobile-menu--open) #peak-bottom-bar-global,\nbody:has(> .MuiDrawer-modal[role=\"presentation\"]) #peak-bottom-bar-global {z-index: 9;} /* move tab to lower layer when menu is open */\n\n#peak-bottom-bar {\n position: relative;\n z-index: 1 !important;\n}\n\n/* Overlay */\nbutton#peak-overlay-close {\n position: fixed;\n top: 0; \n left: 0; \n right: 0;\n bottom: 0;\n height: auto;\n z-index: 0;\n pointer-events: auto;\n background-color: rgba(0,0,0,0.5);\n transition: opacity 250ms cubic-bezier(0.25,0,0.25,1);\n opacity: 1;\n}\n\n/* Bottom Bar Display Toggle */\n#peak-bottom-bar-global:not(.peak-hidden) #peak-bottom-bar { display: block !important; }\n#peak-bottom-bar-global.peak-hidden #peak-bottom-bar { display: none !important; }\n\n#peak-bottom-bar-global.collapsed #peak-bottom-bar {\n max-height: 0;\n padding: 0 !important;\n box-shadow: none !important;\n transition: max-height 0.5s ease-out;\n -webkit-transition: max-height 0.5s ease-out;\n -ms-transition: max-height 0.5s ease-out;\n -moz-transition: max-height 0.5s ease-out;\n}\n\n#peak-bottom-bar-global.collapsed .promo-tab-svg > svg {\n transform: rotate(0deg) !important;\n -ms-transform: rotate(0deg) !important;\n -webkit-transform: rotate(0deg) !important;\n -webkit-transition: -webkit-transform .2s linear;\n -moz-transition: transform .2s linear;\n -ms-transition: -ms-transform .2s linear;\n transition: transform .2s linear;\n}\n\n#peak-bottom-bar-global.peak-hidden .offer { display: none; }\n\n/* Promo Tab */\n#peak-tab-btn {\n width: 100%;\n background: #000; /* <---- EDIT THIS to change the tab background color */\n color: #fff; /* <---- EDIT THIS to change the tab text color */\n border-radius: 5px 5px 0 0;\n font-size: 16px;\n text-align: left;\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n}\n\n.peak-tab-wrap > span { display: block !important; }\n#peak-tab-btn .promo-tab-main { font-weight: bold; }\n#peak-tab-btn .promo-tab-count { font-weight: 400; }\n#peak-tab-btn > .promo-tab-svg { align-self: center !important; }\n\n#peak-tab-btn > .promo-tab-svg > svg {\n fill: #fff !important;\n width: 15px !important;\n height: 15px !important;\n transform: rotate(90deg);\n -ms-transform: rotate(90deg);\n -webkit-transform: rotate(90deg);\n -webkit-transition: -webkit-transform .2s linear;\n -ms-transition: -ms-transform .2s linear;\n -moz-transition: transform .2s linear;\n transition: transform .2s linear;\n}\n\n/* Bottom Bar Container */\n#peak-bottom-bar {\n transition: max-height 0.5s ease-in;\n -webkit-transition: max-height 0.5s ease-in;\n -ms-transition: max-height 0.5s ease-in;\n -moz-transition: max-height 0.5s ease-in;\n background: #e9e9e9;\n background-color: #e9e9e9;\n display: block;\n white-space: nowrap;\n overflow: hidden;\n width: 100%;\n max-height: 275px;\n max-width: 10000px;\n height: auto;\n box-shadow: 0px -2px 20px 0px #00000060;\n -moz-box-shadow: 0px -2px 20px 0px #00000060;\n -webkit-box-shadow: 0px -2px 20px 0px #00000060;\n}\n\n#peak-bottom-bar > .offer-wrapper {\n width: 100%;\n position: relative;\n overflow-x: auto;\n box-sizing: border-box;\n bottom: 0;\n white-space: nowrap;\n text-align: left;\n}\n\n#peak-bottom-bar > .offer-wrapper > .offer {\n display: inline-block;\n white-space: initial !important;\n background-color: #ffffff; /* <---- EDIT THIS to set the background color on ALL OFFERS */\n background-image: url(); \n background-size: contain;\n background-repeat: no-repeat;\n}\n\n#peak-bottom-bar > .offer-wrapper > div.offer:last-of-type { margin-right: 0 !important; }\n\n#peak-bottom-bar .offer > .offer-details-wrap {\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n color: #000; /* <---- EDIT THIS to change the default font color for ALL OFFERS */\n}\n\n#peak-bottom-bar .offer .promo-title,\n#peak-bottom-bar .offer .promo-code,\n#peak-bottom-bar .offer .promo-details { text-align: left; } /* <---- EDIT THIS to change the text alignment for ALL OFFERS */\n\n#peak-bottom-bar .offer .promo-title { display: block; font-weight: 600; line-height: 1; }\n#peak-bottom-bar .offer .promo-details { display: block; font-weight: 400; }\n#peak-bottom-bar .offer .promo-code { display: block; font-weight: 400; }\n\n#peak-bottom-bar .offer .promo-cta {\n display: block;\n width: 100%;\n margin: 0;\n background: #3D3D21; /* <---- EDIT THIS to change the \"Shop\" CTA background color */\n color: #000; /* <---- EDIT THIS to change the \"Shop\" CTA font color */\n border: 1px solid #3D3D21; /* <---- EDIT THIS to change the \"Shop\" CTA border color */\n font-weight: 400;\n text-decoration: none !important;\n text-align: center;\n}\n\n#peak-bottom-bar .offer .promo-cta:hover {\n background: #fff; /* <---- EDIT THIS to change the \"Shop\" CTA background color ON HOVER */\n color: #000; /* <---- EDIT THIS to change the \"Shop\" CTA font color ON HOVER */\n border: 1px solid #fff; /* <---- EDIT THIS to change the \"Shop\" CTA border color ON HOVER */\n}\n\n/* Large-Screen Overrides (>=768px) ----------------------------------- */\n@media screen and (min-width: 768px) {\n #peak-bottom-bar-global .promo-tab {\n width: 200px;\n margin: 0 auto;\n position: relative;\n z-index: 1;\n }\n\n .collapsed #peak-tab-btn { padding: 10px 15px 15px; }\n #peak-tab-btn { padding: 10px 15px 10px; }\n #peak-tab-btn .promo-tab-main { font-size: 15px; }\n #peak-tab-btn .promo-tab-count { font-size: 14px; }\n\n #peak-bottom-bar { padding: 20px 0; }\n #peak-bottom-bar > .offer-wrapper { padding: 0 20px; }\n #peak-bottom-bar > .offer-wrapper > .offer { width: 265px; height: 225px; margin-right: 20px; }\n #peak-bottom-bar .offer > .offer-details-wrap { gap: 10px; padding: 20px; height: 165px; }\n #peak-bottom-bar .offer > .offer-cta-wrap { padding: 0 20px 20px; height: 60px; }\n #peak-bottom-bar .offer .promo-title { font-size: 22px; line-height: 1; }\n #peak-bottom-bar .offer .promo-details { font-size: 20px; }\n #peak-bottom-bar .offer .promo-code { font-size: 20px; }\n #peak-bottom-bar .offer .promo-cta { padding: 10px; font-size: 20px; }\n #peak-bottom-bar .offer .promo-cta::after { content: \"\\203A\"; font-size: 28px; line-height: 16px; padding-left: 5px; }\n}\n\n/* Small-Screen Overrides (<=767px) ----------------------------------- */\n@media screen and (max-width: 767px) {\n #peak-bottom-bar-global .promo-tab {\n width: 170px;\n position: relative;\n margin: 0 auto 0 5px;\n z-index: 1;\n }\n\n #peak-bottom-bar-global.collapsed .promo-tab {\n position: fixed;\n left: -70px;\n transform: rotate(90deg);\n -ms-transform: rotate(90deg);\n -webkit-transform: rotate(90deg);\n display: block;\n top: 50%;\n }\n\n .collapsed #peak-tab-btn { padding: 10px 15px 15px; }\n #peak-tab-btn { padding: 10px; }\n #peak-tab-btn .promo-tab-main { font-size: 14px; }\n #peak-tab-btn .promo-tab-count { font-size: 13px; }\n\n #peak-bottom-bar { padding: 15px 0 20px; }\n #peak-bottom-bar > .offer-wrapper { padding: 0 15px; }\n #peak-bottom-bar > .offer-wrapper > .offer { width: 185px; height: 157px; margin-right: 15px; }\n #peak-bottom-bar .offer > .offer-details-wrap { gap: 5px; padding: 10px 15px; height: 117px; }\n #peak-bottom-bar .offer > .offer-cta-wrap { padding: 0 15px 10px; height: 40px; }\n #peak-bottom-bar .offer .promo-title { font-size: 22px; line-height: 1; }\n #peak-bottom-bar .offer .promo-details { font-size: 22px; }\n #peak-bottom-bar .offer .promo-code { font-size: 22px; }\n #peak-bottom-bar .offer .promo-cta { padding: 6px; font-size: 22px; }\n #peak-bottom-bar .offer .promo-cta::after { content: \"\\203A\"; font-size: 22px; line-height: 10px; padding-left: 5px; }\n}\n\n/* OPTIONAL: Offer-specific overrides --------------------------------- */\n\n/* TEMPLATE DIRECTIONS ------------------\n\nIf you need to override any \"#peak-bottom-bar .offer\" styles, \nreplace the \".offer\" class with \".offer-##\" -- where the ## is \nthe number of the tile in the slider that you want to customize.\nYou can add a child class after .offer-## to change a child element.\n\nFor example:\n\n#peak-bottom-bar .offer-01 { \n These styles updated the main Offer 1 tile. \n Most often used for: \n - changing background-colors so each tile is unique\n - adding background-images so each tile is unique\n}\n\n#peak-bottom-bar .offer-01 .promo-title {\n These styles update the large/bold promo title text for the Offer 1 tile.\n Most often used for: \n - adjusting font-sizes (smaller for longer text, larger for shorter text)\n - changing the promo font color if the background color/image is unqiue per-offer.\n}\n\nIF YOU WANT ALL THE TILES TO HAVE THE SAME STYLE ADJUSTMENT, \nMAKE THOSE IN THE MAIN STYLE DECLARATIONS ABOVE.\n\n-------------------------------------- */\n\n#peak-bottom-bar .offer-01 .promo-cta {background: #FFD6EC}\n#peak-bottom-bar .offer-02 .promo-cta {background: #D6DDEF}\n#peak-bottom-bar .offer-03 .promo-cta {background: #95CCEA}\n#peak-bottom-bar .offer-04 .promo-cta {background: #C0EEE4}\n#peak-bottom-bar .offer-04 .promo-title {font-size: 20px}\n#peak-bottom-bar .offer-04 .promo-details {font-size: 22px}\n#peak-bottom-bar .offer-05 .promo-cta {background: #CEF8D2}\n#peak-bottom-bar .offer-05 .promo-title {font-size: 20px}\n#peak-bottom-bar .offer-05 .promo-details {font-size: 22px}\n#peak-bottom-bar .offer-06 .promo-cta {background: #FFE898}\n#peak-bottom-bar .offer-06 .promo-title {font-size: 20px}\n#peak-bottom-bar .offer-06 .promo-details {font-size: 22px}\n#peak-bottom-bar .offer-07 .promo-cta {background: #CADBE3}\n#peak-bottom-bar .offer-07 .promo-title {font-size: 20px}\n#peak-bottom-bar .offer-07 .promo-details {font-size: 22px}\n#peak-bottom-bar .offer-08 .promo-cta {background: #FFC58D}\n#peak-bottom-bar .offer-08 .promo-title {font-size: 20px}\n#peak-bottom-bar .offer-08 .promo-details {font-size: 22px}\n#peak-bottom-bar .offer-09 .promo-cta {background: #DEDEDE}\n#peak-bottom-bar .offer-09 .promo-title {font-size: 20px}\n#peak-bottom-bar .offer-09 .promo-details {font-size: 20px}\n#peak-bottom-bar .offer-10 {}\n-------------------------------------------------- */"},{"id":6379322,"selector":"body.headbutt","type":"addHTML","value":"
\n\n\n
\n
\n \n
\n
\n
\n \n
\n
\n The Summer Edit\n save up to 35% off\n
\n
SHOP ALL
\n
\n \n
\n
\n $20 - $40\n Tanks & Elevated
Tees\n
\n
SHOP THE EDIT
\n
\n \n
\n
\n $49 - $89\n Denim, Pants, Skirts,
& Shorts\n
\n
SHOP THE EDIT
\n
\n \n
\n
\n Take an Extra
50% Off Swim\n Code: SWIM50\n
\n
SHOP THE EDIT
\n
\n \n
\n
\n Dresses For Any
Occasion\n Starting At $69\n
\n
SHOP THE EDIT
\n
\n \n
\n
\n Jackets &
Lightweight Layers\n Starting At $59\n
\n
SHOP THE EDIT
\n
\n \n
\n
\n Athleisure & Travel
Ready Pieces\n Starting At $59\n
\n
SHOP THE EDIT
\n
\n \n
\n
\n Accessories &
Vacation Styling
Pieces\n Starting At $49\n
\n
SHOP THE EDIT
\n
\n \n
\n
\n Linen & Summer
Ready Tops\n Starting At $49\n
\n
SHOP THE EDIT
\n
\n \n
\n
\n \n
\n
"}],"_tagInfo":"2026/06/03 13:52:49 UTC"}