/* ============================================================ Giottos African Store: combined stylesheet Tokens + components + responsive ============================================================ */ /* The Google Fonts request lives in each page's , not here: an @import cannot start until this file has been fetched and parsed, which delays the text twice over. */ :root { /* Brand */ --brand-raspberry: #b8244c; --brand-raspberry-dk: #8a1a39; --brand-pink: #e0457d; --brand-pink-soft: #f6c9d8; --brand-cream: #f8efe3; /* Pantry accents */ --acc-mustard: #e6a531; --acc-mustard-dk: #b87c1b; --acc-terracotta: #c45a2c; --acc-sage: #6e8b4a; --acc-cocoa: #4a2618; --acc-charcoal: #1f1a18; /* Neutrals */ --bg: #fdf8f1; --bg-elev: #ffffff; --bg-tint: #f4ead8; --bg-deep: #2a1117; --fg-1: #2a1117; --fg-2: #5a3a3f; --fg-3: #836268; --fg-on-dark: #f8efe3; --fg-on-dark-muted: #d9bcc3; --border-1: #ead8c2; --border-2: #d9b89d; /* Type families */ --ff-script: "Pacifico", "Lobster", cursive; --ff-display: "Oswald", "Bebas Neue", Impact, sans-serif; --ff-body: "Nunito", "Avenir Next", system-ui, sans-serif; --ff-mono: "DM Mono", "JetBrains Mono", ui-monospace, monospace; /* Shadows */ --sh-1: 0 1px 2px rgba(74, 38, 24, 0.08); --sh-2: 0 4px 12px rgba(74, 38, 24, 0.1); --sh-3: 0 12px 28px rgba(74, 38, 24, 0.14); --sh-4: 0 24px 60px rgba(74, 38, 24, 0.2); --sh-inset: inset 0 1px 0 rgba(255, 255, 255, 0.6); } *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--bg); color: var(--fg-1); font-family: var(--ff-body); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Focus ring */ :focus-visible { outline: 2px solid var(--brand-pink); outline-offset: 2px; border-radius: 4px; } /* ============ Shopfront banner ============ */ /* Full-bleed band on the homepage. The band carries the artwork's own purple so the strip runs to the viewport edge on wide screens. */ .gh-bannerBand { background: #a53694; overflow: hidden; } .gh-bannerBandInner { line-height: 0; } .gh-bannerImg { display: block; width: 100%; height: auto; } /* On very wide screens the artwork would tower; crop the patterned edges rather than let the band swallow the page. */ @media (min-width: 1600px) { .gh-bannerBand .gh-bannerImg { height: 24vw; max-height: 420px; object-fit: cover; object-position: center; } } /* ============ Header ============ */ .gh-header { background: var(--acc-cocoa); color: var(--brand-cream); position: sticky; top: 0; z-index: 56; } .gh-headerInner { max-width: 1280px; margin: 0 auto; padding: 14px 24px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; } .gh-logoPill { display: inline-flex; align-items: center; text-decoration: none; line-height: 0; flex-shrink: 0; } .gh-logoImg { display: block; height: 48px; width: auto; } .gh-nav { flex: 1; display: flex; gap: 24px; align-items: center; min-width: 0; } .gh-navLink { font-family: var(--ff-display); font-size: 14px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--brand-cream); text-decoration: none; padding: 6px 0; border-bottom: 2px solid transparent; transition: border-color 160ms, opacity 160ms; } .gh-navLink:hover { opacity: 0.85; } .gh-navLink.is-active { border-bottom-color: var(--brand-cream); } /* ============ Burger + mobile menu ============ */ .gh-burger { display: none; background: transparent; border: none; color: var(--brand-cream); cursor: pointer; padding: 10px; margin-left: auto; z-index: 61; } .gh-burger svg { width: 26px; height: 26px; display: block; } .gh-burger .gh-burgerClose { display: none; } .gh-burger.is-open .gh-burgerOpen { display: none; } .gh-burger.is-open .gh-burgerClose { display: block; } .gh-mobileMenu { position: fixed; left: 0; right: 0; top: 0; z-index: 55; background: rgba(184, 36, 76, 0.3); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid rgba(255, 239, 227, 0.18); opacity: 0; visibility: hidden; transform: translateY(-8px); pointer-events: none; min-height: 100vh; min-height: 100dvh; transition: opacity 200ms ease, transform 200ms ease, visibility 200ms; } .gh-mobileMenu.is-open { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; } @media (min-width: 769px) { .gh-mobileMenu { display: none; } } .gh-mobileMenuInner { max-width: 1280px; margin: 0 auto; /* Set from JS to the header bar's real height; the fallback covers the unstyled first paint. */ padding: var(--gh-menuTop, 96px) 24px 28px; display: flex; flex-direction: column; gap: 4px; } /* The header (z-index 56) and the floating buttons (58, 60) all paint above the menu (55). The buttons are position:fixed so hiding them costs no layout, but the category strip is in flow: collapsing it resized the sticky header, which fired a scroll event, which the close-on-scroll handler read as the reader scrolling away, so the menu shut the instant it opened on any scrolled page. The strip therefore stays put, and the menu starts below the whole header instead. */ body.gh-menuOpen .gh-fab { opacity: 0; visibility: hidden; pointer-events: none; } body.gh-menuOpen .gh-listFab { opacity: 0; visibility: hidden; pointer-events: none; } .gh-mobileMenuLink { font-family: var(--ff-display); font-size: 20px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--brand-cream); text-decoration: none; padding: 14px 4px; border-bottom: 1px solid rgba(255, 239, 227, 0.16); } .gh-mobileMenuLink.is-active { color: var(--acc-mustard); } .gh-mobileMenuCall { margin-top: 16px; display: inline-flex; align-items: center; gap: 10px; font-family: var(--ff-display); font-size: 14px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--brand-cream); text-decoration: none; background: rgba(255, 239, 227, 0.14); padding: 12px 18px; border-radius: 9999px; align-self: flex-start; } .gh-mobileMenuCall svg { width: 18px; height: 18px; } .gh-search { width: 100%; max-width: 560px; background: rgba(255, 239, 227, 0.12); border: 1px solid rgba(255, 239, 227, 0.22); border-radius: 9999px; padding: 12px 20px; display: flex; align-items: center; gap: 12px; color: var(--brand-cream); transition: border-color 160ms, background 160ms; } .gh-search:focus-within { background: rgba(255, 239, 227, 0.2); border-color: rgba(255, 239, 227, 0.5); } .gh-search input { flex: 1; min-width: 0; background: transparent; border: none; outline: none; color: var(--brand-cream); font-family: var(--ff-body); font-size: 16px; } .gh-search input::placeholder { color: rgba(248, 239, 227, 0.6); } .gh-searchLight { background: var(--bg-elev); border: 1px solid var(--border-2); color: var(--fg-1); box-shadow: var(--sh-1); margin: 24px auto 0; } .gh-searchLight:focus-within { background: var(--bg-elev); border-color: var(--brand-raspberry); } .gh-searchLight input { color: var(--fg-1); } .gh-searchLight input::placeholder { color: var(--fg-3); } .gh-iconBtn { background: transparent; border: none; color: var(--brand-cream); cursor: pointer; display: inline-flex; align-items: center; gap: 8px; font-family: var(--ff-display); font-size: 13px; text-transform: uppercase; letter-spacing: 0.1em; padding: 8px 10px; border-radius: 8px; transition: background 160ms; } .gh-iconBtn { text-decoration: none; } .gh-iconBtn:hover { background: rgba(255, 239, 227, 0.1); } .gh-catBar { background: var(--bg-tint); border-bottom: 1px solid var(--border-1); } .gh-catBarInner { max-width: 1280px; margin: 0 auto; padding: 12px 24px; display: flex; gap: 28px; overflow-x: auto; scrollbar-width: none; } .gh-catBarInner::-webkit-scrollbar { display: none; } .gh-catLink { font-family: var(--ff-display); font-size: 14px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--acc-cocoa); text-decoration: none; /* 44px minimum tap target; the visual weight is unchanged, the padding simply gives a thumb somewhere to land. */ display: inline-flex; align-items: center; min-height: 44px; padding: 4px 0; white-space: nowrap; border: none; border-bottom: 2px solid transparent; cursor: pointer; background: transparent; transition: color 160ms, border-color 160ms; } .gh-catLink:hover { color: var(--brand-raspberry); } .gh-catLink.is-active { color: var(--brand-raspberry); border-bottom-color: var(--brand-raspberry); } .gh-catCount { display: inline-block; margin-left: 7px; min-width: 20px; padding: 1px 6px; border-radius: 9999px; background: rgba(74, 38, 24, 0.1); color: var(--acc-cocoa); font-size: 11px; font-weight: 600; letter-spacing: 0.04em; line-height: 1.5; vertical-align: 1px; } .gh-catLink.is-active .gh-catCount { background: var(--brand-raspberry); color: var(--brand-cream); } /* Nothing in stock under this heading this week. */ .gh-catLink.is-empty { opacity: 0.42; } .gh-catLink.is-empty:hover { opacity: 0.7; color: var(--acc-cocoa); } /* Clear button inside the search field */ .gh-searchClear { flex-shrink: 0; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: none; border-radius: 50%; background: rgba(74, 38, 24, 0.09); color: var(--fg-2); cursor: pointer; transition: background 160ms, color 160ms; } .gh-searchClear:hover { background: var(--brand-raspberry); color: var(--brand-cream); } .gh-searchClear[hidden] { display: none; } .gh-searchHint { flex-shrink: 0; font-family: var(--ff-mono); font-size: 11px; color: var(--fg-3); border: 1px solid var(--border-1); border-radius: 5px; padding: 1px 6px; line-height: 1.6; } /* ============ Hero ============ */ .gh-hero { position: relative; background: var(--bg-deep); color: var(--brand-cream); overflow: hidden; } .gh-heroBg { position: absolute; inset: 0; background-image: linear-gradient( 120deg, rgba(42, 17, 23, 0.9) 0%, rgba(42, 17, 23, 0.78) 42%, rgba(42, 17, 23, 0.93) 100% ), url("assets/hero-banner.webp"); background-size: cover; background-position: 78% 15%; } .gh-heroBg::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient( rgba(255, 239, 227, 0.06) 1px, transparent 1px ); background-size: 3px 3px; mix-blend-mode: overlay; opacity: 0.6; } .gh-heroInner { position: relative; max-width: 1280px; margin: 0 auto; padding: 80px 24px; display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 48px; align-items: center; z-index: 2; } .gh-heroText { order: 2; } .gh-dealSlider { order: 1; } .gh-heroKicker { font-family: var(--ff-display); font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--acc-mustard); margin-bottom: 16px; } .gh-heroTitle { font-family: var(--ff-display); font-weight: 700; font-size: clamp(48px, 6vw, 88px); line-height: 0.96; text-transform: uppercase; letter-spacing: 0.01em; margin: 0 0 20px; } .gh-heroTitle em { font-family: var(--ff-script); font-style: normal; font-weight: 400; color: var(--brand-pink); text-transform: none; letter-spacing: -0.01em; display: inline-block; padding: 0 6px; } .gh-heroSub { font-size: 18px; color: var(--fg-on-dark-muted); max-width: 460px; margin: 0 0 32px; } .gh-heroCtas { display: flex; gap: 14px; flex-wrap: wrap; } .gh-heroImg { aspect-ratio: 4/5; border-radius: 22px; box-shadow: var(--sh-4); background: radial-gradient( ellipse at 50% 40%, #e6a531 0%, #c45a2c 40%, #8a1a39 100% ); position: relative; overflow: hidden; display: flex; align-items: flex-end; justify-content: flex-start; } .gh-heroImgLabel { font-family: var(--ff-display); font-size: 12px; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(248, 239, 227, 0.6); padding: 22px; } /* ============ Deal slideshow ============ */ .gh-dealSlider { aspect-ratio: 4/5; border-radius: 22px; box-shadow: var(--sh-4); position: relative; overflow: hidden; background: var(--acc-cocoa); } .gh-dealSlide { position: absolute; inset: 0; opacity: 0; transition: opacity 0.6s ease; pointer-events: none; } .gh-dealSlide.is-active { opacity: 1; pointer-events: auto; } .gh-dealSlideImg { position: absolute; inset: 0; background-size: cover; background-position: center; } .gh-dealOverlay { position: absolute; inset: 0; background: linear-gradient( to top, rgba(26, 8, 14, 0.88) 0%, rgba(26, 8, 14, 0.3) 50%, rgba(26, 8, 14, 0.05) 100% ); } .gh-dealContent { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 20px; } .gh-dealBadge { display: inline-flex; align-items: center; background: var(--brand-raspberry); color: var(--brand-cream); font-family: var(--ff-display); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; padding: 6px 12px; border-radius: 40px; align-self: flex-start; } .gh-dealInfo { display: flex; flex-direction: column; gap: 4px; } .gh-dealName { font-family: var(--ff-display); font-size: clamp(22px, 3vw, 30px); font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; color: var(--brand-cream); line-height: 1; } .gh-dealPrices { display: flex; align-items: baseline; gap: 10px; margin-top: 6px; } .gh-dealWas { font-family: var(--ff-body); font-size: 16px; color: rgba(248, 239, 227, 0.5); text-decoration: line-through; } .gh-dealNow { font-family: var(--ff-display); font-size: clamp(34px, 4.5vw, 48px); color: var(--acc-mustard); line-height: 1; } .gh-dealSub { font-family: var(--ff-body); font-size: 13px; color: rgba(248, 239, 227, 0.55); margin-top: 2px; } .gh-dealDots { position: absolute; bottom: 16px; left: 0; right: 0; display: flex; justify-content: center; gap: 7px; } .gh-dealDot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: rgba(248, 239, 227, 0.35); border: none; cursor: pointer; padding: 0; transition: background 0.3s, transform 0.3s; } /* An 8px dot is not a tap target. Keep the dot the size it looks, and hang a 44px invisible pad off it so a thumb actually lands. */ .gh-dealDot::before { content: ""; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); } .gh-dealDot.is-active { background: var(--brand-cream); transform: scale(1.25); } /* ============ Page hero (shop / visit) ============ */ .gh-pageHero { background: radial-gradient( ellipse at 70% 40%, rgba(230, 165, 49, 0.18), transparent 60% ), linear-gradient(180deg, var(--bg-tint) 0%, var(--bg) 100%); border-bottom: 1px solid var(--border-1); } .gh-pageHeroInner { max-width: 1280px; margin: 0 auto; padding: 56px 24px 40px; text-align: center; } .gh-pageHeroKicker { font-family: var(--ff-display); font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--brand-raspberry); margin-bottom: 14px; } .gh-pageHeroTitle { font-family: var(--ff-display); font-weight: 700; font-size: clamp(40px, 5vw, 72px); line-height: 0.98; text-transform: uppercase; letter-spacing: 0.01em; margin: 0 0 16px; color: var(--fg-1); } .gh-pageHeroTitle em { font-family: var(--ff-script); font-style: normal; font-weight: 400; color: var(--brand-raspberry); text-transform: none; letter-spacing: -0.01em; display: inline-block; padding: 0 4px; } .gh-pageHeroSub { font-size: 17px; color: var(--fg-2); max-width: 600px; margin: 0 auto; } /* ============ Buttons ============ */ .gh-btn { font-family: var(--ff-display); font-weight: 600; font-size: 14px; text-transform: uppercase; letter-spacing: 0.1em; padding: 14px 28px; border-radius: 9999px; border: none; cursor: pointer; transition: all 180ms cubic-bezier(0.4, 0, 0.2, 1); display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; white-space: nowrap; } .gh-btn:active { transform: scale(0.98); } .gh-btnPrimary { background: var(--acc-cocoa); color: var(--brand-cream); box-shadow: var(--sh-2), var(--sh-inset); } .gh-btnPrimary:hover { background: var(--acc-charcoal); box-shadow: var(--sh-3), var(--sh-inset); } .gh-btnSecondary { background: transparent; color: var(--brand-cream); border: 1.5px solid var(--brand-cream); } .gh-btnSecondary:hover { background: rgba(255, 239, 227, 0.1); } /* ============ Section heads ============ */ .gh-sectionHead { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 28px; gap: 16px; } .gh-sectionTitle { font-family: var(--ff-display); font-weight: 700; font-size: 36px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--fg-1); margin: 0; } .gh-sectionLink { font-family: var(--ff-display); font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brand-raspberry); text-decoration: none; white-space: nowrap; } .gh-sectionLink:hover { color: var(--brand-raspberry-dk); text-decoration: underline; text-underline-offset: 4px; } .gh-sectionNote { color: var(--fg-3); } .gh-sectionNote:hover { color: var(--fg-3); text-decoration: none; } /* ============ Category strip ============ */ .gh-catSection { max-width: 1280px; margin: 0 auto; padding: 64px 24px 32px; } .gh-catGrid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; } .gh-catTile { display: flex; flex-direction: column; align-items: stretch; gap: 12px; background: transparent; border: none; cursor: pointer; padding: 0; text-decoration: none; color: inherit; } .gh-catCircle { aspect-ratio: 1 / 1; width: 100%; border-radius: 50%; /* Raised like a coin sitting on the page rather than printed on it: a pale mount ring, a warm edge so it still reads against the cream background, then two drop shadows at different spreads. The insets do the rest, a lit top edge and a shaded bottom, which is what sells the roundness. */ box-shadow: inset 0 5px 12px rgba(255, 255, 255, 0.6), inset 0 -14px 20px rgba(74, 38, 24, 0.26), 0 0 0 5px #fffdf9, 0 0 0 6px #dcc3a6, 0 14px 24px rgba(74, 38, 24, 0.26), 0 4px 8px rgba(74, 38, 24, 0.16); transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); background-position: center; background-size: cover; background-repeat: no-repeat; } .gh-catTile:hover .gh-catCircle { transform: translateY(-4px); box-shadow: inset 0 5px 12px rgba(255, 255, 255, 0.6), inset 0 -14px 20px rgba(74, 38, 24, 0.26), 0 0 0 5px #fffdf9, 0 0 0 6px var(--brand-pink-soft), 0 20px 32px rgba(74, 38, 24, 0.3), 0 6px 12px rgba(74, 38, 24, 0.18); } /* Presses in on tap, so a phone gets the same feedback a hover gives. */ .gh-catTile:active .gh-catCircle { transform: translateY(-1px); box-shadow: inset 0 4px 10px rgba(255, 255, 255, 0.45), inset 0 -10px 16px rgba(74, 38, 24, 0.3), 0 0 0 5px #fffdf9, 0 0 0 6px #dcc3a6, 0 5px 12px rgba(74, 38, 24, 0.24); } .gh-catLabel { font-family: var(--ff-display); font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-1); text-align: center; } /* ============ Product grid ============ */ .gh-prodSection { max-width: 1280px; margin: 0 auto; padding: 40px 24px 80px; scroll-margin-top: 120px; } .gh-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 22px; } .gh-empty { padding: 40px 0; text-align: center; color: var(--fg-3); font-size: 15px; } .gh-pcard { background: var(--bg-elev); border: 1px solid var(--border-1); border-radius: 14px; overflow: hidden; box-shadow: var(--sh-2); transition: all 220ms cubic-bezier(0.4, 0, 0.2, 1); display: flex; flex-direction: column; } .gh-pcard:hover { transform: translateY(-3px); box-shadow: var(--sh-3); } .gh-pimg { aspect-ratio: 4/3; position: relative; overflow: hidden; } /* Product photo sits over the category placeholder and fades in once decoded; if the file is missing the removes itself and the placeholder underneath is what you see. */ .gh-pimg { background: var(--bg-tint); } .gh-pimgPhoto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: var(--bg-tint); opacity: 0; transition: opacity 240ms ease, transform 280ms ease; } .gh-pimgPhoto.is-loaded { opacity: 1; } .gh-pcard:hover .gh-pimgPhoto { transform: scale(1.04); } .gh-pimgPh { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: var(--bg-tint); color: var(--acc-cocoa); } .gh-pimgPh svg { width: 38px; height: 38px; opacity: 0.55; } .gh-pimgPh span { font-family: var(--ff-display); font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; opacity: 0.6; } .gh-pimgPh[data-cat="Fresh"] { background: #eef3e6; color: var(--acc-sage); } .gh-pimgPh[data-cat="Spices"] { background: #fbf0da; color: var(--acc-mustard-dk); } .gh-pimgPh[data-cat="Frozen"] { background: #e8eef3; color: #3f6a8a; } .gh-pimgPh[data-cat="Drinks"] { background: #f6e8ea; color: var(--brand-raspberry); } .gh-pimgPh[data-cat="Snacks"] { background: #f7ece4; color: var(--acc-terracotta); } .gh-pBadge { position: absolute; top: 10px; left: 10px; background: var(--acc-mustard); color: var(--acc-cocoa); font-family: var(--ff-display); font-size: 11px; font-weight: 700; padding: 4px 12px; border-radius: 9999px; letter-spacing: 0.1em; text-transform: uppercase; } .gh-pBadge.is-sale { background: var(--brand-raspberry); color: var(--brand-cream); } .gh-pBadge.is-fresh { background: var(--acc-sage); color: var(--brand-cream); } .gh-pBody { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; } .gh-pNameRow { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .gh-pName { font-family: var(--ff-body); font-weight: 800; font-size: 16px; color: var(--fg-1); line-height: 1.25; } .gh-pSize { font-family: var(--ff-display); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--fg-3); white-space: nowrap; flex-shrink: 0; } .gh-pDesc { font-family: var(--ff-body); font-size: 13px; color: var(--fg-2); line-height: 1.4; flex: 1; margin: 0; } .gh-pFoot { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; gap: 8px; } .gh-pPrice { font-family: var(--ff-display); font-weight: 700; font-size: 22px; color: var(--brand-raspberry); } /* A firm shelf price. */ .gh-pPrice.is-fixed { color: var(--brand-raspberry); } /* Priced on the day: reads as a note, not as a missing price. */ .gh-pPrice.is-poa { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--acc-mustard-dk); background: #fbf0da; border: 1px solid #edd6a4; border-radius: 9999px; padding: 5px 12px; cursor: help; } .gh-pPrice.is-poa svg { width: 14px; height: 14px; flex-shrink: 0; } /* Search-term highlighting on product names */ .gh-pName mark { background: var(--brand-pink-soft); color: inherit; border-radius: 3px; padding: 0 1px; } /* Empty-state actions */ .gh-empty p { margin: 0 0 16px; } .gh-emptyBtn { font-family: var(--ff-display); font-size: 13px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--brand-cream); background: var(--brand-raspberry); border: none; border-radius: 9999px; padding: 11px 22px; cursor: pointer; transition: background 160ms; } .gh-emptyBtn:hover { background: var(--brand-raspberry-dk); } .gh-emptySuggest { font-family: var(--ff-body); font-size: 14px; font-weight: 700; color: var(--brand-raspberry); background: transparent; border: 1px solid var(--border-2); border-radius: 9999px; padding: 2px 12px; margin: 0 2px; cursor: pointer; } .gh-emptySuggest:hover { background: var(--bg-tint); } .gh-prodFootnote { margin: 32px 0 0; padding: 18px 22px; background: var(--bg-tint); border: 1px solid var(--border-1); border-radius: 14px; font-size: 14px; color: var(--fg-2); text-align: center; } .gh-prodFootnote a { color: var(--brand-raspberry); text-decoration: none; font-weight: 700; } .gh-prodFootnote a:hover { text-decoration: underline; text-underline-offset: 3px; } /* ============ Origin banner ============ */ .gh-origin { background: var(--bg-tint); border-block: 1px solid var(--border-1); } .gh-originInner { max-width: 1280px; margin: 0 auto; padding: 56px 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; } .gh-originTitle { font-family: var(--ff-display); font-weight: 700; font-size: 44px; text-transform: uppercase; letter-spacing: 0.02em; line-height: 1; color: var(--fg-1); margin: 0 0 16px; } .gh-originTitle em { font-family: var(--ff-script); font-style: normal; font-weight: 400; color: var(--brand-raspberry); text-transform: none; letter-spacing: -0.01em; } .gh-originSub { font-size: 17px; color: var(--fg-2); max-width: 460px; margin: 0 0 24px; } .gh-countryList { display: flex; flex-wrap: wrap; gap: 8px; } .gh-countryChip { background: var(--bg-elev); border: 1px solid var(--border-2); border-radius: 9999px; padding: 7px 14px; font-family: var(--ff-display); font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--acc-cocoa); } .gh-originImage { aspect-ratio: 5/3; border-radius: 22px; box-shadow: var(--sh-3); overflow: hidden; background: url("assets/inside-shop.webp") center/cover no-repeat; } /* ============ Visit us ============ */ .gh-visit { background: var(--bg); scroll-margin-top: 120px; } .gh-visitInner { max-width: 1280px; margin: 0 auto; padding: 64px 24px; } .gh-visitTitle { font-family: var(--ff-display); font-weight: 700; font-size: 44px; text-transform: uppercase; letter-spacing: 0.02em; color: var(--fg-1); margin: 0 0 12px; } .gh-visitSub { font-size: 17px; color: var(--fg-2); max-width: 520px; margin: 0 0 32px; } .gh-visitGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; padding: 28px; background: var(--bg-elev); border: 1px solid var(--border-1); border-radius: 18px; box-shadow: var(--sh-2); } .gh-visitGrid h4 { font-family: var(--ff-display); font-size: 13px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--brand-raspberry); margin: 0 0 8px; } .gh-visitGrid p { margin: 0; font-size: 15px; color: var(--fg-1); line-height: 1.55; } .gh-visitGrid a { color: var(--fg-1); text-decoration: none; } .gh-visitGrid a:hover { color: var(--brand-raspberry); text-decoration: underline; text-underline-offset: 3px; } /* ============ Locations (two shops) ============ */ .gh-locations { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .gh-location { display: flex; flex-direction: column; background: var(--bg-elev); border: 1px solid var(--border-1); border-radius: 18px; box-shadow: var(--sh-2); overflow: hidden; } .gh-locationBody { padding: 26px 28px 22px; flex: 1; } .gh-locationName { font-family: var(--ff-display); font-weight: 700; font-size: 26px; text-transform: uppercase; letter-spacing: 0.02em; color: var(--fg-1); margin: 0 0 18px; padding-bottom: 14px; border-bottom: 2px solid var(--acc-mustard); } .gh-locationBody h4 { font-family: var(--ff-display); font-size: 13px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--brand-raspberry); margin: 20px 0 8px; } .gh-locationBody h4:first-of-type { margin-top: 0; } .gh-locationBody p { margin: 0 0 6px; font-size: 15px; color: var(--fg-1); line-height: 1.55; } .gh-locationBody a { color: var(--fg-1); text-decoration: none; } .gh-locationBody a:hover { color: var(--brand-raspberry); text-decoration: underline; text-underline-offset: 3px; } .gh-locationMap iframe { display: block; width: 100%; border: 0; } .gh-mapConsent { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; /* Matches the iframe height exactly, so swapping one for the other does not shift the page under the reader's finger. */ height: 300px; padding: 20px 24px; text-align: center; background: linear-gradient(rgba(74, 38, 24, 0.04), rgba(74, 38, 24, 0.04)), var(--bg-tint); border-top: 1px solid var(--border-1); } .gh-mapConsentText { max-width: 34ch; margin: 0; color: var(--fg-3); font-size: 14px; line-height: 1.5; } /* The contact block sits below both shops, since one number covers them. */ .gh-contactRow { margin-top: 24px; grid-template-columns: 1fr 1fr; } @media (max-width: 768px) { .gh-locations { grid-template-columns: 1fr; gap: 20px; } .gh-locationBody { padding: 22px 22px 18px; } .gh-locationName { font-size: 22px; } .gh-locationMap iframe { height: 240px; } .gh-mapConsent { height: 240px; } .gh-contactRow { grid-template-columns: 1fr; } } .gh-mapCard { margin-top: 28px; border: 1px solid var(--border-1); border-radius: 18px; overflow: hidden; box-shadow: var(--sh-2); } .gh-mapCard iframe { display: block; width: 100%; border: 0; } /* ============ Contact card (home page) ============ */ /* ============ Reviews ============ */ .gh-reviews { background: var(--bg-tint); border-block: 1px solid var(--border-1); } .gh-reviewsInner { max-width: 1280px; margin: 0 auto; padding: 72px 24px 80px; } .gh-reviewsHeader { text-align: center; margin-bottom: 52px; } .gh-reviewsKicker { font-family: var(--ff-display); font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--acc-mustard); margin-bottom: 14px; } .gh-reviewsTitle { font-family: var(--ff-display); font-weight: 700; font-size: clamp(36px, 5vw, 64px); line-height: 1; text-transform: uppercase; letter-spacing: 0.02em; color: var(--fg-1); margin: 0; } .gh-reviewsTitle em { font-family: var(--ff-script); font-style: normal; font-weight: 400; color: var(--brand-raspberry); text-transform: none; letter-spacing: -0.01em; display: inline-block; padding: 0 6px; } .gh-reviewsGrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 28px; } .gh-reviewCard { background: var(--bg-elev); border-radius: 20px; box-shadow: var(--sh-3); padding: 40px 36px 32px 44px; display: flex; flex-direction: column; position: relative; overflow: hidden; } .gh-reviewCard::before { content: ""; position: absolute; top: 0; left: 0; bottom: 0; width: 5px; background: var(--brand-raspberry); border-radius: 20px 0 0 20px; } .gh-reviewCard::after { content: "\201C"; position: absolute; top: 12px; right: 28px; font-family: var(--ff-script); font-size: 100px; line-height: 1; color: var(--brand-raspberry); opacity: 0.07; pointer-events: none; -webkit-user-select: none; user-select: none; } .gh-reviewBody { margin: 0 0 28px; font-size: 1.08rem; line-height: 1.75; color: var(--fg-1); font-style: italic; flex: 1; } .gh-reviewMeta { display: flex; align-items: center; gap: 16px; border-top: 1px solid var(--border-1); padding-top: 22px; } .gh-reviewStars { color: var(--acc-mustard); font-size: 15px; letter-spacing: 2px; flex-shrink: 0; } .gh-reviewMeta strong { display: block; color: var(--fg-1); font-family: var(--ff-display); font-size: 13px; text-transform: uppercase; letter-spacing: 0.1em; } .gh-reviewMeta span { display: block; color: var(--fg-3); font-size: 12px; margin-top: 2px; } /* ============ Contact card ============ */ .gh-contact { background: var(--bg); } .gh-contactInner { max-width: 1280px; margin: 0 auto; padding: 64px 24px; } .gh-contactCard { display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; background: var(--bg-elev); border: 1px solid var(--border-1); border-radius: 22px; box-shadow: var(--sh-3); padding: 44px; position: relative; overflow: hidden; } .gh-contactCard::before { content: ""; position: absolute; top: -60px; right: -60px; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient( circle, rgba(224, 69, 125, 0.18), transparent 70% ); pointer-events: none; } .gh-contactKicker { font-family: var(--ff-display); font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--brand-raspberry); margin-bottom: 14px; } .gh-contactTitle { font-family: var(--ff-display); font-weight: 700; font-size: 42px; text-transform: uppercase; letter-spacing: 0.02em; line-height: 1; color: var(--fg-1); margin: 0 0 16px; } .gh-contactTitle em { font-family: var(--ff-script); font-style: normal; font-weight: 400; color: var(--brand-raspberry); text-transform: none; letter-spacing: -0.01em; } .gh-contactSub { font-size: 16px; color: var(--fg-2); margin: 0 0 28px; max-width: 460px; } .gh-contactMeta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; border-top: 1px solid var(--border-1); padding-top: 24px; } .gh-contactMeta h4 { font-family: var(--ff-display); font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--brand-raspberry); margin: 0 0 6px; } .gh-contactMeta p { margin: 0; font-size: 14px; color: var(--fg-1); line-height: 1.5; } .gh-contactMeta a { color: var(--fg-1); text-decoration: none; } .gh-contactMeta a:hover { color: var(--brand-raspberry); text-decoration: underline; text-underline-offset: 3px; } .gh-contactForm { display: flex; flex-direction: column; gap: 14px; position: relative; z-index: 1; } .gh-fieldLabel { display: flex; flex-direction: column; gap: 6px; } .gh-fieldLabel > span { font-family: var(--ff-display); font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--fg-2); } .gh-fieldLabel input, .gh-fieldLabel textarea { font-family: var(--ff-body); font-size: 16px; color: var(--fg-1); background: var(--bg); border: 1px solid var(--border-1); border-radius: 12px; padding: 12px 14px; outline: none; transition: border-color 160ms, box-shadow 160ms; } .gh-fieldLabel input:focus, .gh-fieldLabel textarea:focus { border-color: var(--brand-raspberry); box-shadow: 0 0 0 3px rgba(184, 36, 76, 0.12); } .gh-fieldLabel textarea { resize: vertical; min-height: 110px; font-family: var(--ff-body); } .gh-contactForm .gh-btn { align-self: flex-start; margin-top: 4px; } .gh-formNote { font-size: 12px; color: var(--fg-3); margin: 4px 0 0; } /* ============ Star rating ============ */ .gh-stars { display: flex; align-items: center; gap: 8px; margin-top: 16px; } .gh-starsIcons { font-size: 18px; letter-spacing: 2px; background: linear-gradient( to right, var(--acc-mustard) 92%, rgba(230, 165, 49, 0.22) 92% ); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .gh-starsLabel { font-size: 14px; } .gh-starsLabel strong { font-weight: 700; } .gh-hero .gh-starsLabel { color: rgba(248, 239, 227, 0.7); } .gh-hero .gh-starsLabel strong { color: var(--brand-cream); } .gh-visitTeaser .gh-starsLabel { color: var(--fg-2); } .gh-visitTeaser .gh-starsLabel strong { color: var(--fg-1); } /* ============ Visit teaser (home page) ============ */ .gh-visitTeaser { background: var(--bg-tint); border-block: 1px solid var(--border-1); } .gh-visitTeaserInner { max-width: 1280px; margin: 0 auto; padding: 48px 24px; display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; } .gh-visitTeaserTitle { font-family: var(--ff-display); font-weight: 700; font-size: 32px; text-transform: uppercase; letter-spacing: 0.02em; color: var(--fg-1); margin: 0 0 6px; } .gh-visitTeaserSub { color: var(--fg-2); margin: 0; font-size: 15px; } .gh-visitTeaser .gh-btnPrimary { text-decoration: none; } /* ============ Footer ============ */ .gh-footer { background: var(--acc-cocoa); color: var(--fg-on-dark); padding: 64px 24px 32px; } .gh-footerInner { max-width: 1280px; margin: 0 auto; } .gh-footerCols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px; padding-bottom: 48px; border-bottom: 1px solid rgba(248, 239, 227, 0.12); } .gh-footerCol h4 { font-family: var(--ff-display); font-size: 13px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--brand-pink-soft); margin: 0 0 14px; } .gh-footerCol a, .gh-footerCol p { display: block; color: var(--fg-on-dark-muted); text-decoration: none; font-size: 14px; padding: 4px 0; margin: 0; } .gh-footerCol a:hover { color: var(--brand-cream); } .gh-footerWordmark { display: inline-flex; align-items: center; line-height: 0; margin-bottom: 14px; } .gh-footerLogoImg { display: block; height: 46px; width: auto; } .gh-footerBlurb { color: var(--fg-on-dark-muted); font-size: 14px; max-width: 280px; line-height: 1.55; } .gh-footerBase { padding-top: 24px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; font-size: 12px; color: var(--fg-on-dark-muted); font-family: var(--ff-display); letter-spacing: 0.08em; text-transform: uppercase; } /* Companies Act disclosure. Deliberately quiet: it has to be present on every page, but it is not what anyone came to read. */ .gh-footerLegal { margin: 14px 0 0; max-width: 70ch; font-size: 11.5px; line-height: 1.6; color: var(--fg-on-dark-muted); } .gh-credit a { color: var(--brand-cream); text-decoration: none; } .gh-credit a:hover { color: var(--brand-pink-soft); text-decoration: underline; text-underline-offset: 3px; } /* ============ Floating contact button (FAB) ============ */ .gh-fab { position: fixed; right: 24px; bottom: 24px; z-index: 60; display: flex; flex-direction: column; align-items: flex-end; gap: 16px; } .gh-fabActions { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; opacity: 0; visibility: hidden; transform: translateY(12px) scale(0.92); transform-origin: bottom right; transition: opacity 200ms ease, transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1), visibility 200ms; pointer-events: none; } .gh-fab.is-open .gh-fabActions { opacity: 1; visibility: visible; transform: translateY(0) scale(1); pointer-events: auto; } .gh-fabAction { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; } .gh-fabLabel { background: var(--bg-elev); color: var(--fg-1); font-family: var(--ff-display); font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; padding: 8px 15px; border-radius: 9999px; box-shadow: var(--sh-2); white-space: nowrap; } .gh-fabIcon { width: 50px; height: 50px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; box-shadow: var(--sh-3); flex-shrink: 0; transition: transform 160ms; } .gh-fabAction:hover .gh-fabIcon { transform: scale(1.08); } .gh-fabIcon svg { width: 26px; height: 26px; } .gh-fabAction--wa .gh-fabIcon { background: #25d366; } .gh-fabAction--call .gh-fabIcon { background: var(--acc-cocoa); } .gh-fabToggle { width: 62px; height: 62px; border-radius: 50%; border: none; cursor: pointer; background: var(--acc-cocoa); color: var(--brand-cream); box-shadow: var(--sh-3); position: relative; display: inline-flex; align-items: center; justify-content: center; transition: background 200ms, transform 200ms; } .gh-fabToggle:hover { background: var(--acc-charcoal); transform: translateY(-2px); } .gh-fabToggle:active { transform: scale(0.96); } .gh-fabToggle svg { width: 28px; height: 28px; position: absolute; transition: opacity 200ms, transform 200ms; } .gh-fabToggleClose { opacity: 0; transform: rotate(-90deg); } .gh-fab.is-open .gh-fabToggleChat { opacity: 0; transform: rotate(90deg); } .gh-fab.is-open .gh-fabToggleClose { opacity: 1; transform: rotate(0); } .gh-fab.is-open .gh-fabToggle { background: var(--acc-charcoal); } @media (prefers-reduced-motion: reduce) { .gh-fabActions, .gh-fabToggle, .gh-fabToggle svg, .gh-fabIcon { transition: none; } } /* ============ Legal / policy pages ============ */ .gh-legal { background: var(--bg); } .gh-legalInner { /* Narrow measure: long prose is far easier to read than a full-width page. */ max-width: 720px; margin: 0 auto; padding: 56px 24px 72px; } .gh-legalUpdated { font-family: var(--ff-display); font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--fg-3); margin: 0 0 32px; } .gh-legalInner h2 { font-family: var(--ff-display); font-weight: 700; font-size: 22px; text-transform: uppercase; letter-spacing: 0.02em; color: var(--fg-1); margin: 40px 0 12px; } .gh-legalInner h2:first-of-type { margin-top: 0; } .gh-legalInner h3 { font-family: var(--ff-display); font-weight: 600; font-size: 16px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--fg-1); margin: 26px 0 10px; } .gh-legalInner p, .gh-legalInner li { color: var(--fg-2); font-size: 16px; line-height: 1.65; margin: 0 0 14px; } .gh-legalInner ul { margin: 0 0 14px; padding-left: 20px; } .gh-legalInner strong { color: var(--fg-1); } .gh-legalInner a { color: var(--brand-raspberry); text-decoration: underline; text-underline-offset: 3px; } .gh-legalInner a:hover { color: var(--brand-raspberry-dk); } @media (max-width: 768px) { .gh-legalInner { padding: 40px 20px 56px; } .gh-legalInner h2 { font-size: 19px; margin-top: 32px; } } /* ============ Shopping list ============ */ /* Add-to-list button on the product card */ .gh-addBtn { display: inline-flex; align-items: center; gap: 6px; flex: none; font-family: var(--ff-display); font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--acc-cocoa); background: transparent; border: 1.5px solid var(--border-2); border-radius: 9999px; /* 44px minimum, so the button is reachable on a phone. */ min-height: 44px; padding: 10px 16px; cursor: pointer; transition: background 160ms, border-color 160ms, color 160ms; } .gh-addBtn svg { width: 14px; height: 14px; flex: none; } .gh-addBtn .gh-addIconTick, .gh-addBtn.is-added .gh-addIconPlus { display: none; } .gh-addBtn.is-added .gh-addIconTick { display: block; } .gh-addBtn:hover { background: var(--bg-tint); border-color: var(--acc-cocoa); } .gh-addBtn.is-added { background: var(--acc-sage); border-color: var(--acc-sage); color: #fff; } .gh-addBtn.is-added:hover { background: #5c7540; border-color: #5c7540; } /* Floating launcher, bottom-left so it never fouls the contact FAB's speed-dial as it expands upward on the right. */ .gh-listFab { position: fixed; left: 24px; bottom: 24px; z-index: 58; display: inline-flex; align-items: center; gap: 10px; padding: 13px 20px; border: none; border-radius: 9999px; background: var(--acc-cocoa); color: var(--brand-cream); font-family: var(--ff-display); font-size: 13px; text-transform: uppercase; letter-spacing: 0.1em; cursor: pointer; box-shadow: var(--sh-3); transition: background 200ms, transform 200ms; } .gh-listFab[hidden] { display: none; } .gh-listFab:hover { background: var(--acc-charcoal); transform: translateY(-2px); } .gh-listFab svg { width: 19px; height: 19px; } .gh-listFabCount { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 9999px; background: var(--acc-mustard); color: var(--acc-cocoa); font-size: 12px; line-height: 22px; text-align: center; letter-spacing: 0; } /* Drawer */ .gh-listDrawer { position: fixed; inset: 0; z-index: 70; } .gh-listDrawer[hidden] { display: none; } .gh-listBackdrop { position: absolute; inset: 0; background: rgba(31, 26, 24, 0.55); opacity: 0; transition: opacity 240ms ease; } .gh-listDrawer.is-open .gh-listBackdrop { opacity: 1; } .gh-listPanel { position: absolute; top: 0; right: 0; bottom: 0; width: min(420px, 100%); display: flex; flex-direction: column; background: var(--bg); box-shadow: var(--sh-4); transform: translateX(100%); transition: transform 260ms cubic-bezier(0.22, 0.61, 0.36, 1); } .gh-listDrawer.is-open .gh-listPanel { transform: translateX(0); } .gh-listHead { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 22px 12px; background: var(--acc-cocoa); color: var(--brand-cream); } .gh-listTitle { font-family: var(--ff-display); font-weight: 700; font-size: 26px; text-transform: uppercase; letter-spacing: 0.02em; margin: 0; } .gh-listClose { background: rgba(255, 239, 227, 0.14); border: none; color: var(--brand-cream); cursor: pointer; border-radius: 9999px; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; flex: none; transition: background 160ms; } .gh-listClose:hover { background: rgba(255, 239, 227, 0.26); } .gh-listClose svg { width: 19px; height: 19px; } .gh-listIntro { margin: 0; padding: 14px 22px; background: var(--acc-cocoa); color: var(--fg-on-dark-muted); font-size: 13px; line-height: 1.5; } .gh-listBody { flex: 1; overflow-y: auto; padding: 8px 16px; } .gh-listEmpty { color: var(--fg-2); font-size: 15px; text-align: center; padding: 48px 20px; margin: 0; } .gh-listItems { list-style: none; margin: 0; padding: 0; } .gh-listItem { display: flex; align-items: center; gap: 12px; padding: 12px 6px; border-bottom: 1px solid var(--border-1); } .gh-listItem:last-child { border-bottom: none; } .gh-listThumb { width: 54px; height: 54px; flex: none; border-radius: 10px; overflow: hidden; background: var(--bg-tint); display: flex; align-items: center; justify-content: center; } .gh-listThumb img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; } /* The card placeholder carries a text label that will not fit a 54px tile. */ .gh-listThumb .gh-pimgPh { position: static; width: 100%; height: 100%; border-radius: 0; } .gh-listThumb .gh-pimgPh span { display: none; } .gh-listThumb .gh-pimgPh svg { width: 24px; height: 24px; } .gh-listInfo { flex: 1; min-width: 0; } .gh-listName { font-weight: 700; font-size: 14px; color: var(--fg-1); line-height: 1.3; } .gh-listMeta { font-size: 12px; color: var(--fg-3); margin-top: 2px; } .gh-listQty { display: inline-flex; align-items: center; gap: 2px; flex: none; border: 1px solid var(--border-2); border-radius: 9999px; padding: 2px; background: var(--bg-elev); } .gh-listQty button { width: 30px; height: 30px; border: none; background: transparent; color: var(--acc-cocoa); cursor: pointer; border-radius: 9999px; display: inline-flex; align-items: center; justify-content: center; transition: background 140ms; } .gh-listQty button:hover { background: var(--bg-tint); } .gh-listQty svg { width: 13px; height: 13px; } .gh-listQtyNum { min-width: 20px; text-align: center; font-family: var(--ff-mono); font-size: 14px; color: var(--fg-1); } .gh-listDrop { width: 30px; height: 30px; flex: none; border: none; background: transparent; color: var(--fg-3); cursor: pointer; border-radius: 9999px; display: inline-flex; align-items: center; justify-content: center; transition: color 140ms, background 140ms; } .gh-listDrop:hover { color: var(--brand-raspberry); background: var(--brand-pink-soft); } .gh-listDrop svg { width: 15px; height: 15px; } .gh-listFoot { border-top: 1px solid var(--border-1); padding: 16px 22px calc(16px + env(safe-area-inset-bottom, 0px)); background: var(--bg-elev); } .gh-listFoot:empty { display: none; } .gh-listTotal { display: flex; align-items: baseline; justify-content: space-between; font-family: var(--ff-display); text-transform: uppercase; letter-spacing: 0.08em; font-size: 13px; color: var(--fg-2); } .gh-listTotal strong { font-size: 24px; color: var(--fg-1); letter-spacing: 0; } .gh-listNote { margin: 4px 0 0; font-size: 12px; color: var(--fg-3); line-height: 1.45; } /* The disabled Send button explains itself in a title attribute, which a phone never shows. This says the same thing out loud, and only while no shop has been picked. */ .gh-listPickNote { margin-top: 10px; } /* ============ Which-shop picker ============ */ .gh-storePick { margin-top: 14px; } .gh-storePickLabel { display: block; font-family: var(--ff-display); font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--fg-2); margin-bottom: 8px; } .gh-storeBtns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .gh-storeBtn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 12px 10px; border: 1.5px solid var(--border-2); border-radius: 12px; background: var(--bg-elev); color: var(--fg-1); font-family: var(--ff-display); font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; cursor: pointer; transition: border-color 160ms, background 160ms, color 160ms; } .gh-storeBtn:hover { border-color: var(--acc-cocoa); background: var(--bg-tint); } .gh-storeBtn.is-on { background: var(--acc-sage); border-color: var(--acc-sage); color: #fff; } .gh-storeBtnTick { display: none; width: 14px; height: 14px; } .gh-storeBtnTick svg { width: 100%; height: 100%; } .gh-storeBtn.is-on .gh-storeBtnTick { display: block; } /* Raised only when someone tries to send without choosing. */ .gh-storePick.is-missing .gh-storeBtn { border-color: var(--brand-raspberry); } .gh-storePick.is-missing .gh-storePickLabel { color: var(--brand-raspberry); } .gh-storePick.is-missing .gh-storePickLabel::after { content: ", pick one to send"; letter-spacing: 0.04em; } /* The contact form sits on a light card, so its picker needs its own spacing. */ .gh-contactForm .gh-storePick { margin-top: 4px; } .gh-listSend { margin-top: 14px; display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 15px 20px; border-radius: 9999px; background: #25d366; color: #fff; text-decoration: none; font-family: var(--ff-display); font-size: 15px; text-transform: uppercase; letter-spacing: 0.08em; box-shadow: var(--sh-2); transition: background 160ms, transform 160ms; } .gh-listSend:hover { background: #1eb457; transform: translateY(-1px); } /* No href until a shop is picked, so this is a visual match for that state rather than the thing preventing the click. */ .gh-listSend.is-blocked { background: var(--border-2); color: var(--fg-3); box-shadow: none; cursor: not-allowed; } .gh-listSend.is-blocked:hover { background: var(--border-2); transform: none; } .gh-listSend svg { width: 19px; height: 19px; flex: none; } .gh-listClearBtn { margin-top: 8px; width: 100%; padding: 10px; background: transparent; border: none; color: var(--fg-3); font-family: var(--ff-body); font-size: 13px; cursor: pointer; border-radius: 8px; transition: color 140ms; } .gh-listClearBtn:hover { color: var(--brand-raspberry); text-decoration: underline; text-underline-offset: 3px; } /* Locks the page behind the open drawer so only the list scrolls. */ body.gh-noScroll { overflow: hidden; } @media (prefers-reduced-motion: reduce) { .gh-listPanel, .gh-listBackdrop, .gh-listFab, .gh-addBtn { transition: none; } } /* ============ Responsive ============ */ @media (max-width: 1024px) { .gh-catGrid { grid-template-columns: repeat(3, 1fr); gap: 24px; } .gh-footerCols { grid-template-columns: 1fr 1fr; gap: 36px; } .gh-originTitle { font-size: 36px; } } @media (max-width: 768px) { /* No physical keyboard, so the "/" shortcut hint is just noise. */ .gh-searchHint { display: none; } /* Counts stay, but tighter, so six categories still fit the scroll strip. */ .gh-catCount { margin-left: 5px; min-width: 18px; padding: 1px 5px; font-size: 10px; } .gh-headerInner { padding: 12px 16px 14px; gap: 8px; } .gh-logoImg { height: 38px; } .gh-iconBtn { display: none; } .gh-nav { display: none; } .gh-burger { display: block; } .gh-catBarInner { padding: 10px 16px; gap: 20px; } .gh-pageHeroInner { padding: 40px 20px 28px; } .gh-pageHeroSub { font-size: 15px; } .gh-visitTeaserInner { padding: 36px 20px; flex-direction: column; align-items: flex-start; text-align: left; gap: 18px; } .gh-visitTeaserTitle { font-size: 26px; } .gh-contactInner { padding: 48px 20px; } .gh-contactCard { grid-template-columns: 1fr; gap: 28px; padding: 28px; } .gh-contactTitle { font-size: 30px; } .gh-contactMeta { grid-template-columns: 1fr 1fr; gap: 16px; } .gh-heroInner { grid-template-columns: 1fr; padding: 56px 20px; gap: 32px; } .gh-heroText { order: 1; } .gh-dealSlider { order: 2; } .gh-heroImg { aspect-ratio: 4/3; max-width: 480px; } .gh-heroSub { font-size: 16px; } .gh-catSection { padding: 48px 20px 24px; } .gh-prodSection { padding: 32px 20px 64px; } .gh-sectionTitle { font-size: 28px; } .gh-catCircle { border-radius: 50%; } .gh-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px; } .gh-pBody { padding: 12px 14px 14px; } .gh-pName { font-size: 15px; } .gh-pDesc { font-size: 12px; } .gh-pPrice { font-size: 18px; } /* Cards drop to ~160px here, too narrow for price and button side by side. */ .gh-pFoot { flex-direction: column; align-items: stretch; gap: 10px; } .gh-addBtn { justify-content: center; width: 100%; } .gh-originInner { grid-template-columns: 1fr; padding: 48px 20px; gap: 28px; } .gh-originTitle { font-size: 30px; } .gh-visitInner { padding: 48px 20px; } .gh-visitTitle { font-size: 30px; } .gh-visitGrid { grid-template-columns: 1fr; gap: 24px; padding: 22px; } .gh-mapCard iframe { height: 280px; } .gh-footer { padding: 48px 20px 24px; } .gh-footerCols { grid-template-columns: 1fr; gap: 32px; padding-bottom: 32px; } .gh-footerBase { flex-direction: column; align-items: flex-start; gap: 8px; } } @media (max-width: 480px) { .gh-catGrid { grid-template-columns: repeat(2, 1fr); } .gh-heroCtas { flex-direction: column; align-items: stretch; } .gh-heroCtas .gh-btn { width: 100%; } .gh-fab { right: 16px; bottom: 16px; } /* Drops the "My list" wording so the pill stays clear of the contact FAB on a narrow screen; the bag icon and count still read as a list. */ .gh-listFab { left: 16px; bottom: 16px; padding: 12px 16px; } .gh-listFabText { display: none; } }