/** Shopify CDN: Minification failed Line 2284:0 Unexpected "@media" **/ /* * Custom styles for the Luisa Lisboa storefront. * Loaded last in (layout/theme.liquid), so rules here can refine the theme. */ /* Header wordmark: shown when no logo image is uploaded (sections/header.liquid). Width follows Header > Logo > Desktop width / Mobile width in the theme editor. Drawn as a mask filled with the header text colour, so it also works on the transparent header. */ .header__logo__wordmark { display: block; width: var(--wordmark-width-mobile, 160px); max-width: 100%; aspect-ratio: 1038 / 248; background-color: currentColor; -webkit-mask: var(--wordmark-src) no-repeat center / contain; mask: var(--wordmark-src) no-repeat center / contain; } @media only screen and (min-width: 750px) { .header__logo__wordmark { width: var(--wordmark-width, 260px); } } /* Footer brand logo (custom footer section in sections/group-footer.json). */ .ll-footer .ll-brand__logo { display: block; width: 210px; max-width: 100%; aspect-ratio: 1038 / 248; margin: 0 0 14px; background-color: var(--ll-ink, #3b3226); -webkit-mask: var(--wordmark-src) no-repeat left center / contain; mask: var(--wordmark-src) no-repeat left center / contain; } /* Home page offer block "Descubra algo especial" (custom code block in section_double_qTUdC8, templates/index.json). */ .ll-offer { --ll-ink: #3b3226; --ll-text: #685a3f; --ll-gold: #ab8c52; --ll-wine: #7b2035; --ll-line: rgba(104, 90, 63, 0.2); width: 100%; max-width: 520px; margin: 0 auto; padding: 24px 8px; text-align: center; color: var(--ll-text); font-family: var(--FONT-STACK-BODY); container-type: inline-size; container-name: ll-offer; } .ll-offer__eyebrow { display: inline-flex; align-items: center; gap: 12px; margin: 0 0 14px; font-size: 12px; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ll-gold); } .ll-offer__eyebrow::before, .ll-offer__eyebrow::after { content: ""; width: 32px; height: 1px; background: var(--ll-gold); } .ll-offer__title { margin: 0 0 18px; font-family: var(--FONT-STACK-HEADING); font-size: clamp(30px, 3.4vw, 46px); line-height: 1.05; letter-spacing: 0.02em; text-transform: uppercase; color: var(--ll-wine); } .ll-offer__lead { max-width: 440px; margin: 0 auto 30px; font-size: 16px; line-height: 1.65; } .ll-offer__tiers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 0 0 28px; } .ll-offer__tier { position: relative; padding: 18px 6px 14px; background: #fff; border: 1px solid var(--ll-line); transition: transform 0.25s ease, box-shadow 0.25s ease; } .ll-offer__tier::before { content: ""; position: absolute; top: -1px; left: 50%; width: 24px; height: 2px; margin-left: -12px; background: var(--ll-gold); } .ll-offer__tier:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(59, 50, 38, 0.08); } .ll-offer__pct { display: block; margin-bottom: 8px; font-family: var(--FONT-STACK-HEADING); font-size: clamp(24px, 2.3vw, 32px); line-height: 1; color: var(--ll-wine); } .ll-offer__qty { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ll-ink); } .ll-offer__note { max-width: 450px; margin: 0 auto 10px; font-size: 14.5px; line-height: 1.7; } .ll-offer__urgent { margin: 0 0 24px; font-size: 15px; font-style: italic; color: var(--ll-wine); } .ll-offer__btn { display: inline-block; padding: 16px 34px; background: var(--ll-wine); color: #fff !important; font-size: 12px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; text-decoration: none; transition: background 0.2s ease; } .ll-offer__btn:hover { background: #5e1828; } .ll-offer__sign { margin: 30px 0 0; padding-top: 22px; border-top: 1px solid var(--ll-line); font-size: 14px; font-style: italic; } .ll-offer__logo { display: block; width: 150px; aspect-ratio: 1038 / 248; margin: 10px auto 0; background-color: var(--ll-ink); -webkit-mask: var(--wordmark-src) no-repeat center / contain; mask: var(--wordmark-src) no-repeat center / contain; } @media only screen and (max-width: 749px) { .ll-offer { padding: 40px 4px; } .ll-offer__tiers { grid-template-columns: repeat(2, 1fr); } } /* Narrow text column (e.g. photo set to three-quarters width): tighter type and spacing, discount cards as a 2x2 grid. */ @container ll-offer (max-width: 470px) { .ll-offer__eyebrow { margin-bottom: 10px; font-size: 11px; } .ll-offer__title { margin-bottom: 14px; font-size: clamp(26px, 9cqi, 38px); } .ll-offer__lead { margin-bottom: 22px; font-size: 15px; line-height: 1.6; } .ll-offer__tiers { grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 22px; } .ll-offer__tier { padding: 14px 6px 12px; } .ll-offer__pct { font-size: 26px; } .ll-offer__note { font-size: 14px; line-height: 1.6; } .ll-offer__urgent { margin-bottom: 20px; font-size: 14px; } .ll-offer__btn { padding: 14px 28px; } .ll-offer__sign { margin-top: 22px; padding-top: 18px; } } /* Home page "Descubra algo especial" section only: photo 60% / text 40% (the theme's "three-quarters" image width is 65/35). */ @media only screen and (min-width: 750px) { [id$="__section_double_qTUdC8"] .brick__block--three-quarters, [data-section-id$="__section_double_qTUdC8"] .brick__block--three-quarters { flex: 0 0 60%; } } /* Home page "A nossa história" block (custom code block in section_double_qTUdC8, templates/index.json), next to the photo. */ .ll-house { --ll-ink: #3b3226; --ll-text: #685a3f; --ll-gold: #ab8c52; --ll-wine: #7b2035; position: relative; width: 100%; max-width: 480px; margin: 0 auto; padding: 40px 8px 56px; text-align: left; color: var(--ll-text); font-family: var(--FONT-STACK-BODY); } .ll-house__eyebrow { display: flex; align-items: center; gap: 16px; margin: 0 0 26px; font-size: 12px; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ll-gold); } .ll-house__eyebrow::before, .ll-house__eyebrow::after { content: ""; flex: 0 0 44px; height: 1px; background: var(--ll-gold); } .ll-house__title { margin: 0 0 24px; font-family: Georgia, "Times New Roman", serif; font-size: clamp(30px, 3vw, 42px); font-weight: 400; line-height: 1.15; letter-spacing: 0; text-transform: none; color: var(--ll-wine); } .ll-house__text { margin: 0 0 18px; font-size: 16px; line-height: 1.7; } .ll-house__btn { display: inline-flex; align-items: center; gap: 14px; margin-top: 14px; padding: 16px 28px; background: var(--ll-wine); color: #fff !important; font-size: 12px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; text-decoration: none; white-space: nowrap; transition: background 0.2s ease; } .ll-house__btn:hover { background: #5e1828; } @media only screen and (max-width: 749px) { .ll-house { padding: 36px 4px 64px; } .ll-house__eyebrow { gap: 12px; font-size: 11px; letter-spacing: 0.24em; } .ll-house__eyebrow::before, .ll-house__eyebrow::after { flex-basis: 32px; } .ll-house__text { font-size: 15px; } .ll-house__btn { padding: 15px 20px; font-size: 11px; letter-spacing: 0.14em; } } /* Home page collection sliders (sections/custom-slider-collection.liquid): phone tuning. One horizontal swipe per row: the second product photo is not swipeable inside the card on touch screens, so swiping always moves the row. */ @media only screen and (max-width: 991px) { .viktoria-slider-master .viktoria-swipe-pista { overflow: hidden; } .viktoria-slider-master .viktoria-slide-img.second-img { display: none; } } @media only screen and (max-width: 749px) { .viktoria-slider-master .viktoria-header { align-items: center; padding: 0 16px 12px; } .viktoria-slider-master .viktoria-btn-minimal { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; } .viktoria-slider-master .viktoria-grid-slider { gap: 12px; padding: 0 16px 16px; scroll-padding-left: 16px; } .viktoria-slider-master .viktoria-item { flex: 0 0 46%; max-width: 46%; } .viktoria-slider-master .viktoria-prod-title { font-size: 13px; } } /* Home hero "Descontos de outono" (section_hero_8QJxVG): wine button, readable text */ [id$="__section_hero_8QJxVG"] .hero__button .btn { background-color: #7b2035; border-color: #7b2035; color: #fff; } [id$="__section_hero_8QJxVG"] .hero__button .btn:hover { background-color: #5e1828; border-color: #5e1828; } [id$="__section_hero_8QJxVG"] .hero__content { text-shadow: 0 1px 14px rgba(0, 0, 0, 0.45); } [id$="__section_hero_8QJxVG"] .hero__button .btn { text-shadow: none; } /* Collection slider headings on phones: long titles wrap neatly, button stays on one line */ @media only screen and (max-width: 749px) { .viktoria-slider-master .viktoria-header { gap: 12px; } .viktoria-slider-master .viktoria-main-title { font-size: 16px; line-height: 1.25; } .viktoria-slider-master .viktoria-btn-minimal { flex: 0 0 auto; white-space: nowrap; } } /* Home page collection sliders: brand heading style (serif title, gold rule, italic subtitle, gold outline button, wine price). Placed after the phone tuning above so it wins over it. */ .viktoria-slider-master .viktoria-header { align-items: flex-end; gap: 16px; } .viktoria-slider-master .viktoria-main-title { font-family: Georgia, "Times New Roman", serif; font-size: 24px; font-weight: 400; letter-spacing: 0.08em; line-height: 1.2; color: #3b3226; } .viktoria-slider-master .viktoria-main-title::after { content: ""; display: block; width: 32px; height: 1px; margin-top: 10px; background: #ab8c52; } .viktoria-slider-master .viktoria-subtitle { margin-top: 8px; font-family: Georgia, "Times New Roman", serif; font-size: 14px; font-style: italic; line-height: 1.4; color: #685a3f; } .viktoria-slider-master .viktoria-btn-minimal { flex: 0 0 auto; border-color: #ab8c52; color: #3b3226; font-weight: 500; letter-spacing: 0.14em; white-space: nowrap; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; } .viktoria-slider-master .viktoria-btn-minimal:hover { background: #7b2035; border-color: #7b2035; color: #fff; } .viktoria-slider-master .viktoria-arrow { border-color: #ab8c52; color: #3b3226; } .viktoria-slider-master .viktoria-arrow:hover { background: #7b2035; border-color: #7b2035; color: #fff; } .viktoria-slider-master .viktoria-prod-title { color: #3b3226; } .viktoria-slider-master .viktoria-price-now { color: #7b2035; font-weight: 600; } @media only screen and (max-width: 749px) { .viktoria-slider-master .viktoria-header { gap: 12px; } .viktoria-slider-master .viktoria-main-title { font-size: 18px; letter-spacing: 0.06em; } .viktoria-slider-master .viktoria-main-title::after { width: 26px; margin-top: 7px; } .viktoria-slider-master .viktoria-subtitle { margin-top: 6px; font-size: 12.5px; } .viktoria-slider-master .viktoria-btn-minimal { min-height: 34px; padding: 0 12px; font-size: 10px; } } /* Home hero on phones: title and button at the bottom left, with a soft dark fade behind them so they read well without covering the photo. */ @media only screen and (max-width: 749px) { [id$="__section_hero_8QJxVG"] .hero__content__wrapper { background: linear-gradient(to top, rgba(24, 14, 10, 0.6) 0%, rgba(24, 14, 10, 0.3) 18%, rgba(24, 14, 10, 0) 34%); } [id$="__section_hero_8QJxVG"] .hero__button { margin-top: 12px; } } /* Home hero (section_hero_8QJxVG): shorter than the theme's height option (desktop 85.5%, mobile 90%) */ @media only screen and (min-width: 750px) { [id$="__section_hero_8QJxVG"] .screen-height-full { min-height: calc(var(--full-screen) * 0.855); } } @media only screen and (max-width: 749px) { [id$="__section_hero_8QJxVG"] .screen-height-two-thirds--mobile { min-height: calc(var(--two-thirds) * 0.9); } } /* Free shipping line under the home hero (custom code section in templates/index.json) */ .ll-shipline { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 0; padding: 12px 16px; background: #f5f2ec; border-bottom: 1px solid rgba(104, 90, 63, 0.15); color: #3b3226; font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-align: center; text-transform: uppercase; } .ll-shipline__item { display: inline-flex; align-items: center; gap: 8px; } .ll-shipline__item + .ll-shipline__item::before { content: "·"; margin: 0 18px; color: #ab8c52; font-weight: 700; } .ll-shipline svg { flex: 0 0 18px; width: 18px; height: 18px; fill: none; stroke: #ab8c52; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } /* Phones: one compact line with small icons, lighter than desktop so it does not compete with the hero */ @media only screen and (max-width: 749px) { .ll-shipline { flex-wrap: nowrap; justify-content: space-evenly; gap: 0 8px; padding: 9px 8px; font-size: 11.5px; font-weight: 500; letter-spacing: 0.01em; line-height: 1.3; text-transform: none; white-space: nowrap; } .ll-shipline__item { gap: 4px; } .ll-shipline__item + .ll-shipline__item::before { content: none; } .ll-shipline svg { flex-basis: 13px; width: 13px; height: 13px; } } @media only screen and (max-width: 374px) { .ll-shipline { gap: 0 4px; padding-inline: 4px; font-size: 10px; letter-spacing: 0; } } /* "Sobre nós" page (sections/ll-about.liquid, templates/page.sobre-nos.json) */ .ll-about { --ll-ink: #3b3226; --ll-text: #685a3f; --ll-gold: #ab8c52; --ll-wine: #7b2035; --ll-cream: #f5f2ec; color: var(--ll-text); font-family: var(--FONT-STACK-BODY); } .ll-about img, .ll-about svg.placeholder-svg { display: block; width: 100%; height: 100%; object-fit: cover; } .ll-about__eyebrow { display: flex; align-items: center; gap: 14px; margin: 0 0 18px; font-size: 12px; font-weight: 600; letter-spacing: 0.26em; text-transform: uppercase; color: var(--ll-gold); } .ll-about__eyebrow::before { content: ""; flex: 0 0 36px; height: 1px; background: currentColor; } .ll-about__eyebrow--center { justify-content: center; } .ll-about__eyebrow--center::after { content: ""; flex: 0 0 36px; height: 1px; background: currentColor; } .ll-about__eyebrow--light { justify-content: center; color: #f1d9a8; } .ll-about__eyebrow--light::after { content: ""; flex: 0 0 36px; height: 1px; background: currentColor; } .ll-about__title { margin: 0 0 20px; font-family: Georgia, "Times New Roman", serif; font-size: clamp(28px, 3vw, 40px); font-weight: 400; line-height: 1.2; letter-spacing: 0; text-transform: none; color: var(--ll-wine); } .ll-about__title--center { text-align: center; } /* Hero */ .ll-about__hero { position: relative; display: flex; align-items: flex-end; justify-content: center; min-height: 62vh; overflow: hidden; text-align: center; } .ll-about__hero-media { position: absolute; inset: 0; } .ll-about__hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(24, 14, 10, 0.72) 0%, rgba(24, 14, 10, 0.25) 55%, rgba(24, 14, 10, 0.1) 100%); } .ll-about__hero-content { position: relative; max-width: 760px; padding: 0 24px 64px; color: #fff; } .ll-about__hero-title { margin: 0 0 14px; font-family: Georgia, "Times New Roman", serif; font-size: clamp(34px, 5vw, 64px); font-weight: 400; line-height: 1.1; letter-spacing: 0; text-transform: none; color: #fff; } .ll-about__hero-text { margin: 0; font-size: 17px; line-height: 1.6; color: rgba(255, 255, 255, 0.92); } /* Story */ .ll-about__story { display: grid; grid-template-columns: 1fr; background: var(--ll-cream); } .ll-about__story-media { min-height: 320px; } .ll-about__story-text { padding: 48px 24px 56px; } .ll-about__body { font-size: 16px; line-height: 1.75; } .ll-about__body p { margin: 0 0 16px; } /* Values */ .ll-about__values { padding: 64px 24px; background: #fff; } .ll-about__values-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px 20px; max-width: 1100px; margin: 28px auto 0; padding: 0; list-style: none; text-align: center; } .ll-about__icon { display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 60px; margin-bottom: 14px; border: 1px solid rgba(171, 140, 82, 0.45); border-radius: 50%; } .ll-about__icon svg { width: 26px; height: 26px; fill: none; stroke: var(--ll-gold); stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; } .ll-about__value-title { margin: 0 0 8px; font-family: Georgia, "Times New Roman", serif; font-size: 19px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ll-ink); } .ll-about__value-text { margin: 0; font-size: 14.5px; line-height: 1.6; } /* Quote */ .ll-about__quote { padding: 64px 24px; background: var(--ll-wine); text-align: center; } .ll-about__quote blockquote { max-width: 760px; margin: 0 auto; padding: 0; border: 0; } .ll-about__quote p { margin: 0 0 18px; font-family: Georgia, "Times New Roman", serif; font-size: clamp(22px, 2.6vw, 32px); font-style: italic; line-height: 1.4; color: #fff; } .ll-about__quote p::before { content: "\201C"; } .ll-about__quote p::after { content: "\201D"; } .ll-about__quote cite { font-size: 12px; font-style: normal; font-weight: 600; letter-spacing: 0.26em; text-transform: uppercase; color: #f1d9a8; } /* Collections */ .ll-about__cats { padding: 64px 16px; background: var(--ll-cream); } .ll-about__cats-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; max-width: 1200px; margin: 8px auto 0; padding: 0; list-style: none; } .ll-about__cat { display: block; color: var(--ll-ink); text-decoration: none; } .ll-about__cat-img { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: #e9e3d8; } .ll-about__cat-img img { transition: transform 0.5s ease; } .ll-about__cat:hover .ll-about__cat-img img { transform: scale(1.04); } .ll-about__cat-label { display: block; padding: 12px 0 4px; font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; } /* Call to action */ .ll-about__cta { padding: 64px 24px 72px; background: #fff; text-align: center; } .ll-about__cta-text { margin: 0 auto 28px; max-width: 460px; font-size: 16px; line-height: 1.6; } .ll-about__cta-actions { display: flex; flex-direction: column; align-items: center; gap: 18px; } .ll-about__btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 52px; padding: 0 32px; background: var(--ll-wine); color: #fff !important; font-size: 12px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; text-decoration: none; transition: background 0.2s ease; } .ll-about__btn:hover { background: #5e1828; } .ll-about__link { padding-bottom: 3px; border-bottom: 1px solid var(--ll-gold); font-size: 14px; color: var(--ll-ink); text-decoration: none; } @media only screen and (min-width: 750px) { .ll-about__hero { min-height: 70vh; } .ll-about__hero-content { padding-bottom: 88px; } .ll-about__values-list { grid-template-columns: repeat(4, 1fr); gap: 32px; } .ll-about__cats { padding: 80px 32px; } .ll-about__cats-list { grid-template-columns: repeat(4, 1fr); gap: 20px; } .ll-about__cta-actions { flex-direction: row; justify-content: center; gap: 32px; } } @media only screen and (min-width: 990px) { .ll-about__story { grid-template-columns: 1fr 1fr; } .ll-about__story-media { min-height: 560px; } .ll-about__story-text { display: flex; flex-direction: column; justify-content: center; padding: 72px 8vw 72px 64px; } .ll-about__values { padding: 88px 32px; } .ll-about__quote { padding: 88px 32px; } } @media only screen and (max-width: 749px) { .ll-about__hero { min-height: 58vh; } .ll-about__hero-content { padding: 0 20px 44px; } .ll-about__hero-text { font-size: 15px; } .ll-about__story-media { min-height: 260px; } .ll-about__story-text { padding: 40px 20px 44px; } .ll-about__body { font-size: 15px; } .ll-about__values, .ll-about__quote, .ll-about__cats, .ll-about__cta { padding-top: 48px; padding-bottom: 52px; } .ll-about__btn { width: 100%; max-width: 340px; } } /* "Sobre nós": text-only intro, founder photo and letter */ .ll-about__hero--plain { min-height: 0; align-items: center; background: var(--ll-cream); } .ll-about__hero--plain .ll-about__hero-content { padding: 56px 20px 48px; color: var(--ll-text); } .ll-about__hero--plain .ll-about__eyebrow--light { color: var(--ll-gold); } .ll-about__hero--plain .ll-about__hero-title { color: var(--ll-wine); } .ll-about__hero--plain .ll-about__hero-text { max-width: 520px; margin: 0 auto; color: var(--ll-text); } .ll-about__story--text { grid-template-columns: 1fr; background: #fff; } .ll-about__story--text .ll-about__story-text { max-width: 720px; margin: 0 auto; padding: 52px 20px 48px; text-align: center; } .ll-about__story--text .ll-about__eyebrow { justify-content: center; } .ll-about__story--text .ll-about__eyebrow::after, .ll-about__founder-text .ll-about__eyebrow::after { content: ""; flex: 0 0 36px; height: 1px; background: currentColor; } .ll-about__founder { background: var(--ll-cream); } .ll-about__founder-media { aspect-ratio: 4 / 3; overflow: hidden; background: #efe9e1; } .ll-about__founder-media img { object-position: 62% center; } .ll-about__founder-text { max-width: 720px; margin: 0 auto; padding: 44px 20px 52px; } .ll-about__founder-text .ll-about__eyebrow { justify-content: center; } .ll-about__founder-text .ll-about__title { margin-bottom: 28px; text-align: center; } .ll-about__founder-text .ll-about__body a { color: var(--ll-wine); text-decoration: underline; text-underline-offset: 3px; } .ll-about__signature { margin: 32px 0 0; padding-top: 28px; border-top: 1px solid rgba(171, 140, 82, 0.35); font-family: Georgia, "Times New Roman", serif; font-size: 24px; font-style: italic; text-align: center; color: var(--ll-wine); } .ll-about__signature small { display: block; margin-top: 8px; font-family: var(--FONT-STACK-BODY); font-size: 11px; font-style: normal; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ll-gold); } @media only screen and (min-width: 750px) { .ll-about__hero--plain .ll-about__hero-content { padding: 88px 32px 72px; } .ll-about__story--text .ll-about__story-text { padding: 88px 0 80px; } .ll-about__founder { padding: 80px 32px 0; } .ll-about__founder-media { max-width: 1200px; margin: 0 auto; aspect-ratio: 1704 / 923; } .ll-about__founder-media img { object-position: center; } .ll-about__founder-text { padding: 64px 0 88px; } .ll-about__founder-text .ll-about__body { font-size: 17px; } } /* "Sobre nós" intro: watercolour Lisbon banner behind the text (assets/ll-about-banner.jpg; plain paper above a skyline strip). */ .ll-about__hero--plain { background: url("ll-about-banner.jpg") center bottom / 170% auto no-repeat, #f2e6d8; } .ll-about__hero--plain .ll-about__hero-content { padding-bottom: 84px; } @media only screen and (min-width: 750px) { .ll-about__hero--plain { background-size: 100% auto; } .ll-about__hero--plain .ll-about__hero-content { padding-bottom: calc(6vw + 48px); } } /* "Sobre nós" founder: photo and letter side by side on desktop */ @media only screen and (min-width: 990px) { .ll-about__founder { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 64px; max-width: 1280px; margin: 0 auto; padding: 88px 48px; } .ll-about__founder-media { position: relative; max-width: none; margin: 0; aspect-ratio: 1 / 1; } .ll-about__founder-media img { position: absolute; inset: 0; object-position: 49% center; } .ll-about__founder-text { display: flex; flex-direction: column; justify-content: center; max-width: none; margin: 0; padding: 0; } .ll-about__founder-text .ll-about__eyebrow { justify-content: flex-start; } .ll-about__founder-text .ll-about__eyebrow::after { content: none; } .ll-about__founder-text .ll-about__title, .ll-about__signature { text-align: left; } .ll-about__founder-text .ll-about__body { font-size: 16px; } .ll-about__signature { margin-top: 20px; padding-top: 20px; } } /* "Sobre nós" mission: editorial layout (heading + lead paragraph) */ .ll-about__story--text .ll-about__story-text { text-align: left; } .ll-about__story--text .ll-about__eyebrow { justify-content: flex-start; } .ll-about__story--text .ll-about__eyebrow::after { content: none; } .ll-about__story--text .ll-about__body p:first-child { margin-bottom: 20px; font-family: Georgia, "Times New Roman", serif; font-size: 19px; line-height: 1.55; color: var(--ll-ink); } @media only screen and (min-width: 990px) { .ll-about__story--text .ll-about__story-text { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto 1fr; column-gap: 72px; max-width: 1180px; padding: 104px 48px; } .ll-about__story--text .ll-about__eyebrow { grid-column: 1; grid-row: 1; } .ll-about__story--text .ll-about__title { grid-column: 1; grid-row: 2; margin: 0; font-size: clamp(30px, 3vw, 42px); line-height: 1.22; } .ll-about__story--text .ll-about__title::after { content: ""; display: block; width: 48px; height: 1px; margin-top: 32px; background: var(--ll-gold); } .ll-about__story--text .ll-about__body { grid-column: 2; grid-row: 1 / span 2; padding-left: 56px; border-left: 1px solid rgba(171, 140, 82, 0.45); } .ll-about__story--text .ll-about__body p:first-child { font-size: 23px; } .ll-about__story--text .ll-about__body p:last-child { margin-bottom: 0; } /* Founder: cream background runs edge to edge while the content stays centred */ .ll-about__founder { box-shadow: 0 0 0 100vmax var(--ll-cream); clip-path: inset(0 -100vmax); } } /* Cart drawer: free-shipping bar under the subtotal (snippets/ll-free-shipping-bar.liquid) */ .ll-freeship { margin: 2px 0 12px; } .ll-freeship__text { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; font-size: 12px; line-height: 1.35; color: #5b5044; } .ll-freeship__icon { flex: 0 0 16px; width: 16px; height: 16px; fill: none; stroke: #7b2035; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; } .ll-freeship.is-done .ll-freeship__text { font-weight: 500; } .ll-freeship__track { position: relative; height: 3px; overflow: hidden; border-radius: 3px; background: #eee6dc; } .ll-freeship__fill { position: absolute; inset: 0 auto 0 0; width: var(--ll-fill, 0%); border-radius: inherit; background: #7b2035; transition: width 0.6s ease; animation: ll-freeship-grow 1.1s ease-out; } .ll-freeship__fill::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.45) 50%, rgba(255, 255, 255, 0) 100%); transform: translateX(-100%); animation: ll-freeship-shine 2.4s ease-in-out 1.1s infinite; } @keyframes ll-freeship-grow { from { width: 0; } } @keyframes ll-freeship-shine { to { transform: translateX(100%); } } @media (prefers-reduced-motion: reduce) { .ll-freeship__fill, .ll-freeship__fill::after { animation: none; } } /* Cart drawer footer: calmer, clearer order (protection > discount > subtotal > free shipping > checkout > trust). Scoped to .cart__foot__inner so it wins over the inline styles in sections/cart-drawer.liquid. */ .cart__foot__inner .cart__ship-protect { margin-bottom: 0; padding: 10px 12px; border: 1px solid #ece5da; border-radius: 6px; background: #faf7f3; } .cart__foot__inner .cart__ship-protect-left svg { width: 28px; height: 28px; } .cart__foot__inner .cart__ship-protect-title { font-size: 12.5px; font-weight: 600; } .cart__foot__inner .cart__ship-protect-desc { font-size: 11px; color: #8a8074; } .cart__foot__inner .cart__promo-details { margin-top: 4px; padding: 10px 0; border-top: 0; border-bottom: 1px solid #efe9e1; } .cart__foot__inner .cart__price__holder { margin-top: 12px; } .cart__foot__inner .cart__warranty-btn { flex-wrap: wrap; gap: 6px; margin: 10px 0 10px; padding: 0; border: 0; background: none; font-size: 12px; font-weight: 500; letter-spacing: 0.02em; text-transform: none; color: #6f665c; } .cart__foot__inner .cart__warranty-btn svg { width: 14px; height: 14px; color: #7b2035; } .cart__trust-sep { margin: 0 4px; color: #c9bfb2; } ul.cart__payment-icons { flex-wrap: nowrap !important; gap: 6px !important; margin-bottom: 4px !important; opacity: 0.8; } ul.cart__payment-icons .payment-icon { height: 18px !important; } /* ========================================================================== Cart drawer redesign (Lisboa by Luisa look: cream, wine, gold, serif titles). Visual only. Scoped to cart-drawer.drawer--cart so the cart page is unchanged and these rules win over the inline styles in the section/snippets. ========================================================================== */ cart-drawer.drawer--cart { --ll-ink: #3b3226; --ll-muted: #8a8074; --ll-line: #efe8de; --ll-cream: #faf7f3; --ll-wine: #7b2035; --ll-gold: #ab8c52; } /* Header */ cart-drawer.drawer--cart .drawer__head { padding-top: 20px; padding-bottom: 18px; border-bottom-color: var(--ll-line); } cart-drawer.drawer--cart .cart__title { align-items: center; font-family: Georgia, "Times New Roman", serif; font-size: 22px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ll-wine); } cart-drawer.drawer--cart .cart__items-count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; margin-left: 10px; padding: 0 7px; border-radius: 999px; background: #f3ece3; font-family: var(--FONT-STACK-BODY); font-size: 12px; font-weight: 600; color: var(--ll-ink); } cart-drawer.drawer--cart .cart__items-count::before, cart-drawer.drawer--cart .cart__items-count::after { content: none; } /* Reservation note: one slim light-red line */ cart-drawer.drawer--cart .cart__urgency-banner { margin: 0 0 4px; padding: 7px 12px; border: 0; border-radius: 6px; background: #fdeef0; font-size: 12px; font-weight: 500; line-height: 1.3; color: #9b2338; } cart-drawer.drawer--cart .cart__urgency-banner strong:not(#cart-countdown) { display: none; } cart-drawer.drawer--cart .cart__urgency-banner .urgency-icon { width: 14px; height: 14px; color: #b3263f; animation: none; } cart-drawer.drawer--cart #cart-countdown { font-weight: 700; font-variant-numeric: tabular-nums; color: #9b2338; } @keyframes ll-urgency-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.15); opacity: 0.75; } } @media (prefers-reduced-motion: reduce) { cart-drawer.drawer--cart .cart__urgency-banner .urgency-icon { animation: none; } } /* Products list */ cart-drawer.drawer--cart .drawer__items-title { margin-top: 8px; font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ll-gold); } cart-drawer.drawer--cart .cart__item { padding-top: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--ll-line); } cart-drawer.drawer--cart .cart__item--no-border { border-bottom: 0; } cart-drawer.drawer--cart .cart__item__image img, cart-drawer.drawer--cart .cart__item__image .lazy-image { border-radius: 8px; overflow: hidden; background: #f5f1ec; } cart-drawer.drawer--cart .cart__item__title { margin-bottom: 4px; font-family: Georgia, "Times New Roman", serif; font-size: 15.5px; font-weight: 400; line-height: 1.35; letter-spacing: 0; text-transform: none; } cart-drawer.drawer--cart .cart__item__title a { color: var(--ll-ink); text-decoration: none; } cart-drawer.drawer--cart .cart__item__meta, cart-drawer.drawer--cart .cart__item__meta p { font-size: 12px; color: var(--ll-muted); } cart-drawer.drawer--cart .cart__item .cart__price { margin-top: 6px; font-size: 14px; } cart-drawer.drawer--cart .cart__item .cart__price ins { font-weight: 600; text-decoration: none; color: var(--ll-wine); } cart-drawer.drawer--cart .cart__item .cart__price del { margin-left: 6px; font-size: 12.5px; color: #a79d91; } /* Quantity + remove on one line */ cart-drawer.drawer--cart .cart__quantity-wrapper { width: auto !important; max-width: none !important; margin-top: 12px !important; } cart-drawer.drawer--cart .cart__quantity-counter { display: flex; align-items: center; gap: 16px; } cart-drawer.drawer--cart .custom-qty-style { position: relative; flex: 0 0 108px; width: 108px !important; height: 34px !important; border: 1px solid #e3dace !important; border-radius: 999px !important; overflow: hidden; } cart-drawer.drawer--cart .cart__quantity-minus, cart-drawer.drawer--cart .cart__quantity-plus { z-index: 1; width: 34px !important; color: var(--ll-ink); } cart-drawer.drawer--cart .cart__quantity-field { width: 100% !important; padding: 0 34px !important; } cart-drawer.drawer--cart .cart__quantity-minus .icon, cart-drawer.drawer--cart .cart__quantity-plus .icon { width: 10px; height: 10px; } cart-drawer.drawer--cart .cart__quantity-field { font-size: 13px !important; font-weight: 600; color: var(--ll-ink); } cart-drawer.drawer--cart .cart__item__remove { margin-top: 0 !important; font-size: 11px !important; letter-spacing: 0.08em; color: var(--ll-muted) !important; text-underline-offset: 3px; } cart-drawer.drawer--cart .cart__item__remove:hover { color: var(--ll-wine) !important; } /* Footer panel */ cart-drawer.drawer--cart .drawer__foot { border-top: 1px solid var(--ll-line); background: var(--ll-cream); } cart-drawer.drawer--cart .cart__foot__inner .cart__ship-protect { background: #fff; } cart-drawer.drawer--cart .cart__total__label { font-size: 12px; font-weight: 600; letter-spacing: 0.18em; color: var(--ll-ink); } cart-drawer.drawer--cart .cart__total__price { color: var(--ll-ink); } cart-drawer.drawer--cart button.cart__checkout { border-radius: 6px !important; box-shadow: 0 6px 16px rgba(123, 32, 53, 0.18) !important; } /* ========================================================================== Contact page (sections/ll-contact.liquid) ========================================================================== */ .ll-cp { --ll-ink: #3b3226; --ll-text: #685a3f; --ll-muted: #8a8074; --ll-line: #e6ddd1; --ll-gold: #ab8c52; --ll-wine: #7b2035; color: var(--ll-text); font-family: var(--FONT-STACK-BODY); } .ll-cp__intro { padding: 52px 20px 92px; background: url("ll-about-banner.jpg") center bottom / 170% auto no-repeat, #f2e6d8; text-align: center; } .ll-cp__eyebrow { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 0 0 16px; font-size: 12px; font-weight: 600; letter-spacing: 0.26em; text-transform: uppercase; color: var(--ll-gold); } .ll-cp__eyebrow::before, .ll-cp__eyebrow::after { content: ""; flex: 0 0 36px; height: 1px; background: currentColor; } .ll-cp__title { margin: 0 0 14px; font-family: Georgia, "Times New Roman", serif; font-size: clamp(34px, 5vw, 58px); font-weight: 400; line-height: 1.1; letter-spacing: 0; text-transform: none; color: var(--ll-wine); } .ll-cp__lead { max-width: 520px; margin: 0 auto; font-size: 16px; line-height: 1.6; } .ll-cp__main { padding: 32px 16px 64px; background: #faf7f3; } .ll-cp__grid { display: grid; gap: 24px; max-width: 1100px; margin: 0 auto; } /* Info cards */ .ll-cp__info { display: grid; gap: 10px; align-content: start; } .ll-cp__card { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border: 1px solid var(--ll-line); border-radius: 10px; background: #fff; color: var(--ll-ink); text-decoration: none; transition: border-color 0.2s ease, box-shadow 0.2s ease; } a.ll-cp__card:hover { border-color: var(--ll-wine); box-shadow: 0 6px 18px rgba(59, 50, 38, 0.08); } .ll-cp__card small { display: block; margin-bottom: 2px; font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ll-gold); } .ll-cp__card strong { display: block; font-size: 15px; font-weight: 500; line-height: 1.45; color: var(--ll-ink); overflow-wrap: anywhere; } .ll-cp__icon { display: inline-flex; flex: 0 0 44px; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: #f5ede3; } .ll-cp__icon svg { width: 20px; height: 20px; fill: none; stroke: var(--ll-wine); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .ll-cp__note { margin: 6px 4px 0; font-size: 13px; line-height: 1.6; color: var(--ll-muted); } /* Form */ .ll-cp__form-card { order: -1; padding: 28px 20px; border: 1px solid var(--ll-line); border-radius: 12px; background: #fff; box-shadow: 0 10px 30px rgba(59, 50, 38, 0.06); } .ll-cp__form-title { margin: 0 0 20px; font-family: Georgia, "Times New Roman", serif; font-size: 24px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ll-ink); } .ll-cp__row { display: grid; gap: 0 16px; } .ll-cp__field { margin-bottom: 16px; } .ll-cp__field label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: var(--ll-ink); } .ll-cp__field label span { color: var(--ll-wine); } .ll-cp__field input, .ll-cp__field select, .ll-cp__field textarea { display: block; width: 100%; min-height: 48px; margin: 0; padding: 12px 14px; border: 1px solid var(--ll-line); border-radius: 8px; background: #fff; font-family: inherit; font-size: 15px; color: var(--ll-ink); box-shadow: none; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .ll-cp__field select { -webkit-appearance: none; appearance: none; padding-right: 40px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237b2035' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 14px center / 16px no-repeat; } .ll-cp__field textarea { min-height: 150px; resize: vertical; } .ll-cp__field input:focus, .ll-cp__field select:focus, .ll-cp__field textarea:focus { border-color: var(--ll-wine); outline: none; box-shadow: 0 0 0 3px rgba(123, 32, 53, 0.12); } .ll-cp__submit { display: inline-flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 54px; margin: 6px 0 16px; border: 0; border-radius: 8px; background: var(--ll-wine); color: #fff; font-size: 13px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; cursor: pointer; transition: background 0.2s ease; } .ll-cp__submit:hover { background: #5e1828; } .ll-cp__small { margin: 0 0 6px; font-size: 12px; line-height: 1.5; color: var(--ll-muted); } .ll-cp__small a { color: inherit; } .ll-cp__success { margin: 0 0 18px; padding: 14px 16px; border-left: 3px solid #43a047; border-radius: 0 8px 8px 0; background: #eef7ee; font-size: 14px; color: #1f5d24; } .ll-cp__errors { margin: 0 0 18px; padding: 14px 16px; border-left: 3px solid var(--ll-wine); border-radius: 0 8px 8px 0; background: #fbeff1; font-size: 14px; color: var(--ll-wine); } .ll-cp__errors ul { margin: 0; padding-left: 18px; } @media only screen and (min-width: 750px) { .ll-cp__intro { padding: 88px 32px calc(6vw + 56px); background-size: 100% auto; } .ll-cp__main { padding: 64px 32px 88px; } .ll-cp__row { grid-template-columns: 1fr 1fr; } .ll-cp__form-card { padding: 36px 36px 28px; } } @media only screen and (min-width: 990px) { .ll-cp__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 40px; align-items: start; } .ll-cp__form-card { order: 0; } } /* Footer contact links (E-mail, Enviar uma mensagem): the theme's "p a" style paints link text through its background (background-clip: text); the footer's own link background replaced that and left the text invisible. */ .ll-footer .ll-contact a { display: inline; padding-bottom: 0; -webkit-text-fill-color: currentColor; -webkit-background-clip: border-box; background-clip: border-box; color: var(--ll-ink, #3b3226); } .ll-footer .ll-contact a::after { content: none; } .ll-footer .ll-contact a:hover { color: var(--ll-wine, #7b2035); } /* ========================================================================== Side menu (snippets/ll-drawer-menu.liquid, header drawer) ========================================================================== */ header-drawer.drawer--header .drawer__inner { background: #faf7f3; } header-drawer.drawer--header .drawer__head { display: flex; align-items: center; min-height: 64px; padding: 18px 26px; border-bottom: 0; } .ll-menu__logo { display: block; color: #3b3226; } .ll-menu__logo .header__logo__wordmark { width: 124px; -webkit-mask-position: left center; mask-position: left center; } .ll-menu { display: flex; flex-direction: column; min-height: 100%; padding: 4px 28px 32px; font-family: var(--FONT-STACK-BODY); text-transform: none; } .ll-menu__label { display: flex; align-items: center; gap: 10px; margin: 18px 0 10px; font-size: 11px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: #ab8c52; } .ll-menu__label::before { content: ""; flex: 0 0 22px; height: 1px; background: currentColor; } .ll-menu__list, .ll-menu__help { margin: 0; padding: 0; list-style: none; } .ll-menu__list li { border-bottom: 1px solid #efe8de; } .ll-menu__link { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 17px 0; font-family: Georgia, "Times New Roman", serif; font-size: 19px; line-height: 1.3; letter-spacing: 0; color: #3b3226; text-decoration: none; text-transform: none; } .ll-menu__link span { font-family: var(--FONT-STACK-BODY); font-size: 16px; color: #b9ab98; transition: transform 0.2s ease, color 0.2s ease; } .ll-menu__link:hover, .ll-menu__link.is-active { color: #7b2035; } .ll-menu__link:hover span { color: #7b2035; transform: translateX(3px); } .ll-menu__link--all { font-family: var(--FONT-STACK-BODY); font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #7b2035; } .ll-menu__help a { display: flex; align-items: center; gap: 14px; padding: 12px 0; font-size: 15px; letter-spacing: 0; color: #5b5044; text-decoration: none; text-transform: none; } .ll-menu__help a:hover { color: #7b2035; } .ll-menu__icon { flex: 0 0 18px; width: 18px; height: 18px; fill: none; stroke: #7b2035; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .ll-menu__list + .ll-menu__label { margin-top: 40px; } /* Side menu on phones: let the whole menu scroll (the theme clips the menu pane to the screen height) and scroll smoothly without moving the page behind. */ header-drawer.drawer--header .drawer__menu:has(.ll-menu) { overflow: visible; max-height: none; } header-drawer.drawer--header .drawer__content__scroll { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } /* Smooth entrance: items fade and slide in one after another when the menu opens. */ header-drawer.drawer--animated .ll-menu__label, header-drawer.drawer--animated .ll-menu__list li, header-drawer.drawer--animated .ll-menu__help li { animation: ll-menu-in 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) both; } header-drawer.drawer--animated .ll-menu__list li:nth-child(1) { animation-delay: 0.08s; } header-drawer.drawer--animated .ll-menu__list li:nth-child(2) { animation-delay: 0.12s; } header-drawer.drawer--animated .ll-menu__list li:nth-child(3) { animation-delay: 0.16s; } header-drawer.drawer--animated .ll-menu__list li:nth-child(4) { animation-delay: 0.2s; } header-drawer.drawer--animated .ll-menu__list li:nth-child(5) { animation-delay: 0.24s; } header-drawer.drawer--animated .ll-menu__list li:nth-child(6) { animation-delay: 0.28s; } header-drawer.drawer--animated .ll-menu__list li:nth-child(n+7) { animation-delay: 0.32s; } header-drawer.drawer--animated .ll-menu__list + .ll-menu__label { animation-delay: 0.34s; } header-drawer.drawer--animated .ll-menu__help li { animation-delay: 0.38s; } @keyframes ll-menu-in { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: none; } } .ll-menu__link, .ll-menu__help a, @media (prefers-reduced-motion: reduce) { header-drawer.drawer--animated .ll-menu__label, header-drawer.drawer--animated .ll-menu__list li, header-drawer.drawer--animated .ll-menu__help li { animation: none; } } /* Side menu inside the phone "Mobile menu" section (sections/mobile-menu.liquid): the block already has side padding, so the menu itself only needs vertical space. */ mobile-menu .mobile-menu__block--menu { padding-right: 28px; padding-left: 28px; } mobile-menu .ll-menu { min-height: 0; padding: 4px 0 28px; } /* ========================================================================== FAQ page (sections/ll-faq.liquid) ========================================================================== */ .ll-faq { --ll-ink: #3b3226; --ll-text: #685a3f; --ll-muted: #8a8074; --ll-line: #e9e1d6; --ll-gold: #ab8c52; --ll-wine: #7b2035; color: var(--ll-text); font-family: var(--FONT-STACK-BODY); interpolate-size: allow-keywords; } .ll-faq__intro { padding: 52px 20px 92px; background: url("ll-about-banner.jpg") center bottom / 170% auto no-repeat, #f2e6d8; text-align: center; } .ll-faq__eyebrow { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 0 0 16px; font-size: 12px; font-weight: 600; letter-spacing: 0.26em; text-transform: uppercase; color: var(--ll-gold); } .ll-faq__eyebrow::before, .ll-faq__eyebrow::after { content: ""; flex: 0 0 36px; height: 1px; background: currentColor; } .ll-faq__title { margin: 0 0 14px; font-family: Georgia, "Times New Roman", serif; font-size: clamp(34px, 5vw, 58px); font-weight: 400; line-height: 1.1; letter-spacing: 0; text-transform: none; color: var(--ll-wine); } .ll-faq__lead { max-width: 520px; margin: 0 auto; font-size: 16px; line-height: 1.6; } .ll-faq__body { max-width: 820px; margin: 0 auto; padding: 32px 20px 72px; } /* Topic shortcuts */ .ll-faq__nav { display: flex; gap: 8px; margin: 0 -20px 16px; padding: 0 20px 6px; overflow-x: auto; scrollbar-width: none; } .ll-faq__nav::-webkit-scrollbar { display: none; } .ll-faq__nav a { flex: 0 0 auto; padding: 9px 16px; border: 1px solid var(--ll-line); border-radius: 999px; background: #fff; font-size: 13px; color: var(--ll-ink); text-decoration: none; white-space: nowrap; transition: border-color 0.2s ease, color 0.2s ease; } .ll-faq__nav a:hover { border-color: var(--ll-wine); color: var(--ll-wine); } /* Topics and questions */ .ll-faq__group { padding-top: 36px; scroll-margin-top: calc(var(--HEADER-HEIGHT-MOBILE, 64px) + 16px); } .ll-faq__group-title { display: flex; align-items: center; gap: 12px; margin: 0 0 8px; font-family: Georgia, "Times New Roman", serif; font-size: 24px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ll-ink); } .ll-faq__list { border-top: 1px solid var(--ll-line); } .ll-faq__item { border-bottom: 1px solid var(--ll-line); } .ll-faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 0; font-size: 16px; font-weight: 500; line-height: 1.45; color: var(--ll-ink); cursor: pointer; list-style: none; } .ll-faq__item summary::-webkit-details-marker { display: none; } .ll-faq__item summary:hover { color: var(--ll-wine); } .ll-faq__plus { position: relative; flex: 0 0 28px; width: 28px; height: 28px; border: 1px solid var(--ll-line); border-radius: 50%; transition: background 0.25s ease, border-color 0.25s ease; } .ll-faq__plus::before, .ll-faq__plus::after { content: ""; position: absolute; top: 50%; left: 50%; width: 10px; height: 1.5px; background: var(--ll-wine); transform: translate(-50%, -50%); transition: transform 0.3s ease, background 0.25s ease; } .ll-faq__plus::after { transform: translate(-50%, -50%) rotate(90deg); } .ll-faq__item[open] .ll-faq__plus { border-color: var(--ll-wine); background: var(--ll-wine); } .ll-faq__item[open] .ll-faq__plus::before, .ll-faq__item[open] .ll-faq__plus::after { background: #fff; } .ll-faq__item[open] .ll-faq__plus::after { transform: translate(-50%, -50%) rotate(0deg); } /* Smooth open/close where the browser supports it (falls back to instant) */ .ll-faq__item::details-content { height: 0; overflow: clip; transition: height 0.35s ease, content-visibility 0.35s allow-discrete; } .ll-faq__item[open]::details-content { height: auto; } .ll-faq__answer { padding: 0 44px 22px 0; font-size: 15px; line-height: 1.7; } .ll-faq__answer p { margin: 0 0 12px; } .ll-faq__answer p:last-child { margin-bottom: 0; } .ll-faq__answer a { color: var(--ll-wine); } /* Contact call to action */ .ll-faq__cta { margin-top: 56px; padding: 36px 24px; border-radius: 12px; background: #faf7f3; text-align: center; } .ll-faq__cta-title { margin: 0 0 8px; font-family: Georgia, "Times New Roman", serif; font-size: 26px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ll-wine); } .ll-faq__cta-text { margin: 0 0 22px; font-size: 15px; } .ll-faq__cta-actions { display: flex; flex-direction: column; align-items: center; gap: 14px; } .ll-faq__btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 30px; border-radius: 8px; background: var(--ll-wine); color: #fff !important; font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none; transition: background 0.2s ease; } .ll-faq__btn:hover { background: #5e1828; } .ll-faq__mail { font-size: 14px; color: var(--ll-ink); } @media only screen and (min-width: 750px) { .ll-faq__intro { padding: 88px 32px calc(6vw + 56px); background-size: 100% auto; } .ll-faq__body { padding: 48px 32px 96px; } .ll-faq__nav { flex-wrap: wrap; justify-content: center; margin: 0 0 24px; padding: 0; overflow: visible; } .ll-faq__group { padding-top: 48px; scroll-margin-top: calc(var(--HEADER-HEIGHT, 90px) + 24px); } .ll-faq__cta-actions { flex-direction: row; justify-content: center; gap: 28px; } } @media (prefers-reduced-motion: reduce) { .ll-faq__item::details-content, .ll-faq__plus::before, .ll-faq__plus::after { transition: none; } } /* ========================================================================== Cart drawer: less friction - smaller title, compact shipping protection row - one savings row above the subtotal (per-item notes hidden) - per item: crossed catalog price, "Poupe" amount and coupon tag ========================================================================== */ cart-drawer.drawer--cart .cart__title { font-size: 18px; } cart-drawer.drawer--cart .cart__items-count { min-width: 20px; height: 20px; margin-left: 8px; font-size: 11px; } cart-drawer.drawer--cart .cart__item .cart__discount { display: none; } /* Shipping protection: below the discount code, compact, one short line */ cart-drawer.drawer--cart .cart__foot__inner .cart__ship-protect { margin-top: 10px; padding: 9px 12px; border-radius: 8px; } cart-drawer.drawer--cart .cart__foot__inner .cart__ship-protect-left { gap: 10px; } cart-drawer.drawer--cart .cart__foot__inner .cart__ship-protect-left svg { width: 26px; height: 26px; } cart-drawer.drawer--cart .cart__foot__inner .cart__ship-protect-title { margin-bottom: 1px; font-size: 13px; } cart-drawer.drawer--cart .cart__foot__inner .cart__ship-protect-desc { display: block; font-size: 11.5px; line-height: 1.35; } cart-drawer.drawer--cart .cart__foot__inner .cart__ship-protect-label { width: 40px; height: 22px; } cart-drawer.drawer--cart .cart__foot__inner .cart__ship-protect-knob::before { width: 16px; height: 16px; top: 3px; left: 3px; } cart-drawer.drawer--cart .cart__foot__inner .cart__ship-protect-label input:checked + .cart__ship-protect-knob::before { transform: translateX(18px); } /* Savings row: receipt style, aligned with the discount code and subtotal */ .ll-savings { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 12px 0 0; padding: 0; font-size: 13px; line-height: 1.4; color: #7b2035; } .ll-savings.is-hidden { display: none; } .ll-savings__label { display: flex; align-items: center; gap: 8px; min-width: 0; font-weight: 600; letter-spacing: 0.02em; } .ll-savings__label svg { flex: 0 0 14px; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; } .ll-savings__amount { flex: 0 0 auto; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; } cart-drawer.drawer--cart .ll-savings + .cart__price__holder { margin-top: 6px; } /* Cart items: catalog saving and coupon tag next to the price (snippets/cart-line-items.liquid) */ .cart__item .cart__price { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; } .cart__item .cart__price del { margin-left: 0; } .cart__save { padding: 2px 7px; border-radius: 4px; background: #fbeff1; font-size: 11.5px; font-weight: 700; line-height: 1.5; color: #7b2035; white-space: nowrap; } .cart__coupon { position: relative; display: inline-flex; align-items: center; justify-content: center; height: 22px; padding: 0 8px 0 18px; border: 1.5px solid #7b2035; border-radius: 3px 6px 6px 3px; font-size: 11px; font-weight: 700; line-height: 1; color: #7b2035; white-space: nowrap; } .cart__coupon svg { position: absolute; left: 4px; top: 50%; width: 11px; height: 11px; transform: translateY(-50%); fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; } /* Cart drawer: fewer labels, one clear path to checkout */ cart-drawer.drawer--cart .drawer__items-title { display: none; } /* Coupon tag next to "Poupe": smaller */ .cart__coupon { height: 18px; padding: 0 6px 0 15px; border-width: 1px; font-size: 10px; } .cart__coupon svg { left: 3px; width: 9px; height: 9px; } /* "Poupou no total" under the subtotal (snippets/ll-cart-total-savings.liquid) */ .ll-total-save { margin: 4px 0 10px; font-size: 12.5px; text-align: right; color: #7b2035; } .ll-total-save strong { font-weight: 700; } /* ========================================================================== Cart: phone-first compaction ========================================================================== */ /* Remove = small bin icon next to the quantity (drawer and cart page) */ .cart__item a.cart__item__remove { display: inline-flex !important; align-items: center; justify-content: center; width: 36px; height: 36px; margin: 0 !important; border-radius: 50%; text-decoration: none !important; color: #8a8074 !important; transition: color 0.2s ease, background 0.2s ease; } .cart__item a.cart__item__remove:hover { background: #f5ede3; color: #7b2035 !important; } .cart__item__remove-icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } cart-drawer.drawer--cart .cart__quantity-counter { gap: 8px; } /* Tighter product rows */ cart-drawer.drawer--cart .cart__item { padding-top: 14px; padding-bottom: 14px; } cart-drawer.drawer--cart .cart__item__title { font-size: 15px; } cart-drawer.drawer--cart .cart__quantity-wrapper { margin-top: 8px !important; } /* Footer: protection as a simple row, less spacing */ cart-drawer.drawer--cart .cart__foot__inner .cart__promo-details { padding: 8px 0; } cart-drawer.drawer--cart .cart__foot__inner .cart__ship-protect { margin-top: 0; padding: 8px 0; border: 0; border-bottom: 1px solid #efe9e1; border-radius: 0; background: none; box-shadow: none; } cart-drawer.drawer--cart .cart__foot__inner .cart__ship-protect-left svg { width: 22px; height: 22px; } cart-drawer.drawer--cart .ll-savings { margin-top: 10px; } cart-drawer.drawer--cart .cart__price__holder .cart__total { margin-bottom: 0; padding-bottom: 0; } cart-drawer.drawer--cart .ll-total-save { margin: 0 0 8px; } /* Express checkout buttons (Apple Pay / Google Pay) under the main button */ cart-drawer.drawer--cart .additional-checkout-buttons { margin-top: 8px; } cart-drawer.drawer--cart .additional-checkout-buttons [data-shopify-buttoncontainer] { gap: 8px; } cart-drawer.drawer--cart .additional-checkout-buttons .shopify-cleanslate div[role="button"], cart-drawer.drawer--cart .additional-checkout-buttons shopify-accelerated-checkout-cart { --shopify-accelerated-checkout-button-block-size: 46px; --shopify-accelerated-checkout-button-border-radius: 6px; } /* Discount code row: smaller */ cart-drawer.drawer--cart .cart__foot__inner .cart__promo-details { padding: 6px 0; } cart-drawer.drawer--cart .cart__promo-summary { font-size: 11.5px; letter-spacing: 0.04em; color: #6f665c; } cart-drawer.drawer--cart .cart__promo-summary svg { width: 12px !important; height: 12px !important; } cart-drawer.drawer--cart .cart__promo-summary::after { font-size: 14px; } /* Item price: prices and "Poupe" on one line, coupon tag on its own line below */ .cart__item .cart__price { display: block; } .cart__item .cart__price > ins, .cart__item .cart__price > del, .cart__item .cart__price > .cart__save { display: inline-block; margin-right: 8px; vertical-align: middle; } .cart__item .cart__price > .cart__coupon { display: flex; width: max-content; margin-top: 6px; } /* Checkout button: same height as the express buttons (46px) */ cart-drawer.drawer--cart button.cart__checkout { min-height: 46px !important; padding: 0 16px !important; font-size: 13px !important; letter-spacing: 0.14em !important; border-radius: 6px !important; } /* MB WAY hint right under the main button */ .ll-mbway-hint { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 8px 0 4px; font-size: 12.5px; line-height: 1.3; color: #5b5044; } .ll-mbway-hint strong { color: #3b3226; } .ll-mbway-hint__icon { width: auto; height: 18px; border-radius: 3px; } /* Discount code: a small link instead of a full row */ cart-drawer.drawer--cart .cart__foot__inner { padding-top: 8px; } cart-drawer.drawer--cart .cart__foot__inner .cart__promo-details { padding: 2px 0 6px; border-bottom: 0; } cart-drawer.drawer--cart .cart__promo-summary { justify-content: flex-start; gap: 6px; font-size: 12px; font-weight: 500; letter-spacing: 0; color: #8a8074; } cart-drawer.drawer--cart .cart__promo-summary > span { text-decoration: underline; text-decoration-color: #d8cfc3; text-underline-offset: 3px; } cart-drawer.drawer--cart .cart__promo-summary::after { font-size: 13px; color: #b3a898; } /* ========================================================================== Offer landing page (sections/ll-offer.liquid, classes .ll-gift, + the Apps section with the Shopify Forms block right below it, templates/page.presente.json) ========================================================================== */ .ll-gift { width: 100%; font-family: var(--FONT-STACK-BODY); color: #685a3f; } .ll-gift__intro { padding: 36px 20px 76px; background: url("ll-about-banner.jpg") center bottom / 170% auto no-repeat, #f2e6d8; text-align: center; } .ll-gift__eyebrow { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 0 0 16px; font-size: 12px; font-weight: 600; letter-spacing: 0.26em; text-transform: uppercase; color: #ab8c52; } .ll-gift__eyebrow::before, .ll-gift__eyebrow::after { content: ""; flex: 0 0 36px; height: 1px; background: currentColor; } .ll-gift__title { margin: 0 0 14px; font-family: Georgia, "Times New Roman", serif; font-size: clamp(30px, 4vw, 46px); font-weight: 400; line-height: 1.1; letter-spacing: 0; text-transform: none; color: #7b2035; } .ll-gift__lead { max-width: 480px; margin: 0 auto; font-size: 15px; line-height: 1.6; } .ll-gift__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; max-width: 560px; margin: 0 auto; padding: 18px 16px 4px; list-style: none; background: #faf7f3; } .ll-gift__steps li { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 12.5px; line-height: 1.35; text-align: center; color: #3b3226; } .ll-gift__num { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 1px solid #7b2035; border-radius: 50%; font-family: Georgia, "Times New Roman", serif; font-size: 15px; color: #7b2035; } /* Cream band around the steps and the form, form in a white card */ .shopify-section:has(.ll-gift) { display: block; width: 100%; background: #faf7f3; } .shopify-section:has(.ll-gift) + .shopify-section { display: block; width: 100%; padding: 12px 16px 56px; background: #faf7f3; } .shopify-section:has(.ll-gift) + .shopify-section > div { max-width: 560px; margin: 0 auto; padding: 24px 20px 20px; border: 1px solid #e6ddd1; border-radius: 12px; background: #fff; box-shadow: 0 10px 30px rgba(59, 50, 38, 0.06); } @media only screen and (min-width: 750px) { .ll-gift__intro { padding: 44px 32px calc(4vw + 40px); background-size: 100% auto; } .ll-gift__steps { gap: 24px; padding-top: 22px; } .ll-gift__steps li { font-size: 13.5px; } .shopify-section:has(.ll-gift) + .shopify-section { padding-bottom: 96px; } .shopify-section:has(.ll-gift) + .shopify-section > div { padding: 32px 36px 24px; } } /* Home page collection sliders: quick add (snippets/ll-slider-quick-add.liquid). Touch screens: small round "+" in the photo corner, always visible. Mouse: a cream bar that slides up from the bottom of the photo on hover. */ .viktoria-slider-master .ll-qa__holder { position: absolute; right: 8px; bottom: 8px; z-index: 3; } .viktoria-slider-master .ll-qa__holder form { margin: 0; } .viktoria-slider-master .ll-qa__btn { position: relative; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 1px solid rgba(171, 140, 82, 0.55); border-radius: 50%; background: rgba(250, 247, 243, 0.94); color: #3b3226; box-shadow: 0 2px 8px rgba(59, 50, 38, 0.12); cursor: pointer; -webkit-tap-highlight-color: transparent; --accent: #7b2035; --accent-fade: rgba(123, 32, 53, 0.2); --btn-text: #7b2035; } .viktoria-slider-master .ll-qa__btn .btn__text { display: none; } .viktoria-slider-master .ll-qa__plus { display: flex; transition: opacity 0.3s ease; } .viktoria-slider-master .ll-qa__plus svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; } .viktoria-slider-master .ll-qa__btn .btn__loader, .viktoria-slider-master .ll-qa__btn .btn__added { position: absolute; top: 50%; left: 50%; } .viktoria-slider-master .ll-qa__btn .btn__loader { transform: translate(-50%, -50%); } .viktoria-slider-master .ll-qa__btn .btn__loader svg { display: block; } .viktoria-slider-master .ll-qa__btn.is-loading .ll-qa__plus, .viktoria-slider-master .ll-qa__btn.is-added .ll-qa__plus { opacity: 0; } .viktoria-slider-master .ll-qa__btn:disabled { cursor: default; } @media (hover: hover) and (pointer: fine) { .viktoria-slider-master .ll-qa__holder { right: 0; bottom: 0; left: 0; opacity: 0; transform: translateY(100%); transition: opacity 0.3s ease, transform 0.3s ease; } .viktoria-slider-master .viktoria-item:hover .ll-qa__holder, .viktoria-slider-master .ll-qa__holder:focus-within, .viktoria-slider-master .ll-qa__holder.is-visible { opacity: 1; transform: none; } .viktoria-slider-master .ll-qa__btn { width: 100%; height: 42px; border: 0; border-top: 1px solid rgba(171, 140, 82, 0.45); border-radius: 0; box-shadow: none; font-family: Georgia, "Times New Roman", serif; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; transition: background-color 0.2s ease, color 0.2s ease; } .viktoria-slider-master .ll-qa__btn .btn__text { display: inline; transition: opacity 0.3s ease; } .viktoria-slider-master .ll-qa__plus { display: none; } .viktoria-slider-master .ll-qa__btn:hover { background: #7b2035; color: #fff; --btn-text: #fff; --accent: #fff; --accent-fade: rgba(255, 255, 255, 0.3); } } /* Quick add size panel (snippets/ll-slider-quick-add.liquid, assets/ll-slider-quick-add.js). Desktop: slides up over the product photo. Touch screens: bottom sheet (.is-sheet). */ .ll-qa-panel { --accent: #7b2035; --accent-fade: rgba(123, 32, 53, 0.2); --btn-text: #7b2035; position: absolute; right: 0; bottom: 0; left: 0; z-index: 5; display: flex; flex-direction: column; max-height: 100%; padding: 12px 12px 10px; background: rgba(250, 247, 243, 0.97); border-top: 1px solid rgba(171, 140, 82, 0.45); color: #3b3226; opacity: 0; transform: translateY(100%); transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1); } .ll-qa-panel.is-open { opacity: 1; transform: none; } .ll-qa-panel[hidden] { display: none; } .ll-qa-panel__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 8px; } .ll-qa-panel__titles { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .ll-qa-panel__product { display: none; font-family: Georgia, "Times New Roman", serif; font-size: 15px; line-height: 1.3; color: #3b3226; } .ll-qa-panel__choose { font-family: Georgia, "Times New Roman", serif; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: #685a3f; } .ll-qa-panel__close { display: flex; align-items: center; justify-content: center; flex: 0 0 28px; width: 28px; height: 28px; margin: -6px -6px 0 0; padding: 0; border: 0; background: none; color: #685a3f; cursor: pointer; } .ll-qa-panel__close svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; } .ll-qa-panel__form { display: flex; flex-direction: column; min-height: 0; margin: 0; } .ll-qa-panel__list { display: flex; flex-direction: column; gap: 6px; min-height: 0; margin: 0; padding: 0; overflow-y: auto; overscroll-behavior: contain; list-style: none; } .ll-qa-panel__list li { margin: 0; } .ll-qa-pill { position: relative; display: block; width: 100%; padding: 0; border: 1px solid rgba(171, 140, 82, 0.5); background: #fff; color: #3b3226; font-size: 12.5px; line-height: 1.3; text-align: left; cursor: pointer; transition: border-color 0.2s ease, background-color 0.2s ease; -webkit-tap-highlight-color: transparent; } .ll-qa-pill .btn__text { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; } .ll-qa-pill__label { min-width: 0; } .ll-qa-pill__price { flex: 0 0 auto; color: #7b2035; font-weight: 600; } .ll-qa-pill .btn__loader, .ll-qa-pill .btn__added { position: absolute; top: 50%; left: 50%; } .ll-qa-pill .btn__loader { transform: translate(-50%, -50%); } .ll-qa-pill .btn__loader svg { display: block; } .ll-qa-pill.is-loading, .ll-qa-pill.is-added { border-color: #7b2035; } .ll-qa-pill:disabled { cursor: default; } .ll-qa-pill.is-soldout { border-color: rgba(104, 90, 63, 0.2); background: transparent; color: #a39883; } .ll-qa-pill.is-soldout .ll-qa-pill__label { text-decoration: line-through; } .ll-qa-pill.is-soldout .ll-qa-pill__price { color: #a39883; font-weight: 400; } .ll-qa-panel__error { margin: 8px 0 0; font-size: 12px; line-height: 1.4; color: #7b2035; } .ll-qa-panel__error[hidden] { display: none; } @media (hover: hover) { .ll-qa-pill:not(:disabled):hover { border-color: #7b2035; background: #fbf5f6; } .ll-qa-panel__close:hover { color: #7b2035; } } /* Keep the hover bar out of the way while the panel is open */ .viktoria-slider-master .ll-qa.is-open .ll-qa__holder { visibility: hidden; } /* Touch screens: bottom sheet */ .ll-qa-panel.is-sheet { position: fixed; top: auto; z-index: 6010; max-height: 75vh; padding: 18px 16px calc(16px + env(safe-area-inset-bottom)); border-top: 0; border-radius: 16px 16px 0 0; background: #faf7f3; box-shadow: 0 -8px 30px rgba(59, 50, 38, 0.18); } .ll-qa-panel.is-sheet .ll-qa-panel__head { margin-bottom: 14px; } .ll-qa-panel.is-sheet .ll-qa-panel__product { display: block; } .ll-qa-panel.is-sheet .ll-qa-panel__close { flex-basis: 36px; width: 36px; height: 36px; margin: -8px -8px 0 0; } .ll-qa-panel.is-sheet .ll-qa-panel__close svg { width: 20px; height: 20px; } .ll-qa-panel.is-sheet .ll-qa-panel__list { gap: 8px; } .ll-qa-panel.is-sheet .ll-qa-pill { font-size: 15px; } .ll-qa-panel.is-sheet .ll-qa-pill .btn__text { min-height: 50px; padding: 12px 14px; } .ll-qa-backdrop { position: fixed; inset: 0; z-index: 6009; background: rgba(24, 14, 10, 0.4); opacity: 0; visibility: hidden; transition: opacity 0.28s ease, visibility 0.28s ease; } .ll-qa-backdrop.is-open { opacity: 1; visibility: visible; } html.ll-qa-lock, html.ll-qa-lock body { overflow: hidden; } /* Search page (sections/ll-search.liquid + sections/ll-search-suggest.liquid, assets/ll-search.js). The theme's own search box is hidden; results, filters and pagination stay in sections/search.liquid. */ .template-search .search-page main-search { display: none; } .template-search .search-page { --padding-top: 0px; } .template-search .ll-search-section:has(.ll-search--empty) ~ .shopify-section .search-page { display: none; } .ll-search { padding: 48px 20px 40px; background: #faf7f3; border-bottom: 1px solid rgba(171, 140, 82, 0.2); color: #3b3226; } .ll-search--performed:not(.ll-search--empty) { padding-bottom: 28px; } .ll-search__head { max-width: 680px; margin: 0 auto 22px; text-align: center; } .ll-search__title { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: 30px; font-weight: 400; letter-spacing: 0.08em; line-height: 1.2; text-transform: uppercase; color: #3b3226; } .ll-search__title::after { content: ""; display: block; width: 36px; height: 1px; margin: 14px auto 0; background: #ab8c52; } .ll-search__intro { margin: 14px 0 0; font-family: Georgia, "Times New Roman", serif; font-size: 15px; font-style: italic; color: #685a3f; } /* Box */ .ll-search__box { position: relative; display: block; max-width: 680px; margin: 0 auto; } .ll-search__form { display: flex; align-items: stretch; height: 54px; margin: 0; background: #fff; border: 1px solid rgba(171, 140, 82, 0.55); transition: border-color 0.2s ease, box-shadow 0.2s ease; } .ll-search__form:focus-within { border-color: #ab8c52; box-shadow: 0 0 0 3px rgba(171, 140, 82, 0.15); } .ll-search__input { flex: 1 1 auto; min-width: 0; height: 100%; margin: 0; padding: 0 16px; border: 0; border-radius: 0; background: transparent; color: #3b3226; font-size: 16px; box-shadow: none; outline: none; -webkit-appearance: none; appearance: none; } .ll-search__input::placeholder { color: #a39883; opacity: 1; } .ll-search__input::-webkit-search-cancel-button, .ll-search__input::-webkit-search-decoration { -webkit-appearance: none; } .ll-search__clear, .ll-search__submit { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; margin: 0; padding: 0; border: 0; cursor: pointer; } .ll-search__clear { width: 44px; background: none; color: #a39883; } .ll-search__clear.is-hidden { display: none; } .ll-search__clear:hover { color: #7b2035; } .ll-search__clear svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; } .ll-search__submit { width: 58px; background: #7b2035; color: #fff; transition: background-color 0.2s ease; } .ll-search__submit:hover { background: #5e1828; } .ll-search__submit svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; } .ll-search__box.is-loading .ll-search__form::after { content: ""; position: absolute; right: 58px; bottom: 0; left: 0; height: 2px; background: linear-gradient(90deg, transparent, #ab8c52, transparent); background-size: 50% 100%; background-repeat: no-repeat; animation: ll-search-load 1s linear infinite; } @keyframes ll-search-load { from { background-position: -50% 0; } to { background-position: 150% 0; } } /* Live suggestions */ .ll-search__suggest { position: absolute; top: calc(100% + 6px); right: 0; left: 0; z-index: 20; max-height: min(70vh, 560px); overflow-y: auto; overscroll-behavior: contain; background: #fff; border: 1px solid rgba(171, 140, 82, 0.35); box-shadow: 0 12px 32px rgba(59, 50, 38, 0.14); text-align: left; } .ll-search__suggest[hidden] { display: none; } .ll-suggest__list { margin: 0; padding: 6px 0; list-style: none; } .ll-suggest__list li { margin: 0; } .ll-suggest__item { display: flex; align-items: center; gap: 14px; padding: 8px 14px; color: #3b3226; text-decoration: none; transition: background-color 0.15s ease; } .ll-suggest__item:hover, .ll-suggest__item.is-active { background: #faf7f3; } .ll-suggest__img { flex: 0 0 52px; width: 52px; height: 65px; overflow: hidden; background: #f2e6d8; } .ll-suggest__img img { display: block; width: 100%; height: 100%; object-fit: cover; } .ll-suggest__info { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .ll-suggest__title { font-size: 14px; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .ll-suggest__price { font-size: 13px; color: #685a3f; } .ll-suggest__now { color: #7b2035; font-weight: 600; } .ll-suggest__was { margin-left: 6px; color: #a39883; font-size: 12px; } .ll-suggest__all { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px; border-top: 1px solid rgba(171, 140, 82, 0.25); color: #7b2035; font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-decoration: none; text-transform: uppercase; } .ll-suggest__all:hover, .ll-suggest__all.is-active { background: #faf7f3; } .ll-suggest__all svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .ll-suggest__none { margin: 0; padding: 16px; font-size: 14px; color: #685a3f; } /* No results */ .ll-search__empty { max-width: 680px; margin: 28px auto 0; text-align: center; } .ll-search__empty-title { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: 19px; color: #3b3226; } .ll-search__empty-text { margin: 6px 0 0; font-size: 14px; color: #685a3f; } /* Chips and collections */ .ll-search__block { max-width: 980px; margin: 32px auto 0; text-align: center; } .ll-search__label { margin: 0 0 14px; font-family: Georgia, "Times New Roman", serif; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: #685a3f; } .ll-search__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; padding: 0; list-style: none; } .ll-search__chips li { margin: 0; } .ll-search__chip { display: inline-flex; align-items: center; min-height: 38px; padding: 0 18px; border: 1px solid rgba(171, 140, 82, 0.55); border-radius: 999px; background: #fff; color: #3b3226; font-size: 14px; text-decoration: none; transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease; } .ll-search__chip:hover { border-color: #7b2035; background: #7b2035; color: #fff; } .ll-search__tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; } .ll-search__tiles li { margin: 0; } .ll-search__tile { display: block; color: #3b3226; text-decoration: none; } .ll-search__tile-img { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: #f2e6d8; } .ll-search__tile-img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .ll-search__tile:hover .ll-search__tile-img img { transform: scale(1.04); } .ll-search__tile-title { display: block; margin-top: 10px; font-family: Georgia, "Times New Roman", serif; font-size: 14px; line-height: 1.3; } .ll-search__help { margin: 32px 0 0; font-size: 14px; text-align: center; color: #685a3f; } .ll-search__help a { color: #7b2035; text-decoration: underline; text-underline-offset: 3px; -webkit-text-fill-color: currentColor; background: none; } /* Results header and cards */ .template-search .search__caption { padding: 16px 20px; border-color: rgba(171, 140, 82, 0.2); font-family: Georgia, "Times New Roman", serif; font-size: 15px; font-style: italic; color: #685a3f; } .template-search .product-item__price .price.sale .new-price { color: #7b2035; font-weight: 600; } @media only screen and (max-width: 749px) { .ll-search { padding: 28px 16px 28px; } .ll-search__head { margin-bottom: 16px; } .ll-search__title { font-size: 22px; } .ll-search__title::after { margin-top: 10px; } .ll-search__intro { margin-top: 10px; font-size: 14px; } .ll-search__form { height: 50px; } .ll-search__submit { width: 52px; } .ll-search__box.is-loading .ll-search__form::after { right: 52px; } .ll-search__suggest { max-height: 60vh; } .ll-search__block { margin-top: 26px; } .ll-search__chip { min-height: 40px; padding: 0 16px; } /* Collections: one swipeable row */ .ll-search__tiles { display: flex; gap: 12px; margin: 0 -16px; padding: 0 16px 4px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; scrollbar-width: none; text-align: left; } .ll-search__tiles::-webkit-scrollbar { display: none; } .ll-search__tiles li { flex: 0 0 38%; scroll-snap-align: start; } .ll-search__tile-title { font-size: 13px; } }