/** Shopify CDN: Minification failed Line 65:14 Expected identifier but found whitespace Line 65:15 Unexpected "0" Line 1301:0 Unexpected "}" **/ /* ================================ Upcoming Menu: ONE continuous panel ================================ */ /* Heading / CTA / deadline block */ #shopify-section-template--28071775764867__rich_text_3qnNyL{ background: #eef2f0 !important; padding-top: 90px !important; padding-bottom: 22px !important; /* icons -> CTA */ border-top: 1px solid rgba(0,0,0,0.06); } /* Menu (image row) block */ #shopify-section-template--28071775764867__multicolumn_d8GNzw{ background: #eef2f0 !important; padding-top: 0 !important; padding-bottom: 90px !important; border-bottom: 1px solid rgba(0,0,0,0.06); } /* Remove any accidental inner backgrounds so the panel reads clean */ #shopify-section-template--28071775764867__rich_text_3qnNyL .rich-text, #shopify-section-template--28071775764867__rich_text_3qnNyL .page-width, #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn, #shopify-section-template--28071775764867__multicolumn_d8GNzw .page-width{ background: transparent !important; } /* Kill the “grey strip” gap at top of the menu section */ #shopify-section-template--28071775764867__multicolumn_d8GNzw{ padding-top: 0 !important; } #shopify-section-template--28071775764867__multicolumn_d8GNzw .page-width, #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn{ padding-top: 0 !important; margin-top: 0 !important; } /* ================================ Remove the grey strip between heading and menu ================================ */ /* 1) Remove bottom padding/margins inside the heading section that can reveal page bg */ #shopify-section-template--28071775764867__rich_text_3qnNyL{ padding-bottom: 0 !important; } #shopify-section-template--28071775764867__rich_text_3qnNyL .rich-text, #shopify-section-template--28071775764867__rich_text_3qnNyL .page-width{ padding-bottom: 0 !important; margin-bottom: 0 !important; } /* 2) Remove top padding/margins inside the menu section (these usually create the strip) */ #shopify-section-template--28071775764867__multicolumn_d8GNzw{ padding-top: 0 !important; } #shopify-section-template--28071775764867__multicolumn_d8GNzw .page-width, #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn, padding-top: 0 !important; margin-top: 0 !important; } /* 3) If the theme adds a title wrapper spacing above the multicolumn content */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .title-wrapper-with-link, #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn__title{ margin-top: 0 !important; padding-top: 0 !important; } /* Remove any inter-section gap + ensure both sections paint the same background */ #shopify-section-template--28071775764867__rich_text_3qnNyL, #shopify-section-template--28071775764867__multicolumn_d8GNzw{ background: #eef2f0 !important; } /* Kill bottom margin on the heading section + top margin on the menu section */ #shopify-section-template--28071775764867__rich_text_3qnNyL{ margin-bottom: 0 !important; padding-bottom: 0 !important; } #shopify-section-template--28071775764867__multicolumn_d8GNzw{ margin-top: 0 !important; padding-top: 0 !important; } /* Some themes add spacing via first/last child inside section */ #shopify-section-template--28071775764867__rich_text_3qnNyL > *:last-child{ margin-bottom: 0 !important; } #shopify-section-template--28071775764867__multicolumn_d8GNzw > *:first-child{ margin-top: 0 !important; } /* Remove any inter-section gap + ensure both sections paint the same background */ #shopify-section-template--28071775764867__rich_text_3qnNyL, #shopify-section-template--28071775764867__multicolumn_d8GNzw{ background: #eef2f0 !important; } /* Kill bottom margin on the heading section + top margin on the menu section */ #shopify-section-template--28071775764867__rich_text_3qnNyL{ margin-bottom: 0 !important; padding-bottom: 0 !important; } #shopify-section-template--28071775764867__multicolumn_d8GNzw{ margin-top: 0 !important; padding-top: 0 !important; } /* Some themes add spacing via first/last child inside section */ #shopify-section-template--28071775764867__rich_text_3qnNyL > *:last-child{ margin-bottom: 0 !important; } #shopify-section-template--28071775764867__multicolumn_d8GNzw > *:first-child{ margin-top: 0 !important; } /* ================================ Upcoming Menu: show ONLY first week (hide the rest) ================================ */ /* ================================ Spacing rhythm: CTA → Upcoming Menu → Feb 8 ================================ */ /* Reduce space below the CTA/deadline block */ #shopify-section-template--28071775764867__rich_text_3qnNyL{ padding-top: 70px !important; /* was 90 */ padding-bottom: 10px !important; /* tighter before menu */ } /* Pull the menu section up slightly */ #shopify-section-template--28071775764867__multicolumn_d8GNzw{ padding-top: 10px !important; padding-bottom: 70px !important; } /* Reduce top spacing inside the multicolumn content */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .page-width, #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn{ padding-top: 0 !important; margin-top: 0 !important; } /* ================================ Hide other “week” sections below Feb 8 (they are separate multicolumn sections) ================================ */ /* Hide ALL multicolumn sections that appear AFTER the Upcoming Menu rich text section */ /* Re-show the Feb 8 menu section */ #shopify-section-template--28071775764867__multicolumn_d8GNzw{ display: block !important; } #shopify-section-template--28071775764867__multicolumn_d8GNzw{ padding-top: 10px !important; padding-bottom: 70px !important; } /* Make the Upcoming Menu header sit higher (less dead space above) */ #shopify-section-template--28071775764867__rich_text_3qnNyL{ padding-top: 50px !important; /* was ~90 */ padding-bottom: 10px !important; } /* Remove internal top margins that push the heading down */ #shopify-section-template--28071775764867__rich_text_3qnNyL .rich-text__blocks{ margin-top: 0 !important; } #shopify-section-template--28071775764867__rich_text_3qnNyL .rich-text__heading{ margin-top: 0 !important; } /* Move Upcoming Menu heading up within its panel */ #shopify-section-template--28071775764867__rich_text_3qnNyL{ padding-top: 50px !important; padding-bottom: 8px !important; } #shopify-section-template--28071775764867__rich_text_3qnNyL .rich-text__blocks, #shopify-section-template--28071775764867__rich_text_3qnNyL .rich-text__heading{ margin-top: 0 !important; } /* ========================= Tighten panel spacing above the Next Week’s Selection heading ========================= */ /* Reduce overall panel height */ #shopify-section-template--28071775764867__rich_text_3qnNyL{ padding-top: 35px !important; padding-bottom: 10px !important; } /* Kill the internal spacing that’s actually creating the big gap */ #shopify-section-template--28071775764867__rich_text_3qnNyL .rich-text{ padding-top: 0 !important; padding-bottom: 0 !important; } #shopify-section-template--28071775764867__rich_text_3qnNyL .page-width{ padding-top: 0 !important; padding-bottom: 0 !important; } #shopify-section-template--28071775764867__rich_text_3qnNyL .rich-text__blocks{ margin-top: 0 !important; margin-bottom: 0 !important; } #shopify-section-template--28071775764867__rich_text_3qnNyL .rich-text__heading{ margin-top: 0 !important; margin-bottom: 10px !important; } /* ========================= FORCE multicolumn slider on desktop (Feb 8 section) ========================= */ @media (min-width: 990px){ /* Hide ugly scrollbar without breaking scrolling */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-list{ scrollbar-width: none; } } /* ========================= Reduce meal text size + clamp lines (clean grid) ========================= */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info, #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info *{ text-align: left !important; } /* Title */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info h3, #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info .inline-richtext{ font-size: 14px !important; line-height: 1.2 !important; margin: 10px 0 6px !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Body text (if present) */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info .rte, #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info p{ font-size: 12px !important; line-height: 1.35 !important; margin: 0 !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; opacity: 0.85; } /* ========================= Softer premium panel background ========================= */ #shopify-section-template--28071775764867__rich_text_3qnNyL, #shopify-section-template--28071775764867__multicolumn_d8GNzw{ background: linear-gradient(180deg, #f7f9f8 0%, #eef2f0 100%) !important; } /* Make the menu carousel area use the panel background (not white) */ #shopify-section-template--28071775764867__multicolumn_d8GNzw, #shopify-section-template--28071775764867__multicolumn_d8GNzw .page-width, #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn{ background: linear-gradient(180deg, #f7f9f8 0%, #eef2f0 100%) !important; } /* Remove any default white card backgrounds */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card, #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__image-wrapper, #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info{ background: transparent !important; } /* Tighten the whole card and kill the "big grey slab" feeling */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card{ border-radius: 12px; overflow: hidden; } /* Reduce info area padding + spacing */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info{ padding: 12px 14px 14px !important; } /* Title smaller + 1–2 lines max */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info h3, #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info .inline-richtext{ font-size: 13px !important; line-height: 1.2 !important; margin: 0 0 6px !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Body text: smaller + clamp */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info .rte, #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info p{ font-size: 11.5px !important; line-height: 1.35 !important; margin: 0 !important; opacity: 0.8; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* Optional: hide ALLERGENS line if it’s making the cards look ugly */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info *{ max-width: 100%; } #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info :is(h4, strong){ /* comment this out if you still want bold labels */ font-weight: 600; } /* Right-edge fade hint */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-list{ position: relative; mask-image: linear-gradient(90deg, #000 0%, #000 88%, transparent 100%); -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 88%, transparent 100%); } /* Optional: a subtle arrow cue on desktop */ @media (min-width: 990px){ #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-list::after{ content: "›"; position: absolute; right: 6px; top: 38%; font-size: 34px; line-height: 1; opacity: 0.35; pointer-events: none; } } /* Dots (static hint) under the carousel */ @media (min-width: 990px){ #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-list::before{ content: ""; position: absolute; left: 50%; bottom: -18px; transform: translateX(-50%); width: 64px; height: 6px; opacity: 0.35; background: radial-gradient(circle at 6px 3px, #1f3b33 2px, transparent 3px), radial-gradient(circle at 22px 3px, #1f3b33 2px, transparent 3px), radial-gradient(circle at 38px 3px, #1f3b33 2px, transparent 3px), radial-gradient(circle at 54px 3px, #1f3b33 2px, transparent 3px); pointer-events: none; } } /* ========================================================= PANEL BACKGROUND: make the carousel sit on the same panel colour (you said it looks white right now) ========================================================= */ #shopify-section-template--28071775764867__rich_text_3qnNyL, #shopify-section-template--28071775764867__multicolumn_d8GNzw{ background: #eef2f0 !important; } #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn, #shopify-section-template--28071775764867__multicolumn_d8GNzw .page-width{ background: transparent !important; } /* ========================================================= HEADING SPACING + SIZE (match “What We Do” vibe) ========================================================= */ #shopify-section-template--28071775764867__rich_text_3qnNyL{ padding-top: 40px !important; padding-bottom: 10px !important; } #shopify-section-template--28071775764867__rich_text_3qnNyL h2{ font-size: clamp(34px, 4vw, 48px) !important; line-height: 1.05 !important; margin: 0 !important; text-align: center !important; } @media (min-width: 990px){ /* exactly 3 visible */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-list__item{ flex: 0 0 calc((100% - 56px) / 3) !important; max-width: calc((100% - 56px) / 3) !important; } } @media (max-width: 989px){ /* keep mobile feeling like a carousel too */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-list__item{ flex: 0 0 85% !important; max-width: 85% !important; } } /* Hide scrollbar (looks cleaner) */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-list{ scrollbar-width: none !important; } /* ========================================================= CARD CLEANUP: remove the “big grey box” feel and tighten typography ========================================================= */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card, #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info{ background: transparent !important; } #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__image-wrapper{ border-radius: 18px !important; overflow: hidden !important; } /* Kill the huge info block height/padding */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info{ padding: 14px 0 0 !important; min-height: unset !important; } /* Title: smaller, clean */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__heading{ font-size: 13px !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; margin: 0 0 6px !important; } /* Body copy: smaller + clamp so it doesn’t turn into a paragraph wall */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .rte{ font-size: 12.5px !important; line-height: 1.35 !important; opacity: 0.85 !important; display: -webkit-box !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 3 !important; overflow: hidden !important; } /* Allergens line: force it to behave like the rest (yours is shouting) */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info strong{ font-size: 12.5px !important; letter-spacing: 0.02em !important; font-weight: 600 !important; } /* ========================================================= DOTS: pull them up (they’re currently way too low) (works if your theme uses slider dots markup) ========================================================= */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .slider-counter, #shopify-section-template--28071775764867__multicolumn_d8GNzw .slider-buttons{ margin-top: 10px !important; } #shopify-section-template--28071775764867__multicolumn_d8GNzw .slider-counter{ padding-top: 0 !important; padding-bottom: 0 !important; } /* === CAROUSEL: stop trackpad scroll getting trapped (allow vertical scroll) === */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .slider, #shopify-section-template--28071775764867__multicolumn_d8GNzw .slider-component, #shopify-section-template--28071775764867__multicolumn_d8GNzw .flickity-viewport, #shopify-section-template--28071775764867__multicolumn_d8GNzw .swiper, #shopify-section-template--28071775764867__multicolumn_d8GNzw .swiper-wrapper { touch-action: pan-y !important; } /* === CARD TEXT: tighten + keep it clean like Simmer reference === */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info { padding: 12px 0 0 !important; /* smaller info area */ } #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info h3 { font-size: 13px !important; letter-spacing: 0.06em !important; margin: 0 0 6px !important; } #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info p, #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info span { font-size: 12px !important; line-height: 1.35 !important; margin: 0 !important; } /* Allergens: force it to behave like the rest */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info .allergens, #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info [class*="allergen"], #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info strong { font-size: 12px !important; letter-spacing: 0.04em !important; font-weight: 600 !important; } /* ================================ AK MENU CAROUSEL FIX PACK Section: multicolumn_d8GNzw ================================== */ /* A) STOP the vertical scroll getting trapped by horizontal slider */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .slider, #shopify-section-template--28071775764867__multicolumn_d8GNzw .slider-component, #shopify-section-template--28071775764867__multicolumn_d8GNzw .flickity-viewport, #shopify-section-template--28071775764867__multicolumn_d8GNzw .flickity-slider, #shopify-section-template--28071775764867__multicolumn_d8GNzw .swiper, #shopify-section-template--28071775764867__multicolumn_d8GNzw .swiper-wrapper, #shopify-section-template--28071775764867__multicolumn_d8GNzw .splide__track, #shopify-section-template--28071775764867__multicolumn_d8GNzw .splide__list { touch-action: pan-y !important; /* allow page vertical scroll */ overscroll-behavior: auto !important; } /* B) ALLERGENS: same size everywhere + directly under macros */ /* Make info stack predictable */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info { display: flex !important; flex-direction: column !important; gap: 6px !important; } /* If allergens are a heading/strong on one card, force it down */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info h1, #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info h2, #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info h3, #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info h4, #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info strong, #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info b, #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info [class*="allergen"], #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info [class*="Allergen"], #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info [id*="allergen"], #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info [id*="Allergen"] { font-size: 12px !important; line-height: 1.35 !important; font-weight: 600 !important; letter-spacing: 0.04em !important; margin: 0 !important; } /* Make sure allergens sit immediately after the macros line (usually last paragraph) */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info > * { order: 1; } #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info [class*="allergen"], #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info [id*="allergen"] { order: 3 !important; } /* If macros are in the last paragraph, keep them order 2 */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info p:last-of-type { order: 2 !important; } /* C) Kill shadow so arrows don’t disappear */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card, #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__image-wrapper, #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__image-wrapper img { box-shadow: none !important; filter: none !important; } /* D) Right arrow OUTSIDE the last image */ #shopify-section-template--28071775764867__multicolumn_d8GNzw { position: relative !important; } /* Try Shopify/Dawn slider button first */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .slider-button--next, #shopify-section-template--28071775764867__multicolumn_d8GNzw .flickity-button.flickity-prev-next-button.next, #shopify-section-template--28071775764867__multicolumn_d8GNzw .swiper-button-next, #shopify-section-template--28071775764867__multicolumn_d8GNzw .splide__arrow--next { position: absolute !important; right: -28px !important; /* pushes outside the last card */ top: 42% !important; transform: translateY(-50%) !important; z-index: 50 !important; opacity: 1 !important; } /* Make the arrow readable + clickable */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .slider-button--next svg, #shopify-section-template--28071775764867__multicolumn_d8GNzw .flickity-button svg, #shopify-section-template--28071775764867__multicolumn_d8GNzw .swiper-button-next:after, #shopify-section-template--28071775764867__multicolumn_d8GNzw .splide__arrow--next svg { filter: none !important; } #shopify-section-template--28071775764867__multicolumn_d8GNzw .slider-button, #shopify-section-template--28071775764867__multicolumn_d8GNzw .flickity-button, #shopify-section-template--28071775764867__multicolumn_d8GNzw .swiper-button-next, #shopify-section-template--28071775764867__multicolumn_d8GNzw .splide__arrow { background: rgba(238,242,240,0.95) !important; border: 1px solid rgba(0,0,0,0.08) !important; border-radius: 999px !important; width: 44px !important; height: 44px !important; } /* ========= AK: MULTICOLUMN MENU CAROUSEL - WILDCARD TARGETING ========= */ /* targets ANY multicolumn section on template--28071775764867 */ section[id^="shopify-section-template--28071775764867__multicolumn"]{ background: #eef2f0 !important; /* keep consistent */ } /* kill shadows that might hide arrows */ section[id^="shopify-section-template--28071775764867__multicolumn"] .multicolumn-card, section[id^="shopify-section-template--28071775764867__multicolumn"] .multicolumn-card__image-wrapper, section[id^="shopify-section-template--28071775764867__multicolumn"] img{ box-shadow: none !important; filter: none !important; } /* stop the “scroll trap” */ section[id^="shopify-section-template--28071775764867__multicolumn"] [class*="slider"], section[id^="shopify-section-template--28071775764867__multicolumn"] [class*="flickity"], section[id^="shopify-section-template--28071775764867__multicolumn"] [class*="swiper"], section[id^="shopify-section-template--28071775764867__multicolumn"] [class*="splide"]{ touch-action: pan-y !important; } /* tighten + standardise the text block (and prevent giant “ALLERGENS”) */ section[id^="shopify-section-template--28071775764867__multicolumn"] .multicolumn-card__info{ padding: 14px 16px !important; } section[id^="shopify-section-template--28071775764867__multicolumn"] .multicolumn-card__info h1, section[id^="shopify-section-template--28071775764867__multicolumn"] .multicolumn-card__info h2, section[id^="shopify-section-template--28071775764867__multicolumn"] .multicolumn-card__info h3, section[id^="shopify-section-template--28071775764867__multicolumn"] .multicolumn-card__info h4, section[id^="shopify-section-template--28071775764867__multicolumn"] .multicolumn-card__info strong, section[id^="shopify-section-template--28071775764867__multicolumn"] .multicolumn-card__info b{ font-size: 12px !important; line-height: 1.35 !important; margin: 0 !important; } /* make anything that looks like allergens small + tucked under */ section[id^="shopify-section-template--28071775764867__multicolumn"] .multicolumn-card__info *{ max-width: 100%; } section[id^="shopify-section-template--28071775764867__multicolumn"] .multicolumn-card__info [class*="allergen"], section[id^="shopify-section-template--28071775764867__multicolumn"] .multicolumn-card__info [id*="allergen"]{ font-size: 12px !important; line-height: 1.35 !important; margin-top: 6px !important; } /* force next arrow OUTSIDE (covers common slider libs) */ section[id^="shopify-section-template--28071775764867__multicolumn"]{ position: relative !important; } section[id^="shopify-section-template--28071775764867__multicolumn"] .slider-button--next, section[id^="shopify-section-template--28071775764867__multicolumn"] .flickity-button.next, section[id^="shopify-section-template--28071775764867__multicolumn"] .swiper-button-next, section[id^="shopify-section-template--28071775764867__multicolumn"] .splide__arrow--next{ position: absolute !important; right: -30px !important; top: 45% !important; transform: translateY(-50%) !important; z-index: 999 !important; opacity: 1 !important; } section[id^="shopify-section-template--28071775764867__multicolumn"] .slider-button, section[id^="shopify-section-template--28071775764867__multicolumn"] .flickity-button, section[id^="shopify-section-template--28071775764867__multicolumn"] .swiper-button-next, section[id^="shopify-section-template--28071775764867__multicolumn"] .splide__arrow{ background: rgba(238,242,240,0.95) !important; border: 1px solid rgba(0,0,0,0.10) !important; border-radius: 999px !important; width: 44px !important; height: 44px !important; } /* ================================ AK: Desktop menu carousel tidy-up Scoped to this homepage template ================================== */ /* Scope to this specific template (prevents affecting other pages) */ [id^="shopify-section-template--28071775764867__multicolumn_"]{ background: #eef2f0 !important; } /* Kill any card/shadow styling that makes arrows vanish */ [id^="shopify-section-template--28071775764867__multicolumn_"] .card, [id^="shopify-section-template--28071775764867__multicolumn_"] .multicolumn-card, [id^="shopify-section-template--28071775764867__multicolumn_"] .multicolumn-card__info, [id^="shopify-section-template--28071775764867__multicolumn_"] .multicolumn-card__image-wrapper{ box-shadow: none !important; filter: none !important; } /* Force consistent rounded corners (prevents the “sharp when slider active” issue) */ [id^="shopify-section-template--28071775764867__multicolumn_"] .multicolumn-card__image-wrapper, [id^="shopify-section-template--28071775764867__multicolumn_"] .multicolumn-card__image-wrapper img, [id^="shopify-section-template--28071775764867__multicolumn_"] .media, [id^="shopify-section-template--28071775764867__multicolumn_"] .media img{ border-radius: 18px !important; overflow: hidden !important; } /* Reduce the “text panel” height + make text more like the nice plain version */ [id^="shopify-section-template--28071775764867__multicolumn_"] .multicolumn-card__info{ background: transparent !important; padding: 12px 6px 0 !important; min-height: 0 !important; } /* Meal title */ [id^="shopify-section-template--28071775764867__multicolumn_"] .multicolumn-card__info h3, [id^="shopify-section-template--28071775764867__multicolumn_"] .multicolumn-card__info .h3{ margin: 10px 0 6px !important; font-size: 13px !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; } /* Body text + macros */ [id^="shopify-section-template--28071775764867__multicolumn_"] .multicolumn-card__info p, [id^="shopify-section-template--28071775764867__multicolumn_"] .multicolumn-card__info .rte{ margin: 0 0 6px !important; font-size: 11px !important; line-height: 1.35 !important; opacity: 0.9 !important; } /* ALLERGENS: make it the same “small” style + keep it directly under the macro line */ [id^="shopify-section-template--28071775764867__multicolumn_"] .multicolumn-card__info p strong{ font-size: 11px !important; font-weight: 600 !important; letter-spacing: 0.04em !important; } /* Pull dots up (they're currently sitting way too low because something has extra height) */ [id^="shopify-section-template--28071775764867__multicolumn_"] .slider-counter, [id^="shopify-section-template--28071775764867__multicolumn_"] .slideshow__controls, [id^="shopify-section-template--28071775764867__multicolumn_"] .slider-buttons{ margin-top: 14px !important; padding-top: 0 !important; } /* Put the right arrow outside the last image */ [id^="shopify-section-template--28071775764867__multicolumn_"] .slider-buttons{ position: absolute !important; right: -34px !important; /* pushes it outside the last card */ top: 50% !important; transform: translateY(-50%) !important; z-index: 50 !important; } /* Make arrow visible & clean */ [id^="shopify-section-template--28071775764867__multicolumn_"] .slider-button{ background: transparent !important; box-shadow: none !important; border: 0 !important; opacity: 1 !important; } /* Reduce chance of the “vertical scroll gets caught” on the carousel area */ [id^="shopify-section-template--28071775764867__multicolumn_"] .slider, [id^="shopify-section-template--28071775764867__multicolumn_"] .slider-component__track{ touch-action: pan-y !important; /* allow vertical scroll to pass through */ } /* ========================= AK MENU OVERRIDES START (do not write menu CSS above this line) ========================= */ /* ========================================================= AK MENU: FINAL OVERRIDES (paste at bottom) ========================================================= */ /* Keep only Feb 8 section visible */ #shopify-section-template--28071775764867__multicolumn_JghJnc, #shopify-section-template--28071775764867__multicolumn_B3kwAi, #shopify-section-template--28071775764867__multicolumn_QknjYL{ display: none !important; } /* Panel background */ #shopify-section-template--28071775764867__rich_text_3qnNyL, #shopify-section-template--28071775764867__multicolumn_d8GNzw{ background: #eef2f0 !important; } /* ========== DESKTOP CAROUSEL (independent of theme slider JS) ========== */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-list{ display: flex !important; flex-wrap: nowrap !important; overflow-x: auto !important; overflow-y: visible !important; gap: 26px !important; padding-bottom: 14px !important; -webkit-overflow-scrolling: touch !important; scrollbar-width: none !important; touch-action: pan-y !important; /* stops scroll “trap” */ } #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-list::-webkit-scrollbar{ display: none !important; } /* 3 cards + a peek of the 4th */ @media (min-width: 990px){ #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-list__item, #shopify-section-template--28071775764867__multicolumn_d8GNzw .grid__item{ flex: 0 0 31.5% !important; max-width: 31.5% !important; } } /* ========== CARD IMAGE + TEXT TIDY-UP ========== */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card, #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info{ background: transparent !important; box-shadow: none !important; } #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__image-wrapper{ border-radius: 18px !important; overflow: hidden !important; } /* Make the text block compact (fix “allergens too far down”) */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info{ padding: 12px 0 0 !important; margin: 0 !important; } #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info p{ margin: 0 0 6px !important; font-size: 11.5px !important; line-height: 1.35 !important; opacity: 0.9 !important; } /* Meal title stays premium */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__heading{ font-size: 13px !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; margin: 10px 0 6px !important; } /* ========== ALLERGENS: FIX THE “TERIYAKI TROUT” BIG ONE + ALIGN UNDER MACROS ========== */ /* If allergens are in strong/b tags */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info strong, #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info b{ font-size: 11.5px !important; font-weight: 600 !important; letter-spacing: 0.04em !important; } /* If that one card outputs allergens as a heading (common cause of “still huge”) */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info h1, #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info h2, #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info h3, #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info h4, #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info h5, #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info h6{ font-size: 11.5px !important; line-height: 1.35 !important; margin: 0 0 6px !important; letter-spacing: 0.04em !important; font-weight: 600 !important; } /* Keep allergens directly after the macro paragraph (usually last p) */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info p:last-of-type{ margin-bottom: 4px !important; } #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info p:last-of-type + *{ margin-top: 0 !important; } /* ========== “MORE” CUE: right edge fade + arrow hint ========== */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-list{ mask-image: linear-gradient(90deg, #000 0%, #000 86%, transparent 100%); -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 86%, transparent 100%); position: relative; } @media (min-width: 990px){ #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-list::after{ content: "›"; position: absolute; right: -10px; top: 38%; font-size: 34px; line-height: 1; opacity: 0.35; pointer-events: none; } } /* 1) Allergens: reduce opacity slightly */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info strong, #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info b, #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info [class*="allergen"], #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info [id*="allergen"]{ opacity: 0.68 !important; } /* 2) Kill the “weird scroll capture”: - disable horizontal scroll chaining - prevent rubber-band style bounce inside the carousel - ensure vertical scroll always wins */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-list{ overscroll-behavior-x: contain !important; overscroll-behavior-y: auto !important; scroll-snap-type: none !important; /* reduces jitter */ touch-action: pan-y !important; } /* If the “ghost grey box” height is causing dots/jitter, trim bottom padding slightly */ #shopify-section-template--28071775764867__multicolumn_d8GNzw{ padding-bottom: 44px !important; /* was 50 */ } #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info{ padding-bottom: 0 !important; margin-bottom: 0 !important; } /* 3) Arrow: your mask clips ::after. Put the arrow on the SECTION instead (outside the masked area). */ #shopify-section-template--28071775764867__multicolumn_d8GNzw{ position: relative !important; } @media (min-width: 990px){ #shopify-section-template--28071775764867__multicolumn_d8GNzw::after{ content: "›"; position: absolute; right: 18px; /* outside cards, inside panel */ top: 43%; transform: translateY(-50%); font-size: 34px; line-height: 1; opacity: 0.38; pointer-events: none; } } /* ========================= Allergens + macros polish ========================= */ /* A) Allergens opacity — catch the stubborn one too */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info *{ /* keep general text readable; specific overrides below */ } /* Anything that is a likely allergen element */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info strong, #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info b, #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info [class*="allergen"], #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info [id*="allergen"], #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info h1, #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info h2, #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info h3, #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info h4, #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info h5, #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info h6{ opacity: 0.70 !important; } /* B) Macros opacity up a bit (keep it punchy) */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info p{ opacity: 0.98 !important; } /* C) Trim the bottom / make cards slightly shorter to reduce scroll “catch” */ #shopify-section-template--28071775764867__multicolumn_d8GNzw{ padding-bottom: 34px !important; /* trimmed further */ } #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info{ padding-top: 10px !important; padding-bottom: 0 !important; margin-bottom: 0 !important; } /* Optional: if there’s any hidden spacing element creating height, nuke it */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info > *{ margin-bottom: 6px !important; } #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info > *:last-child{ margin-bottom: 0 !important; } /* ============================== MENU CAROUSEL: tidy typography + shrink images ~5% ============================== */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info{ padding-top: 10px !important; } /* 1) TITLE (meal name) */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info h3, #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info .h3{ margin: 10px 0 6px !important; line-height: 1.15 !important; letter-spacing: 0.02em !important; } /* 2) INGREDIENTS line (the long description) */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info p{ margin: 0 0 6px !important; line-height: 1.35 !important; opacity: 0.82 !important; /* ingredients slightly softer */ } /* 3) MACROS line (keep punchier) */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info p strong, #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info p b{ opacity: 0.95 !important; } /* 4) ALLERGENS line: tight + consistent placement */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info strong, #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info b, #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info [class*="allergen"], #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info [id*="allergen"], #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info h4, #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info h5, #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info h6{ display: block !important; margin-top: 6px !important; opacity: 0.70 !important; } /* ---- Shrink images by ~5% (wrapper), keep centred ---- */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__image-wrapper{ width: 95% !important; margin-left: auto !important; margin-right: auto !important; } #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__image-wrapper img{ width: 100% !important; height: auto !important; display: block !important; } /* ============================== MENU CAROUSEL: tidy typography + shrink images ~5% ============================== */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info{ padding-top: 10px !important; } /* 1) TITLE (meal name) */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info h3, #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info .h3{ margin: 10px 0 6px !important; line-height: 1.15 !important; letter-spacing: 0.02em !important; } /* 2) INGREDIENTS line (the long description) */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info p{ margin: 0 0 6px !important; line-height: 1.35 !important; opacity: 0.82 !important; /* ingredients slightly softer */ } /* 3) MACROS line (keep punchier) */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info p strong, #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info p b{ opacity: 0.95 !important; } /* 4) ALLERGENS line: tight + consistent placement */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info strong, #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info b, #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info [class*="allergen"], #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info [id*="allergen"], #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info h4, #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info h5, #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info h6{ display: block !important; margin-top: 6px !important; opacity: 0.70 !important; } /* ---- Shrink images by ~5% (wrapper), keep centred ---- */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__image-wrapper{ width: 95% !important; margin-left: auto !important; margin-right: auto !important; } #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__image-wrapper img{ width: 100% !important; height: auto !important; display: block !important; } /* ============================== MENU CAROUSEL: arrows + no dots + meal title size + force-allergen consistency ============================== */ /* 1) Kill the dots / counter */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .slider-counter, #shopify-section-template--28071775764867__multicolumn_d8GNzw .slider-counter--dots, #shopify-section-template--28071775764867__multicolumn_d8GNzw .slider-counter__link, #shopify-section-template--28071775764867__multicolumn_d8GNzw .slider-counter__link--dots{ display: none !important; } /* 2) Make arrows clear, outside the carousel */ #shopify-section-template--28071775764867__multicolumn_d8GNzw slider-component{ position: relative !important; } /* place arrow container over the carousel, but only buttons clickable */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .slider-buttons{ position: absolute !important; top: 42% !important; left: 0 !important; right: 0 !important; transform: translateY(-50%) !important; pointer-events: none !important; } #shopify-section-template--28071775764867__multicolumn_d8GNzw .slider-button{ pointer-events: auto !important; opacity: 1 !important; background: rgba(255,255,255,0.90) !important; border: 1px solid rgba(0,0,0,0.10) !important; border-radius: 999px !important; width: 44px !important; height: 44px !important; box-shadow: none !important; /* kill anything hiding it */ } /* push buttons just OUTSIDE the outer cards */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .slider-button--prev{ position: absolute !important; left: -24px !important; } #shopify-section-template--28071775764867__multicolumn_d8GNzw .slider-button--next{ position: absolute !important; right: -24px !important; } /* also remove any card shadow that could muddy the arrow */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card{ box-shadow: none !important; } /* 3) Meal names slightly bigger */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info h3, #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info .h3{ font-size: 1.15em !important; } /* 4) FORCE allergen consistency (the “third” one is likely not matching your earlier selector) - style any last line in the info block as the allergen line - and also any element that contains allergen-ish classes/ids */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info p:last-child{ margin-top: 6px !important; opacity: 0.70 !important; display: block !important; } #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info [class*="allergen"], #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info [id*="allergen"]{ margin-top: 6px !important; opacity: 0.70 !important; display: block !important; } /* ============================== MENU CAROUSEL – final tidy - remove dots (all variants) - make all allergen lines match the “good” one ============================== */ /* Use a broad selector so it works even if the multicolumn ID changes */ section[id^="shopify-section-template--28071775764867__multicolumn_"] { /* --- Kill dots / pagination (covers most Shopify slider variants) --- */ .slider-counter, .slider-counter--dots, .slider-counter__link, .slider-counter__link--dots, .slideshow__controls, .flickity-page-dots, .splide__pagination, .swiper-pagination, .tns-nav, ul[role="tablist"], [class*="dots"], [class*="pagination"] { display: none !important; visibility: hidden !important; opacity: 0 !important; height: 0 !important; margin: 0 !important; padding: 0 !important; } /* --- Make ALL allergen lines match the “good” one --- */ .multicolumn-card__info p:last-child, .multicolumn-card__info [class*="allergen"], .multicolumn-card__info [id*="allergen"]{ margin-top: 4px !important; /* bring it up */ opacity: 0.95 !important; /* match the stronger Teriyaki look */ font-weight: 600 !important; letter-spacing: 0.02em !important; text-transform: uppercase !important; font-size: 0.82em !important; line-height: 1.25 !important; } } /* === AK Menu carousel (ONLY this section): shrink images 15% === */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__image-wrapper, #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__image { width: 85% !important; margin-left: auto !important; margin-right: auto !important; } #shopify-section-template--28071775764867__multicolumn_d8GNzw img { width: 100% !important; height: auto !important; display: block !important; } /* Hide dots for this section only */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .slider-counter, #shopify-section-template--28071775764867__multicolumn_d8GNzw .slider-counter--dots, #shopify-section-template--28071775764867__multicolumn_d8GNzw .slideshow__controls, #shopify-section-template--28071775764867__multicolumn_d8GNzw .slider-buttons { display: none !important; } /* Make the next/prev arrows clearer */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .slider-button { opacity: 1 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } #shopify-section-template--28071775764867__multicolumn_d8GNzw .slider-button svg { width: 28px !important; height: 28px !important; } /* Remove the slider counter (dots / "x of y" area) */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .slider-counter.caption, #shopify-section-template--28071775764867__multicolumn_d8GNzw .slider-counter--current, #shopify-section-template--28071775764867__multicolumn_d8GNzw .slider-counter--total { display: none !important; } /* Also remove any space reserved for the counter */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .slider-component { padding-bottom: 0 !important; margin-bottom: 0 !important; } /* Remove the slider counter (dots / "x of y" area) */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .slider-counter.caption, #shopify-section-template--28071775764867__multicolumn_d8GNzw .slider-counter--current, #shopify-section-template--28071775764867__multicolumn_d8GNzw .slider-counter--total { display: none !important; } /* Also remove any space reserved for the counter */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .slider-component { padding-bottom: 0 !important; margin-bottom: 0 !important; } /* Keep the carousel sliding sideways, but reduce vertical "scroll catch" */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .slider { overflow-x: auto !important; /* sideways movement */ overflow-y: visible !important; /* allow vertical without weird clipping */ -webkit-overflow-scrolling: touch; } } /* --- HIDE: dots + "x / y" counter (without breaking carousel) --- */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .slider-counter, #shopify-section-template--28071775764867__multicolumn_d8GNzw .slider-counter.caption, #shopify-section-template--28071775764867__multicolumn_d8GNzw .slider-counter--current, #shopify-section-template--28071775764867__multicolumn_d8GNzw .slider-counter--total, #shopify-section-template--28071775764867__multicolumn_d8GNzw .slider-counter__link, #shopify-section-template--28071775764867__multicolumn_d8GNzw .slider-counter__link--dots, #shopify-section-template--28071775764867__multicolumn_d8GNzw .slider-dots, #shopify-section-template--28071775764867__multicolumn_d8GNzw .slider-dots * { display: none !important; } /* Remove the space that area was taking up */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .slider-buttons { padding: 0 !important; margin: 0 !important; min-height: 0 !important; } #shopify-section-template--28071775764867__multicolumn_d8GNzw .slider-component { padding-bottom: 0 !important; margin-bottom: 0 !important; } /* --- HIDE: dots + "x / y" counter (without breaking carousel) --- */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .slider-counter, #shopify-section-template--28071775764867__multicolumn_d8GNzw .slider-counter.caption, #shopify-section-template--28071775764867__multicolumn_d8GNzw .slider-counter--current, #shopify-section-template--28071775764867__multicolumn_d8GNzw .slider-counter--total, #shopify-section-template--28071775764867__multicolumn_d8GNzw .slider-counter__link, #shopify-section-template--28071775764867__multicolumn_d8GNzw .slider-counter__link--dots, #shopify-section-template--28071775764867__multicolumn_d8GNzw .slider-dots, #shopify-section-template--28071775764867__multicolumn_d8GNzw .slider-dots * { display: none !important; } /* Remove the space that area was taking up */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .slider-buttons { padding: 0 !important; margin: 0 !important; min-height: 0 !important; } #shopify-section-template--28071775764867__multicolumn_d8GNzw .slider-component { padding-bottom: 0 !important; margin-bottom: 0 !important; } /* --- HIDE: dots + "x / y" counter (without breaking carousel) --- */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .slider-counter, #shopify-section-template--28071775764867__multicolumn_d8GNzw .slider-counter.caption, #shopify-section-template--28071775764867__multicolumn_d8GNzw .slider-counter--current, #shopify-section-template--28071775764867__multicolumn_d8GNzw .slider-counter--total, #shopify-section-template--28071775764867__multicolumn_d8GNzw .slider-counter__link, #shopify-section-template--28071775764867__multicolumn_d8GNzw .slider-counter__link--dots, #shopify-section-template--28071775764867__multicolumn_d8GNzw .slider-dots, #shopify-section-template--28071775764867__multicolumn_d8GNzw .slider-dots * { display: none !important; } /* Remove the space that area was taking up */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .slider-buttons { padding: 0 !important; margin: 0 !important; min-height: 0 !important; } #shopify-section-template--28071775764867__multicolumn_d8GNzw .slider-component { padding-bottom: 0 !important; margin-bottom: 0 !important; } /* ===== AK multicolumn carousel: remove counter + dots + leftover space ===== */ /* 1) Hide the "2 / 5" counter area */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .slider-counter, #shopify-section-template--28071775764867__multicolumn_d8GNzw .slider-counter.caption, #shopify-section-template--28071775764867__multicolumn_d8GNzw .slider-counter--current, #shopify-section-template--28071775764867__multicolumn_d8GNzw .slider-counter--total { display: none !important; } /* 2) Hide the DOTS wrapper (this is the bit you clicked in Inspector) */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .center.small-hide.medium-hide { display: none !important; height: 0 !important; margin: 0 !important; padding: 0 !important; } /* 3) Remove any space reserved underneath the carousel controls */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .slider-buttons { margin: 0 !important; padding: 0 !important; min-height: 0 !important; } #shopify-section-template--28071775764867__multicolumn_d8GNzw .slider-component { padding-bottom: 0 !important; margin-bottom: 0 !important; } /* ===== AK carousel: nuke pagination dots (even if generated via pseudo-elements) ===== */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .slider-counter__link--dots, #shopify-section-template--28071775764867__multicolumn_d8GNzw .slider-counter__link--dots *, #shopify-section-template--28071775764867__multicolumn_d8GNzw [class*="dots"], #shopify-section-template--28071775764867__multicolumn_d8GNzw [class*="dot"] { display: none !important; } /* If the theme draws dots using ::before/::after, kill the generated content too */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .slider-counter__link--dots::before, #shopify-section-template--28071775764867__multicolumn_d8GNzw .slider-counter__link--dots::after, #shopify-section-template--28071775764867__multicolumn_d8GNzw [class*="dots"]::before, #shopify-section-template--28071775764867__multicolumn_d8GNzw [class*="dots"]::after, #shopify-section-template--28071775764867__multicolumn_d8GNzw [class*="dot"]::before, #shopify-section-template--28071775764867__multicolumn_d8GNzw [class*="dot"]::after { content: none !important; display: none !important; } /* ===== AK: remove the weird "dots" that are NOT selectable (CSS-generated) ===== */ /* Kill any pseudo-elements drawing decorations near the slider */ #shopify-section-template--28071775764867__multicolumn_d8GNzw slider-component.slider-mobile-gutter::before, #shopify-section-template--28071775764867__multicolumn_d8GNzw slider-component.slider-mobile-gutter::after, #shopify-section-template--28071775764867__multicolumn_d8GNzw #Slider-template--28071775764867__multicolumn_d8GNzw::before, #shopify-section-template--28071775764867__multicolumn_d8GNzw #Slider-template--28071775764867__multicolumn_d8GNzw::after { content: none !important; display: none !important; } /* If the theme is using mask/gradient tricks that appear as dots, remove them */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-list { mask-image: none !important; -webkit-mask-image: none !important; background-image: none !important; } /* Also remove the standard counter/dots blocks just in case */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .slider-counter, #shopify-section-template--28071775764867__multicolumn_d8GNzw .center.small-hide.medium-hide { display: none !important; height: 0 !important; margin: 0 !important; padding: 0 !important; } /* ===== AK multicolumn: text block sits correctly under image ===== */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info { margin-top: 14px !important; /* space under image */ padding-top: 0 !important; padding-left: 0 !important; padding-right: 0 !important; text-align: left !important; } #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__image-wrapper { margin-bottom: 0 !important; } #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card { display: flex !important; flex-direction: column !important; } #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__image-wrapper { flex: 0 0 auto !important; } #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info { flex: 1 1 auto !important; } /* ===== AK multicolumn: allergens consistent across all meals ===== */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info .rte h5, #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info .rte h5 strong { margin-top: 6px !important; /* directly under macros */ margin-bottom: 0 !important; font-size: 12px !important; line-height: 1.2 !important; font-weight: 600 !important; opacity: 0.75 !important; letter-spacing: 0.02em !important; } #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info .rte p:has(strong):has(:is(span, strong)) { margin-bottom: 0 !important; } /* ===== AK multicolumn: ensure arrows exist + are visible ===== */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .slider-buttons { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important; } /* Force arrow buttons to show */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .slider-button { display: flex !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; background: transparent !important; border: 0 !important; } /* Make arrows stronger + keep them outside the images */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .slider-button--prev, #shopify-section-template--28071775764867__multicolumn_d8GNzw .slider-button--next { position: absolute !important; top: 33% !important; transform: translateY(-50%) !important; z-index: 50 !important; padding: 10px !important; } /* Left arrow */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .slider-button--prev { left: -26px !important; } /* Right arrow */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .slider-button--next { right: -26px !important; } /* Increase icon weight/contrast */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .slider-button .icon { width: 18px !important; height: 18px !important; opacity: 0.85 !important; } #shopify-section-template--28071775764867__multicolumn_d8GNzw slider-component.slider-mobile-gutter { position: relative !important; } /* ========================================================= AK MULTICOLUMN CAROUSEL — FINAL CLEANUP Section: template--28071775764867__multicolumn_d8GNzw ========================================================= */ /* ---------- A) Make text sit correctly under images ---------- */ /* Put image + info in the same centered column width */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card { display: flex !important; flex-direction: column !important; align-items: center !important; /* centers the "column" */ } /* ===== Force 3.2 slides visible on desktop ===== */ @media (min-width: 990px) { #shopify-section-template--28071775764867__multicolumn_d8GNzw .slider__slide { width: 30% !important; flex: 0 0 30% !important; } #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-list { overflow-x: auto !important; scroll-snap-type: x mandatory; } #shopify-section-template--28071775764867__multicolumn_d8GNzw .slider__slide { scroll-snap-align: start; } } #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info { margin-top: 14px !important; padding: 0 !important; text-align: left !important; } /* Tidy up default spacing in the rich text so it doesn’t “float” */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info .rte p { margin: 0 0 8px 0 !important; } #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info .rte p strong { display: inline-block !important; margin-top: 6px !important; /* keeps macros nicely spaced */ } /* ---------- B) Allergens: make ALL meals match Teriyaki Trout style ---------- */ /* (Teriyaki is plain text, not extra-bold. This forces everything to that look.) */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info .rte h5, #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info .rte h5 strong { margin: 0 !important; margin-top: 6px !important; /* directly under macros */ font-size: 12px !important; line-height: 1.2 !important; font-weight: 600 !important; /* Teriyaki-ish */ opacity: 0.75 !important; letter-spacing: 0.02em !important; } /* If any allergen is in a

instead of

, normalise that too */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info .rte p:has(> strong:contains("ALLERGENS")), #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info .rte p:has(> strong) { margin-bottom: 0 !important; } /* ---------- C) Arrows: remove the duplicate “edge” arrow and keep one clean set ---------- */ /* 1) Ensure the slider is the positioning context */ #shopify-section-template--28071775764867__multicolumn_d8GNzw slider-component.slider-mobile-gutter { position: relative !important; } /* 2) Keep ONE arrow system: only the buttons inside slider-component */ #shopify-section-template--28071775764867__multicolumn_d8GNzw slider-component.slider-mobile-gutter .slider-buttons { display: block !important; } /* If there is another .slider-buttons outside slider-component, hide it */ #shopify-section-template--28071775764867__multicolumn_d8GNzw > .slider-buttons, #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-list + .slider-buttons { display: none !important; } /* 3) Style the real buttons (visible, stronger, with subtle shadow) */ #shopify-section-template--28071775764867__multicolumn_d8GNzw slider-component.slider-mobile-gutter .slider-button { display: flex !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; background: rgba(255,255,255,0.75) !important; border-radius: 999px !important; box-shadow: 0 6px 18px rgba(0,0,0,0.18) !important; border: 0 !important; padding: 10px !important; } /* 4) Position them just outside the image area (NOT at screen edge) */ #shopify-section-template--28071775764867__multicolumn_d8GNzw slider-component.slider-mobile-gutter .slider-button--prev, #shopify-section-template--28071775764867__multicolumn_d8GNzw slider-component.slider-mobile-gutter .slider-button--next { position: absolute !important; top: 33% !important; transform: translateY(-50%) !important; z-index: 50 !important; } #shopify-section-template--28071775764867__multicolumn_d8GNzw slider-component.slider-mobile-gutter .slider-button--prev { left: -18px !important; } #shopify-section-template--28071775764867__multicolumn_d8GNzw slider-component.slider-mobile-gutter .slider-button--next { right: -18px !important; } /* Make the caret clearer */ #shopify-section-template--28071775764867__multicolumn_d8GNzw slider-component.slider-mobile-gutter .slider-button .icon { width: 18px !important; height: 18px !important; opacity: 0.9 !important; } /* ===== Remove stray duplicate chevrons in this section ===== */ /* Hide ALL caret icons inside this section... */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .icon.icon-caret { display: none !important; } /* ...then re-show ONLY the caret icons inside the real slider buttons */ #shopify-section-template--28071775764867__multicolumn_d8GNzw slider-component.slider-mobile-gutter .slider-buttons .icon.icon-caret { display: block !important; } /* ===== Remove the extra slider button block completely ===== */ #shopify-section-template--28071775764867__multicolumn_d8GNzw > div.slider-buttons { display: none !important; } /* ===== Subtle right edge fade for carousel ===== */ @media (min-width: 990px) { #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-list { -webkit-mask-image: linear-gradient( to right, rgba(0,0,0,1) 85%, rgba(0,0,0,0) 100% ); mask-image: linear-gradient( to right, rgba(0,0,0,1) 85%, rgba(0,0,0,0) 100% ); } } /* ========================================================= AK multicolumn carousel – fix rogue arrow + text width match ========================================================= */ /* 1) If there are TWO "next" buttons, kill the second one */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .slider-buttons .slider-button--next + .slider-button--next { display: none !important; } /* 2) If the rogue arrow is a second caret icon, kill any extra caret inside the next button */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .slider-buttons .slider-button--next .icon-caret:nth-of-type(n+2) { display: none !important; } /* 3) Safety: hide any slider-button that ends up outside the real slider-controls area */ #shopify-section-template--28071775764867__multicolumn_d8GNzw > .slider-button, #shopify-section-template--28071775764867__multicolumn_d8GNzw > .slider-buttons { display: none !important; } /* 4) Make text block match the image block width again (centered) */ @media (min-width: 990px) { #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__image-wrapper, #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info { max-width: 340px !important; /* tweak: 320–360 */ margin-left: auto !important; margin-right: auto !important; width: 100% !important; } #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info { padding: 0 !important; margin-top: 14px !important; text-align: left !important; } } /* ========================================================= AK multicolumn carousel – fix rogue arrow + text width match ========================================================= */ /* 1) If there are TWO "next" buttons, kill the second one */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .slider-buttons .slider-button--next + .slider-button--next { display: none !important; } /* 2) If the rogue arrow is a second caret icon, kill any extra caret inside the next button */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .slider-buttons .slider-button--next .icon-caret:nth-of-type(n+2) { display: none !important; } /* 3) Safety: hide any slider-button that ends up outside the real slider-controls area */ #shopify-section-template--28071775764867__multicolumn_d8GNzw > .slider-button, #shopify-section-template--28071775764867__multicolumn_d8GNzw > .slider-buttons { display: none !important; } /* 4) Make text block match the image block width again (centered) */ @media (min-width: 990px) { #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__image-wrapper, #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info { max-width: 340px !important; /* tweak: 320–360 */ margin-left: auto !important; margin-right: auto !important; width: 100% !important; } #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info { padding: 0 !important; margin-top: 14px !important; text-align: left !important; } } #shopify-section-template--28071775764867__multicolumn_d8GNzw .slider::after, #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-list::after, #shopify-section-template--28071775764867__multicolumn_d8GNzw slider-component::after { content: none !important; display: none !important; } /* ===== Rogue arrow removal (non-selectable icon/pseudo) ===== */ /* Hide ANY icons in this section... */ #shopify-section-template--28071775764867__multicolumn_d8GNzw svg.icon, #shopify-section-template--28071775764867__multicolumn_d8GNzw svg[class*="icon"], #shopify-section-template--28071775764867__multicolumn_d8GNzw .icon { display: none !important; } /* ...then re-enable ONLY the icons inside the real slider buttons */ #shopify-section-template--28071775764867__multicolumn_d8GNzw slider-component .slider-buttons .slider-button svg, #shopify-section-template--28071775764867__multicolumn_d8GNzw slider-component .slider-buttons .slider-button .icon { display: block !important; } /* Also kill any pseudo-elements that might be drawing it */ #shopify-section-template--28071775764867__multicolumn_d8GNzw slider-component::before, #shopify-section-template--28071775764867__multicolumn_d8GNzw slider-component::after, #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-list::before, #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-list::after, #shopify-section-template--28071775764867__multicolumn_d8GNzw .slider::before, #shopify-section-template--28071775764867__multicolumn_d8GNzw .slider::after { content: none !important; display: none !important; } /* ===== Centre meal title only ===== */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info h3 { text-align: center !important; width: 100% !important; } /* Keep everything else left-aligned */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info .rte, #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info .rte * { text-align: left !important; } /* ===== Headings: control sizing by viewport ===== */ /* Desktop / widescreen */ @media (min-width: 1200px) { #shopify-section-template--28071775764867__multicolumn_d8GNzw .title { font-size: 44px !important; /* match "What we do" */ line-height: 1.1 !important; } #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn .title-wrapper-with-link h2, #shopify-section-template--28071775764867__multicolumn_d8GNzw .title-wrapper-with-link h2 { font-size: 44px !important; line-height: 1.1 !important; } /* "February 8th" */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .subtitle, #shopify-section-template--28071775764867__multicolumn_d8GNzw .caption-with-letter-spacing, #shopify-section-template--28071775764867__multicolumn_d8GNzw h3:first-of-type { font-size: 28px !important; line-height: 1.2 !important; } } /* Mid widths / half screen */ @media (min-width: 750px) and (max-width: 1199px) { /* Keep main title as-is (you said it's good), only shrink the date a touch */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .subtitle, #shopify-section-template--28071775764867__multicolumn_d8GNzw .caption-with-letter-spacing, #shopify-section-template--28071775764867__multicolumn_d8GNzw h3:first-of-type { font-size: 26px !important; line-height: 1.2 !important; } } /* Hide any secondary slider buttons block that isn't inside slider-component */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .slider-buttons { display: none !important; } #shopify-section-template--28071775764867__multicolumn_d8GNzw slider-component .slider-buttons { display: flex !important; } /* ===== Fix meal-name size (H3) ===== */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info h3 { font-size: 18px !important; /* tweak: 17–20 */ line-height: 1.15 !important; letter-spacing: 0.04em !important; margin: 14px 0 8px 0 !important; text-align: center !important; /* you wanted titles centered */ } /* Keep the rest left aligned */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info .rte, #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info .rte * { text-align: left !important; } /* ===== Widescreen: clip any stray edge graphics (rogue arrow) ===== */ @media (min-width: 990px) { /* Clip overflow ONLY for this section */ #shopify-section-template--28071775764867__multicolumn_d8GNzw { overflow: hidden !important; } /* Ensure the slider still has room inside the clipped area */ #shopify-section-template--28071775764867__multicolumn_d8GNzw slider-component.slider-mobile-gutter { position: relative !important; padding-right: 24px !important; /* breathing room on the right */ padding-left: 24px !important; } /* Pull the real arrows INSIDE the clipped area */ #shopify-section-template--28071775764867__multicolumn_d8GNzw slider-component.slider-mobile-gutter .slider-button--prev { left: 6px !important; } #shopify-section-template--28071775764867__multicolumn_d8GNzw slider-component.slider-mobile-gutter .slider-button--next { right: 6px !important; } } /* ===== Hide unselectable rogue arrow (widescreen only) by masking the far-right edge ===== */ @media (min-width: 990px) { /* Make this section the positioning context */ #shopify-section-template--28071775764867__multicolumn_d8GNzw { position: relative !important; } /* Pull our REAL arrow in from the screen edge */ #shopify-section-template--28071775764867__multicolumn_d8GNzw slider-component.slider-mobile-gutter .slider-button--next { right: 14px !important; z-index: 30 !important; } /* Mask/cover the extreme right edge where the rogue arrow lives */ #shopify-section-template--28071775764867__multicolumn_d8GNzw::after { content: "" !important; position: absolute !important; top: 0 !important; right: -4px !important; width: 54px !important; /* adjust 40–70 if needed */ height: 260px !important; /* enough to cover arrow area */ background: #eef1ee !important; /* match your section background */ pointer-events: none !important; z-index: 25 !important; } } #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info h3 { text-align: center !important; } #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info .rte, #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info .rte * { text-align: left !important; } /* ========================================================= AK TYPE CLEANUP — Multicolumn carousel section only ========================================================= */ /* 1) Headings: match "What we do" sizing */ @media (min-width: 750px) { /* Main section title: "Next Week's Selection" */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .title-wrapper-with-link .title, #shopify-section-template--28071775764867__multicolumn_d8GNzw .title-wrapper-with-link h2 { font-size: 38px !important; /* <-- replace with "What we do" size */ line-height: 1.1 !important; letter-spacing: 0.01em !important; } /* Subheading/date: "February 8th" */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .title-wrapper-with-link .subtitle, #shopify-section-template--28071775764867__multicolumn_d8GNzw .title-wrapper-with-link .caption-with-letter-spacing, #shopify-section-template--28071775764867__multicolumn_d8GNzw .title-wrapper-with-link h3 { font-size: 30px !important; /* slightly smaller */ line-height: 1.2 !important; letter-spacing: 0.01em !important; } } /* 2) Meal card text: tighter spacing + consistent opacity */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info { margin-top: 14px !important; } /* Meal name */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info h3 { font-size: 18px !important; line-height: 1.15 !important; margin: 12px 0 8px 0 !important; text-align: center !important; /* keep title centered */ letter-spacing: 0.04em !important; } /* Description + macros block: tighter line-height */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info .rte { font-size: 12px !important; line-height: 1.35 !important; opacity: 0.78 !important; } /* Remove extra paragraph spacing */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info .rte p { margin: 0 0 6px 0 !important; } /* Macros line: a touch stronger, still tight */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info .rte p strong { display: inline-block !important; margin-top: 4px !important; opacity: 0.92 !important; font-weight: 700 !important; } /* 3) Allergens: normalize regardless of tag (
,

, ) */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info .rte h5, #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info .rte h5 strong, #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info .rte p strong { font-size: 12px !important; line-height: 1.2 !important; margin: 6px 0 0 0 !important; font-weight: 600 !important; opacity: 0.78 !important; letter-spacing: 0.02em !important; } /* Keep non-title text left aligned */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info .rte, #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info .rte * { text-align: left !important; } /* ===== Normalize ALLERGENS line (plain

) in this carousel section ===== */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info .rte h5 { margin: 6px 0 0 0 !important; font-size: 12px !important; line-height: 1.2 !important; font-weight: 600 !important; letter-spacing: 0.02em !important; opacity: 0.78 !important; text-transform: none !important; } /* If other cards have ALLERGENS inside , make them identical too */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info .rte h5 strong { font: inherit !important; opacity: inherit !important; } /* Extra specificity hammer */ #shopify-section-template--28071775764867__multicolumn_d8GNzw #Slider-template--28071775764867__multicolumn_d8GNzw h5 { margin: 6px 0 0 0 !important; font-size: 12px !important; line-height: 1.2 !important; font-weight: 600 !important; letter-spacing: 0.02em !important; opacity: 0.78 !important; } /* ========================================================= FIX: Text spilling outside cards at mid/half-screen widths ========================================================= */ /* 1) Allow flex/grid children to shrink properly (prevents overflow) */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-list__item, #shopify-section-template--28071775764867__multicolumn_d8GNzw .slider__slide, #shopify-section-template--28071775764867__multicolumn_d8GNzw .grid__item { min-width: 0 !important; } /* 2) Force the info block to stay inside the card width */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; padding: 0 10px !important; /* small breathing room so text never kisses edges */ } /* 3) Make ALL text wrap safely instead of spilling */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info .rte, #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info .rte * { max-width: 100% !important; overflow-wrap: anywhere !important; word-break: break-word !important; } /* 4) Mid-width tuning (the “half screen” problem zone) */ @media (min-width: 750px) and (max-width: 1100px) { #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info h3 { font-size: 16px !important; /* slightly smaller so it never pushes */ } #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info .rte { font-size: 11px !important; line-height: 1.32 !important; } } /* FORCE: Allergens h5 inside the multicolumn slider (highest specificity we can reasonably use) */ #shopify-section-template--28071775764867__multicolumn_d8GNzw #Slider-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info .rte h5 { margin: 6px 0 0 0 !important; font-size: 12px !important; line-height: 1.2 !important; font-weight: 600 !important; opacity: 0.78 !important; letter-spacing: 0.02em !important; text-transform: none !important; } /* Make ALL allergens consistent + stronger across this carousel */ #shopify-section-template--28071775764867__multicolumn_d8GNzw h5 { opacity: 1 !important; font-weight: 600 !important; letter-spacing: 0.02em !important; } /* Boost ONLY the that includes the word ALLERGENS */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info .rte strong { opacity: 0.78 !important; /* default for other strong text (macros) */ font-weight: 700 !important; } #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info .rte strong:has(> *) { /* leave as-is; Safari can be weird here, so we won't rely on this */ } /* Practical approach: style the paragraph that contains allergens */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info .rte p:last-of-type strong { opacity: 1 !important; font-weight: 600 !important; letter-spacing: 0.02em !important; } #shopify-section-template--28071775764867__multicolumn_d8GNzw #Slider-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info .rte h5 strong { opacity: 1 !important; font-weight: 600 !important; font: inherit !important; } /* ========================================= STOP text overhang on peek/slider breakpoints (clip each slide so content can't bleed) ========================================= */ #shopify-section-template--28071775764867__multicolumn_d8GNzw #Slider-template--28071775764867__multicolumn_d8GNzw .slider__slide { overflow: hidden !important; } /* Extra safety: keep the text box clipped too */ #shopify-section-template--28071775764867__multicolumn_d8GNzw #Slider-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info { overflow: hidden !important; } /* ========================================= HARD CLIP the slider track to container ========================================= */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .slider-component { overflow: hidden !important; } #shopify-section-template--28071775764867__multicolumn_d8GNzw .slider { overflow: hidden !important; } /* Make sure slides cannot exceed their own width */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .slider__slide { max-width: 100% !important; } /* ===== AK MENU CAROUSEL – restore scrolling ===== */ #shopify-section-template--28071775764867__multicolumn_d8GNzw slider-component { overflow: visible; /* wrapper can be visible */ } #shopify-section-template--28071775764867__multicolumn_d8GNzw slider-component .slider { overflow-x: auto !important; /* THIS is the key */ overflow-y: hidden !important; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; scroll-behavior: smooth; } /* Keep each slide clipped so text/images can't bleed outside its own card */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .slider__slide { overflow: hidden; } /* ===== AK MENU CAROUSEL – stop text overhang/bleed ===== */ /* 1) Each slide is its own clipping boundary */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .slider__slide { overflow: hidden !important; } /* 2) The card + info can never exceed its slide width */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card, #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info { max-width: 100% !important; box-sizing: border-box; } /* 3) Hide text for slides that are not the active/visible slide (prevents peek text bleed) */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .slider__slide[aria-hidden="true"] .multicolumn-card__info { display: none !important; } /* Fallback: some themes use tabindex instead of aria-hidden */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .slider__slide[tabindex="-1"] .multicolumn-card__info { display: none !important; } /* =============================== AK MENU CAROUSEL — STOP TEXT OVERHANG Section: multicolumn_d8GNzw =============================== */ /* Always clip each slide's contents so nothing can bleed outside */ [id^="shopify-section-template--28071775764867__multicolumn_d8GNzw"] .slider__slide { position: relative; overflow: hidden !important; } /* Make sure the text block itself can’t exceed the card width */ [id^="shopify-section-template--28071775764867__multicolumn_d8GNzw"] .multicolumn-card__info { max-width: 100%; overflow: hidden; } /* Desktop/tablet: hide text for any slide that is NOT the active/visible one */ @media (min-width: 750px) { [id^="shopify-section-template--28071775764867__multicolumn_d8GNzw"] .slider__slide[aria-hidden="true"] .multicolumn-card__info, [id^="shopify-section-template--28071775764867__multicolumn_d8GNzw"] .slider__slide[tabindex="-1"] .multicolumn-card__info, [id^="shopify-section-template--28071775764867__multicolumn_d8GNzw"] .slider__slide:not([aria-hidden="false"]) .multicolumn-card__info { display: none !important; } } /* ===== CLEAN CAROUSEL CLIP FIX ===== */ #shopify-section-template--2807177564867__multicolumn_d8GNzw .slider { overflow: hidden !important; } #shopify-section-template--2807177564867__multicolumn_d8GNzw .slider__slide { overflow: hidden !important; } #shopify-section-template--2807177564867__multicolumn_d8GNzw .multicolumn-card__info { overflow: hidden !important; } /* === AK MENU CAROUSEL: STOP TEXT BLEED / OVERHANG === */ /* 1) Keep the overall carousel able to “peek” */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .slider { overflow: visible !important; } /* 2) But each individual slide must CLIP its own contents */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .slider__slide { overflow: hidden !important; position: relative !important; } /* 3) Default: all text left-aligned */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info { max-width: 100% !important; text-align: left !important; } /* 4) Meal name centred but HARD-CONSTRAINED so it cannot bleed */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info h3, #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info .inline-richtext { display: block !important; max-width: 100% !important; text-align: center !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } /* 5) Make sure all other lines also never exceed the card width */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info p, #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info h5 { max-width: 100% !important; overflow-wrap: anywhere !important; word-break: break-word !important; } /* ===== STOP TEXT BLEED / OVERHANG ON PEEKING SLIDES ===== */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .slider, #shopify-section-template--28071775764867__multicolumn_d8GNzw .slider-component { overflow-y: hidden !important; /* prevents vertical bleed */ } #shopify-section-template--28071775764867__multicolumn_d8GNzw .slider__slide { overflow: hidden !important; /* clips text inside each slide */ } #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info { max-width: 100% !important; overflow: hidden !important; } #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info * { max-width: 100% !important; } /* ========================================= AK: Hide peek-slide TEXT overhang only (keeps image peek; covers the lower text area on the right) ========================================= */ #shopify-section-template--28071775764867__multicolumn_d8GNzw { position: relative !important; /* Approximate image height (square image). Tweak if needed */ --ak-imgH: clamp(240px, 28vw, 360px); --ak-bg: #eef1ee; /* match your section background */ } /* Create a “paint-over” block ONLY below the image line */ #shopify-section-template--28071775764867__multicolumn_d8GNzw slider-component::after { content: "" !important; position: absolute !important; right: 0 !important; top: var(--ak-imgH) !important; width: 140px !important; /* tweak 100–180 */ bottom: 0 !important; background: var(--ak-bg) !important; pointer-events: none !important; z-index: 50 !important; } /* Optional: do the same on the LEFT if you ever see left-side bleed */ #shopify-section-template--28071775764867__multicolumn_d8GNzw slider-component::before { content: "" !important; position: absolute !important; left: 0 !important; top: var(--ak-imgH) !important; width: 40px !important; /* usually smaller on the left */ bottom: 0 !important; background: var(--ak-bg) !important; pointer-events: none !important; z-index: 50 !important; } @media (min-width: 990px) { #shopify-section-template--28071775764867__multicolumn_d8GNzw .slider__slide { width: 33.333% !important; } } /* Keep image smaller AND make text match its width */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card{ display: flex !important; flex-direction: column !important; align-items: center !important; /* centers image + text as a unit */ } #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__image-wrapper, #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info{ width: 100% !important; max-width: 420px !important; /* <- change this number to match your image size */ } #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info{ box-sizing: border-box !important; padding-left: 0 !important; padding-right: 0 !important; } /* Keep image smaller AND make text match its width */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card{ display: flex !important; flex-direction: column !important; align-items: center !important; /* centers image + text as a unit */ } #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__image-wrapper, #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info{ width: 100% !important; max-width: 420px !important; /* <- change this number to match your image size */ } #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info{ box-sizing: border-box !important; padding-left: 0 !important; padding-right: 0 !important; } /* Match Next Week's Menu heading to What We Do */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .title { font-size: 38px !important; /* <- replace with What We Do computed size */ font-weight: 700 !important; letter-spacing: 0 !important; text-transform: none !important; } /* February 8th: slightly smaller + align to card/image width */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn__title { font-size: 24px !important; /* <- slightly smaller than the title above */ margin-left: auto !important; margin-right: auto !important; width: 100% !important; max-width: 420px !important; /* <- MUST match the max-width you used for the image/text */ text-align: left !important; } /* Standardise all text under cards */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info { color: rgba(0, 61, 49, 0.75) !important; /* uniform opacity */ } /* Meal title */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info h3, #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info .inline-richtext { color: rgba(0, 61, 49, 0.9) !important; text-transform: uppercase !important; letter-spacing: 0.06em !important; } /* Description + macros */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info p { color: rgba(0, 61, 49, 0.65) !important; text-transform: uppercase !important; /* if you want all description consistent */ letter-spacing: 0.04em !important; } /* Allergens line: keep strong + consistent */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info h5, #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info .allergens, #shopify-section-template--28071775764867__multicolumn_d8GNzw .multicolumn-card__info strong { color: rgba(0, 61, 49, 0.8) !important; text-transform: uppercase !important; } /* Match Next Week's Menu heading to What We Do */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .title { font-size: 38px !important; /* <- replace with What We Do computed size */ font-weight: 700 !important; letter-spacing: 0 !important; text-transform: none !important; } /* February 8th – Multicolumn Header Fix */ #shopify-section-template--28071775764867__multicolumn_d8GNzw h2.title.h2 { font-size: 28px; font-weight: 400; line-height: 1.2; } /* Align header block to same left edge as card rail */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .title-wrapper-with-link { max-width: 1200px; /* MUST match your card rail max-width */ margin-left: auto; margin-right: auto; padding-left: 0; } /* FORCE: February 8th typography (section-scoped) */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .title-wrapper-with-link > h2.title.h2 { font-size: 28px !important; font-weight: 400 !important; line-height: 1.2 !important; letter-spacing: 0 !important; text-transform: none !important; } /* ================================ Multicolumn rail alignment (responsive) Section: template--28071775764867__multicolumn_d8GNzw ================================= */ #shopify-section-template--28071775764867__multicolumn_d8GNzw { /* One source of truth for BOTH header + slider rail */ --ak-rail-max: 1200px; /* adjust if your card rail max width is different */ --ak-rail-pad: clamp(16px, 2vw, 24px); /* responsive side padding */ } /* 1) Header wrapper aligns to rail */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .title-wrapper-with-link { max-width: var(--ak-rail-max) !important; margin-left: auto !important; margin-right: auto !important; padding-left: var(--ak-rail-pad) !important; padding-right: var(--ak-rail-pad) !important; } /* 2) Slider rail aligns to the same rail */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .slider-mobile-gutter, #shopify-section-template--28071775764867__multicolumn_d8GNzw .slider-component { max-width: var(--ak-rail-max) !important; margin-left: auto !important; margin-right: auto !important; padding-left: var(--ak-rail-pad) !important; padding-right: var(--ak-rail-pad) !important; } /* Your February 8th typography (keep from earlier) */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .title-wrapper-with-link > h2.title.h2 { font-size: 28px !important; font-weight: 400 !important; line-height: 1.2 !important; } /* ================================ Multicolumn rail alignment – match Dawn gutters Section: template--28071775764867__multicolumn_d8GNzw ================================= */ #shopify-section-template--28071775764867__multicolumn_d8GNzw { --ak-rail-max: 1200px; /* keep your rail max */ --ak-rail-pad: 1.5rem; /* Dawn small gutter */ } /* Dawn typically increases gutter at ~750px */ @media screen and (min-width: 750px) { #shopify-section-template--28071775764867__multicolumn_d8GNzw { --ak-rail-pad: 5rem; /* Dawn larger gutter */ } } /* Lock header wrapper to rail */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .title-wrapper-with-link { max-width: var(--ak-rail-max) !important; margin-left: auto !important; margin-right: auto !important; padding-left: var(--ak-rail-pad) !important; padding-right: var(--ak-rail-pad) !important; } /* Lock slider rail to the same rail */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .slider-mobile-gutter, #shopify-section-template--28071775764867__multicolumn_d8GNzw .slider-component { max-width: var(--ak-rail-max) !important; margin-left: auto !important; margin-right: auto !important; padding-left: var(--ak-rail-pad) !important; padding-right: var(--ak-rail-pad) !important; } /* February 8th typography (keep) */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .title-wrapper-with-link > h2.title.h2 { font-size: 28px !important; font-weight: 400 !important; line-height: 1.2 !important; } /* NUDGE: February 8th aligns perfectly with first card edge */ #shopify-section-template--28071775764867__multicolumn_d8GNzw .title-wrapper-with-link { /* adjust this number until perfect: try 10px, then 12px if needed */ padding-left: calc(var(--ak-rail-pad) + 18px) !important; } /* HERO IMAGE CROP – Homepage only */ #shopify-section-template--28071775764867__image_banner_66F9KK .banner { min-height: 600px; } #shopify-section-template--28071775764867__image_banner_66F9KK .banner__media img { object-fit: cover; object-position: center; } /* Tablet */ @media screen and (max-width: 990px) { #shopify-section-template--28071775764867__image_banner_66F9KK .banner { min-height: 440px; } } /* Mobile */ @media screen and (max-width: 749px) { #shopify-section-template--28071775764867__image_banner_66F9KK .banner { min-height: 360px; } } /* ================================ CTA hover/focus (make it feel clickable) ================================= */ #shopify-section-template--28071775764867__rich_text_Bd7f38 a.button.button--primary { cursor: pointer; transition: transform 140ms ease, filter 140ms ease, box-shadow 140ms ease; will-change: transform; } #shopify-section-template--28071775764867__rich_text_Bd7f38 a.button.button--primary:hover { transform: translateY(-1px); filter: brightness(0.98); box-shadow: 0 10px 22px rgba(0,0,0,0.14); } #shopify-section-template--28071775764867__rich_text_Bd7f38 a.button.button--primary:active { transform: translateY(0); box-shadow: 0 6px 14px rgba(0,0,0,0.12); } #shopify-section-template--28071775764867__rich_text_Bd7f38 a.button.button--primary:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; } /* Tighten ONLY the gaps above + below "What We Do" Section: template--28071775764867__rich_text_Bd7f38 */ #shopify-section-template--28071775764867__rich_text_Bd7f38.shopify-section.section { margin-top: 18px !important; /* gap above */ margin-bottom: 18px !important; /* gap below */ padding-top: 0 !important; /* ensure we’re not changing internal layout */ padding-bottom: 0 !important; } /* If your theme is using padding on an inner wrapper for section spacing, tighten that instead */ #shopify-section-template--28071775764867__rich_text_Bd7f38 .rich-text { padding-top: 0 !important; padding-bottom: 0 !important; } /* ================================ CTA hover colour change Section: template--28071775764867__rich_text_Bd7f38 ================================= */ #shopify-section-template--28071775764867__rich_text_Bd7f38 a.button.button--primary { transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease, transform 140ms ease; } /* Hover state */ #shopify-section-template--28071775764867__rich_text_Bd7f38 a.button.button--primary:hover { background-color: #58e01f; /* slightly darker than your neon green */ border-color: #58e01f; color: #003b28; /* deeper green text for contrast */ } /* CTA hover colour – Dawn uses ::before for the button fill */ #shopify-section-template--28071775764867__rich_text_Bd7f38 a.button.button--primary::before { background-color: #72F231 !important; /* default */ } #shopify-section-template--28071775764867__rich_text_Bd7f38 a.button.button--primary:hover::before { background-color: #58e01f !important; /* hover */ } /* If your theme uses an outline/border layer */ #shopify-section-template--28071775764867__rich_text_Bd7f38 a.button.button--primary:hover { color: #003b28 !important; } #shopify-section-template--28071775764867__rich_text_Bd7f38 a.button.button--primary:hover::after { background-color: #58e01f !important; } /* Restore a healthier gap ABOVE "What We Do" (outer spacing only) */ #shopify-section-template--28071775764867__rich_text_Bd7f38.shopify-section.section { margin-top: 48px !important; margin-bottom: 18px !important; /* keep bottom modest unless you want more */ } @media screen and (max-width: 749px) { #shopify-section-template--28071775764867__rich_text_Bd7f38.shopify-section.section { margin-top: 32px !important; } } /* The icons section is the section immediately AFTER "What We Do" */ #shopify-section-template--28071775764867__rich_text_Bd7f38 + .shopify-section.section { /* halve the “section spacing” above/below that icons block */ margin-top: calc(var(--spacing-sections-desktop) / 2) !important; margin-bottom: calc(var(--spacing-sections-desktop) / 2) !important; } @media screen and (max-width: 749px) { #shopify-section-template--28071775764867__rich_text_Bd7f38 + .shopify-section.section { margin-top: calc(var(--spacing-sections-mobile) / 2) !important; margin-bottom: calc(var(--spacing-sections-mobile) / 2) !important; } } /* halve spacing BETWEEN the icons/cards */ #shopify-section-template--28071775764867__rich_text_Bd7f38 + .shopify-section .multicolumn-list, #shopify-section-template--28071775764867__rich_text_Bd7f38 + .shopify-section .grid { column-gap: calc(var(--grid-desktop-horizontal-spacing) / 2) !important; row-gap: calc(var(--grid-desktop-vertical-spacing) / 2) !important; } @media screen and (max-width: 749px) { #shopify-section-template--28071775764867__rich_text_Bd7f38 + .shopify-section .multicolumn-list, #shopify-section-template--28071775764867__rich_text_Bd7f38 + .shopify-section .grid { column-gap: calc(var(--grid-mobile-horizontal-spacing) / 2) !important; row-gap: calc(var(--grid-mobile-vertical-spacing) / 2) !important; } } /* ================================= CONSISTENT SECTION SPACING ================================= */ /* Define one spacing value */ :root { --ak-section-gap: 38px; /* change this once, affects all 3 gaps */ } /* Gap ABOVE "What We Do" */ #shopify-section-template--28071775764867__rich_text_Bd7f38 { margin-top: var(--ak-section-gap) !important; } /* Gap BELOW "What We Do" (bullets → icons) */ #shopify-section-template--28071775764867__rich_text_Bd7f38 { margin-bottom: var(--ak-section-gap) !important; } /* Gap BELOW icons (icons → CTA section after it) */ #shopify-section-template--28071775764867__rich_text_Bd7f38 + .shopify-section { margin-top: var(--ak-section-gap) !important; } /* Reduce spacing BETWEEN icons */ #shopify-section-template--28071775764867__rich_text_Bd7f38 + .shopify-section .grid, #shopify-section-template--28071775764867__rich_text_Bd7f38 + .shopify-section .multicolumn-list { column-gap: 24px !important; row-gap: 24px !important; } /* Ensure shadow can render */ #shopify-section-template--28071775764867__rich_text_Bd7f38 a.button { overflow: visible !important; position: relative; } /* Visible hover lift */ #shopify-section-template--28071775764867__rich_text_Bd7f38 a.button:hover { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(0,0,0,0.18) !important; } /* OUTER spacing only for "What We Do" */ #shopify-section-template--28071775764867__rich_text_Bd7f38 .rich-text.section { padding-top: 40px !important; /* gap ABOVE What We Do */ padding-bottom: 40px !important;/* gap BELOW What We Do (before icons section) */ } /* CTA interaction (cursor + shadow) */ #shopify-section-template--28071775764867__rich_text_Bd7f38 a.button.button--primary { cursor: pointer !important; position: relative !important; z-index: 2 !important; overflow: visible !important; transition: transform 140ms ease, box-shadow 140ms ease, filter 140ms ease !important; } /* Don’t let Dawn’s overlay layer block hover/cursor */ #shopify-section-template--28071775764867__rich_text_Bd7f38 a.button.button--primary::before, #shopify-section-template--28071775764867__rich_text_Bd7f38 a.button.button--primary::after { pointer-events: none !important; } /* Allow the shadow to render (parents sometimes clip it) */ #shopify-section-template--28071775764867__rich_text_Bd7f38 .rich-text__buttons, #shopify-section-template--28071775764867__rich_text_Bd7f38 .rich-text, #shopify-section-template--28071775764867__rich_text_Bd7f38 .page-width { overflow: visible !important; } #shopify-section-template--28071775764867__rich_text_Bd7f38 a.button.button--primary:hover { transform: translateY(-2px) !important; box-shadow: 0 14px 28px rgba(0,0,0,0.18) !important; } /* ========================================================= GLOBAL GAP (one knob) - Banner → What We Do - What We Do → Icons - Icons → CTA ========================================================= */ :root { --ak-gap: 48px; } /* try 40px if you want tighter */ /* WHAT WE DO section */ #shopify-section-template--28071775764867__rich_text_Bd7f38 { margin-top: var(--ak-gap) !important; /* gap above What We Do */ margin-bottom: var(--ak-gap) !important; /* gap below What We Do (to icons) */ } /* ICONS section (do NOT add top margin or you'd double the gap) */ #shopify-section-template--28071775764867__multicolumn_Re6tLw { margin-top: 0 !important; margin-bottom: var(--ak-gap) !important; /* gap below icons (to CTA) */ } /* CTA section (do NOT add top margin or you'd double the gap) */ #shopify-section-template--28071775764867__rich_text_YrTDGr { margin-top: 0 !important; } /* ========================================================= ICONS: tighten layout (between icons + vertical air) ========================================================= */ #shopify-section-template--28071775764867__multicolumn_Re6tLw .multicolumn-list, #shopify-section-template--28071775764867__multicolumn_Re6tLw .grid { column-gap: 24px !important; /* reduce gaps between icons */ row-gap: 24px !important; } /* reduce extra vertical padding inside the icons section */ #shopify-section-template--28071775764867__multicolumn_Re6tLw .page-width { padding-top: 24px !important; padding-bottom: 24px !important; } /* tighten spacing under each icon card */ #shopify-section-template--28071775764867__multicolumn_Re6tLw .multicolumn-card__info { padding-top: 12px !important; } /* ========================================================= CTA: obvious hover colour + shadow (CTA section ID) ========================================================= */ #shopify-section-template--28071775764867__rich_text_YrTDGr a.button.button--primary { cursor: pointer !important; position: relative !important; z-index: 2 !important; overflow: visible !important; transition: transform 140ms ease, box-shadow 140ms ease !important; } /* Prevent Dawn overlay layers blocking hover/cursor */ #shopify-section-template--28071775764867__rich_text_YrTDGr a.button.button--primary::before, #shopify-section-template--28071775764867__rich_text_YrTDGr a.button.button--primary::after { pointer-events: none !important; } /* Make sure shadow isn't clipped */ #shopify-section-template--28071775764867__rich_text_YrTDGr .rich-text__buttons, #shopify-section-template--28071775764867__rich_text_YrTDGr .page-width, #shopify-section-template--28071775764867__rich_text_YrTDGr .rich-text { overflow: visible !important; } /* Dawn primary button fill is often ::before */ #shopify-section-template--28071775764867__rich_text_YrTDGr a.button.button--primary::before { background-color: #72F231 !important; /* default */ } /* Obvious hover: invert to dark green */ #shopify-section-template--28071775764867__rich_text_YrTDGr a.button.button--primary:hover::before { background-color: #003b28 !important; } #shopify-section-template--28071775764867__rich_text_YrTDGr a.button.button--primary:hover { color: #72F231 !important; transform: translateY(-2px) !important; box-shadow: 0 14px 28px rgba(0,0,0,0.18) !important; } /* ========================= SPACING — use the *-padding wrappers (real source of vertical space) What We Do: rich_text_Bd7f38 Icons: multicolumn_Re6tLw CTA: rich_text_YrTDGr ========================= */ /* Set one consistent gap value */ :root { --ak-gap: 48px; } /* try 40px if you want tighter */ /* What We Do section outer spacing */ #shopify-section-template--28071775764867__rich_text_Bd7f38 .section-template--28071775764867__rich_text_Bd7f38-padding { padding-top: var(--ak-gap) !important; padding-bottom: var(--ak-gap) !important; /* gap to icons */ } /* Icons section outer spacing */ #shopify-section-template--28071775764867__multicolumn_Re6tLw .section-template--28071775764867__multicolumn_Re6tLw-padding { padding-top: 0 !important; /* avoid double gap */ padding-bottom: var(--ak-gap) !important; /* gap to CTA */ } /* CTA section outer spacing */ #shopify-section-template--28071775764867__rich_text_YrTDGr .section-template--28071775764867__rich_text_YrTDGr-padding { padding-top: 0 !important; /* avoid double gap */ } /* ICONS — tighten spacing between the 3 cards */ #shopify-section-template--28071775764867__multicolumn_Re6tLw .multicolumn-list { gap: 24px !important; /* try 18px if still too wide */ } /* Some Dawn variants use .grid on the multicolumn list */ #shopify-section-template--28071775764867__multicolumn_Re6tLw .grid { gap: 24px !important; } /* CTA — safe hover: no movement, visible shadow, obvious colour change */ #shopify-section-template--28071775764867__rich_text_YrTDGr a.button.button--primary { cursor: pointer !important; position: relative !important; z-index: 1 !important; transition: background-color 160ms ease, color 160ms ease, box-shadow 160ms ease !important; } /* Make sure nothing is blocking hover/cursor */ #shopify-section-template--28071775764867__rich_text_YrTDGr a.button.button--primary::before, #shopify-section-template--28071775764867__rich_text_YrTDGr a.button.button--primary::after { pointer-events: none !important; } /* Obvious hover (performance inversion) */ #shopify-section-template--28071775764867__rich_text_YrTDGr a.button.button--primary:hover { background-color: #003b28 !important; /* dark */ color: #72F231 !important; /* neon */ box-shadow: 0 14px 28px rgba(0,0,0,0.18) !important; transform: none !important; /* stops the “moving” */ } /* ICONS — cut spacing between the 3 cards in half */ #shopify-section-template--28071775764867__multicolumn_Re6tLw .multicolumn-list, #shopify-section-template--28071775764867__multicolumn_Re6tLw .grid { gap: 12px !important; } /* ICONS — force smaller grid spacing (Dawn variables + explicit gaps) */ #shopify-section-template--28071775764867__multicolumn_Re6tLw { --grid-desktop-horizontal-spacing: 12px !important; --grid-desktop-vertical-spacing: 12px !important; --grid-mobile-horizontal-spacing: 10px !important; --grid-mobile-vertical-spacing: 10px !important; } /* Apply directly to the grid list */ #shopify-section-template--28071775764867__multicolumn_Re6tLw ul.multicolumn-list, #shopify-section-template--28071775764867__multicolumn_Re6tLw .multicolumn-list.grid { column-gap: 12px !important; row-gap: 12px !important; gap: 12px !important; /* fallback */ } /* ========================================================= DENSITY PASS: cut the grey space down hard What We Do: rich_text_Bd7f38 Icons: multicolumn_Re6tLw ========================================================= */ /* 1) WHAT WE DO – reduce space above + below, and reduce space under bullets */ #shopify-section-template--28071775764867__rich_text_Bd7f38 .section-template--28071775764867__rich_text_Bd7f38-padding { padding-top: 16px !important; /* was huge */ padding-bottom: 0px !important; /* gap to icons */ } /* If bullets are inside a list/text block, tighten its bottom margin */ #shopify-section-template--28071775764867__rich_text_Bd7f38 .rich-text__text, #shopify-section-template--28071775764867__rich_text_Bd7f38 .rich-text__blocks { margin-bottom: 0px !important; } /* 2) ICONS – reduce space above + below the icons section */ #shopify-section-template--28071775764867__multicolumn_Re6tLw .section-template--28071775764867__multicolumn_Re6tLw-padding { padding-top: 4px !important; padding-bottom: 2px !important; } /* 3) ICONS – reduce perceived “space between icons” by narrowing the row */ #shopify-section-template--28071775764867__multicolumn_Re6tLw .page-width { max-width: 980px !important; /* pulls the 3 icons closer together */ } /* 4) ICONS – reduce actual grid gaps (if theme uses gap/column-gap/vars) */ #shopify-section-template--28071775764867__multicolumn_Re6tLw { --grid-desktop-horizontal-spacing: 12px !important; --grid-desktop-vertical-spacing: 12px !important; --grid-mobile-horizontal-spacing: 10px !important; --grid-mobile-vertical-spacing: 10px !important; } #shopify-section-template--28071775764867__multicolumn_Re6tLw ul.multicolumn-list, #shopify-section-template--28071775764867__multicolumn_Re6tLw .multicolumn-list.grid { gap: 12px !important; column-gap: 12px !important; row-gap: 12px !important; justify-content: center !important; /* prevents space-between spreading */ } /* 5) ICONS – reduce vertical air inside each icon card */ #shopify-section-template--28071775764867__multicolumn_Re6tLw .multicolumn-card__info { padding-top: 0px !important; } /* Optional: reduce icon image wrapper bottom margin if present */ #shopify-section-template--28071775764867__multicolumn_Re6tLw .multicolumn-card__image-wrapper { margin-bottom: 0px !important; } /* ========================================================= VERTICAL ONLY: tighten the whole "What We Do" block (Do not change spacing between icons) ========================================================= */ /* What We Do (bullets) — reduce top + bottom padding */ #shopify-section-template--28071775764867__rich_text_Bd7f38 .section-template--28071775764867__rich_text_Bd7f38-padding { padding-top: 0px !important; /* less space above heading */ padding-bottom: 0px !important; /* bullets → icons gap */ } /* Icons section — reduce only vertical padding (keep icon spacing as-is) */ #shopify-section-template--28071775764867__multicolumn_Re6tLw .section-template--28071775764867__multicolumn_Re6tLw-padding { padding-top: 0px !important; padding-bottom: 0px !important; } /* Remove extra vertical padding inside the icons container */ #shopify-section-template--28071775764867__multicolumn_Re6tLw .page-width { padding-top: 0 !important; padding-bottom: 0 !important; } /* CTA section — pull it up */ #shopify-section-template--28071775764867__rich_text_YrTDGr .section-template--28071775764867__rich_text_YrTDGr-padding { padding-top: 0px !important; padding-bottom: 0px !important; } /* Tighten space around CTA within its section (vertical only) */ #shopify-section-template--28071775764867__rich_text_YrTDGr .rich-text__buttons { margin-top: 0px !important; margin-bottom: 0px !important; } /* Kill the bullets → icons gap using the exact wrapper Inspector shows */ /* Bottom of "What We Do" section */ #shopify-section-template--28071775764867__rich_text_Bd7f38 .rich-text.content-container { padding-bottom: 0 !important; margin-bottom: 0 !important; } /* Top of Icons section */ #shopify-section-template--28071775764867__multicolumn_Re6tLw .multicolumn.content-container { padding-top: 0 !important; margin-top: 0 !important; } /* (Safety) remove any bottom margin from the last text block inside What We Do */ #shopify-section-template--28071775764867__rich_text_Bd7f38 .rich-text__blocks > *:last-child, #shopify-section-template--28071775764867__rich_text_Bd7f38 .rich-text__text > *:last-child { margin-bottom: 0 !important; } :root { --ak-gap: 20px; } #shopify-section-template--28071775764867__rich_text_Bd7f38 { margin-bottom: var(--ak-gap) !important; } #shopify-section-template--28071775764867__multicolumn_Re6tLw { margin-top: 0 !important; margin-bottom: var(--ak-gap) !important; } #shopify-section-template--28071775764867__rich_text_YrTDGr { margin-top: 0 !important; margin-bottom: var(--ak-gap) !important; }