/** * Woocommerce - global header, search overlay and cart drawer. * * Colour and font tokens come from style.css (:root); the sizing tokens below * are local to the header components. * * SPECIFICITY NOTE -- please keep it when editing. * Elementor's global Kit stylesheet (uploads/elementor/css/post-.css) is * enqueued on every page and styles bare elements through the body class: * `.elementor-kit-4 h2`, `.elementor-kit-4 p`, `.elementor-kit-4 a`, * `.elementor-kit-4 button`, `.elementor-kit-4 input`. That is specificity * (0,1,1), which beats a single component class such as `.lf-cart-drawer__title` * (0,1,0) no matter the load order -- which is why the drawer title, the chips * and the buttons rendered at the Kit's heading and button sizes instead of * their own. * * Every rule here that sets typography, spacing or colour on an element the Kit * can reach is therefore scoped with its block root -- `.lf-cart-drawer * .lf-cart-drawer__title` (0,2,0) -- which wins cleanly on specificity. No * `!important` anywhere. */ :root { --lf-header-topbar-height: 34px; --lf-header-bar-height: 74px; --lf-header-offset: 0px; --lf-z-header: 9990; --lf-z-overlay: 9995; /* * Above the header and above the search/cart overlays: WooCommerce's own * PhotoSwipe lightbox (wc-product-gallery-lightbox) is appended straight to * and ships with its own low z-index (PhotoSwipe v4's own default, * 1500), which used to sit *under* this theme's sticky header. Consumed by * single-product.css against the library's real `.pswp` root -- see the * comment there for the full explanation. */ --lf-z-lightbox: 9999; /* Component type scale. Fluid where the range is worth it. */ --lf-fs-topbar: 12.5px; --lf-fs-nav: 15px; --lf-fs-search-field: 16px; --lf-fs-chip: 15px; --lf-fs-button: 15px; --lf-drawer-title: clamp(20px, 1.4vw + 16px, 24px); --lf-drawer-item: clamp(15px, 0.5vw + 14px, 17px); --lf-drawer-price: clamp(14px, 0.3vw + 13px, 15px); --lf-drawer-total: clamp(18px, 0.6vw + 16px, 20px); --lf-radius-sm: 10px; --lf-radius-md: 12px; --lf-radius-lg: 20px; --lf-control-height: 48px; } /* ------------------------------------------------------------------------- * 1. Shell, sticky behaviour and hide-on-scroll * ---------------------------------------------------------------------- */ .lf-header { position: sticky; top: var(--lf-header-offset); z-index: var(--lf-z-header); background: var(--lf-white); border-bottom: 1px solid var(--lf-border); transition: transform 280ms ease; } /* * Hidden by transform, never by `top`: no reflow, no layout shift, and the * sticky offset that keeps the bar under #wpadminbar stays untouched. The class * is only ever set below 1024px -- see the media query in header.js. */ .lf-header.is-hidden { transform: translateY(-100%); } /* * The WordPress admin bar is fixed on large screens, fixed and taller on * medium ones, and scrolls away below 600px. These are WordPress' own * breakpoints, not magic numbers. */ body.admin-bar { --lf-header-offset: 32px; } @media screen and (max-width: 782px) { body.admin-bar { --lf-header-offset: 46px; } } @media screen and (max-width: 600px) { body.admin-bar { --lf-header-offset: 0px; } } /* Scroll lock for dialogs; the gap keeps the layout from jumping. */ html.lf-scroll-locked { overflow: hidden; padding-right: var(--lf-scrollbar-gap, 0px); } .lf-icon { flex: none; display: block; } /* The `hidden` attribute is how header.js swaps the topbar pause/play icons * (see below): without this, the unconditional `display: block` two lines up * is an author-stylesheet rule and beats the browser's own `[hidden] { * display: none }` UA rule outright, regardless of specificity -- so both * icons stayed visible at once no matter what JS set `.hidden` to. */ .lf-icon[hidden] { display: none; } /* ------------------------------------------------------------------------- * 2. Top bar * ---------------------------------------------------------------------- */ .lf-header .lf-header__topbar { background: var(--lf-green); color: var(--lf-white); font-size: var(--lf-fs-topbar); line-height: 1.3; } .lf-header .lf-header__topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: var(--lf-header-topbar-height); padding-block: 5px; } .lf-header .lf-header__contact { display: flex; align-items: center; min-width: 0; } .lf-header .lf-header__contact-item { display: inline-flex; align-items: center; gap: 6px; min-width: 0; color: inherit; font-size: 15px; line-height: 1.3; text-decoration: none; white-space: nowrap; } /* A rule, not a gap: the separator survives either item being empty. */ .lf-header .lf-header__contact-item + .lf-header__contact-item { margin-inline-start: 14px; padding-inline-start: 14px; border-inline-start: 1px solid rgba(255, 255, 255, 0.28); } .lf-header .lf-header__contact-item:hover, .lf-header .lf-header__contact-item:focus-visible { color: var(--lf-white); text-decoration: underline; } .lf-header .lf-header__contact-item .lf-icon { width: 14px; height: 14px; color: var(--lf-yellow); } .lf-header .lf-header__contact-item span { overflow: hidden; text-overflow: ellipsis; } /* * One message visible at a time, on desktop and mobile alike -- never a * marquee/ticker, never more than one shown together. Deliberately no * `position: absolute` here: an earlier version stacked the messages * absolutely inside `.lf-header__message-list`, which pulled every span out * of normal flow -- with nothing left in flow, the list's own content width * collapsed to nothing (a flex item's `auto` basis has nothing to measure * once its children stop contributing to layout), so the whole * `.lf-header__messages` box shrank to just the toggle button and the message * text effectively disappeared. Plain `display: none` / `.is-active` keeps * exactly one message in flow at a time, so the box always sizes itself * around real, present content -- no min-height guess, no hardcoded width. * header.js drives which one carries `.is-active`; with no JS at all the * server-rendered first message already has that class, so it simply stays * put -- same end state as `prefers-reduced-motion: reduce` below. */ .lf-header .lf-header__messages { display: flex; align-items: center; gap: 6px; min-width: 0; color: rgba(255, 255, 255, 0.92); font-size: inherit; line-height: 1.3; } .lf-header .lf-header__message-list { flex: 1 1 auto; min-width: 0; margin: 0; text-align: right; } .lf-header .lf-header__message { display: none; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .lf-header .lf-header__message.is-active { display: inline-block; max-width: 100%; } /* Discreet pause/resume control -- only rendered when there is more than one * message to rotate through. Icon-only by design (aria-label carries the * accessible name, swapped by header.js between the two labels topbar.php * prints on the button's own data attributes). */ .lf-header .lf-header__topbar-toggle { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: rgba(255, 255, 255, 0.8); cursor: pointer; transition: background-color 160ms ease, color 160ms ease; } .lf-header .lf-header__topbar-toggle:hover { background: rgba(255, 255, 255, 0.16); color: var(--lf-white); } .lf-header .lf-header__topbar-toggle:focus-visible { background: rgba(255, 255, 255, 0.16); color: var(--lf-white); outline: 2px solid var(--lf-white); outline-offset: 2px; } /* ------------------------------------------------------------------------- * 3. Main bar * ---------------------------------------------------------------------- */ .lf-header .lf-header__bar { display: flex; align-items: center; gap: 24px; min-height: var(--lf-header-bar-height); } .lf-header .lf-header__brand { display: flex; align-items: center; flex: none; min-width: 0; } .lf-header .lf-header__brand .custom-logo-link { display: block; line-height: 0; } .lf-header .lf-header__brand img, .lf-header .lf-header__brand .custom-logo { display: block; width: auto; max-width: 190px; height: auto; max-height: 48px; } .lf-header .lf-header__site-title { margin: 0; font-family: var(--lf-heading-font); font-size: 22px; line-height: 1.1; letter-spacing: -0.01em; } .lf-header .lf-header__site-title a { color: var(--lf-green); font-size: inherit; text-decoration: none; } /* -- Compact search field ------------------------------------------------ */ /* * Looks like a field, behaves like a button: it opens the real search dialog. * A second live text input in the header would give the page two competing * search fields, so this is a button with the label as its accessible name. */ .lf-header .lf-header__search-trigger { display: inline-flex; align-items: center; justify-content: space-between; gap: 10px; flex: 0 1 auto; width: clamp(200px, 24vw, 300px); min-width: 0; height: 42px; margin-inline-start: auto; padding: 0 6px 0 16px; border: 1px solid var(--lf-border); border-radius: 999px; background: var(--lf-white); color: var(--lf-text-soft); font-family: inherit; font-size: 14px; line-height: 1; text-align: start; cursor: pointer; transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease; } .lf-header .lf-header__search-trigger:hover { border-color: var(--lf-green); color: var(--lf-green); } .lf-header .lf-header__search-trigger-text { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .lf-header .lf-header__search-trigger-icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 32px; border-radius: 999px; background: var(--lf-green); color: var(--lf-white); } .lf-header .lf-header__search-trigger-icon .lf-icon { width: 17px; height: 17px; } /* -- Icon buttons -------------------------------------------------------- */ .lf-header .lf-header__actions { display: flex; align-items: center; gap: 2px; flex: none; } .lf-header__icon-button { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; padding: 0; border: 0; border-radius: var(--lf-radius-md); background: transparent; color: var(--lf-text); font-size: inherit; cursor: pointer; text-decoration: none; transition: background-color 160ms ease, color 160ms ease; } .lf-header__icon-button:hover { background: var(--lf-green-soft); color: var(--lf-green); } .lf-header__icon-button:focus-visible, .lf-header .lf-header__search-trigger:focus-visible, .lf-nav a:focus-visible, .lf-search a:focus-visible, .lf-cart-drawer a:focus-visible, .lf-cart-drawer button:focus-visible, .lf-search button:focus-visible, .lf-search input:focus-visible { outline: 2px solid var(--lf-green); outline-offset: 2px; } .lf-header .lf-header__burger { display: none; } /* Cart badge -- rendered even at zero so WooCommerce can replace it. */ .lf-header .lf-cart-count { position: absolute; top: 4px; right: 3px; display: none; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--lf-red); color: var(--lf-white); font-size: 11px; font-weight: 600; line-height: 18px; text-align: center; } .lf-header .lf-cart-count.is-filled { display: block; } /* ------------------------------------------------------------------------- * 4. Navigation * ---------------------------------------------------------------------- */ .lf-nav__head { display: none; } .lf-nav .lf-nav__list { display: flex; align-items: center; gap: clamp(4px, 1.1vw, 20px); margin: 0; padding: 0; list-style: none; } .lf-nav .lf-nav__list li { position: relative; } /* * Plain links, not pills. No background and no border-radius on the top level: * the item is the text, the whole bar reads as one line, and the header * breathes. Interaction is carried by colour and by the accent underline below. */ .lf-nav .lf-nav__list > li > a { position: relative; display: block; padding: 10px 2px; border-radius: 0; background: transparent; color: var(--lf-text); font-size: var(--lf-fs-nav); font-weight: 500; line-height: 1.2; text-decoration: none; white-space: nowrap; transition: color 160ms ease; } .lf-nav .lf-nav__list > li > a:hover, .lf-nav .lf-nav__list > li:focus-within > a { background: transparent; color: var(--lf-green); } /* * Active state: green text plus a short accent rule in the corporate purple. * Drawn with a pseudo-element so it never affects layout or line height. */ .lf-nav .lf-nav__list > li.current-menu-item > a, .lf-nav .lf-nav__list > li.current-menu-ancestor > a, .lf-nav .lf-nav__list > li.current-menu-parent > a, .lf-nav .lf-nav__list > li > a[aria-current="page"] { background: transparent; color: var(--lf-green); } .lf-nav .lf-nav__list > li.current-menu-item > a::after, .lf-nav .lf-nav__list > li.current-menu-ancestor > a::after, .lf-nav .lf-nav__list > li.current-menu-parent > a::after, .lf-nav .lf-nav__list > li > a[aria-current="page"]::after { content: ""; position: absolute; inset-inline: 2px; bottom: 2px; height: 2px; border-radius: 2px; background: var(--lf-purple); } .lf-nav .lf-nav__list > li.menu-item-has-children > a { padding-right: 20px; } .lf-nav .lf-submenu-toggle { position: absolute; top: 50%; right: 4px; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0; transform: translateY(-50%); border: 0; border-radius: 6px; background: transparent; color: inherit; cursor: pointer; } .lf-nav .lf-submenu-toggle .lf-icon { width: 14px; height: 14px; transition: transform 160ms ease; } .lf-nav .lf-submenu-toggle[aria-expanded="true"] .lf-icon { transform: rotate(180deg); } .lf-nav .sub-menu { position: absolute; top: calc(100% + 4px); left: -14px; z-index: 5; min-width: 232px; margin: 0; padding: 6px; list-style: none; border: 1px solid var(--lf-border); border-radius: 12px; background: var(--lf-white); box-shadow: 0 12px 32px rgba(23, 23, 44, 0.09); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity 160ms ease, transform 160ms ease, visibility 160ms; } .lf-nav .sub-menu .sub-menu { top: -8px; left: calc(100% + 6px); } .lf-nav .lf-nav__list li:hover > .sub-menu, .lf-nav .lf-nav__list li:focus-within > .sub-menu, .lf-nav .lf-nav__list li.is-open > .sub-menu { opacity: 1; visibility: visible; transform: none; } /* * Dropdown options: a vertical list, not a stack of pills. The rounded tint is * an interaction state only -- it never sits on a resting item. */ .lf-nav .sub-menu a { display: block; padding: 9px 12px; border-radius: 8px; background: transparent; color: var(--lf-text); font-size: 14px; font-weight: 400; line-height: 1.35; text-decoration: none; white-space: normal; transition: color 160ms ease, background-color 160ms ease; } .lf-nav .sub-menu a:hover, .lf-nav .sub-menu a:focus-visible { background: var(--lf-green-soft); color: var(--lf-green); } /* * First option highlighted as the section landing link ("Todo funerario" and * friends). Purely presentational: it is whatever item the site owner put * first in the WordPress menu, nothing is hardcoded. */ .lf-nav .sub-menu > li:first-child > a { color: var(--lf-green); font-weight: 600; } .lf-nav .sub-menu > li:first-child { margin-bottom: 4px; padding-bottom: 4px; border-bottom: 1px solid var(--lf-border); } .lf-nav__account { display: none; } /* ------------------------------------------------------------------------- * 5. Shared overlay primitives * ---------------------------------------------------------------------- */ /* Offset so an admin never gets a dialog printed under the WordPress bar. */ .lf-search, .lf-cart-drawer { position: fixed; top: var(--lf-header-offset); right: 0; bottom: 0; left: 0; z-index: var(--lf-z-overlay); } .lf-search[hidden], .lf-cart-drawer[hidden] { display: none; } .lf-search__backdrop, .lf-cart-drawer__backdrop { position: absolute; inset: 0; background: rgba(23, 23, 44, 0.45); opacity: 0; transition: opacity 220ms ease; } .lf-search.is-open .lf-search__backdrop, .lf-cart-drawer.is-open .lf-cart-drawer__backdrop { opacity: 1; } /* Buttons: scoped from both blocks so the Kit's button typography cannot win. */ .lf-search .lf-button, .lf-cart-drawer .lf-button { display: inline-flex; align-items: center; justify-content: center; min-height: var(--lf-control-height); padding: 12px 18px; border: 1px solid transparent; border-radius: var(--lf-radius-md); font-family: inherit; font-size: var(--lf-fs-button); font-weight: 600; line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer; transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease; } .lf-search .lf-button--primary, .lf-cart-drawer .lf-button--primary { background: var(--lf-green); color: var(--lf-white); } .lf-search .lf-button--primary:hover, .lf-cart-drawer .lf-button--primary:hover { background: var(--lf-green-dark); color: var(--lf-white); } .lf-search .lf-button--ghost, .lf-cart-drawer .lf-button--ghost { border-color: var(--lf-border); background: var(--lf-white); color: var(--lf-text); } .lf-search .lf-button--ghost:hover, .lf-cart-drawer .lf-button--ghost:hover { border-color: var(--lf-green); color: var(--lf-green); } /* ------------------------------------------------------------------------- * 6. Search overlay * ---------------------------------------------------------------------- */ .lf-search .lf-search__dialog { position: relative; width: min(720px, calc(100% - 32px)); max-height: min(78vh, 700px); margin: 10vh auto 0; display: flex; flex-direction: column; overflow: hidden; border-radius: var(--lf-radius-lg); background: var(--lf-white); box-shadow: 0 30px 80px rgba(23, 23, 44, 0.28); opacity: 0; transform: translateY(-10px); transition: opacity 220ms ease, transform 220ms ease; } .lf-search.is-open .lf-search__dialog { opacity: 1; transform: none; } .lf-search .lf-search__form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--lf-border); } .lf-search .lf-search__field { display: flex; align-items: center; gap: 10px; flex: 1 1 220px; min-width: 0; height: var(--lf-control-height); padding: 0 14px; border: 1px solid var(--lf-border); border-radius: var(--lf-radius-md); background: var(--lf-green-soft); color: var(--lf-text-soft); } .lf-search .lf-search__field:focus-within { border-color: var(--lf-green); background: var(--lf-white); } .lf-search .lf-search__field .lf-icon { width: 18px; height: 18px; } /* * 16px is deliberate: iOS Safari zooms the viewport when a focused field is * smaller, which would break the dialog layout. The long placeholder is * clipped by the input itself, so it can never overflow the dialog. */ .lf-search .lf-search__input { width: 100%; min-width: 0; height: 100%; padding: 0; border: 0; background: transparent; color: var(--lf-text); font-family: inherit; font-size: var(--lf-fs-search-field); line-height: 1.4; text-overflow: ellipsis; } .lf-search .lf-search__input:focus { outline: none; } .lf-search .lf-search__input::-webkit-search-cancel-button { display: none; } .lf-search .lf-search__submit { flex: none; height: var(--lf-control-height); padding: 0 20px; border: 0; border-radius: var(--lf-radius-md); background: var(--lf-green); color: var(--lf-white); font-family: inherit; font-size: var(--lf-fs-button); font-weight: 600; line-height: 1; cursor: pointer; } .lf-search .lf-search__submit:hover { background: var(--lf-green-dark); } /* Comfortable target, discreet glyph. */ .lf-search .lf-search__close { flex: none; width: 44px; height: 44px; color: var(--lf-text-soft); } .lf-search .lf-search__close .lf-icon { width: 18px; height: 18px; } .lf-search .lf-search__panel { flex: 1 1 auto; overflow-y: auto; padding: 6px 8px 16px; overscroll-behavior: contain; } .lf-search .lf-search__group-title { margin: 14px 12px 8px; color: var(--lf-text-soft); font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.09em; text-transform: uppercase; } .lf-search .lf-search__option { display: flex; align-items: center; gap: 14px; padding: 10px 12px; border-radius: 14px; color: var(--lf-text); font-size: var(--lf-drawer-item); text-decoration: none; cursor: pointer; } .lf-search .lf-search__option:hover, .lf-search .lf-search__option.is-active { background: var(--lf-green-soft); } .lf-search .lf-search__option-image { flex: none; width: 48px; height: 48px; border-radius: var(--lf-radius-sm); background: var(--lf-green-soft); object-fit: cover; } .lf-search .lf-search__option-body { flex: 1 1 auto; min-width: 0; } .lf-search .lf-search__option-title { display: block; font-size: 15px; font-weight: 600; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lf-search .lf-search__option-subtitle { display: block; margin-top: 2px; color: var(--lf-text-soft); font-size: 13px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lf-search .lf-search__option-meta { flex: none; color: var(--lf-green); font-size: 14px; font-weight: 600; white-space: nowrap; } .lf-search .lf-search__option-meta .lf-icon { width: 18px; height: 18px; color: var(--lf-text-soft); } /* Chips: suggested searches, not buttons. They wrap on their own. */ .lf-search .lf-search__suggestions { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0 12px; list-style: none; } .lf-search .lf-search__chip { display: inline-flex; align-items: center; padding: 8px 14px; border: 1px solid var(--lf-border); border-radius: 999px; color: var(--lf-text); font-size: var(--lf-fs-chip); font-weight: 500; line-height: 1.25; text-decoration: none; transition: border-color 160ms ease, color 160ms ease, background-color 160ms ease; } .lf-search .lf-search__chip:hover { border-color: var(--lf-green); background: var(--lf-green-soft); color: var(--lf-green); } .lf-search .lf-search__hint, .lf-search .lf-search__empty { margin: 18px 12px; color: var(--lf-text-soft); font-size: 14px; line-height: 1.5; } .lf-search .lf-search__all { display: block; margin: 10px 12px 0; padding: 12px; border-top: 1px solid var(--lf-border); color: var(--lf-green); font-size: 14px; font-weight: 600; text-align: center; text-decoration: none; } .lf-search .lf-search__all:hover { text-decoration: underline; } .lf-search.is-loading .lf-search__panel { opacity: 0.55; } /* ------------------------------------------------------------------------- * 7. Cart drawer * ---------------------------------------------------------------------- */ .lf-cart-drawer .lf-cart-drawer__dialog { position: absolute; top: 0; right: 0; display: flex; flex-direction: column; width: min(420px, 100%); height: 100%; background: var(--lf-white); box-shadow: -20px 0 60px rgba(23, 23, 44, 0.2); transform: translateX(100%); transition: transform 260ms ease; } .lf-cart-drawer.is-open .lf-cart-drawer__dialog { transform: none; } .lf-cart-drawer .lf-cart-drawer__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 12px 14px 20px; border-bottom: 1px solid var(--lf-border); } .lf-cart-drawer .lf-cart-drawer__title { margin: 0; font-family: var(--lf-heading-font); font-size: var(--lf-drawer-title); font-weight: 500; line-height: 1.2; letter-spacing: -0.01em; } .lf-cart-drawer .lf-cart-drawer__inner { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; } .lf-cart-drawer .lf-cart-drawer__items { flex: 1 1 auto; margin: 0; padding: 4px 20px; overflow-y: auto; overscroll-behavior: contain; list-style: none; } .lf-cart-drawer .lf-cart-line { display: flex; align-items: flex-start; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--lf-border); } .lf-cart-drawer .lf-cart-line:last-child { border-bottom: 0; } .lf-cart-drawer .lf-cart-line.is-busy { opacity: 0.5; pointer-events: none; } .lf-cart-drawer .lf-cart-line__media { flex: none; width: 60px; height: 60px; overflow: hidden; border-radius: var(--lf-radius-sm); background: var(--lf-green-soft); } .lf-cart-drawer .lf-cart-line__media img { width: 100%; height: 100%; object-fit: cover; } .lf-cart-drawer .lf-cart-line__body { flex: 1 1 auto; min-width: 0; } /* Product name: a minicart line, never a heading. */ .lf-cart-drawer .lf-cart-line__name { margin: 0; font-family: var(--lf-body-font); font-size: var(--lf-drawer-item); font-weight: 600; line-height: 1.35; letter-spacing: 0; overflow-wrap: anywhere; } .lf-cart-drawer .lf-cart-line__name a { color: inherit; font-size: inherit; text-decoration: none; } .lf-cart-drawer .lf-cart-line__name a:hover { color: var(--lf-green); } .lf-cart-drawer .lf-cart-line__meta { margin-top: 3px; color: var(--lf-text-soft); font-size: 13px; line-height: 1.4; } .lf-cart-drawer .lf-cart-line__meta p { margin: 0; font-size: inherit; line-height: inherit; } .lf-cart-drawer .lf-cart-line__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 5px; margin: 5px 0 0; color: var(--lf-text); font-size: var(--lf-drawer-price); line-height: 1.4; } .lf-cart-drawer .lf-cart-line__price .amount, .lf-cart-drawer .lf-cart-line__price bdi { font-size: inherit; font-weight: 600; } .lf-cart-drawer .lf-cart-line__qty { font-weight: 600; } .lf-cart-drawer .lf-cart-line__remove { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: var(--lf-radius-sm); background: transparent; color: var(--lf-text-soft); font-size: inherit; cursor: pointer; transition: color 160ms ease, background-color 160ms ease; } .lf-cart-drawer .lf-cart-line__remove:hover { background: rgba(239, 45, 42, 0.08); color: var(--lf-red); } .lf-cart-drawer .lf-cart-line__remove .lf-icon { width: 17px; height: 17px; } .lf-cart-drawer .lf-cart-drawer__foot { flex: none; padding: 16px 20px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--lf-border); background: var(--lf-green-soft); } .lf-cart-drawer .lf-cart-drawer__subtotal { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0; font-size: 15px; line-height: 1.3; } .lf-cart-drawer .lf-cart-drawer__subtotal strong { font-size: var(--lf-drawer-total); font-weight: 700; } .lf-cart-drawer .lf-cart-drawer__note { margin: 4px 0 12px; color: var(--lf-text-soft); font-size: 12.5px; line-height: 1.4; } .lf-cart-drawer .lf-cart-drawer__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .lf-cart-drawer .lf-cart-drawer__empty { display: flex; flex: 1 1 auto; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 48px 28px; text-align: center; } .lf-cart-drawer .lf-cart-drawer__empty-title { margin: 0; font-family: var(--lf-heading-font); font-size: var(--lf-drawer-title); font-weight: 500; line-height: 1.2; } .lf-cart-drawer .lf-cart-drawer__empty-text { margin: 0 0 12px; color: var(--lf-text-soft); font-size: 14px; line-height: 1.5; } /* ------------------------------------------------------------------------- * 8. Responsive * * Checked at 1440 / 1024 / 768 / 430 / 390 / 360. Between the breakpoints the * fluid tokens above do the work. * ---------------------------------------------------------------------- */ /* * Laptop (1200-1439): the desktop nav is still on, so tighten the gaps and the * search field rather than letting the menu items collide. */ @media (max-width: 1439px) { .lf-header .lf-header__bar { gap: 16px; } .lf-nav .lf-nav__list { gap: clamp(2px, 0.6vw, 12px); } .lf-nav .lf-nav__list > li > a { font-size: 14px; } .lf-header .lf-header__search-trigger { width: clamp(160px, 16vw, 230px); padding-inline-start: 13px; } } /* * Tablet and below. The switch happens at 1199 rather than 1023: between those * widths the logo, seven menu items, the search field and three icons no longer * coexist without squeezing the menu, and a correct hamburger beats a broken * desktop nav. */ @media (max-width: 1199px) { :root { --lf-header-bar-height: 62px; --lf-control-height: 46px; } /* * One single row: [burger] logo | search | cart. No wrapping and no second * row. DOM order already matches the visual order, so no `order` property * is needed. */ .lf-header .lf-header__bar { flex-wrap: nowrap; gap: 6px; } .lf-header .lf-header__burger { display: inline-flex; flex: 0 0 auto; margin-inline-start: -8px; } .lf-header .lf-header__brand { flex: 0 0 auto; margin-inline-end: auto; } .lf-header .lf-header__actions { flex: 0 0 auto; } /* * The compact field collapses into the same icon button as the cart. Same * element, same handler, same dialog -- there is no second search system, * and no input is added below the header. */ .lf-header .lf-header__search-trigger { flex: 0 0 auto; justify-content: center; width: 42px; height: 42px; padding: 0; border-color: transparent; background: transparent; margin-inline: 0; } /* * Visually hidden, not `display: none`: the label is the button's * accessible name and must survive. */ .lf-header .lf-header__search-trigger-text { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .lf-header .lf-header__search-trigger-icon { width: auto; height: auto; background: transparent; color: var(--lf-text); } .lf-header .lf-header__search-trigger:hover .lf-header__search-trigger-icon { color: var(--lf-green); } .lf-header .lf-header__search-trigger-icon .lf-icon { width: 20px; height: 20px; } /* Phone on the left, messages on the right. */ .lf-header .lf-header__topbar-inner { justify-content: space-between; gap: 12px; } .lf-header .lf-header__contact-item--mail { display: none; } /* With no second item there is nothing to separate. */ .lf-header .lf-header__contact-item + .lf-header__contact-item { margin-inline-start: 0; padding-inline-start: 0; border-inline-start: 0; } /* The same