* { margin: 0; padding: 0; box-sizing: border-box; } :root { --primary-maroon: #800000; --primary-gold: #FFD700; --accent-gold: #FFDF00; --dark-maroon: #5C0000; --light-gold: #FFF8DC; --white: #FFFFFF; --text-dark: #2C2C2C; --text-light: #666666; --border-color: #E5E5E5; --success-green: #25D366; --light-bg: #FFF9F0; --shadow: rgba(128, 0, 0, 0.15); } /* * Keep a stray wide element from making the page scroll sideways — * without taking `position: sticky` down with it. * * `overflow-x: hidden` makes the element a scroll container, and a * sticky child sticks to its nearest scroll container rather than to * the window. On that quietly cancels every sticky on the site: * the category rail scrolled away with the page instead of staying put * beside it, and nothing about the rule said it would do that. * * `clip` cuts the overflow off without becoming a scroll container, so * sticky keeps working. The old value stays first as the fallback for * browsers that do not know `clip` — they get the sideways guard and * lose the sticky, which is where everybody was already. */ html, body { overflow-x: hidden; overflow-x: clip; } body { font-family: 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif; line-height: 1.6; color: var(--text-dark); } /* Top Info Bar */ .top-bar { background: linear-gradient(135deg, var(--primary-maroon), var(--dark-maroon)); color: var(--white); padding: 10px 0; font-size: 14px; } .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; } .top-bar .container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .top-bar-left { display: flex; gap: 25px; align-items: center; } .top-bar-item { display: flex; align-items: center; gap: 8px; } .top-bar-item i { font-size: 14px; } .top-bar-right { display: flex; gap: 20px; align-items: center; } .social-links { display: flex; gap: 12px; } .social-links a { color: var(--white); font-size: 16px; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: rgba(255,255,255,0.1); border-radius: 50%; text-decoration: none !important; } .social-links a:hover { background: var(--accent-gold); color: var(--primary-maroon); transform: translateY(-2px); } .language-switcher { display: flex; gap: 4px; background: rgba(255,255,255,0.15); padding: 4px 8px; border-radius: 20px; } .language-switcher a, .language-switcher button { background: transparent; border: none; color: var(--white); cursor: pointer; padding: 4px 10px; border-radius: 15px; font-size: 12px; transition: all 0.3s ease; font-weight: 600; text-decoration: none; } .language-switcher a:hover, .language-switcher a.active, .language-switcher button:hover, .language-switcher button.active { background: var(--accent-gold); color: var(--primary-maroon); } /* Main Header */ .header { background: var(--white); box-shadow: 0 2px 15px var(--shadow); position: sticky; top: 0; z-index: 1000; transition: all 0.3s ease; } .header-main { padding: 15px 0; } .header-main .container { display: flex; justify-content: space-between; align-items: center; gap: 30px; } .logo { display: flex; align-items: center; gap: 15px; text-decoration: none; flex-shrink: 0; /* Sized by its contents. It used to be pinned to 65px - the width of the image alone - so the wordmark beside it overflowed the box and the search bar was drawn over the top of it. */ min-width: 0; } .logo img { width: 65px; height: auto; flex: none; } .logo-text { min-width: 0; } .logo-icon { width: 55px; height: 55px; background: linear-gradient(135deg, var(--primary-maroon), var(--dark-maroon)); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 30px; color: var(--accent-gold); box-shadow: 0 4px 15px rgba(128, 0, 0, 0.3); position: relative; } .logo-icon::after { content: ''; position: absolute; inset: 2px; border: 2px solid var(--accent-gold); border-radius: 10px; opacity: 0.5; } .logo-text h1, .logo-name { font-size: 26px; font-weight: 700; background: linear-gradient(135deg, var(--primary-maroon), var(--dark-maroon)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 3px; } .logo-text p { font-size: 12px; color: var(--text-light); font-style: italic; } /* Search Bar */ .search-bar { flex: 1 1 auto; min-width: 0; max-width: 500px; } .search-form { position: relative; display: flex; } .search-input { width: 100%; padding: 12px 50px 12px 20px; border: 2px solid var(--border-color); border-radius: 30px; font-size: 14px; outline: none; transition: all 0.3s ease; } .search-input:focus { border-color: var(--primary-maroon); box-shadow: 0 0 0 3px rgba(128, 0, 0, 0.1); } .search-button { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); background: linear-gradient(135deg, var(--primary-maroon), var(--dark-maroon)); color: var(--accent-gold); border: none; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 16px; transition: all 0.3s ease; } .search-button:hover { transform: translateY(-50%) scale(1.05); } /* Header CTAs */ .header-cta { display: flex; gap: 12px; align-items: center; flex-shrink: 0; } .cta-button { display: inline-flex; align-items: center; gap: 8px; padding: 11px 22px; border-radius: 25px; text-decoration: none; font-weight: 600; transition: all 0.3s ease; border: none; cursor: pointer; font-size: 14px; white-space: nowrap; } .cta-button i { font-size: 16px; } .cta-call { background: linear-gradient(135deg, var(--primary-maroon), var(--dark-maroon)); color: var(--accent-gold); box-shadow: 0 4px 15px rgba(128, 0, 0, 0.3); } .cta-call:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(128, 0, 0, 0.4); } .cta-whatsapp { background: var(--success-green); color: var(--white); box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3); } .cta-whatsapp:hover { background: #20BA5A; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4); } /* Navigation */ .navigation { background: var(--light-bg); border-top: 1px solid var(--border-color); } .nav-container { display: flex; justify-content: center; align-items: center; } .nav-menu { display: flex; list-style: none; gap: 5px; } .nav-menu li a { display: block; padding: 15px 25px; color: var(--text-dark); text-decoration: none; font-weight: 600; font-size: 15px; transition: all 0.3s ease; position: relative; } .nav-menu li a::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 0; height: 3px; background: linear-gradient(to right, var(--primary-maroon), var(--accent-gold)); transition: all 0.3s ease; } .nav-menu li a:hover, .nav-menu li a.active { color: var(--primary-maroon); } .nav-menu li a:hover::after, .nav-menu li a.active::after { width: 80%; } .mobile-menu-toggle { display: none; background: none; border: none; font-size: 28px; cursor: pointer; color: var(--primary-maroon); } /* Footer */ .footer { background: linear-gradient(135deg, var(--primary-maroon), var(--dark-maroon)); color: var(--white); padding: 60px 0 20px; } .footer-content { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 40px; margin-bottom: 40px; } .footer-section h3 { font-size: 20px; margin-bottom: 20px; color: var(--accent-gold); } .footer-section p { color: rgba(255,255,255,0.8); line-height: 1.8; margin-bottom: 15px; } .footer-social { display: flex; gap: 12px; margin-top: 20px; } .footer-social a { width: 40px; height: 40px; background: rgba(255,255,255,0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--white); font-size: 18px; transition: all 0.3s ease; text-decoration: none; } .footer-social a:hover { background: var(--accent-gold); color: var(--primary-maroon); transform: translateY(-3px); } .footer-links { list-style: none; } .footer-links li { margin-bottom: 12px; } .footer-links a { color: rgba(255,255,255,0.8); text-decoration: none; transition: all 0.3s ease; display: inline-flex; align-items: center; gap: 8px; } .footer-links a:hover { color: var(--accent-gold); transform: translateX(5px); } .footer-links a i { font-size: 12px; } .footer-contact-item { display: flex; align-items: center; gap: 12px; margin-bottom: 15px; color: rgba(255,255,255,0.8); } .footer-contact-icon { width: 40px; height: 40px; background: var(--accent-gold); border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--primary-maroon); font-size: 18px; } .footer-bottom { border-top: 1px solid rgba(255,255,255,0.2); padding-top: 30px; text-align: center; color: rgba(255,255,255,0.7); font-size: 14px; } .footer-bottom a { color: var(--accent-gold); text-decoration: none; } /* Floating Actions */ .floating-actions { position: fixed; bottom: 30px; right: 30px; display: flex; flex-direction: column; gap: 15px; z-index: 999; } .floating-btn { width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; color: var(--white); text-decoration: none; box-shadow: 0 8px 25px rgba(0,0,0,0.3); transition: all 0.3s ease; } .floating-btn:hover { transform: scale(1.15) rotate(5deg); box-shadow: 0 12px 35px rgba(0,0,0,0.4); } .floating-whatsapp { background: var(--success-green); } .floating-call { background: linear-gradient(135deg, var(--primary-maroon), var(--dark-maroon)); } /* Responsive Design */ @media (max-width: 992px) { .steps-grid { grid-template-columns: repeat(2, 1fr); } .step-card::after { display: none; } .hero-carousel { height: 500px; } .hero-text h2 { font-size: 42px; } .carousel-arrow { width: 45px; height: 45px; } } @media (max-width: 768px) { .top-bar { display: none; } .header-main .container { flex-wrap: wrap; } .search-bar { order: 3; max-width: 100%; width: 100%; } .header-cta { display: none; } .navigation { display: none; } .mobile-menu-toggle { display: block; } .hero-carousel { height: 450px; } .hero-text h2 { font-size: 32px; } .hero-text p { font-size: 16px; } .hero-stats { flex-wrap: wrap; gap: 20px; } .section-title { font-size: 32px; } .steps-grid, .services-grid, .products-grid, .testimonials-grid, .team-grid { grid-template-columns: 1fr; } .floating-actions { bottom: 20px; right: 20px; } .floating-btn { width: 50px; height: 50px; font-size: 20px; } .carousel-arrow { width: 40px; height: 40px; font-size: 20px; } .carousel-prev { left: 15px; } .carousel-next { right: 15px; } } /* Mini-cart - A-05. Only rendered when the basket has something in it. */ .header-cart { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background: var(--light-bg); color: var(--primary-maroon); font-size: 17px; text-decoration: none; flex: none; } .header-cart:hover { background: var(--primary-maroon); color: var(--accent-gold); } .header-cart-count { position: absolute; top: -3px; right: -3px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px; background: var(--primary-maroon); color: var(--accent-gold); font-size: 11px; font-weight: 700; line-height: 19px; text-align: center; font-variant-numeric: tabular-nums; } /* Add-to-cart on the detail page: a quantity box beside the button. */ .product-add-form { display: flex; gap: 10px; align-items: stretch; } .product-add-form input[type="number"] { width: 72px; padding: 0 10px; border: 1px solid #dfdfda; border-radius: 8px; font: inherit; text-align: center; } .product-btn-plain { background: var(--light-bg); color: var(--text-light); cursor: default; } /* ---- the checkout address popup ---- * * In base.css beside the drawer's rules, and for the same reason: the popup is * in the layout, so it can open on any page and has no stylesheet of its own * to rely on. */ .checkout-drawer { position: fixed; inset: 0; z-index: 1200; } /* * Without this the panel is never hidden at all. * * `display: flex` above beats the browser's own `[hidden] { display: none }`, * so a closed dialog stays a full-screen fixed layer with a transparent * backdrop over the whole site - invisible, and swallowing every click on * every page. The drawer beside it carries the same rule for the same reason. */ .checkout-drawer[hidden] { display: none !important; } .checkout-drawer-backdrop { position: absolute; inset: 0; background: rgba(20, 12, 10, 0.55); opacity: 0; transition: opacity 0.2s ease; } .checkout-drawer.is-open .checkout-drawer-backdrop { opacity: 1; } /* * A drawer from the right, the same shape and motion as the cart's. * * It follows the cart drawer in the flow and often straight after it, so * arriving from a different direction and in a different shape reads as a * different part of the site rather than the next step of the same errand. * Wider than the cart, because an address form needs two columns. */ .checkout-drawer-panel { position: absolute; top: 0; right: 0; display: flex; flex-direction: column; width: min(460px, 100%); height: 100%; background: var(--white); box-shadow: -8px 0 30px rgba(0, 0, 0, 0.18); transform: translateX(100%); transition: transform 0.22s ease; } .checkout-drawer.is-open .checkout-drawer-panel { transform: translateX(0); } /* * The close button floats over the header bar rather than sitting in a bar of * its own: the bar is the step's own title, which is sticky below, and two * stacked bars in a drawer this narrow is most of the screen gone before * anything is asked. */ .checkout-drawer-head { position: absolute; top: 0; right: 0; z-index: 2; padding: 13px 14px; } .checkout-drawer-x { border: none; background: none; font-size: 26px; line-height: 1; color: var(--text-light); cursor: pointer; padding: 0 4px; } .checkout-drawer-x:hover { color: var(--text-dark); } /* The panel scrolls, the page behind does not. */ .checkout-drawer-body { flex: 1; overflow-y: auto; padding: 0 22px 24px; } /* Each step brings its own heading; the frame has none to repeat. */ .checkout-panel-title { margin: 0 0 18px; font-size: 18px; color: var(--primary-maroon); } /* * In the drawer that heading is the header bar, so it stays put while the form * scrolls under it - and it stays the step's own words, which is why it is not * copied into the frame. */ .checkout-drawer-body .checkout-panel-title { position: sticky; top: 0; z-index: 1; margin: 0 -22px 18px; padding: 16px 52px 14px 22px; background: var(--white); border-bottom: 1px solid #e4e4e0; font-size: 17px; } /* The step's own sub-headings sit below it, quieter. */ .checkout-drawer-body .checkout-card > h2, .checkout-drawer-body .checkout-card-head h2 { margin: 0 0 12px; font-size: 15px; color: var(--text-dark); } .checkout-drawer-loading { padding: 50px 0; text-align: center; color: var(--text-light); font-size: 22px; } body.checkout-drawer-locked { overflow: hidden; } @media (prefers-reduced-motion: reduce) { .checkout-drawer-backdrop, .checkout-drawer-panel { transition: none; } } /* ---- A-07 to A-10: the address form, wherever it is shown ---- * * Moved out of checkout.css because it is shown in three places and only two * of them load that file: the checkout page, the account page, and the popup * that opens over any page in the site. The popup got the form with no styling * at all - a column of bare browser inputs - which is the third time a block * has been styled in a sheet the page using it never loads. base.css is loaded * everywhere, so this is the last time for this one. */ /* ---- A-07 to A-10: the details step, the account page, the address book ---- */ .checkout-note { border-radius: 8px; padding: 12px 15px; margin-bottom: 18px; font-size: 14px; } .checkout-note.is-ok { background: #e8f3ec; color: #2e6b4f; } .checkout-note.is-error { background: #f8e6e3; color: #a81e12; } .checkout-note ul { margin: 0; padding-left: 20px; } .checkout-who { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--light-bg); border-radius: 8px; padding: 11px 15px; margin-bottom: 18px; font-size: 14px; } .checkout-who button { border: 0; background: none; color: var(--primary-maroon); font: inherit; cursor: pointer; text-decoration: underline; } .checkout-hint { color: var(--text-light); font-size: 13.5px; margin: 0 0 14px; } /* Sits below the guest form, not above it: the shopper who is already typing should not be interrupted by two other ways to do the same thing. */ .checkout-signin-row { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 22px; padding-top: 20px; border-top: 1px solid #f0eee9; } .checkout-alt { display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border: 1px solid var(--primary-maroon); border-radius: 8px; color: var(--primary-maroon); background: var(--white); font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer; } .checkout-alt:hover { background: var(--primary-maroon); color: var(--accent-gold); } .checkout-signin-lead { margin: 26px 0 0; text-align: center; font-size: 14px; color: var(--text-light); } .checkout-guest-head { font-size: 15px; color: var(--text-dark); margin: 0 0 16px; } /* The address form. One grid, used by checkout and the account page. */ /* Six columns rather than two. With two, any field that stands alone on its row - the email, the PIN code - left a visible hole beside it. Six lets each field claim the width it needs: half for a name, a third for a PIN code. */ .address-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 15px; } .address-grid > div { grid-column: span 3; } .address-grid .full { grid-column: 1 / -1; } .address-grid .half { grid-column: span 3; } .address-grid .third { grid-column: span 2; } .address-grid label { display: block; font-size: 13px; font-weight: 600; color: var(--text-light); margin-bottom: 5px; } .address-grid input { width: 100%; padding: 10px 12px; border: 1px solid #dfdfda; border-radius: 8px; font: inherit; font-size: 14.5px; background: var(--white); } .address-grid input:focus { outline: 2px solid var(--primary-maroon); outline-offset: -1px; } .address-grid small { display: block; margin-top: 4px; font-size: 12px; color: var(--text-light); } .checkout-check { display: flex; align-items: center; gap: 9px; margin-top: 15px; font-size: 14px; color: var(--text-dark); cursor: pointer; } .checkout-check input { accent-color: var(--primary-maroon); } .checkout-submit { /* `display: inline-flex` with `margin: auto` does not centre: auto margins only resolve on a block-level box. `flex` plus `fit-content` gives a block box that is still only as wide as its label. */ display: flex; width: fit-content; align-items: center; gap: 9px; margin: 22px auto 0; padding: 13px 26px; border: 0; border-radius: 8px; background: var(--primary-maroon); color: var(--accent-gold); font-size: 15px; font-weight: 700; cursor: pointer; } .checkout-submit:hover { background: var(--dark-maroon); } /* Choosing between saved addresses. */ .address-choice { display: flex; gap: 12px; align-items: flex-start; border: 1px solid #e4e4e0; border-radius: 10px; padding: 14px 16px; margin-bottom: 10px; cursor: pointer; font-size: 14px; line-height: 1.5; } .address-choice:has(input:checked) { border-color: var(--primary-maroon); background: #fdf7f7; } .address-choice input { accent-color: var(--primary-maroon); margin-top: 3px; flex: none; } .address-choice-body { min-width: 0; } .address-choice-line { display: block; color: var(--text-light); font-size: 13.5px; } .address-tag { display: inline-block; margin-left: 7px; padding: 1px 8px; border-radius: 10px; background: var(--light-bg); color: var(--text-light); font-size: 11.5px; font-style: normal; font-weight: 600; } .address-tag.is-default { background: var(--primary-maroon); color: var(--accent-gold); } .address-new { margin-top: 18px; } .address-new summary { cursor: pointer; font-size: 14.5px; font-weight: 600; color: var(--primary-maroon); padding: 10px 0; } .address-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; border: 1px solid #e4e4e0; border-radius: 10px; padding: 14px 16px; margin-bottom: 10px; font-size: 14px; } .address-row .checkout-hint { margin: 3px 0 0; } .address-row-actions { display: flex; gap: 10px; align-items: center; } .address-row-actions button { border: 0; background: none; color: var(--primary-maroon); font: inherit; font-size: 13px; cursor: pointer; text-decoration: underline; padding: 0; } .address-row-actions button.is-danger { color: #a81e12; } .account-card { max-width: 560px; margin: 0 auto; background: var(--white); border: 1px solid #e4e4e0; border-radius: 12px; padding: 28px 30px; } .account-card.is-wide { max-width: 780px; } /* The two sign-in cards are narrower than the account pages. * * They hold one short column of fields and nothing else. At the width the * account pages want, a card with two inputs in it reads as a wide empty box * with a form adrift in the middle of it — the fields stretch to a length no * email address needs, and the eye has to travel the whole width to find the * next one. About 420px is as wide as a single text field stays comfortable. */ .account-card.is-auth { max-width: 420px; padding: 26px 24px; } /* One column, at every width. The half-width pairs on the sign-up form are sized for six columns of page; inside this card they would leave every label wrapping onto a second line. */ .account-card.is-auth .address-grid { grid-template-columns: 1fr; } .account-card.is-auth .address-grid > * { grid-column: 1 / -1; } .account-card h2 { font-size: 17px; color: var(--primary-maroon); margin: 0 0 14px; padding-bottom: 10px; border-bottom: 1px solid #f0eee9; } .account-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; margin-bottom: 22px; } .account-head h2 { border: 0; padding: 0; margin-bottom: 4px; } .account-foot { margin: 14px 0 0; text-align: center; font-size: 13.5px; color: var(--text-light); } .account-foot a { color: var(--primary-maroon); } @media (max-width: 620px) { .address-grid { grid-template-columns: 1fr; } .address-grid > div, .address-grid .full, .address-grid .half, .address-grid .third { grid-column: 1 / -1; } .account-card { padding: 22px 18px; } } /* ---- the address form as it appears inside the popup ---- * * The same markup as the page, tightened for a 640px panel: the fields stack * into two columns instead of six, the chooser reads as a list of places, and * the button sits on the floor of the panel where a thumb finds it. */ .checkout-drawer-body .address-grid { gap: 12px 14px; } /* Six columns is a page's worth of width. In here, halves and thirds are both simply half, and everything else spans. */ .checkout-drawer-body .address-grid > div, .checkout-drawer-body .address-grid .full { grid-column: 1 / -1; } .checkout-drawer-body .address-grid .half, .checkout-drawer-body .address-grid .third { grid-column: 1 / -1; } .checkout-drawer-body .address-grid label { font-size: 12px; letter-spacing: 0.01em; } .checkout-drawer-body .address-grid input { padding: 11px 13px; font-size: 14.5px; } /* The "Where should we deliver?" / "Add a new address" line. A disclosure triangle is fine on a page; in a panel it reads as a heading. */ .checkout-drawer-body .address-new { margin: 0; } /* * Air between "Deliver here" and "Add a new address". * * Only when a form comes first: the two were touching, which made the button * and the card read as one control. With no saved address there is no button * above it and the form is the whole panel, so it stays tight under the title. */ .checkout-drawer-body form + .address-new { margin-top: 18px; } .checkout-drawer-body .address-new summary { padding: 0 0 14px; font-size: 15px; color: var(--text-dark); } .checkout-drawer-body .address-new summary::marker, .checkout-drawer-body .address-new summary::-webkit-details-marker { content: ''; display: none; } /* Nothing to choose from yet: the form is the whole panel, so its heading is the panel's heading and does not need repeating. */ .checkout-drawer-body .address-new[open] > summary { display: none; } .checkout-drawer-body .address-new:not([open]) > summary { display: flex; align-items: center; gap: 9px; padding: 13px 15px; border: 1px dashed #d9d3ca; border-radius: 10px; color: var(--primary-maroon); font-weight: 600; } .checkout-drawer-body .address-new:not([open]) > summary::before { content: '+'; font-size: 17px; line-height: 1; } .checkout-drawer-body .address-new:not([open]) > summary:hover { border-color: var(--primary-maroon); background: #fdf7f7; } .checkout-drawer-body .address-choice { padding: 13px 15px; margin-bottom: 10px; } /* The button ends the panel, so it gets the width and a little air above it. */ .checkout-drawer-body .checkout-submit { width: 100%; justify-content: center; margin-top: 18px; } .checkout-drawer-body .checkout-note { margin-bottom: 16px; } .checkout-drawer-body .checkout-who { margin: 0 0 16px; padding: 11px 14px; border-radius: 10px; background: var(--light-bg); font-size: 13.5px; } /* The two ways in, at the foot of the panel and clearly secondary to the form above them. */ .checkout-drawer-body .checkout-signin-lead { margin: 22px 0 10px; padding-top: 18px; border-top: 1px solid #eeece7; font-size: 13px; color: var(--text-light); text-align: center; } .checkout-drawer-body .checkout-signin-row { gap: 10px; } .checkout-drawer-body .checkout-alt { flex: 1; justify-content: center; font-size: 13.5px; padding: 11px 12px; } /* ---- the delivery step inside the popup ---- */ .checkout-drawer-body .checkout-card { padding: 0; border: 0; background: none; } .checkout-drawer-body .checkout-card + .checkout-card { margin-top: 20px; padding-top: 18px; } .checkout-drawer-body .checkout-address { font-size: 13.5px; line-height: 1.65; } .checkout-drawer-body .checkout-methods { margin-bottom: 0; } .checkout-drawer-body .checkout-method { padding: 12px 14px; } .checkout-drawer-body .checkout-unserviceable-actions .checkout-btn { flex: 1; justify-content: center; } .checkout-drawer-body .checkout-pending-note { margin-top: 14px; } /* ---- A-11: choosing delivery, wherever it is shown ---- * * Here rather than in checkout.css because the popup carries this step over * any page in the site, and those pages load base.css and nothing else. The * fourth block to make this move; the check in AssetsTest now lists it, so it * should be the last. */ /* ---- A-11: choosing delivery ---- */ /* * A section within the main panel, not a card of its own. * * .checkout-main is already the white card with the border; the delivery step * puts two sections inside it - where it is going, and how - so these are * separated by a rule rather than each drawing its own box, which would have * been a card inside a card. */ .checkout-card + .checkout-card { margin-top: 24px; padding-top: 22px; border-top: 1px solid #f0eee9; } .checkout-card > h2 { margin-top: 0; } .checkout-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; } .checkout-card-head h2 { margin: 0; } .checkout-card-head a { font-size: 13px; color: var(--primary-maroon); } .checkout-address { font-size: 14px; line-height: 1.7; color: var(--text-dark); margin: 0; } .checkout-address-phone { color: var(--text-light); font-size: 13px; } .checkout-servicing { display: inline-flex; align-items: center; gap: 7px; background: #e8f3ec; color: #2e6b4f; border-radius: 20px; padding: 6px 14px; font-size: 13px; font-weight: 600; margin: 0 0 16px; } .checkout-methods { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 10px; } .checkout-method { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1.5px solid #e2ded6; border-radius: 10px; cursor: pointer; background: var(--white); } .checkout-method:hover { border-color: #c9c2b9; } .checkout-method:has(input:checked) { border-color: #2e6b4f; background: #f2f9f5; } .checkout-method:has(input:focus-visible) { outline: 2px solid var(--primary-maroon); outline-offset: 2px; } .checkout-method input { margin: 0; accent-color: #2e6b4f; } .checkout-method-body { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; } .checkout-method-name { font-size: 14.5px; font-weight: 600; color: var(--text-dark); } .checkout-method-eta { font-size: 12.5px; color: var(--text-light); display: inline-flex; align-items: center; gap: 5px; } .checkout-method-note { font-size: 12.5px; color: var(--text-light); } .checkout-method-price { font-size: 15px; font-weight: 700; color: var(--text-dark); white-space: nowrap; } /* C-03: the saving on the online option, and the total it replaces. */ .checkout-method-save { display: block; margin-top: 3px; color: #2e6b4f; font-weight: 700; } .checkout-method-was { display: block; color: var(--text-light); font-weight: 400; font-size: 12px; text-decoration: line-through; } .is-free { color: #2e6b4f; font-weight: 700; } .checkout-unserviceable { background: #f8e6e3; color: #a81e12; border-radius: 10px; padding: 16px 18px; font-size: 14px; line-height: 1.6; } .checkout-unserviceable p { margin: 0 0 12px; } .checkout-unserviceable-actions { display: flex; flex-wrap: wrap; gap: 10px; } .checkout-btn.is-secondary { background: var(--white); color: var(--text-dark); border: 1px solid #d9d3ca; } .checkout-btn.is-whatsapp { background: #25d366; color: var(--white); border: none; } .checkout-pending-note { margin: 16px 0 0; padding: 12px 15px; background: #fff6e0; color: #7a5a12; border-radius: 9px; font-size: 13.5px; line-height: 1.6; } /* ---- the order handoff, until A-12 exists ---- */ .checkout-handoff { margin-top: 20px; padding-top: 18px; border-top: 1px solid #e4e4e0; } .checkout-handoff-lines { display: grid; gap: 7px; margin-bottom: 16px; } .checkout-handoff-lines > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--text-dark); } .checkout-handoff-lines small { display: block; font-size: 11.5px; font-weight: 400; color: var(--text-light); } .checkout-handoff-lines .is-total { padding-top: 9px; border-top: 1px solid #eeece7; font-weight: 600; } .checkout-handoff-lines .is-total strong { font-size: 18px; color: var(--primary-maroon); font-variant-numeric: tabular-nums; } .checkout-handoff-send { display: flex; align-items: center; justify-content: center; gap: 9px; padding: 14px; border-radius: 9px; background: #25d366; color: var(--white); font-size: 15px; font-weight: 700; text-decoration: none; } .checkout-handoff-send:hover { background: #1fb855; color: var(--white); } .checkout-handoff-note { margin: 12px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--text-light); text-align: center; } /* Once a method is chosen, changing it is not the way forward. */ .checkout-submit.is-quiet { background: var(--white); color: var(--text-dark); border: 1px solid #d9d3ca; } .checkout-submit.is-quiet:hover { background: var(--light-bg); color: var(--text-dark); } /* ---- A-12: paying, and the order once it exists ---- */ .checkout-lines { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 9px; } .checkout-lines li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: baseline; gap: 12px; font-size: 14px; color: var(--text-dark); } .checkout-lines small { display: block; font-size: 11.5px; color: var(--text-light); } .checkout-lines-qty { color: var(--text-light); font-size: 13px; } /* Shown so the shopper knows it is coming, not offered. */ .checkout-method.is-soon { display: flex; align-items: center; gap: 12px; cursor: default; opacity: 0.6; border-style: dashed; } .checkout-method.is-soon:hover { border-color: #e2ded6; } .checkout-placed { padding: 34px 0 60px; } .checkout-placed-card { max-width: 620px; margin: 0 auto; padding: 30px 28px; border: 1px solid #eeece7; border-radius: 14px; background: var(--white); text-align: center; } .checkout-placed-card h1 { font-size: 22px; margin: 16px 0 10px; color: var(--text-dark); } .checkout-placed-number { display: inline-flex; align-items: center; gap: 9px; margin: 0 0 14px; padding: 9px 16px; border-radius: 20px; background: var(--light-bg); font-size: 13.5px; color: var(--text-light); } .checkout-placed-number strong { font-size: 16px; color: var(--primary-maroon); letter-spacing: 0.03em; } .checkout-placed-lead { margin: 0 auto 24px; max-width: 46ch; font-size: 14.5px; line-height: 1.7; color: var(--text-light); } /* The figures read down a column, so they are left-aligned inside a card whose message is centred. */ .checkout-placed-card .checkout-lines, .checkout-placed-card .checkout-handoff-lines { text-align: left; } .checkout-placed-card .checkout-lines { padding-top: 18px; border-top: 1px solid #eeece7; } .checkout-placed-address { margin-top: 22px; padding-top: 18px; border-top: 1px solid #eeece7; text-align: left; } .checkout-placed-address h2 { font-size: 14px; color: var(--text-dark); margin: 0 0 8px; } .checkout-placed-address p { margin: 0; font-size: 13.5px; line-height: 1.65; color: var(--text-light); } .checkout-placed-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; } .checkout-placed-actions > * { flex: 1; justify-content: center; } @media (max-width: 560px) { .checkout-placed-card { padding: 24px 18px; } .checkout-lines li { grid-template-columns: minmax(0, 1fr) auto; } .checkout-lines-qty { grid-column: 2; } } /* ---- B-11: where the order has got to ---- */ .track-card { max-width: 520px; margin: 0 auto; padding: 28px 26px; border: 1px solid #eeece7; border-radius: 14px; background: var(--white); } .track-card .checkout-submit { width: 100%; justify-content: center; margin-top: 18px; } /* --------------------------------------------------------------------------- Where the order has got to — B-11. Read across rather than down: six steps stacked vertically pushed the figures a shopper came back for off the screen, and a delivery journey is read as a line from left to right anyway. The rule between the dots is drawn per step, from the edge of one dot to the edge of the next, rather than as a border on the item. Both are placed from one measurement, and the measurement has to be the real one. The reset at the top of this file says `* { box-sizing: border-box }`, and the universal selector does not match pseudo-elements — so a 14px dot with a 2px border is really 18px tall, its centre is at 9px, and a rule positioned for a 14px dot sits three pixels high. That is the gap that was visible. The dot below says border-box for itself, so 14px means 14px: its centre is at 7px, and the rule starts 7px from that centre. ------------------------------------------------------------------------ */ .order-track { display: flex; align-items: flex-start; list-style: none; margin: 22px 0 4px; padding: 0; text-align: center; } .order-track li { position: relative; flex: 1 1 0; min-width: 0; padding: 22px 6px 0; color: var(--text-light); } /* The dot. Above the rule, and opaque, so the line does not show through it. */ .order-track li::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); box-sizing: border-box; width: 14px; height: 14px; border-radius: 50%; background: var(--white); border: 2px solid #e8e4dd; z-index: 1; } /* The rule to the next dot. The last step has nothing to join. */ .order-track li::after { content: ''; position: absolute; top: 6px; left: calc(50% + 7px); width: calc(100% - 14px); height: 2px; background: #e8e4dd; } .order-track li:last-child::after { display: none; } /* A step that has happened, and the one it is at now. */ .order-track li.is-done { color: var(--text-dark); } .order-track li.is-done::before { background: #2e6b4f; border-color: #2e6b4f; } /* Green only where the journey actually continued: the rule after the step it is sitting at now stays grey, because that part has not happened. Browsers without :has() draw every rule grey and the dots still tell the story. */ .order-track li.is-done:has(+ li.is-done)::after { background: #2e6b4f; } .order-track li.is-now .order-track-name { font-weight: 700; color: var(--primary-maroon); } .order-track li.is-now::before { box-shadow: 0 0 0 4px rgba(46, 107, 79, 0.16); } .order-track li.is-bad.is-done::before { background: #a81e12; border-color: #a81e12; } .order-track li.is-bad.is-done:has(+ li.is-done)::after { background: #a81e12; } .order-track li.is-bad.is-now .order-track-name { color: #a81e12; } .order-track-name { display: block; font-size: 12.5px; line-height: 1.35; } .order-track-when { display: block; font-size: 10.5px; color: var(--text-light); margin-top: 3px; line-height: 1.4; } /* The date and the time on their own lines. As one string it was wider than the column it sits under, and the first step's date was clipped by the edge of the card. */ .order-track-when span { display: block; } /* * On a narrow screen it goes back to a column. * * Six steps across a phone leaves about fifty pixels a step, which turns * "Being prepared" into three lines of four characters. The same measurements * are used, turned ninety degrees, so the dots and the rule still line up. */ @media (max-width: 560px) { .order-track { display: block; text-align: left; padding-left: 4px; } .order-track li { padding: 0 0 20px 26px; } .order-track li::before { top: 3px; left: 0; transform: none; } .order-track li::after { top: 19px; left: 6px; width: 2px; height: calc(100% - 19px); } .order-track li:last-child { padding-bottom: 0; } .order-track-name { font-size: 14px; } .order-track-when { font-size: 12px; } } .order-track-courier { display: flex; align-items: center; justify-content: center; gap: 9px; margin: 0 0 20px; padding: 11px 15px; border-radius: 9px; background: var(--light-bg); font-size: 13.5px; color: var(--text-dark); } .checkout-handoff-lines .is-discount { color: #2e6b4f; } .checkout-handoff-lines .is-tax-note { font-size: 11.5px; color: var(--text-light); } /* --------------------------------------------------------------------------- The language switcher in the header. It used to sit on the maroon strip above the header, where white-on-white translucent was legible. That strip is gone, so the same block now stands on the header's white background and needs colours of its own — the old rules are left alone above rather than edited, so nothing else that borrowed them changes. It stays visible on a phone, where .header-cta beside it does not: this is the only way to read the site in Hindi or Bengali, and the strip it came from was hidden on phones, so there was no way to change language there at all. ------------------------------------------------------------------------ */ .header-main .language-switcher { flex-shrink: 0; background: #f5f1ea; border: 1px solid #e8e0d4; padding: 3px 4px; border-radius: 20px; } .header-main .language-switcher a { color: var(--primary-maroon, #800000); padding: 5px 11px; font-size: 12.5px; } .header-main .language-switcher a:hover, .header-main .language-switcher a.active { background: var(--accent-gold, #FFD700); color: var(--primary-maroon, #800000); } @media (max-width: 768px) { /* Beside the basket rather than below the search box: the header wraps at this width and an unplaced pill would drop onto a line of its own. */ .header-main .language-switcher { order: 2; margin-left: auto; } } /* --------------------------------------------------------------------------- The whole product card opens the product. Done with one stretched link rather than by wrapping the card in an anchor or wiring it up in JavaScript, and the reasons are worth writing down: - A card wrapped in an cannot contain the Add button or the quantity stepper. A button inside a link is invalid HTML and browsers disagree about which one a click belongs to. - A card wired up with a click handler is not a link: middle-click, Ctrl+click and "open in new tab" all stop working, and a screen reader is told nothing is there. It also stops working the moment the script fails to load. So the title stays the one real link, and its ::after is stretched over the card. Everything a shopper can press — the wishlist heart, Add to Cart, the stepper — is lifted above it, so those still do their own job. ------------------------------------------------------------------------ */ .product-card { position: relative; } .product-card .product-card-link::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; } /* The photo is part of the card now, not something to open on its own. */ .product-card .product-image, .product-card .product-image img { cursor: pointer; } /* * Lifted above the stretched link, but not moved. * * The heart is already placed in the corner of the photo with position: * absolute. Setting it to relative — as this rule first did — put it back in * the flow and it slid out of the corner. A positioned element only needs the * z-index; the ones below sit in the normal flow and need both. */ .product-card .product-actions, .product-card .cart-stepper, .product-card form { position: relative; z-index: 2; } /* =========================================================================== The order page, dressed — A-14 / B-11. This is the screen somebody keeps: they screenshot it, read the number down the phone, and come back to it days later to see where the parcel is. So it is built to be read in that order — the mark, the number, where it has got to, then the figures — and the movement below only helps that reading. It never moves anything the eye is trying to land on, and it all stops for a visitor who has asked their system for less motion. ========================================================================= */ .checkout-placed-card { position: relative; overflow: hidden; box-shadow: 0 10px 30px rgba(90, 60, 30, 0.06); } /* A quiet band of the shop's colours across the top, so the card reads as a receipt from somewhere rather than a plain white box. */ .checkout-placed-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--primary-maroon), var(--accent-gold)); } /* ---- the tick ---- */ .placed-tick { display: block; width: 62px; height: 62px; margin: 6px auto 0; } .placed-tick-ring { fill: #eef7f1; stroke: #2e6b4f; stroke-width: 2; } .placed-tick-mark { fill: none; stroke: #2e6b4f; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; } /* ---- the number, and copying it ---- */ .checkout-placed-number { flex-wrap: wrap; justify-content: center; padding: 10px 10px 10px 18px; } .checkout-placed-number-label { white-space: nowrap; } .checkout-placed-copy { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: none; border-radius: 50%; background: var(--white); color: var(--text-light); font-size: 13px; cursor: pointer; transition: color 0.2s ease, background 0.2s ease; } .checkout-placed-copy:hover { color: var(--primary-maroon); } /* The button ships hidden and `display: inline-flex` above beats the browser's own `[hidden]` rule, which is how the checkout popup once became an invisible full-screen layer that swallowed every click on the site. Said explicitly. */ .checkout-placed-copy[hidden] { display: none !important; } /* Said in words, not only in a changed colour: a tick that turns green tells somebody who cannot see colour nothing at all. */ .checkout-placed-copy.is-copied { width: auto; padding: 0 12px; border-radius: 15px; background: #eef7f1; color: #2e6b4f; font-size: 12px; font-weight: 600; } .checkout-placed-copy.is-copied i { display: none; } .checkout-placed-copy.is-copied::after { content: attr(data-copied); } /* ---- section labels ---- */ .checkout-placed-label { margin: 26px 0 0; padding-top: 18px; border-top: 1px solid #eeece7; font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-light); text-align: left; } /* The list below now carries the rule, so it does not need its own. */ .checkout-placed-card .checkout-lines { padding-top: 12px; border-top: 0; } /* ---- the timeline ---- */ .checkout-placed-card .order-track { margin: 24px 0 4px; padding-top: 20px; border-top: 1px solid #eeece7; } /* The step it is at now, marked by a soft ring that breathes a few times and then settles. An animation that never stops is a thing to look away from. */ @media (prefers-reduced-motion: no-preference) { .order-track li.is-now::before { animation: order-pulse 2s ease-out 0.9s 3; } } @keyframes order-pulse { 0% { box-shadow: 0 0 0 0 rgba(46, 107, 79, 0.35); } 70% { box-shadow: 0 0 0 9px rgba(46, 107, 79, 0); } 100% { box-shadow: 0 0 0 4px rgba(46, 107, 79, 0.16); } } /* ===================== movement ===================== Every rule below is inside this query. A visitor who has asked for reduced motion gets the same page, finished, with nothing moving — not a page with the animation merely made faster. ==================================================== */ @media (prefers-reduced-motion: no-preference) { /* The card arrives. Only on the visit that placed the order: coming back to check on a parcel should not be a performance. */ .checkout-placed-card.is-fresh { animation: placed-rise 0.5s cubic-bezier(0.16, 1, 0.3, 1) both; } /* Then its parts, in the order they are meant to be read. `both` so each one is invisible until its turn rather than flashing first. */ .checkout-placed-card.is-fresh > * { animation: placed-in 0.45s cubic-bezier(0.16, 1, 0.3, 1) both; } .checkout-placed-card.is-fresh > *:nth-child(1) { animation-delay: 0.05s; } .checkout-placed-card.is-fresh > *:nth-child(2) { animation-delay: 0.14s; } .checkout-placed-card.is-fresh > *:nth-child(3) { animation-delay: 0.22s; } .checkout-placed-card.is-fresh > *:nth-child(4) { animation-delay: 0.30s; } .checkout-placed-card.is-fresh > *:nth-child(5) { animation-delay: 0.38s; } .checkout-placed-card.is-fresh > *:nth-child(6) { animation-delay: 0.44s; } .checkout-placed-card.is-fresh > *:nth-child(n + 7) { animation-delay: 0.5s; } /* The ring is drawn, then the stroke is written inside it. The numbers are the paths' own lengths, rounded up, so the dash covers the whole line. */ .placed-tick-ring { stroke-dasharray: 152; stroke-dashoffset: 152; animation: placed-draw 0.6s ease-out 0.1s forwards; transform-origin: center; } .placed-tick-mark { stroke-dasharray: 40; stroke-dashoffset: 40; animation: placed-draw 0.35s ease-out 0.55s forwards; } /* The trail fills in from the top, once, as though it were being walked. */ .checkout-placed-card.is-fresh .order-track li.is-done { animation: placed-in 0.4s ease-out both; } .checkout-placed-card.is-fresh .order-track li.is-done:nth-child(1) { animation-delay: 0.55s; } .checkout-placed-card.is-fresh .order-track li.is-done:nth-child(2) { animation-delay: 0.65s; } .checkout-placed-card.is-fresh .order-track li.is-done:nth-child(3) { animation-delay: 0.75s; } .checkout-placed-card.is-fresh .order-track li.is-done:nth-child(n + 4) { animation-delay: 0.85s; } } @keyframes placed-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } @keyframes placed-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @keyframes placed-draw { to { stroke-dashoffset: 0; } } /* The way in to an account, beside the basket. Quiet on purpose: it is not a gate, and it must not read as one. Ordering needs no account — this is only for the people who would rather not type their address again. */ .header-account { display: inline-flex; align-items: center; gap: 7px; flex: none; padding: 9px 14px; border-radius: 22px; color: var(--primary-maroon); font-size: 13.5px; font-weight: 600; text-decoration: none; white-space: nowrap; } .header-account i { font-size: 15px; } .header-account:hover { background: var(--light-bg, #FFF8F0); } @media (max-width: 900px) { .header-account span { display: none; } .header-account { padding: 9px 10px; } } /* The heading of a page, said once and quietly. It replaces a full-width maroon band that carried the same words: a screen's worth of furniture above the thing the visitor came for. The heading itself is kept — a page with none is a page a search engine has to guess about, and a screen reader has nothing to announce. */ .page-lede { padding: 20px 0 6px; } .page-lede h1 { margin: 0; font-size: 20px; color: var(--text-dark); } .page-lede p { margin: 4px 0 0; font-size: 13.5px; color: var(--text-light); } /* A page's heading, kept for search engines and screen readers but not drawn. Used where the page says plainly what it is — the cart, the sign-in form — and a heading above it would only repeat the word. Clipped rather than display:none or visibility:hidden: both of those take it out of the accessibility tree as well, which would hide it from the very readers it is being kept for. */ .page-title-quiet { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } /* The shop's mark on a card that stands on its own — the sign-in and registration boxes, which otherwise say nothing about whose they are. */ .brand-mark { /* Stacked and centred: the mark reads as the card's own heading rather than as a line of letterhead across the top of it. */ display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 22px; padding-bottom: 18px; border-bottom: 1px solid #f2efea; text-align: center; text-decoration: none; } .brand-mark img { width: 62px; height: auto; flex: none; } .brand-mark-icon { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; flex: none; border-radius: 12px; background: linear-gradient(135deg, var(--primary-maroon), var(--dark-maroon)); color: var(--accent-gold); font-size: 24px; } .brand-mark-name { font-size: 20px; font-weight: 700; color: var(--primary-maroon); } /* ---- suggestions under the search box ---- * * The panel is added by live-search.js and only ever exists when that file has * run, so nothing here is load-bearing: with no JavaScript the header holds a * plain form that submits to the results page, exactly as it did before. */ .search-bar .search-form.has-live-search, form.search-form.has-live-search { position: relative; } .live-search { position: absolute; z-index: 60; top: calc(100% + 6px); left: 0; right: 0; max-height: min(70vh, 460px); overflow-y: auto; overscroll-behavior: contain; background: var(--white, #fff); border: 1px solid #e8e4dc; border-radius: 12px; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.14); text-align: left; } .live-search-group { margin: 0; padding: 10px 14px 4px; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-light, #7a7168); } .live-search-row { display: flex; align-items: center; gap: 10px; padding: 8px 14px; color: var(--text-dark, #2f2a26); text-decoration: none; } .live-search-row img { width: 38px; height: 38px; flex: 0 0 auto; border-radius: 8px; /* contain, not cover: a garland photographed on a wide background must not be cropped down to a patch of that background. */ object-fit: contain; background: var(--light-bg, #FFF8F0); } .live-search-text { display: flex; flex-direction: column; min-width: 0; } .live-search-name { font-size: 13.5px; line-height: 1.3; /* One line. A product called "A fresh white trumpet-shaped Dhatura flower used as a sacred offering…" would otherwise take the whole panel. */ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .live-search-meta { font-size: 11.5px; color: var(--text-light, #7a7168); } /* Hover and keyboard land on the same highlight, so arrowing down looks like pointing at it. */ .live-search-row:hover, .live-search-row.is-on { background: var(--light-gold, #FFF8DC); color: var(--primary-maroon, #800000); } .live-search-all { display: block; padding: 10px 14px; border-top: 1px solid #f1ede6; color: var(--primary-maroon, #800000); font-size: 12.5px; font-weight: 700; text-decoration: none; } .live-search-all:hover { background: #fdfaf6; } .live-search-none { margin: 0; padding: 14px; color: var(--text-light, #7a7168); font-size: 13px; } @media (max-width: 768px) { .live-search { max-height: 60vh; } .live-search-row img { width: 32px; height: 32px; } }