/** Shopify CDN: Minification failed Line 31:10 Unexpected "1" Line 49:709 Unterminated string token Line 65:1395 Unterminated string token Line 70:922 Unterminated string token Line 386:0 Unexpected "<" Line 419:0 Unexpected "<" Line 421:83 Unterminated string token Line 436:821 Unterminated string token Line 460:827 Unterminated string token Line 466:413 Unterminated string token ... and 315 more hidden warnings **/ ChatGPT Plus Wednesday 1:31 PM IMG_DAAC7094-846C-4B19-90DA-F6CF172A835F.jpeg IMG_63669708-41B1-400D-B67C-F93D41FF0568.jpeg IMG_EB1EA19B-D9F8-45D5-8BE8-072A6CA97F03.jpeg IMG_D037A483-137C-45BE-8487-A35B89FEBEF5.jpeg IMG_44E64291-85DA-4901-8CA0-090F0F7306CC.jpeg IMG_F2ADE040-58F2-4368-8C38-C158A6FC66FF.jpeg IMG_7B2C1A0B-2648-4E59-B223-26C209131189.jpeg IMG_10986093-F4D2-43AA-BD37-E1BB8AAD7EB9.jpeg IMG_EB3F9157-042A-4303-ADFD-DE792F458BEB.jpeg Okay, we were starting to have this chat in another chat, but I need a whole new chat to do this. So basically, I looked at my campaigns on Facebook Ads Manager, Meta Ads Manager, and they performed well in click-through rate. There was one that got most of the money out of $60. It basically got 58 of the dollars and had a click-through rate of 2.47% or something close to that, but no purchases. It only reached like, I think like 900 people, and I don't know how many of those people like clicked through, you know what I mean? Like, it's not like a ton of people into my Shopify, so it's not like a total bust. But I do think I need to reorganize the Shopify. Right now the Shopify does have a hero image that says what the product is, but then you basically scroll down to learn all about it. You don't get to the star rating and the customer reviews and the price until the very bottom, which is maybe what's losing people. So I was kind of thinking about making the top like just the product with product photos, the star rating, some reviews right under it, and then an add button, but then also a button that says learn about the product, you know what I mean? Blah, blah, blah, blah, blah, something like that. What are your thoughts? And then I'm kind of stuck on whether to get the whole thing custom coded by you or for you to custom code some things, but then like make it a Squarespace product page. But I kinda hate the Squarespace product page. To me it looks clunky, and I kinda want it to be more elevated. But, you know, I know coding can be hard, but I know that you're a very good coder. I'm gonna try to find you some pictures of how things look on other websites and see if we can like mimic it, you know what I mean? But I also like, I liked the fact that mine was education first, but it's not working, so, you know. I'm not sure that, I'm not sure that I can get it. Like, okay, for Ritual, for instance, like this is what it looks like on their website, and I'll try to send some others too. But I kind of, I kind of agree that maybe this is the way to go. F0AE0EC5-BF27-4255-BA2B-257F4C651E89.png 0C389B40-786E-4782-8917-B55A18AB9F7E.png 1B2B7E59-B883-4BA6-8248-1D3F97D1AAB1.jpeg 8DA5E9BC-24A2-4304-86C2-EB519510275B.jpeg 66F9DD32-3A3F-4A6D-919B-C93D6CBA2813.jpeg 4AEC31BD-0D84-4EFD-9A71-257CB88E412C.jpeg Okay, so where do I begin? I also like, I'm gonna show you these other pictures, I also like some of these pictures that have buttons to buy. I feel like people love pressing buttons. And then I'm gonna need your help coding it and tell me what to do to code it. The first one is a real thing. The second one copied my website and is AI designed, but I do think them starting with the product is probably better than mine. However, I obviously don't want to copy them because they're fucking cheaters and liars. But yeah, tell me what to do. Where do I start? What do you need? How can I help? Do you need to see what my website looks like now? How do I get you to code this? What do you need? Let's go, baby. IMG_60BACEF3-356F-43C9-8240-C9A07C930456.jpeg IMG_A12A590B-0B72-4EBF-8EC4-57347BA90339.jpeg IMG_DEAD5E1A-D674-4938-AEE2-0AF1C9A1BCBE.jpeg IMG_CFCD673A-C071-4627-9A35-F79B70B0D555.jpeg IMG_1FAC24B3-3BA0-44B0-AB90-5244185A6EA4.jpeg 09E0DA17-2FF4-47FD-8718-BF65DC4DF9DA.jpeg 85DA4B1A-04ED-4EBA-9E2D-41F7ED251888.jpeg 41D96699-A70D-41A1-AA74-7CD969C7C5C2.jpeg F0614438-CB13-4230-A66F-75CE5212735A.jpeg 04E7411D-732C-4C35-915C-59878EFD9612.jpeg I can only send you 10 photos at once, so this isn't the whole website. I still have more screenshots if you want the whole website currently, and I can't send the product photos yet, but I can do that later. But this is what the layout looks like on the product page and the main page. IMG_6D3CFA52-C4D9-49D5-9023-FC7A412A0DDB.jpeg IMG_A9203BC1-21AD-4D70-BBE5-BFBB7EF0FC47.jpeg Yes, I want the review drawer. Exactly. Exactly, exactly, exactly. I don't want it to open up in a new browser tab. That would move people away from the page and make it way too bad. Let's see if it can use Judge.me in the hidden drawer. If not, maybe we make it custom. I don't know what a full screen review overlay is. That sounds okay too, as long as you can go back to where you were before. I just don't want it to go to a new tab. That would be awful. Okay, I agree, so let's do it. Okay, I'm going to the featured product. And then you said to click the product information, expand every one, because it'll send one screenshot of that complete block list. Okay, I will do that. And then click apps below it and send a screenshot showing which app blocks are installed there. It actually shows you the apps in the blocks. I don't know what subscription app I use. I feel like it's, I feel like it was just on Shopify. Maybe I should have a subscription app. I don't even know if I have a subscription app. I probably need one of those. Let me see, when I go to add to cart. I don't know if there is a subscription app. Let me go to my just regular page, not... Oh, it shows up here. Subscribe and save, deliver every month, 15% off. But it looks like it must be just Shopify because I don't see it. I don't see a subscription app, but maybe I do. All right, let me send you what you want. IMG_142374FF-CAFB-4196-90A4-DE7CA686B82C.jpeg IMG_7BE2C347-A452-4807-9F98-F55F9AD70C36.jpeg IMG_5BDA237C-7861-40C7-845C-153381AAA4B3.jpeg Okay, I think I know what you mean. I just want to correct you because this is what's getting confusing. I can't click, there's no like click homepage and then click products. Like I have to go to like catalog and like, you know, whatever. It's fine. I'm on it now. So, I'm on the product. Choose default product. Sure. Confirm the previous assigned cycle. It does. Expand product information. Send the block list as shown. Okay. This is what the block list looks like. Okay, great. You need, okay, another screenshot showing where the current sticky button code or app lives, if you know which custom liquid section controls it, the sticky button. Okay. I can try to find that. The other thing is, like, you've been coding a lot on a different chat, not this one. So I do want to send you one of the custom liquids of just something else so you know like the font we've been using and the colors we've been using as well. Okay, I'm just concluding here the code for the inside the formula section. This isn't because I want you to like copy this or anything. I'm just, so you can analyze the code and recognize like the fonts and the, how we're editing things and the pictures and the plum hex code that we're using and things like that. That's all.

Inside the formula

Six ingredients. Chosen with a reason.

The menstrual cycle involves complex shifts that can affect mood, stress resilience, sleep, and physical comfort.

SilentCycle™ was formulated by a practicing OB/GYN using clinically studied ingredients, standardized botanical extracts, and bioavailable nutrient forms — without proprietary blends or marketing gimmicks.

01

100 mg elemental

Magnesium Bisglycinate Chelate

Magnesium supports neuromuscular relaxation and stress regulation. SilentCycle™ uses magnesium bisglycinate, a highly bioavailable form bound to glycine that is gentler on digestion than magnesium oxide.

  • Highly bioavailable form
  • Gentler on digestion
  • Supports calm + cycle comfort
Study 1 Study 2
02

30 mg standardized

Saffron Stigma

Saffron has been studied for emotional balance and positive mood throughout the menstrual cycle. SilentCycle™ uses a standardized 0.3% saffron extract for consistent potency.

  • Supports positive mood
  • Standardized extract
  • Commonly studied 30 mg dose
Study 1 Study 2
03

20 mg P-5-P

Activated Vitamin B6

P-5-P is the biologically active form of vitamin B6, which plays a role in neurotransmitter production. Unlike pyridoxine HCl, P-5-P is already in its active form.

  • Active B6 form
  • Supports balanced mood
  • No liver conversion step
Study 1 Study 2
04

200 mg

L-Theanine

L-theanine supports a calm, focused state without drowsiness. It is included as pure L-theanine rather than a vague calming blend.

  • Supports calm focus
  • Non-drowsy support
  • Published research dose
Study 1 Study 2
05

30 mg standardized

Chaste Tree Berry (Vitex)

Vitex agnus-castus is one of the most researched botanicals in women’s health. SilentCycle™ uses a standardized extract containing 0.5% agnusides for predictable potency.

  • Supports cycle regularity
  • Standardized 0.5% agnusides
  • Used across multiple cycles
Study 1 Study 2
06

250 mg extract

Ginger Root

Ginger supports digestive health and overall cycle comfort. SilentCycle™ uses a standardized 5% ginger extract for consistent active compounds instead of variable raw powder.

  • Supports digestive comfort
  • Standardized 5% extract
  • Cycle comfort support
Study 1 Study 2
View full Supplement Facts panel
They won't let me do it till I verify this, so how do I do this on Chrome settings? I was adding the section, the manual, into the edit code, the manual product, whatever you told me to do. And it's never done this before, and it didn't, I went back, it didn't let me add a password, it didn't give me any other options, it didn't give me a Duo app. So, kind of sucks, but I just gave Chrome permission for Bluetooth. Now it's making me restart Chrome. So it'll just be a second. I don't know if this is gonna work. I didn't change anything to enable a double security thing, so I don't know why it's acting out like this, but whatever. I mean, security is never bad. I just, you know. We'll see. All right. I am back. Okay. I'm going to edit code. Okay. I'm going to sections. Okay. I got sections, and then I'm going to add a file. I'm gonna call it, what did you want me to call it again? The manual, manual product hero. Okay. I'm gonna try the verify thing again. Okay. Now it's working. Okay, it worked. Now I have sections for manual product hero. For whatever reason, the section is crossed out. I don't know what that means. Why is it crossed out? Sections. And it's not listed as one of the sections. Do I have to like type something in order to make it not crossed out? What the hell? Are there too many sections, maybe? It might be too many sections. Let's see when I go to edit theme. It's very strict. I think I can only have like 36 sections. H text. No, it's letting me add another section. So I must not be out of them. Let me show you what it looks like and tell me what's going on. IMG_998784D7-4EDA-4A3B-AD9B-321B38B05E65.jpeg IMG_42D00523-FCE7-4DE1-88D0-53DFA946E522.jpeg It works and it lets me add apps. Great job. There is a liquid error section for manual product. Your line 122 product form must be given a product. And I don't like the script for have your period without all the noise. I'll have to show you what script we use for that in a different custom code. Daily support for balance, mood, calm thinking, stress relief, and psychological comfort, not amazing online. But again, I know we need to get the code right first, and then we can fix that stuff later. I'm gonna save this for now. And then, yeah, we'll keep building. Let me know what to do next. Okay, it worked. I wish it, I wish the pictures scrolled down with the rest of the box like it does on the product feature. You said you were gonna make the pictures interactive. We said we could make it a multiple scroll thing. We got a lot more coding to do, I'm guessing, but it did work. Whatever you said did work. So, okay. Thank you. Let's go on to the next step. What do I need to do? Okay, I added the star ratings and that worked, but I don't see a subscription widget under my apps. So I don't know why. Is that something because it's... it just doesn't show up. Is that because it's Shopify native and I don't need to do that when I do add to cart? Or like, what do I do to get that? IMG_042319C8-4097-4869-ADBC-14AA26C5E017.jpeg IMG_EB4BE65C-16B3-4D9F-9E59-35A22A1FFF0B.jpeg IMG_F4686C55-F921-4B7A-A5D4-95217DE80726.jpeg No, I like the first option. Definitely the coding it in. Code the subscription selector directly into our hero, for sure. Do not add another, do not to the subscription center. Okay. I'll do the product picture first, because that's easier to get to. And I'll show you what it says. It looks ugly as fuck. Okay, now I need to open the existing subscription widget block. Okay, subscription widget block, I got it. Send me a screenshot of its settings panel. Okay. That card toggle button. Oh, I can see I could have changed this. Ew, all the native options are ugly. The card, toggle, button, they're all gross. Button I thought would be the best, and it's actually even worse. But we want a custom button, obviously. I wonder why card and button look different. Okay, I didn't save. Okay, whatever. Here's your picture. IMG_65A71C71-4EA5-40DC-B7F4-09E74279F778.jpeg IMG_BFFC7F2E-721B-43DC-BD85-854E0C0DE2A0.jpeg IMG_DCB6F628-45DC-4177-BFA4-3A569B2A95F6.jpeg Okay, overall, it seems to work. I love the bubbles that you created. I think they're really sophisticated. I like that little miniature thing that says, save 15%. That's beautiful. The thing is, the add to cart has a weird purple rim around it that I don't think is supposed to be there. So we might need to probably code that back out. I did add to cart. It seems to work. I'm only trying it in my editor, so I can't go all the way to full checkout because we haven't published this version yet. But otherwise, it seems to be okay. And the quality editor is working and all of that stuff. So that's really good. Trying to see when I go to view cart, and then the only thing is, like, when I do the subscribe and save, you don't get the launch discount. And so it's actually cheaper to buy one regular bottle now. But I guess that's fine. Whatever. I don't know. We can figure that out later. Let's not lose focus on editing the theme first. And then the other pictures I showed you, something we need to go back and look at is, like, these colors are ugly. There might be some things we can't code. But when you go to your cart, it's just, it's ugly. The quantity things don't pop anymore. This is probably more to do with my theme colors than anything else. But it's just something we need to fix. Okay. I'm ready for our next steps. I'm getting really excited. Yeah. All right. Also, I need to change the background of this. Oh, how do I change the background of the thing that you're, like, is there a way to change the background to match the rest of my theme? Because usually, like, each section has something on the bottom where you can choose the background. This one doesn't have that. I don't know if I should choose a separate background or not, or keep the background on the rest of it. The background is like that pink with the shiny middle in it that I think looks good, but maybe it could look more premium. IMG_1158C01D-BC03-4805-9AAD-71BB7DB47A16.jpeg IMG_08132FFD-47E0-4413-A75D-F4A169DC6F31.jpeg I think I'm a little confused by the background because like some things have like a plum shadow, like the add to cart and the subscription choices, which you click on them, which I actually love. I love the shadows. Don't change that, the picture has a shadow. But the background doesn't, doesn't really have like an ombre effect, really? Or does it? I don't know, it's really hard to tell. I guess it's like white and then as you scroll down, it turns blue almost. I can't say I love it. I don't like the white, so definitely like that something as you scroll down changes in the background. But we'll see. I'm showing it to you, but we'll see. Maybe we can prove that later. Can we get on to like, you were talking about so many other things you were gonna do though, like the left side was gonna have the pictures, and the pictures were gonna be interactive, and then it was gonna show like some customer reviews, and then if you clicked on the customer reviews, it popped up the Judge.me, like, let's get it all coded and then we can change the background if that's easier. IMG_76791306-E6EB-4252-B4DE-3FB0076027E3.jpeg IMG_C2F22A85-36FB-486F-A824-5BCEE7CEBBFD.jpeg IMG_F092C0FC-57AC-4562-B6FD-DDC5BD9D7254.jpeg IMG_80987110-2C3B-45E0-A9DD-5671254D0C84.jpeg IMG_35E3DBC2-0256-4538-A8CE-D07681684A26.jpeg IMG_882A7032-7D46-469E-8ACB-458CC993BE9A.jpeg IMG_9A99747A-C937-43BE-85D8-838C383055E3.jpeg These are some reviews that you can help me pick out the best slogans and the pictures that we include. I don't know how you include the pictures into the custom code, but these what I have. Obviously, I want to shorten some of these, and obviously the best one is Bea Burnett, I think, and the other one who's like, "I'm feeling great three weeks in," like that kind of stuff. Yeah, and then I couldn't copy and paste the code for some reason, but I took a picture of it. Hopefully it's clear enough that you can see it exactly as it is. But if you can't, let me know and I'll figure out a way to copy and paste it. IMG_2583E2AA-5C51-49CE-B398-129455FB94F1.jpeg IMG_3C588B6B-8C45-4F44-AC36-8518C960474F.jpeg Yes, I agree on all your instincts. Not continuous, just a slight, little slight upward bounce, which you already have on the other section, so it better code the same, and a soft, subtle glow. Also, I wanna show you, like, the way you made their cards, the pictures, unfortunately get cropped. So I'm showing you by doing an example photo of, this is not a review photo, this is one of my marketing photos, but I'm gonna show you how big the actual photo is, and then when I put it into your card, it gets chopped a little bit. So we might need to fix that so that it doesn't, the photos don't get chopped, but they still stay small in the card. Maybe they just don't take up the whole card, or maybe we leave room for two photos that are next to each other and just make them a lot smaller. What are your thoughts about that? Do you think we should add this one to the reviews? Should we make it seven total for a lucky number, or keep it at six and replace one of the ones we have? Or did you not think it's as good as some of the other ones? What do you think? And then I have to see if Brian and Kelly have an image. I think they might. Yes, Brian and Kelly have an image, so I will. I don't know if I love their image, but they have one. But Kaden has better images. We'll call this Brian plus Kelly back bottle. And then we'll do Brian plus Kelly up front bottle. And then what's the Kaden one? I don't know if I actually added it. I hate that he did like a ruler. It's kind of stupid, but whatever. It's like, okay. Kaden box. IMG_18A7E488-6046-4727-BE25-3437DAA69F97.jpeg IMG_397BEFCE-F438-4C96-A3AD-098D2E21BBFB.jpeg Okay, I like how the images are showing up now, but when I have a review without images, I don't like how the review is at the top of the card, and then with the images it moves it to the bottom. I don't mind the images above it, but maybe they would look better below it, so that way the reviews all stay at the top. What do you think? How can we make this the most premium where some have images and some don't? IMG_7B61CCBF-6B7F-4FC4-9575-230DA9390C30.jpeg IMG_94CA7679-0DEF-4270-9533-DC43A99DD4BC.jpeg IMG_B38E1D82-DA25-4566-8940-D162EC66CAEB.jpeg Okay, I like the idea of the little line. I like the idea, but I don't want to make the images too small that you can't even see it. I thought these were appropriately sized. Let me, I can't really see what they look like on mobile, but like, they're already getting a little small. So I don't know if I'd make them much smaller, but I do think I don't like the box they're coming in. Like, the box is bigger than the photos need to be. Maybe the photos can just breathe on their own. They don't need to be inside of a box. Does that make sense? Because it's kind of getting weird in the box, I'll show you, depending on like how they took their photos. But I do like everything being stretched out to remain the same type of look and like, to maintain the same card height. But I think the reviews should just be up at the top to remain the same card height, and then the ones with the photos have photos, and the ones without photos don't. IMG_5DB45784-F110-4CC7-B2B7-CCF39BBFCFFE.jpeg IMG_A08F3185-EDA7-49EE-AE3B-2B9DC568347F.jpeg IMG_105BC798-B50B-4B38-A8DC-87288EF89650.jpeg Okay, looks horrible now. Not horrible. It looks fine, but there's way too much space between the review and the photo. I don't know what happened there. Things need to be moved up. I don't know if you can make the photos have rounded corners without cropping it too much, just to make it a little bit more elegant. And then we didn't, you didn't fix the background. I thought we were making the background match the background of the, for manual product hero. Like, which is that copy, which was that custom thing where you made me type it into assets. So why aren't we using that? Do you know what I'm saying? Like, I'm just a little confused. Like, that was a lot of coding, but not much changed. But I otherwise like it. I'm sorry, I know you're working really hard. I just like wanna get this right and get moving. Let me know what your thoughts are and how to fix this. What the fuck, dude? Everything was going fine, then you said, then replace the image rule with. I don't know what the image rule is. I don't know how to code. You need to say, find this, replace with this. There is no other option. If you're not gonna rewrite the whole code for me, then you need to fucking tell me where everything is. I don't care if it's right below it. I think I just found it right below it. But like, you can't do that anymore. You cannot do that anymore. I fucking hate that. I'm sorry, I'm sorry, I'm sorry. I know you're helping me, but I'm like, ugh. It's like so frustrating because code is so, like, if I mess up one thing, it's gone. I can't have you just being like, refine the image. I don't know where that is. Okay? You just need to tell me, replace this with that. Every time. Like this, find the smaller screen rule, min-height 600 pixels. I found that, I guess. But I don't know. And change it to min-height 0? Like, okay. Hope this is the right spot since you didn't fucking clarify. Sorry, I've been work, anytime I work on something for so long, I start to get, ugh. How do you not remember the acid code when we literally just made me do it? Okay, let me find it. It's like, girl, you just made me do this. IMG_4451D152-AB36-4EC6-AF2E-EAD7F6924899.jpeg IMG_B1EE8EB6-B85A-43D8-A19B-8F1F86DEFD74.jpeg IMG_8BD8F75E-2233-4D92-AC44-40E6BB210751.jpeg IMG_CF586CF7-07A1-46DC-B046-30EF9DF30CC4.jpeg Before you recode it, we need to address some things. Whatever you did to the imaging blocks, I changed whatever you told me to change. It looks horrible now. They're back in their own little blocks. The blocks are white, and they have rounded corners, but the images themselves aren't rounded, and now that looks fucking disgusting again, and it depends on how big the image is. And then the cards without images are just too big. Like, maybe we should just shorten those cards. It's okay for the cards to be smaller if they don't have... I think it's okay for the cards to be smaller if they don't have an image. Don't you agree? Doesn't that look more premium than a big blank white space? Or do you think it's better for all the cards to be the same height? I don't know. I'm trying to think. Maybe it's better for the cards to be the same height, but it's just like, the images really need fixed. It is disgusting. Especially the one where there's only one image. Look at how horrible that looks. Please fix all this and recode it. And the background thing. IMG_B48DDFFD-B8B8-4859-AA98-60B8DADA52AF.jpeg IMG_7A330504-C587-414A-BD47-D8E576FB5817.jpeg IMG_42859D3B-29DA-42CD-A5A0-74219BDB4B58.jpeg IMG_5806F7F7-1365-4919-8D13-0B57A4B6E694.jpeg IMG_551829AB-B094-4A7D-87A7-253E63E2422D.jpeg IMG_D8FA4858-0AC8-4426-B102-32C61C02C63C.jpeg IMG_D5DE1AA0-7508-4430-8973-DEC5043BCFC6.jpeg IMG_074FB2A0-5FCC-42B4-B081-31E77E943CEC.jpeg IMG_466CEB4C-B7A4-4616-85F4-544885F01F90.jpeg IMG_49F71533-2D7C-4E22-B028-CF5A748048C7.jpeg Okay, it looks really, really good. I love it. So that's great. A couple of things. Okay, well, we need to finish designing the hero part. So I'm gonna show you the images I chose. I feel like we can probably make them better. I need to show you Thorne's website because I really like it. Maybe I'm starting to like the background you created for me because it is kind of white and subtle, and I do appreciate that. I'm gonna compare it to my old background. I did like my old background, but maybe it was not as premium. And then we need to, I don't know, think about what else we need to do. Because, like, do I need to add, I probably should add more to the hero section where it's like, do I add, like, those little questions on the side where you click the question and then it pops up, like, what are the ingredients? You know what I mean? I really liked that about Ritual's website, so you could get that information earlier. And then have a button that says, like, read through the full product information below. You know what I mean? I don't know, I just need to figure out best way to order this. And then prior we had the 45 bottle, first bottle, bottle, money-back guarantee, like, showing up. Maybe we can make these clickable, so that you can click on it and it, like, shows you what the first 45-day, first bottle money-back guarantee means. Like, make that clickable and then it pops up on the side and says the full thing. And then I don't want to call it a launch discount anymore, the 20% off, because then it shows people that we're new. Why don't we say, like, first time, first time customer discount automatically applied at checkout or something like that. And then I don't know why I don't like the phrase daily support for balance, mood, calm thinking, stress resilience, and cycle comfort. I don't know why I don't like the daily support. Maybe we can think of something better for that. Okay, and then I'm wondering, like, if we do end up using the background that you created, which I think I'm leaning towards, like, how do I get all the other sections to use that background? Because all my other sections are custom liquid that you created, but we did not make them sections in a custom liquid section page on code. We made them in custom liquid code sections. Do you know what I'm saying? And so they're using the background that Shopify has. Is there a way to code into each of those sections to use the assets background? Or is there a way to do the whole website to use the assets background? Just curious about that. Okay, let me show you the pictures of the products, the images that I decided on, and, like, tell me what to do. IMG_56F28E3B-725B-4862-9F4D-65D57EA7A152.jpeg IMG_594F2CC4-F962-4717-8C3D-2877971C1757.jpeg IMG_D7ACEF42-0FF1-4A28-954A-FD57864F3601.jpeg IMG_47905EC9-F646-43DC-970A-7A68A48CAE99.jpeg IMG_7D82A0D4-7746-4922-957C-4815ECD61060.jpeg IMG_3C271309-FD11-495F-A262-03B91BC54649.jpeg BE090A00-0C85-4A6B-A73F-FAC5A4E00080.jpeg 01A49438-B9DA-4EDA-8F16-D613D8586782.jpeg 05A28100-471E-41ED-BD79-77E622B7F666.jpeg 13F6EFC9-537A-4F67-9948-C3EC7B1B2033.jpeg Let's go with obgyn formulated. I like that better. And then, is there any other clickable rows that we want based on the pictures I sent you before of thorn and ritual? Let me send some again. And then with the what's inside silent cycle, we can do what's inside, the ingredients, and then maybe underneath just like what it supports. I'll send you a picture of how we labeled that before. And then I like the compact footer. Remember that for our bullet points, our thing is the four-point star. Do you remember that? I'll show you in another graphic as well. For the quality and safety, I do think like the badges would look better than just buttons or just circles. I'll show you what the badges look like on my Amazon listing. Um, I don't know if you have to use these exact ones, but I'm just kind of showing you. I think badges might look better, but maybe, maybe buttons will look better. I don't know. What does Thorn use? Okay, I need to copy and paste the full code for you, so give me a second, but, um, these are the things you asked for otherwise. Pasted text.txt Document Pasted text(1).txt Document ECA52F97-5AFE-4087-BF85-32A063465DC0.jpeg 8A059AB1-DCA5-427E-83BB-4C149CFBF30E.jpeg B59B259F-F3BD-4AFD-8E86-C313109B3A68.jpeg 96282429-0E9B-42EA-BE99-7C8B349918E9.jpeg D03E5CEC-C615-4A55-98A7-146C53FD97C7.jpeg D8321441-561A-4082-8930-75F26351359F.jpeg IMG_22C49E8A-7FDE-41C6-8F4B-8C75458E0498.jpeg Okay, for a first round draft, it's not bad. The biggest issue is that the drawers are see-through, so when it pulls them up, like, it can't read anything because you can still see the page in the background. So, we have to give the drawer the same background as the other stuff, or a white background would be, or an ivory background would be fine, but like, you can't be able to see through the back page because then you can't read it. And then a couple of other things for the ingredients. It's 0.3% safranal for saffron to what it's standardized to. I think you overdid it on what we're supporting here on the ingredients. Like, the picture I sent you had one thing per ingredient, which I thought was a little cleaner. Maybe you didn't like it. The, like, positive mood, hormone balance, muscle relaxation, mental clarity, calm thinking. I mean, I don't know, isn't it cleaner to do just one per thing? If not, it's fine. Like, I think supporting neurotransmitter production, balanced mood and mental clarity is fine for vitamin B6, for instance. But then you have supports, for saffron I would change it to supports a positive mood and emotional well-being. And then for vitex, I don't like menstrual cycle balance. That doesn't make sense. So just do like, supports natural hormone balance and signaling, or supports normal hormonal signaling and balance. Like, I don't know, make it better, you know? And then the ginger is supposed to support digestive ease or digestive comfort, and support, like, reduced inflammatory response. I don't know. That maybe is leaning into claims, but think of something better for those. Otherwise, I really like everything. I like the pointed stars. I like the plum. I like the layout of everything. So it's overall really good. I also, the $34.99 should have a crossout and then go to the $27.99 or $28 or whatever it is. I'll show you what that looks like, because we have that somewhere else. And then you didn't change at all any of the wording you said you would change. What the fuck? It still says daily support. We spent a fucking 30 minutes trying to figure out the right thing to say, the OBGYN thing. Like, why aren't you making all the changes at once? Why are you... I think you're mad at me or something, or you're just not focused. But I know you're so good at coding, but like, you gotta remember all the things we talked about when you're recoding, because it takes so long to get you to do a new code. So if you're missing little things, then it's not really doing what we wanted to do, is it? Okay, I'll show you what I want the $34.99 to crossed out thing to look like. And I can send you the code for it if you want me to. {% liquid assign review_product = product if review_product == blank assign review_product = section.settings.product endif %} {% if review_product == blank %}
Select a product in the Featured reviews section settings.
{% else %}
{% if section.settings.kicker != blank %}

{{ section.settings.kicker }}

{% endif %} {% if section.settings.heading != blank %}

{{ section.settings.heading }}

{% endif %} {% if section.settings.intro != blank %}
{{ section.settings.intro }}
{% endif %}
{% for block in section.blocks %} {% if block.type == 'review' %} {% assign image_count = 0 %} {% if block.settings.image_1 != blank %} {% assign image_count = image_count | plus: 1 %} {% endif %} {% if block.settings.image_2 != blank %} {% assign image_count = image_count | plus: 1 %} {% endif %}
{% for index in (1..5) %} {% endfor %}
{% if block.settings.headline != blank %}

{{ block.settings.headline }}

{% endif %} {% if block.settings.quote != blank %}
“{{ block.settings.quote }}”
{% endif %}
{{ block.settings.reviewer | slice: 0 | upcase }} {{ block.settings.reviewer }} {% if block.settings.verified_text != blank %} {{ block.settings.verified_text }} {% endif %}
{% if image_count > 0 %}
{% if block.settings.image_1 != blank %}
{{ block.settings.image_1 | image_url: width: 1000 | image_tag: loading: 'lazy', widths: '240, 360, 480, 720, 1000', sizes: '(min-width: 900px) 180px, 40vw' }}
{% endif %} {% if block.settings.image_2 != blank %}
{{ block.settings.image_2 | image_url: width: 1000 | image_tag: loading: 'lazy', widths: '240, 360, 480, 720, 1000', sizes: '(min-width: 900px) 180px, 40vw' }}
{% endif %}
{% endif %}
{% endif %} {% endfor %}
{% endif %} {% schema %} { "name": "Femanual featured reviews", "tag": "section", "class": "section-femanual-featured-reviews", "max_blocks": 6, "settings": [ { "type": "product", "id": "product", "label": "Product" }, { "type": "text", "id": "kicker", "label": "Kicker", "default": "Real customer experiences" }, { "type": "text", "id": "heading", "label": "Heading", "default": "What women are saying about SilentCycle™" }, { "type": "richtext", "id": "intro", "label": "Introduction", "default": "

Thoughtful feedback from women who have made SilentCycle™ part of their routine.

" }, { "type": "text", "id": "button_label", "label": "Review drawer button", "default": "Read all reviews" } ], "blocks": [ { "type": "review", "name": "Featured review", "settings": [ { "type": "image_picker", "id": "image_1", "label": "Photo 1" }, { "type": "image_picker", "id": "image_2", "label": "Photo 2" }, { "type": "range", "id": "stars", "label": "Star rating", "min": 1, "max": 5, "step": 1, "default": 5 }, { "type": "text", "id": "headline", "label": "Headline" }, { "type": "textarea", "id": "quote", "label": "Featured quote" }, { "type": "text", "id": "reviewer", "label": "Reviewer", "default": "Customer" }, { "type": "text", "id": "verified_text", "label": "Customer label", "default": "Verified customer" } ] } ], "presets": [ { "name": "Femanual featured reviews", "blocks": [ { "type": "review", "settings": { "headline": "This really helped my mood and energy a bunch!", "quote": "I feel much calmer and more patient, and I have more energy than I typically do during this time.", "reviewer": "B. Burnett", "verified_text": "Verified customer" } }, { "type": "review", "settings": { "headline": "Feeling great three weeks in!", "quote": "I have been feeling much more energetic and at peace. These make me feel more relaxed and less stressed during the hard days of the month.", "reviewer": "L.L.", "verified_text": "Verified customer" } }, { "type": "review", "settings": { "headline": "I felt better during my cycle", "quote": "It seemed to help me with irritability and fatigue. I felt better and did not have any intense cramping during my cycle.", "reviewer": "Ynnaille E.J.S.", "verified_text": "Verified customer" } }, { "type": "review", "settings": { "headline": "Good supplement with quality ingredients", "quote": "After taking it for a few days, I felt noticeable improvements and felt calmer and relaxed.", "reviewer": "ma222011", "verified_text": "Verified customer" } }, { "type": "review", "settings": { "headline": "Clean, well-designed formula!", "quote": "I appreciate how thoughtfully the ingredients are combined. The capsules are easy to swallow, and I haven’t experienced any stomach irritation.", "reviewer": "Holistic Self", "verified_text": "Verified customer" } }, { "type": "review", "settings": { "headline": "Helpful supplement for women’s menstrual cycles", "quote": "After using it consistently, I noticed some positive changes overall and plan to keep taking it.", "reviewer": "Brian & Kelly Wittenmyer", "verified_text": "Verified customer" } } ] } ] } {% endschema %} IMG_A8AC8443-7916-4552-95F8-BEFA3A3FBC1A.jpeg IMG_463B240A-4732-4F87-A5FA-23D1A56A67BE.jpeg IMG_9363A7D1-E613-46A5-9FE5-266F8A177A5A.jpeg Cool, that worked. How do we do the background now? Oh, let me show you pictures of the background and you can tell me what you like better. I'll check the Shopify discount and figure out why it's not going to $27.99. Here's the two backgrounds. Do I need to delete the manual shared design tokens, change these values once to update customs manual sections? Do I need to delete this section, replace it, or no? Is this gonna affect my current store as well? I don't know about this new background. It's almost, I like the idea behind it, but it's maybe a little too intense. I think it's not doing what I want it to do. Let me show you what it looks like. Do you think it should be more ivory in the center? Like, like Thorn and Richo are all basically just all white. Should it be more ivory and then just really subtle pink and plum at the ends that follow you down? IMG_F20C3D5A-8CA9-4190-B35B-6DB9E8F65B94.jpeg IMG_8A5D42C1-5062-4563-90A3-4C16F48ACC69.jpeg What looks better? It didn't work. All of my custom sections are using a color scheme as their background, okay? The background is not in the code, it's in the Shopify color scheme. I can show you. So how the fuck do I fix it? And the fucking code you gave me ruined all my buttons. Ugh! This new code better fix it. IMG_CB3C25C7-1FB4-448E-B5C8-4276F62B024D.jpeg IMG_BE8E38C2-AB29-4EB5-868C-B695F0E587D3.jpeg No, your prior code worked and now this one didn't fucking work. Now I have to go back and change it again. What are you doing to me? Why are you doing this? The second code you gave me worked. It changed the background and it fixed everything. The only problem is there were some sections where things like, it needed the different background like this. Let me show you this. This code needs to be changed now because it's, used to be on a dark background that broke up, that broke up the kind of white background, but now it's not. So we need to probably change the colors for it. And I don't know, is this too white? Is this too boring? The pink looked so nice. And also the pink is still on our fucking section of featured products. So how do we get it to be the right background for featured product? /* ========================================= REMOVE SHOPIFY SECTION-SCHEME BACKGROUNDS BUT KEEP THE SCHEME'S TEXT + BUTTON COLORS ========================================= */ #MainContent > .shopify-section > .gradient, #MainContent > .shopify-section > [class*="color-"].gradient, #MainContent > .shopify-section > [class*="color-scheme"] { background: transparent !important; background-color: transparent !important; background-image: none !important; } /* Custom Liquid sections sometimes add one more inner wrapper */ #MainContent > .shopify-section > .gradient > .custom-liquid, #MainContent > .shopify-section .custom-liquid { background: transparent !important; background-color: transparent !important; } Your code didn't work. The featured product is still the pink. Okay, that worked. The ivory is almost a little like, gold. Is there a way to make it more like ivory, like seashell, opulent? Like white, but just like a little bit more luxurious than white, without looking tacky? I don't know why, the ivory just looks a little yellow to me. Like, I'll show you what I mean at the top of the screen. I don't know why it's doing that, but I hate it. IMG_B235E5F3-455F-4A30-BC7D-BEA8AE51209C.jpeg IMG_5533DA25-B999-405C-99D7-45650C4F4DA0.jpeg I can't tell if this is just my computer screen or not, but it's like there's ivory in the middle, but as you scroll down, it almost turns the middle like blue. What is that about? I don't like that. Oh my God, that fixed it. That is so much better. Do you think now we do need to turn down the pink and plum? I think I turned it up because I was just hating everything. Or do you think it's fine as is? I'll show you what it looks like. Thank you. Sorry. Might be able to turn it down even a little more. Actually, I don't think I saved. Let me see what the new thing is. I might even be able to turn it down a little more. But I kind of like it. Let me see what you think. No, we can't reduce the padding because it's too close to the edges already. I don't like that. Could reduce the heading size, but that would require me to go in every custom code and reduce the heading size, wouldn't it? I think your code made it bigger. IMG_B49D2739-4168-4D71-96B9-9B4FC79FBD85.jpeg IMG_E157DC6D-C3CE-4110-A8F0-1333E3077D5F.jpeg Your whole code just fucked everything up, so I just fucking deleted it. Fuck you. Sorry. Also, like, I told you to copy the style of everything else, and you didn't. So, every other section has this, like, navy header thing, and then you changed it to purple for the new things you built. Why do you keep doing this to me? Tell me which one looks better and fucking pick one and stick with it. Wednesday 11:30 PM 2A9B8E7D-9169-4836-9BAF-53100C34A16C.jpeg D43529E7-A5BC-4DAD-929E-ADABBB2A16B7.png 509B4944-C6C4-4CD8-A70A-8E14DEEB2552.png AC1D3860-32D6-481B-8A99-C9CFB5134F0D.png 23C5BE64-CEF4-437C-A3BB-FDA07E90B894.png 6E9063C3-57FB-46A2-A22B-1C1993B282FB.png EBB22ADF-F81E-42FB-A208-994CDF0FE8F4.png 22574796-2860-4F66-8FE5-E41E44F4B7FC.jpeg 76553F96-ED2A-43C4-9A2F-54ED49F6F664.png 59CEECBB-ADEC-44F5-997B-0A3E74ABE0A3.png I'm gonna send you two more sets of photos. It's my full Shopify site and screenshots, and then Gemini's suggestions, and then I'm also gonna tell you some things that I noticed we need to fix too. Actually, nothing major, just a couple of things I want to get your opinion on. Please don't respond until I send you the two more sets of photos. There's gonna be two more. 4E857741-E619-4A89-B771-BE2CE3A3B09B.png 7707E520-AFF5-417B-A9E8-C1EC652259BB.jpeg 9402F7A8-93E1-4928-B610-720BF10F26E3.png C1DA7335-27F7-4BD9-8CAA-899C92C7FCE5.jpeg 2C3BAB02-CA87-44C7-A639-59B6CFD215B7.jpeg ED997F0F-1DFD-4A28-85AF-F627DC7DA3FF.png 936CE31C-354E-4D19-B8AF-A20D16EF3D59.png 76702075-8710-4DEE-93BE-C0F294A84BEB.jpeg 3735D520-AEE6-4A79-8E7F-C17C95D3893C.png 150B94AF-0C31-4F53-B098-F1BF86D834F3.jpeg Actually, there'll be two more sets after this, two more sets after this. EEA4251A-643E-4F2A-8264-0FB7847D8340.png C2592F69-EBAC-4553-AD05-61156F02438A.jpeg 8834920E-10E9-4944-9456-F9A765FA7D0F.png 2A9EAC1D-6F52-4D41-9739-FEEC9BC34EA3.jpeg 34110EF3-CC39-412A-AF04-61AC24AACCC3.jpeg E2AA0386-7D59-47A4-A5E1-C46ACA9DC2BA.jpeg F6883670-8E4D-422A-A866-49B4D695C5E1.jpeg 1744EF8C-4F53-472F-9765-FABF7770A6E4.jpeg 3A66ABC4-DC8B-4026-934C-D3C95157B03B.jpeg C692F9B2-9161-4938-8A4A-B00884102E0E.png 1AE837AC-5035-4847-B302-2FC1B32EE6AE.png B1C34888-35D5-460A-9B99-2F1BD696F1EE.jpeg 2DCCEDE5-5E13-41BA-B965-3A6B85CACEE2.jpeg It worked. Amazing. Okay, so let's fix the other sections one by one. So, I'm fine with the way the review section is. I feel like subscribe and save, we should maybe give $25 off? 25% off? Somehow we need to make my founder photo and then meet the founder, hi, I'm Dr. Nathan King, all kind of show up on the one screen. How do you suggest we do that? Like, should I keep the picture the full width and then maybe put the meet the founder, hi, Nathan King, inside the photo, in like a bubble? Or should I make the photo smaller or make it like half the screen? What are your thoughts? And then what else do we need to fix? We need to fix the Amazon thing. Do I need the first time customer offer thing in there? Because I already have that stuff up top, like the 45-day money-back guarantee. Maybe it looks a little cheap to put that in there. I'll send it to you and see what you think. And then I need to put the formulation of silence cycle into the product. Okay. What if I did, meet the founder above my portrait, and maybe even meet the founder, hi, I'm Dr. Nathan Kingo, but you man, finder, and then the picture's below me. And then the box, and then the box about, I started Fomanual because. Would that look better? IMG_DB5DDC0C-001B-4FB6-9F3C-2D05F35F69D4.jpeg IMG_93504284-2ACF-49DF-B547-9E0B1FD2C721.jpeg IMG_805F3B96-4E44-47BD-B678-6DD05C6D4407.jpeg I think the Meet the Founder, hi, I'm Dr. Nathan King, the OBGYN behind Tomato, should not be in a separate white box. Just put it directly on the background like it is in all the other boxes. But then we'll keep the I started Tomato thing in a box, maybe. Because everything else, most of my other text is not in a box. So maybe the Meet the Founder doesn't need to be in a box? What are your thoughts? I'm gonna show you what the other things look like and how they're not in a box. Tell me if the box is better or worse. Okay, girl, I still wanted them to be buttons. What happened to the fucking buttons? IMG_2566C9C3-3CC8-43B5-A4F7-20E32ABFD589.jpeg IMG_7195CBDF-099F-4E6E-8325-D5ED20B62064.jpeg One, the Amazon button needs to be centered and a little smaller. Also, should it be Prefer Prime? Shop on Amazon? And then, shouldn't there be an Amazon logo next to it? Or does that cheapen it? Also, you still don't understand what I'm fucking saying. I'm gonna show you the questions section again. There, I don't understand if I'm sending you the exact liquid code of the questions section, how are you able to code such complicated things, but you can't copy the font and color and size of the questions section? Please explain that to me. Please, please tell me what's going on.

Questions

What to know before you start.

A few quick answers about how to take SilentCycle™ and who should check in with a healthcare provider first.

How long does it take to work?

Some people may notice support within their very first cycle, while others may need 2–3 cycles of consistent use. For best results, take SilentCycle™ consistently every day, not just during your luteal phase or period.

How do I take SilentCycle™?

Take 2 capsules daily with food and water. Some people may experience stomach sensitivity when taking botanical ingredients on an empty stomach.

Most users can take both capsules together. However, if you're sensitive to supplements, consider splitting the dose into 1 capsule in the morning and 1 capsule in the evening.

Does SilentCycle™ contain hormones?

No. SilentCycle™ does not contain estrogen, progesterone, or any synthetic hormones.

However, some ingredients, including vitex, may influence the body's own natural hormonal signaling pathways. If you have a hormone-sensitive condition, such as breast cancer, or have questions about whether SilentCycle™ is appropriate for you, speak with your healthcare provider before use.

Can I take SilentCycle™ while trying to conceive?

Some studies have evaluated vitex’s role in supporting women who are trying to conceive, but individual circumstances vary. If you are actively trying to become pregnant, we recommend discussing SilentCycle™ with your healthcare provider before starting.

Can I take SilentCycle™ while pregnant or breastfeeding?

SilentCycle™ was formulated to support women during their menstrual cycles and is generally not intended for use during pregnancy.

While SilentCycle™ contains no hormones, some ingredients, including vitex, may influence the body's natural hormonal signaling. Because pregnancy and breastfeeding have unique hormonal and nutritional considerations, we recommend discussing SilentCycle™ with your healthcare provider before use.

If you become pregnant while taking SilentCycle™, speak with your healthcare provider about whether you should continue or discontinue use.

Can I take SilentCycle™ with hormonal birth control?

SilentCycle™ contains no hormones and is not intended to replace hormonal birth control. Because vitex may influence the body's natural hormonal signaling pathways, and because methods of hormonal contraception vary widely, we recommend discussing SilentCycle™ with the healthcare provider who prescribes your contraception before starting.

Looks beautiful, thank you. Can you please tell me why every time I ask you to create a new section, you refer back to that ugly, that shorter purple thing, when what I want is to meet, the same thing as the other stuff? I'm just curious about that. Okay, for Meet the Founder, I think there needs to be less padding between the image and the "Hi, I'm Dr. Nathan King." It's too much padding. I'm gonna show you. And then, I don't know how much more I can do. It's past midnight and I operate tomorrow. Unfortunately, it's saying clippings must be enabled, so we can't go through that. Second of all, it's hiding the top part where the X is on the my, like, because like it's bringing in the thumbnail header, and so that's hiding the top part, so we need to fix that too. I think we just do a summary of the abstract, like the title, the title, the authors, the citation, and the abstract, and then say, view full study here, and then that link goes to PubMed. Is that better? Sorry, everything's working perfectly except for it's still being hidden by the Figma thing at the top. Is there a way to move that down a little bit without messing anything else up? Let me know. I'm happy to edit it within the code if it's just like a padding thing. Wait, for some reason now it's working. I don't know what changed, but it's working. Your version is working now. Oh, I love this so much. It's so much better. Okay. What else do we need to do? Okay, there's too much padding in this section I'm gonna show you. Let's just go ahead and fix this. I'm gonna send you a picture of it, and then the next message I'll send is the full code, and you can just tell me where to edit it to take out that padding, okay? Pasted text(2).txt Document IMG_EC6490E6-F59C-49A5-9936-F6F9F160DFFA.jpeg IMG_472715A3-4EF3-466B-8CDB-4B49261D13C9.jpeg It still didn't fix it. Also, are you fixing this only on the desktop? Because the desktop looks okay, but it actually has too much padding above the circle. But it didn't change the mobile at all. You need to make sure that you're changing the mobile. Remember, mobile is what most people use on our website. But it needs to fix both. Look at these pictures. IMG_5894E674-B58B-4410-8723-6F35B66FCC97.jpeg IMG_A24B13A4-9852-4FD7-8250-8479E189B714.jpeg IMG_BB463979-A596-43F4-BD02-B8B596F34B4F.jpeg I did not say I want the circle smaller. I want the gap underneath the scroller to be smaller before getting to the next section. What number is that? Okay, you said it. 860. I'm going way, no, that number is not doing shit, bitch. I literally just put it all the way down to 500 and it did nothing. You're a liar, Camille. You're such a fucking liar, Camille. Oh my God, can you please just, can you please just like do, like tell me what it is to fix? I just changed it to 9 pixels and it changed nothing about it. It's something to do with the fucking padding. Let's see. Oh, scroll area? I don't know where the fucking scroll area is. Are you just making shit up now again? It doesn't say SC progress scroll area. Oh yes, it does. No, that's what I was changing. That changes nothing. That changes literally nothing. Tell me what to change. Do I change this? Let's see. Yes, okay, I found it on my fucking own. Minimum height. Need to change that. I changed it down to 600 and that worked. But that only helped with mobile. Where do I change it for the desktop? The desktop has way too large of a gap. Okay, never mind. I figured it out. It was different than what you were saying. It was all the minimum heights of the section below what you were referencing, but it's fine. I figured it out. Also, now there's a problem again. So, I don't know what it is, but whatever you changed about my header code brings the header up now anytime they do one of these side, whatever you call them, modules or garages or I don't know whatever you called it. It's bringing it up and it keeps hiding it. So we need to bring those all down. And unfortunately, there's a lot of them. So now I have, what, I have to send you this code now to fix it? Pasted text(3).txt Document Much better, but there is a little gap. It's not the end of the world, it's working. But, um, could we figure out how big the header is? What number should I play with to move this back up so it comes out right below the header? IMG_EF4DAD27-2DFF-49D0-A62A-03762D52E32A.jpeg IMG_B42F8E7F-C47D-4C15-8571-C917E74E9644.jpeg IMG_38F40BE1-230C-422D-9ADE-AB6DA4ABC7D9.jpeg Yes, we need the small Amazon button, and then we also need to fix this, because this is on the product page. We need it to match the hero section, which I'll also send a picture of the hero section. I just sent you the code for it, but I can send you it again if you need to copy it, but basically it should have the same options and the same look, which is way better looking. Also, we unfortunately need to make it say $28, because I don't know why Shopify is making 20% off $28. But, um, it's annoying because $27.99 looks better, but I don't know how else to do it. If I did 21% off, that might be a little more. Okay, we talked about doing 28, not 27.99. 28.00, or just $28. And then, um, for some reason I can't get the 20% off launch discount automatically applied. That's coded in somewhere, but I can't find it because I only see one custom liquid code, and it's got the 45-day guarantee. But I don't know where the other 20% liquid code is coming from. Oh, I see it now. Never mind. So I can delete that. Or I can... why don't I not delete it? Why don't I just hide it so that I can use it later if I want. So, um, yeah, everything else is working. I just think that, um, I just feel like we, we, um, trying to think. Yeah, we need to say 28. I'm sure that's easy to find in the code, right? Pasted text(6).txt Document Pasted text(7).txt Document Its called: femanual-product-purchase.liquid IMG_7BAA26A2-B600-4BCD-A018-5FF292F919D1.jpeg IMG_BEC9E07B-C05D-46F0-BEEF-1B62889DB122.jpeg IMG_0D2949C2-34D6-42E1-A68F-AE96E97CA5B3.jpeg Okay, that worked. Thank you so much. Now we need to fix these two sections, and then I also just wanna fix the overall Shopify theme. Is there any way to, like, fix the checkout and the menu to make it look more elevated and match everything? How do we do this? I know we're getting into a lot of coding, but these are some things we need to do. Pasted text(8).txt Document and then Main Cart Foot Liquid: Pasted text(9).txt Document Today 3:14 PM IMG_F969DF88-64EE-4524-8E1E-F495301A3593.jpeg IMG_A5E213C6-884B-4C5B-9784-675B5ED00758.jpeg Overall, this looks pretty good. A couple things. 45-day first bottle money-back guarantee is good to say. Free shipping on orders over 50? No, I'm doing free shipping for everyone. So can you just make that star say just, um, free shipping? And then secure checkout is fine. And then taxes, discounts, and shipping calculated at checkout. I mean, just say like... just remove that, right? Because we don't need that. Everyone gets that tax is gonna happen. And then the checkout button has a weird... it's doing that thing again where it has the weird plum line outline that needs to be removed. And then is this gonna still show Apple Pay if someone has Apple Pay? Let me know about that. Um, also, let's see. When I click checkout, what happens? I guess, I don't know. Like, where else was this supposed to update? So it updated my cart. Is it supposed to update anything else? I guess I just try, let me try add to cart. And then view cart. View cart doesn't really go to cart. Yeah, I don't know where the checkout goes. I guess I can't really test it. Anyway, fix that thing for me and then let's, we gotta try it out. And then we need to update the other things we wanted to do. What were the other things we wanted to do? We wanted to get the menu, the bottom, the sign-up feature, all that shit. Also, a little side tangent, but I accidentally chose Notes as my default app to open up these things when you give me the liquid code, but that doesn't work. What I need it to change the default app to open it with TextEdit on my Mac. How do I change it so it stops remembering to use the Notes app? Because I don't want it to do that anymore. It's getting on my freaking nerve. Thank you. Okay, I'm replacing what? Which one am I replacing? Main cart footer, right? I think it's main cart footer. I hope so, because that's what I just replaced. It's not coming up. Like, okay, if I right click, get info, and then open with, and then I change it to TextEdit, add, change all, continue. Okay, great. That worked. Thank you. Okay, sorry, one more thing. It made all the changes except something else is wrong. What was it? Oh, you still have launch discount listed under my discounts. Is that you coding that, or is that Shopify coding that? If it's Shopify, then I can change the name on Shopify. But if it's you putting that in the code, then we need to say first bottle discount. You know what I mean? Because I don't want to call it launch anymore, remember? Tell me if it's you or Shopify. I'd rank them: 1. First Bottle Discount ⭐⭐⭐⭐⭐ (my choice) Pros: Fits perfectly with your 45-Day First-Bottle Money-Back Guarantee. Feels like part of your brand rather than a sale. Doesn't imply someone has to be "new" forever—it just explains why the first bottle is cheaper. Sounds premium. 2. Welcome Discount ⭐⭐⭐⭐☆ Pros: Friendly and common. Works if you eventually offer it to everyone. Doesn't scream "sale." Cons: A little generic. Lots of brands use it. 3. New Customer Discount ⭐⭐⭐☆☆ Pros: Very clear. Cons: Sounds transactional and coupon-like. If a returning customer somehow qualifies, it becomes confusing. Less premium than the other two. For Femanual, I'd go with: First Bottle Discount It pairs beautifully with: First Bottle Discount 45-Day First-Bottle Money-Back Guarantee Those two messages reinforce each other and subtly communicate, "We're making it easy to try us, and we're standing behind it." One tiny style note: I would capitalize it consistently everywhere as First Bottle Discount (rather than "first bottle discount"). It reads more like a branded benefit and feels a little more polished. IMG_41AE6E2D-C732-43BB-96A2-3077FBC84FAB.jpeg IMG_515B8DA9-7BC7-4BF6-AC22-5FC5729035FE.jpeg IMG_218EB56C-5FDF-4A91-AC03-64AAA5963B7B.jpeg IMG_19EC5908-1775-45D9-A58B-E29DBD0BF538.jpeg IMG_59A2EEC0-1C27-4C71-AAE2-A3E63458841E.jpeg Okay, great, that worked. So, as you can see, there's still a couple other places that don't look the manual. The menu page, the confirmation of it being added to the cart page, the footer of basically every page. It's not even showing me the privacy policy anymore. I don't know what's going on there. The footer is a hot-ass mess. We need to figure out how to get all those privacy policies back up so people can actually see it. And then I don't know how to fix the background. The background looks horrifying. Like, you can't see anything. So I don't know what's going on there. I don't know how we can keep all the things that we need legally there with making the styling, like, match and also readable. It's kind of insane right now that it's not readable in the footer. It's so weird. Like, I'm using the footer and I have, I have the social media icons, and then I have policy links, but like, why can't I read any of that? Must be the theme settings I'm using. Weird. I don't even see where I can hot, hate this thing on my laptop. I don't even see how I can change the, um, your color scheme. Something weird's happening because you can't see in the middle no matter what I change the color scheme to, so something must be coded. And then at my bottom, there's some warning at the bottom and I can't even read it. Look. Yes, something global is overriding the footer. This is not just a bad color-scheme choice. The giveaway is that the policy links remain nearly invisible no matter which scheme you select. There is probably a broad CSS rule applying the pink glow/background and also lowering the text color or opacity inside the footer. Do not keep changing random theme colors right now. We should fix the source. What needs fixing Footer Restore Privacy Policy, Terms, Refund Policy, Shipping Policy, etc. Make all footer text readable. Remove the huge empty vertical space. Keep Instagram and TikTok. Decide whether to remove “Follow on Shop.” Give the footer a controlled porcelain background rather than letting the global pink glow wash through it. Add-to-cart confirmation Restyle the white notification card. Make View cart secondary and Checkout plum. Remove the pink square/background behind the notification. Keep all native cart behavior intact. Mobile menu Restyle the drawer without breaking its navigation. Make Try SilentCycle the dominant button. Improve spacing and hierarchy. Use a readable porcelain background instead of the muddy pink layer. Collection/catalog card It still shows $34.99 because the collection card is showing the product’s actual base price, not the automatic first-bottle discount. That needs its own deliberate treatment later. It is separate from the cart code. Send me these next Start with the footer, because it is currently the most broken. Send the full contents of: sections/footer.liquid Also send the global custom CSS you added for the pink/porcelain site background. It may be in: assets/base.css or under: Theme settings → Custom CSS I specifically need the part that controls things like: body .gradient .shopify-section .footer .footer__content-top .footer__content-bottom The footer’s unreadable text is almost certainly being caused there. For the yellow warning at the bottom, click the warning icon once and send me the exact message it displays. From the screenshot alone, I cannot tell whether that is a real Liquid error, an inaccessible block warning, or something only visible in the Shopify editor. We will fix the footer first, then the add-to-cart notification, then the mobile menu. One component at a time, without touching the working cart or accelerated payment code. Pasted text(10).txt Document Pasted text (2).txt Document this is the footer code for the footer section. here is the assets.base. Can you fix for me??? Worked for 28s Yes. I fixed both files. Replace: Sections → footer.liquid with: Download the fixed footer.liquid Then replace: Assets → base.css with: base-femanual-footer-fixed.css This keeps all the existing footer functionality from your current section, including newsletter signup, social icons, payment icons, localization, and the Shopify policy loop. It also preserves your porcelain background and sticky-header work while adding a footer-specific safeguard so the global transparency rules cannot wash out the legal links again. The updated footer should now have: readable navy and plum text visible Privacy, Terms, Refund, Shipping, and other policies that exist in Shopify a controlled porcelain background instead of the muddy transparent glow much less empty vertical space a cleaner newsletter card centered social and payment icons a readable copyright and policy area no interference with the cart, checkout, Apple Pay, Shop Pay, or product-page code Save footer.liquid first, then base.css, and refresh the preview. base-femanual-footer-fixed.css Code Take this further in ChatGPT Work Turn your work into a polished document, deck, spreadsheet, report, or website. Try Work Library / Femanual / base-femanual-footer-fixed.css :root { --alpha-button-background: 1; --alpha-button-border: 1; --alpha-link: 0.85; --alpha-badge-border: 0.1; --focused-base-outline: 0.2rem solid rgba(var(--color-foreground), 0.5); --focused-base-outline-offset: 0.3rem; --focused-base-box-shadow: 0 0 0 0.3rem rgb(var(--color-background)), 0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3); } .product-card-wrapper .card, .contains-card--product { --border-radius: var(--product-card-corner-radius); --border-width: var(--product-card-border-width); --border-opacity: var(--product-card-border-opacity); --shadow-horizontal-offset: var(--product-card-shadow-horizontal-offset); --shadow-vertical-offset: var(--product-card-shadow-vertical-offset); --shadow-blur-radius: var(--product-card-shadow-blur-radius); --shadow-opacity: var(--product-card-shadow-opacity); --shadow-visible: var(--product-card-shadow-visible); --image-padding: var(--product-card-image-padding); --text-alignment: var(--product-card-text-alignment); } .collection-card-wrapper .card, .contains-card--collection { --border-radius: var(--collection-card-corner-radius); --border-width: var(--collection-card-border-width); --border-opacity: var(--collection-card-border-opacity); --shadow-horizontal-offset: var(--collection-card-shadow-horizontal-offset); --shadow-vertical-offset: var(--collection-card-shadow-vertical-offset); --shadow-blur-radius: var(--collection-card-shadow-blur-radius); --shadow-opacity: var(--collection-card-shadow-opacity); --shadow-visible: var(--collection-card-shadow-visible); --image-padding: var(--collection-card-image-padding); --text-alignment: var(--collection-card-text-alignment); } .article-card-wrapper .card, .contains-card--article { --border-radius: var(--blog-card-corner-radius); --border-width: var(--blog-card-border-width); --border-opacity: var(--blog-card-border-opacity); --shadow-horizontal-offset: var(--blog-card-shadow-horizontal-offset); --shadow-vertical-offset: var(--blog-card-shadow-vertical-offset); --shadow-blur-radius: var(--blog-card-shadow-blur-radius); --shadow-opacity: var(--blog-card-shadow-opacity); --shadow-visible: var(--blog-card-shadow-visible); --image-padding: var(--blog-card-image-padding); --text-alignment: var(--blog-card-text-alignment); } .contains-content-container, .content-container { --border-radius: var(--text-boxes-radius); --border-width: var(--text-boxes-border-width); --border-opacity: var(--text-boxes-border-opacity); --shadow-horizontal-offset: var(--text-boxes-shadow-horizontal-offset); --shadow-vertical-offset: var(--text-boxes-shadow-vertical-offset); --shadow-blur-radius: var(--text-boxes-shadow-blur-radius); --shadow-opacity: var(--text-boxes-shadow-opacity); --shadow-visible: var(--text-boxes-shadow-visible); } .contains-media, .global-media-settings { --border-radius: var(--media-radius); --border-width: var(--media-border-width); --border-opacity: var(--media-border-opacity); --shadow-horizontal-offset: var(--media-shadow-horizontal-offset); --shadow-vertical-offset: var(--media-shadow-vertical-offset); --shadow-blur-radius: var(--media-shadow-blur-radius); --shadow-opacity: var(--media-shadow-opacity); --shadow-visible: var(--media-shadow-visible); } /* base */ .page-width { max-width: var(--page-width); margin: 0 auto; padding: 0 1.5rem; } body:has(.section-header .drawer-menu) .announcement-bar-section .page-width { max-width: 100%; } .page-width.drawer-menu { max-width: 100%; } .page-width-desktop { padding: 0; margin: 0 auto; } .utility-bar__grid.page-width { padding-left: 3rem; padding-right: 3rem; } @media screen and (min-width: 750px) { .page-width { padding: 0 5rem; } .header.page-width, .utility-bar__grid.page-width { padding-left: 3.2rem; padding-right: 3.2rem; } .page-width--narrow { padding: 0 9rem; } .page-width-desktop { padding: 0; } .page-width-tablet { padding: 0 5rem; } } @media screen and (min-width: 990px) { .header:not(.drawer-menu).page-width { padding-left: 5rem; padding-right: 5rem; } .page-width--narrow { max-width: 72.6rem; padding: 0; } .page-width-desktop { max-width: var(--page-width); padding: 0 5rem; } } .isolate { position: relative; z-index: 0; } .section + .section { margin-top: var(--spacing-sections-mobile); } @media screen and (min-width: 750px) { .section + .section { margin-top: var(--spacing-sections-desktop); } } .element-margin-top { margin-top: 5rem; } @media screen and (min-width: 750px) { .element-margin { margin-top: calc(5rem + var(--page-width-margin)); } } .background-secondary { background-color: rgba(var(--color-foreground), 0.04); } .grid-auto-flow { display: grid; grid-auto-flow: column; } .page-margin, .shopify-challenge__container { margin: 7rem auto; } .rte-width { max-width: 82rem; margin: 0 auto 2rem; } .list-unstyled { margin: 0; padding: 0; list-style: none; } .hidden { display: none !important; } .visually-hidden { position: absolute !important; overflow: hidden; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; clip: rect(0 0 0 0); word-wrap: normal !important; } .visually-hidden--inline { margin: 0; height: 1em; } .overflow-hidden { overflow: hidden; } .skip-to-content-link:focus { z-index: 9999; position: inherit; overflow: auto; width: auto; height: auto; clip: auto; } .full-width-link { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 2; } ::selection { background-color: rgba(var(--color-foreground), 0.2); } .text-body { font-size: 1.5rem; letter-spacing: 0.06rem; line-height: calc(1 + 0.8 / var(--font-body-scale)); font-family: var(--font-body-family); font-style: var(--font-body-style); font-weight: var(--font-body-weight); } h1, h2, h3, h4, h5, .h0, .h1, .h2, .h3, .h4, .h5 { font-family: var(--font-heading-family); font-style: var(--font-heading-style); font-weight: var(--font-heading-weight); letter-spacing: calc(var(--font-heading-scale) * 0.06rem); color: rgb(var(--color-foreground)); line-height: calc(1 + 0.3 / max(1, var(--font-heading-scale))); word-break: break-word; } .hxxl { font-size: clamp(calc(var(--font-heading-scale) * 5.6rem), 14vw, calc(var(--font-heading-scale) * 7.2rem)); line-height: 1.1; } .hxl { font-size: calc(var(--font-heading-scale) * 5rem); line-height: calc(1 + 0.3 / max(1, var(--font-heading-scale))); } @media only screen and (min-width: 750px) { .hxl { font-size: calc(var(--font-heading-scale) * 6.2rem); } } .h0 { font-size: calc(var(--font-heading-scale) * 4rem); } @media only screen and (min-width: 750px) { .h0 { font-size: calc(var(--font-heading-scale) * 5.2rem); } } h1, .h1 { font-size: calc(var(--font-heading-scale) * 3rem); } @media only screen and (min-width: 750px) { h1, .h1 { font-size: calc(var(--font-heading-scale) * 4rem); } } h2, .h2 { font-size: calc(var(--font-heading-scale) * 2rem); } @media only screen and (min-width: 750px) { h2, .h2 { font-size: calc(var(--font-heading-scale) * 2.4rem); } } h3, .h3 { font-size: calc(var(--font-heading-scale) * 1.7rem); } @media only screen and (min-width: 750px) { h3, .h3 { font-size: calc(var(--font-heading-scale) * 1.8rem); } } h4, .h4 { font-family: var(--font-heading-family); font-style: var(--font-heading-style); font-size: calc(var(--font-heading-scale) * 1.5rem); } h5, .h5 { font-size: calc(var(--font-heading-scale) * 1.2rem); } @media only screen and (min-width: 750px) { h5, .h5 { font-size: calc(var(--font-heading-scale) * 1.3rem); } } h6, .h6 { color: rgba(var(--color-foreground), 0.75); margin-block-start: 1.67em; margin-block-end: 1.67em; } blockquote { font-style: italic; color: rgba(var(--color-foreground), 0.75); border-left: 0.2rem solid rgba(var(--color-foreground), 0.2); padding-left: 1rem; } @media screen and (min-width: 750px) { blockquote { padding-left: 1.5rem; } } .caption { font-size: 1rem; letter-spacing: 0.07rem; line-height: calc(1 + 0.7 / var(--font-body-scale)); } @media screen and (min-width: 750px) { .caption { font-size: 1.2rem; } } .caption-with-letter-spacing { font-size: 1rem; letter-spacing: 0.13rem; line-height: calc(1 + 0.2 / var(--font-body-scale)); text-transform: uppercase; } .caption-with-letter-spacing--medium { font-size: 1.2rem; letter-spacing: 0.16rem; } .caption-with-letter-spacing--large { font-size: 1.4rem; letter-spacing: 0.18rem; } .caption-large, .customer .field input, .customer select, .field__input, .form__label, .select__select { font-size: 1.3rem; line-height: calc(1 + 0.5 / var(--font-body-scale)); letter-spacing: 0.04rem; } .color-foreground { color: rgb(var(--color-foreground)); } table:not([class]) { table-layout: fixed; border-collapse: collapse; font-size: 1.4rem; border-style: hidden; box-shadow: 0 0 0 0.1rem rgba(var(--color-foreground), 0.2); /* draws the table border */ } table:not([class]) td, table:not([class]) th { padding: 1em; border: 0.1rem solid rgba(var(--color-foreground), 0.2); } @media screen and (max-width: 749px) { .small-hide { display: none !important; } } @media screen and (min-width: 750px) and (max-width: 989px) { .medium-hide { display: none !important; } } @media screen and (min-width: 990px) { .large-up-hide { display: none !important; } } .left { text-align: left; } .center { text-align: center; } .right { text-align: right; } .uppercase { text-transform: uppercase; } .light { opacity: 0.7; } a:empty, ul:empty, dl:empty, div:empty, section:empty, article:empty, p:empty, h1:empty, h2:empty, h3:empty, h4:empty, h5:empty, h6:empty { display: none; } .link, .customer a { cursor: pointer; display: inline-block; border: none; box-shadow: none; text-decoration: underline; text-underline-offset: 0.3rem; color: rgb(var(--color-link)); background-color: transparent; font-size: 1.4rem; font-family: inherit; } .link--text { color: rgb(var(--color-foreground)); } .link--text:hover { color: rgba(var(--color-foreground), 0.75); } .link-with-icon { display: inline-flex; font-size: 1.4rem; font-weight: 600; letter-spacing: 0.1rem; text-decoration: none; margin-bottom: 4.5rem; white-space: nowrap; } .link-with-icon .icon { width: 1.5rem; margin-left: 1rem; } a:not([href]) { cursor: not-allowed; } .circle-divider::after { content: '\2022'; margin: 0 1.3rem 0 1.5rem; } .circle-divider:last-of-type::after { display: none; } hr { border: none; height: 0.1rem; background-color: rgba(var(--color-foreground), 0.2); display: block; margin: 5rem 0; } @media screen and (min-width: 750px) { hr { margin: 7rem 0; } } .full-unstyled-link { text-decoration: none; color: currentColor; display: block; } .placeholder { background-color: rgba(var(--color-foreground), 0.04); color: rgba(var(--color-foreground), 0.55); fill: rgba(var(--color-foreground), 0.55); } details > * { box-sizing: border-box; } .break { word-break: break-word; } .visibility-hidden { visibility: hidden; } @media (prefers-reduced-motion) { .motion-reduce { transition: none !important; animation: none !important; } } :root { --duration-short: 100ms; --duration-default: 200ms; --duration-announcement-bar: 250ms; --duration-medium: 300ms; --duration-long: 500ms; --duration-extra-long: 600ms; --duration-extra-longer: 750ms; --duration-extended: 3s; --ease-out-slow: cubic-bezier(0, 0, 0.3, 1); --animation-slide-in: slideIn var(--duration-extra-long) var(--ease-out-slow) forwards; --animation-fade-in: fadeIn var(--duration-extra-long) var(--ease-out-slow); } .underlined-link, .customer a, .inline-richtext a { text-underline-offset: 0.3rem; text-decoration-thickness: 0.1rem; transition: text-decoration-thickness ease 100ms; } .underlined-link, .customer a { color: rgba(var(--color-link), var(--alpha-link)); } .inline-richtext a, .rte.inline-richtext a { color: currentColor; } .underlined-link:hover, .customer a:hover, .inline-richtext a:hover { color: rgb(var(--color-link)); text-decoration-thickness: 0.2rem; } .icon-arrow { width: 1.5rem; } h3 .icon-arrow, .h3 .icon-arrow { width: calc(var(--font-heading-scale) * 1.5rem); } /* arrow animation */ .animate-arrow .icon-arrow path { transform: translateX(-0.25rem); transition: transform var(--duration-short) ease; } .animate-arrow:hover .icon-arrow path { transform: translateX(-0.05rem); } .svg-wrapper { display: inline-flex; justify-content: center; align-items: center; width: 20px; height: 20px; } .svg-wrapper > svg { height: 100%; width: 100%; } /* base-details-summary */ summary { cursor: pointer; list-style: none; position: relative; } summary .icon-caret { position: absolute; height: 0.6rem; right: 1.5rem; top: calc(50% - 0.2rem); } summary::-webkit-details-marker { display: none; } .disclosure-has-popup { position: relative; } .disclosure-has-popup[open] > summary::before { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 2; display: block; cursor: default; content: ' '; background: transparent; } .disclosure-has-popup > summary::before { display: none; } .disclosure-has-popup[open] > summary + * { z-index: 100; } @media screen and (min-width: 750px) { .disclosure-has-popup[open] > summary + * { z-index: 4; } .facets .disclosure-has-popup[open] > summary + * { z-index: 2; } } .placeholder-svg { height: 100%; width: 100%; } /* base-focus */ /* Focus ring - default (with offset) */ *:focus { outline: 0; box-shadow: none; } *:focus-visible { outline: var(--focused-base-outline); outline-offset: var(--focused-base-outline-offset); box-shadow: var(--focused-base-box-shadow); } /* Fallback - for browsers that don't support :focus-visible, a fallback is set for :focus */ .focused { outline: var(--focused-base-outline); outline-offset: var(--focused-base-outline-offset); box-shadow: var(--focused-base-box-shadow); } /* Focus ring - inset */ .focus-inset:focus-visible { outline: 0.2rem solid rgba(var(--color-foreground), 0.5); outline-offset: -0.2rem; box-shadow: 0 0 0.2rem 0 rgba(var(--color-foreground), 0.3); } .focused.focus-inset { outline: 0.2rem solid rgba(var(--color-foreground), 0.5); outline-offset: -0.2rem; box-shadow: 0 0 0.2rem 0 rgba(var(--color-foreground), 0.3); } /* Focus ring - none */ /* Dangerous for a11y - Use with care */ .focus-none { box-shadow: none !important; outline: 0 !important; } .focus-offset:focus-visible { outline: 0.2rem solid rgba(var(--color-foreground), 0.5); outline-offset: 1rem; box-shadow: 0 0 0 1rem rgb(var(--color-background)), 0 0 0.2rem 1.2rem rgba(var(--color-foreground), 0.3); } .focus-offset.focused { outline: 0.2rem solid rgba(var(--color-foreground), 0.5); outline-offset: 1rem; box-shadow: 0 0 0 1rem rgb(var(--color-background)), 0 0 0.2rem 1.2rem rgba(var(--color-foreground), 0.3); } /* component-title */ .title, .title-wrapper-with-link { margin: 3rem 0 2rem; } .title-wrapper-with-link .title { margin: 0; } .title .link { font-size: inherit; } .title-wrapper { margin-bottom: 3rem; } .title-wrapper-with-link { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; margin-bottom: 3rem; flex-wrap: wrap; } .title--primary { margin: 4rem 0; } .title-wrapper--self-padded-tablet-down, .title-wrapper--self-padded-mobile { padding-left: 1.5rem; padding-right: 1.5rem; } @media screen and (min-width: 750px) { .title-wrapper--self-padded-mobile { padding-left: 0; padding-right: 0; } } @media screen and (min-width: 990px) { .title, .title-wrapper-with-link { margin: 5rem 0 3rem; } .title--primary { margin: 2rem 0; } .title-wrapper-with-link { align-items: center; } .title-wrapper-with-link .title { margin-bottom: 0; } .title-wrapper--self-padded-tablet-down { padding-left: 0; padding-right: 0; } } .title-wrapper-with-link .link-with-icon { margin: 0; flex-shrink: 0; display: flex; align-items: center; } .title-wrapper-with-link .link-with-icon .svg-wrapper { width: 1.5rem; } .title-wrapper-with-link a { margin-top: 0; flex-shrink: 0; } .title-wrapper--no-top-margin { margin-top: 0; } .title-wrapper--no-top-margin > .title { margin-top: 0; } .subtitle { font-size: 1.8rem; line-height: calc(1 + 0.8 / var(--font-body-scale)); letter-spacing: 0.06rem; color: rgba(var(--color-foreground), 0.7); } .subtitle--small { font-size: 1.4rem; letter-spacing: 0.1rem; } .subtitle--medium { font-size: 1.6rem; letter-spacing: 0.08rem; } /* component-grid */ .grid { display: flex; flex-wrap: wrap; margin-bottom: 2rem; padding: 0; list-style: none; column-gap: var(--grid-mobile-horizontal-spacing); row-gap: var(--grid-mobile-vertical-spacing); } @media screen and (min-width: 750px) { .grid { column-gap: var(--grid-desktop-horizontal-spacing); row-gap: var(--grid-desktop-vertical-spacing); } } .grid:last-child { margin-bottom: 0; } .grid__item { width: calc(25% - var(--grid-mobile-horizontal-spacing) * 3 / 4); max-width: calc(50% - var(--grid-mobile-horizontal-spacing) / 2); flex-grow: 1; flex-shrink: 0; } @media screen and (min-width: 750px) { .grid__item { width: calc(25% - var(--grid-desktop-horizontal-spacing) * 3 / 4); max-width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2); } } .grid--gapless.grid { column-gap: 0; row-gap: 0; } @media screen and (max-width: 749px) { .grid__item.slider__slide--full-width { width: 100%; max-width: none; } } .grid--1-col .grid__item { max-width: 100%; width: 100%; } .grid--3-col .grid__item { width: calc(33.33% - var(--grid-mobile-horizontal-spacing) * 2 / 3); } @media screen and (min-width: 750px) { .grid--3-col .grid__item { width: calc(33.33% - var(--grid-desktop-horizontal-spacing) * 2 / 3); } } .grid--2-col .grid__item { width: calc(50% - var(--grid-mobile-horizontal-spacing) / 2); } @media screen and (min-width: 750px) { .grid--2-col .grid__item { width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2); } .grid--4-col-tablet .grid__item { width: calc(25% - var(--grid-desktop-horizontal-spacing) * 3 / 4); } .grid--3-col-tablet .grid__item { width: calc(33.33% - var(--grid-desktop-horizontal-spacing) * 2 / 3); } .grid--2-col-tablet .grid__item { width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2); } } @media screen and (max-width: 989px) { .grid--1-col-tablet-down .grid__item { width: 100%; max-width: 100%; } .slider--tablet.grid--peek { margin: 0; width: 100%; } .slider--tablet.grid--peek .grid__item { box-sizing: content-box; margin: 0; } .slider.slider--tablet .scroll-trigger.animate--slide-in, .slider.slider--mobile .scroll-trigger.animate--slide-in { animation: none; opacity: 1; transform: inherit; } .scroll-trigger:not(.scroll-trigger--offscreen) .slider--tablet { animation: var(--animation-slide-in); } } @media screen and (min-width: 990px) { .grid--6-col-desktop .grid__item { width: calc(16.66% - var(--grid-desktop-horizontal-spacing) * 5 / 6); max-width: calc(16.66% - var(--grid-desktop-horizontal-spacing) * 5 / 6); } .grid--5-col-desktop .grid__item { width: calc(20% - var(--grid-desktop-horizontal-spacing) * 4 / 5); max-width: calc(20% - var(--grid-desktop-horizontal-spacing) * 4 / 5); } .grid--4-col-desktop .grid__item { width: calc(25% - var(--grid-desktop-horizontal-spacing) * 3 / 4); max-width: calc(25% - var(--grid-desktop-horizontal-spacing) * 3 / 4); } .grid--3-col-desktop .grid__item { width: calc(33.33% - var(--grid-desktop-horizontal-spacing) * 2 / 3); max-width: calc(33.33% - var(--grid-desktop-horizontal-spacing) * 2 / 3); } .grid--2-col-desktop .grid__item { width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2); max-width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2); } .slider.slider--desktop .scroll-trigger.animate--slide-in { animation: none; opacity: 1; transform: inherit; } .scroll-trigger:not(.scroll-trigger--offscreen) .slider--desktop { animation: var(--animation-slide-in); } } @media screen and (min-width: 990px) { .grid--1-col-desktop { flex: 0 0 100%; max-width: 100%; } .grid--1-col-desktop .grid__item { width: 100%; max-width: 100%; } } @media screen and (max-width: 749px) { .grid--peek.slider--mobile { margin: 0; width: 100%; } .grid--peek.slider--mobile .grid__item { box-sizing: content-box; margin: 0; } .grid--peek .grid__item { min-width: 35%; } .grid--peek.slider .grid__item:first-of-type { margin-left: 1.5rem; } /* Fix to show some space at the end of our sliders in all browsers */ .grid--peek.slider:after { margin-left: calc(-1 * var(--grid-mobile-horizontal-spacing)); } .grid--2-col-tablet-down .grid__item { width: calc(50% - var(--grid-mobile-horizontal-spacing) / 2); } .slider--tablet.grid--peek.grid--2-col-tablet-down .grid__item, .grid--peek .grid__item { width: calc(50% - var(--grid-mobile-horizontal-spacing) - 3rem); } .slider--tablet.grid--peek.grid--1-col-tablet-down .grid__item, .slider--mobile.grid--peek.grid--1-col-tablet-down .grid__item { width: calc(100% - var(--grid-mobile-horizontal-spacing) - 3rem); } } @media screen and (min-width: 750px) and (max-width: 989px) { .slider--tablet.grid--peek .grid__item { width: calc(25% - var(--grid-desktop-horizontal-spacing) - 3rem); } .slider--tablet.grid--peek.grid--3-col-tablet .grid__item { width: calc(33.33% - var(--grid-desktop-horizontal-spacing) - 3rem); } .slider--tablet.grid--peek.grid--2-col-tablet .grid__item, .slider--tablet.grid--peek.grid--2-col-tablet-down .grid__item { width: calc(50% - var(--grid-desktop-horizontal-spacing) - 3rem); } .slider--tablet.grid--peek .grid__item:first-of-type { margin-left: 1.5rem; } .grid--2-col-tablet-down .grid__item { width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2); } .grid--1-col-tablet-down.grid--peek .grid__item { width: calc(100% - var(--grid-desktop-horizontal-spacing) - 3rem); } } /* component-media */ .media { display: block; background-color: rgba(var(--color-foreground), 0.1); position: relative; overflow: hidden; } .media--transparent { background-color: transparent; } .media > *:not(.zoom):not(.deferred-media__poster-button), .media model-viewer { display: block; max-width: 100%; position: absolute; top: 0; left: 0; height: 100%; width: 100%; } .media > img { object-fit: cover; object-position: center center; transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .media--square { padding-bottom: 100%; } .media--portrait { padding-bottom: 125%; } .media--landscape { padding-bottom: 66.6%; } .media--cropped { padding-bottom: 56%; } .media--16-9 { padding-bottom: 56.25%; } .media--circle { padding-bottom: 100%; border-radius: 50%; } .media.media--hover-effect > img + img { opacity: 0; } @media screen and (min-width: 990px) { .media--cropped { padding-bottom: 63%; } } deferred-media { display: block; } /* component-button */ /* Button - default */ .button--secondary, .button--tertiary { --color-button: var(--color-secondary-button); --color-button-text: var(--color-secondary-button-text); } .button--tertiary { --alpha-button-background: 0; --alpha-button-border: 0.2; } .button, .shopify-challenge__button, .customer button, button.shopify-payment-button__button--unbranded { --shadow-horizontal-offset: var(--buttons-shadow-horizontal-offset); --shadow-vertical-offset: var(--buttons-shadow-vertical-offset); --shadow-blur-radius: var(--buttons-shadow-blur-radius); --shadow-opacity: var(--buttons-shadow-opacity); --shadow-visible: var(--buttons-shadow-visible); --border-offset: var(--buttons-border-offset); /* reduce radius edge artifacts */ --border-opacity: calc(1 - var(--buttons-border-opacity)); border-radius: var(--buttons-radius-outset); position: relative; } .button, .shopify-challenge__button, .customer button, button.shopify-payment-button__button--unbranded { min-width: calc(12rem + var(--buttons-border-width) * 2); min-height: calc(4.5rem + var(--buttons-border-width) * 2); } .button, .shopify-challenge__button, .customer button { display: inline-flex; justify-content: center; align-items: center; border: 0; padding: 0 3rem; cursor: pointer; font: inherit; font-size: 1.5rem; text-decoration: none; color: rgb(var(--color-button-text)); transition: box-shadow var(--duration-short) ease; -webkit-appearance: none; appearance: none; background-color: rgba(var(--color-button), var(--alpha-button-background)); } .button:before, .shopify-challenge__button:before, .customer button:before, .shopify-payment-button__button--unbranded:before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; border-radius: var(--buttons-radius-outset); box-shadow: var(--shadow-horizontal-offset) var(--shadow-vertical-offset) var(--shadow-blur-radius) rgba(var(--color-shadow), var(--shadow-opacity)); } .button:after, .shopify-challenge__button:after, .customer button:after, .shopify-payment-button__button--unbranded:after { content: ''; position: absolute; top: var(--buttons-border-width); right: var(--buttons-border-width); bottom: var(--buttons-border-width); left: var(--buttons-border-width); z-index: 1; border-radius: var(--buttons-radius); box-shadow: 0 0 0 calc(var(--buttons-border-width) + var(--border-offset)) rgba(var(--color-button-text), var(--border-opacity)), 0 0 0 var(--buttons-border-width) rgba(var(--color-button), var(--alpha-button-background)); transition: box-shadow var(--duration-short) ease; } .button:not([disabled]):hover::after, .shopify-challenge__button:hover::after, .customer button:hover::after, .shopify-payment-button__button--unbranded:hover::after { --border-offset: 1.3px; box-shadow: 0 0 0 calc(var(--buttons-border-width) + var(--border-offset)) rgba(var(--color-button-text), var(--border-opacity)), 0 0 0 calc(var(--buttons-border-width) + 1px) rgba(var(--color-button), var(--alpha-button-background)); } .button--secondary:after { --border-opacity: var(--buttons-border-opacity); } .button:focus-visible, .button:focus, .button.focused, .shopify-payment-button__button--unbranded:focus-visible, .shopify-payment-button__button--unbranded:focus { outline: 0; box-shadow: 0 0 0 0.3rem rgb(var(--color-background)), 0 0 0 0.5rem rgba(var(--color-foreground), 0.5), 0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3); } .button:focus:not(:focus-visible):not(.focused), .shopify-payment-button__button--unbranded:focus:not(:focus-visible):not(.focused) { box-shadow: inherit; } .button::selection, .shopify-challenge__button::selection, .customer button::selection { background-color: rgba(var(--color-button-text), 0.3); } .button, .button-label, .shopify-challenge__button, .customer button { font-size: 1.5rem; letter-spacing: 0.1rem; line-height: calc(1 + 0.2 / var(--font-body-scale)); } .button--tertiary { font-size: 1.2rem; padding: 1rem 1.5rem; min-width: calc(9rem + var(--buttons-border-width) * 2); min-height: calc(3.5rem + var(--buttons-border-width) * 2); } .button--small { padding: 1.2rem 2.6rem; } /* Shopify Accelerated Checkout */ shopify-accelerated-checkout { --shopify-accelerated-checkout-button-border-radius: var(--buttons-radius-outset); --shopify-accelerated-checkout-button-box-shadow: var(--shadow-horizontal-offset) var(--shadow-vertical-offset) var(--shadow-blur-radius) rgba(var(--color-shadow), var(--shadow-opacity)); } shopify-accelerated-checkout-cart { --shopify-accelerated-checkout-button-border-radius: var(--buttons-radius-outset); --shopify-accelerated-checkout-button-box-shadow: var(--shadow-horizontal-offset) var(--shadow-vertical-offset) var(--shadow-blur-radius) rgba(var(--color-shadow), var(--shadow-opacity)); } /* Button - other */ .button:disabled, .button[aria-disabled='true'], .button.disabled, .customer button:disabled, .customer button[aria-disabled='true'], .customer button.disabled, .quantity__button.disabled { cursor: not-allowed; opacity: 0.5; } .button--full-width { display: flex; width: 100%; } .button.loading { color: transparent; position: relative; } @media screen and (forced-colors: active) { .button.loading { color: rgb(var(--color-foreground)); } } .button.loading > .loading__spinner { top: 50%; left: 50%; transform: translate(-50%, -50%); position: absolute; height: 100%; display: flex; align-items: center; } .button.loading > .loading__spinner .spinner { width: fit-content; } .button.loading > .loading__spinner .path { stroke: rgb(var(--color-button-text)); } /* Button - social share */ .share-button { display: block; position: relative; } .share-button details { width: fit-content; } .share-button__button { font-size: 1.4rem; display: flex; align-items: center; color: rgb(var(--color-link)); margin-left: 0; padding-left: 0; min-height: 4.4rem; } details[open] > .share-button__fallback { animation: animateMenuOpen var(--duration-default) ease; } .share-button__button:hover { text-decoration: underline; text-underline-offset: 0.3rem; } .share-button__button, .share-button__fallback button { cursor: pointer; background-color: transparent; border: none; } .share-button__button .icon-share { height: 1.2rem; margin-right: 1rem; min-width: 1.3rem; } .share-button__fallback { display: flex; align-items: center; position: absolute; top: 3rem; left: 0.1rem; z-index: 3; width: 100%; min-width: max-content; border-radius: var(--inputs-radius); border: 0; } .share-button__fallback:after { pointer-events: none; content: ''; position: absolute; top: var(--inputs-border-width); right: var(--inputs-border-width); bottom: var(--inputs-border-width); left: var(--inputs-border-width); border: 0.1rem solid transparent; border-radius: var(--inputs-radius); box-shadow: 0 0 0 var(--inputs-border-width) rgba(var(--color-foreground), var(--inputs-border-opacity)); transition: box-shadow var(--duration-short) ease; z-index: 1; } .share-button__fallback:before { background: rgb(var(--color-background)); pointer-events: none; content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: var(--inputs-radius-outset); box-shadow: var(--inputs-shadow-horizontal-offset) var(--inputs-shadow-vertical-offset) var(--inputs-shadow-blur-radius) rgba(var(--color-shadow), var(--inputs-shadow-opacity)); z-index: -1; } .share-button__fallback button { width: 4.4rem; height: 4.4rem; padding: 0; flex-shrink: 0; display: flex; justify-content: center; align-items: center; position: relative; right: var(--inputs-border-width); } .share-button__fallback button:hover { color: rgba(var(--color-foreground), 0.75); } .share-button__fallback button:hover .svg-wrapper { transform: scale(1.07); } .share-button__close:not(.hidden) + .share-button__copy { display: none; } .share-button__close, .share-button__copy { background-color: transparent; color: rgb(var(--color-foreground)); } .share-button__copy:focus-visible, .share-button__close:focus-visible { background-color: rgb(var(--color-background)); z-index: 2; } .share-button__copy:focus, .share-button__close:focus { background-color: rgb(var(--color-background)); z-index: 2; } .field:not(:focus-visible):not(.focused) + .share-button__copy:not(:focus-visible):not(.focused), .field:not(:focus-visible):not(.focused) + .share-button__close:not(:focus-visible):not(.focused) { background-color: inherit; } .share-button__fallback .field:after, .share-button__fallback .field:before { content: none; } .share-button__fallback .field { border-radius: 0; min-width: auto; min-height: auto; transition: none; } .share-button__fallback .field__input:focus, .share-button__fallback .field__input:-webkit-autofill { outline: 0.2rem solid rgba(var(--color-foreground), 0.5); outline-offset: 0.1rem; box-shadow: 0 0 0 0.1rem rgb(var(--color-background)), 0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3); } .share-button__fallback .field__input { box-shadow: none; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; filter: none; min-width: auto; min-height: auto; } .share-button__fallback .field__input:hover { box-shadow: none; } .share-button__fallback .icon { width: 1.5rem; height: 1.5rem; } .share-button__message:not(:empty) { display: flex; align-items: center; width: 100%; height: 100%; margin-top: 0; padding: 0.8rem 0 0.8rem 1.5rem; margin: var(--inputs-border-width); } .share-button__message:not(:empty):not(.hidden) ~ * { display: none; } /* component-form */ .field__input, .select__select, .customer .field input, .customer select { -webkit-appearance: none; appearance: none; background-color: rgb(var(--color-background)); color: rgb(var(--color-foreground)); font-family: var(--font-body-family); font-style: var(--font-body-style); font-weight: var(--font-body-weight); font-size: 1.6rem; width: 100%; box-sizing: border-box; transition: box-shadow var(--duration-short) ease; border-radius: var(--inputs-radius); height: 4.5rem; min-height: calc(var(--inputs-border-width) * 2); min-width: calc(7rem + (var(--inputs-border-width) * 2)); position: relative; border: 0; } .field:before, .select:before, .customer .field:before, .customer select:before, .localization-form__select:before { pointer-events: none; content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: var(--inputs-radius-outset); box-shadow: var(--inputs-shadow-horizontal-offset) var(--inputs-shadow-vertical-offset) var(--inputs-shadow-blur-radius) rgba(var(--color-shadow), var(--inputs-shadow-opacity)); z-index: -1; } .field:after, .select:after, .customer .field:after, .customer select:after, .localization-form__select:after { pointer-events: none; content: ''; position: absolute; top: var(--inputs-border-width); right: var(--inputs-border-width); bottom: var(--inputs-border-width); left: var(--inputs-border-width); border: 0.1rem solid transparent; border-radius: var(--inputs-radius); box-shadow: 0 0 0 var(--inputs-border-width) rgba(var(--color-foreground), var(--inputs-border-opacity)); transition: box-shadow var(--duration-short) ease; z-index: 1; } .select__select { font-family: var(--font-body-family); font-style: var(--font-body-style); font-weight: var(--font-body-weight); font-size: 1.2rem; color: rgba(var(--color-foreground), 0.75); } .field:hover.field:after, .select:hover.select:after, .select__select:hover.select__select:after, .customer .field:hover.field:after, .customer select:hover.select:after, .localization-form__select:hover.localization-form__select:after { box-shadow: 0 0 0 calc(0.1rem + var(--inputs-border-width)) rgba(var(--color-foreground), var(--inputs-border-opacity)); outline: 0; border-radius: var(--inputs-radius); } .field__input:focus-visible, .select__select:focus-visible, .customer .field input:focus-visible, .customer select:focus-visible, .localization-form__select:focus-visible.localization-form__select:after { box-shadow: 0 0 0 calc(0.1rem + var(--inputs-border-width)) rgba(var(--color-foreground)); outline: 0; border-radius: var(--inputs-radius); } .field__input:focus, .select__select:focus, .customer .field input:focus, .customer select:focus, .localization-form__select:focus.localization-form__select:after { box-shadow: 0 0 0 calc(0.1rem + var(--inputs-border-width)) rgba(var(--color-foreground)); outline: 0; border-radius: var(--inputs-radius); } .localization-form__select:focus { outline: 0; box-shadow: none; } .text-area, .select { display: flex; position: relative; width: 100%; } /* Select */ .select .svg-wrapper, .customer select + .svg-wrapper { height: 0.6rem; width: 1rem; pointer-events: none; position: absolute; top: calc(50% - 0.2rem); right: 0; } .select__select, .customer select { cursor: pointer; line-height: calc(1 + 0.6 / var(--font-body-scale)); padding: 0 calc(var(--inputs-border-width) + 3rem) 0 2rem; margin: var(--inputs-border-width); min-height: calc(var(--inputs-border-width) * 2); } /* Field */ .field { position: relative; width: 100%; display: flex; transition: box-shadow var(--duration-short) ease; } .customer .field { display: flex; } .field--with-error { flex-wrap: wrap; } .field__input, .customer .field input { flex-grow: 1; text-align: left; padding: 1.5rem; margin: var(--inputs-border-width); transition: box-shadow var(--duration-short) ease; } .field__label, .customer .field label { font-size: 1.6rem; left: calc(var(--inputs-border-width) + 2rem); top: calc(1rem + var(--inputs-border-width)); margin-bottom: 0; pointer-events: none; position: absolute; transition: top var(--duration-short) ease, font-size var(--duration-short) ease; color: rgba(var(--color-foreground), 0.75); letter-spacing: 0.1rem; line-height: 1.5; } .field__input:focus ~ .field__label, .field__input:not(:placeholder-shown) ~ .field__label, .field__input:-webkit-autofill ~ .field__label, .customer .field input:focus ~ label, .customer .field input:not(:placeholder-shown) ~ label, .customer .field input:-webkit-autofill ~ label { font-size: 1rem; top: calc(var(--inputs-border-width) + 0.5rem); left: calc(var(--inputs-border-width) + 2rem); letter-spacing: 0.04rem; } .field__input:focus, .field__input:not(:placeholder-shown), .field__input:-webkit-autofill, .customer .field input:focus, .customer .field input:not(:placeholder-shown), .customer .field input:-webkit-autofill { padding: 2.2rem 1.5rem 0.8rem 2rem; margin: var(--inputs-border-width); } .field__input::-webkit-search-cancel-button, .customer .field input::-webkit-search-cancel-button { display: none; } .field__input::placeholder, .customer .field input::placeholder { opacity: 0; } .field__button { align-items: center; background-color: transparent; border: 0; color: currentColor; cursor: pointer; display: flex; height: 4.4rem; justify-content: center; overflow: hidden; padding: 0; position: absolute; right: 0; top: 0; width: 4.4rem; } .field__button > .svg-wrapper { height: 2.5rem; width: 2.5rem; } .field__input:-webkit-autofill ~ .field__button, .field__input:-webkit-autofill ~ .field__label, .customer .field input:-webkit-autofill ~ label { color: rgb(0, 0, 0); } /* Text area */ .text-area { font-family: var(--font-body-family); font-style: var(--font-body-style); font-weight: var(--font-body-weight); min-height: 10rem; resize: none; } input[type='checkbox'] { display: inline-block; width: auto; margin-right: 0.5rem; } /* Form global */ .form__label { display: block; margin-bottom: 0.6rem; } .form__message { align-items: center; display: flex; font-size: 1.4rem; line-height: 1; margin-top: 1rem; } .form__message--large { font-size: 1.6rem; } .customer .field .form__message { font-size: 1.4rem; text-align: left; } .form__message .icon, .customer .form__message .svg-wrapper { flex-shrink: 0; height: 1.3rem; margin-right: 0.5rem; width: 1.3rem; } .form__message--large .icon, .customer .form__message .svg-wrapper { height: 1.5rem; width: 1.5rem; margin-right: 1rem; } .customer .field .form__message .svg-wrapper { align-self: start; } .form-status { margin: 0; font-size: 1.6rem; } .form-status-list { padding: 0; margin: 2rem 0 4rem; } .form-status-list li { list-style-position: inside; } .form-status-list .link::first-letter { text-transform: capitalize; } /* component-quantity */ .quantity { color: rgba(var(--color-foreground)); position: relative; width: calc(14rem / var(--font-body-scale) + var(--inputs-border-width) * 2); display: flex; border-radius: var(--inputs-radius); min-height: calc((var(--inputs-border-width) * 2) + 4.5rem); } .quantity:after { pointer-events: none; content: ''; position: absolute; top: var(--inputs-border-width); right: var(--inputs-border-width); bottom: var(--inputs-border-width); left: var(--inputs-border-width); border: 0.1rem solid transparent; border-radius: var(--inputs-radius); box-shadow: 0 0 0 var(--inputs-border-width) rgba(var(--color-foreground), var(--inputs-border-opacity)); transition: box-shadow var(--duration-short) ease; z-index: 1; } .quantity:before { background: rgb(var(--color-background)); pointer-events: none; content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: var(--inputs-radius-outset); box-shadow: var(--inputs-shadow-horizontal-offset) var(--inputs-shadow-vertical-offset) var(--inputs-shadow-blur-radius) rgba(var(--color-shadow), var(--inputs-shadow-opacity)); z-index: -1; } .quantity__input { color: currentColor; font-family: var(--font-body-family); font-style: var(--font-body-style); font-weight: var(--font-body-weight); font-size: 1.6rem; font-weight: 500; opacity: 0.85; text-align: center; background-color: transparent; border: 0; padding: 0 0.5rem; width: 100%; flex-grow: 1; -webkit-appearance: none; appearance: none; } .quantity__button { width: calc(4.5rem / var(--font-body-scale)); flex-shrink: 0; font-size: 1.8rem; border: 0; background-color: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; color: rgb(var(--color-foreground)); padding: 0; } .quantity__button:first-child { margin-left: calc(var(--inputs-border-width)); } .quantity__button:last-child { margin-right: calc(var(--inputs-border-width)); } .quantity__button .svg-wrapper { width: 1rem; pointer-events: none; } .quantity__button:focus-visible, .quantity__input:focus-visible { background-color: rgb(var(--color-background)); z-index: 2; } .quantity__button:focus, .quantity__input:focus { background-color: rgb(var(--color-background)); z-index: 2; } .quantity__button:not(:focus-visible):not(.focused), .quantity__input:not(:focus-visible):not(.focused) { box-shadow: inherit; background-color: inherit; } .quantity__input:-webkit-autofill, .quantity__input:-webkit-autofill:hover, .quantity__input:-webkit-autofill:active { box-shadow: 0 0 0 10rem rgb(var(--color-background)) inset !important; -webkit-box-shadow: 0 0 0 10rem rgb(var(--color-background)) inset !important; } .quantity__input::-webkit-outer-spin-button, .quantity__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .quantity__input[type='number'] { -moz-appearance: textfield; } .quantity__rules { margin-top: 0.5rem; position: relative; font-size: 1.2rem; } .quantity__rules .caption { display: inline-block; margin-top: 0; margin-bottom: 0; } .quantity__rules .divider + .divider::before { content: '\2022'; margin: 0 0.5rem; } .quantity__rules-cart { position: relative; } .product__info-container .loading__spinner:not(.hidden) ~ *, .quantity__rules-cart .loading__spinner:not(.hidden) ~ * { visibility: hidden; } /* component-modal */ .modal__toggle { list-style-type: none; } .modal__toggle-close { display: none; } .modal__toggle-open { display: flex; } .modal__close-button.link { display: flex; justify-content: center; align-items: center; padding: 0rem; height: 4.4rem; width: 4.4rem; background-color: transparent; } .modal__close-button .icon { width: 1.7rem; height: 1.7rem; } .modal__content { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgb(var(--color-background)); z-index: 4; display: flex; justify-content: center; align-items: center; } .media-modal { cursor: zoom-out; } .media-modal .deferred-media { cursor: initial; } /* component-cart-count-bubble */ .cart-count-bubble:empty { display: none; } .cart-count-bubble { position: absolute; background-color: rgb(var(--color-button)); color: rgb(var(--color-button-text)); height: 1.7rem; width: 1.7rem; border-radius: 100%; display: flex; justify-content: center; align-items: center; font-size: 0.9rem; bottom: 0.8rem; left: 2.2rem; line-height: calc(1 + 0.1 / var(--font-body-scale)); } /* utility-bar */ .utility-bar { height: 100%; } .utility-bar--bottom-border { border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.08); } @media screen and (min-width: 990px) { .utility-bar--bottom-border-social-only { border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.08); } } .utility-bar__grid { display: grid; grid-template-columns: 1fr; grid-template-areas: 'announcements'; } .utility-bar__grid .list-social { justify-content: flex-start; align-content: center; margin-left: -1.2rem; grid-area: social-icons; } @media screen and (max-width: 989px) { .utility-bar .utility-bar__grid .list-social { display: none; } } .utility-bar .list-social__item .icon { scale: 0.9; } @media screen and (min-width: 990px) { .utility-bar__grid--3-col { grid-template-columns: 3fr 4fr 3fr; grid-template-areas: 'social-icons announcements language-currency'; } .utility-bar__grid--2-col { grid-template-columns: 1fr 1fr; grid-template-areas: 'social-icons language-currency'; } .announcement-bar.announcement-bar--one-announcement, .announcement-bar--one-announcement .announcement-bar__link { width: fit-content; margin: auto; } } .announcement-bar, .announcement-bar__announcement { color: rgb(var(--color-foreground)); width: 100%; height: 100%; display: flex; justify-content: center; flex-wrap: wrap; align-content: center; grid-area: announcements; } .announcement-bar .slider--everywhere { margin-bottom: 0; scroll-behavior: auto; } .utility-bar__grid .announcement-bar-slider { width: 100%; } .utility-bar__grid .announcement-bar-slider { width: 100%; } .announcement-bar-slider, .announcement-bar-slider .slider { width: 100%; } .announcement-bar .slider-button--next { margin-right: -1.5rem; min-width: 44px; } .announcement-bar .slider-button--prev { margin-left: -1.5rem; min-width: 44px; } .announcement-bar .slider-button--next:focus-visible, .announcement-bar .slider-button--prev:focus-visible, .utility-bar .list-social__link:focus-visible { outline-offset: -0.3rem; box-shadow: 0 0 0 -0.2rem rgb(var(--color-foreground)); } .localization-wrapper { grid-area: language-currency; align-self: center; display: flex; justify-content: flex-end; } .localization-wrapper .localization-selector + .disclosure__list-wrapper { animation: animateMenuOpen var(--duration-default) ease; } .utility-bar .localization-wrapper .disclosure .localization-form__select, .utility-bar .localization-wrapper .disclosure__link { font-size: calc(var(--font-heading-scale) * 1.3rem); } @media screen and (min-width: 990px) { body:has(.section-header .header:not(.drawer-menu)) .utility-bar .page-width { padding-left: 5rem; padding-right: 5rem; } .announcement-bar-slider { width: 60%; } .announcement-bar .slider-button { height: 3.8rem; } } .announcement-bar__link { display: flex; width: 100%; text-decoration: none; height: 100%; justify-content: center; align-items: center; } .announcement-bar__link:hover { text-decoration: underline; } .announcement-bar__link .icon-arrow { display: inline-block; pointer-events: none; margin-left: 0.8rem; vertical-align: middle; margin-bottom: 0.2rem; } .announcement-bar__message { text-align: center; padding: 1rem 0; margin: 0; letter-spacing: 0.1rem; min-height: 3.8rem; } .announcement-bar-slider--fade-in-next .announcement-bar__message, .announcement-bar-slider--fade-in-previous .announcement-bar__message, .announcement-bar-slider--fade-out-next .announcement-bar__message, .announcement-bar-slider--fade-out-previous .announcement-bar__message { animation-duration: var(--duration-announcement-bar); animation-timing-function: ease-in-out; animation-fill-mode: forwards; } .announcement-bar-slider--fade-in-next .announcement-bar__message { --announcement-translate-from: -1.5rem; /* Prevent flicker */ opacity: 0; animation-name: translateAnnouncementSlideIn; animation-delay: var(--duration-announcement-bar); } .announcement-bar-slider--fade-in-previous .announcement-bar__message { --announcement-translate-from: 1.5rem; /* Prevent flicker */ opacity: 0; animation-name: translateAnnouncementSlideIn; animation-delay: var(--duration-announcement-bar); } .announcement-bar-slider--fade-out-next .announcement-bar__message { --announcement-translate-to: 1.5rem; animation-name: translateAnnouncementSlideOut; } .announcement-bar-slider--fade-out-previous .announcement-bar__message { --announcement-translate-to: -1.5rem; animation-name: translateAnnouncementSlideOut; } @keyframes translateAnnouncementSlideIn { 0% { opacity: 0; transform: translateX(var(--announcement-translate-from)); } 100% { opacity: 1; transform: translateX(0); } } @keyframes translateAnnouncementSlideOut { 0% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(var(--announcement-translate-to)); } } /* section-header */ .section-header.shopify-section-group-header-group { z-index: 3; } .shopify-section-header-sticky { position: sticky; top: 0; } .shopify-section-header-hidden { top: calc(-1 * var(--header-height)); } .shopify-section-header-hidden.menu-open { top: 0; } .section-header.animate { transition: top 0.15s ease-out; } .shopify-section-group-header-group { z-index: 4; } .section-header ~ .shopify-section-group-header-group { z-index: initial; } /* Main Header Layout */ .header-wrapper { display: block; position: relative; background-color: rgb(var(--color-background)); } .header-wrapper--border-bottom { border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.08); } .header { display: grid; grid-template-areas: 'left-icons heading icons'; grid-template-columns: 1fr 2fr 1fr; align-items: center; } @media screen and (max-width: 749px) { .header--has-app { grid-template-columns: auto 1fr auto; } } @media screen and (min-width: 990px) { .header { grid-template-columns: 1fr auto 1fr; } .header--top-left, .header--middle-left:not(.header--has-menu) { grid-template-areas: 'heading icons' 'navigation navigation'; grid-template-columns: 1fr auto; } .header--top-left.drawer-menu, .header--middle-left.drawer-menu { grid-template-areas: 'navigation heading icons'; grid-template-columns: auto 1fr auto; column-gap: 1rem; } .header--middle-left { grid-template-areas: 'heading navigation icons'; grid-template-columns: auto auto 1fr; column-gap: 2rem; } .header--middle-center:not(.drawer-menu) { grid-template-areas: 'navigation heading icons'; grid-template-columns: 1fr auto 1fr; column-gap: 2rem; } .header--middle-center a.header__heading-link { text-align: center; } .header--top-center { grid-template-areas: 'left-icons heading icons' 'navigation navigation navigation'; } .header--top-center.drawer-menu { grid-template-areas: 'left-icons heading icons'; grid-template-columns: 1fr auto 1fr; } .header:not(.header--middle-left, .header--middle-center) .header__inline-menu { margin-top: 1.05rem; } } .header *[tabindex='-1']:focus { outline: none; } .header__heading { margin: 0; line-height: 0; } .header > .header__heading-link { line-height: 0; } .header__heading, .header__heading-link { grid-area: heading; justify-self: center; } .header__heading-link { display: inline-block; padding: 0.75rem; text-decoration: none; word-break: break-word; } .header__heading-link:hover .h2 { color: rgb(var(--color-foreground)); } .header__heading-link .h2 { line-height: 1; color: rgba(var(--color-foreground), 0.75); } .header__heading-logo { height: auto; max-width: 100%; } .header__heading-logo-wrapper { width: 100%; display: inline-block; transition: width 0.3s cubic-bezier(0.52, 0, 0.61, 0.99); } @media screen and (max-width: 989px) { .header__heading, .header__heading-link { text-align: center; } .header--mobile-left .header__heading, .header--mobile-left .header__heading-link { text-align: left; justify-self: start; } .header--mobile-left { grid-template-columns: auto 2fr 1fr; } } @media screen and (min-width: 990px) { .header--middle-left .header__heading-link, .header--top-left .header__heading-link { margin-left: -0.75rem; } .header__heading, .header__heading-link { justify-self: start; } .header--middle-center .header__heading-link, .header--middle-center .header__heading { justify-self: center; text-align: center; } .header--top-center .header__heading-link, .header--top-center .header__heading { justify-self: center; text-align: center; } } /* Header icons */ .header__icons { display: flex; grid-area: icons; justify-self: end; padding-right: 0.8rem; } .header__icons .shopify-app-block { max-width: 4.4rem; max-height: 4.4rem; overflow: hidden; } .header__icon:not(.header__icon--summary), .header__icon span { display: flex; align-items: center; justify-content: center; } .header__icon { color: rgb(var(--color-foreground)); } .header__icon span { height: 100%; } .header__icon .svg-wrapper { width: 44px; height: 44px; } .header__icon::after { content: none; } .header__icon:hover .icon, .modal__close-button:hover .icon { transform: scale(1.07); } .header__icon .icon { height: 2rem; width: 2rem; fill: none; vertical-align: middle; } .header__icon, .header__icon--cart .icon { height: 4.4rem; width: 4.4rem; padding: 0; } .header__icon--cart { position: relative; margin-right: -1.2rem; } .header__icon--menu[aria-expanded='true']::before { content: ''; top: 100%; left: 0; height: calc(var(--viewport-height, 100vh) - (var(--header-bottom-position, 100%))); width: 100%; display: block; position: absolute; background: rgba(var(--color-foreground), 0.5); } .header__icon--account shop-user-avatar { --shop-avatar-size: 2.8rem; } details .header__icon-close { display: none; } details[open] .header__icon-close { display: inline-block; } account-icon { display: flex; } /* Search */ menu-drawer + .header__search { display: none; } .header > .header__search { grid-area: left-icons; justify-self: start; } .header--top-center.drawer-menu > .header__search { margin-left: 3.2rem; } .header--top-center header-drawer { grid-area: left-icons; } .header:not(.header--has-menu) * > .header__search { display: none; } .header__search { display: inline-flex; line-height: 0; } .header--top-center > .header__search { display: none; } .header--top-center * > .header__search { display: inline-flex; } @media screen and (min-width: 990px) { .header:not(.header--top-center) * > .header__search, .header--top-center > .header__search { display: inline-flex; } .header:not(.header--top-center) > .header__search, .header--top-center * > .header__search { display: none; } } details[open] > .search-modal { opacity: 1; animation: animateMenuOpen var(--duration-default) ease; } details[open] .modal-overlay { display: block; } details[open] .modal-overlay::after { position: absolute; content: ''; background-color: rgb(var(--color-foreground), 0.5); top: 100%; left: 0; right: 0; height: 100vh; } .search-modal { opacity: 0; border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.08); min-height: calc(100% + var(--inputs-margin-offset) + (2 * var(--inputs-border-width))); height: 100%; } .search-modal__content { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 0 5rem 0 1rem; line-height: calc(1 + 0.8 / var(--font-body-scale)); position: relative; } .search-modal__content-bottom { bottom: calc((var(--inputs-margin-offset) / 2)); } .search-modal__content-top { top: calc((var(--inputs-margin-offset) / 2)); } .search-modal__form { width: 100%; } .search-modal__close-button { position: absolute; right: 0.3rem; } @media screen and (min-width: 750px) { .search-modal__close-button { right: 1rem; } .search-modal__content { padding: 0 6rem; } } @media screen and (min-width: 990px) { .search-modal__form { max-width: 74.2rem; } .search-modal__close-button { position: initial; margin-left: 0.5rem; } } /* Header menu drawer */ .header__icon--menu .icon { display: block; position: absolute; opacity: 1; transform: scale(1); transition: transform 150ms ease, opacity 150ms ease; } details:not([open]) > .header__icon--menu .icon-close, details[open] > .header__icon--menu .icon-hamburger { visibility: hidden; opacity: 0; transform: scale(0.8); } .js details[open]:not(.menu-opening) > .header__icon--menu .icon-close { visibility: hidden; } .js details[open]:not(.menu-opening) > .header__icon--menu .icon-hamburger { visibility: visible; opacity: 1; transform: scale(1.07); } .js details > .header__submenu { opacity: 0; transform: translateY(-1.5rem); } details[open] > .header__submenu { animation: animateMenuOpen var(--duration-default) ease; animation-fill-mode: forwards; z-index: 1; } @media (prefers-reduced-motion) { details[open] > .header__submenu { opacity: 1; transform: translateY(0); } } /* Header menu */ .header__inline-menu { margin-left: -1.2rem; grid-area: navigation; display: none; } .header--top-center .header__inline-menu, .header--top-center .header__heading-link { margin-left: 0; } @media screen and (min-width: 990px) { .header__inline-menu { display: block; } .header--top-center .header__inline-menu { justify-self: center; } .header--top-center .header__inline-menu > .list-menu--inline { justify-content: center; } .header--middle-left .header__inline-menu { margin-left: 0; } } .header__menu { padding: 0 1rem; } .header__menu-item { padding: 1.2rem; text-decoration: none; color: rgba(var(--color-foreground), 0.75); } .header__menu-item:hover { color: rgb(var(--color-foreground)); } .header__menu-item span { transition: text-decoration var(--duration-short) ease; } .header__menu-item:hover span { text-decoration: underline; text-underline-offset: 0.3rem; } details[open] > .header__menu-item { text-decoration: underline; } details[open]:hover > .header__menu-item { text-decoration-thickness: 0.2rem; } details[open] > .header__menu-item .icon-caret { transform: rotate(180deg); } .header__active-menu-item { transition: text-decoration-thickness var(--duration-short) ease; color: rgb(var(--color-foreground)); text-decoration: underline; text-underline-offset: 0.3rem; } .header__menu-item:hover .header__active-menu-item { text-decoration-thickness: 0.2rem; } .header__submenu { transition: opacity var(--duration-default) ease, transform var(--duration-default) ease; } .global-settings-popup, .header__submenu.global-settings-popup { border-radius: var(--popup-corner-radius); border-color: rgba(var(--color-foreground), var(--popup-border-opacity)); border-style: solid; border-width: var(--popup-border-width); box-shadow: var(--popup-shadow-horizontal-offset) var(--popup-shadow-vertical-offset) var(--popup-shadow-blur-radius) rgba(var(--color-shadow), var(--popup-shadow-opacity)); z-index: -1; } .header__submenu.list-menu { padding: 1rem 0; } .header__submenu .header__submenu { background-color: rgba(var(--color-foreground), 0.03); padding: 1rem 0; margin: 1rem 0; } .header__submenu .header__menu-item:after { right: 2rem; } .header__submenu .header__menu-item { justify-content: space-between; padding: 0.8rem 2rem; } .header__submenu .header__menu-item:hover { text-decoration-line: underline; } .header__menu-item .icon-caret { right: 0.8rem; } .header__submenu .icon-caret { flex-shrink: 0; margin-left: 1rem; position: static; } header-menu > details, details-disclosure > details { position: relative; } @keyframes animateMenuOpen { 0% { opacity: 0; transform: translateY(-1.5rem); } 100% { opacity: 1; transform: translateY(0); } } .overflow-hidden-mobile, .overflow-hidden-tablet, .overflow-hidden-desktop { overflow: hidden; } @media screen and (min-width: 750px) { .overflow-hidden-mobile { overflow: auto; } } @media screen and (min-width: 990px) { .overflow-hidden-tablet { overflow: auto; } } .badge { border: 1px solid transparent; border-radius: var(--badge-corner-radius); display: inline-block; font-size: 1.2rem; letter-spacing: 0.1rem; line-height: 1; padding: 0.5rem 1.3rem 0.6rem 1.3rem; text-align: center; background-color: rgb(var(--color-badge-background)); border-color: rgba(var(--color-badge-border), var(--alpha-badge-border)); color: rgb(var(--color-badge-foreground)); word-break: break-word; } .gradient { background: rgb(var(--color-background)); background: var(--gradient-background); background-attachment: fixed; } @media screen and (forced-colors: active) { .icon { color: CanvasText; fill: CanvasText !important; } .icon-close-small path { stroke: CanvasText; } } .ratio { display: flex; position: relative; align-items: stretch; } .ratio::before { content: ''; width: 0; height: 0; padding-bottom: var(--ratio-percent); } .content-container { border-radius: var(--text-boxes-radius); border: var(--text-boxes-border-width) solid rgba(var(--color-foreground), var(--text-boxes-border-opacity)); position: relative; } .content-container:after { content: ''; position: absolute; top: calc(var(--text-boxes-border-width) * -1); right: calc(var(--text-boxes-border-width) * -1); bottom: calc(var(--text-boxes-border-width) * -1); left: calc(var(--text-boxes-border-width) * -1); border-radius: var(--text-boxes-radius); box-shadow: var(--text-boxes-shadow-horizontal-offset) var(--text-boxes-shadow-vertical-offset) var(--text-boxes-shadow-blur-radius) rgba(var(--color-shadow), var(--text-boxes-shadow-opacity)); z-index: -1; } .content-container--full-width:after { left: 0; right: 0; border-radius: 0; } @media screen and (max-width: 749px) { .content-container--full-width-mobile { border-left: none; border-right: none; border-radius: 0; } .content-container--full-width-mobile:after { display: none; } } .global-media-settings { position: relative; border: var(--media-border-width) solid rgba(var(--color-foreground), var(--media-border-opacity)); border-radius: var(--media-radius); overflow: visible !important; background-color: rgb(var(--color-background)); } .global-media-settings:after { content: ''; position: absolute; top: calc(var(--media-border-width) * -1); right: calc(var(--media-border-width) * -1); bottom: calc(var(--media-border-width) * -1); left: calc(var(--media-border-width) * -1); border-radius: var(--media-radius); box-shadow: var(--media-shadow-horizontal-offset) var(--media-shadow-vertical-offset) var(--media-shadow-blur-radius) rgba(var(--color-shadow), var(--media-shadow-opacity)); z-index: -1; pointer-events: none; } .global-media-settings--no-shadow { overflow: hidden !important; } .global-media-settings--no-shadow:after { content: none; } .global-media-settings img, .global-media-settings iframe, .global-media-settings model-viewer, .global-media-settings video, .global-media-settings .placeholder-svg { border-radius: calc(var(--media-radius) - var(--media-border-width)); } .content-container--full-width, .global-media-settings--full-width, .global-media-settings--full-width img, .global-media-settings--full-width video, .global-media-settings--full-width iframe, .global-media-settings--full-width .placeholder-svg { border-radius: 0; border-left: none; border-right: none; } /* check for flexbox gap in older Safari versions */ @supports not (inset: 10px) { .grid { margin-left: calc(-1 * var(--grid-mobile-horizontal-spacing)); } .grid__item { padding-left: var(--grid-mobile-horizontal-spacing); padding-bottom: var(--grid-mobile-vertical-spacing); } @media screen and (min-width: 750px) { .grid { margin-left: calc(-1 * var(--grid-desktop-horizontal-spacing)); } .grid__item { padding-left: var(--grid-desktop-horizontal-spacing); padding-bottom: var(--grid-desktop-vertical-spacing); } } .grid--gapless .grid__item { padding-left: 0; padding-bottom: 0; } @media screen and (min-width: 749px) { .grid--peek .grid__item { padding-left: var(--grid-mobile-horizontal-spacing); } } .product-grid .grid__item { padding-bottom: var(--grid-mobile-vertical-spacing); } @media screen and (min-width: 750px) { .product-grid .grid__item { padding-bottom: var(--grid-desktop-vertical-spacing); } } } .font-body-bold { font-weight: var(--font-body-weight-bold); } /* outline and border styling for Windows High Contrast Mode */ @media (forced-colors: active) { .button, .shopify-challenge__button, .customer button { border: transparent solid 1px; } .button:focus-visible, .button:focus, .button.focused, .shopify-payment-button__button--unbranded:focus-visible, .shopify-payment-button [role='button']:focus-visible, .shopify-payment-button__button--unbranded:focus, .shopify-payment-button [role='button']:focus { outline: solid transparent 1px; } .field__input:focus, .select__select:focus, .customer .field input:focus, .customer select:focus, .localization-form__select:focus.localization-form__select:after { outline: transparent solid 1px; } .localization-form__select:focus { outline: transparent solid 1px; } } .rte:after { clear: both; content: ''; display: block; } .rte > *:first-child { margin-top: 0; } .rte > *:last-child { margin-bottom: 0; } .rte table { table-layout: fixed; } @media screen and (min-width: 750px) { .rte table td { padding-left: 1.2rem; padding-right: 1.2rem; } } .rte img { height: auto; max-width: 100%; border: var(--media-border-width) solid rgba(var(--color-foreground), var(--media-border-opacity)); border-radius: var(--media-radius); box-shadow: var(--media-shadow-horizontal-offset) var(--media-shadow-vertical-offset) var(--media-shadow-blur-radius) rgba(var(--color-shadow), var(--media-shadow-opacity)); margin-bottom: var(--media-shadow-vertical-offset); } .rte ul, .rte ol { list-style-position: inside; padding-left: 2rem; } .rte li { list-style: inherit; } .rte li:last-child { margin-bottom: 0; } .rte a { color: rgba(var(--color-link), var(--alpha-link)); text-underline-offset: 0.3rem; text-decoration-thickness: 0.1rem; transition: text-decoration-thickness var(--duration-short) ease; } .rte a:hover { color: rgb(var(--color-link)); text-decoration-thickness: 0.2rem; } .rte blockquote { display: inline-flex; } .rte blockquote > * { margin: -0.5rem 0 -0.5rem 0; } /* Image mask global styles */ .shape--mask { display: block; height: 0; width: 0; } .shape--arch { clip-path: url('#Shape-Arch'); } .shape--blob { clip-path: polygon(var(--shape--blob-1)); } .shape--chevronleft { clip-path: polygon(100% 0%, 85% 50%, 100% 100%, 15% 100%, 0% 50%, 15% 0%); } .shape--chevronright { clip-path: polygon(85% 0%, 100% 50%, 85% 100%, 0% 100%, 15% 50%, 0% 0%); } .shape--circle { clip-path: circle(closest-side); } .shape--diamond { clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); } .shape--parallelogram { clip-path: polygon(15% 0, 100% 0%, 85% 100%, 0% 100%); } .shape--round { clip-path: ellipse(45% 45% at 50% 50%); } /* Fixed background */ .animate--fixed { clip-path: inset(0); } .animate--fixed > img:not(.zoom):not(.deferred-media__poster-button), .animate--fixed > svg:not(.zoom):not(.deferred-media__poster-button) { position: fixed; height: 100vh; } /* Zoom in image on scroll */ .animate--zoom-in { --zoom-in-ratio: 1; } .animate--zoom-in > img, .animate--zoom-in > .svg-wrapper { transition: scale var(--duration-short) linear; scale: var(--zoom-in-ratio); } /* Animations */ @media (prefers-reduced-motion: no-preference) { .animate--ambient > img, .animate--ambient > .svg-wrapper { animation: animateAmbient 30s linear infinite; } @keyframes animateAmbient { 0% { transform: rotate(0deg) translateX(1em) rotate(0deg) scale(1.2); } 100% { transform: rotate(360deg) translateX(1em) rotate(-360deg) scale(1.2); } } .scroll-trigger.animate--fade-in, .scroll-trigger.animate--slide-in { opacity: 0.01; } .scroll-trigger.animate--slide-in { transform: translateY(2rem); } .scroll-trigger:not(.scroll-trigger--offscreen).animate--fade-in { opacity: 1; animation: var(--animation-fade-in); } .scroll-trigger:not(.scroll-trigger--offscreen).animate--slide-in { animation: var(--animation-slide-in); animation-delay: calc(var(--animation-order) * 75ms); } .scroll-trigger.scroll-trigger--design-mode.animate--fade-in, .scroll-trigger.scroll-trigger--design-mode.animate--slide-in, .scroll-trigger.scroll-trigger--design-mode .slider, .scroll-trigger:not(.scroll-trigger--offscreen).scroll-trigger--cancel { opacity: 1; animation: none; transition: none; transform: none; } .scroll-trigger.scroll-trigger--design-mode.animate--slide-in { transform: translateY(0); } @keyframes slideIn { from { transform: translateY(2rem); opacity: 0.01; } to { transform: translateY(0); opacity: 1; } } @keyframes fadeIn { from { opacity: 0.01; } to { opacity: 1; } } } /* Element Hovers: Vertical Lift, 3d Lift */ @media (prefers-reduced-motion: no-preference) and (hover: hover) { .animate--hover-3d-lift .card-wrapper .card--card, .animate--hover-3d-lift .card-wrapper .card--standard .card__inner, .animate--hover-3d-lift .button:not(.button--tertiary), .animate--hover-3d-lift .shopify-challenge__button, .animate--hover-3d-lift .customer button, .animate--hover-3d-lift .shopify-payment-button__button, .animate--hover-3d-lift .deferred-media .deferred-media__poster-button { transition: transform var(--duration-long) ease, box-shadow var(--duration-long) ease; transform-origin: center; } .animate--hover-3d-lift .card-wrapper:hover .card--card, .animate--hover-3d-lift .card-wrapper:hover .card--standard .card__inner, .animate--hover-3d-lift .button:not(.button--tertiary):not([disabled]):hover, .animate--hover-3d-lift .shopify-challenge__button:not([disabled]):hover, .animate--hover-3d-lift .customer button:not([disabled]):hover, .animate--hover-3d-lift .shopify-payment-button__button:hover, .animate--hover-3d-lift .deferred-media:hover .deferred-media__poster-button { transition: transform var(--duration-extended) ease, box-shadow var(--duration-long) ease; /* Slow the card transition speed while hover is active. */ transform: rotate(1deg); box-shadow: -1rem -1rem 1rem -1rem rgba(0, 0, 0, 0.05), 1rem 1rem 1rem -1rem rgba(0, 0, 0, 0.05), 0 0 0.5rem 0 rgba(255, 255, 255, 0), 0 2rem 3.5rem -2rem rgba(0, 0, 0, 0.5); } .animate--hover-3d-lift .deferred-media:hover .deferred-media__poster-button { transform: translate(-50%, -50%) scale(1.05); /* Apply a specialized transform to the video play button. */ } .animate--hover-3d-lift .collage__item .card-wrapper:hover .card--card, .animate--hover-3d-lift .collage__item .card-wrapper:hover .card--standard .card__inner { transform: rotate(0.5deg); /* Less intense rotation for collage items. */ } .animate--hover-3d-lift .product-grid .grid__item:hover, .animate--hover-3d-lift .collection-list .grid__item:hover, .animate--hover-3d-lift .collage__item:hover, .animate--hover-3d-lift .blog-articles .article:hover, .animate--hover-3d-lift .complementary-slide li:hover { z-index: 2; /* Make sure the hovered card is the topmost card. */ } .animate--hover-3d-lift .product-grid { isolation: isolate; /* Ensure z-index changes here don't negatively effect other UI stacking. */ } .animate--hover-3d-lift .card-wrapper .card--shape.card--standard:not(.card--text) .card__inner { box-shadow: none; transition: transform var(--duration-long) ease, filter var(--duration-long) ease; } .animate--hover-3d-lift .card-wrapper:hover .card--shape.card--standard:not(.card--text) .card__inner { transition: transform calc(2 * var(--duration-extended)) ease, filter var(--duration-long) ease; /* Slow the card transition speed while hover is active. */ filter: drop-shadow(0rem 2rem 2rem rgba(0, 0, 0, 0.15)) drop-shadow(0rem 1rem 1rem rgba(0, 0, 0, 0.15)); } .animate--hover-3d-lift .card-wrapper:hover .card--card:after, .animate--hover-3d-lift .card-wrapper:hover .card--standard .card__inner:after, .animate--hover-3d-lift .card-wrapper:hover .card--shape.card--standard:not(.card--text) .card__inner .card__media:before { background-image: var(--easter-egg); background-size: 250px 250px; mix-blend-mode: color-dodge; pointer-events: none; z-index: 2; } .animate--hover-3d-lift .card-wrapper:hover .card--shape.card--standard:not(.card--text) .card__inner .card__media:before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; } .animate--hover-3d-lift .card-wrapper .card--card:before, .animate--hover-3d-lift .card-wrapper .card--standard .card__media:after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: 0; pointer-events: none; transition: background-position calc(2 * var(--duration-extended)) ease, opacity var(--duration-default) ease; mix-blend-mode: overlay; background-size: 400% 100%; background-position: 90% 0; background-repeat: no-repeat; background-image: linear-gradient( 135deg, rgba(255, 255, 255, 0) 45%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 55% ); } .animate--hover-3d-lift .card-wrapper:hover .card--card:before, .animate--hover-3d-lift .card-wrapper:hover .card--standard .card__media:after { opacity: 0.2; transition: background-position 6s ease, opacity var(--duration-long) ease; background-position: left; z-index: 2; } :root { --easter-egg: none; --sparkle: url('./sparkle.gif'); } .animate--hover-vertical-lift .button:not(.button--tertiary), .animate--hover-vertical-lift .shopify-challenge__button, .animate--hover-vertical-lift .customer button, .animate--hover-vertical-lift .shopify-payment-button__button { transition: transform var(--duration-default) var(--ease-out-slow); } .animate--hover-vertical-lift .card-wrapper .card--card, .animate--hover-vertical-lift .card-wrapper .card--standard .card__inner { transition: transform var(--duration-medium) var(--ease-out-slow); } .animate--hover-vertical-lift .card-wrapper:hover .card--card, .animate--hover-vertical-lift .card-wrapper:hover .card--standard .card__inner { transform: translateY(-0.75rem); } .animate--hover-vertical-lift .card-wrapper:active .card--card, .animate--hover-vertical-lift .card-wrapper:active .card--standard .card__inner { transform: translateY(-0.5rem); } .animate--hover-vertical-lift .button:not(.button--tertiary):not([disabled]):hover, .animate--hover-vertical-lift .shopify-challenge__button:not([disabled]):hover, .animate--hover-vertical-lift .customer button:not([disabled]):hover, .animate--hover-vertical-lift .shopify-payment-button__button:hover { transform: translateY(-0.25rem); } .animate--hover-vertical-lift .button:not(.button--tertiary):not([disabled]):active, .animate--hover-vertical-lift .shopify-challenge__button:not([disabled]):active, .animate--hover-vertical-lift .customer button:not([disabled]):active, .animate--hover-vertical-lift .shopify-payment-button__button:active { transform: translateY(0); } .animate--hover-vertical-lift .button:not([disabled]):hover:after, .animate--hover-vertical-lift .customer button:not([disabled]):hover:after, .animate--hover-vertical-lift .shopify-payment-button__button:not([disabled]):hover:after { --border-offset: 0.3px; /* Default is 1.3px as defined above in this file. This removes 1px to prevent the border from growing on buttons when this effect is on. */ box-shadow: 0 0 0 calc(var(--buttons-border-width) + var(--border-offset)) rgba(var(--color-button-text), var(--border-opacity)), 0 0 0 var(--buttons-border-width) rgba(var(--color-button), var(--alpha-button-background)); } .animate--hover-vertical-lift .button:not([disabled]).button--secondary:hover:after { --border-offset: 0px; /* Prevent the border from growing on buttons when this effect is on. */ } } /* Loading spinner */ .loading__spinner { position: absolute; z-index: 1; width: 1.8rem; } .loading__spinner { width: 1.8rem; display: inline-block; } .spinner { animation: rotator 1.4s linear infinite; } @keyframes rotator { 0% { transform: rotate(0deg); } 100% { transform: rotate(270deg); } } .path { stroke-dasharray: 280; stroke-dashoffset: 0; transform-origin: center; stroke: rgb(var(--color-foreground)); animation: dash 1.4s ease-in-out infinite; } @media screen and (forced-colors: active) { .path { stroke: CanvasText; } } @keyframes dash { 0% { stroke-dashoffset: 280; } 50% { stroke-dashoffset: 75; transform: rotate(135deg); } 100% { stroke-dashoffset: 280; transform: rotate(450deg); } } .loading__spinner:not(.hidden) + .cart-item__price-wrapper, .loading__spinner:not(.hidden) ~ cart-remove-button { opacity: 50%; } .loading__spinner:not(.hidden) ~ cart-remove-button { pointer-events: none; cursor: default; } /* Progress bar */ .progress-bar-container { width: 100%; margin: auto; } .progress-bar { height: 0.13rem; width: 100%; } .progress-bar-value { width: 100%; height: 100%; background-color: rgb(var(--color-foreground)); animation: indeterminateAnimation var(--duration-extra-longer) infinite ease-in-out; transform-origin: 0; } .progress-bar .progress-bar-value { display: block; } @keyframes indeterminateAnimation { 0% { transform: translateX(-20%) scaleX(0); } 40% { transform: translateX(30%) scaleX(0.7); } 100% { transform: translateX(100%) scaleX(0); } } /* ========================================================= FEMANUAL SHARED DESIGN TOKENS Change these values once to update custom Femanual sections. ========================================================= */ @import url('https://fonts.googleapis.com/css2?family=Allura&display=swap'); :root { --fm-plum: #5D0596; --fm-pink: #d13cb5; --fm-navy: #1f2d4f; --fm-body: #263858; --fm-rose: #8b3a6d; --fm-page-background: #fff9fc; --fm-blush-glow: rgba(245, 194, 226, 0.52); --fm-plum-glow: rgba(222, 205, 240, 0.46); --fm-white-glow: rgba(255, 255, 255, 0.96); --fm-card-background: rgba(255, 255, 255, 0.82); --fm-border: rgba(93, 5, 150, 0.16); } /* ========================================= FEMANUAL GLOBAL PORCELAIN BACKGROUND ========================================= */ /* ========================================= FEMANUAL GLOBAL PORCELAIN BACKGROUND TEST: EARLIER FOOTER-STYLE VERSION ========================================= */ /* ========================================= FEMANUAL GLOBAL PORCELAIN BACKGROUND TEST: EARLIER FOOTER-STYLE VERSION ========================================= */ /* ========================================= FEMANUAL GLOBAL PORCELAIN BACKGROUND ========================================= */ html { background: #fcfcfd; } body { background: transparent !important; } #MainContent { position: relative; isolation: isolate; background: transparent !important; } #MainContent::before { content: ""; position: fixed; z-index: -1; inset: 0; pointer-events: none; background: linear-gradient( 90deg, rgba(239, 169, 216, 0.20) 0%, rgba(239, 169, 216, 0.08) 8%, #fcfcfd 16%, #fcfcfd 84%, rgba(181, 108, 185, 0.07) 92%, rgba(181, 108, 185, 0.14) 100% ); } /* Keep custom section backgrounds transparent */ #MainContent > .shopify-section, #MainContent .fm-product-hero, #MainContent .fm-reviews { background: transparent !important; } /* ========================================= REMOVE SHOPIFY SECTION-SCHEME BACKGROUNDS BUT KEEP THE SCHEME'S TEXT + BUTTON COLORS ========================================= */ #MainContent > .shopify-section > .gradient, #MainContent > .shopify-section > [class*="color-"].gradient, #MainContent > .shopify-section > [class*="color-scheme"] { background: transparent !important; background-color: transparent !important; background-image: none !important; } /* Custom Liquid sections sometimes add one more inner wrapper */ #MainContent > .shopify-section > .gradient > .custom-liquid, #MainContent > .shopify-section .custom-liquid { background: transparent !important; background-color: transparent !important; } /* ========================================= FEATURED PRODUCT Remove its Shopify pink color-scheme background ========================================= */ #MainContent .shopify-section:has(.featured-product), #MainContent .shopify-section:has(.featured-product) > section, #MainContent .shopify-section:has(.featured-product) > div, #MainContent .shopify-section:has(.featured-product) .gradient, #MainContent .shopify-section:has(.featured-product) [class*="color-"], #MainContent .featured-product, #MainContent .featured-product.product { background: transparent !important; background-color: transparent !important; background-image: none !important; } /* ========================================= HEADER Let global page background continue ========================================= */ .shopify-section-header-sticky, .section-header, .header-wrapper, .header-wrapper.gradient, .header, .header__wrapper { background: transparent !important; background-color: transparent !important; background-image: none !important; box-shadow: none !important; } /* Femanual header: transparent at top, porcelain when sticky */ .section-header .header-wrapper, .shopify-section-group-header-group .header-wrapper { background: transparent !important; background-color: transparent !important; box-shadow: none !important; border-bottom: 1px solid transparent !important; transition: background-color 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; } /* Header after scrolling */ .section-header.shopify-section-header-sticky .header-wrapper, .shopify-section-group-header-group.shopify-section-header-sticky .header-wrapper { background: rgba(255, 255, 255, 0.97) !important; background-color: rgba(255, 255, 255, 0.97) !important; border-bottom: 1px solid rgba(93, 5, 150, 0.08) !important; box-shadow: 0 8px 28px rgba(199, 81, 134, 0.10), 0 2px 8px rgba(93, 5, 150, 0.05) !important; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } /* ========================================================= FEMANUAL FOOTER SAFETY GUARD The detailed footer design lives in sections/footer.liquid. These rules prevent global porcelain/gradient overrides from making the footer or legal-policy links transparent. ========================================================= */ .shopify-section-group-footer-group, .shopify-section-group-footer-group > .shopify-section, .shopify-section-group-footer-group .footer { isolation: isolate; } .shopify-section-group-footer-group .footer, .shopify-section-group-footer-group .footer.gradient { background-attachment: scroll !important; } .shopify-section-group-footer-group .footer .policies, .shopify-section-group-footer-group .footer .policies li, .shopify-section-group-footer-group .footer .policies a { visibility: visible !important; opacity: 1 !important; } .shopify-section-group-footer-group .footer .policies { display: flex !important; }