/** Shopify CDN: Minification failed Line 2290:18 Unexpected "{" Line 2290:27 Expected ":" Line 2290:33 Unexpected "," Line 2291:18 Unexpected "{" Line 2291:27 Expected ":" Line 2297:18 Unexpected "{" Line 2297:27 Expected ":" Line 2298:18 Unexpected "{" Line 2298:27 Expected ":" Line 2299:18 Unexpected "{" ... and 119 more hidden warnings **/ html:not(.header-ready) #pageheader .logo-area, html:not(.header-ready) #pageheader #proxy-nav, html:not(.header-ready) #main-nav { visibility: hidden; } #pageheader .logo-area { min-height: 72px; } @media (max-width: 767.98px) { #pageheader .logo-area { min-height: 58px; } } /************************************************************************************************************************************************ ****************************************************************** GLOBAL ************************************************************ ************************************************************************************************************************************************/ html { scrollbar-gutter: stable; } @supports not (scrollbar-gutter: stable) { html { overflow-y: scroll; } } p { font-family: "ItalianOldStyleMTPro" !important; font-weight: 400; font-style: normal; line-height: 1.6; font-size: 12.4px; } /* Shop, product page, footer pages etc. */ @media (min-width: 768px) { h1.pagetitle.h3, .faq-index__heading, .legal-header .majortitle { margin: 0 0 0.5em !important; font-family: 'Biondi' !important; font-size: 23.25px !important; letter-spacing: 2px !important; font-weight: 300 !important; color: #b3b3b3 !important; margin-bottom: 0px !important; } h4, .product-title { margin: 0 0 0.5em !important; font-family: 'Biondi' !important; font-size: 23.25px !important; letter-spacing: 2px !important; font-weight: 300 !important; color: #b7b7b5 !important; margin-bottom: 0px !important; } .triple-text-row .triple-text__item:nth-child(2) p { text-align: center; font-family: termina, sans-serif !important; font-weight: 600; font-style: normal; font-size: 7.4px; letter-spacing: .6px; text-transform: uppercase; margin: 20px 0 0px 0 !important; } } @media (max-width: 768px) { h1.pagetitle.h3, .faq-index__heading, .legal-header .majortitle { margin: 0 0 0.5em !important; font-family: 'Biondi' !important; font-size: 19.25px !important; letter-spacing: 2px !important; font-weight: 300 !important; color: #b7b7b5 !important; margin-bottom: 0px !important; } .product-title { margin: 0 0 0.5em !important; font-family: 'Biondi' !important; font-size: 19.25px !important; letter-spacing: 2px !important; font-weight: 300 !important; color: #191917 !important; margin-bottom: 0px !important; } h4, .triple-text-row .triple-text__item:nth-child(2) p { text-align: center; font-family: termina, sans-serif !important; font-weight: 600; font-style: normal; font-size: 7.4px; letter-spacing: .6px; text-transform: uppercase; margin: 20px 0 0px 0 !important; } } /* Headlines */ h1, .majortitle.h1, h1.product-title, h1.majortitle.in-content.h1 { line-height: 1.6em; font-family: "Biondi"; letter-spacing: 1.5px; font-size: 13px; font-weight: 300; color: #191917; text-transform: uppercase; margin-top: 0px !important; } h2 { line-height: 1.6em; font-family: "Biondi"; letter-spacing: 1px; font-size: 11px; font-weight: 400; color: #191917; text-transform: uppercase; } h3 { font-family: 'Biondi'; letter-spacing: 1px; font-size: 11px !important; font-weight: 400; color: #191917 !important; } h5, .triple-text-row .triple-text__item:nth-child(3) p { font-size: 14px; font-family: "ItalianTypewriterBold", serif !important; color: #b7b7b5; margin: 15px 0 0 !important; letter-spacing: 0px; } h6, .triple-text-row .triple-text__item:first-child p { text-align: left; font-family: "September Spirit", serif !important; font-size: 32px; font-style: normal; font-weight: 400 !important; color: #b7b7b5; margin: 0 !important; } @media (max-width: 768px) { .triple-text-row .triple-text__item:first-child p{ text-align: center; font-family: "September Spirit", serif !important; font-size: 32px; font-style: normal; font-weight: 400 !important; color: #b7b7b5; margin: 0 !important; line-height: 40px; } } strong, b { font-weight: 500; } /************************************************************************************************************************************************ ********************************************************** NEWSLETTER **************************************************************** ************************************************************************************************************************************************/ /* ==================== NEWSLETTER POPUP ==================== */ /* HARD HIDE rows (even if Klaviyo re-applies display:flex inline) */ form[data-testid="klaviyo-form-T2ZWR8"] [data-testid="form-row"]:has(#rich-text-01KGQA3P9GFTH8JR6YGE76THN2), form[data-testid="klaviyo-form-T2ZWR8"] [data-testid="form-row"]:has(#rich-text-01KGQA3P9RSHHEATKYRK21F2CF){ display: none !important; visibility: hidden !important; height: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; } form[data-testid="klaviyo-form-T2ZWR8"] #rich-text-01KGQA3PADHWDBSSE2NFVP68YB{ padding-left: 25% !important; padding-right: 25% !important; padding-top: 40px; } form[data-testid="klaviyo-form-T2ZWR8"] [data-testid="form-component"]:has(#rich-text-01KGQA3PARK2TCP1RR9FX05W4W){ display: none !important; } form[data-testid="klaviyo-form-T2ZWR8"] [data-testid="form-component"]:has(#email_01KGQA3PAXDGDNCMAZ7MWEH68A){ display: flow-root !important; } form[data-testid="klaviyo-form-T2ZWR8"] > .kl-private-reset-css-Xuajs1{ height: auto !important; min-height: 100% !important; width: 100% !important; overflow: auto !important; -webkit-overflow-scrolling: touch; justify-content: flex-start !important; } form[data-testid="klaviyo-form-T2ZWR8"]{ width: 85vh !important; max-width: calc(100dvw - 20px) !important; left: 0 !important; transform: none !important; background: #fff !important; } form[data-testid="klaviyo-form-T2ZWR8"] [data-testid="form-row"]:nth-of-type(1){ flex:0 0 0% !important; } form[data-testid="klaviyo-form-T2ZWR8"] [data-testid="form-row"]:nth-of-type(2){ flex:0 0 0% !important; } form[data-testid="klaviyo-form-T2ZWR8"] [data-testid="form-row"]:nth-of-type(4){ flex:0 0 60% !important; } form[data-testid="klaviyo-form-T2ZWR8"] [data-testid="form-row"]:nth-of-type(5){ flex:0 0 20% !important; } form[data-testid="klaviyo-form-T2ZWR8"] [data-testid="form-row"]:nth-of-type(6){ flex:0 0 20% !important; margin-bottom:0 !important; } form[data-testid="klaviyo-form-T2ZWR8"]{ --f:form[data-testid="klaviyo-form-T2ZWR8"]; } /* Outer border */ form[data-testid="klaviyo-form-T2ZWR8"] > .kl-private-reset-css-Xuajs1:first-of-type{ border:1px solid #e5e5e5 !important; padding-bottom:10px; margin-bottom:10px; } form[data-testid="klaviyo-form-T2ZWR8"]{ height: 441px !important; min-height: 441px !important; max-height: 441px !important; } form[data-testid="klaviyo-form-T2ZWR8"] img[src*="Eteanne_Monogram_Black.png"] + span{ line-height: 1.5 !important; /* tighten text */ display: inline-block !important; vertical-align: top !important; } /* Make sure nothing clips */ form[data-testid="klaviyo-form-T2ZWR8"], form[data-testid="klaviyo-form-T2ZWR8"] > .kl-private-reset-css-Xuajs1, form[data-testid="klaviyo-form-T2ZWR8"] [data-testid="form-row"], form[data-testid="klaviyo-form-T2ZWR8"] [data-testid="form-component"]{ overflow:visible !important; } /* Main container sizing */ form[data-testid="klaviyo-form-T2ZWR8"] > .kl-private-reset-css-Xuajs1{ display:flex !important; flex-direction:column !important; min-height:418px !important; justify-content:center !important; padding:0 !important; margin:0 !important; gap:0 !important; } form[data-testid="klaviyo-form-T2ZWR8"] [data-testid="form-row"]{ margin:0 !important; } /* Flex distribution per row */ @media (min-width: 768px){ form[data-testid="klaviyo-form-T2ZWR8"] [data-testid="form-row"]:nth-of-type(1){ flex:0 0 10% !important; } form[data-testid="klaviyo-form-T2ZWR8"] [data-testid="form-row"]:nth-of-type(2){ flex:0 0 15% !important; } form[data-testid="klaviyo-form-T2ZWR8"] [data-testid="form-row"]:nth-of-type(4){ flex:0 0 44.5% !important; } form[data-testid="klaviyo-form-T2ZWR8"] [data-testid="form-row"]:nth-of-type(5){ flex:0 0 11% !important; } form[data-testid="klaviyo-form-T2ZWR8"] [data-testid="form-row"]:nth-of-type(6){ flex:0 0 20.5% !important; margin-bottom:0 !important; } } /* Row 1 padding (headline block) */ form[data-testid="klaviyo-form-T2ZWR8"] [data-testid="form-row"]:nth-of-type(1) > [data-testid="form-component"]:first-child{ padding:20px 0 20px 10px !important; } form[data-testid="klaviyo-form-T2ZWR8"] div[style*="letter-spacing: 1px"]{ line-height: 0 !important; } /* Headline style */ form[data-testid="klaviyo-form-T2ZWR8"] [data-testid="form-row"]:nth-of-type(1) > [data-testid="form-component"]:first-child h1 span{ font-family:"termina" !important; font-weight: 400 !important; color:var(--kl-dark) !important; letter-spacing:5px !important; font-size:24px !important; line-height: 40px !important; } form[data-testid="klaviyo-form-T2ZWR8"] img[src*="Eteanne_Newsletter_Illustration_01.png"]{ mix-blend-mode: multiply !important; background: transparent !important; } /* Screenshot row padding + image size */ form[data-testid="klaviyo-form-T2ZWR8"] [data-testid="form-row"]:nth-of-type(2) > [data-testid="form-component"]:first-child{ padding:42px 6px 0 !important; } form[data-testid="klaviyo-form-T2ZWR8"] [data-testid="form-row"]:nth-of-type(2) > [data-testid="form-component"]:first-child > div{ width:100% !important; } form[data-testid="klaviyo-form-T2ZWR8"] [data-testid="form-row"]:nth-of-type(2) > [data-testid="form-component"]{ flex:0 0 50% !important; max-width:50% !important; } /* Vertical divider + padding (rows 4 & 5, first column) */ form[data-testid="klaviyo-form-T2ZWR8"] [data-testid="form-row"]:is(:nth-of-type(4),:nth-of-type(5)) > [data-testid="form-component"]:first-child{ border-right:1px solid var(--kl-border) !important; padding-right:12px; } /* Row 4 padding for both columns */ form[data-testid="klaviyo-form-T2ZWR8"] [data-testid="form-row"]:nth-of-type(4) > [data-testid="form-component"]:is(:first-child,:last-child){ padding:0 25px !important; } /* Row 4 newsletter text positioning (left col) */ form[data-testid="klaviyo-form-T2ZWR8"] [data-testid="form-row"]:nth-of-type(4) > [data-testid="form-component"]:first-child > div{ position:relative; top:0px; } /* TO label (row 4 right col) */ form[data-testid="klaviyo-form-T2ZWR8"] [data-testid="form-row"]:nth-of-type(4) > [data-testid="form-component"]:last-child label{ font:400 7.5px "Biondi" !important; color:var(--kl-text) !important; letter-spacing:1px !important; padding-bottom:14px !important; } /* Inputs + placeholders */ form[data-testid="klaviyo-form-T2ZWR8"] input[type="text"], form[data-testid="klaviyo-form-T2ZWR8"] input[type="email"][name="email"], form[data-testid="klaviyo-form-T2ZWR8"] input[type="text"]::placeholder, form[data-testid="klaviyo-form-T2ZWR8"] input[type="email"][name="email"]::placeholder{ font:400 9.5px "Biondi" !important; color:var(--kl-text) !important; letter-spacing:1px !important; text-transform:uppercase !important; padding:0 !important; } form[data-testid="klaviyo-form-T2ZWR8"] input[type="text"], form[data-testid="klaviyo-form-T2ZWR8"] input[type="email"][name="email"]{ border:0 !important; } form[data-testid="klaviyo-form-T2ZWR8"] input[type="text"]{ border-top:1px solid var(--kl-border) !important; } form[data-testid="klaviyo-form-T2ZWR8"] input[type="email"][name="email"]{ border-block:1px solid var(--kl-border) !important; /* top + bottom */ } form[data-testid="klaviyo-form-T2ZWR8"] input[type="text"]:focus, form[data-testid="klaviyo-form-T2ZWR8"] input[type="email"][name="email"]:focus{ outline:0 !important; box-shadow:none !important; border-color:var(--kl-border) !important; } /* Row 5 layout (left + right components) */ form[data-testid="klaviyo-form-T2ZWR8"] [data-testid="form-row"]:nth-of-type(5) > [data-testid="form-component"]:first-child{ display:flex !important; justify-content:flex-end !important; padding:0 25px !important; position:relative !important; flex:1 0 0 !important; } form[data-testid="klaviyo-form-T2ZWR8"] [data-testid="form-row"]:nth-of-type(5) > [data-testid="form-component"]:last-child{ padding:0 25px !important; } /* Row 6 padding left */ form[data-testid="klaviyo-form-T2ZWR8"] [data-testid="form-row"]:nth-of-type(6) > [data-testid="form-component"]:first-child{ padding:0 25px 20px !important; } /* Row 6 inner spacing (monogram + line) */ form[data-testid="klaviyo-form-T2ZWR8"] [data-testid="form-row"]:nth-of-type(6) > [data-testid="form-component"]:first-child > div > div:first-child{ padding-bottom:0px !important; } form[data-testid="klaviyo-form-T2ZWR8"] [data-testid="form-row"]:nth-of-type(6) > [data-testid="form-component"]:first-child > div > div:last-child{ padding-top:4px !important; } form[data-testid="klaviyo-form-T2ZWR8"] img{ vertical-align: top !important; } form[data-testid="klaviyo-form-T2ZWR8"] img[src*="eteanne-monogram.png"]{ opacity: 0.2 !important; } form[data-testid="klaviyo-form-T2ZWR8"] span[style*="ltc-italian-old-style-pro"]{ display: inline-block !important; padding-top: 6px !important; } /* Button style + hover */ form[data-testid="klaviyo-form-T2ZWR8"] [data-testid="form-row"]:nth-of-type(6) > [data-testid="form-component"]:last-child button[type="button"]{ background:transparent !important; border:1px solid var(--kl-border) !important; border-radius:0 !important; font-family:"Biondi" !important; letter-spacing:1px !important; font-size:11px !important; font-weight:400 !important; color:var(--kl-dark) !important; height:35px !important; width:100% !important; padding:0 !important; cursor:pointer !important; } form[data-testid="klaviyo-form-T2ZWR8"] [data-testid="form-row"]:nth-of-type(6) > [data-testid="form-component"]:last-child button[type="button"]:hover{ border-color:var(--kl-border-hover) !important; } /* Submit button container padding */ form[data-testid="klaviyo-form-T2ZWR8"] [data-testid="form-component"]:has(button[type="button"]){ padding:33px 25px !important; } /* Close icon + button margin */ .klaviyo-close-form svg path{ stroke-width:.5 !important; } button.klaviyo-close-form{ margin:25px 20px 0 0 !important; } /* Background image inside form */ form[data-testid="klaviyo-form-T2ZWR8"] img.kl-private-reset-css-Xuajs1{ max-width:100% !important; position:relative; object-fit:contain; right:5.5px; } /* Hide spinners (popup + footer) */ form[data-testid="klaviyo-form-T2ZWR8"] :is([data-testid="spinner"],.klaviyo-spinner,.kl-spinner), form[data-testid="klaviyo-form-UBWNFm"] :is([data-testid="spinner"],.klaviyo-spinner,.kl-spinner){ display:none !important; visibility:hidden !important; opacity:0 !important; pointer-events:none !important; } /* Error text (popup + footer) */ .klaviyo-form-message--error{ color:#6a1a1a !important; font:600 11px/1 termina,sans-serif !important; letter-spacing:.5px !important; margin-top:6px !important; text-align:left !important; } /* Remove tooltip generated by SVG */ button.klaviyo-close-form svg title{ display:none !important; } button.klaviyo-close-form svg{ pointer-events:none !important; } form[data-testid="klaviyo-form-T2ZWR8"] :is([role="alert"],.klaviyo-form__error-message,.klaviyo-error), form[data-testid="klaviyo-form-UBWNFm"] :is([role="alert"],.klaviyo-form__error-message,.klaviyo-error,.klaviyo-form-message--error){ color:var(--kl-dark) !important; font-family:"Biondi" !important; font-size:10px !important; letter-spacing:.2px !important; text-align:left !important; background:transparent !important; border:0 !important; box-shadow:none !important; } /* LOCK ALL SIDES — overrides border-block + any hover rules */ form[data-testid="klaviyo-form-T2ZWR8"] input[type="email"][name="email"], form[data-testid="klaviyo-form-T2ZWR8"] input[type="text"]{ border-color: var(--kl-border) !important; outline: 0 !important; box-shadow: none !important; -webkit-box-shadow: none !important; } /* Keep border identical on interaction */ form[data-testid="klaviyo-form-T2ZWR8"] input[type="email"][name="email"]:hover, form[data-testid="klaviyo-form-T2ZWR8"] input[type="email"][name="email"]:focus, form[data-testid="klaviyo-form-T2ZWR8"] input[type="email"][name="email"]:focus-visible, form[data-testid="klaviyo-form-T2ZWR8"] input[type="text"]:hover, form[data-testid="klaviyo-form-T2ZWR8"] input[type="text"]:focus, form[data-testid="klaviyo-form-T2ZWR8"] input[type="text"]:focus-visible{ border-color: var(--kl-border) !important; outline: 0 !important; box-shadow: none !important; -webkit-box-shadow: none !important; } /* If Klaviyo applies hover styles via wrapper state */ form[data-testid="klaviyo-form-T2ZWR8"] [data-testid="form-component"]:hover input, form[data-testid="klaviyo-form-T2ZWR8"] [data-testid="form-component"]:focus-within input{ border-color: var(--kl-border) !important; box-shadow: none !important; -webkit-box-shadow: none !important; } /* Keep it pinned on hover/focus */ form[data-testid="klaviyo-form-T2ZWR8"] input[type="text"]:hover, form[data-testid="klaviyo-form-T2ZWR8"] input[type="text"]:focus, form[data-testid="klaviyo-form-T2ZWR8"] input[type="text"]:focus-visible, form[data-testid="klaviyo-form-T2ZWR8"] [data-testid="form-component"]:hover input[type="text"], form[data-testid="klaviyo-form-T2ZWR8"] [data-testid="form-component"]:focus-within input[type="text"]{ border-top-color: var(--kl-border) !important; border-block-start-color: var(--kl-border) !important; box-shadow: none !important; -webkit-box-shadow: none !important; } /* ==================== SUCCESS PAGE ==================== */ form[data-testid="klaviyo-form-T2ZWR8"]:not(:has(input[type="email"], input[type="text"], button[type="button"])) > .kl-private-reset-css-Xuajs1{ justify-content:flex-start !important; } form[data-testid="klaviyo-form-T2ZWR8"]:not(:has(input[type="email"], input[type="text"], button[type="button"])) > .kl-private-reset-css-Xuajs1 > [data-testid="form-row"]:nth-of-type(1){ flex:0 0 20% !important; max-height:20% !important; } form[data-testid="klaviyo-form-T2ZWR8"]:not(:has(input[type="email"], input[type="text"], button[type="button"])) > .kl-private-reset-css-Xuajs1 > [data-testid="form-row"]:nth-of-type(2){ flex:0 0 60% !important; max-height:60% !important; } form[data-testid="klaviyo-form-T2ZWR8"]:not(:has(input[type="email"], input[type="text"], button[type="button"])) > .kl-private-reset-css-Xuajs1 > [data-testid="form-row"]:nth-of-type(3){ flex:0 0 10% !important; max-height:10% !important; } form[data-testid="klaviyo-form-T2ZWR8"]:not(:has(input[type="email"], input[type="text"], button[type="button"])) > .kl-private-reset-css-Xuajs1 > [data-testid="form-row"]{ display:flex !important; align-items:center !important; justify-content:center !important; } form[data-testid="klaviyo-form-T2ZWR8"] p span[style*="font-family: termina"]{ letter-spacing:0.5px !important; } form[data-testid="klaviyo-form-T2ZWR8"] [data-testid="form-row"]:nth-of-type(2) > [data-testid="form-component"]{ margin:0 auto !important; display:flex !important; justify-content:center !important; } form[data-testid="klaviyo-form-T2ZWR8"] [data-testid="form-row"]:nth-of-type(2) img{ display:block !important; margin:0 auto !important; } form[data-testid="klaviyo-form-T2ZWR8"] p span[style*="SeptemberSpiritRegular"]{ display:inline-block !important; line-height: 0px !important; } form[data-testid="klaviyo-form-T2ZWR8"] [data-testid="form-row"]:nth-of-type(2) > [data-testid="form-component"]:first-child { padding: 0 !important; } form[data-testid="klaviyo-form-T2ZWR8"] img{ mix-blend-mode: multiply !important; background: transparent !important; padding-bottom: 10px !important; } form[data-testid="klaviyo-form-T2ZWR8"] img[src*="49a26c72-2071-44b8-9d83-96934f0e422d.png"]{ padding-bottom:40px !important; } /* Remove tooltip generated by SVG <title> */ form[data-testid="klaviyo-form-T2ZWR8"] .klaviyo-close-form svg title{ display: none !important; } /* ==================== NEWSLETTER POP UP MOBILE ==================== */ @media (max-width: 767px){ form[data-testid="klaviyo-form-WUanpn"] :is( [data-testid="spinner"], .klaviyo-spinner, .kl-spinner, svg[class*="spinner"], div[class*="spinner"] ) /* TEXT ABOVE INPUT */ form[data-testid="klaviyo-form-WUanpn"] [id^="rich-text"] span, form[data-testid="klaviyo-form-WUanpn"] [id^="rich-text"] p{ font-family: "ItalianOldStyleMTPro" !important; font-weight: 400 !important; font-style: normal !important; line-height: 1.6 !important; font-size: 12.4px !important; color: #191917 !important; } /* INPUT TEXT */ form[data-testid="klaviyo-form-WUanpn"] input[type="email"][name="email"]{ font-family: SeptemberSpiritRegular, Helvetica, Arial, sans-serif !important; font-size: 36px !important; font-weight: 400 !important; letter-spacing: 0px !important; color: #ababaa !important; letter-spacing: 0.6px !important; } /* INPUT (match desktop look + prevent iOS focus-zoom) */ form[data-testid="klaviyo-form-WUanpn"] input[type="email"][name="email"]{ font-size: 16px !important; /* stops iOS zoom */ -webkit-text-size-adjust: 100% !important; border-radius: 0 !important; background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--kl-border) !important; height: 48px !important; color: #ababaa !important; box-shadow: none !important; -webkit-box-shadow: none !important; outline: 0 !important; } form[data-testid="klaviyo-form-WUanpn"] input[type="email"][name="email"], form[data-testid="klaviyo-form-WUanpn"] input[type="email"][name="email"]::placeholder{ font-family: SeptemberSpiritRegular, Helvetica, Arial, sans-serif !important; font-size: 36px !important; font-weight: 400 !important; letter-spacing: 0px !important; padding: 0px !important; color: #ababaa !important; height:36px !important; line-height: 48px !important; padding: 10px 0 0 0 !important; box-sizing: border-box !important; } form[data-testid="klaviyo-form-WUanpn"] [data-testid="form-component"]:has(input[type="email"][name="email"]) input{ transform: scale(0.72) !important; transform-origin: left center !important; } form[data-testid="klaviyo-form-WUanpn"] [data-testid="form-component"]:has(input[type="email"][name="email"]) input{ width: calc(100% / 0.72) !important; } form[data-testid="klaviyo-form-WUanpn"] input[type="email"][name="email"], form[data-testid="klaviyo-form-WUanpn"] input[type="email"][name="email"]:hover, form[data-testid="klaviyo-form-WUanpn"] input[type="email"][name="email"]:focus, form[data-testid="klaviyo-form-WUanpn"] input[type="email"][name="email"]:focus-visible{ border-color: var(--kl-border) !important; outline: 0 !important; box-shadow: none !important; -webkit-box-shadow: none !important; } form[data-testid="klaviyo-form-WUanpn"] [data-testid="form-component"]:hover input, form[data-testid="klaviyo-form-WUanpn"] [data-testid="form-component"]:focus-within input{ border-color: var(--kl-border) !important; box-shadow: none !important; -webkit-box-shadow: none !important; } /* BUTTON (match desktop)*/ form[data-testid="klaviyo-form-WUanpn"] button[type="button"]{ background: transparent !important; border: 1px solid var(--kl-border) !important; border-radius: 0 !important; font-family: "Biondi" !important; letter-spacing: 1px !important; font-size: 11.5px !important; font-weight: 400 !important; color: var(--kl-dark) !important; height: 45px !important; width: 100% !important; padding: 0 !important; cursor: pointer !important; box-shadow: none !important; -webkit-box-shadow: none !important; } form[data-testid="klaviyo-form-WUanpn"] button[type="button"]:hover{ border-color: var(--kl-border-hover) !important; } form[data-testid="klaviyo-form-WUanpn"] [data-testid="form-component"]:has(button[type="button"]){ padding: 4px 24px 24px 24px !important } } /* Overlay behind Klaviyo banner */ div[role="dialog"][aria-label="BANNER Form"]::before{ content: ""; position: fixed; inset: 0; background: #25242326; /* grey overlay */ z-index: -1; animation: eteanneOverlayFade 0.25s ease; } /* keep banner above overlay */ div[role="dialog"][aria-label="BANNER Form"]{ z-index: 90001 !important; } @keyframes eteanneOverlayFade{ from { opacity: 0; } to { opacity: 1; } } form[data-testid="klaviyo-form-WUanpn"] > div{ height: 250px !important; min-height: 250px !important; max-height: 250px !important; overflow: hidden !important; } div[role="dialog"][aria-label="BANNER Form"] button.klaviyo-close-form{ top: -5px !important; } /* ==================== NEWSLETTER FOOTER ==================== */ /* Email input */ form[data-testid="klaviyo-form-UBWNFm"] input[type="email"][name="email"]{ box-sizing:border-box; width:100% !important; height:25px !important; padding:8px 0 0 !important; border:0 !important; border-bottom:1px solid var(--footer-border) !important; border-radius:0 !important; background:var(--footer-bg) !important; color:var(--footer-text) !important; outline:0 !important; box-shadow:none !important; } .section-footer__klaviyo-block form[data-testid="klaviyo-form-UBWNFm"] #rich-text-01KKKH1QM7NPRYH5R6PCCFD0PD, .section-footer__klaviyo-block form[data-testid="klaviyo-form-UBWNFm"] #rich-text-01KKKH1QM7NPRYH5R6PCCFD0PD:hover, .section-footer__klaviyo-block form[data-testid="klaviyo-form-UBWNFm"] #rich-text-01KKKH1QM7NPRYH5R6PCCFD0PD p, .section-footer__klaviyo-block form[data-testid="klaviyo-form-UBWNFm"] #rich-text-01KKKH1QM7NPRYH5R6PCCFD0PD span { color: rgb(168, 168, 162) !important; } /* Hover / focus / active */ form[data-testid="klaviyo-form-UBWNFm"] input[type="email"][name="email"]:is(:hover,:focus,:active){ border:0 !important; border-bottom:1px solid var(--footer-border) !important; background:var(--footer-bg) !important; outline:0 !important; box-shadow:none !important; } /* Autofill */ form[data-testid="klaviyo-form-UBWNFm"] input[type="email"]:-webkit-autofill, form[data-testid="klaviyo-form-UBWNFm"] input[type="email"]:-webkit-autofill:is(:hover,:focus,:active){ -webkit-box-shadow:0 0 0 1000px var(--footer-bg) inset !important; box-shadow:0 0 0 1000px var(--footer-bg) inset !important; -webkit-text-fill-color:var(--footer-text) !important; } form[data-testid="klaviyo-form-UBWNFm"] input[type="email"]:-moz-autofill{ box-shadow:inset 0 0 0 1000px var(--footer-bg) !important; -moz-text-fill-color:var(--footer-text) !important; } /* Rich text blocks */ #rich-text-01KBGAF96Q46YZ2P1BHF0Q9TW7 p span{ font:italic 11.9px "ItalianOldStyleMTPro" !important; color:#9c9c99 !important; } /* Keep button visible */ .klaviyo-form-UBWNFm.klaviyo-form.form-version-cid-1 .klaviyo-form button[type="submit"], .klaviyo-form-UBWNFm .klaviyo-form button[type="button"]{ opacity:1 !important; visibility:visible !important; } /* Button border + hover */ button.needsclick.go150607778.kl-private-reset-css-Xuajs1{ border:1px solid #cdccc8 !important; } button.needsclick.go150607778.kl-private-reset-css-Xuajs1:hover{ border-color:#adadab !important; } form[data-testid="klaviyo-form-UBWNFm"] > .kl-private-reset-css-Xuajs1{ display:flex !important; flex-direction:column !important; justify-content:flex-start !important; } /* Success text */ #rich-text-01KC3SEVH8H5T4SC7EE4KEQHFN h1:first-of-type span{ font:600 8.4px/1 "termina",sans-serif !important; letter-spacing:.6px !important; color:#191917 !important; } #rich-text-01KC3SEVH8H5T4SC7EE4KEQHFN h1:last-of-type span{ font:400 11px/1.3 "ItalianOldStyleMTPro" !important; letter-spacing:0; color:var(--footer-text) !important; } #rich-text-01KC3SEVGN44NYTT7GEE4N1JE9 span{ font:italic 12.4px/1.3 "ItalianOldStyleMTPro" !important; color:#a8a8a2 !important; } #rich-text-01KC3SEVGN44NYTT7GEE4N1JE9 span a{ color:inherit !important; text-decoration:underline; } form[data-testid="klaviyo-form-T2ZWR8"] #rich-text-01KKKDSWAENRTBHSBA7GWS7SRA > div:first-child img{ display:block !important; height:auto !important; flex:0 0 auto !important; } form[data-testid="klaviyo-form-T2ZWR8"] [data-testid="form-row"]:nth-of-type(2) > [data-testid="form-component"]{ justify-content:center !important; } form[data-testid="klaviyo-form-T2ZWR8"] #rich-text-01KKKDSWAENRTBHSBA7GWS7SRA{ width:100% !important; } form[data-testid="klaviyo-form-T2ZWR8"] #rich-text-01KKKDSWAENRTBHSBA7GWS7SRA > div:first-child{ display:flex !important; justify-content:center !important; align-items:center !important; gap:12px !important; width:100% !important; text-align:center !important; line-height:0 !important; } form[data-testid="klaviyo-form-T2ZWR8"] #rich-text-01KKKDSWAENRTBHSBA7GWS7SRA > div:first-child img{ display:block !important; flex:0 0 auto !important; height:auto !important; } /************************************************************************************************************************************************ ************************************************************ NAVIGATION ************************************************************** ************************************************************************************************************************************************/ /* Placering main link nav items */ .navigation--left .navigation__tier-1-container .navigation__tier-1>.navigation__item>.navigation__link { padding-top: 22px; } /* Height, padding and stlying subnav items */ @media (min-width: 768px) { .navigation__item, .navigation__tier-1 { height: 100%; } } ul.navigation__tier-2.navigation__columns.navigation__columns--count-4.navigation__columns--with-promos{ margin-left: 0px; } @media (min-width: 1025px){ .navigation .navigation__columns .navigation__column:not(.navigation__column--promotion) .navigation__tier-3 .navigation__link { padding: 6px 0; font-family: termina, sans-serif; font-weight: 600; font-style: normal; font-size: 8.4px; letter-spacing: .6px; color: #a8a8a2; } .navigation .navigation__columns .navigation__column:not(.navigation__column--promotion){ padding-left: 40px; } .navigation__bottom-note { position: absolute; bottom: 10px; left: 40px; font-family: September Spirit; font-size: 32px; font-style: normal; font-weight: 400; color: #b7b7b5; letter-spacing: -0.3px; pointer-events: none; } .menu-promotion__badge{ position:absolute; left:20px; bottom:15px; padding:14px 14px; font-family: termina, sans-serif; font-weight: 600; font-style: normal; font-size: 8.4px; letter-spacing: 1px; text-transform: uppercase; color: #f1efe8; line-height:1; color:#f1efe8; border-radius:4px; pointer-events:none; max-width:80%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } } /* Hover color nav */ .navigation .navigation__columns .navigation__column:not(.navigation__column--promotion) .navigation__tier-3 .navigation__link:hover, .navigation .navigation__tier-1 > .navigation__item > .navigation__link:hover { color: #6b6c6c; } /* Remove black animation underline under main nav items */ .navigation__link::after, .navigation__link::before { display: none; } /* Transparent navigation & colour on scroll up */ .section-header--nav-open .pageheader { background-color: #f1efe8; border-bottom: 1px solid #dadad5; } .pageheader.header--hidden { transform: translateY(-100%); background-color: #F1EFE8; border-bottom: 1px solid #dadad5; transition: transform 0.3s ease, background-color 0.3s ease; } .pageheader.header--scrolled { background-color: #f1efe8; border-bottom: 1px solid #dadad5; transition: transform 00.6s ease, background-color 00.6s ease, border-color 00.6s ease, border-width 00.6s ease; } .show-search .pageheader.header--scrolled { background: #E7E5DE !important; transition: transform 00.6s ease, background-color 00.6s ease, border-color 00.6s ease, border-width 00.6s ease; } /* Padding under mega menu images */ @media (min-width: 768px) { .navigation .navigation__column { display: block; flex: 0 0 25%; padding: 0 3px 0px; } .pageheader--layout-inline-permitted+#main-nav .navigation--main .navigation__tier-2-container { border-top: 1px solid #dadad5; border-bottom: none; position: fixed; top: 79px; left: 0; right: 0; overflow-x: hidden; } } /* Margin mega menu nav items */ li.navigation__item.navigation__item--with-children.navigation__column { margin-top: 2%; } /* Search icon */ .show-search-link__icon img { height: 25px; width: 20px; padding-bottom: 2px; } .navigation__column--promotion:last-child { width: 100vw; } #CookiebotWidget:not(.CookiebotWidget-open) .CookiebotWidget-logo, div#CookiebotWidget{ display: none; } /* ========================================================= ================= MOBILE/TABLET NAVIGATION ================ ==========================================================*/ /* Mobile nav */ @media (max-width: 768px){ .logo-area.container.container--no-max { padding-right: 12px; padding-left: 14px; } /* Mobile only: add "EXPLORE" above the 3 main items */ .mobile-navigation-drawer .navigation__tier-1::before{ content: "EXPLORE"; display: block; margin: 30px 24px 12px; font-family: 'Biondi'; letter-spacing: 1px; font-size: 10px; font-weight: 400; color: #191917; } /* Padding subnav items */ .navigation .navigation__columns .navigation__column:not(.navigation__column--promotion){ padding-left: 24px; } /* Padding/styling subnav items */ .navigation .navigation__columns .navigation__column:not(.navigation__column--promotion) .navigation__tier-3 .navigation__link { padding: 10px 0; font-family: termina, sans-serif; font-weight: 600; font-style: normal; font-size: 8.9px; letter-spacing: .6px; color: #a8a8a2; } .navigation__bottom-note{ display: none; } /* Always show tier-3 lists for columns in the mobile drawer */ .mobile-navigation-drawer .navigation__tier-2 li.navigation__item.navigation__column.navigation__item--with-children > .navigation__tier-3-container{ display: block; height: auto; max-height: none; opacity: 1; visibility: visible; overflow: visible; } /* Hide the chevron toggle so it can't collapse */ .mobile-navigation-drawer .navigation__tier-2 li.navigation__item.navigation__column.navigation__item--with-children > .navigation__children-toggle{ display: none; } .navigation__tier-2-container.navigation__child-tier { overflow-x: hidden; } .navigation__tier-2 .navigation__column--promotion img.theme-img { height: 35vh; width: 100%; object-fit: cover; } .menu-promotion__badge { font-size: 11px; padding: 3px 8px; left: 14px; position: relative; bottom: 41px; font-family: termina, sans-serif; font-weight: 600; font-style: normal; font-size: 8.4px; letter-spacing: 1px; text-transform: uppercase; color: #f1efe8; } .logo-area__left .show-search-link { display: none; } .logo-area__right__inner .show-search-link { display: inline-block; position: absolute; right: 27px; top: 52%; transform: translateY(-50%); z-index: 10; padding-right: 2%; } } /* Tablet nav */ @media (min-width: 768px) and (max-width: 1025px){ .logo-area.container.container--no-max { padding-right: 40px; padding-left: 40px; } .menu-promotion__badge{ position:absolute; left:27px; bottom:22px; padding:14px 14px; font-family: termina, sans-serif; font-weight: 600; font-style: normal; font-size: 8.4px; letter-spacing: 1px; text-transform: uppercase; color: #f1efe8 !important; line-height:1; border-radius:4px; pointer-events:none; max-width:80%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .navigation .navigation__columns .navigation__column:not(.navigation__column--promotion){ padding-left: 40px; } /* Styling subnav items */ .navigation .navigation__columns .navigation__column:not(.navigation__column--promotion) .navigation__tier-3 .navigation__link { padding: 4px 0; font-family: termina, sans-serif; font-weight: 600; font-style: normal; font-size: 8.9px; color: #a8a8a2; letter-spacing: .6px; } .navigation__bottom-note { position: absolute; bottom: 16px; left: 40px; font-family: 'September Spirit', serif; font-size: 32px; font-style: normal; font-weight: 400 !important; color: #b7b7b5; pointer-events: none; } /* Drawer as a scrollable flex column with extra bottom padding */ .mobile-navigation-drawer { display: flex; flex-direction: column; min-height: 100vh; box-sizing: border-box; overflow-y: auto; overflow-x: hidden; } /* Footer at the bottom of the drawer content */ .mobile-navigation-drawer__footer { margin-top: auto; background-color: #F1EFE8; padding: 16px 24px 24px; box-sizing: border-box; overflow: visible; } /* Collapsible link group inside footer */ .drawer-footer-links { position: relative; display: flex; flex-direction: column; gap: 0; overflow: visible; border-bottom: 1px solid #dadad5; } .drawer-footer-links .disclosure { margin: 0; } .drawer-footer-links .disclosure:last-child { border-bottom: none; } .drawer-footer-links .disclosure__title { display: flex; align-items: center; justify-content: space-between; padding: 18px 0; cursor: pointer; } .drawer-footer-links .disclosure__panel { padding: 0 0 0px 0; max-height: none; overflow: visible; transition: none; } /* Force layout + 1 promo image */ .pageheader--layout-inline-permitted + #main-nav .navigation--main .navigation__tier-2-container { position: fixed; top: 79px; left: 0; right: 0; height: 45vh; overflow: hidden; border-top: 1px solid #dadad5; border-bottom: none; } .navigation__tier-2.navigation__columns { display: flex; flex-wrap: nowrap; align-items: stretch; grid-template-columns: none; grid-auto-flow: initial; } .navigation__tier-2.navigation__columns--with-promos .navigation__column--promotion ~ .navigation__column--promotion { display: none; } .navigation .navigation__columns .navigation__column:not(.navigation__column--promotion) { flex: 0 0 50%; max-width: 50%; } .navigation .navigation__columns .navigation__column--promotion { flex: 0 0 50%; max-width: 50%; } } .mobile-navigation-drawer .mobile-nav-back svg { width: 8px; height: 8px; color: #191917; } a.mobile-nav-brand { position: fixed; top: 15px; left: 50%; transform: translateX(-50%); z-index: 10; } a.navigation__children-toggle { display: none; } /* Hide brand logo when a sub-tier is open in the mobile drawer */ .mobile-navigation-drawer.mobile-navigation-drawer--child-open .mobile-nav-brand { display: none; } .footer-image-wrapper { position: relative; aspect-ratio: 16 / 9; overflow: hidden; } .footer-main-image { width: 100%; height: 100%; object-fit: cover; } .footer-logo-overlay { position: absolute; width: 240px; height: auto; aspect-ratio: 1 / 1; object-fit: contain; } /* Make the hamburger (mobile-nav-toggle) icon white on Home when header is transparent */ @supports selector(:has(*)) { body.template-index:not(.mega-open) .pageheader:not(.header--scrolled):not(.header--hidden) :not(:has(.navigation__item--with-mega-menu.is-open)) :not(:has(a.navigation__link[aria-expanded="true"])) .mobile-nav-toggle svg.icon { stroke: #f1efe8; } } .page-shade, .header-shade { position: fixed; transition: visibility 00.6s, opacity 00.6s ease; pointer-events: none; opacity: 0; inset: 0; z-index: 22; } .currency-text-mobilemenu { font-family: 'ItalianTypewriterBold', monospace !important; font-size: 15px; color: #b7b7b5; letter-spacing: 0.5px; } .mobile-nav-back.has-ltr-icon svg path { stroke: #191917; opacity: 1; } .country-meta{ line-height: 1; font-family: termina, sans-serif; font-weight: 600; font-style: normal; font-size: 8.4px; letter-spacing: 0.6px; text-transform: uppercase; } .drawer-brand-currency{ display:flex; align-items:center; justify-content:space-between; padding:0 24px; width:100%; box-sizing:border-box; } .drawer-brand-currency .brand-name { font-family: 'September Spirit', serif; font-size: 32px; font-weight: 400; color: #b7b7b5;; text-align: left; margin:0; flex:0 0 auto; } .drawer-footer-links details.disclosure:last-child, .disclosure:last-child { border-bottom: 1px solid #dadad5; } .drawer-footer-links details.disclosure { margin: 0 24px; margin-bottom: 0px; } .drawer-brand-currency .custom-footer-col.right { display: flex; align-items: center; justify-content: flex-end; flex-shrink: 0; margin:0; flex:0 0 auto; text-align:right; } .drawer-brand-currency .currency-text-mobilemenu{ margin:0; white-space:nowrap; } button#open-currency-drawer-mobileMobileNav{ font-size: 14px; font-family: "ItalianTypewriterBold" !important; text-decoration: none; color: #b7b7b5; gap: 4px; } button#open-currency-drawer-mobileMobileNav:hover{ color: #191917; } .drawer-brand-currency .currency-trigger { white-space: nowrap; display: inline-flex; align-items: center; } /* 1) Make the promo column a horizontal scroller */ .navigation__tier-2.navigation__columns.navigation__columns--with-promos > .navigation__column.navigation__column--promotion.navigation__column--promotion-carousel { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; touch-action: pan-x; } /* 2) Each promo tile fills its grid column and snaps */ .navigation__column--promotion-carousel .menu-promotion { width: 100%; min-width: 0; scroll-snap-align: start; } /* 3) Ensure ancestor wrappers don't clip the x-scroll */ .navigation__tier-2-container, .navigation__tier-2-container .container, .mobile-navigation-drawer .navigation__tier-2 { overflow-x: visible; } /* Hide native horizontal scrollbar */ .navigation__column--promotion-carousel { scrollbar-width: none; } .navigation__column--promotion-carousel::-webkit-scrollbar { display: none; } li.navigation__column.navigation__column--promotion.navigation__column--promotion-carousel{ position: fixed; bottom: 40px; } .promo-bar { display: flex; align-items: center; justify-content: space-between; padding: 0px 24px 0px; width: 99.2%; position: fixed; bottom: 5px; box-sizing: border-box; gap: 12px; } .promo-bar__title.navigation__link.navigation__column-title { text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; padding-left: 0px; padding-top: 0px; padding-bottom: 0px; font-family: 'September Spirit', serif; font-size: 32px; font-weight: 400; color: #b7b7b5;; text-align: left; text-transform: capitalize; } .promo-dots { display: flex; gap: 6px; justify-content: flex-end; } .promo-dot { width: 25px; height: 2px; background: #b7b7b5;; opacity: .5; cursor: pointer; } .promo-dot.is-active { background: #191917; opacity: 1; } /************************************************************************************************************************************************ ***************************************************************** NAV COLORS *********************************************************** ************************************************************************************************************************************************/ /* WHITE NAV HOME PAGE */ @supports selector(:has(*)) { body.template-index:not(.mega-open) .pageheader:not(.header--scrolled):not(.header--hidden):not(:has(.navigation__item--with-mega-menu.is-open)):not(:has(a.navigation__link[aria-expanded="true"])) { color: #f1efe8; opacity: 1; } body.template-index:not(.mega-open) .pageheader:not(.header--scrolled):not(.header--hidden):not(:has(.navigation__item--with-mega-menu.is-open)):not(:has(a.navigation__link[aria-expanded="true"])) .navigation__link,body.template-index:not(.mega-open) .pageheader:not(.header--scrolled):not(.header--hidden):not(:has(.navigation__item--with-mega-menu.is-open)):not(:has(a.navigation__link[aria-expanded="true"])) .navigation__children-toggle { color: #f1efe8; opacity: 1; } body.template-index:not(.mega-open) .pageheader:not(.header--scrolled):not(.header--hidden) :not(:has(.navigation__item--with-mega-menu.is-open)) :not(:has(a.navigation__link[aria-expanded="true"])) .logo__image { filter: brightness(0) invert(1); } body.template-index:not(.mega-open) .pageheader:not(.header--scrolled):not(.header--hidden) :not(:has(.navigation__item--with-mega-menu.is-open)) :not(:has(a.navigation__link[aria-expanded="true"])) :is(.show-search-link__icon img.icon, .cart-link__icon img.icon) { filter: brightness(0) invert(1); } } body.template-index:not(.mega-open) .shopify-section.section-header--nav-open #pageheader, body.template-index:not(.mega-open) .shopify-section.section-header--nav-open #pageheader .navigation__link, body.template-index:not(.mega-open) .shopify-section.section-header--nav-open #pageheader .navigation__children-toggle { color: #b7b7b5; } body.reveal-mobile-nav--revealed .mobile-navigation-drawer svg.feather, body.reveal-mobile-nav .mobile-navigation-drawer svg.feather { stroke: #b7b7b5; } body.template-index:not(.mega-open) .pageheader.header--scrolled .logo__image, body.template-index:not(.mega-open) .pageheader.header--hidden .logo__image, body.template-index:not(.mega-open) .shopify-section.section-header--nav-open #pageheader .logo__image { filter: none; } body.template-index:not(.mega-open) .pageheader.header--scrolled :is(.show-search-link__icon img.icon, .cart-link__icon img.icon), body.template-index:not(.mega-open) .pageheader.header--hidden :is(.show-search-link__icon img.icon, .cart-link__icon img.icon), body.template-index:not(.mega-open) .shopify-section.section-header--nav-open #pageheader :is(.show-search-link__icon img.icon, .cart-link__icon img.icon) { filter: none; } body.template-index .shopify-section.section-header--nav-open #pageheader .navigation__tier-1 > .navigation__item > .navigation__link:hover, body.template-index .shopify-section.section-header--nav-open #pageheader .navigation__tier-1 > .navigation__item > .navigation__link:focus-visible { color: #6b6c6c !important; opacity: 1 !important; } body:not(.template-index) .cart-link__count { color: #b7b7b5; } @supports selector(:has(*)) { body.template-index:not(.mega-open) .shopify-section:not(.section-header--nav-open) #pageheader.pageheader:not(.header--scrolled):not(.header--hidden) :not(:has(.navigation__item--with-mega-menu.is-open)) :not(:has(a.navigation__link[aria-expanded="true"])) .cart-link__count { color: #f1efe8; font-family: termina, sans-serif; font-weight: 600; font-style: normal; font-size: 8px; } } @supports selector(:has(*)) { body.template-index:not(.mega-open) .pageheader:not(.header--scrolled):not(.header--hidden) :not(:has(.navigation__item--with-mega-menu.is-open)) :not(:has(a.navigation__link[aria-expanded="true"])) .mobile-nav-toggle svg.icon { stroke: #f1efe8 !important; } } /* BLACK NAV PRODUCTS, CONTACT & OUR STORY */ @media (min-width: 1024px) { @supports selector(:has(*)) { html:has(link[rel="canonical"][href*="/pages/our-story"]) body.template-page:not(.mega-open) .section-header:not(.section-header--nav-open) #pageheader.pageheader:not(.header--scrolled):not(.header--hidden) .navigation__link, html:has(link[rel="canonical"][href*="/pages/our-story"]) body.template-page:not(.mega-open) .section-header:not(.section-header--nav-open) #pageheader.pageheader:not(.header--scrolled):not(.header--hidden) .navigation__children-toggle { color: #f1efe8 !important; opacity: 1 !important; } } } @supports selector(:has(*)) { /* ===== OUR STORY – NAV LINKS (desktop + mobile) ===== */ @media (min-width: 1024px) { html:has(link[rel="canonical"][href*="/pages/our-story"]) body.template-page:not(.mega-open) .section-header:not(.section-header--nav-open) #pageheader.pageheader:not(.header--scrolled):not(.header--hidden) :is(.navigation__link, .navigation__children-toggle) { color: #f1efe8 !important; opacity: 1 !important; } } } @supports selector(:has(*)) { /* ===== CARE GUIDE – NAV LINKS (desktop + mobile) ===== */ @media (min-width: 1024px) { html:has(link[rel="canonical"][href*="/pages/care-guide"]) body.template-page:not(.mega-open) .section-header:not(.section-header--nav-open) #pageheader.pageheader:not(.header--scrolled):not(.header--hidden) :is(.navigation__link, .navigation__children-toggle) { color: #f1efe8 !important } } } @media (max-width: 1024px) { html:has(link[rel="canonical"][href$="/pages/care-guide"]) #pageheader.pageheader:not(.header--hidden) { background-color: #F1EFE8 !important; /* use your theme bg color */ border-bottom: 1px solid #e1e0da !important; } } @media (max-width: 1024px) { html:has(link[rel="canonical"][href$="/pages/our-story"]) #pageheader.pageheader:not(.header--hidden) { background-color: #F1EFE8 !important; /* use your theme bg color */ border-bottom: 1px solid #e1e0da !important; } } @supports selector(:has(*)) { /* ===== CONTACT – NAV LINKS ===== */ @media (min-width: 1024px) { html:has(link[rel="canonical"][href$="/pages/contact"]) body.template-page:not(.mega-open) .section-header:not(.section-header--nav-open) #pageheader.pageheader:not(.header--scrolled):not(.header--hidden) .navigation__link, html:has(link[rel="canonical"][href$="/pages/contact"]) body.template-page:not(.mega-open) .section-header:not(.section-header--nav-open) #pageheader.pageheader:not(.header--scrolled):not(.header--hidden) .navigation__children-toggle { color: #F1EFE8 !important; opacity: 1 !important; } } } @supports selector(:has(*)) { /* ===== ALL PRODUCTS – NAV LINKS ===== */ html:has(link[rel="canonical"][href*="/products/"]) body.template-product:not(.mega-open) .section-header:not(.section-header--nav-open) #pageheader.pageheader:not(.header--scrolled):not(.header--hidden) .navigation__link, html:has(link[rel="canonical"][href*="/products/"]) body.template-product:not(.mega-open) .section-header:not(.section-header--nav-open) #pageheader.pageheader:not(.header--scrolled):not(.header--hidden) .navigation__children-toggle { color: #191917 !important; opacity: 1 !important; } @supports selector(:has(*)) { @media (max-width: 1024px) { /* ===== ALL PRODUCTS – HEADER ICONS ===== */ html:has(link[rel="canonical"][href*="/products/"]) body.template-product:not(.mega-open) .section-header:not(.section-header--nav-open) #pageheader.pageheader:not(.header--scrolled):not(.header--hidden) :is(.show-search-link__icon img.icon, .cart-link__icon img.icon) { filter: brightness(0) !important; } /* Cart count */ html:has(link[rel="canonical"][href*="/products/"]) body.template-product:not(.mega-open) .section-header:not(.section-header--nav-open) #pageheader.pageheader:not(.header--scrolled):not(.header--hidden) .cart-link__count { color: #191917 !important; } /* Hamburger (inline SVG) */ html:has(link[rel="canonical"][href*="/products/"]) body.template-product:not(.mega-open) .section-header:not(.section-header--nav-open) #pageheader.pageheader:not(.header--scrolled):not(.header--hidden) .mobile-nav-toggle svg { stroke: #191917 !important; } /* ===== CONTACT PAGE – HEADER BG ===== */ html:has(link[rel="canonical"][href$="/pages/contact"]) body:not(.mega-open) .section-header:not(.section-header--nav-open) #pageheader.pageheader:not(.header--hidden) { background-color: #F1EFE8 !important; border-bottom: 1px solid #e1e0da !important; } } } /************************************************************************************************************************************************ ************************************************************** FOOTER ***************************************************************** ************************************************************************************************************************************************/ /* Column width & height desktop */ @media (min-width: 1025px) { .section-footer__row--blocks[data-num-blocks="4"] { flex-wrap: wrap-reverse; } /* Last column */ .section-footer__row--blocks[data-num-blocks="4"] .section-footer__row__col:last-child { width: 25%; } } /* Main footer columns/items font & distance between items */ .section-footer__title.heading-font.h6.no-wrap { font-family: 'Biondi'; letter-spacing: 1px; font-size: 10px; font-weight: 400; color: #191917; } ul.section-footer__menu-block__menu a:hover { color: #6b6c6c; text-decoration: none; } ul.section-footer__menu-block__menu a{ font-family: termina, sans-serif; font-weight: 600; font-style: normal; font-size: 8.4px; letter-spacing: .6px; color: #b7b7b5; } /* Monogram size */ .footer-logo-img { width: 7vw; max-width: 220px; } /* Image under footer */ .footer-image-wrapper { position: relative; width: 100%; aspect-ratio: 4 / 1.5; overflow: hidden; margin-top: 50px; } .footer-image-wrapper img:first-child { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; display: block; } .footer-logo-overlay { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); height: auto; pointer-events: none; } @media (max-width: 767px) { .footer-image-wrapper img:first-child { border-radius: 0; } .section-footer__row-lower { flex: 0 0 auto; padding-top: 0; padding-bottom: 0; } .footer-image-wrapper { aspect-ratio: 4 / 3; } img.footer-logo-overlay { width: 65%; } } @media (min-width: 1025px){ img.footer-logo-overlay { width: 35%; } } /* Mobile & tablet main footer */ @media (min-width: 768px) and (max-width: 1025px) { .section-footer__row--blocks .section-footer__row__col { align-self: flex-start; } .footer-image-wrapper { aspect-ratio: 4 / 2; } } @media (max-width: 767px) { .section-footer__menu-block { order: 1; flex: 0 0 100%; max-width: 100%; padding: 10px 0px 0px 0; width: 100%; margin-bottom: 16px; } .footer-image-wrapper { margin-top: 50px; margin-bottom: 40px; } .section-footer__text-block, .section-footer__custom-liquid-block, .section-footer__newsletter-block { order: 2; width: 100%; max-width: 100%; display: none; } .section-footer__title { margin-bottom: 35px; } } /* Subfooter */ .custom-footer-row { display: flex; justify-content: space-between; align-items: center; padding: 5px 0px 5px; background-color: #F1EFE8; } .custom-footer-col.left { text-align: left; width: 25%; font-family: 'September Spirit', serif; font-size: 32px; font-weight: 400; color: #b7b7b5;; } .custom-footer-col.right { text-align: right; background: none; border: none; width: 25%; font-family: "ItalianTypewriterBold"; font-size: 14px; color: #b7b7b5; text-decoration: none; cursor: pointer; padding: 0; word-spacing: 0; white-space: nowrap; } .custom-footer-col.right:hover { color: #191917; transition: none; text-decoration: none; } /* Subfooter mobile */ @media (max-width: 767px) { .custom-footer-col.middle { display: none; } .custom-footer-col.left, .custom-footer-col.right { flex: 0 0 50%; max-width: 50%; } } /* Klaviyo newsletter field */ @media (max-width: 767px) { .section-footer__row--blocks { padding-top: 10px; padding-bottom: 55px; } .section-footer__klaviyo-block { width: 100%; margin-bottom: 20px; } } .custom-footer-col.middle { text-align: center; font-family: termina, sans-serif; font-weight: 600; font-size: 7.4px; width: 50%; color: #191917; padding-top: 2px; letter-spacing: 1px; } @media (min-width: 768px) and (max-width: 1025px) { .section-footer__row--blocks[data-num-blocks="4"] > .section-footer__row__col { width: 100%; flex: 0 0 100%; max-width: 100%; } .section-footer__row--blocks[data-num-blocks="4"] > .section-footer__row__col:nth-child(2), .section-footer__row--blocks[data-num-blocks="4"] > .section-footer__row__col:nth-child(3), .section-footer__row--blocks[data-num-blocks="4"] > .section-footer__row__col:nth-child(4) { width: 33.333% !important; flex: 0 0 33.333% !important; max-width: 33.333% !important; } .section-footer__row--blocks[data-num-blocks="4"] > .section-footer__row__col:nth-child(1){ display: none; } .section-footer__row--blocks { display: flex; flex-wrap: wrap; } } /* Currency drawer */ #currency-drawer { position: fixed; inset: 0; overflow: hidden; } #currency-drawer .drawer-content { height: 100%; overflow-y: auto; overscroll-behavior: none; -webkit-overflow-scrolling: touch; } html.currency-drawer-open, body.currency-drawer-open { overflow: hidden; overscroll-behavior: none; height: 100%; } @media (max-width: 769px){ div#currency-drawer-body { margin-bottom: 20px !important; } } #currency-drawer-body .drawer-main-content{ margin: 25px 0; display: flex; justify-content: space-between; align-items: center; width: 100%; } #currency-drawer-body .bottom-info-left{ text-align: left; padding-top: 4px; } #currency-drawer-body .bottom-info-right{ text-align: right; margin-left: auto; padding-top: 4px; } .info-drawer.active .drawer-overlay { visibility: visible; } .info-drawer .drawer-content { transform: translateX(100%); transition: transform 0.4s ease; } @media (min-width: 768px){ #currency-drawer .close-drawer{ position: absolute; top: 19px; right: 23px; } } @media (max-width: 768px){ .info-drawer.active .drawer-content { transform: translateX(0); width: 100%; } #currency-drawer .close-drawer{ position: absolute; top: 17px; right: 17px; } } .currency-row, .currency-row:first-child { border-top: 1px solid #dadad5; } .currency-row:last-child { border-bottom: 1px solid #dadad5; } .currency-row__label { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; cursor: pointer; gap: 16px; } .currency-row__left { display: inline-flex; gap: 8px; } .currency-row__input { opacity: 0; } .currency-row__fakebox { width: 12px; height: 12px; border: 1px solid #dadad5; position: relative; flex: 0 0 12px; display: flex; align-items: center; justify-content: center; background: transparent; } /* When checked → draw the X in September Spirit */ .currency-row__input:checked + .currency-row__fakebox::after { content: "X"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -45%); font-family: 'September Spirit', serif !important; font-size: 24px; font-weight: 600; color: #b7b7b5; } .currency-code, .currency-symbol{ font-family: termina, sans-serif; font-weight: 600; font-style: normal; font-size: 8.4px; letter-spacing: 0.6px; } /************************************************************************************************************************************************ ************************************************************* FOOTER SUBPAGES *********************************************************** ************************************************************************************************************************************************/ /* ========================================================= ====================== LEGAL PAGES ======================== ========================================================= */ .chevron-list li a { position: relative; padding-left: 1.5em; /* space for the › */ } @media (min-width:768px){ .chevron-list li a::before { content: "›"; position: absolute; left: 0; top: 0; line-height: 1.5; top: -2px; font-size: 9.4px; } } .legal-wrap{ margin-top:130px; margin-bottom:50px; } @media (min-width:1025px){ .legal-wrap{ margin-left:15%; margin-right:15% } .legal-grid{ display:grid; grid-template-columns:1fr 1fr; column-gap:5%; } .legal-right{ text-align:left; text-align:justify; text-justify:inter-word; padding-top: 5px; } } .container.container--reading-width,.container .shopify-policy__container{ max-width:none } .page-header:not(.page-header--with-background) { padding: 0 0 20px; } @media (min-width:768px) and (max-width:1024.98px){ .legal-wrap{ padding-left:40px; padding-right:40px; } .legal-right{ padding-top: 7px; } .section-legal-layout .legal-grid{ display: grid; grid-template-columns: 1fr 1fr; column-gap: 5%; align-items: start; } .section-legal-layout .legal-nav{ margin-bottom: 0; position: static; } } @media (max-width: 768px) { .page-header:not(.page-header--with-background) { padding: 0; } .chevron-list li a::before { content: "›"; position: absolute; left: 0; top: 0; line-height: 1.5; top: -1px; font-size: 9.4px; } .legal-nav{ margin-bottom: 0px; position:static; } .legal-wrap{ padding: 0 24px; margin: 110px 0 50px; } .legal-grid{display:block}.legal-nav{ margin-bottom:40px; margin-top: 30px; position:static; } } /* ===== LIST INDENTS IN RIGHT COLUMN ===== */ .legal-right .legal-body ul, .legal-right .legal-body ol { padding-left: 1em; list-style-position: inside; } .legal-header .majortitle{ text-align:left; color: #b7b7b5 !important; } .chevron-list li{ margin-bottom:12px; } .legal-nav a{ color:#b7b7b5; font-family:termina,sans-serif; font-weight:600; font-size:7.9px; letter-spacing:.6px; text-transform:uppercase; text-decoration:none; } .legal-nav a:hover,.legal-nav a.is-active{ color: #6b6c6c!important } .rte :is(ul,ol){ font:400 12.4px "ltc-italian-old-style-pro",serif; color:#191917; margin-inline-start:4px } /* Smooth anchor offset below sticky header */ .legal-right .legal-body h2{ scroll-margin-top:120px } /* ========================================================= ========================= FAQ ============================= ========================================================= */ h1.faq-index__heading{ padding-bottom: 25px !important; color: #b7b7b5 !important; } /* FAQ header: remove mobile tap highlight flash */ #shopify-section-{{ section.id }}, #shopify-section-{{ section.id }} *{ -webkit-tap-highlight-color: rgba(0,0,0,0); tap-highlight-color: rgba(0,0,0,0); } /* If any links/buttons in the header still "flash" on press */ #shopify-section-{{ section.id }} a:active, #shopify-section-{{ section.id }} button:active, #shopify-section-{{ section.id }} [role="button"]:active{ background-color: transparent !important; opacity: 1 !important; filter: none !important; transform: none !important; } /* Optional: prevent text selection flash on quick taps */ #shopify-section-{{ section.id }} .faq-index, #shopify-section-{{ section.id }} .faq-header__content{ -webkit-user-select: none; user-select: none; } #shopify-section-{{ section.id }} .faq-search__input{ -webkit-user-select: text; user-select: text; /* keep input selectable */ } .faq-index__item-container .faq-index-item__link { position: relative; padding-left: 14px; /* space for the › */ } .faq-index__item-container .faq-index-item__link::before { content: "›"; position: absolute; left: 0; top: 0; line-height: 1.4; font-size: inherit; font-family: inherit; color: inherit; } .collapsible-tabs .disclosure { margin: 0; border: 0; } .collapsible-tabs__tab { border-bottom: 1px solid #dadad5; } .collapsible-tabs__tab p:first-child { margin-top: 0; } .collapsible-tabs__tab p:last-child { margin-bottom: 0; } .collapsible-tabs__heading { margin-top: 65px; margin-bottom: 20px; font-family: 'Biondi'; letter-spacing: 1px; font-size: 10px; font-weight: 400; color: #191917; } .faq-index__item-container { padding-top: 60px; } div#shopify-section-template--27533173784842__collapsible_tabs_P78rgt{ margin-bottom: 55px; } @media (min-width: 768px) { .faq-index__sticky-container { position: absolute; top: 70px; left: 15%; height: 0px; } .collapsible-tabs { margin-left: 51.5%; margin-right: 15%; margin-top: 70px; } #shopify-section-template--25561116836106__faq-content-1{ margin-top: 135px; } div#shopify-section-template--26715966734602__faq-content-1 { padding-top: 20px; } } div#shopify-section-template--26715966734602__collapsible_tabs_P78rgt { margin-bottom: 60px; } @media (max-width: 768px) { .collapsible-tabs { max-width: var(--reading-container-width, 800px); margin-left: 24px; margin-right: 24px; } .faq-index__sticky-container{ height: 0px !important; } .faq-index__item-container { margin-left: 24px; margin-right: 24px; } div#shopify-section-template--27533173784842__faq-content-1 { padding-top: 280px !important; } } .collapsible-tabs > .collapsible-tabs__block:first-of-type { border-top: 1px solid #dadad5; } .collapsible-tabs__tab .disclosure__title { border: 0; line-height: 1.8; font-family: termina, sans-serif; font-weight: 600; font-style: normal; font-size: 7.9px; letter-spacing: 0.6px; padding-top: 12px; padding-bottom: 12px; padding-right: 15px; text-transform: uppercase; } .disclosure__content.rte{ color: #191917; } .faq-header__content { display: none; } span.disclosure__extra-text { display: none; } a.faq-index-item__link { color: #b7b7b5 !important; font-family: termina, sans-serif; font-weight: 600; font-size: 8.4px; letter-spacing: .6px; text-transform: uppercase; text-decoration: none; } a.faq-index-item__link:hover, a.faq-index-item__link:focus-visible, a.faq-index-item__link:active { color: #6b6c6c !important; } .faq-index-item { padding: 6px 0 6px; } /************************************************************************************************************************************************ ****************************************************************** CART ***************************************************************** ************************************************************************************************************************************************/ /* Padding desktop */ @media (min-width: 768px){ .cart-drawer__content-item { padding: 0 30px; } .cart-drawer__footer { border: none; padding: 0 30px 20px; } } /* Padding mobile */ @media (max-width: 768px){ .cart-drawer__footer { border: none; padding: 0 24px 24px; } } /* Close button */ .drawer__close-btn svg { margin: -10px; stroke: #b7b7b5; padding: 0px 0px 0px; stroke-width: 1px; } /* Quantity */ .quantity.buttoned-input:focus-within { outline: none; border: none; box-shadow: none; } svg.icon.feather.feather-minus, svg.icon.feather.feather-plus { stroke: #191917 !important; fill: transparent; stroke-width: 2px; width: 30px; height: 30px; opacity: 1; } .cart-item__column.cart-item__quantity { margin-bottom: 0; position: relative; } .buttoned-input.buttoned-input--small { position: absolute; bottom: 0; border: none; display: flex; align-items: center; justify-content: flex-start; gap: 0px; flex-wrap: nowrap; } .buttoned-input.buttoned-input--small .quantity-down, .buttoned-input.buttoned-input--small .quantity-up { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; padding-top: 4px; line-height: 1; } span.cart-item__selling-price.eteanne-money{ line-height: -1px; font-family: termina, sans-serif; font-weight: 600; font-style: normal; font-size: 8.9px; letter-spacing: .6px; text-transform: uppercase; margin-bottom: 10px; } .buttoned-input.buttoned-input--small .cart-item__quantity-input { flex: 0 0 auto; width: 16px; min-width: 16px; text-align: center; margin: 0; padding: 0; line-height: 1; padding-top: 4px; border: none; background: transparent; font-family: "ItalianTypewriterBold" !important; font-weight: 500 !important; font-size: 14px !important; appearance: none; -webkit-appearance: none; -moz-appearance: textfield; } .buttoned-input.buttoned-input--small .cart-item__quantity-input::-webkit-outer-spin-button, .buttoned-input.buttoned-input--small .cart-item__quantity-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* Colour cicrles */ .variant-colour-swatches { display: flex; gap: 6px; margin-top: 4px; align-items: center; } .swatch { width: 10px; height: 10px; border: none; margin-top: 6px; border-radius: 50%; background-color: var(--swatch-color); display: inline-block; } /* Size */ .variant-size, .variant-colour-name { text-decoration: none; letter-spacing: .5px; line-height: 13px; padding-bottom: 5px; font-size: 15px; font-family: "ItalianTypewriterBold"; color: #b7b7b5; } /* Free shipping block */ .with-icon.text-box.text-box--wide{ padding: 25px 0; } span.with-icon__beside { line-height: 15px; } /* Total/shipping table */ .cart-drawer__footer .lightly-spaced-row { margin-bottom: 20px; } .cart-policies-bar { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #dadad5; border-bottom: 1px solid #dadad5; padding-top: 3%; padding-bottom: 3%; padding-top: 9px; padding-bottom: 9px; } .shipping-label { line-height: 1; font-family: termina, sans-serif; font-weight: 600; font-style: normal; font-size: 8.4px; letter-spacing: .6px; width: 50%; } .cart-policies-bar .cart-policies { text-align: right; font-size: 14px; margin-left: 24px; flex: 1; font-family: "ItalianOldStyleMTPro" !important; font-weight: 400; font-style: italic; line-height: 1.6; font-size: 12.4px; letter-spacing: 0px; margin-bottom: 2px; margin-top: 2px; } .subtotal.h4.heading-font.opposing-items .theme-money { font-family: "ItalianOldStyleMTPro" !important; font-weight: 400; font-style: normal; line-height: 1.6; font-size: 12.4px; text-align: justify; letter-spacing: 0px; } .subtotal.h4.heading-font.opposing-items { margin-bottom: 0px; border-top: 1px solid #dadad5; padding-top: 11px; padding-bottom: 11px; line-height: 1; font-family: termina, sans-serif; font-weight: 600; font-style: normal; font-size: 8.4px; letter-spacing:0.6px; } /* Terms */ input#terms { display: none; } /* Text under checkout button */ .checkout-footer-text { display: flex; justify-content: space-between; } .secure-payment-logos { display: flex; align-items: center; gap: 12px; text-align: right; padding-top: 14px; } .secure-payment-logos img { height: 10px; width: auto; display: block; display: inline-block; } /* Empty cart page */ @media (min-width: 768px){ .checkout-footer-text-empty{ position: absolute; bottom: 28px; left: 30px; right: 30px; display: flex; justify-content: space-between; margin-top: 14px; } .cart-drawer__empty-content .drawer__close-btn{ top: 36px; right: 30px; } .cart-drawer__empty-content .cart-drawer__header { position: absolute; top: 36px; left: 30px; margin-top: 0px; margin-bottom: 0px; } .cart-drawer__empty-content .button-row { position: absolute; bottom:65px; left: 30px; right: 30px; display: flex; justify-content: center; padding: 0; } } @media (max-width: 768px){ .checkout-footer-text-empty{ position: absolute; bottom: 20px; left: 24px; right: 24px; display: flex; justify-content: space-between; margin-top: 14px; } .cart-drawer__empty-content .drawer__close-btn{ top: 29px; right: 24px; } .cart-drawer__empty-content .cart-drawer__header { position: absolute; top: 28.5px; left: 24px; margin-top: 0px; margin-bottom: 0px; } .cart-drawer__empty-content .button-row { position: absolute; bottom: 60px; left: 24px; right: 24px; display: flex; justify-content: center; padding: 0; } } span.left-tex-empty { font-family: September Spirit; font-size: 32px; font-style: normal; font-weight: 400; color: #b7b7b5; margin-top: 0; line-height: 24px; display: flex; align-items: flex-end; } span.right-text-empty, span.right-text-empty a{ text-align: right; font-size: 14px; font-family: "ItalianTypewriterBold"; font-weight: 400; font-style: normal; color: #b7b7b5; !important; letter-spacing: .5px; padding-top: 10px; } span.right-text-empty, span.right-text-empty a:hover{ color: #191917 !important; } .cart-drawer__empty-content .button-row__btn { width: 100%; max-width: 100%; text-align: center; font-family: Biondi; letter-spacing: 1px; font-size: 10px; font-weight: 400; padding: 15px 0px } .cart-policies-bar.secure-payments-bar { border-top: none; margin-bottom: 20px; padding-top: 16px; padding-bottom: 16px; } /************************************************************************************************************************************************ ***************************************************************** SEARCH **************************************************************** ************************************************************************************************************************************************/ /* Disable header interactions while drawer open */ body.show-search #pageheader, body.show-search .pageheader, body.show-search .pageheader.header--hidden, body.show-search .pageheader.header--scrolled { pointer-events: none; transition: transform 04s ease, background-color 00.6s ease, border-color 00.6s ease, border-width 00.6s ease; } @media (max-width: 768px) { .main-search__header { padding: 24px 24px 16px 24px; } } .main-search__close { background: none; position: absolute !important; border: none; padding: 6px; margin: -6px; cursor: pointer; color: #b7b7b5;; } /* Results */ .main-search-result__heading { font-family: termina, sans-serif !important; font-weight: 600 !important; color: #191917; font-style: normal; font-size: 7.9px; letter-spacing: .6px; text-transform: uppercase; padding-bottom: 5px; } .main-search-result__text { font-family: termina, sans-serif; font-weight: 600; font-size: 7.9px; letter-spacing: .6px; color: #b7b7b5; text-transform: uppercase; text-align: left; margin: 14px 0; } .main-search-result__text:hover, .main-search-result__text:focus-visible, .main-search__footer-right:hover { color: #191917; text-decoration: none; } /* Footer row built/maintained by JS */ @media (min-width: 768px) { .main-search__footer { margin-top: auto; display: flex; justify-content: space-between; align-items: flex-end; padding: 25px 0 25px 0; background: transparent; } } @media (max-width: 768px) { .main-search__footer { margin-top: auto; display: flex; justify-content: space-between; align-items: flex-end; padding: 30px 0 120px 0; background: transparent; } } .main-search__footer-left { font-family: 'September Spirit', serif; font-size: 32px; font-weight: 400; color: #b7b7b5; line-height: .83; } .main-search__footer-right { font-family: "ItalianTypewriterBold"; font-weight: 400; font-size: 14px; color: #b7b7b5; line-height: 25px; text-decoration: none; } .main-search__empty_message { position: absolute; font-family: termina, sans-serif; font-weight: 600; font-style: normal; font-size: 7.9px; letter-spacing: .6px; text-transform: uppercase; color: #b7b7b5; } /* Input + label styling */ input[type=text].main-search__input { height: 25px; line-height: 1; padding: 5px 0 0; border-bottom: 1px solid #dadad5; background: #F1EFE8; font-size: 30px; color: #b7b7b5; box-sizing: border-box; } .main-search__input::placeholder { color: #b7b7b5; } /* Remove old blocky label margins/padding (superseded by header row) */ @media (min-width: 768px) { .main-search__label{ line-height: 1; font-family: 'Biondi'; letter-spacing: 1px; font-size: 10px; font-weight: 400; color: #191917; padding: 36.5px 0 35.5px 30px; } } @media (max-width: 768px) { .main-search__label { padding-left: 20pxt; text-align: left; padding-bottom: 30px; margin: 0; padding: 30px 0 30px 24px; text-transform: uppercase; line-height: 1; font-family: 'Biondi'; letter-spacing: 1px; font-size: 10px; font-weight: 400; color: #191917; } } /* Kill any spinner artifacts */ body .main-search__input-container .spinner, body .main-search__form .spinner, body .main-search__button .spinner, body .search-suggestions .spinner, body .loading-spinner, body .icon--spinner, body .icon-spinner { display: none; animation: none; } .search-suggestions__heading { font-family: termina, sans-serif; font-weight: 600; font-style: normal; padding-bottom: 4px; font-size: 8.4px; letter-spacing: .6px; text-transform: uppercase; display: block; } /* Hide image dots inside drawer */ main-search .product-block__image-dots { display: none !important; } /* Prevent background scroll when open (browsers that support :has) */ @supports selector(:has(*)) { html:has(body.show-search) { overflow: hidden; overscroll-behavior: none; height: 100%; } } /* SEARCH PAGE (full page template tweaks) */ body.template-search .pageheader, body.template-collection .pageheader { border-bottom: 1px solid #dadad5; } /* Extra bottom space under search results title */ body.template-search h1.pagetitle.h3 { margin-bottom: 87px; } /* Hide filter toggle on search results page */ body.template-search .utility-bar__right, .shopify-section.section-search-template.page-section-spacing .main-search { display: none; } #shopify-section-template--26715967062282__main { margin-top: 110px !important; margin-bottom: 40px !important; } @media (min-width: 1025px) { .shopify-section.section-search-template.page-section-spacing .product-grid--per-row-4 { --product-columns-desktop: 3; column-gap: 12px; } main-search .main-search__results .product-block__detail .title-row{ display: flex; align-items: center; width: 100%; gap: 0; padding-bottom: 6px; } } @media (max-width: 1025px) { .shopify-section.section-search-template.page-section-spacing .product-grid--per-row-4 { --product-columns-desktop: 2; column-gap: 12px; } } @media (max-width: 768px) { .product-block.product-block.main-search-result .product-block__title { padding-top: 4px; column-gap: 12px; } } /* Let the container fill the leftover height under the label (not 100%) */ main-search .main-search__container.container { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; margin: 0; } /* Footer pins to bottom of the container as intended */ main-search .main-search__footer { margin-top: auto; } .product-block__title.title-text{ text-align: left; font-family: "termina" !important; font-size: 8.25px !important; font-weight: 600 !important; line-height: 1.6 !important; letter-spacing: 0.6px; color: #191917; text-transform: uppercase; padding-top: 6px; } /* Title takes 75% */ main-search .main-search__results .product-block__detail .title-row .product-block__title.title-text{ flex: 0 0 90%; min-width: 0; } @media (min-width: 768px) and (max-width: 1024px) { .title-row { display: flex !important; justify-content: space-between !important; align-items: center !important; width: 100%; } .title-row .product-block__title { min-width: 0; flex: 1 1 auto; padding-bottom: 0px; } .title-row .title-swatch { flex: 0 0 auto; margin-left: 10px; padding-bottom: 7px; } } .hometitle.align-center.has-paging{ text-align: left !important; } /* Swatch takes 25% and is pushed to the far right */ main-search .main-search__results .product-block__detail .title-row .title-swatch{ flex: 0 0 10%; margin-left: auto; display: flex; justify-content: flex-end; align-items: center; padding-top: 3px; } /* Swatch dot */ main-search .main-search__results .product-block__detail .title-row .title-swatch::before{ content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--swatch-color); display: inline-block; } /* Hide variant swatches overlay in search drawer */ main-search .variant-colour-swatches.variant-colour-swatches--overlay{ display: none; } /************************************************************************************************************************************************ ******************************************************************* HOME ************************************************************** ************************************************************************************************************************************************/ /************************************************************************************************************************************************ ******************************************************************* SHOP ************************************************************** ************************************************************************************************************************************************/ /* Margin/padding */ @media (min-width: 768px) { .container.container--no-max { padding: 0 40px; } .product-grid { column-gap: 24px; } } @media (max-width: 768px) { .container.container--no-max { padding: 0 24px; } div#shopify-section-template--25561116672266__main { margin-top: 110px; } .product-grid { column-gap: 18px; } } /* Shop title & description */ @media (min-width: 768px) { .page-header__row { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; padding-right: 40px; padding-left: 38px; margin: 140px 0 50px; } .template-collection .page-header:not( .page-header--with-background) .pagetitle:last-child { text-align: left; } .page-header__text { width: 32%; text-align: justify; hyphens: auto; text-align-last: left; font-family: "ItalianOldStyleMTPro" !important; font-weight: 400; font-style: normal; line-height: 1.6; font-size: 12.4px; line-height: 1.6; padding-top: 7px; } } @supports selector(:has(*)) { @media (min-width: 1025px) { .section-search-template .container.container--no-max:has(.product-grid), .section-search-template .container.container--no-max { --gap: 24px; margin-bottom: 50px; margin-top: 120px; } } } .section-search-template .filters-adjacent.collection-listing > h5.fully-spaced-row { color: #000; } @supports selector(:has(*)) { @media (min-width: 768px) and (max-width: 1025px) { .section-search-template .container.container--no-max:has(.product-grid), .section-search-template .container.container--no-max { --gap: 24px; margin-bottom: 100px; margin-top: 120px; } } } #shopify-section-template--27533174112522__main .utility-bar { margin-top: 0px; } @media (max-width: 768px) { .page-header__row { justify-content: space-between; align-items: flex-start; flex-wrap: wrap; padding: 0 24px; margin-bottom: 25px; margin-top: 110px; } #shopify-section-template--26715966210314__main .container.page-header__row{ margin: 0 !important; } #shopify-section-template--26715966210314__main .page-header__text{ padding-top: 25px; padding-bottom: 18px; } .page-header__text { padding-top: 40px; width: 100%; text-align: justify; hyphens: auto; text-align-last: left; font-family: "ItalianOldStyleMTPro" !important; font-weight: 400; font-style: normal; line-height: 1.6; font-size: 12.4px; line-height: 1.6; } body.template-collection.collection-all .page-header__text { padding-top: 0 !important; } } .section-search-template .product-block.page-block .text-cont p { text-align: justify; hyphens: auto; text-align-last: left; padding-bottom: 10px !important; } .section-search-template .product-block.page-block h6.page-block__title { padding-top: 10px; } @media (min-width: 768px) and (max-width: 1025px) { .page-header__text { width: 48.3%; text-align: justify; hyphens: auto; text-align-last: left; font-family: "ItalianOldStyleMTPro" !important; font-weight: 400; font-style: normal; line-height: 1.6; font-size: 12.4px; line-height: 1.6; padding-top: 5px; } } /* Breadcrumb */ nav.breadcrumb { color: #b7b7b5; font-family: "termina", sans-serif; font-weight: 600; font-style: normal; letter-spacing: .6px; font-size: 7.9px; } .breadcrumb__separator { padding: 0 0.35rem; /* adjust as needed */ } .breadcrumb__link { color: #b7b7b5; } .breadcrumb__link:hover { color: #191917; } @media (min-width: 960px) { .image-cont--with-secondary-image .image-page-button { display: none; } } @media (max-width: 1025px) { .filters-adjacent collection-listing .product-grid--per-row-mob-2 { --product-columns-desktop: 2 !important; column-gap: 24px; } } .media-gallery.media-gallery--layout-carousel-under.media-gallery-size-medium.product-column-left.has-thumbnails .mobile-pagination, .media-gallery.media-gallery--layout-carousel-under.media-gallery-size-medium.product-column-left.has-thumbnails .mobile-pagination__count { display: none !important; } /* ===== Bars: Totême-style, pinned overlay ===== */ @media (max-width: 63.99em) { .product-block__image-dots { position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; display: grid; grid-template-columns: repeat(auto-fit, minmax(1px, 1fr)); background-color: var(--color-toteme-mid-grey, #e1e0da); pointer-events: none; z-index: 5; gap: 0; } .product-block__image-dot { display: block; width: 100%; height: 100%; background: transparent; } .product-block__image-dot--active { background-color: #c5c4be; } } /* Grid number of columns */ .mega-menu__image { position: relative; } .mega-menu__image-text { position: absolute; bottom: 10px; left: 10px; padding: 6px 10px; border-radius: 4px; max-width: 80%; } .cols-switchers { display: flex; align-items: center; white-space: nowrap; } .cols-switcher { display: flex; align-items: center; justify-content: center; gap: 0rem; min-width: 2rem; height: 2rem; padding: 0 .5rem; background: none; color: #b7b7b5; font-family: "termina", sans-serif; font-weight: 600; font-style: normal; font-size: 7.9px; letter-spacing: .6px; text-transform: uppercase; text-decoration: none; cursor: pointer; } .cols-switcher-title{ color: #b7b7b5; font-family: "termina", sans-serif; font-weight: 600; font-style: normal; letter-spacing: .6px; font-size: 7.9px; padding-right: 10px; } .product-grid.product-grid--per-row-6 { --product-columns-desktop: 6; column-gap: 24px; } .cols-switcher:hover, .cols-switcher.is-active, .cols-switcher:focus { color: #191917; transition: none; } /* Column switcher postion desktop */ @media (min-width: 768px) { .container.container--no-max:has(.product-grid) { --gap: 24px; margin-bottom: 50px; margin-top: 60px; } } @media (min-width: 768px) { { .container.container--no-max:has(.product-grid--per-row-3) { --cols: 3; } .container.container--no-max:has(.product-grid--per-row-2) { --cols: 2; } .container.container--no-max:has(.product-grid--per-row-6) { --cols: 6; } } .meta-row--two-column .meta-row__item.right { text-align: right; font-family: "September Spirit", serif !important; font-size: 32px; font-style: normal; font-weight: 400; color: #b7b7b5; } .meta-row--two-column .meta-row__item.left { text-align: left; font-family: termina, sans-serif; font-weight: 600; font-style: normal; font-size: 8.4px; letter-spacing: .6px; color: #b7b7b5; padding-bottom: 0px; } .meta-row--two-column { display: flex; justify-content: space-between; gap: 0px; align-items: flex-end; padding-bottom: 5px; } } @media (min-width: 768px) { .utility-bar__right .utility-bar__item.desktop-only { position: absolute; left: calc( ( (100% - (var(--cols, 3) - 1) * var(--gap, 24px)) / var(--cols, 3) ) * 2 + (2 * var(--gap, 24px))); top: 50%; transform: translateY(-50%); margin: 0; } .product-grid--per-row-3 .product-block__title { text-align: left; font-family: 'Biondi'; letter-spacing: 1px; font-size: 10px; font-weight: 400; color: #191917; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; max-width: 100%; padding-top: 12px; } } @media (max-width: 768px) { .utility-bar__right .utility-bar__item.desktop-only { display: none; } .product-grid--per-row-3 .product-block__title { text-align: left; font-family: "termina" !important; font-size: 8.25px !important; font-weight: 600 !important; line-height: 1.6 !important; letter-spacing: 0.6px; color: #191917; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; max-width: 100%; padding-top: 6px; } } .product-grid--per-row-6 .product-block__title { text-align: left; font-family: 'Biondi'; letter-spacing: 1px; font-size: 10px; font-weight: 400; color: #191917; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; max-width: 100%; padding: 6px 0; } .product-grid--per-row-2 .product-block__title { text-align: left; font-family: 'Biondi'; letter-spacing: 1px; font-size: 10px; font-weight: 400; color: #191917; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; max-width: 100%; padding: 12px 0 0; } @media (max-width: 768px){ .product-block { margin-bottom: 10px; } .meta-row--two-column .meta-row__item.right { text-align: right; font-family: "September Spirit", serif !important; font-size: 24px; font-style: normal; font-weight: 400; color: #b7b7b5; display: none; } .meta-row--two-column .meta-row__item.left { text-align: left; font-family: termina, sans-serif; font-weight: 600; font-style: normal; font-size: 8.4px; letter-spacing: .6px; color: #b7b7b5; padding-top: 1px; } .meta-row--two-column { display: flex; justify-content: space-between; gap: 0px; align-items: flex-end; } } .product-grid--per-row-6 .meta-row__item.right, .product-grid--per-row-6 .variant-colour-swatches--overlay, .product-grid--per-row-6 .swatch-inline { display: none !important; } /* Coloured swatches on images */ .image-cont { position: relative; } .product-grid--per-row-2 .variant-colour-swatches--overlay { position: absolute; top: 18px; left: 25px; z-index: 6; display: flex; flex-direction: column; gap: 2px; pointer-events: none; border: none !important; } @media (min-width: 768px){ .variant-colour-swatches--overlay .swatch { width: 9px; height: 9px; border-radius: 50%; background: var(--swatch-color); pointer-events: none; transition: none; transform: none; opacity: 1; filter: none; cursor: default; border: none; } .variant-colour-swatches--overlay { position: absolute; top: 5px; left: 15px; z-index: 6; display: flex; flex-direction: column; gap: 2px; pointer-events: none; border: none; } } @media (max-width: 768px){ .variant-colour-swatches--overlay .swatch { width: 7px; height: 7px; border-radius: 50%; background: var(--swatch-color); pointer-events: none; transition: none; transform: none; opacity: 1; cursor: default; border: none; } } .variant-colour-swatches--overlay .swatch:hover, .variant-colour-swatches--overlay .swatch:focus, .variant-colour-swatches--overlay .swatch:active { transform: none; opacity: 1; filter: none; border: none; } /* 6-column layout: title + swatch on one line */ .product-grid--per-row-6 .title-row { display: flex; align-items: center; gap: 0px; } @media (max-width: 768px) { .title-row { justify-content: space-between; } .title-row .title-text { flex: 1; min-width: 0; } .title-row .title-swatch { display: flex; justify-content: flex-end; flex-shrink: 0; } } .product-grid--per-row-6 .title-row .title-text { flex: 0 0 80%; } .product-grid--per-row-6 .title-row .title-swatch { display: flex; margin-left: auto; justify-content: flex-end; align-items: center; padding-bottom: 3.5px; } .product-grid--per-row-6 .title-row .title-swatch::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--swatch-color); } /* Always 2 columns on mobile & tablet */ @media (max-width: 1025px) { .filters-adjacent .collection-listing .product-grid { --product-columns-desktop: 2 !important; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; } .product-grid.product-grid--per-row-6, .product-grid.product-grid--per-row-5, .product-grid.product-grid--per-row-4, .product-grid.product-grid--per-row-3, .product-grid.product-grid--per-row-2 { --product-columns-desktop: 2; grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 768px) { /* keep overlay hidden */ .product-grid .variant-colour-swatches--overlay { display: none; } .product-grid .title-row{ display:flex; align-items:center; width:100%; gap:0; } .product-grid .title-row .product-block__title.title-text{ flex: 0 0 75%; min-width: 0; } .product-grid .title-row .title-swatch{ flex: 0 0 25%; margin-left: auto; display:flex; justify-content:flex-end; align-items:center; padding-top: 5px; } /* this is the missing part for YOUR markup */ .product-grid .title-row .title-swatch::before{ content:''; width:8px; height:8px; border-radius:50%; background: var(--swatch-color); display:inline-block; } } /* ========================================================= ==================== FILTER DRAWER ======================== ==========================================================*/ /* Lock heading layout so state changes don't affect height */ .filter-group__heading { display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: 14px 0; border-bottom: 1px solid transparent; box-sizing: border-box; } /* When open, only change the color of the border (not the border itself) */ .filter-group.is-active .filter-group__heading, .filter-group.is-open .filter-group__heading, .toggle-target-toggler--is-active.filter-group__heading { border-bottom-color: #dadad5; } /* Make indicator immune to baseline / line-box changes */ .filter-group__heading__indicator { display: flex; align-items: center; justify-content: center; width: 14px; height: 14px; line-height: 0; flex: 0 0 14px; } .rte.triple-text__item{ padding-right: 0px !important; } .filter-group__heading__indicator svg { display: block; width: 14px; height: 14px; } /* Filter button */ @media (min-width: 1025px) { .toggle-btn { padding-inline-end: 1.3em; color: #b7b7b5; font-family: "termina", sans-serif; font-weight: 600; font-style: normal; letter-spacing: .6px; font-size: 7.9px; } } @media (max-width: 1025px) { .toggle-btn { padding-inline-end: 1.2em; color: #b7b7b5; letter-spacing: .6px; font-family: "termina", sans-serif; font-weight: 600; font-style: normal; letter-spacing: 0.6px; font-size: 7.9px; } } .toggle-btn:hover .plus-icon { stroke: #191917; } span.utility-bar__item.mobile-only { display: none; } /* ——— Layout & basic styling ——— */ form#CollectionFilterForm { margin-top: 30.5px; margin-bottom: 30.5px; } .filters .filter-group:first-of-type { border-top: 1px solid #dadad5; } h2.filters__title{ line-height: 1; font-family: 'Biondi'; letter-spacing: 1px; font-size: 11px; font-weight: 400; color: #191917; padding-top: 2px; padding-bottom: 20.5px; } /* Shade */ .filter-container.filter-container--drawer > .filter-shade { display: block; position: fixed; inset: 0; background-color: rgba(37, 36, 35, 0.15); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 00.6s ease, visibility 0s linear 00.6s; z-index: 9998; } .filter-container.filter-container--drawer.is-active > .filter-shade, .filter-container.filter-container--drawer.filter-container--show-filters-mobile > .filter-shade, .filter-container.filter-container--drawer.filter-container--show-filters-desktop > .filter-shade { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 00.6s ease; } /* Panel (closed baseline) */ .filter-container.filter-container--drawer .filters { position: fixed; top: 0; right: 0; bottom: 0; left: auto; background: #f1efe8; overflow-y: auto; z-index: 9999; transform: translate3d(100%, 0, 0); transition: transform 00.6s ease; will-change: transform; backface-visibility: hidden; contain: paint; display: flex; flex-direction: column; padding: 33.5px 30px 24px; } /* Widths */ @media (max-width: 1025px) { .filters .bottom-info-right { font-family: "ItalianTypewriterBold"; font-weight: 400; font-size: 14px; color: #b7b7b5; line-height: 25px; margin: 0; letter-spacing: .5px; text-align: right; width: 25%; } } @media (min-width: 1025px) { .filter-container.filter-container--drawer .filters { width: 33.33%; } .filters .bottom-info-right { font-family: "ItalianTypewriterBold"; font-weight: 400; font-size: 14px; color: #b7b7b5; line-height: 25px; margin: 0; padding-left: 1.5em; text-align: right; width: 50% !important; letter-spacing: .5px; } } /* OPEN states (support both theme flags and our wrapper) */ .filter-container.filter-container--drawer.is-active .filters, .filter-container.filter-container--drawer.filter-container--show-filters-mobile .filters, .filter-container.filter-container--drawer.filter-container--show-filters-desktop .filters { transform: translate3d(0, 0, 0); right: 0; visibility: visible; opacity: 1; } /* When drawer exists, never push the grid sideways */ .filter-container--drawer ~ .filters-adjacent, .filter-container--drawer .filters-adjacent { transform: none; width: auto; } /* Kill conflicting desktop collapse rules */ @media (min-width: 1000px) { .filter-container--side:not(.filter-container--show-filters-desktop) .filters { visibility: visible; width: min(500px, 100vw); height: 100%; overflow: auto; opacity: 1; transform: translate3d(100%,0,0); } } /* Theme quirk: hide filters on search template */ .section-search-template .filter-container--side .filters { display: none !important; } /* Body lock, if used by scripts */ body.drawer-open { overflow: hidden; } /* ——— Footer pinned to bottom ——— */ .filters__inner { flex: 1 1 auto; } .filters .drawer-main-content.filters__footer { margin-top: auto; display: flex; justify-content: space-between; align-items: flex-end; padding-top: 25px; } .filters .bottom-info-left { font-family: 'September Spirit', serif !important; font-size: 32px; font-weight: 400; color: #b7b7b5; line-height: .83; } .filters .bottom-info-right:hover { color: #191917 !important; } /* ——— Controls (Close button) ——— */ .filter-container.filter-container--drawer .filters__close, .filter-container.filter-container--drawer .drawer__close-btn { position: absolute; width: 36px; height: 36px; display: grid; place-items: center; background: none; border: none; border-radius: 999px; cursor: pointer; z-index: 10000; color: #191917; transition: opacity .6s ease; } .filter-container.filter-container--drawer .filters__close:hover, .filter-container.filter-container--drawer .drawer__close-btn:hover { opacity: .7; } @media (min-width: 768px) { .filter-container.filter-container--drawer .filters__close, .filter-container.filter-container--drawer .drawer__close-btn { top: 34px; right: 28.5px; } .filter-container.filter-container--drawer .filters { width: 100vw; padding: 34px 30px 20px 30px; } } @media (max-width: 768px) { .filter-container.filter-container--drawer .filters__close, .filter-container.filter-container--drawer .drawer__close-btn { top: 30px; right: 22.5px; } .filter-container.filter-container--drawer .filters { width: 100vw; padding: 30px 24px 24px 24px; } } /* Draw the box */ .filter-group__item .filter-group__item__text::before { content: ""; position: absolute; top: 13.5px; left: 0; width: 12px; height: 12px; border: 1px solid #dadad5; background: none !important; border-radius: 0; z-index: 2; /* box always on top */ } /* Put the X inside the box on checked */ .filter-group__item input[type='checkbox']:checked + .filter-group__item__text::after { content: "X"; position: absolute; top: 6px; left: 0; width: 12px; height: 12px; background: none !important; font-family: 'September Spirit', serif !important; font-size: 24px; font-weight: 600; color: #b7b7b5; display: flex; justify-content: center; align-items: center; } /* Hover color tweak you wanted */ .filter-group__items.filter-group--2 .filter-group__item:hover .filter-group__item__text, .filter-group__items.filter-group--2 .filter-group__item:focus .filter-group__item__text { color: #191917; } .filter-group__items.filter-group--2 .toggle-target-container { display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 6px; padding-bottom: 15px; } .filter-group__items.filter-group--2 .filter-group__item { position: relative; display: grid; grid-template-rows: auto auto; justify-items: center; align-items: start; text-align: center; row-gap: 12px; cursor: pointer; } .filter-group__items.filter-group--2 .filter-group__item .filter-group__checkbox { position: absolute; opacity: 0; pointer-events: none; } .filter-group__items.filter-group--2 .filter-group__item .filter-group__item__text::before { content: none !important; } .filter-group__items.filter-group--2 .filter-group__item .filter-group__item__text, .filter-group__items.filter-group--2 .filter-group__item .filter-group__item__count { grid-row: 2; display: inline-block; vertical-align: baseline; } .filter-group__items.filter-group--2 .filter-group__item .filter-group__item__count { margin-left: 6px; font-size: 10px; opacity: .65; } .filter-group__item__count { display: none !important; } .filter-group__items.filter-group--2 .filter-group__item .filter-group__item__text { line-height: .8; font-size: 14px; font-family: "ItalianOldStyleMTPro"; color: #b7b7b5; } .filter-group__items.filter-group--2 .filter-group__item .filter-group__item__text { line-height: .8; font-size: 14px; font-family: "ItalianTypewriterBold"; color: #b7b7b5; } .filter-group__items.filter-group--2 .filter-group__item:has(input[type='checkbox']:checked)::before { box-shadow: 0 0 0 2px #191917 inset; outline: none; } .filter-group__items.filter-group--2 .filter-group__item:has(input[type='checkbox']:focus-visible)::before { outline: 2px solid #191917; outline-offset: 2px; } /* Swatch images by data-tag */ .filter-group__items.filter-group--2 .filter-group__item[data-tag="tuscan-sun"] { --swatch: url("/cdn/shop/files/eteanne-color-palette-tuscan-sun.svg?v=1768739220") !important; } .filter-group__items.filter-group--2 .filter-group__item[data-tag="ora-blu"] { --swatch: url("/cdn/shop/files/eteanne-color-palette-odysses.svg?v=1768739352") !important; } .filter-group__items.filter-group--2 .filter-group__item[data-tag="terre-verte"] { --swatch: url("/cdn/shop/files/eteanne-color-palette-terre-vert.svg?v=1768739104") !important; } /* COLOR filter: keep active text black */ .filter-group--color .filter-group__item, .filter-group--color .filter-group__item:active, .filter-group--color .filter-group__item:focus, .filter-group--color .filter-group__item--active, .filter-group--color .filter-group__item--active:active, .filter-group--color .filter-group__item--active:focus { color: #191917; } /* Ensure the label text stays black */ .filter-group--color .filter-group__item__text { color: #191917; } /* Checkbox checked state (Shopify default override) */ .filter-group--color .filter-group__checkbox:checked + .filter-group__item__text { color: #191917; } .filter-group.filter-group--applied { display: none; } /* ===== COLOR group (filter-group--2) ===== */ .filter-group__items.filter-group--2 .filter-group__item { padding-inline-start: 8px; } /* Label-as-card with image swatch */ .filter-group--color .filter-group__item { position: relative; display: grid; grid-template-rows: auto auto; justify-items: center; align-items: start; text-align: center; row-gap: 12px; cursor: pointer; } .filter-group--color .filter-group__item::before { content: ""; width: 58px; height: 68px; border-radius: 10px; background-image: var(--swatch); background-size: contain; background-position: top center; background-repeat: no-repeat; } /* Hide native checkbox; keep accessible */ .filter-group--color .filter-group__item .filter-group__checkbox { position: absolute; opacity: 0; pointer-events: none; } /* Remove any previous “text::before” swatch */ .filter-group__items.filter-group--2 .filter-group__item .filter-group__item__text::before { content: none !important; } /* Put text + count on row 2 */ .filter-group__items.filter-group--2 .filter-group__item .filter-group__item__text, .filter-group__items.filter-group--2 .filter-group__item .filter-group__item__count { grid-row: 2; display: inline-block; vertical-align: baseline; } .filter-group__items.filter-group--2 .filter-group__item .filter-group__item__count { margin-left: 6px; font-size: 10px; opacity: .65; } .filter-group__item__count { display: none !important; } /* Focus/checked states for swatch card */ .filter-group__items.filter-group--2 .filter-group__item input[type='checkbox']:checked + .filter-group__item__text ~ * {}, .filter-group__items.filter-group--2 .filter-group__item input[type='checkbox']:checked ~ .filter-group__item__text {} .filter-group__items.filter-group--2 .filter-group__item input[type='checkbox']:checked + .filter-group__item__text {} .filter-group__items.filter-group--2 .filter-group__item input[type='checkbox']:checked ~ .filter-group__item__text {} .filter-group__items.filter-group--2 .filter-group__item:has(input[type='checkbox']:checked)::before { box-shadow: none; outline: none; } .filter-group--color .filter-group__item input[type='checkbox']:checked + .filter-group__item__text::after { content: none !important; } .filter-group__items.filter-group--2 .filter-group__item:has(input[type='checkbox']:focus-visible)::before { outline: 2px solid #191917; outline-offset: 2px; } /* ============================ PLUS → MINUS (smooth, based on your toggle-target--hidden) ============================ */ /* stable svg */ .filter-group__heading__indicator .plus-icon{ display: block; width: 9px; height: 9px; } /* animate strokes */ .filter-group__heading__indicator .plus-icon .vertical, .filter-group__heading__indicator .plus-icon .horizontal{ transform-box: fill-box; transform-origin: 50% 50%; transition: transform 0.2s ease, opacity 0.2s ease; } /* closed baseline */ .filter-group__heading__indicator .plus-icon .vertical{ transform: rotate(0deg); opacity: 1; } .filter-group__heading__indicator .plus-icon .horizontal{ transform: rotate(0deg); opacity: 1; } /* OPEN state = items are visible */ .filter-group:has(.filter-group__items.toggle-target:not(.toggle-target--hidden)) .filter-group__heading__indicator .plus-icon .vertical{ transform: rotate(90deg); opacity: 0; } .filter-group:has(.filter-group__items.toggle-target:not(.toggle-target--hidden)) .filter-group__heading__indicator .plus-icon .horizontal{ transform: rotate(180deg); } /* Instant response on click (when the heading becomes "active") */ .filter-group__heading.toggle-target-toggler--is-active .filter-group__heading__indicator .plus-icon .vertical{ transform: rotate(90deg); opacity: 0; } .filter-group__heading.toggle-target-toggler--is-active .filter-group__heading__indicator .plus-icon .horizontal{ transform: rotate(180deg); } /* If your script uses --is-hidden instead of --is-active, invert it */ .filter-group__heading:not(.toggle-target-toggler--is-hidden) .filter-group__heading__indicator .plus-icon .vertical{ transform: rotate(90deg); opacity: 0; } .filter-group__heading:not(.toggle-target-toggler--is-hidden) .filter-group__heading__indicator .plus-icon .horizontal{ transform: rotate(180deg); } /************************************************************************************************************************************************ *************************************************************** PRODUCT PAGE ********************************************************** ************************************************************************************************************************************************/ /* ========================================================= =============== Product image/description ================= ==========================================================*/ /* Space between default product container & first image w. text */ product-form.js-product.product-info.quickbuy-content.spaced-row.container { padding-left: 0px; padding-right: 0px; margin-top: 0px; } /* Margins mobile/tablet/desktop */ @media (max-width: 768px){ .detail.product-column-right { padding-left: 24px; padding-right: 24px; } .product-info .media-gallery-size-medium+.product-column-right { width: calc(55% - 0px); min-width: 100%; } } @media screen and (min-width: 768px) and (max-width: 1025px) { .product-info .media-gallery-size-medium+.product-column-right { width: calc(55% + -0px); min-width: 100%; padding-bottom: 115px; } } @media screen and (max-width: 1025px) { .product-column-left, .product-column-right { width: 100% !important; max-width: 100%; flex: 0 0 100%; } .js-product.product-info { flex-direction: column; display: flex; } } /* Disable gallery lightbox on mobile/tablet */ @media (max-width: 1025px) { media-gallery .show-gallery { pointer-events: none !important; cursor: default !important; } media-gallery .show-gallery { -webkit-tap-highlight-color: transparent; } } /* Slider button product image */ .slider-nav__btn::before, .slider-nav__btn::after { background: transparent; content: none; box-shadow: none; } /* Carrousel dots */ @media (min-width: 768px){ .custom-carousel-dots { display: flex; gap: 6px; z-index: 10; pointer-events: auto; position: absolute; bottom: 37px; right: 40px; } } @media (max-width: 768px){ .custom-carousel-dots { display: flex; gap: 6px; z-index: 10; pointer-events: auto; position: absolute; bottom: 26px; right: 24px; } } .custom-carousel-dots .dot { width: 8px; height: 8px; border-radius: 50%; background-color: white; opacity: 0.5; cursor: pointer; background-color: #fff; transition: all 0.3s ease; } .custom-carousel-dots .dot.active { background-color: #fff; opacity: 1; transform: scale(0.8); } .dot { transform: scale(0.8); } /* Image text bottom left corner of carrousel */ @media (min-width: 768px){ .media-overlay-text { position: absolute; bottom: 26px; left: 32px; padding: 8px 8px; line-height: 14px; font-size: 14px; z-index: 2; pointer-events: none; text-align: left; font-family: "ItalianTypewriterBold"; font-weight: 400; font-style: normal; color: #191917; } } @media (max-width: 768px){ .media-overlay-text { position: absolute; bottom: 25px; left: 24px; line-height: 14px; font-size: 14px; z-index: 2; pointer-events: none; text-align: left; font-family: "ItalianTypewriterBold"; font-weight: 400 !important; font-style: normal !important; color: #191917; } } /* Gallery slider */ .gallery-viewer-modal, .gallery-viewer-modal * { transition: none !important;; animation: none !important;; } .gallery-viewer__button svg path { stroke: #cdccc8; opacity: 1; transition: opacity 0.2s ease, stroke 0.2s ease; } button.slider-nav__btn.slider-nav__btn--style-2.has-ltr-icon { padding-inline: 44px; } .slider-nav__btn:hover svg path { opacity: 1 !important; } button.gallery-viewer__button.gallery-viewer__close.js-close-modal { padding-right: 34px; padding-top: 24px; } /* Product title */ @media (min-width: 1025px) { .product-title { text-align: center; margin: 0px; padding: 0 40px; } a.gallery-viewer__button.gallery-viewer__next.has-ltr-icon { padding-right: 40px; } a.gallery-viewer__button.gallery-viewer__prev.has-ltr-icon { padding-left: 40px; } } @media (max-width: 765px) { .product-title { margin: 0; text-align: center; padding-top: 35px !important; } } @media (max-width: 1025px) { .product-title { margin: 40px 0px 0px 0px; text-align: center; padding-top: 50px; } } /* Product price */ @media (max-width: 1025px) { .product-info__price.product-price.product-price--large { text-align: center; } a.gallery-viewer__button.gallery-viewer__next.has-ltr-icon { display: none !important; } a.gallery-viewer__button.gallery-viewer__prev.has-ltr-icon { display: none !important; } } .product-price--large .price__current .js-value { font-size: 9.9px; font-family: "termina", sans-serif; font-weight: 600; font-style: normal; letter-spacing: .6px; color: #b7b7b5; } /* Product description */ @media (min-width: 768px) { .product-description.rte.cf { font-size: 12.4px; text-align: justify; line-height: 1.6; margin: 40px 0px 40px 0px; padding: 0 14%; } } @media (max-width: 768px) { .product-description.rte.cf { font-size: 12.4px; text-align: justify; line-height: 1.6; margin: 30px 0px 40px 0px; } } /* Drawer link summary rows */ .open-info-drawer-top { border-top: 1px solid #dadad5; } .drawer-link-summary { display: flex; justify-content: space-between; align-items: center; height: 42px; border-bottom: 1px solid #dadad5; font-size: 1rem; font-weight: 500; cursor: pointer; text-transform: uppercase; } @media (min-width: 768px) { .drawer-link-summary { margin-left: 14%; margin-right: 14%; } } /* ========================================================= ================== Product info drawer ==================== ==========================================================*/ /* Root containers (hidden until active) */ #size-guide-drawer, .info-drawer { position: fixed; inset: 0; display: flex; justify-content: flex-end; z-index: 9999; pointer-events: none; transition: none; opacity: 1; pointer-events: none; } #size-guide-drawer.active, .info-drawer.active { opacity: 1; pointer-events: auto; } /* Backdrop overlay */ #size-guide-drawer .drawer-overlay, .info-drawer .drawer-overlay { position: absolute; inset: 0; background-color: rgba(37, 36, 35, 0.15); opacity: 0; transition: opacity 00.6s ease; z-index: 1; overscroll-behavior: contain; } #size-guide-drawer.active .drawer-overlay, .info-drawer.active .drawer-overlay { opacity: 1; } .currency-trigger .toggle-btn__chevron { margin-left: -3px; } .currency-trigger svg.plus-icon{ margin-bottom: 1px; } .currency-trigger:hover svg.plus-icon { stroke: #191917; } #size-guide-drawer.active .drawer-content, .info-drawer.active .drawer-content { transform: translateX(0); } /* Drawer widths & close button */ @media (min-width: 1025px) { .drawer-content { width: 33.33%; } .close-drawer { background: none; border: none; font-size: 1.5rem; position: absolute; top: 19px; right: 23px; cursor: pointer; color: #b7b7b5; } } @media (min-width: 768px) and (max-width: 1025px) { .drawer-content { width: 100vw; } } @media (max-width: 768px) { .drawer-content { width: 100vw; padding-inline: 20px; } .close-drawer { background: none; border: none; font-size: 1.5rem; position: absolute; top: 17px; right: 17px; cursor: pointer; color: #b7b7b5; } /* Sliding + Scrollable panel */ .drawer-content { background: #f1efe8; position: relative; z-index: 2; /* Slide-in animation */ transform: translate3d(100%, 0, 0); transition: transform 00.6s ease; backface-visibility: hidden; will-change: transform; /* Layout & padding */ display: flex; flex-direction: column; contain: paint; padding-inline: 24px; padding-block-start: 30px; padding-block-end: 0; /* Scroll + layout behavior */ height: 100dvh; overflow: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } } @media (min-width: 768px) {.drawer-content { background: #f1efe8; position: relative; z-index: 2; /* Slide-in animation */ transform: translate3d(100%, 0, 0); transition: transform 00.6s ease; backface-visibility: hidden; will-change: transform; /* Layout & padding */ display: flex; flex-direction: column; contain: paint; padding-inline: 30px; padding-block-start: 32px; padding-block-end: 0; /* Scroll + layout behavior */ height: 100dvh; overflow: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } } /* Drawer body — now purely structural (no scrolling) */ .drawer-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } /* Icon color inside drawer */ .drawer-content svg.feather { stroke: #b7b7b5 !important; } /* Typography (product info drawer) */ #product-info-drawer .drawer-body p { text-align: left; text-justify: inter-word; } #product-info-drawer p { font-family: "ItalianOldStyleMTPro"; font-weight: 400; text-align: justify !important; hyphens: auto; text-align-last: left; font-size: 12.4px; line-height: 1.6; color: #191917; } #product-info-drawer strong, .color-text strong { font-family: termina, sans-serif; font-weight: 600; font-size: 7.9px; letter-spacing: 0.6px; font-style: normal; } /* Headings inside drawer body */ .drawer-body h2 { font-family: 'Biondi'; letter-spacing: 1px; font-size: 11px; font-weight: 400; color: #191917; text-transform: uppercase; margin-bottom: 36px; } /* Color product info drawer */ .horizontal-divider { display: block !important; width: 100%; height: 0; border: 0; border-top: 1px solid #dadad5; margin: 30px 0; flex: 0 0 auto; } /* Hairline rendering fallback for Safari: paint the line as a background image */ @supports (-webkit-touch-callout: none) { .horizontal-divider { border-top: 0; height: 1px; background-image: linear-gradient(#b7b7b5, #dadad5); background-repeat: no-repeat; background-size: 100% 1px; background-position: 0 50%; transform: translateZ(0); } } .color-section, .certifications-strong { margin-bottom: 25px; } .color-text { display: flex; flex-direction: column; flex: 1; justify-content: space-evenly; } .color-text i { font-family: "ItalianOldStyleMTPro"; font-style: italic; font-size: 12.4px; color: #191917; line-height: 1.6; width: 80%; margin-top: 20px; } .color-row img { height: auto%; width: 15%; object-fit: contain; } .color-row { display: flex; justify-content: space-between; align-items: stretch; gap: 24px; } /* Certifications product info drawer */ .certification-images { display: flex; align-items: center; } .certification-image { width: 54px; padding-left: 4px; height: auto; display: block; object-fit: contain; opacity: 0.5; } /* Bottom info row behavior (push-to-bottom without sticking) */ @media (min-width: 768px){ .drawer-body > .drawer-main-content:last-of-type { margin-top: auto; display: flex; justify-content: space-between; align-items: flex-end; padding-bottom: 25px; padding-top: 25px; } } @media (max-width: 768px){ .drawer-body > .drawer-main-content:last-of-type { margin-top: auto; padding-bottom: 24px; padding-top: 40px; display: flex; justify-content: space-between; align-items: flex-end; } } /* Labels */ .bottom-info-left { font-family: "September Spirit", serif !important; font-size: 32px; font-weight: 400; color: #b7b7b5; line-height: 0.83; } .bottom-info-right { font-family: "ItalianTypewriterBold" !important; font-weight: 400; font-size: 14px; color: #b7b7b5; text-align: right !important; width: 50%; line-height: 25px; list-style-type: decimal; list-style-position: outside; text-align: left; margin: 0; } .drawer-main-content a:hover{ color: #191917 !important; } .bottom-info-right li { margin-bottom: 10px; line-height: 12px; padding-left: 3px; } .bottom-info-right li:last-child { margin-bottom: 6px; } .left-align-productinfo{ text-align: left; } /* Drawer image rows of 2 */ .drawer-image-row { display: flex; gap: 6px; padding-top: 30px; } .drawer-image-item img { width: 100%; height: auto; object-fit: cover; display: block; } .drawer-image-label { margin-top: 8px; font-family: "ItalianTypewriterBold" !important; font-weight: 400; font-size: 14px ; color: #b7b7b5; letter-spacing: 0.5px; } /* Care */ .drawer-care-table { width: 100%; border-collapse: collapse; } .drawer-care-table tr:first-child { border-top: 1px solid #dadad5; } .drawer-care-table tr { border-bottom: 1px solid #dadad5; } .drawer-care-table td { padding-top: 10px; padding-left: 0px; padding-right: 0px; vertical-align: middle; font-family: "ItalianOldStyleMTPro"; font-weight: 400; font-style: normal; font-size: 12.4px; color: #191917; } .care-col-left { width: 30%; display: flex; align-items: center; gap: 10px; border-top: none; border-bottom: none; } .care-col-right { width: 70%; text-align: right; border-top: none; border-bottom: none; align-items: center; } .care-icon { width: 22px; height: 22px; display: block; margin-bottom: 1px; } .care-label { text-transform: uppercase; font-family: termina, sans-serif; font-weight: 600; font-style: normal; font-size: 8.4px; letter-spacing: 0.6px; white-space: nowrap; } /* Plus icon */ svg.plus-icon { height: 9px; width: 9px; fill: #b7b7b5; stroke: #b7b7b5; stroke-width: 2.5px; } .drawer-link-summary:hover .plus-icon { stroke: #adadab; } /* Labels & meta */ .drawer-label { flex: 1; line-height: 1; font-family: termina, sans-serif; font-weight: 600; font-style: normal; font-size: 8.4px; letter-spacing: 0.6px; } .drawer-extra { font-family: "ItalianOldStyleMTPro"; font-weight: 400; font-style: normal; font-size: 12.4px; color: #191917; white-space: nowrap; display: inline-flex; align-items: center; gap: 14px; text-transform: none; line-height: 1.6; padding-top: 2px; } @media (min-width: 768px) and (max-width: 1024px) { button.close-drawer{ position: absolute; right: 24px; top: 14px; } } /* ========================================================= ======================== Buy button ======================= ==========================================================*/ button.btn.btn--large.add-to-cart, a.btn.btn--large.btn--wide { font-family: 'Biondi'; letter-spacing: 1px; font-size: 10px; font-weight: 400; color: #191917; background: transparent; border: 1px solid #cdccc8; } button.btn.btn--large.add-to-cart:hover, button.btn.btn--large.add-to-cart:active, button.btn.btn--large.add-to-cart:focus-visible, a.btn.btn--large.btn--wide:hover { border-color: #adadab; } @media (max-width: 768px){ .quantity-submit-row__submit.input-row{ width: 100%; } .quantity-submit-row__submit.input-row{ display: none; } .section-main-product .product-form .quantity-submit-row { display: none; } .product-form .input-row, .buy-buttons-row { margin-top: 25px; } } @media (min-width: 768px){ .quantity-submit-row__submit.input-row{ width: 50%; } } /* Don’t let :active/:focus darken the button */ .quantity-submit-row__submit .add-to-cart:active, .quantity-submit-row__submit .btn:active, .quantity-submit-row__submit .add-to-cart:focus, .quantity-submit-row__submit .btn:focus, .quantity-submit-row__submit .add-to-cart:focus-visible, .quantity-submit-row__submit .btn:focus-visible { background-image: none !important; background-color: inherit !important; color: inherit !important; box-shadow: none !important; } /* Neutralize all special states to look like normal */ .quantity-submit-row__submit .add-to-cart.is-loading, .quantity-submit-row__submit .add-to-cart[aria-disabled="true"], .quantity-submit-row__submit .add-to-cart[aria-busy="true"], .quantity-submit-row__submit .add-to-cart.is-success, .quantity-submit-row__submit .btn.is-loading, .quantity-submit-row__submit .btn[aria-disabled="true"], .quantity-submit-row__submit .btn[aria-busy="true"], .quantity-submit-row__submit .btn.is-success { background: inherit !important; background-color: inherit !important; color: inherit !important; filter: none !important; opacity: 1 !important; cursor: pointer !important; transition: none !important; } /* 3) Keep button colors stable during loading/disabled/success (no grey flash) */ .add-to-cart.is-loading, .add-to-cart[aria-disabled="true"], .add-to-cart[aria-busy="true"], .add-to-cart.is-success, .btn.is-loading, .btn[aria-disabled="true"], .btn[aria-busy="true"], .btn.is-success { background: inherit !important; background-color: inherit !important; color: inherit !important; filter: none !important; opacity: 1 !important; cursor: pointer !important; transition: none !important; } /* 4) Remove pseudo-element spinners on the buttons only */ .add-to-cart.is-loading::before, .add-to-cart.is-loading::after, .add-to-cart.is-success::before, .add-to-cart.is-success::after, .btn.is-loading::before, .btn.is-loading::after, .btn.is-success::before, .btn.is-success::after { content: none !important; display: none !important; animation: none !important; background: none !important; -webkit-mask: none !important; mask: none !important; } .quantity-submit-row.input-row { display: flex; justify-content: center; align-items: center; } /* ==================================== PURCHASE OPTIONS PAIR – TEXT BUTTONS ==================================== */ @media (max-width: 768px) { .product-form .purchase-options { display: none; } .purchase-options { display: flex; justify-content: center; gap: 6px; margin-left: auto; margin-right: auto; margin-top: 6px; width: 100%; padding: 0; border: none; box-sizing: border-box; } } @media (min-width: 768px) { .sticky-atc__buttons .purchase-options { display: none; } } @media (min-width: 1025px) { .product-form .purchase-options { width: 50%; padding-top: 6px; } .purchase-options { display: flex; justify-content: center; gap: 6px; margin-left: auto; margin-right: auto; width: 100%; padding: 0; border: none; box-sizing: border-box; } } @media (min-width: 768px) and (max-width: 1025px) { .purchase-options { display: flex; justify-content: center; gap: 6px; margin-left: auto; margin-right: auto; margin-top: 6px; width: 50%; padding: 0; border: none; box-sizing: border-box; } } .purchase-options__legend { position: absolute; left: -9999px; } .purchase-option-btn { background: none; border: 1px solid #dadad5; padding: 2px 8px 2px 8px; cursor: pointer; width: 100%; flex-direction: row; align-items: center; gap: 6px; box-sizing: border-box; } /* Text turns black on hover */ .purchase-option-btn:hover .purchase-option-btn__title, .purchase-option-btn:hover .purchase-option-btn__price, .purchase-option-btn.is-active .purchase-option-btn__title, .purchase-option-btn.is-active .purchase-option-btn__price { color: #191917; } /* TITLE (Single / Pair) — typographic settings */ .purchase-option-btn__title { font-family: "ItalianOldStyleMTPro"; font-weight: 400; font-style: normal; font-size: 12.4px; line-height: 1.6; color: #b7b7b5; } /* PRICE */ .purchase-option-btn__price { font-family: "ItalianOldStyleMTPro"; font-weight: 400; font-style: normal; font-size: 12.4px; line-height: 1.6; color: #b7b7b5; } /* ========================================================= ======================== TRIO BAR ========================= ==========================================================*/ @media (min-width: 768px){ .detail.product-column-right { position: relative; } } @media (max-width: 768px){ .trio-container { position: relative; left: 0; right: 0; bottom: 0px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0px 0 30px 0 !important; width: 100%; margin-top: 40px !important; } .trio-container > * { width: 50%; padding-bottom: 36px; } } @media (min-width: 768px){ .trio-container > .trio1 { width: 27.5%; } .trio-container > .trio2 { width: 45%; } .trio-container > .trio3 { width: 27.5%; } } @media (min-width: 768px) and (max-width: 1024px){ .trio-container { position: absolute; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 40px 15px; width: 100%; } } .trio1 { text-align: left; font-family: September Spirit !important; font-size: 32px; font-style: normal; font-weight: 400 !important; color: #b7b7b5; padding-left: 0px; padding-bottom: 0px; } .trio2 { text-align: center; font-family: termina, sans-serif !important; font-weight: 600; font-style: normal; font-size: 7.4px; letter-spacing: .6px; text-transform: uppercase; padding-bottom: 0px; padding-top: 2px; } /* Mobile */ @media (max-width: 768px) { .trio-container { flex-wrap: wrap; text-align: center; } .trio2 { order: 1; width: 100%; text-align: center; } .trio1 { order: 2; width: 100%; text-align: center; line-height: 20px !important; } } @media (max-width: 768px){ p.open-size-guide.underline.text-sm.trio3 { display: none; } } .trio3 { text-align: right; display: block; font-size: 14px; font-family: "ItalianTypewriterBold" !important; padding-right:0px; text-decoration: none; color: #b7b7b5; padding-bottom: 1px; } p, fieldset, table { margin-bottom: 0px; } .media-gallery, .media-gallery__inner, .main-image, .slider, .slider__grid, .slider__item, .product-media-wrapper, .product-media, .img-ar, .theme-img, .mobile-pagination, .custom-carousel-dots, .sticky-subnav { max-width: 100% !important; } /* Safari fix*/ @media (min-width: 1025px) { /* Right column as vertical layout */ .detail.product-column-right { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; } .detail.product-column-right > .product-form.sticky-content-container { flex: 0 0 auto; margin-top: auto; margin-bottom: auto; min-height: 0; padding-top: 70px; } .detail.product-column-right > .trio-container { position: static; width: 100%; } .trio-container { position: absolute; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 0px; padding: 0 40px 14px; width: 100%; } } /* ========================================================= ================== IMAGE W. TEX GENERAL =================== ==========================================================*/ /* Equal-height columns (desktop/tablet where columns are side-by-side) */ @media (min-width: 769px) { .section-image-with-text-commitment .flexible-layout, .section-image-with-text-commitment .flexible-layout.valign-middle, .section-image-with-text-design .flexible-layout, .section-image-with-text-design .flexible-layout.valign-middle { align-items: stretch; } .section-image-with-text-commitment .column.column--half, .section-image-with-text-design .column.column--half { display: flex; align-self: stretch; } .section-image-with-text-commitment .column.column--half > *, .section-image-with-text-design .column.column--half > * { flex: 1 1 auto; min-height: 100%; } .section-image-with-text-commitment .feature-text-paired, .section-image-with-text-design .feature-text-paired { display: flex; flex-direction: column; min-height: 100%; } .section-image-with-text .flexible-layout, .section-image-with-text .flexible-layout.valign-middle { align-items: stretch; } .section-image-with-text-commitment .image-overlap, .section-image-with-text-design .image-overlap { height: 100%; display: flex; } .section-image-with-text-commitment .image-overlap__image, .section-image-with-text-design .image-overlap__image { flex: 1 1 auto; } .section-image-with-text-commitment .image-overlap__image > .fade-in-up, .section-image-with-text-design .image-overlap__image > .fade-in-up { height: 100%; width: 100%; } .section-image-with-text-commitment .image-overlap__image img.theme-img, .section-image-with-text-design .image-overlap__image img.theme-img { width: 100%; height: 100%; object-fit: cover; display: block; } } .feature-text-paired > * { text-indent: 0; } .image-overlap__image img.theme-img { min-width: 100%; height: 100%; object-fit: cover; display: block; } /* Desktop image goes to edge of screen and takes 50% width and goes to edge of screen */ @media (min-width: 1025px){ .flexible-layout { margin-left: 0px; margin-right: 0px; width: auto; } } .column.column--half { padding: 0px; } .bottom-group .lightly-spaced-row.lightish-spaced-row-above.inline-width-container > img { width: 24px; height: auto; } /* Mobile & tablet */ @media (max-width: 768px) { .triple-text-row{ display: grid !important; grid-template-columns: 1fr; grid-template-rows: auto auto; width: 100% !important; } /* Reset inline widths from the HTML */ .triple-text-row > .triple-text__item{ width: 100% !important; padding-right: 0 !important; } /* Row 1: center item 2 */ .triple-text-row > .triple-text__item:nth-child(2){ grid-row: 1; text-align: center !important; display: block !important; } /* Row 2: show item 1 */ .triple-text-row > .triple-text__item:nth-child(1){ grid-row: 2; display: block !important; text-align: center !important; /* change to left if you want */ } /* Keep item 3 hidden on mobile */ .triple-text-row > .triple-text__item:nth-child(3){ display: none !important; } .triple-text { display: flex; justify-content: space-between; gap: 2rem; flex-wrap: nowrap; width: 100%; padding-left: 24px; padding-right: 24px; margin-bottom: 10px; text-align: center; } } @media (min-width: 768px) { .feature-text-paired { margin-right: 40px; margin-left: 60px; } .triple-text { display: flex; justify-content: space-between; gap: 2rem; flex-wrap: nowrap; width: 100%; padding-left: 12%; padding-right: 12%; margin-bottom: 6px; text-align: center; } } @media (min-width: 1025px) { .feature-text-paired { margin-right: 40px; margin-left: 40px; } div.image-overlap { max-width: 100%; } .triple-text-row{ gap: 8px; height: 44px; display: grid; grid-template-columns: 1fr 2fr 1fr; } } @media (min-width: 768px) and (max-width: 1025px) { .triple-text-row { display: grid; grid-template-columns: 1fr 2fr 1fr; margin-bottom: 20px; } .section-image-with-text-contact .contact-text-group{ margin-top: 40px; margin-bottom: 30px; } } .triple-text__item { width: 33.333%; } .triple-text__item:nth-child(1) { text-align: left; } .triple-text__item:nth-child(2) { text-align: center; } .triple-text__item:nth-child(3) { text-align: right; letter-spacing: 0px; } /* Full-bleed images for all Image-with-Text sections on tablet & mobile */ @media (min-width: 768px) and (max-width: 1024px) { /* Force any inline-limited .image-overlap to full-bleed */ .section-image-with-text .image-overlap[style*="max-width"], .section-image-with-text-colors .image-overlap[style*="max-width"], .section-image-with-text-commitment .image-overlap[style*="max-width"] { position: relative; width: 100vw !important; max-width: 100vw !important; left: 50%; right: 50%; margin-left: -48.9vw !important; margin-right: -50vw !important; transform: none !important; } } @media (max-width: 768px) { /* Force any inline-limited .image-overlap to full-bleed */ .section-image-with-text .image-overlap[style*="max-width"], .section-image-with-text-colors .image-overlap[style*="max-width"], .section-image-with-text-commitment .image-overlap[style*="max-width"] { position: relative; width: 100vw !important; max-width: 100vw !important; left: 50%; right: 50%; margin-left: -50vw !important; margin-right: -50vw !important; transform: none !important; min-height: 80vh!important; } } /* ========================================================= ================= IMAGE W. TEXT DESIGN ================ ==========================================================*/ /* DESIGN MEDIA: centered vertically between heading and bottom group */ #design-{{ section.id }} .design-media { display: grid; gap: 8px; justify-items: center; text-align: center; margin-top: auto; margin-bottom: auto; } .section-image-with-text-design { position: relative; } /* Invisible anchor marker placed at an offset inside the section */ .section-image-with-text-design .section-anchor-mid{ position: absolute; top: 100px; left: 0; width: 1px; height: 1px; pointer-events: none; opacity: 0; scroll-margin-top: 50vh; } /* Static image width */ @media (min-width: 1025px) { #design-{{ section.id }} .design-media__image { width: 75%; margin: 0 auto; } } @media (min-width: 768px) and (max-width: 1025px) { #design-{{ section.id }} .design-media__image { width: 65%; margin: 0 auto; } } .rte.triple-text__item a { text-decoration: none !important; } /* Static image width */ @media (max-width: 768px) { #design-{{ section.id }} .design-media__image { width: 75%; margin: 0 auto; } } /* Caption styling reused from slider */ #design-{{ section.id }} .commitment-slider__caption { font-family: "ItalianOldStyleMTPro" !important; font-weight: 400; font-style: normal; line-height: 1.6; font-size: 12.4px; color: #191917; } /* ========================================================= ================== IMAGE W. TEX COLORS ==================== ==========================================================*/ /* --- Layout scaffolding --- */ .section-image-with-text-colors .flexible-layout, .section-image-with-text-colors .flexible-layout.valign-middle { align-items: stretch !important; } .section-image-with-text-colors .column.column--half { display: flex; align-self: stretch; } /* Center the whole two-column group vertically inside .colors-grid__middle */ .section-image-with-text-colors .colors-grid__middle { align-content: center; } @media (max-width: 1025px) { .colors-grid__middle .colors-grid__col:first-child{ padding-left: 24px; padding-right: 24px; } .colors-grid__middle .colors-grid__col:last-child{ padding-right: 24px; padding-left: 24px; } } /* Desktop grid scaffold */ @media (min-width: 1025px) { .feature-text-paired.colors-grid { display: grid; grid-template-rows: auto 1fr auto; gap: 0; width: 100%; align-content: center; padding-bottom: 20px; } } @media (min-width: 1025px) { .colors-grid__monogram.fade-in-up{ margin-bottom: 6px !important; } .colors-grid__middle .colors-grid__col:first-child{ padding-left: 10%; } .colors-grid__middle .colors-grid__col:last-child{ padding-right: 10%; } } .colors-grid__monogram.fade-in-up{ margin-bottom: 6px !important; } /* Image size in columns */ @media (min-width: 1024px) { .section-image-with-text-colors .colors-grid__image { padding-top: 48px; padding-bottom: 48px; } } /* Image size in columns */ @media (min-width: 768px) and (max-width: 1024px) { .section-image-with-text-colors .colors-grid__image { padding-top: 0px; padding-bottom: 48px; } } /* Title row */ .section-image-with-text-colors .feature-text-paired.colors-grid > .majortitle.in-content.h1, .section-image-with-text-colors .feature-text-paired.colors-grid > .majortitle.in-content { grid-row: 1; justify-self: center; text-align: center; margin: 0; } /* === Two-column colors area === */ .section-image-with-text-colors .colors-grid__middle { grid-row: 2; display: grid !important; grid-template-columns: minmax(0,1fr) minmax(0,var(--divider-width,24px)) minmax(0,1fr); align-items: stretch; column-gap: 0; row-gap: 0; } /* Columns: keep elements aligned (same start line), but allow per-column vertical alignment */ .section-image-with-text-colors .colors-grid__col { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0; /* inner handles spacing */ } /* Inner stack: THIS is what keeps subheading/image/text-start aligned across columns */ .section-image-with-text-colors .colors-grid__col-inner { width: 100%; display: grid; grid-template-rows: auto auto auto; justify-items: center; gap: 12px; } /* One column stays vertically centered */ .section-image-with-text-colors .colors-grid__col--center { justify-content: center; } /* The other always starts at the same top line */ .section-image-with-text-colors .colors-grid__col--top { justify-content: flex-start; } /* Divider column: stretch to full grid row height and allow child to fill */ .section-image-with-text-colors .colors-grid__divider { width: var(--divider-width, 24px); justify-self: center; align-self: stretch; /* ✅ simplest reliable fill model */ display: flex; align-items: stretch; /* no absolute positioning / no overflow hacks */ position: static; overflow: visible; } /* Divider image fills the divider cell height exactly */ .section-image-with-text-colors .colors-grid__divider-img { display: block; width: 100%; height: 100%; object-fit: fill; max-width: none; max-height: none; } /* Remove any old generic img rule that forces contain */ .section-image-with-text-colors .colors-grid__divider img { width: 100%; height: 100%; object-fit: fill; } /* Subheading typography */ .section-image-with-text-colors .colors-grid__subheading { font-family: termina, sans-serif; font-weight: 600; font-size: 7.9px; letter-spacing: .6px; text-transform: uppercase; color: #191917; margin: 0; } .section-image-with-text-colors .colors-grid__image img { display: block; height: 22vh; width: auto; } /* Body text */ .section-image-with-text-colors .colors-grid__text { font-family: "ItalianOldStyleMTPro" !important; font-size: 12.4px; line-height: 1.6; color: #191917; text-align: justify; hyphens: auto; text-align-last: left; } /* Bottom group */ @media (min-width: 768px) { .colors-grid__monogram { text-align: center; margin-bottom: 6px; } } @media (max-width: 768px) { .colors-grid__monogram { text-align: center; margin-bottom: 6px; } } @media (min-width: 768px) and (max-width: 1025px) { .colors-grid__monogram { text-align: center; margin-bottom: 6px; margin-top: 56px !important; } } .colors-grid__monogram img { width: 24px; height: auto; display: inline-block; } .bottom-group { margin-top: 0px !important; } .triple-text__item:nth-child(1){ text-align:left; width: 100%; } .triple-text__item:nth-child(2){ text-align:center; width: 100%; } .triple-text__item:nth-child(3){ text-align:right; width: 100%; letter-spacing: 0px; } /* Mobile: keep existing behavior */ @media (max-width: 768px) { .section-image-with-text-colors .colors-grid__middle { grid-template-columns: 1fr; row-gap: 40px; } /* Image size in columns */ .section-image-with-text-colors .colors-grid__image { padding-bottom: 48px; } .section-image-with-text-colors .colors-grid__divider { display: none !important; } .section-image-with-text-colors .colors-grid__col { padding-inline: 24px; } .feature-text-paired.colors-grid { min-height: 0; } .triple-text-row { display: grid; grid-template-columns: none; margin-bottom: 20px; } .colors-grid__monogram.fade-in-up{ margin-bottom: 6px !important; margin-top: 48px !important; } } /* ========================================================= ================= IMAGE W. TEXT COMMITMENT ================ ==========================================================*/ #commitment-{{ section.id }} .commitment-slider { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; margin: 20px 0 16px; } button.commitment-slider__btn.commitment-slider__btn--prev{ position: relative; right: 0px; } #commitment-{{ section.id }} .commitment-slider__viewport { overflow: hidden; } #commitment-{{ section.id }} .commitment-slider__track { display: flex; align-items: stretch; transition: transform .45s ease; will-change: transform; mix-blend-mode: multiply; } #commitment-{{ section.id }} .commitment-slider__slide { flex: 0 0 100%; display: grid; gap: 8px; justify-items: center; text-align: center; } #commitment-{{ section.id }} .commitment-slider__caption { font-family: "ItalianOldStyleMTPro" !important; font-weight: 400; font-style: normal; line-height: 1.6; font-size: 12.4px; color: #191917; } #commitment-{{ section.id }} .commitment-slider__btn { appearance: none; background: none; border: 0; padding: 6px; margin: -6px; cursor: pointer; line-height: 0; color: #191917; opacity: .85; transition: opacity .2s ease; } #commitment-{{ section.id }} .commitment-slider__btn:hover { opacity: 1; } @media (min-width: 1025px) { .commitment-slider__slide img { width: 70%; height: auto; margin: 0 auto; display: block; object-fit: contain; } } @media (min-width: 768px) and (max-width: 1025px) { .commitment-slider__slide img { width: 50%; height: auto; margin: 0 auto; display: block; object-fit: contain; } } @media (max-width: 768px) { #commitment-{{ section.id }} .commitment-slider { gap: 6px; } button.commitment-slider__btn.commitment-slider__btn--prev{ position: relative; right: -8px; } button.commitment-slider__btn.commitment-slider__btn--next{ position: relative; left: -10px; } .commitment-slider__slide img { width: 90%; height: auto; margin: 0 auto; display: block; object-fit: contain; } } @media (min-width: 1025px) { .section-image-with-text-commitment .feature-text-paired { padding-top: 60px; padding-bottom: 20px; box-sizing: border-box; min-height: 100%; } } @media (max-width: 1025px) { .section-image-with-text-commitment .feature-text-paired { box-sizing: border-box; min-height: 100%; } } /* Show main image first on ≤1024px */ @media (max-width: 1024px) { #commitment-{{ section.id }} .flexible-layout { display: flex; flex-direction: column; } #commitment-{{ section.id }} .flexible-layout > .column { width: 100%; min-width: 100%; } #commitment-{{ section.id }} .flexible-layout > .column--order-push-desktop { order: -1 !important; } #commitment-{{ section.id }} .flexible-layout > .column:not(.column--order-push-desktop) { order: 2; } } .commitment-slider__btn, .commitment-slider__btn .icon{ width: 60px; height: 60px; } .commitment-slider__btn--next .icon { width: 60px; height: 60px; } /* Disable all transitions and animations inside the commitment slider */ .commitment-slider *, .commitment-slider *::before, .commitment-slider *::after { transition: none !important; animation: none !important; } .commitment-slider__slide { display: flex; justify-content: center; align-items: center; padding: } .section-image-with-text .feature-text-paired > .majortitle.in-content.h1, .section-image-with-text .feature-text-paired > .majortitle.in-content{ margin-bottom: 30px !important; } .commitment-slider { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; margin: auto !important; max-width: 100%; } @media (max-width: 768px) { .section-image-with-text-commitment .commitment-slider { gap: 6px; padding-left: 13px; padding-right: 13px; } } /* ========================================================= ==================== RELATED PRODUCTS ===================== ==========================================================*/ /* === Section container padding === */ @media (max-width: 768px) { .container.container--no-max.fully-spaced-row { padding: 0 24px; margin-top: 0px; margin-bottom: 35px; } } /* === Heading === */ h4.align-center.hometitle { text-align: left; font-style: normal; line-height: 1; font-family: 'Biondi' !important; letter-spacing: 1px; font-size: 11px; font-weight: 400; color: #191917; } @media (min-width: 768px) { h4.align-center.hometitle { margin-bottom: 43px !important; } } @media (max-width: 768px) { h4.align-center.hometitle { margin-top: 40px !important; margin-bottom: 40px !important; } } /* === Grid behavior (1 per row on tablets/phones) === */ @media (max-width: 1025px) { .related-products .product-grid--per-row-mob-2 { --product-columns-desktop: 1 !important; } } .related-products h4.align-center.hometitle { line-height: 1.6em !important; font-family: "Biondi" !important; letter-spacing: 1px !important; font-size: 11px !important; font-weight: 300 !important; color: #191917 !important; } /* === Hide vendor + stock label in cards === */ .quickbuy-toggle, .product-label--stock { display: none !important; } /* === Meta row under image === */ .meta-row--three-column { display: flex; justify-content: space-between; align-items: center; text-align: center; } @media (min-width: 768px) { .meta-row__item { width: 50%; flex: 0 0 50%; line-height: 0.3; } .collection-listing.related-collection { margin-bottom: 50px; } } /* ========================================================= ====================== WEATHER API ======================== ==========================================================*/ @media (min-width: 1026px) { .city-weather-ticker { display: flex; height: 36px; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; width: 100%; max-width: 100vw; text-align: center; padding-left: 4%; padding-right: 4%; margin-top: 50px; margin-bottom: 120px; font-size: 16px; font-family: "ItalianTypewriterBold"; font-weight: 400 !important; font-style: normal !important; color: #191917; letter-spacing: -.5px; } .city-weather-ticker span { line-height: 1.0; } } @media (max-width: 1025px) { .city-weather-ticker { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 0; width: 100%; max-width: 100vw; height: auto; margin-top: 55px; margin-bottom: 25px; padding-left: 0; padding-right: 0; text-align: center; justify-content: center; align-items: flex-start; font-size: 16px; font-family: "ItalianTypewriterBold"; font-weight: 400; font-style: normal; color: #191917; letter-spacing: -.5px; } .city-weather-ticker span { width: 100%; min-width: 0; box-sizing: border-box; text-align: center; display: block; line-height: 1.0; margin-bottom: 30px; } .city-weather-ticker span:nth-child(7), .city-weather-ticker span:nth-child(8) { display: none; } } /* ========================================================= =================== SUBMENU PRODUCT PAGE ================== ==========================================================*/ /* General styling to the submenu bar */ @media (min-width: 768px) { .sticky-atc.sticky-atc.sticky-atc--end.invisible { padding-left: 40px; padding-right: 40px; height: 65px; background-color: #F1EFE8; border-top: 1px solid #dadad5 !important; } } .quantity-submit-row__submit .btn[disabled] { font-family: 'Biondi'; letter-spacing: 1px; font-size: 10px; font-weight: 400; color: #b7b7b5; border: 1px solid #dadad5; } @supports selector(:has(*)) { .quantity-submit-row.input-row { display: flex; justify-content: center; align-items: center; } @media (min-width: 768px) { .quantity-submit-row__submit { width: 50%; } .quantity-submit-row__submit .btn { width: 100%; } } } /* Prevent black flash on click / loading for sticky add-to-cart */ button.btn.btn--secondary.btn--compact.add-to-cart.js-sticky-main-btn, button.btn.btn--secondary.btn--compact.add-to-cart.js-sticky-main-btn:hover, button.btn.btn--secondary.btn--compact.add-to-cart.js-sticky-main-btn:active, button.btn.btn--secondary.btn--compact.add-to-cart.js-sticky-main-btn:focus, button.btn.btn--secondary.btn--compact.add-to-cart.js-sticky-main-btn:focus-visible, button.btn.btn--secondary.btn--compact.add-to-cart.js-sticky-main-btn[disabled], button.btn.btn--secondary.btn--compact.add-to-cart.js-sticky-main-btn[aria-disabled="true"]{ background-color: transparent !important; /* or your normal color */ box-shadow: none !important; outline: none !important; } @media (max-width: 768px) { .sticky-atc.sticky-atc.sticky-atc--end.invisible { padding-left: 24px; padding-right: 24px; background-color: #F1EFE8; border-top: 1px solid #dadad5 !important; padding-top: 14px; padding-bottom: 12px; height: 100px; } .sticky-atc__details{ display: none; } } @media (min-width: 768px) { .sticky-atc__image:not(:empty) { display: none !important; } button.btn.btn--secondary.btn--compact.add-to-cart { font-family: 'Biondi' !important; font-size: 11px !important; font-weight: 400 !important; letter-spacing: 1px !important; text-decoration: none; border: none; color: #b7b7b5; padding-top: 15px; padding-bottom: 15px; } button.btn.btn--secondary.btn--compact.add-to-cart:hover { color: #191917 !important; text-decoration: none !important; border: none; } } /* Left element in the submenu */ @media (min-width: 1025px){ .sticky-atc__details { flex: 0 0 20%; max-width: 20%; display: flex; flex-direction: column; justify-content: center; margin-inline-end: 1rem; line-height: 0.5; font-family: "termina", sans-serif; font-weight: 600; font-style: normal; font-size: 7.4px; margin-left: 0px; padding-right: 0px; margin-right: 0px; } .sticky-atc__buttons { flex: 0 0 20%; max-width: 20%; } } @media (min-width: 768px) and (max-width: 1025px) { .sticky-atc__details { flex: 0 0 0px; max-width: 50%; } } .sticky-atc__buttons .btn.add-to-cart { text-align: right; justify-content: flex-end; width: 100%; } @media (min-width: 767px) { .template-page .sticky-subnav a, .sticky-subnav a { padding: 0.25rem 1.5rem; font-size: 15px; font-family: "ItalianTypewriterBold", serif; color: #191917; text-decoration: none; white-space: nowrap; Letter-spacing: 0.5px: } .template-page .sticky-subnav a:hover, .sticky-subnav a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; } } .sticky-atc__details__title { font-family: September Spirit, serif; font-size: 32px; font-weight: 400; color: #b7b7b5; margin-top: 20px; line-height: 0; white-space: nowrap; text-overflow: ellipsis; margin: 0; overflow: visible; transform: translateY(var(--title-offset)); will-change: transform; padding-top: 5px; } /* === Desktop layout / background === */ @media (min-width: 768px) { .sticky-atc { --sticky-atc-width: 100%; padding-left: 40px; padding-right: 40px; background-color: #F1EFE8; border-radius: var(--btn-inspired-border-radius); } .sticky-atc__price{ display: none; } } @media (max-width: 1024px) { .sticky-subnav { display: none !important; } } /* ============================ MOBILE STICKY ATC 2-ROW LAYOUT ============================ */ @media (max-width: 768px) { /* --- ROW 2 (button) --- */ .sticky-atc__buttons { width: 100% !important; order: 2; } .sticky-atc__buttons .btn.add-to-cart { width: 100%; justify-content: center; text-align: center; font-size: 10px; border: 1px solid #cdccc8; font-family: 'Biondi'; letter-spacing: 1px; font-size: 10px; font-weight: 400; color: #191917; padding-top: 15px; padding-bottom: 15px; } .sticky-atc__buttons .btn.add-to-cart:hover{ border-color: #adadab; } .sticky-atc__buttons .btn.add-to-cart::before { font-size: 14px; display: inline-block; } } .sticky-subnav__right-text, .sticky-subnav__right-link { font-size: 14px; font-family: "ItalianTypewriterBold", serif !important; color: #b7b7b5; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ========================================================= ================= SUBMENU OTHER PAGES =================== ==========================================================*/ /* === Perfectly centered sticky subnav bar === */ .sticky-atc { --gutter-content: 16px; --side-col: clamp(140px, 22vw, 22%); position: fixed; inset-inline-start: 0; inset-inline-end: 0; bottom: 0; z-index: 10; visibility: visible; width: 100%; display: grid; grid-template-columns: minmax(140px, var(--side-col)) 1fr minmax(140px, var(--side-col)); align-items: center; column-gap: 1rem; padding: var(--gutter-content) var(--container-pad-x) calc(var(--gutter-content) + env(safe-area-inset-bottom, 0px) * 1.5); line-height: 1.4em; color: rgb(var(--body-text-color)); background-color: rgb(var(--body-bg-color)); transition: transform .2s ease, opacity .2s ease, visibility .2s ease; border-top: 1.5px solid #F1EFE8; box-shadow: none; } @media (min-width: 668px) and (max-width: 1025px) { sticky-subnav.sticky-atc.sticky-atc--end{ height: 65px; padding-left: 40px; padding-right: 40px; } } @media (max-width: 768px) { .sticky-subnav-drawer__nav { margin-top: 24px; display: flex; flex-direction: column; gap: 12px; } } @media (min-width: 768px) { .sticky-subnav-drawer__nav { margin-top: 35px; display: flex; flex-direction: column; gap: 12px; } } /* Desktop / large tablet */ @media (min-width: 1025px) { .sticky-subnav--desktop { display: flex; justify-content: center; align-items: center; } .sticky-subnav-mobile-toggle, .sticky-subnav-drawer, .sticky-subnav-drawer__overlay { display: none !important; } sticky-subnav.sticky-atc.sticky-atc--end{ height: 65px; padding-left: 40px; padding-right: 40px; } } /* === RIGHT: Custom text column === */ .sticky-subnav__right { grid-column: 3 / 4; justify-self: end; display: flex; align-items: center; justify-content: flex-end; min-width: 0; } /* Add › before each link in the mobile drawer, raised slightly */ .sticky-subnav-drawer__nav a::before { content: "›"; position: relative; margin-right: 6px; display: inline-block; font-size: 9.4px; color: currentColor; } /* Make the mobile toggle icon smaller */ .sticky-subnav-mobile-toggle__icon { width: 10px !important; height: 10px !important; } /* Mobile / small tablet */ @media (max-width: 1024px) { .sticky-atc.sticky-atc--end { grid-template-columns: 1fr 1fr; align-items: center; column-gap: 0.75rem; } .sticky-subnav-drawer__title { font-family: 'Biondi'; letter-spacing: 1px; font-size: 10px; font-weight: 400; color: #191917; margin-bottom: 35px; } .sticky-subnav-drawer__intro-text { font-family: "ItalianOldStyleMTPro"; font-weight: 400; font-style: normal; line-height: 1.6; font-size: 12.4px; line-height: 1.6; color: #191917; text-align: justify; margin: 0 0 40px; } .sticky-subnav-drawer__heading { font-family: termina, sans-serif !important; font-weight: 600 !important; font-style: normal !important; font-size: 7.9px !important; letter-spacing: 0.6px !important; text-transform: uppercase !important; color: #191917 !important; margin: 0 0 40px; text-align: left; } /* === Pinned footer row (25px from bottom) === */ .sticky-subnav-drawer__footer { position: absolute; left: 30px; right: 30px; bottom: 25px; display: flex; justify-content: space-between; align-items: flex-end; } .sticky-subnav-drawer__footer-left { font-family: "September Spirit", serif !important; font-size: 32px; font-weight: 400; color: #b7b7b5; line-height: 0.63; } .sticky-subnav-drawer__footer-right { font-family: "ItalianTypewriterBold"; font-weight: 400; font-size: 14px; color: #b7b7b5; letter-spacing: 0.5px; text-align: right; line-height: 1.4; } /* Hide inline links + right text */ .sticky-subnav--desktop, .sticky-subnav__right { display: none !important; } /* Right column: mobile toggle button */ .sticky-subnav-mobile-toggle { grid-column: 2 / 3; justify-self: flex-end; display: inline-flex; align-items: center; gap: 4px; background: none; border: 0; padding: 0; font: 400 9.4px "biondi", sans-serif; letter-spacing: 0.1rem; color: #b7b7b5; text-transform: uppercase; cursor: pointer; } /* Right column: mobile toggle button */ .sticky-subnav-mobile-toggle:hover { grid-column: 2 / 3; justify-self: flex-end; display: inline-flex; align-items: center; gap: 4px; background: none; border: 0; padding: 0; font: 400 9.4px "biondi", sans-serif; letter-spacing: 0.1rem; color: #191917; text-transform: uppercase; cursor: pointer !important; } .sticky-subnav-drawer__close { background: none; border: 0; color: #b7b7b5; position: absolute; top:11px; font-size: 1.5rem; right: 15px; cursor: pointer; padding: 8px; } /* Drawer */ .sticky-subnav-drawer { position: fixed; inset: 0 0 0 auto; width: 100%; max-width: 100%; background: #f1efe8; transform: translateX(100%); transition: transform 00.6s ease; z-index: 9999; padding: 34px 30px 30px; display: flex; flex-direction: column; } } @media (max-width: 768px) { .sticky-subnav-drawer { width: 100%; max-width: 100%; padding: 30px 24px 24px; } .sticky-subnav-drawer__footer { position: absolute; left: 24px; right: 24px; bottom: 25px; display: flex; justify-content: space-between; align-items: flex-end; } sticky-subnav.sticky-atc.sticky-atc--end{ height: 65px; padding-left: 24px; padding-right: 24px; } .sticky-subnav-drawer__close { background: none; border: 0; color: #b7b7b5; position: absolute; top: 6px; font-size: 1.5rem; right: 9px; cursor: pointer; padding: 8px; } } .sticky-subnav-drawer__close svg { width: 30px; height: 30px; fill: transparent; opacity: 1; } .sticky-subnav-drawer__close svg path { stroke-width: 1px !important; } .sticky-subnav-drawer__nav a { text-decoration: none !important; font-family: termina, sans-serif; font-weight: 600; letter-spacing: .6; font-size: 7.9px; color: #b7b7b5; padding-bottom: 10px; text-transform: uppercase; } .sticky-subnav-drawer__nav a:hover { color: #191917; } /* Overlay */ .sticky-subnav-drawer__overlay { position: fixed; inset: 0; background: rgba(37, 36, 35, 0.15); z-index: 9998; opacity: 0; visibility: hidden; transition: opacity 0.4s ease, visibility 0s linear 0.4s; } /* Open state */ body.sticky-subnav-drawer-open .sticky-subnav-drawer { transform: translateX(0); } body.sticky-subnav-drawer-open .sticky-subnav-drawer__overlay { opacity: 1; visibility: visible; transition: opacity 0.4s ease, visibility 0s linear 0s; } body.sticky-subnav-drawer-open { overflow: hidden; } /* Actually hide it when invisible */ sticky-subnav.sticky-atc.invisible { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transform: translateY(110%) !important; /* push off screen */ } /************************************************************************************************************************************************ ******************************************************************* DIARY ************************************************************** ************************************************************************************************************************************************/ /* ========================================================= ================= 3 COLUMN TEXT SECTION ================== ==========================================================*/ /* Shared base */ .featured-journal-text__center-wrap { font-family: "ItalianOldStyleMTPro" !important; font-weight: 400; font-style: normal; line-height: 1.6; font-size: 12.4px; font-weight: 400; font-style: normal; line-height: 1.6; font-size: 12.4px; text-align: center; margin: 0 auto; display: flex; flex-direction: column; align-items: center; } /* Tablet 768px – 1024px */ @media (min-width: 768px) and (max-width: 1024px) { .featured-journal-text__center-wrap { padding-left: 10%; padding-right: 10%; } } /* Section wrapper (margins now customizable) */ @media (min-width: 768px) { .featured-journal-text { max-width: 100%; padding: 40px 40px 10px; } } /* Mobile ≤ 767px */ @media (max-width: 768px) { .featured-journal-text { padding: 30px 24px 0px; max-width: 100%; } } /* Bottom row */ .featured-journal-text__row { display: flex; margin-top: 10px; } .featured-journal-text__col--left{ text-align: left; font-family: 'September Spirit', serif; font-size: 32px; font-weight: 400; color: #b7b7b5;; } .featured-journal-text__col--center { text-align: center; font-family: termina, sans-serif; font-weight: 600; font-size: 7.4px; color: #191917; padding-top: 20px; letter-spacing: .6px; } .featured-journal-text__col--right { text-align: right; font-size: 14px; letter-spacing: .5; font-family: "ItalianTypewriterBold", serif !important; color: #b7b7b5; padding-top: 14px; } @media (min-width: 1025px), (min-width: 768px) and (max-width: 1024px) { .featured-journal-text__col { flex: 0 0 33.333%; max-width: 33.333%; } } @media (max-width: 767px) { .featured-journal-text__row{ display: block; margin-bottom: 20px; } } @media (max-width: 767px){ .featured-journal-text__row{ display: flex; flex-wrap: wrap; } /* CENTER column first, full width */ .featured-journal-text__col--center{ order: 1; width: 100%; text-align: center; } /* LEFT column second, full width */ .featured-journal-text__col--left{ order: 2; width: 100%; text-align: center; line-height: 40px; } /* RIGHT column third (optional) */ .featured-journal-text__col--right{ display: none; } } /* ========================================================= ====================== EDITORIALS ======================== ==========================================================*/ /************* SLIDESHOW *************/ .section-slideshow { --slideshow-pad-d: 40px; --slideshow-pad-m: --slideshow-rule: #b7b7b5; --slideshow-muted: #b7b7b5; --slideshow-strong: #191917; } /* Fixed-height slides get tall viewport height on desktop */ .section-slideshow .height--fixed { height: calc(100vh - 60px); /* modern browsers override fallback */ height: calc(100svh - 60px); } /* Arrow buttons + spacing */ .section-slideshow .slideshow-nav__btn:not(:hover) { opacity: 1; } .section-slideshow .slideshow-nav__btn svg { width: 30px; height: 30px; opacity: 1; stroke-width: 1px; } .section-slideshow .slideshow-nav { padding-left: 19px; padding-right: 19px; } .section-slideshow .slideshow-pagination { margin-bottom: 20%; display: none; } /* Counter + custom text row */ @media (min-width: 768px) { .section-slideshow .slideshow-info-row { display: flex; align-items: center; margin-top: 8px; border-bottom: 1px solid #dadad5; font-size: 12px; letter-spacing: 1px; color: var(--slideshow-muted); opacity: .8; width: 100%; padding-left: var(--slideshow-pad-d); padding-right: var(--slideshow-pad-d); } .section-slideshow .slideshow-center-text { text-align: center; font-family: 'Biondi'; Font-size: 14px; Letter-spacing: 1.5px; Font-weight: 400; color: var(--slideshow-strong) !important; padding-bottom: 5px; width: 33.3%; } .section-slideshow .slideshow-right-text { text-align: right; font-size: 14px; font-family: "ItalianTypewriterBold", serif !important; color: var(--slideshow-strong); letter-spacing: 0.5px; line-height: 1; padding-bottom: 5px; width: 33.3%; } .section-slideshow .slideshow-counter { margin-top: 0 !important; width: 33.3%; text-align: left !important; font-family: "September Spirit", sans-serif !important; font-size: 32px !important; font-weight: 400 !important; color: var(--slideshow-strong) !important; } } @media (max-width: 768px) { .section-slideshow .slideshow-info-row { display: flex; align-items: center; margin-top: 8px; border-bottom: 1px solid #dadad5; font-size: 12px; letter-spacing: 1px; color: var(--slideshow-muted); opacity: .8; width: 100%; padding-left: 24px; padding-right: 24px; } .section-slideshow .slideshow-center-text { text-align: right; font-family: termina, sans-serif; font-weight: 600; font-size: 12.25px; color: var(--slideshow-strong) !important; letter-spacing: .1em; padding-bottom: 5px; width: 50%; } .section-slideshow .slideshow-right-text { display: none; } .section-slideshow .slideshow-counter { margin-top: 0 !important; width: 50%; text-align: left !important; font-family: "September Spirit", sans-serif !important; font-size: 32px !important; font-weight: 400 !important; color: var(--slideshow-strong) !important; } } /************* TEXT ABOVE GALLERY *************/ @media (min-width: 768px) { .editorial-bar { display: flex; justify-content: space-between; align-items: center; padding: 3em 0; font-family: "termina", sans-serif; font-weight: 600; font-style: normal; letter-spacing: 0.1rem; font-size: 7.4px; color: #b7b7b5; } } @media (max-width: 768px) { .editorial-bar { display: flex; justify-content: space-between; align-items: center; margin: 0 24px; padding: 1em 0; font-family: "termina", sans-serif; font-weight: 600; font-style: normal; letter-spacing: 0.1rem; font-size: 7.4px; color: #b7b7b5; } } .editorial-bar__left, .editorial-bar__right { white-space: nowrap; color: inherit; } .editorial-bar a.editorial-link { color: #b7b7b5; text-decoration: none; } .editorial-bar a.editorial-link:hover { color: #191917; } /*************** VIDEO ****************/ @media (min-width: 768px){ div#section-id-template--25847428382986__video_3wWyta { padding: 40px 40px 0px 40px; } .video-block-editorial { display: grid !important; grid-template-columns: 45% 35 !important%; gap: 20% !important; margin: 0px 40px 43px 40px !important; text-align: justify !important; } } @media (max-width: 768px){ div#section-id-template--25847428382986__video_3wWyta { padding: 24px 24px 24px 24px; } .video-block-editorial { display: grid; grid-template-columns: 45% 35%; gap: 14%; margin: 0px 24px 110px 24px; text-align: justify; } .video-block-editorial { grid-template-columns: 1fr; } } div#section-id-template--25847428382986__video_3wWyta video{ border-radius: 8px; border: none; } /********** EDITORIAL CREDITS ***********/ /* Desktop padding for the section wrapper */ @media (min-width: 768px){ #section-{{ section.id }} { padding: 40px 40px 0 40px; } #section-{{ section.id }} .video-block-editorial { display: grid; grid-template-columns: 45% 35%; gap: 20%; margin: 0px; margin-bottom: 30px; text-align: justify; } } /* Mobile padding + grid */ @media (max-width: 768px){ #section-{{ section.id }} { padding: 24px; } #section-{{ section.id }} .video-block-editorial { display: grid; grid-template-columns: 45% 35%; gap: 14%; margin: 24px 24px 110px 24px; text-align: justify; } #section-{{ section.id }} .video-block-editorial { grid-template-columns: 1fr; } } /* If you drop a <video> tag inside this section anywhere, it inherits your radius/border */ #section-{{ section.id }} video{ border-radius: 8px; border: none; display: block; max-width: 100%; height: auto; } /* Typography + dotted leaders — matches your exact CSS */ #section-{{ section.id }} .credits_title{ color: #191917; font-family: "termina", sans-serif; font-weight: 600; font-style: normal; letter-spacing: .6px; font-size: 7.4px; display: inline-flex; align-items: center; text-transform: uppercase; } #section-{{ section.id }} .credits_text{ color: #191917; font-family: "ItalianOldStyleMTPro" !important; font-weight: 400; font-style: normal; line-height: 1.6; font-size: 12.4px; display: inline-flex; align-items: center; } #section-{{ section.id }} .video-block-editorial__credits li span:first-child::after { content: ""; flex: 1; border-bottom: 2px dotted #dadad5; margin: 0 .5em; padding-top: 4px; display: inline-block; } .video-block-editorial__left-text{ padding-top: 3px; } #section-{{ section.id }} .video-block-editorial h2 { margin-bottom: 30px; text-transform: uppercase; letter-spacing: .05em; color: #191917; font-family: "biondi", sans-serif; font-weight: 400; font-style: normal; letter-spacing: 1px; font-size: 11px; } #section-{{ section.id }} .video-block-editorial__credits li { display: flex; justify-content: space-between; font-size: 14px; } #section-{{ section.id }} .video-block-editorial__credits li span:first-child { flex: 1; white-space: nowrap; position: relative; } /************************************************************************************************************************************************ ***************************************************************** ABOUT PAGES ********************************************************** ************************************************************************************************************************************************/ /* ========================================================= ======================= OUR STORY ========================= ==========================================================*/ /* Large screens: match “full-height” image/column behavior used elsewhere */ @media (min-width: 1025px) and (min-height: 750px) { .section-image-with-text-commitment .image-overlap__image > .fade-in-up, .section-image-with-text-design .image-overlap__image > .fade-in-up { height: 100vh; width: 100%; } .section-image-with-text-about .column.column--half, .section-image-with-text-design .column.column--half { height: 100vh; } } /* Desktop */ @media (min-width: 769px) { .section-image-with-text-about .bottom-group { margin-top: 0 !important; } .section-image-with-text-about h2.majortitle.in-content.h1{ margin-top: 81px !important; } } .section-image-with-text-about #about-text p { margin: 0 0 18px 0; } .section-image-with-text-about #about-text p:last-child { margin-bottom: 0; } .section-image-with-text-about #about-text { width: 100%; text-align: left; text-align: justify; } } /* Tablet: remove column bottom margin */ @media (min-width: 768px) and (max-width: 1024px) { .flexible-layout .column, .fixed-layout .column { margin-bottom: 0px; } } /* Mobile */ @media (max-width: 1025px) { .section-image-with-text-about .flexible-layout, .section-image-with-text-about .flexible-layout.valign-middle { align-items: stretch; } .section-image-with-text-about #about-text { width: 100%; padding-left: 15%; padding-right: 15%; text-align: left; text-align: justify; } } .section-image-with-text-about .colors-grid__monogram.fade-in-up{ margin-top: 0; } #about-text p{ hyphens: auto; text-align-last: left; font-family: "ItalianOldStyleMTPro" !important; font-weight: 400; font-style: normal; line-height: 1.6; font-size: 12.4px; text-align: justify !important; } .section-image-with-text-about #about-text, .section-image-with-text-about #about-text * { text-align: left; } @supports selector(:has(*)) { @media (min-width: 1025px) { #design-template--27533173850378__image_with_text_design_r9FBan .design-media__image { width: 65%; margin: 0 auto; } } } @supports selector(:has(*)) { @media (min-width: 768px) and (max-width: 1025px){ #design-template--27533173850378__image_with_text_design_r9FBan .design-media__image { width: 55%; margin: 0 auto; } } } @supports selector(:has(*)) { @media (max-width: 768px) { #design-template--27533173850378__image_with_text_design_r9FBan .design-media__image { width: 65%; margin: 0 auto; } } } /* ========================================================= ======================= COLOR STUDY ======================= ==========================================================*/ #shopify-section-template--26715966603530__image_with_text_colors_ic8hQA .column.column--half.align-ltr-left { border-top: 1px solid #e1e0da; } @media (min-width: 1025px) { #color-study-{{ section.id }} { height: 100%; display: flex; flex-direction: column; } #color-study-{{ section.id }} .color-study { flex: 1 1 auto; display: flex; align-items: center; margin-inline: 40px; } #color-study-{{ section.id }} .color-study__container { width: 100%; height: 100%; } } .section-image-with-text-colors { position: relative; } /* Invisible anchor marker placed at the vertical middle of the section */ .section-image-with-text-colors .section-anchor-mid{ position: absolute; top: 100px; left: 0; width: 1px; height: 1px; pointer-events: none; opacity: 0; scroll-margin-top: 50vh; } /* Full-height color study section on large viewports */ @media (min-width: 1280px) and (min-height: 750px) { .color-study-section { min-height: 100vh; height: 100vh; display: flex; flex-direction: column; } } @media (max-width: 1025px) { #shopify-section-{{ section.id }} .color-study__page-title { padding-top: 105px; margin-bottom: 40px !important; } .color-study__container.container{ margin-inline: 14px; padding-top: 20px; padding-bottom: 20px; } } @media (min-width: 1025px) { #shopify-section-{{ section.id }} .color-study__page-title { padding-top: 140px; margin-bottom: 0 !important; } } /* Grid layout: 3 cols mobile, 4 cols tablet/desktop */ #color-study-{{ section.id }} .color-study__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; list-style: none; padding: 0; margin: 0; height: auto; } @media (min-width: 768px) and (max-width: 1024px) { #color-study-{{ section.id }} .color-study__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } #shopify-section-{{ section.id }} .color-study__page-title { padding-top: 140px; margin-bottom: 30px !important; } } /* Mobile + tablet: tile centered, no offset positioning */ @media (max-width: 1024px) { #color-study-{{ section.id }} .color-study__tile { position: relative; top: auto; left: auto; width: max-content; max-width: 100%; transform: none; display: flex; flex-direction: column; align-items: center; text-align: center; margin-inline: auto; margin-bottom: 25px; } } /* Desktop: 4 columns, rows share height, tiles use % offsets */ @media (min-width: 1025px) { #color-study-{{ section.id }} .color-study__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 1fr; height: 100%; } #color-study-{{ section.id }} .color-study__item { position: relative; display: block; overflow: visible; margin-inline: 40px; height: 130px; } #color-study-{{ section.id }} .color-study__tile { position: absolute; width: max-content; max-width: 100%; top: calc(50% + var(--offset-y-desktop, 0%)); left: calc(50% + var(--offset-x-desktop, 0%)); transform: translate(-50%, -50%); z-index: 2; display: inline-flex; flex-direction: column; align-items: center; gap: 0.75rem; text-align: center; text-decoration: none; } } /* Image wrapper */ #color-study-{{ section.id }} .color-study__image-wrap { width: 30%; height: auto; margin: 0 auto; border-radius: {{ section.settings.radius }}px; overflow: hidden; } #color-study-{{ section.id }} .color-study__image { width: 100%; height: 100%; object-fit: contain; display: block; } /* Mobile image sizing */ @media (max-width: 767px) { #color-study-{{ section.id }} .color-study__image-wrap { width: 55px; height: 66px; margin: 0 auto; border-radius: {{ section.settings.radius }}px; overflow: hidden; display: flex; align-items: center; justify-content: center; } #color-study-{{ section.id }} .color-study__image { width: 100%; height: 100%; object-fit: contain; display: block; } } #color-study-{{ section.id }} .color-study__label { font-size: 15px; font-family: "ItalianTypewriterBold" !important; color: #b7b7b5; letter-spacing: 0.5px; font-display: block; } #color-study-{{ section.id }} .color-study__tile:hover .color-study__label { color: #191917 !important; } @media (min-width: 1025px) { #shopify-section-{{ section.id }} .featured-journal-text__center-wrap { padding-inline: 20%; } } #shopify-section-{{ section.id }} .featured-journal-text__image { width: 24px; height: auto; margin-bottom: 14px; display: block; } /************************************************************************************************************************************************ ***************************************************************** FAISAL CODE ********************************************************** ************************************************************************************************************************************************/ .product-block__image-viewport { overflow: hidden; } .image-cont--with-secondary-image .product-block__image { position: relative !important; flex: 0 0 100%; } .image-cont--with-secondary-image .product-block__image--primary, .image-cont--with-secondary-image .product-block__image--secondary { opacity: 1 !important; } /* Overlay exists always (so it can fade OUT too) */ body::before{ content:""; position: fixed; inset: 0; background-color: rgba(37, 36, 35, 0.05); opacity: 0; visibility: hidden; pointer-events: none; z-index: 12; transition: opacity 0.6s ease, visibility 0s linear 0.6s; } /* When search opens */ body.show-search::before{ opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 0.6s ease; } /* ================================ SEARCH DRAWER ONLY – PRODUCT TITLE ================================ */ main-search .main-search__results .product-block__title.title-text{ font-family: "termina" !important; font-size: 8.25px !important; font-weight: 600 !important; line-height: 1.6 !important; padding-top: 4px; } /* Kill the yellow + bold from auto-marking */ .search-suggestions mark, .main-search mark { background: transparent !important; color: inherit !important; font-weight: inherit !important; padding: 0 !important; } /* Keep your body rule if you want, but DON'T animate opacity on body itself */ body.show-search{ position: relative; /* optional only */ } .show-search .header-shade { pointer-events: none ! IMPORTANT; } /* Bubble effect by Faisal */ .product-block__image-viewport{ touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } .product-block__image-track.is-dragging{ transition: none !important; } .image-cont--with-secondary-image .product-block__image-track{ display:flex; width:100%; transition: transform 480ms cubic-bezier(.19,.84,.41,1); will-change: transform; touch-action: pan-y; } .product-block__image-track.is-rubber-return{ transition: transform 850ms cubic-bezier(.22, 1, .36, 1) !important; /* smooth spring */ } .image-cont--with-secondary-image .product-block__image{ flex: 0 0 100%; position: relative !important; } .image-cont--with-secondary-image .product-block__image-track.is-dragging{ transition: none !important; } /* Keep header background stable while mega menu is active */ body.template-index .section-header.section-header--nav-open .pageheader, body.template-index.mega-open .pageheader, .mega-open div#pageheader { background: #f1efe8 !important; } /* 1) Keep mega panel stable (no jump) */ .pageheader--layout-inline-permitted #main-nav .navigation--main .navigation__tier-2-container{ will-change: opacity, transform; transform: translateZ(0); backface-visibility: hidden; } /* 2) Instead of letting it disappear instantly, animate */ .pageheader--layout-inline-permitted #main-nav .navigation--main .navigation__tier-2-container{ opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .12s ease, visibility .12s ease; } /* 3) When header says nav is open OR when your body.mega-open is set, keep it visible */ .section-header.section-header--nav-open .pageheader--layout-inline-permitted #main-nav .navigation--main .navigation__tier-2-container, body.mega-open .pageheader--layout-inline-permitted #main-nav .navigation--main .navigation__tier-2-container{ opacity: 1; visibility: visible; pointer-events: auto; } /* Remove that 1px "gap line" feeling */ .pageheader--layout-inline-permitted #main-nav .navigation--main .navigation__tier-2-container{ border-top: 0 !important; } .pageheader--layout-inline-permitted #main-nav .navigation--main .navigation__tier-2-container{ top: var(--header-h, 79px) !important; } /* Keep pageheader bottom border ALWAYS visible whenever mega menu is open/hovering */ .section-header.section-header--nav-open #pageheader.pageheader, .section-header.section-header--nav-hover #pageheader.pageheader, body.mega-open #pageheader.pageheader, .section-header.section-header--nav-open #pageheader.pageheader::before, .section-header.section-header--nav-hover #pageheader.pageheader::before, body.mega-open #pageheader.pageheader::before { border-bottom: 1px solid #dadad5 !important; opacity: 1 !important; } .section-header { transition: background-color 180ms ease; } .section-header.section-header--nav-hover { background-color: #F1EFE8; } /* 1) Make sure the element that gets the class can host a fixed overlay */ .section-header { position: relative; z-index: 50; /* keeps header above overlay */ } /* 2) Always create the overlay (hidden by default) */ .section-header::after { content: ""; position: fixed; inset: 0; background: rgba(37, 36, 35, 0.15); opacity: 0; pointer-events: none; z-index: 1; /* below header (50), above page */ } /* 3) When nav is open, just fade it in */ .section-header.section-header--nav-open::after, .section-header.section-header--nav-hover::after, body.mega-open .section-header::after { opacity: 1; } /* Glitch when switching the hovering effect 1-3 menu */ @media (max-width: 768px) { div#shopify-section-template--26715966210314__main { margin-top: 110px !important; margin-bottom: 40px !important; } } @media (min-width: 768px) and (max-width: 1024px) { .menu-promotion__image.menu-promotion__image--with-badge > img.theme-img { height: 45vh !important; width: 100%; object-fit: cover; max-height: none; } } /* Fallback for browsers that don't support scrollbar-gutter */ @supports not (scrollbar-gutter: stable) { html { overflow-y: scroll; } } /* ========================================= DESKTOP: force FADE (override your flex/opacity) Keep mobile slider/rubber untouched ========================================= */ @media (min-width: 960px) and (hover: hover) and (pointer: fine) { /* 1) Stop the "row" slider layout on desktop (override display:flex) */ .image-cont--with-secondary-image .product-block__image-track{ display: grid !important; grid-template-columns: 1fr !important; transform: none !important; /* kill translate row */ transition: none !important; /* no slide animation */ width: 100% !important; } /* 2) Stack ALL images in the same cell (so fade works) */ .image-cont--with-secondary-image .product-block__image-track > .product-block__image{ grid-area: 1 / 1 !important; /* stronger than grid-column */ width: 100% !important; flex: none !important; /* override flex:0 0 100% */ position: relative !important; /* keep your requirement */ opacity: 0 !important; /* override your opacity:1 !important */ transition: opacity 160ms ease !important; pointer-events: none; } .product-block__image.product-block__image--primary.product-block__image--active { opacity: 1 !important; } /* 4) On hover: fade active out, fade hover in */ .image-cont--with-secondary-image:hover .product-block__image--active{ opacity: 0 !important; } .image-cont--with-secondary-image:hover .product-block__image--show-on-hover{ opacity: 1 !important; } /* 5) If your theme marks hover image as inactivated, ensure it can appear */ .image-cont--with-secondary-image .product-block__image--show-on-hover.product-block__image--inactivated{ display: block !important; } } /* ================================ CUSTOM ARROWS – GALLERY + COMMITMENT + LIGHTBOX + PDP SLIDER-NAV ================================ */ :root{ --ete-arrow-left: url("/cdn/shop/files/Eteanne_Left_Arrow_Pencil_Black.png?v=1770282867"); --ete-arrow-right: url("/cdn/shop/files/Eteanne_Right_Arrow_Pencil_Black.png?v=1770282866"); --ete-arrow-size: 50px; --ete-arrow-opacity: 0.3; --ete-arrow-opacity-hover: 0.5; --ete-arrow-offset-y: -32px; } /* ---------- GALLERY VIEWER ---------- */ /* Hide only prev/next SVGs (keep close icon) */ .gallery-viewer__prev svg, .gallery-viewer__next svg{ display: none !important; } /* Button layout */ .gallery-viewer__prev, .gallery-viewer__next{ display: flex !important; align-items: center !important; justify-content: center !important; } /* Base arrow */ .gallery-viewer__prev::before, .gallery-viewer__next::before{ content: "" !important; display: inline-block !important; width: var(--ete-arrow-size) !important; height: var(--ete-arrow-size) !important; background-repeat: no-repeat !important; background-size: contain !important; background-position: center !important; opacity: var(--ete-arrow-opacity) !important; transform: translateY(var(--ete-arrow-offset-y)); } /* Gallery arrows */ .gallery-viewer__prev::before{ background-image: var(--ete-arrow-left) !important; } .gallery-viewer__next::before{ background-image: var(--ete-arrow-right) !important; } /* ---------- COMMITMENT SLIDER ---------- */ /* Hide chevron SVGs */ .commitment-slider__btn svg{ display: none !important; } /* Button layout */ .commitment-slider__btn{ display: flex !important; align-items: center !important; justify-content: center !important; } /* Base arrow */ .commitment-slider__btn::before{ content: "" !important; display: inline-block !important; width: var(--ete-arrow-size) !important; height: var(--ete-arrow-size) !important; background-repeat: no-repeat !important; background-size: contain !important; background-position: center !important; opacity: var(--ete-arrow-opacity) !important; } /* Commitment arrows */ .commitment-slider__btn--prev::before{ background-image: var(--ete-arrow-left) !important; } .commitment-slider__btn--next::before{ background-image: var(--ete-arrow-right) !important; } /* ---------- LIGHTBOX (lb-lightbox) ---------- */ /* Hide only prev/next SVGs (keep close icon) */ .lb-lightbox .lb-nav.prev svg, .lb-lightbox .lb-nav.next svg{ display: none !important; } /* Button layout for nav */ .lb-lightbox .lb-nav.prev, .lb-lightbox .lb-nav.next{ display: flex !important; align-items: center !important; justify-content: center !important; } /* Base arrow for nav */ @media (min-width: 768px) { .lb-lightbox .lb-nav.prev::before, .lb-lightbox .lb-nav.next::before{ content: "" !important; display: inline-block !important; width: var(--ete-arrow-size) !important; height: var(--ete-arrow-size) !important; background-repeat: no-repeat !important; background-size: contain !important; background-position: center !important; opacity: var(--ete-arrow-opacity) !important; transform: translateY(var(--ete-arrow-offset-y)); } } /* Base arrow for nav */ @media (max-width: 768px) { .lb-lightbox .lb-nav.prev::before, .lb-lightbox .lb-nav.next::before{ display: none; } } /* Lightbox arrows */ .lb-lightbox .lb-nav.prev::before{ background-image: var(--ete-arrow-left) !important; } .lb-lightbox .lb-nav.next::before{ background-image: var(--ete-arrow-right) !important; } /* ---------- PDP CAROUSEL SLIDER-NAV (the one that wasn't taking) ---------- */ /* Force-hide SVG + paths so the old chevrons never show */ media-gallery .slider-nav__btn svg, media-gallery .slider-nav__btn svg *{ display: none !important; opacity: 0 !important; visibility: hidden !important; } /* Ensure the button can center a pseudo icon */ media-gallery .slider-nav__btn{ display: flex !important; align-items: center !important; justify-content: center !important; } /* Use ::after (themes often already use ::before here) */ media-gallery .slider-nav__btn::before{ content: none !important; } media-gallery .slider-nav__btn::after{ content: "" !important; display: block !important; width: var(--ete-arrow-size) !important; height: var(--ete-arrow-size) !important; background-repeat: no-repeat !important; background-size: contain !important; background-position: center !important; opacity: var(--ete-arrow-opacity) !important; transform: translateY(var(--ete-arrow-offset-y)); } /* Prev/Next images via name attr */ media-gallery .slider-nav__btn[name="prev"]::after{ background-image: var(--ete-arrow-left) !important; } media-gallery .slider-nav__btn[name="next"]::after{ background-image: var(--ete-arrow-right) !important; } /* Disabled state */ media-gallery .slider-nav__btn[disabled]::after{ opacity: 0.15 !important; } /* ---------- OPTIONAL POLISH ---------- */ .gallery-viewer__prev:hover::before, .gallery-viewer__next:hover::before, .commitment-slider__btn:hover::before, .lb-lightbox .lb-nav:hover::before{ opacity: var(--ete-arrow-opacity-hover) !important; } media-gallery .slider-nav__btn:hover::after{ opacity: var(--ete-arrow-opacity-hover) !important; } /* ================================ REMOVE HOVER OVERLAY – PDP SLIDER NAV ================================ */ /* Remove background + shadow */ media-gallery .slider-nav__btn, media-gallery .slider-nav__btn:hover, media-gallery .slider-nav__btn:focus{ background: transparent !important; box-shadow: none !important; } /* Kill theme hover overlay pseudo-element */ media-gallery .slider-nav__btn::before, media-gallery .slider-nav__btn:hover::before, media-gallery .slider-nav__btn:focus::before{ content: none !important; background: transparent !important; opacity: 0 !important; } /* Some themes use ::after for hover glow */ media-gallery .slider-nav__btn::after{ background-color: transparent !important; } /* overlay header fixed for other pages when search bar opened */ .template-suffix-committment.show-search .pageheader{ /* background: #D3D0CA !important; */ transition: visibility 00.6s, opacity 00.6s ease; } /* WHEN SEARCH OPEN WHITE NAV DIARY */ @supports selector(:has(*)) { html:has(link[rel="canonical"][href*="/blogs/diary-"]) .show-search #pageheader.pageheader, html:has(link[rel="canonical"][href*="/blogs/diary-"]) .show-search #pageheader.pageheader::before { border-bottom: 1px solid #dadad5 !important; opacity: 1 !important; transition: transform 04s ease, background-color 00.6s ease, border-color 00.6s ease, border-width 00.6s ease; } } /* .template-page.show-search:not(.template-suffix-care-guide) #pageheader.pageheader, .template-page.show-search:not(.template-suffix-care-guide) #pageheader.pageheader::before { opacity: 1 !important; border-bottom: 1px solid #C0BFBA !important; } */