/** Shopify CDN: Minification failed Line 452:27 Expected ":" **/ /* ============================================================================ OVERRIDING component-*.css / section-*.css FROM THIS FILE This file is loaded in (layout/theme.liquid), but component and section stylesheets are loaded by the sections themselves, so they land LATER in the document. On equal specificity the later sheet wins -- meaning a top-level rule here can lose to the very file it is meant to override, and `!important` does not save it if the other side is also `!important`. Rule of thumb: a top-level override needs at least one more class than the rule it is replacing. .card__badge { ... } <- loses to component-card.css .card-wrapper .card__badge { ... } <- wins, regardless of load order Most of this file is unaffected because it uses CSS nesting, and the parent selectors already push the effective specificity above the component sheets. The trap is only for NEW rules written at the top level. ============================================================================ */ :root{ --color-white:#ffffff; --color-black:#000000; --accent-color:#FF8CBB; --darker-accent:#D9598A; --font-10px:10px; --font-12px:12px; --font-14px:14px; --font-16px:16px; --font-18px:18px; --font-20px:20px; --font-22px:22px; --font-24px:24px; --font-26px:26px; --radius-6px:6px; --radius-8px:8px; --radius-10px:10px; --radius-12px:12px; --radius-14px:14px; --radius-16px:16px; --radius-18px:18px; --radius-20px:20px; --round-radius:50%; --sold-bg:#808080; --sold-border:#989898; /* A LIGHT FILL FORCES A DARK LABEL. The sale flag used to be #f15950 carrying white text, which was already only 3.3:1 -- under AA for the 10-12px the badge runs at. Lightening it toward the pastel palette makes that strictly worse: white on this coral is 2.5:1, i.e. unreadable. So the label flips instead of the fill staying dark. --sale-fg on --sale-bg is 5.3:1, comfortably AA, and soft-coral-with-deep-red is the same move the menus make with --dd-tint and --dd-pink-deep. The other three flags keep white labels because their fills stayed saturated. --sale-border stays LIGHTER than its fill, which is the pattern --sold-bg / --sold-border set and what keeps the ribbon's inner rule readable. */ --sale-bg:#ff9b93; --sale-border:#ffc0ba; --sale-fg:#7a1610; --new-bg:#4bbf6c; --new-border:#7cd197; --last-bg:#eb891d; --last-border:#f2af5f; --gradient-bg: linear-gradient(90deg, hsla(330, 100%, 88%, 1) 0%, hsla(338, 100%, 75%, 1) 100%); /* The navigation's display face. Fredoka is rounded and low-contrast like Nunito, so it sits in the same family of shapes as the rest of the store, but its wider bowls and open apertures give the menu a voice of its own without costing legibility at 14-16px. THIS IS THE ONE PLACE TO CHANGE IT. The navbar, the dropdown panels and the mega menu all read this token; set it to var(--font-navigation-family) to put the whole menu system back on Nunito. The face itself is requested in layout/theme.liquid, alongside Nunito. */ --font-menu-family: 'Fredoka', var(--font-navigation-family), sans-serif; } .custom-button { width: 100%; border-radius: 100px; background: #ffffff; color: var(--accent-color); border:var(--color-white); text-transform: capitalize; letter-spacing: 0; font-size: var(--font-20px); font-weight: bolder; padding: 12px 20px; line-height: initial; position: relative; z-index: 1; overflow:visible; transition:all .3s linear !important; &::before { overflow:visible; content: ""; position: absolute; inset: 0; margin: auto; width: calc(100% - 10px); height: calc(100% - 10px); border-radius: 100px; border:2px dashed var(--accent-color); transition: all .3s linear !important; } &:hover{ background: linear-gradient(90deg, hsla(330, 100%, 88%, 1) 0%, hsla(338, 100%, 75%, 1) 100%); color:var(--color-white); &::before { border-color:var(--color-white); } } } @media (max-width:1440px) { .custom-button { font-size: var(--font-16px); } } @media (max-width:1024px) { .custom-button { font-size: var(--font-14px); padding: 12px 15px; /* The cut line keeps its 2px weight here -- the base ::before already sets the ring, and thinning it on small screens is what made these read lighter than the same pill on the links page. */ } } /* Title Container Style */ .title--container{ display:flex; flex-direction:column; gap:14px; img{ margin-inline:auto; transform-origin: bottom center; animation: wiggle 2.5s ease-in-out infinite; } } @keyframes wiggle { 0% { transform: rotate(0deg); } 25% { transform: rotate(6deg); } 50% { transform: rotate(-6deg); } 75% { transform: rotate(3deg); } 100% { transform: rotate(0deg); } } /* Header Style Starts */ .shopify-section-group-header-group{ position: absolute !important; width: 100%; top: 30px; } .header--outer-body{ box-shadow:0 0 20px 0 #0000002b; background: rgb(var(--color-header-background)); border-radius: 100px; padding: 10px; } header.header { padding-inline:40px; padding-block: 10px; border:2px dashed var(--accent-color); border-radius: 100px; } /* --top only. Without it this reaches every .header__menu-item inside an open dropdown too -- they are all descendants of the navbar's own .list-menu -- and at (0,3,0) it outranked the panel's own type sizes, so dropdown rows and mega card labels were all being drawn at the navbar's 20px. */ .header .list-menu .header__menu-item--top{ /* The navbar trigger and the panel it opens are one component, so they share one face. Fredoka's 500 reads at about the weight Nunito's 700 did -- the stems are wider -- which is why this steps down rather than inheriting --font-navigation-weight. */ font-family:var(--font-menu-family); font-size:var(--font-20px); font-weight:500; letter-spacing:.01em; &:hover{ .label{ color:var(--accent-color); } } } .header__active-menu-item,.list-menu__item--active { color:var(--accent-color) !important; .header__menu-item{ color:var(--accent-color) !important; } } .header .header__inline-menu{ margin-top:6px; .list-menu--inline{ justify-content:center; } } dropdown-menu .header__menu-item { gap:10px; .icon-caret{ display:block; height:initial; width:initial; } &:hover{ span{ color:rgb(var(--color-highlight)); } svg{ color:rgb(var(--color-highlight)); } } } /* Mega Menu Style Start The desktop dropdown and mega menu are styled entirely in component-menu-dropdown.css -- it loads after this file, so patches here only ever fought it from behind. Put desktop menu changes there. What used to live here: the .header-background surface (that element is retired -- the panel paints its own), and the visual-grid-mega__menu layout. The character grid is now the block's own "Collection image style: Fit" setting rather than a custom class plus a stylesheet. Mega Menu Style End */ @media screen and (hover: hover) { .header__menu-item .label { background-image: linear-gradient(to top, rgb(var(--color-highlight)) 0px 0px), linear-gradient(to top, transparent 0px, transparent 0px); } } @media screen and (max-width:1600px){ :root{ --page-width:135rem; } .shopify-section-header:not(.shopify-section-header-sticky) { top: 12px !important; } .header--outer-body{ padding:8px; } .header__heading{ margin-inline:auto; } .header__heading-logo{ --image-logo-height: 60px; } dropdown-menu .header__menu-item { gap:8px; .icon-caret{ width:18px; } } .header__icon{ --icon-size: 35px !important; .icon{ width:20px; height:20px; } } .header__right{ gap:5px; } .header .list-menu .header__menu-item--top{ font-size:var(--font-16px); } /* .drawer-outer{ position: absolute; width: 100%; height: calc(100vh - 115px); left: 0; top: 100px; padding: 10px 60px; transform: translate(-100%); z-index:99; visibility: hidden; transition:all .3s ease-in-out; } .menu-opening .drawer-outer{ transform: translate(0); visibility: visible; }*/ /* The mobile menu drawer is styled entirely in component-menu-drawer.css -- it loads after this file, so patches here only ever fought it from behind. Put drawer changes there. */ .title--container .title.h1{ font-size: clamp(25px,calc(25px + (40 - 25) * ((100vw - 1024px) / (1920 - 1024))),40px); } } .header .header__heading-link{ margin-inline:auto; } .header__left{ gap:5px !important; width:fit-content; } @media screen and (max-width:1249px){ .header__right .header__icon--account{ display:none !important; } .menu-drawer-container .icon-close{ width: 12px; } } @media screen and (max-width:990px){ .drawer-outer{ padding-inline:30px; } .header__right,.header__left{ margin-inline:0 !important; } } @media screen and (max-width:749px){ .drawer-outer{ top:initial; bottom:0; } .drawer-outer{ position:fixed; } .header__icon { --icon-size:45px; width:var(--icon-size); height:var(--icon-size); } } @media screen and (max-width:625px){ .drawer-outer{ padding-inline:1.5rem; } } @media screen and (min-width: 750px) { .header__icon { --icon-size:45px; width:var(--icon-size); height:var(--icon-size); } } @media screen and (max-width: 360px) { header.header{ padding-inline:10px !important; } } /* Header Style Ends */ /* Slideshow Style Starts */ .slideshow .flickity-page-dots { display: none !important; } .slideshow__card{ padding-inline:60px; } .home-hero__section h2.slideshow__heading.h1 { font-size: clamp(25px,calc(25px + (65 - 25) * ((100vw - 768px) / (1920 - 768))),65px); line-height: 1.3; font-weight: bolder; p { margin-bottom: 15px; } } .slideshow__button { margin-top: 20px !important; } @media screen and (max-width:1600px){ .slideshow__button .custom-button{ font-size: var(--font-16px); min-width: 100%; padding: 5px 30px;s } } @media screen and (max-width:1024px){ .home-hero__section .slideshow .slideshow__center{ .slideshow__heading{ font-size:30px; max-width:400px; p{ br{ display:none; } } } } } @media screen and (max-width:990px){ .home-hero__section .slideshow .slideshow__center{ .slideshow__heading{ font-size:25px; max-width:300px; } .button-group .custom-button{ font-size:var(--font-14px) !important; } } } @media screen and (max-width:749px){ .home-hero__section .slideshow .slideshow__center{ top: 20%; .slideshow__card{ padding-inline:0 !important; } .slideshow__heading{ margin-inline:auto; } } } @media screen and (max-width:749px){ .slideshow .slideshow__center{ top: 30%; .slideshow__card{ padding-inline:0 !important; } } } /* Slideshow Style Ends */ /* Bestseller Collection Style Starts */ /* .collection-list-wrapper .title-wrapper{ h2.title{ } } */ .collection-list__item .card-wrapper{ transition:transform .3s ease-in-out; &:hover{ transform: translateY(-3px) scale(1.005); outline: 2px dashed var(--accent-color); outline-offset: 2px; } } @media screen and (max-width:1600px){ .collection-list-wrapper .flex-grid{ --grid-horizontal-spacing: 1.5rem; } .collection-list-wrapper .card-information__text-button{ padding-block:10px; font-size:var(--font-14px); } } /* Two columns on mobile. Below 480px the 1-col override in base.css stops applying, so the cards halve to ~165px while .button--small still carries its 18rem min-width -- the title pill would run past the card edge. Drop the min width, let the pill fill the card and step the type down, the same treatment .template-list-collections already gives its 2-up cards further down this file. Scoped by :not(.flex-grid--1-col-mobile) so sections left on 1 column keep the full-size pill. */ @media screen and (max-width:480px){ .collection-list-wrapper .collection-list:not(.flex-grid--1-col-mobile){ .card--media .card__text-spacing{ padding:1rem; } .card-information__text-button{ min-width:initial; max-width:initial; width:100%; padding-inline:1rem; font-size:var(--font-12px); text-align:center; } } } /* Bestseller Collection Style Ends */ /* Shop the look Style Start */ .image-with-text .shop-the-look .flickity-page-dot:after{ background:var(--accent-color) !important; height:5px !important; } .image-with-text .shop-the-look .flickity-page-dots{ display:flex !important; } .shop-the-look .flickity-page-dot{ width:55px !important; height:8px !important; background:var(--accent-color); transition:all .3s ease-in-out; &::after{ display:none !important; } } .image-with-text .shop-the-look .flickity-page-dot.is-selected{ border-radius:50%; height:15px !important; width:15px !important; } .custom-shop-look__section .shop-the-look{ .image-with-text__content{ padding:0 !important; } .image-with-text__products{ width:100% !important; display: grid !important; grid-template-columns: 1fr 1fr !important; gap:2rem !important; max-width:90% !important; } /* .flickity-viewport{ width:100% !important; height: 100% !important; overflow: visible !important; } */ /* .flickity-slider{ position: relative; width:100%; height: 100%; transform: initial !important; display: grid; grid-template-columns: 1fr 1fr; gap:1.5rem; } */ .product-container{ position: relative; width: 100%; transform: initial !important; opacity: 1 !important; .card-information__wrapper .card-information__text{ font-size:var(--font-16px); } .card__badge{ /* No right/top here. The ribbon is centre-anchored now (see .card-wrapper .card__badge), so it self-centres on the corner at any image size. The old `right: -80px; top: 30px` compensated for the previous edge-anchored geometry, and being nested 4 classes deep it outranked the new rule -- which pushed the band off this section's larger images until only the last letters clipped into view. The label's font size is not pinned here either -- it scales from the image width now, so this section needs no special case. */ } } } .lookbook .look__hotspot-product { flex-direction: column; align-items: center; gap: 5px; padding: 12px 18px; background: white; border-radius: 14px; box-shadow: 0 4px 15px rgba(255, 147, 191, 0.2); } .lookbook .look__hotspot-product .h5 { color: #666; font-size: var(--font-14px); font-weight: 600; max-width: 153px; text-align: center; -webkit-line-clamp: 2; } .lookbook .look__hotspot-product .price{ margin-inline:auto; } .lookbook .look__hotspot-product .price bdi { color: #ff93bf; font-size: 18px; font-weight: 700; } @media screen and (max-width:1600px){ .custom-shop-look__section .shop-the-look{ .image-with-text__products{ width:100% !important; } .product-container{ .card-information__wrapper .card-information__text{ font-size:var(--font-14px); } } } } /* The shop-the-look ribbon needed its own right/top offsets to compensate for the old edge-anchored geometry. The ribbon is now centre-anchored and size-independent, so this patch is no longer required -- keeping it would push that section's ribbon back off the diagonal. */ @media screen and (max-width:1024px){ .custom-shop-look__section .shop-the-look{ .image-with-text__grid{ flex-direction:column; row-gap:3rem; } .flex-grid__item{ width:100%; } .image-with-text__products{ display:flex !important; max-width:100% !important; } .product-container{ max-width:300px; .card__badge{ } .card-information__wrapper{ margin-block:10px; } } } } @media screen and (max-width:768px){ .custom-shop-look__section .shop-the-look{ .product-container{ .card-information{ .card-information__button{ height:fit-content; .button--soldout{ width:100% !important; max-width:100% !important; } .custom-button{ width:35px; height:35px; .icon-cart{ width: 1rem; height: 1rem; } } } } } } } /* Shop the look Style End */ /* Brands Style Start */ .logo-bar__custom{ max-width:160rem; margin-inline:auto; } .blob-logo-bar__item { --item-size:250px; position: relative; width: var(--item-size); height: var(--item-size); background:transparent; overflow:visible; } .blob-logo-bar__item .logo-bar__link{ &:hover{ .image-animate img{ transform:scale(1.05); } } } .blob-logo-bar__item .blob{ position: absolute; width: 100%; height: 100%; left:0; } .blob-logo__img{ transition: transform 0.25s ease-out !important; will-change: transform !important; } .blob-logo-bar__item .blob-border{ color:#FFDBEA; z-index:1; animation: bounce 2.5s ease-in-out infinite 0s, wobble 3s ease-in-out infinite 0.2s; } .blob-logo-bar__item .blob-bg{ color:#ffffff; animation: bounce 2.5s ease-in-out infinite 0s, wobble 3s ease-in-out infinite 0.2s; } .blob-logo-bar__item .media{ position: absolute; width: 60%; top: 50%; left: 50%; transform: translate(-50%, -50%); overflow:visible; } .blob-anim { animation: bounce 2.5s ease-in-out infinite var(--bounce-delay, 0s), wobble var(--wobble-duration, 3s) ease-in-out infinite var(--wobble-delay, .2s); } /* keyframes */ @keyframes wobble { 0% { transform: scale(1) rotate(0deg); } 25% { transform: scale(1.03, .97) rotate(-2deg); } 50% { transform: scale(.97, 1.03) rotate(2deg); } 75% { transform: scale(1.02, .98) rotate(-1deg); } 100% { transform: scale(1) rotate(0deg); } } @keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } @media screen and (max-width:1600px){ .blob-logo-bar__item { --item-size:160px; } .blob-logo-bar__item .media{ width:50%; } .logo-list.page-width{ --page-width: 1150px; } } @media screen and (max-width:1280px){ .logo-bar__custom{ flex-wrap:wrap; } } @media screen and (max-width:375px){ .blob-logo-bar__item { --item-size:120px; .image-animate{ width:60%; } } } /* Brands Style End */ .product-image-label { --color-price:var(--color-white); position: absolute; top: 20px; left: 0; z-index: 1; padding: 15px 10px 15px 20px; background: #FF8CBB; color: #ffffff; font-weight: 600; /* &::before { content: ''; position: absolute; top: 0; bottom: 0; left: calc(100% - 2px); width: 12px; height: 100%; background-image: url('/cdn/shop/files/Rectangle_36.png?v=1765545221'); background-repeat: no-repeat; } */ >img { position: absolute; top: 0; bottom: 0; left: calc(100% - 2px); width: auto; height: 100%; } * { line-height: initial; height: fit-content; } /* ON SALE, INSIDE THE FLAG. --color-price above covers the regular price, and nothing else. It does not reach a sale, because component-price.css paints those two numbers with colours of its own rather than through that token: .price--on-sale .price-item--sale -> var(--color-sale-price) #d72c0d .price--on-sale .price-item--regular -> rgba(--color-foreground, .7) ...and strikes the compare-at in #d72c0d too which put red text on a pink flag for the sale price, and dark grey with a red line through it for the one it replaced. The flag IS the brand colour, so everything sitting on it is white; the hierarchy comes from weight and opacity instead of from hue. Specificity carries this (0,3,0 against the component sheet's 0,2,0), so it wins despite custom.css loading first. */ .price--on-sale .price-item--sale { color: var(--color-white); } .price--on-sale .price-item--regular { color: rgba(255, 255, 255, 0.75); } .price--on-sale .price-item--regular::before { border-bottom-color: var(--color-white); opacity: 0.9; } } .card-information .card-information__wrapper .card-information__text { font-size: 18px; font-weight: bolder; } @media screen and (max-width:1600px){ .card-information .card-information__wrapper .card-information__text { font-size: var(--font-14px); } .product-image-label { padding: 8px 14px; .price-item bdi{ font-size:var(--font-14px); } } .card-wrapper .card-information__button { .custom-button{ font-size: var(--font-14px); padding-block: 12px; min-height: 100%; } .button--soldout{ font-size: var(--font-12px); min-height: 100%; padding-block: 12px; width:100% !important; max-width:100%; text-indent:initial !important; border-radius:50px !important; } } .image-with-text .shop-the-look .flickity-page-dots{ margin-top:5rem !important; gap:0 !important; .flickity-page-dot.is-selected{ height: 12px !important; width: 12px !important; margin-inline:0 !important; } .flickity-page-dot{ margin-inline: 5px; width: 40px !important; height: 5px !important; } } .featured-collection__section .title-wrapper{ .title { font-size: clamp(25px,calc(25px + (40 - 25) * ((100vw - 1024px) / (1920 - 1024))),40px) ; } } .featured-collection__section .product-grid{ --grid-horizontal-spacing: 1.5rem; } } @media screen and (max-width:625px){ .product-image-label { padding: 8px 5px; .price-item bdi{ font-size:var(--font-14px); } } } /* --------------------------------------------------------------------------- FILTER & SORT -- see assets/component-facet-drawer.css The filter drawer, the sort dropdown, the active-facet chips and the product count all live in their own stylesheet now. It is loaded by main-collection-product-grid.liquid and main-search.liquid, so it lands AFTER this file and wins every tie -- the overrides that used to sit here had to carry an extra `.mobile-facets` each just to fight their way past component-facets.css, and the three files had started to contradict each other. Nothing facet-specific belongs below this line. --------------------------------------------------------------------------- */ /* --------------------------------------------------------------------------- CART DRAWER -- see assets/component-cart-drawer.css The drawer's design lives entirely in its own stylesheet now. It is loaded by sections/header.liquid, so it lands AFTER this file and wins every tie -- the overrides that used to sit here had to carry an extra `.mini-cart` each just to fight their way past it, and the two files had started to contradict each other. Recommendations go in component-cart-recommendations.css. Nothing drawer-specific belongs below this line. --------------------------------------------------------------------------- */ .card-information__button{ padding:5px; } .card-information__button .button{ box-shadow: 0 0 5px 1px #cccccc7d !important; } .card-information__button .button--soldout{ color:var(--sold-bg); &::before{ border: 2px dashed var(--sold-border); } &:hover { transform: none; background: #ffffff; color: var(--sold-bg); &::before { width: calc(100% - 10px); height: calc(100% - 10px); /* border: 1px dashed var(--sold-border); */ outline: none; } } } @media screen and (max-width:990px){ .card-information__button{ right: 5px !important; bottom: 85% !important; } } .product-image-label__sold{ filter: grayscale(1) !important; } /* Collection Grid */ .product-grid .card-information__wrapper { .price{ display:none !important; } } .thumbnail[aria-current]:after{ box-shadow: inset 0 0 0 .2rem #ff8cbb !important; } @media screen and (max-width:1150px){ #product-grid.product-grid{ --grid-horizontal-spacing: 1.5rem; } /* .template-collection .product-grid .flex-grid__item { max-width: calc(33.33% - var(--grid-horizontal-spacing) * 2 / 3) !important; } */ } @media screen and (max-width:990px){ /* .template-collection .product-grid .flex-grid__item { width: calc(50% - var(--grid-horizontal-spacing) / 2) !important; max-width: calc(50% - var(--grid-horizontal-spacing) / 2) !important; } */ /* .product-grid .card-information__wrapper { .price { display:block !important; margin-block:10px !important; .price-item bdi{ font-size: var(--font-18px); font-weight: bold; color: var(--darker-accent); } } } */ } @media screen and (max-width:768px){ .product-grid .card-information__wrapper { .price { .price-item bdi{ font-size: var(--font-16px); } } } .product-grid .card-information .button--soldout{ font-size: var(--font-12px) !important; padding: 8px; max-width: 90px !important; } } /* Quick buy button, touch layouts. Every selector here is prefixed with .card-wrapper on purpose. custom.css is loaded in (theme.liquid), but component-card.css is loaded by the section itself, so it lands LATER in the document and wins any tie on equal specificity. The extra class is what makes these overrides actually apply. The button box is absolutely positioned with no left/right inside a justify-content:center flex parent, so its horizontal placement fell to the static position -- which browsers resolve differently for an abspos child of a flex container. Pinning right + transform holds it off the corner; raise both numbers together to move it further in, diagonally. */ @media screen and (hover: none) and (max-width: 1366px), screen and (max-width: 990px) { .card-wrapper .card-information__button { left: auto; right: 2.2rem; width: auto; overflow: visible; transform: translateY(-2.2rem); } /* Size both variants together: single-variant cards render , multi-variant ones render , and only the former was being resized -- so a row could mix 35px and 45px buttons. min-height:0 is what keeps it a circle: component-card.css sets min-height:3.6rem, which otherwise beats height and gives 35x36. */ .card-wrapper .card-information__button .button:not(.button--soldout) { width: 45px; height: 45px; min-height: 0; min-width: 0; padding: 0; flex: 0 0 auto; aspect-ratio: 1; } /* Sold out is a text pill, not an icon circle -- it must size to its label. The !important is unavoidable: three earlier rules set width/max-width with !important, so specificity alone would not win. */ .card-wrapper .card-information__button .button.button--soldout { width: auto !important; max-width: none !important; height: auto; min-height: 0; aspect-ratio: auto; flex: 0 0 auto; padding: 0.7rem 1.6rem; border-radius: 50px; line-height: 1.2; text-indent: 0; white-space: nowrap; } } @media screen and (max-width:750px){ .card-wrapper .card-information__button .button:not(.button--soldout){ width:35px; height:35px; min-height: 0; min-width: 0; padding: 0; aspect-ratio: 1; } /* Phone: same text pill, a touch tighter to suit the narrower card. */ .card-wrapper .card-information__button .button.button--soldout { padding: 0.6rem 1.2rem; font-size: var(--font-12px); } .card-wrapper .card-information__button .button .icon-cart{ width: 1rem; height: 1rem; } .shop-the-look .image-with-text__content .image-with-text__products{ max-width:100% !important; width:100% !important } } /* @media screen and (max-width:550px){ .template-collection .product-grid .flex-grid__item { width: 100% !important; max-width: 100% !important; } } @media screen and (max-width: 1150px) { .flex-grid--4-col-desktop .flex-grid__item { width:100% !important; } } */ product-gallery use-animate{ background:transparent !important; } .product .slider-buttons{ display:none !important; } /* Payment Button */ .template-product .product-form__buttons{ flex-wrap:nowrap; grid-column-gap: 1rem; margin-top:2rem; .shopify-payment-button{ margin-block:0; } } /* Same rule as the FAQ separators below it: 2px dashed accent at 45%. It was a 1px solid line, which made two different dividers on one page. `border: 0` first because base.css:726 gives every
`height: 0.1rem` and a background-colour rather than a border -- without clearing the height the dashed line would sit on top of a 1px solid bar. */ .product-separator hr{ border: 0; border-top: 2px dashed rgba(255, 140, 187, 0.45); height: 0; background: transparent; } .product-form__submit{ font-size:var(--font-16px); &::after{ display:none; } } shop-pay-wallet-button{ display: none !important; } .shopify-payment-button__more-options { position: relative !important; background: linear-gradient(90deg, hsla(330, 100%, 88%, 1) 0%, hsla(338, 100%, 75%, 1) 100%) !important; color: transparent !important; padding: 0 20px !important; overflow: hidden !important; margin-block: 0 !important; border-radius:50px !important; min-height: 5rem; &:hover{ background:var(--color-white) !important; &::before{ border:2px dashed var(--accent-color); color:var(--accent-color); } } } .shopify-payment-button__more-options:before { position: absolute; content: "BUY NOW"; color: var(--color-white); text-align: center; display: flex; justify-content: center; align-items: center; font-size:var(--font-16px); overflow:visible; inset: 0; margin: auto; width: calc(100% - 10px); height: calc(100% - 10px); border-radius:50px !important; border:2px dashed var(--color-white); transition: all .3s linear !important; } @media screen and (max-width:1200px){ .template-product .product-form__buttons{ flex-wrap:wrap; } .product-form__submit{ margin-bottom:5px; } } @media screen and (max-width:1024px){ .product-form__submit{ font-size:var(--font-14px); } /* Only the label shrinks here -- the cut line holds its 2px weight so it matches .custom-button and the links page at every viewport. */ .shopify-payment-button__more-options:before { font-size:var(--font-14px); } } /* Product Details Page */ .product-form__buttons{ row-gap:5px !important; } .product__info-container .product__title{ margin-block:10px !important; } #price-template--18071576182984__main{ margin-block:0 !important; } .product__info-container .price .price-item { bdi{ font-weight:bold; font-size:var(--font-20px); color:var(--darker-accent); } } /* ON SALE, the two numbers cannot both be brand pink. The rule above paints every .price-item the same --darker-accent and at the same bold 20px, so the struck compare-at came out identical to the price that replaced it -- the discount read as a typo rather than as a saving. The compare-at steps back to muted foreground at a lighter weight, and its strike-through follows it off --color-sale-price (#d72c0d, the one red in an otherwise pink block). The sale price is then the only pink number on the page, which is what makes it read as the answer. Both selectors are (0,3,1), the same as the rule above, so this has to stay BELOW it to win. */ .product__info-container .price--on-sale .price-item--regular bdi { color: rgba(var(--color-foreground), 0.55); font-weight: 400; } .product__info-container .price--on-sale .price-item--regular::before { border-bottom-color: rgba(var(--color-foreground), 0.55); } /* Accordion separators: 2px dashes, but faded. Full-strength accent was right for one card or one button; repeated down a stack of five accordions it turned into stripes and fought the buttons above it for attention. The links page already answers this -- its repeated rules run at 0.4-0.55 alpha while single structural cut lines stay solid (section-linktree.css:574, 819). Same idea here: the dash pattern still reads as the brand, at a weight that suits a rule you see five times rather than once. Kept at 2px rather than dropped to a hairline. Dash length derives from border width, so 1px produced a fine dotted texture that read as a different language; 2px at lower alpha keeps the shape and loses the shouting. Top and bottom ONLY. component-accordion.css gives the sides no border-style, which is the only reason they are invisible -- their width is still the CSS default `medium`. A blanket `border-style: dashed` therefore switches the sides on at ~3px, which reads as a second, heavier dashed border boxing the panel in. Styling the two edges individually, and zeroing the sides outright, keeps it to the separators. */ .product__accordion.accordion { border-top: 2px dashed rgba(255, 140, 187, 0.45) !important; border-bottom: 2px dashed rgba(255, 140, 187, 0.45) !important; border-left: 0 !important; border-right: 0 !important; } /* Quantity stepper as a blush pill. Same principle as the FAQ above -- fill and shape, no extra dashed stroke, since this sits right beside the two buttons that carry the rings. Built as a sibling of .custom-button, because that is what sits directly below it. Same white pill, same 100px radius, same 2px dashed ring floating 5px inside -- so the stepper and Add to cart read as one family of controls instead of two materials stacked on top of each other. No shadow, deliberately. .custom-button has none, and giving the stepper one was what made it look like a different object hovering above a flat button. This does not reopen the "too many dashes" problem: the buy row already owns the dashed language, and the stepper is a control in that row. What was cut earlier were separate zones -- the pickup block and the FAQ rules. The page background IS #fff3f7 (settings_data.json colors_background), which is why the earlier blush pill measured 1.00:1 against the page and vanished. White is both the fix and the brand's core motif. The +/- discs reuse the theme's own machinery rather than new markup: .quantity__button::after is already a circle that scales 0 -> 1 on hover with the glyph inverting. It was grey; recoloured to the accent it becomes the same rest -> hover -> solid progression the FAQ icons use, for free. Hooked on .product-form__quantity because the product page renders the stepper TWICE -- once in the buy form and once in the sticky cart bar (main-product.liquid:1412) -- and that class is the one ancestor both share. It also keeps this off the cart and mini-cart steppers, which are a different context and were not part of the ask. */ .product-form__quantity .quantity{ position: relative; background: #fff; border-radius: 100px; box-shadow: none; /* No ring to clear now, so the padding is just breathing room. */ padding: 0.5rem; width: 18rem; } .product-form__quantity .quantity .quantity__input{ font-weight: bold; font-size: var(--font-16px); color: var(--darker-accent); opacity: 1; } /* A real pink tint, not blush. #fff3f7 against white measures 1.08:1 -- the same non-difference that made the blush pill disappear against the blush page. The discs have to be the thing that says "press me", so they carry an actual tint that separates them from the pad at a glance. 0.25 specifically: the darker-accent glyph clears 3:1 on top of it, which is the WCAG threshold for a control you must be able to identify. Denser tints look punchier but drop the glyph to ~2.8 and it starts to mush into the circle. */ /* Pills, the same shape as the site's buttons: wider than tall with border-radius 100px, so the sides run straight and the ends are semicircular caps. base.css uses 50%, which on a non-square box gives a true ellipse that curves the whole way round -- a different shape language to .custom-button. Height stays at base.css's 3.6rem so the control does not get taller, only the tap area widens. Two base rules have to be beaten, not one: `.quantity__button` sizes it with `flex: 0 0 3.6rem` (so width alone is squashed back by the flex layout), and `.quantity__button[name=minus]/[name=plus]` set squared-off 0.3rem corners on the outer edges. Three classes clears both. */ .product-form__quantity .quantity .quantity__button{ flex: 0 0 5.6rem; width: 5.6rem; border-radius: 100px; background-color: rgba(255, 140, 187, 0.25); color: var(--darker-accent); } /* The hover fill inherits the shape too, or it blooms as an ellipse inside a pill. base.css gives ::after border-radius 50%. */ .product-form__quantity .quantity .quantity__button::after{ border-radius: 100px; } /* Recolour the existing scale-in disc instead of writing a new one. */ .product-form__quantity .quantity .quantity__button::after{ background-color: var(--accent-color); } @media screen and (hover: hover){ .product-form__quantity .quantity .quantity__button:hover{ color: #fff; } } /* Centred on phones. The stepper is a fixed 18rem sitting above full-width buttons, so left-aligned it looks stranded in a single-column layout; on desktop it stays left, where it lines up with the labels above it. margin-inline works whether the parent is block or flex. */ @media screen and (max-width: 749px){ .product-form__quantity .quantity{ margin-inline: auto; } } /* FAQ accordions, on brand without another stroke. Everything here is fill, shape and colour rather than more dashed line -- the page already carries the dashed language on the buy buttons, and this section sits directly under them. 1. The block's icon goes on a blush disc, the same motif as the pickup store glyph and the social marks on the links page. It is the cheapest way to make a row read as ours, and it turns a 16px monochrome glyph into something with presence. 2. The open row's title and icon shift to the darker pink, so the panel you are reading identifies itself without a highlight bar. 3. The answer sits on a blush pad. A soft fill does the work a border would have done, and it visually separates answer from question at a glance. Four classes throughout: component-accordion.css and section-main-product.css both style these at three and load after this file, so a tie would lose. */ .product__accordion.accordion .summary__title .icon-accordion{ width: 3.4rem; height: 3.4rem; padding: 0.8rem; box-sizing: border-box; background: #fff3f7; border-radius: var(--round-radius, 50%); fill: var(--darker-accent); transition: background 0.3s linear, fill 0.3s linear; } .product__accordion.accordion summary .accordion__title{ transition: color 0.3s linear; } .product__accordion.accordion details[open] .accordion__title, .product__accordion.accordion summary:hover .accordion__title{ color: var(--darker-accent); } /* Three states, so the icon tracks the row instead of only reacting once it is already open: blush at rest, a deeper blush under the cursor, solid pink when open. The middle step is what was missing -- the title moved on hover and the disc sat still, which read as half-wired. Scoped with details:not([open]) rather than relying on source order. The hover and open selectors otherwise tie on specificity, so hovering an open row would knock it back out of its open state. focus-visible rides along so keyboard users get the same signal. */ .product__accordion.accordion details:not([open]) summary:hover .summary__title .icon-accordion, .product__accordion.accordion details:not([open]) summary:focus-visible .summary__title .icon-accordion{ background: rgba(255, 140, 187, 0.3); } .product__accordion.accordion details[open] .summary__title .icon-accordion{ background: var(--accent-color); fill: #fff; } .product__accordion.accordion details[open] .accordion__content{ background: #fff3f7; border-radius: var(--card-radius, 20px); padding: 1.6rem 1.8rem; margin-block-end: 1.6rem; } /* Softer accordion caret. The markup now renders 'custom-caret' instead of 'caret' -- a stroked chevron with round caps and joins, rather than the legacy sharp filled wedge. That is the swap the design system asks for, and desktop-menu.liquid already uses it. It needs resizing to land well. base.css:798 sets `height: 0.6rem` on summary carets, which suited the old glyph because it filled its viewBox; the rounded one draws only the middle ~40% of a 24x15 box, so at 0.6rem the visible chevron came out around 2px. 2rem gives a chevron of roughly 8px with a ~3px round stroke. margin-top must track half the height to stay centred, since base.css positions it absolutely at top: 50%. Pink rather than body colour, matching the dashed rules it sits between. The open/close flip is already eased by base.css, so it turns smoothly. */ .product__accordion summary .icon-caret { height: 2rem; width: auto; margin-top: -1rem; color: var(--accent-color); } /* Stacked accordions share one rule, not two. component-accordion.css:13 already collapses the shared edge with `.accordion + .accordion { border-top: none }`, but that carries no !important -- so the `border-top-style: dashed !important` above resurrected it, giving two lines between neighbours. And because `border-top: none` also resets the WIDTH to `medium`, the revived line came back at ~3px beside the 1px one, which is why the pair looked mismatched. Four classes plus !important, so this beats the rule above deterministically rather than depending on which stylesheet happens to load last. */ .product__accordion.accordion + .product__accordion.accordion { border-top: 0 !important; } .product__accordion .accordion__title{ font-weight: bold; letter-spacing: 1px !important; font-size: var(--font-16px) !important; } /* Taller scroll box for the product accordions (FAQ, description, etc). section-main-product.css:814 caps .accordion__content at 25rem -- 250px here, since the root is 62.5% -- which makes a long FAQ a lot of scrolling. This grows it while staying inside the viewport: never shorter than the old 250px, tracking 60% of the window, up to 450px on a tall screen. Raise the 45rem to allow more. Doubling up .accordion (which is on the same element) is what wins the cascade: section-main-product.css is loaded by the section, so it lands after this file, and a plain .product__accordion .accordion__content would tie and lose. It also matches both markup variants -- some blocks render , others a plain
, but both carry these two classes. */ .product__accordion.accordion .accordion__content{ max-height: clamp(25rem, 60vh, 45rem); } .product__tax.caption{ display:none !important; } /* Buy row: give the three actions some life. The colour inversion on hover already existed (white <-> gradient, with the ring swapping colour). What was missing is everything else: 1. A LIFT on hover. 2px, matching the pickup pad above rather than the links-page stickers' 3px, so the column moves at one scale. 2. A PRESS state. Nothing happened on click before -- the button just sat there through the whole interaction. Dropping 1px and easing at 0.1s makes it feel like it takes the press. No ring animation. Resizing the dashed ring on hover looked restless, and on Buy now it was actively wrong: that button's ::before is not just the ring, it also carries the "BUY NOW" label as generated content, so animating its width and height was resizing the text box and shifting the words. Lift and press only. Scoped to the buy row on purpose: .custom-button is used site-wide, and a lift on the round quick-buy discs on the cards would fight the card's own hover. */ .product-form__buttons .custom-button, .shopify-payment-button__more-options{ transition: all .3s linear !important; } @media screen and (hover: hover){ .product-form__buttons .custom-button:hover, .shopify-payment-button__more-options:hover{ transform: translateY(-2px); } } .product-form__buttons .custom-button:active, .shopify-payment-button__more-options:active{ transform: translateY(1px); transition-duration: .1s !important; } /* Share was an unstyled text link next to two full-width buttons. A blush pill puts it in the quiet tier -- present and clickable, without a third ring competing with the two above it. */ .share-button__button{ display: inline-flex; align-items: center; gap: 0.8rem; padding: 0.9rem 1.8rem; border-radius: 100px; background: #fff3f7; color: var(--darker-accent); font-weight: bold; text-decoration: none; background-image: none; transition: all .3s linear; } .share-button__button .icon{ color: var(--darker-accent); } @media screen and (hover: hover){ .share-button__button:hover{ background: rgba(255, 140, 187, 0.3); transform: translateY(-2px); } } .share-button__button:active{ transform: translateY(1px); transition-duration: .1s; } /* Store pickup as a plain sticker pad -- deliberately WITHOUT a cut line. It was a 1px solid outline on a transparent 10px box: generic, and the only part of the product page not speaking the brand's language. It is now a white pad on the card radius with the sticker shadow, which reads as Kawaii Co through its surface rather than through another dashed ring. No ring here on purpose. This block sits directly under Add to cart and Buy now, which already carry a dashed ring each. A third one stacked immediately below turned the signature into wallpaper. The brand cues that remain -- pink heading, the glyph on its pink disc, the status dot -- carry it without competing with the buttons, and the dashed language stays reserved for things you can click. */ pickup-availability-preview.pickup-availability-preview{ position:relative; padding:1.8rem 2rem !important; background:#fff !important; border:0 !important; border-radius:var(--card-radius, 20px) !important; box-shadow:0 0.3rem 1.4rem 0 #00000024; transition:box-shadow 0.3s linear, transform 0.3s linear; } /* Subtle hover: the pad lifts a little and its shadow deepens. Kept to 2px rather than the 3px the links-page stickers use, and with no colour change, on purpose -- the block itself is not a link. Only the "Store info" button inside it is clickable, so the pad should feel responsive without promising that clicking anywhere will do something. Behind (hover: hover) so it cannot stick after a tap on touch. */ @media screen and (hover: hover){ pickup-availability-preview.pickup-availability-preview:hover{ transform:translateY(-2px); box-shadow:0 0.5rem 1.8rem 0 #0000002e; } } .pickup-availability-preview .icon-tick{ width:30px !important; height:auto !important; } .pickup-availability-preview .pickup-availability-info{ margin-inline:14px; display:flex; align-items:center; width:100%; justify-content:space-between; flex-wrap:wrap; gap:20px; } .pickup-inner-info-top{ display: flex; align-items: center; margin-block: 0 !important; gap: 10px; .pickup-text{ margin-block: 0; /* was 0 -- the dot below is aligned as inline-flex and needs a real line box */ line-height: 1; font-weight: bold; font-size: var(--font-18px); color: var(--darker-accent); display: inline-flex; align-items: center; gap: 8px; } /* Availability dot with a soft halo -- says "you can collect this today" at a glance, before the sentence is read. Green rather than pink so it reads as a status and not as decoration; --new-bg is the same green the "New" corner ribbon uses, so it is already in the palette. Deliberately static: this sits beside the buy button, and a pulsing dot there competes for attention with the thing we want clicked. */ .pickup-text::after{ content:''; flex:0 0 auto; width:8px; height:8px; border-radius:50%; background:var(--new-bg); /* literal rather than a relative colour: keep it working on the older Android browsers this project's linter still flags. #4bbf6c = --new-bg */ box-shadow:0 0 0 3px rgba(75, 191, 108, 0.2); } } /* The store glyph on its own pink disc, echoing the round social marks on the links page rather than floating loose against the pad. */ .pickup-availability-preview img{ width:30px; height:30px; margin-block:0; padding:7px; box-sizing:content-box; background:#fff3f7; border-radius:var(--round-radius, 50%); } .pickup-availability-info .pickup-inner-wrap{ display: flex; flex-direction:column; gap: 5px; margin-block: 0; } .pickup-inner-info{ margin-block:0 !important; display: flex; align-items: center; gap: 8px; display:none; } .pickup-availability-preview .caption-large{ font-size:var(--font-16px); font-weight:bold; line-height:1; margin-block:0; } .pickup-availability-preview .caption{ font-size:var(--font-14px); font-weight:bold; margin-block:0; line-height:1; position:relative; } .pickup-availability-preview .pickup-availability-button{ margin-block:0 !important; } #ShowPickupAvailabilityDrawer{ max-width:fit-content; color: var(--accent-color); padding: 10px 30px; border-radius: 100px; margin-top: 10px; font-size:var(--font-16px); &:hover{ color:var(--color-white) !important; } } /* Store info as a centred modal rather than a side drawer. No JS change needed. pickup-availability.js only toggles the `open` attribute and a body class -- the slide-in was pure CSS -- and its outside-click test uses closest() rather than geometry, so Escape, the close button, click-outside and focus trapping all keep working unchanged. Built like the links-page store modal: white pad on a 3.2rem radius with the 2px cut line floating 5px inside, and the heavier modal shadow. The attribute selectors are load-bearing, not decoration. component-pickup-availability.css styles the bare element and `[open]` and loads after this file, so matching its specificity would lose the tie -- [role="dialog"] and [role="dialog"][open] sit one step above. */ pickup-availability-drawer[role="dialog"]{ inset: 50% auto auto 50%; width: min(42rem, calc(100vw - 4rem)); height: auto; max-height: min(80vh, 60rem); padding: 2.4rem 2rem; border-radius: 3.2rem; box-shadow: 0 1rem 4rem 0 #00000038; /* opacity is added to the list -- the base rule only transitions transform and visibility, so a fade would otherwise snap. */ transition-property: transform, visibility, opacity; transform: translate(-50%, -46%) scale(0.97); opacity: 0; } pickup-availability-drawer[role="dialog"][open]{ transform: translate(-50%, -50%) scale(1); opacity: 1; } /* The cut line, held against the panel rather than the scrolling content. */ pickup-availability-drawer[role="dialog"]::before{ content:''; position:absolute; inset:5px; z-index:2; border-radius:2.7rem; border:2px dashed var(--accent-color); pointer-events:none; } /* The page no longer slides aside -- that was the drawer's affordance, and it reads as a glitch behind a centred modal. Needs an element in front of the class to outrank the id-based rule in the component file. */ body.pickup-availability--open #MainContent, body.pickup-availability--open .shopify-section-footer{ transform: none; } pickup-availability-drawer .pickup-availability-drawer-title{ color: var(--darker-accent); font-weight: bold; } /* Header above the cut line, so the close disc is never crossed by it. */ pickup-availability-drawer[role="dialog"] .pickup-availability-header{ z-index: 3; } /* Close control as a pink disc, matching the links-page modal's. */ pickup-availability-drawer .pickup-availability-drawer-button{ background-color: #fff3f7; color: var(--darker-accent); } /* Each store on its own pad -- no ring of its own. The modal already has one running round the panel, and a dashed ring inside a dashed ring is where this stopped reading as a motif. Blush fill separates the rows from the white panel without adding another stroke. */ pickup-availability-drawer .pickup-availability-list__item{ position: relative; background: #fff3f7; border: 0; border-radius: var(--card-radius, 20px); padding: 2rem; margin-block-end: 1.2rem; } pickup-availability-drawer .pickup-availability-list__item .h4{ color: var(--darker-accent); } pickup-availability-drawer .pickup-availability-preview{ align-items:center; } @media screen and (max-width:1680px){ pickup-availability-preview.pickup-availability-preview{ padding: 18px 10px !important; } .pickup-inner-info-top { .pickup-text { font-size: var(--font-14px); } } #ShowPickupAvailabilityDrawer{ font-size:12px; } } /* Prices in the search results carry the same weight and pink as the drawer's. The drawer half of this pair moved to component-cart-drawer.css. */ .predictive-search__item-content .price__regular bdi{ font-weight:bold; color:var(--darker-accent); } /* Search Modal Content Style */ @media screen and (hover: hover) { .predictive-search__item-heading{ background-image: linear-gradient(to top, #000 0px 0px), linear-gradient(to top, transparent 0px, transparent 0px) !important; } } .search-modal.modal__content{ border-radius:100px !important; box-shadow: 0 0 0 200vw #00000045 !important; margin-inline:2rem; } .search-modal.modal__content.searching{ border-radius:50px !important; } .search-modal__content .search-modal__form{ justify-content:center; } .search-modal__content .field{ margin-top:0 !important; border-radius:50px !important; background:#ff8cbb52 !important; transition:all .3s ease-in-out; } .predictive-search__item.button{ border-radius:50px; } .searching .field{ margin-top: 20px !important; } search-modal .modal-overlay{ display:none !important; } .template-search .template-search__search{ max-width:80rem; .field{ background: #ff8cbb52 !important; } } .template-search .template-search__results{ padding-top:30px; border-top: 1px solid #d92d773d; } @media screen and (max-width:1660px){ .template-search.section--padding{ --section-padding-top: 20px; } #shopify-section-template--18071576182984__empty-space { --spacing-section-desktop: 130px !important; } } @media screen and (max-width:749px){ header.header{ padding-inline:25px; } .search-modal.modal__content{ top:12px; border-radius:50px !important; margin-inline:1rem; box-shadow: 0 0 0 200vw #00000045 !important; max-height:100px; .page-width{ padding-inline:2rem; } } .searching .field{ margin-top: 30px !important; } .search-modal.modal__content.searching { max-height:95%; } } /* Contact Us Page */ .contact.page-width{ --page-width:130rem; } .contact .title-wrapper .title{ margin-inline:auto; } .contact .field__input{ background: #ffdbea; box-shadow: inset 0 0 0 .1rem #ff8cbb; border-radius: 8px; } .template-page .banner__content { .banner__text { max-width:500px; margin-inline:auto; } } .contact .contact__button{ margin-block:0; .button{ max-width:fit-content; min-width: fit-content; padding: 10px 40px; } } .contact .contact-form { .rte{ font-size:var(--font-12px); a{ color:var(--color-black); } } } .contact .title-wrapper{ justify-content:center; } @media screen and (max-width:1600px){ .contact .contact__button{ .button{ font-size: var(--font-16px); } } } /* Rewards Page Style */ .ll__loyalty-page-banner-ho4ed3.ll__root-ho4ed3{ padding-block: 15dvh; .ll__banner-content{ background-color: #ffffff; border-radius: 8px; margin-inline: auto; box-shadow: 0 0 10px 0 #0000004d; text-align: center; margin-top: 20rem; } } .kawaii-club__multicolumn .title--container, .levelup__multicolumn .title--container{ .title { font-size: clamp(25px,calc(25px + (40 - 25) * ((100vw - 1024px) / (1920 - 1024))),40px) ; } } .kawaii-club__multicolumn .multicolumn-card__image-wrapper, .levelup__multicolumn .multicolumn-card__image-wrapper{ background:transparent; } .kawaii-club__multicolumn .multicolumn-list__item, .levelup__multicolumn .multicolumn-list__item{ padding: 30px; border: 2px dashed var(--accent-color); border-radius: 10px; background: #ff8cbb1f; } .kawaii-club__multicolumn .multicolumn-card__info{ .multicolumn-card__title{ font-size: clamp(22px,calc(22px + (30 - 22) * ((100vw - 1024px) / (1920 - 1024))),30px) ; } .rte { margin-block:0 !important; max-width:300px; margin-inline:auto !important; p{ margin-block:0; font-size:var(--font-16px); } } } @media screen and (max-width:1150px){ .kawaii-club__multicolumn .multicolumn-list__item{ padding: 10px; } } .levelup__multicolumn .multicolumn-card__image-wrapper{ width:100%; max-width:300px; margin-inline:auto; } .levelup__multicolumn .page-width{ --page-width:130rem; } .ll__loyalty-page-redeem-rules-ho4ed3.ll__root-ho4ed3{ max-width:100% !important; .ll__subtitle{ margin-block:10px 30px !important; } } .ll__loyalty-page-earn-rules-ho4ed3.ll__root-ho4ed3{ max-width:100% !important; } .ll__panel-left-container{ .ll__login-button{ padding: 10px 30px; font-size: var(--font-18px); } } /* Faq */ .faq.page-width{ --page-width: 150rem; } .faq accordion-tab{ padding-block: 10px; border-bottom: 1px dashed var(--accent-color); summary > span{ font-weight:bold; color:var(--color-black); } } .faq details[open] summary .icon{ background:var(--accent-color) !important; } .quantity__button:after{ background:var(--accent-color); } /* blog Page */ .main-blog .title--primary{ display:none !important; } .main-blog .blog-header{ margin-bottom:4rem; } .main-blog .medium-hide{ margin-inline:auto; } .main-blog .blog-filter{ margin-inline:auto; gap:10px; li{ padding-inline:0; } .link{ padding: 8px 20px; font-size: var(--font-14px); border-radius: 50px; background: var(--color-white); color: var(--accent-color); border: 1px solid var(--accent-color); cursor:pointer; transition:background .6s ease-in-out; &:hover{ background: linear-gradient(90deg, hsla(338, 100%, 75%, 1) 0%, hsla(331, 100%, 84%, 1) 100%); color:var(--color-white); } } } .main-blog .blog-filter{ .link.is-selected{ background: linear-gradient(90deg, hsla(338, 100%, 75%, 1) 0%, hsla(331, 100%, 84%, 1) 100%) !important; color:var(--color-white) !important; } } .article-card .card{ &:hover{ .article-card__link{ color:var(--accent-color); } } } .view-all .button{ border-radius:50px; } .article-template .article-template__title{ color:var(--accent-color); font-size: clamp(25px,calc(25px + (50 - 25) * ((100vw - 1024px) / (1920 - 1024))),50px) ; } .article-template__link{ color: var(--accent-color); box-shadow: inset 0 0 0 .1rem #ff8cbb; border-radius:50px; &:hover{ color:var(--darker-accent); box-shadow: inset 0 0 0 .2rem #d92d77; } } .main-blog .blog-articles{ row-gap:3rem; margin-block:4rem; margin-inline:auto; .blog-articles__article{ padding: 10px; border-radius: 20px; border: 1px dashed var(--darker-accent); } } .article-template__content h2{ color:var(--accent-color); } .article-template__content img{ width:100%; max-width:600px; } /* Policy Page Style */ .shopify-policy__container{ max-width:1280px; padding-top:16rem; } @media screen and (max-width:749px){ /* This padding is not decoration -- the header group is `position: absolute; top: 30px` (custom.css:146), so it sits OUT of flow and this is the only thing keeping the product from sliding under it. Trimmed 14rem -> 13rem; go much below this and the title starts to tuck behind the floating header pill on smaller phones. */ .template-product product-info{ padding-top:13rem; } } @media screen and (max-width:999px){ .search-modal .page-width{ padding-inline:5rem; } } /* Product Page Style */ .template-product .product__media img{ border-radius:20px; } .template-product .thumbnail-list{ max-width:100% !important; border-radius:10px; background: #ffdbea80 !important; box-shadow:none; .thumbnail-list__item{ max-width:15rem !important; width:100% !important; border-radius:8px !important; .thumbnail::after{ border-radius:8px !important; } } } .breadcrumb .link{ background-image: linear-gradient(to top, #000000 0px 0px), linear-gradient(to top, transparent 0px, transparent 0px); } /* Product Badge */ .card-wrapper{ overflow:hidden !important; } /* Corner ribbon. Pinned by its centre rather than by edge offsets. `right/top: 0` puts its top-right corner on the image's corner, translate(50%, -50%) then moves its CENTRE there, rotate turns it 45 degrees about that centre, and the final translateY pushes it back down the diagonal into the card. Because every step is relative to the ribbon's own box, the result no longer depends on the card's width or the ribbon's height -- so the band stays symmetrical about the corner, and the label stays centred in it, at any image size and any font size. The previous edge-offset version only lined up when the card was at least 250px wide and the ribbon exactly 50px tall, which is why it drifted on the larger shop-the-look images. SIZE. What you actually see is not the ribbon's width -- the ends are clipped by the corner. For a band crossing a square corner at 45 degrees, the visible length is exactly twice its distance from that corner. So the distance is the size control, and it has to track the card for the ribbon to scale. cqw does that: 1cqw is 1% of the container's width, and .card__media is declared the container just below. 22cqw out means a visible band of 44% of the image width -- proportional on a 180px grid card and on a 600px shop-the-look image alike. The old fixed 92px gave every card the same 184px band regardless of size, which is why small images looked overloaded. translateY is the only size/position control: it sets how far the band sits from the corner, and the visible length follows at twice that. Lower it to tuck the ribbon further into the corner, raise it to push it inward. The two move together -- on a square corner a 45-degree band cannot get closer without also getting shorter. Width just has to exceed twice the offset so the band spans the corner; the surplus is clipped. Font and padding scale the same way, clamped so the label stays legible at the small end and does not balloon at the large end. The .card-wrapper prefix is required, not cosmetic. component-card.css:383 sets `right: -36% !important` and `top: 8% !important` on a bare .card__badge, and it loads after custom.css -- so a same-specificity rule here loses. */ .card-wrapper .card__media{ container-type: inline-size; } .card-wrapper .card__badge{ width: 100cqw !important; max-width: none !important; left: auto !important; right: 0 !important; top: 0 !important; transform: translate(50%, -50%) rotate(45deg) translateY(22cqw); text-align: center; box-shadow: 0 0 6px 0px #00000040; .badge{ width: 100%; /* Scales with the image like the band does, clamped so it stays readable on a narrow grid card and does not balloon on a shop-the-look image. */ padding: clamp(5px, 3.5cqw, 12px) 0; font-size: clamp(8px, 4.5cqw, 16px); font-weight: bold; letter-spacing: 0; color: var(--color-white); background: transparent; } } .card__badge-sold-out{ background:var(--sold-bg); .badge{ border: 3px solid var(--sold-border); } } /* The one flag whose label is not white -- its fill is too light to carry one. Needs the .card-wrapper prefix to reach (0,3,0): the shared white above is set through `.card-wrapper .card__badge .badge`, and a bare `.card__badge-sale .badge` at (0,2,0) would lose to it. */ .card-wrapper .card__badge-sale{ background:var(--sale-bg); .badge{ border: 3px solid var(--sale-border); color: var(--sale-fg); } } .card__badge-new{ background:var(--new-bg); .badge{ border: 3px solid var(--new-border); } } .card__badge-last{ background:var(--last-bg); .badge{ border: 3px solid var(--last-border); } } /* No corner ribbon on phones. At mobile card widths the band and its label are small enough to read as clutter over the product shot. 750px is the theme's own mobile breakpoint. `display` needs !important and two classes here: component-card.css:384 sets `display: flex !important` on a bare .card__badge, and it loads after this file. Note this hides every badge type, not just Sold out -- Sale, New and Last chance go with it. Sold out still reads on mobile through the "Sold out" pill in the card's button slot, and a sale still shows via the struck-through compare-at price, but New and Last chance have no other signal there. */ @media screen and (max-width: 749px) { .card-wrapper .card__badge { display: none !important; } } /* The two viewport breakpoints that used to shrink the ribbon label were removed. They keyed off the WINDOW, which is the wrong signal -- a narrow window can still hold a large shop-the-look image, and a wide one still shows small grid cards. The label now scales from the image's own width (the clamp on .card-wrapper .card__badge .badge), which is the measurement that actually matters. They were also being outranked by that rule, so they had stopped doing anything. */ /* About Us Page Style */ .about-us__r-t-section{ /* min-height:100dvh; */ } .about-us__r-t-section .rich-text__text{ max-width:700px; } .about-us__r-t-section .rich-text__heading{ font-size: clamp(30px,calc(30px + (40 - 30) * ((100vw - 1024px) / (1920 - 1024))),40px) ; } .about-us__r-t-section .rich-text{ background:transparent; } /* About Us Timeline */ .about-us__timeline .timeline-item{ flex-direction:column; .timeline-heading{ /* font-size: clamp(22px,calc(22px + (35 - 22) * ((100vw - 1024px) / (1920 - 1024))),35px) ; */ font-size: clamp(28px,calc(28px + (45 - 28) * ((100vw - 1024px) / (1920 - 1024))),45px) ; font-weight:bold; color:var(--heading--color); text-align:center; } .timeline-text{ width:100%; /* max-width:600px !important; */ color:var(--text--color); text-align:center; font-size:var(--font-18px); line-height:1.6; font-weight:600; padding-inline:0 !important; } } .about-us__timeline .slide{ padding:0; img{ max-width:100%; max-height:100%; } } /* Choose Us */ .about-choose__section .multicolumn{ --page-width:1280px; } .about-choose__section .multicolumn-list{ gap:2rem; } /* .about-choose__section */ @media screen and (max-width:1600px){ .about-us__r-t-section .rich-text__text{ font-size:var(--font-16px); max-width:768px; } .about-us__timeline .timeline-item{ .timeline-text{ font-size:var(--font-16px); /* max-width:550px !important; */ } } } @media screen and (max-width:1440px){ .about-us__r-t-section .rich-text__text{ font-size:var(--font-16px); max-width:768px; } .about-us__timeline .timeline-item{ .timeline-text{ font-size:var(--font-16px); } } } @media screen and (max-width:1280px){ .about-us__timeline .timeline-item{ .timeline-text{ /* max-width:calc(550px - 150px) !important; */ } } } @media screen and (max-width:768px){ .about-us__r-t-section .rich-text{ padding-inline:0; } } /* About Us Style End */ /* Inner Page Hero Banner Font Size */ .inner-page__hero .slideshow__heading{ font-size: clamp(30px,calc(30px + (45 - 30) * ((100vw - 1024px) / (1920 - 1024))),45px) ; } @media screen and (max-width:1600px){ .featured-collection__section .view-all { .custom-button{ font-size:var(--font-14px); min-height: 100%; padding: 14px; } } } @media screen and (max-width:750px){ .card-information__button .button--soldout{ text-indent: initial !important; width: 100% !important; border-radius: 50px !important; } } /* Main Product Price Tag */ /* THE TWO PDP PRICE BADGES ARE ONE OBJECT IN TWO COLOURS. Only the sold-out one was ever styled. The sale badge fell through to the bare `.badge` in base.css -- near-white fill, foreground text, a grey 1px border, square-ish corners -- so on a product that was ON SALE the page showed a plain grey chip next to a pink price, while the same product SOLD OUT showed the brand pill. Same component, two unrelated looks. The pill (100px radius, inset dashed white ring) is .custom-button's shape, which is the store's signature; it is shared here. Only the fill differs, and it is taken from the card ribbons rather than invented, so a sale reads red and a sold-out reads grey in the grid and on the product page alike. */ .template-product .product__info-container .price{ justify-content:space-between; align-items:center; .price__badge-sold-out, .price__badge-sale { border:none; padding: 12px 35px; border-radius: 100px; } .price__badge-sold-out { background:var(--sold-bg); color:var(--color-white); } /* Dark label, not white -- see --sale-fg in :root. The fill is too light to carry white text at this size. */ .price__badge-sale { background:var(--sale-bg); color:var(--sale-fg); } } @media screen and (max-width:1440px){ .template-product .product__info-container .price{ .price__badge-sold-out, .price__badge-sale { font-size:10px; padding: 12px 30px; } } } .blog-header .select__select{ box-shadow:none; border:1px dashed var(--accent-color); border-radius:50px; } .desktop-btn-none{ display:none; } @media screen and (max-width:990px){ .desktop-btn-none{ display:block; .button{ max-width:max-content !important; margin-block:4rem 2rem !important; } } .tablet-btn-none{ display:none; } } .instastory-title{ display:none !important; } #instafeed{ display:none !important; } body { --sb-track-color: #fff3f7; --sb-thumb-color: #d9598a; --sb-size: 8px; } body::-webkit-scrollbar { width: var(--sb-size) } body::-webkit-scrollbar-track { background: var(--sb-track-color); border-radius: 8px; } body::-webkit-scrollbar-thumb { background: var(--sb-thumb-color); border-radius: 8px; } @supports not selector(::-webkit-scrollbar) { body { scrollbar-color: var(--sb-thumb-color) var(--sb-track-color); } } .quick-view .quick-view__content{ border-radius:12px; .product-link__button{ border-top: .1rem dashed var(--accent-color) !important; .summary__title{ gap:2rem; svg{ width:22px; } } } .quick-view__close{ &:hover{ background:var(--accent-color); .icon{ color: var(--color-white); } } } .price{ justify-content:space-between; .badge{ border:1px dashed; } } } /* Desktop only, matching component-card.css. The second image is fetched at 1px below 990px (see card-product.liquid), so revealing it on narrower viewports stretches a 1x1 pixel across the card and reads as a blank white wash. */ @media screen and (min-width: 990px) { /* Two fixes to the swap itself. 1. base.css paints rgb(var(--color-placeholder)) -- #f3f3f3 from the colors_img_background setting -- behind this frame. Until the photo decodes, that grey is what you see. Transparent instead, so the first image simply shows through and the second dissolves over it. 2. component-card.css declares transition-property with no duration, so it resolved to 0s and both directions snapped. The shorthand below sets property, duration and easing together, on the resting state, so the fade back out is as smooth as the fade in. */ .card-wrapper .card .media.media--hover-effect > picture + picture, .card-wrapper .card .media.media--hover-effect > img + img { background-color: transparent; transition: opacity var(--duration-long, 500ms) ease, transform var(--duration-long, 500ms) ease; } .card-wrapper .card .media.media--hover-effect > picture:first-of-type { transition: transform var(--duration-long, 500ms) ease; } .card:hover .media.media--hover-effect > picture + picture, .card.is-hovered .media.media--hover-effect > picture + picture { opacity: 1; pointer-events: auto; transform: scale(1.03); } } /* No placeholder fill behind card imagery, at any viewport. base.css puts background-color: rgb(var(--color-placeholder)) -- #f3f3f3 from the colors_img_background setting -- on .media-wrapper, which sits under every card image on the site. Any product or collection shot with transparency picks that grey up as a tint, and it shows for a beat before the photo decodes. That is the wash that survives on collection cards, which have no second image and so were untouched by the hover-swap fix above. One selector covers both card shapes: product cards nest .card inside .card-wrapper, collection cards put both classes on the same . */ .card-wrapper .media-wrapper, .card-wrapper .media, .card-wrapper .card__media { background-color: transparent; } /* Dashed ring on product cards, drawn outside the card the way the collection tiles do it (see `.collection-list__item .card-wrapper` above). outline rather than border: it paints outside the box and takes no space, so nothing reflows when it appears, and it follows the card's own border-radius automatically -- no second radius to keep in sync. It rests as `transparent` rather than `none` so only the colour animates. Going from no outline to a 2px one would pop; this dissolves. The collection tiles snap for exactly that reason, and could take the same treatment. Keyed to .card-wrapper so pointing anywhere on the card -- image, title or price -- brings it up, the same trigger the quick-buy button uses. */ @media screen and (hover: hover) { /* Ring around the image only, so it does not enclose the title and price. .card-wrapper is `overflow: hidden !important` (custom.css:2153, for the product badge), and the image spans its full width -- so a ring drawn outside the image lands outside the wrapper's box and gets clipped. That is what left only the bottom edge visible. The fix is to give the ring somewhere to live: inset the media by exactly its own thickness (2px offset + 2px stroke = 4px) so it falls inside the wrapper. The margin is unconditional, not applied on hover, so the card never shifts as the ring fades in. The outline sits on .card--product, which already carries border-radius: var(--card-radius), so the ring is rounded to match with no second radius to maintain. */ .card-wrapper.product--card .card--product { margin: 4px; outline: 2px dashed transparent; outline-offset: 2px; transition: outline-color 0.3s linear; } .card-wrapper.product--card:hover .card--product, .card-wrapper.product--card:focus-within .card--product { outline-color: var(--accent-color); } } /* The card sits still for anyone who asks for less motion. */ @media (prefers-reduced-motion: reduce) { .card-wrapper .card .media.media--hover-effect > picture + picture, .card-wrapper .card .media.media--hover-effect > picture:first-of-type { transition-duration: 1ms; transform: none !important; } } @media screen and (max-width:1280px){ .card-wrapper .card-information__button { .custom-button { font-size: var(--font-12px); padding-block: 10px; } } } /* pagination */ .timeline-pagination { position: absolute; left: 65px; top: 50%; transform: translateY(-50%); height: 350px; display: flex; flex-direction: column; justify-content: space-between; align-items: center; z-index: 100; } /* base line */ .pagination-line { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; width: 3px; background: #ffd6e6; z-index: 0; } .pagination-progress { position: absolute; left: 50%; transform: translateX(-50%); width: 2px; height: 0; /* JS controls this */ background:var(--accent-color); transition: height 0.3s ease; } /* dots */ .timeline-pagination button[data-index] { width: 30px; height: 30px; border-radius: 50%; background: #FFAFD6; z-index: 2; transition: transform 0.25s ease, background 0.25s ease; display: flex; justify-content: center; align-items: center; border:none; cursor:pointer; color:var(--color-white); font-size: 14px; font-weight: 600; background: #fff3f7; border: 2px solid #ff81b0; color: #ff81b0; } .timeline-pagination button.active { background: #FF81B0; color: #ffffff; } .scroll-to-container{ position: absolute; /* bottom: 0; */ width:100%; top: 80%; left: 50%; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; gap: 2rem; .scroll-to-arrow{ width: 35px; height: 35px; display: block; border: 2px solid var(--accent-color); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--accent-color); animation: scrollBounce 1.6s ease-in-out infinite; svg{ animation: arrowMove 1.6s ease-in-out infinite; } } p{ font-size: 22px; color: #333; margin-block:0; } } .mobile-view{ display:none; } /* Container bounce */ @keyframes scrollBounce { 0% { transform: translateY(0); opacity: 1; } 50% { transform: translateY(8px); opacity: 0.7; } 100% { transform: translateY(0); opacity: 1; } } /* Arrow movement */ @keyframes arrowMove { 0% { transform: translateY(0); } 50% { transform: translateY(6px); } 100% { transform: translateY(0); } } @media screen and (max-width:1440px){ .timeline-pagination{ left:45px; } .timeline-panel { padding: 30px 100px !important; } .timeline-pagination button[data-index] { width: 26px; height: 26px; font-size:12px; } .scroll-to-container{ p{ font-size: 18px; } } } @media screen and (max-width:1024px){ .desktop-view{ top:90%; .scroll-to-arrow{ width:28px; height:28px; } p{ font-size:var(--font-16px); } } .timeline-panel { padding: 30px 60px !important; } .timeline-pagination { left: 20px; height: 300px; } } @media screen and (max-width:768px){ .desktop-view{ display:none; } .mobile-view{ display:flex; top: initial; bottom: 20px; z-index: 2; .scroll-to-arrow{ width:28px; height:28px; background:var(--color-white); } p{ font-size:var(--font-16px); } } } @media screen and (max-width:525px){ .timeline-pagination { height:280px; } } #insta-feed h2 { display:none !important; } @media screen and (max-width:1600px){ .template-list-collections .collection-list__item{ .card__text{ padding-inline:12px; } .card-information__text-button{ font-size:var(--font-16px); padding-block:10px; } } } @media screen and (max-width:1200px){ .template-list-collections .collection-list__item{ .card-information__text-button{ font-size:var(--font-14px); } } } @media screen and (max-width:768px){ .template-list-collections .collection-list__item{ .card-information__text-button{ font-size:var(--font-12px); min-width:initial; max-width:initial; width:100%; text-align:center; } } } @media screen and (max-width:525px){ .template-list-collections .collection-list__item{ .card-information__text-button{ font-size:var(--font-10px); } } } /* Mega Menu Shop Dropdown -- retired. The category-mega__menu layout (narrow centred panel, single column of links, oversized promo) is now the default mega layout in component-menu-dropdown.css, and the per-menu width comes from the block's "Mega Menu Width" setting rather than from --mega-menu-width being applied through this class. */ .collection-list .card-wrapper img { transition: all 0.4s ease-in-out; } .collection-list .card-wrapper:hover img { transform: scale(1.08); } html { scroll-behavior: smooth; } /* Custom article Page */ .article-template .article-template__hero-container{ margin:0 !important; max-width:100%; max-height:100dvh; } /* About Hero */ .about-hero{ height:100dvh; position:relative; background: linear-gradient(360deg, hsla(340, 100%, 98%, 1) 0%, hsla(335, 100%, 96%, 1) 100%); .page-width{ display:flex; align-items:center; justify-content:center; height:100%; } } .about-hero .rich-text{ background:transparent; } .about-hero .rich-text__heading{ font-size: clamp(50px,calc(50px + (70 - 50) * ((100vw - 1024px) / (1920 - 1024))),70px); max-width:600px; margin-inline:auto; strong{ font-weight:bold; color:var(--darker-accent); } } .about-hero .button-group{ display:flex; align-items:center; flex-wrap:nowrap; margin-top:4rem; .button-our-story{ background: linear-gradient(90deg, hsla(330, 100%, 88%, 1) 0%, hsla(338, 100%, 75%, 1) 100%); color:var(--color-white); &::before{ border-color:var(--color-white); } &:hover{ background:var(--color-white); color:var(--accent-color); &::before{ border-color:var(--accent-color); } } } } .about-hero .scroll-to-container{ flex-direction:column; bottom:0; width:fit-content; gap:10px; span{ background:var(--color-white); } p{ opacity:0.8; font-size:var(--font-20px); } } .about-hero .about-tag-line{ background:var(--color-white); color:var(--darker-accent); width:fit-content; margin-inline:auto; display: flex; align-items: center; gap: 1rem; padding:5px 20px; border-radius:50px; p{ margin-block:0; font-weight:700; } } .about-hero{ .rich-text__text{ color:#333333; } } .about-hero .rich-text__text { font-size: 20px; line-height: 1.6; strong { color: var(--bold-color-text); } } @media screen and (max-width:1600px){ .about-hero .button-group{ .custom-button{ max-width:300px; font-size:var(--font-16px); } } } @media screen and (max-width:1440px){ .about-hero{ .rich-text__text{ font-size:var(--font-18px); } } .about-hero .scroll-to-container{ p{ font-size:var(--font-16px); } } } @media screen and (max-width:1024px){ .about-hero .rich-text__heading{ font-size: clamp(4.2rem,5vw,5rem); } .about-hero{ height: 100%; padding-block: 25rem 18rem; } } @media screen and (max-width:990px){ header.header{ padding-block: 5px; } .header__heading-logo{ --image-logo-height: 50px; } } @media screen and (max-width:750px){ .about-hero .button-group{ flex-direction:column; } } @media screen and (max-width:625px){ .about-hero{ padding-block: 18rem; } } .about-us__r-t-section.rich-t-wrap { mask-image: linear-gradient(var(--mask-direction, to bottom), hsl(0 0% 0% / 0), hsl(0 0% 0% / 1) 0%, hsl(0 0% 0% / 1) 90%, hsl(0 0% 0% / 0)) !important; } .about-hero.rich-t-wrap.about-us__r-t-section { mask-image: linear-gradient(var(--mask-direction, to bottom), hsl(0 0% 0% / 0), hsl(0 0% 0% / 1) 10%, hsl(0 0% 0% / 1) 100%, hsl(0 0% 0% / 0)) !important; } .slider-mobile-gutter .slider-buttons { position: inherit !important; margin-top: 30px; } @media (max-width:768px) { #scrollTopBtn { display: none; } } /* Map Style */ .banner--map .button { background:var(--gradient-bg); color:var(--color-white); &::before{ border-color:var(--color-white); } &:hover{ color:var(--accent-color); background:var(--color-white); &::before{ border-color:var(--accent-color); } } } /* --------------------------------------------------------------------------- CART PAGE -- see assets/component-cart.css, component-cart-items.css and component-totals.css Same arrangement as the drawer: the cart page's design lives in the stylesheets its own sections load, which land AFTER this file and win every tie. The rules that used to sit here were a mix of superseded and actively harmful -- `.cart__contents .cart-items td { border-top: dashed }` in particular outranked the new layout and drew a dashed line above every cell INSIDE each card. Nothing cart-page-specific belongs below this line. The loyalty-app container below is an app integration, not theme design, which is why it stays. --------------------------------------------------------------------------- */ #main-cart-footer .ll__container{ background:transparent; border:1px dashed var(--accent-color); max-width:450px; border-radius:50px; padding-inline:1.5rem; >a { text-decoration:none; color:var(--accent-color); background-image: linear-gradient(to top, var(--accent-color) 0px 0px), linear-gradient(to top, transparent 0px, transparent 0px); background-repeat: no-repeat; background-position: right bottom, right bottom; background-size: 0% .1rem, 100% .1rem; transition-property: background-size; transition-timing-function: ease; transition-duration: var(--duration-default); &:hover{ background-position: left bottom, left bottom; background-size: 100% .1rem, 100% .1rem; } } } /* .ll__rewards-button{ background: var(--gradient-bg); color: var(--color-white) !important; } .ll__point-balance { svg rect{ color:var(--accent-color); } } */ /* Shipping calculator -- see assets/section-shipping-calculator.css. The `border: .1rem dashed !important` that used to live here beat the pad treatment in that file, which is the whole reason it moved. */ @media screen and (max-width:1024px){ #main-cart-footer .ll__container{ font-size:var(--font-14px); >a { font-size:var(--font-14px); } } } @media screen and (max-width:525px){ #main-cart-footer .ll__container{ flex-direction:column; text-align:center; } } /* 404 Page Style */ .template-404 .image-with-text__content a { color: #ff93bf; font-weight: 600; text-decoration: none; &::after, &::before { background-color: var(--accent-color); } } a:hover { opacity: 0.8; } /* ...but not on anchors that wrap imagery. The blanket rule above fades EVERY anchor to 80% on hover. Product cards wrap their image in , and collection cards put the anchor on the card itself (), so pointing at either washed the photo out by 20% and let the page colour show through -- the "overlay". It also snapped, because there is no transition on opacity here. Buttons are not anchors, which is why hovering Add to cart cleared it, and touch devices never fire :hover, which is why it looked like a large-screen-only bug. Text links keep the fade. Anything wrapping media does not. */ a.card-wrapper:hover, a.card__media:hover, a.full-unstyled-link:hover, .card-wrapper a:hover, a:hover:has(img), a:hover:has(picture), a:hover:has(svg) { opacity: 1; } strong, b { color: #ff93bf; }