/** Shopify CDN: Minification failed

Line 939:17 Unexpected "__inner"

**/
/* ==========================================================================
   ALFRED LINDSAY — "Tropical Vibrant" skin
   Store: 01yntp-vv.myshopify.com   Draft theme: shoreline-pantry (146219335731)

   SCOPE / RULES OF ENGAGEMENT
   - Overrides only. No Liquid logic, no section markup, no template structure
     is changed by this file.
   - This sheet is linked from layout/theme.liquid in <head>. The theme's own
     stylesheets (base.css, shoreline.css) and each section's compiled
     {% stylesheet %} block are emitted LATER in the document, so anything that
     has to win here carries !important. That is intentional.
   - The page canvas is left with NO background so a photo can show through.
     See "BACKGROUND HOOK" below.

   TUNING: every colour lives in the :root block. Change it there, not inline.
   ========================================================================== */

:root {
  /* -- navigation + footer ------------------------------------------------ */
  --al-nav: #1A7F78;
  --al-nav-text: #FFFFFF;
  --al-nav-hover: #FFD166;

  /* -- surfaces ----------------------------------------------------------- */
  --al-card: rgba(255, 255, 255, 0.82);
  --al-card-solid: #FFFFFF;

  /* -- buttons ------------------------------------------------------------ */
  --al-primary: #FF7F50;
  --al-primary-hover: #E46538;
  --al-primary-text: #FFFFFF;
  --al-accent: #FFD166;
  --al-accent-text: #222222;

  /* -- the four label colours -------------------------------------------- */
  --al-tag-1: #06D6A0;
  --al-tag-2: #FF7F50;
  --al-tag-3: #FFD166;
  --al-tag-4: #118AB2;
  --al-tag-ink: #222222;

  /* -- type --------------------------------------------------------------- */
  --al-text: #2A2A2A;
  --al-muted: #595959;
  --al-border: rgba(42, 42, 42, 0.14);
  --al-rule: rgba(42, 42, 42, 0.10);

  /* -- BACKGROUND ----------------------------------------------------------
     One photo, behind every module at once. Precedence, lowest first:

       1. the default below — the theme asset assets/al-backdrop.jpg;
       2. Admin > Online Store > Themes > Customise > "Background": pick an
          image and the layout emits a :root override with it, plus the veil.

     The file is a theme asset rather than a Files upload on purpose: a theme
     asset is always resolvable from a CSS relative URL, so the page can never
     end up with a broken or silently-dropped background.

     --al-backdrop-veil is a white wash: 0 leaves the photo untouched, 1 erases
     it.

     This photo is 67% light pixels (median luminance 0.501), so the wash is a
     narrow band. Measured, in order:
         0.68 -> #d3ebe9   "my background image is gone"
         0.35 -> #a6d6d2   still "can't see it"
         0.08 -> #82c5be   "too solid"
     0.22 -> #94cec9   accepted, but "再虚一点"
     0.32 -> ≈#a8d4cd  current: one step softer, still plainly a picture

     One step is about 0.1. Below ~0.15 the photo reads as pasted on; past ~0.45
     the light two thirds of it start to vanish again.

     The readability cost is paid below instead, by stepping the text that lands
     directly on the photo one shade darker. See the store notes for numbers.
     ---------------------------------------------------------------------- */
  --al-backdrop-image: url('al-backdrop.jpg');
  --al-backdrop-veil: 0.32;
}

/* ==========================================================================
   1. CANVAS — no background anywhere except nav + footer
   ========================================================================== */

body,
body:has(.shore-block),
#MainContent,
main.content-for-layout,
.content-for-layout {
  background: transparent !important;
  color: var(--al-text);
}

/* --------------------------------------------------------------------------
   ONE background for the whole site, painted on <html>.

   Every module stays transparent, so they share this single layer and can never
   show a seam between them.

   ⚠️ It used to be two `position: fixed` pseudo-elements on <body> with
   `z-index: -1 / -2`. That is the clever way to do it and also the fragile way:
   negative-z layers sit behind the root canvas in some engines, they behave
   unpredictably inside the Shopify theme editor's iframe, and iOS Safari does
   not reliably paint a fixed negative-z pseudo-element at all. Painting the
   photo and the veil as two layers of ONE `background-image` on <html> has no
   pseudo-element, no stacking context and no z-index — nothing left to go
   wrong in a different browser.

   Both values still come from the same two variables, so the theme setting
   still overrides them.
   -------------------------------------------------------------------------- */
html {
  background-color: #ffffff !important;
  background-image:
    linear-gradient(
      rgba(255, 255, 255, var(--al-backdrop-veil)),
      rgba(255, 255, 255, var(--al-backdrop-veil))
    ),
    var(--al-backdrop-image) !important;
  background-attachment: fixed, fixed !important;
  background-position: center, center !important;
  background-size: cover, cover !important;
  background-repeat: no-repeat, no-repeat !important;
}

/* shoreline.css paints the canvas and the layout column with --shore-paper. */
body:has(.shore-block) {
  --shore-paper: transparent;
  --shore-ink: var(--al-text);
  --shore-muted: var(--al-muted);
  --shore-green: var(--al-primary-hover);
  --shore-rule: var(--al-rule);
  background: transparent !important;
}

body:has(.shore-block) #MainContent { background: transparent !important; }

.shopify-section,
.section,
.section-wrapper { background-color: transparent; }

/* Safety net for the collection template's extra product grid. Its settings are
   corrected to a transparent background in templates/collection.json, but the
   section prints `#shopify-section-… .pg-section{background-color: …}` inline,
   so if anyone ever sets that colour back from the theme editor this keeps the
   page backdrop from being walled off again. */
.pg-section { background-color: transparent !important; }

/* --------------------------------------------------------------------------
   FULL-BLEED HERO
   The cover photo fills the whole hero module edge to edge, so the hero needs
   no surface of its own and the page backdrop never shows through it.
   The theme's own markup is:
       .shore-container > .shore-hero--background + .shore-service-strip
   so going full width on the container would drag the service strip out to the
   screen edges with it — that strip is put back on the normal measure below.
   -------------------------------------------------------------------------- */
.shore-block--hero,
.shore-block--hero.shore-block {
  padding: 0 !important;
  background: transparent !important;
}

.shore-block--hero > .shore-container {
  width: 100% !important;
  max-width: none !important;
}

.shore-block--hero .shore-hero--background {
  border: 0 !important;
  border-radius: 0 !important;
  padding: clamp(24px, 4vw, 56px) !important;
  /* A proper banner height. The old clamp topped out at 620px, which read as a
     strip rather than a cover. 70vh with an 820px ceiling keeps it at roughly
     two-thirds of the window across screen sizes — 76vh looked right on a tall
     window but swallowed three-quarters of a laptop screen. */
  min-height: clamp(560px, 70vh, 820px);
}

/* The copy keeps a frosted card so it stays readable on a dark cover. The cover
   measures 1.83:1 for bare #2A2A2A in its darkest corner — text direct on the
   photo is not an option, the card is what makes it 11:1. */
.shore-block--hero .shore-hero--background .shore-hero__copy {
  width: min(520px, 54%);
  /* Sit the card against the right edge of the cover. The parent is a grid with
     a single column, so justify-self does the work — no absolute positioning,
     which keeps the card in flow and lets the hero still grow with its content.
     On ≤749px the width goes to 100% and the side stops mattering. */
  justify-self: end;
  border-radius: 18px;
  background: var(--al-card) !important;
  backdrop-filter: blur(8px);
}

/* An eyebrow with nothing in it would still paint its chip (padding + colour),
   leaving a stray pill on the cover. Collapse it instead — and only when it is
   actually empty, so typing one back in the theme editor still shows up. */
.shore-block--hero .shore-eyebrow:empty {
  display: none !important;
}

/* Put the service strip back on the page measure. */
.shore-block--hero .shore-service-strip {
  width: min(1240px, calc(100% - 80px));
  margin-inline: auto;
}

/* The cover is the module: give its bottom edge a soft hand-off into the page
   backdrop instead of a bare line, by letting the photo fade at the very end. */
.shore-block--hero .shore-hero--background::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  height: 96px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.55));
  pointer-events: none;
}

/* Lift the copy and the caption above the bottom scrim. ⚠️ The caption must
   KEEP `position: absolute` — forcing it to relative drops it into the flow
   and wrecks the hero layout. */
.shore-block--hero .shore-hero__copy { position: relative; z-index: 3; }
.shore-block--hero .shore-hero__caption { z-index: 3; }

@media (max-width: 749px) {
  /* On a phone a full-height cover would push everything below the fold, so the
     ceiling stays lower — taller than before, but still a banner. */
  .shore-block--hero .shore-hero--background {
    padding: 18px !important;
    min-height: clamp(480px, 62vh, 640px);
  }
  .shore-block--hero .shore-hero--background .shore-hero__copy { width: 100%; }
  .shore-block--hero .shore-service-strip { width: calc(100% - 40px); }
}

/* Generic cards in the theme's own (non-shoreline) templates. */
.product-card,
.collection-card,
.resource-card,
.featured-blog-posts-card,
.product-grid__card,
.predictive-search-results__card,
.card-gallery {
  background-color: var(--al-card) !important;
  border-color: var(--al-border) !important;
  border-radius: 12px;
  backdrop-filter: blur(6px);
}

.product-card__content,
.collection-card__content { background: transparent !important; }

/* ==========================================================================
   2. NAVIGATION  — #1A7F78, white text, amber hover
   ========================================================================== */

#header-group,
#header-group .header-section,
.header-section,
.header__row,
.header,
header.shopify-section,
.header-wrapper,
sticky-header,
header-component {
  background-color: var(--al-nav) !important;
  color: var(--al-nav-text) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
}

body:has(.shore-block) #header-group .header__row {
  background: var(--al-nav) !important;
  color: var(--al-nav-text) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18) !important;
}

/* ⚠️ This theme paints text with `-webkit-text-fill-color` in places, which
   ignores `color`. Both have to be written or the nav stays dark. */
#header-group,
#header-group *,
#header-group a,
#header-group button,
#header-group summary,
#header-group span,
#header-group p,
#header-group small,
#header-group strong,
#header-group label,
#header-group h1,
#header-group h2,
#header-group h3,
#header-group svg,
#header-group .header-logo,
#header-group .menu-list__link,
#header-group .header-actions,
#header-group .header__icon {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}

#header-group a:hover,
#header-group button:hover,
#header-group summary:hover,
#header-group .menu-list__link:hover,
#header-group .header-logo:hover,
#header-group a:focus-visible,
#header-group button:focus-visible,
#header-group summary:focus-visible,
#header-group details[open] > summary {
  color: #FFD166 !important;
  -webkit-text-fill-color: #FFD166 !important;
}

/* SVG icons read `currentColor` in some spots and a fill in others. */
#header-group a:hover svg,
#header-group button:hover svg,
#header-group summary:hover svg,
#header-group a:focus-visible svg,
#header-group button:focus-visible svg {
  fill: #FFD166 !important;
  stroke: #FFD166;
}

/* Announcement bar sits in the same group. */
#header-group .announcement-bar,
#header-group [class*='announcement'] {
  background-color: var(--al-nav) !important;
  color: var(--al-nav-text) !important;
}

/* Dropdowns / mega menus / the mobile drawer are PANELS: they float over the
   page, so they must stay opaque or the page photo shows through them.
   ⚠️ `.header-menu` is the desktop nav bar itself, NOT a panel — including it
   here paints the whole nav menu dark. Its child `.menu-list__submenu` is the
   real dropdown. */
/* ⚠️ `.menu-drawer-container` is NOT a panel — it is the <details> that wraps
   the hamburger trigger AND the drawer. Putting it in this list painted a white
   square behind the hamburger icon in the teal navbar. */
.menu-drawer,
.menu-list__submenu,
.mega-menu,
.mega-menu__list,
.m-switcher-dropdown,
.search-modal,
.search-modal__content,
.predictive-search {
  background-color: var(--al-card-solid) !important;
}

/* --------------------------------------------------------------------------
   MOBILE MENU DRAWER
   The theme builds it as `color-{{ block_settings.color_scheme }}`, and that
   block's scheme resolves to scheme-1 — the TRANSPARENT canvas — so the theme's
   own `background-color: var(--color-background)` paints nothing and the drawer
   would show the page straight through. It was then forced flat white, which
   read as a white slab dropped over the tropical page.

   It is now TEAL — a shade deeper than the navbar it slides out from, so the
   two read as one piece with the header in front:

     navbar #1A7F78   white text 4.83:1
     drawer #14655F   white text 6.87:1   amber hover 4.76:1  (both clear AA)

   The nested submenu steps back up to the navbar teal, so the level you are in
   is readable at a glance.
   -------------------------------------------------------------------------- */
#header-group .menu-drawer {
  background-color: #14655f !important;
  backdrop-filter: none !important;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

/* The trigger wrapper stays invisible, and the hamburger inside it belongs to
   the teal navbar — so it must stay white. Removing the white block without
   this would leave a #2A2A2A icon on #1A7F78 (2.98:1). */
#header-group .menu-drawer-container,
.menu-drawer-container {
  background-color: transparent !important;
  backdrop-filter: none !important;
}

#header-group .menu-drawer-container > summary,
#header-group .menu-drawer-container .header__icon,
#header-group .menu-drawer-container .header__icon span,
#header-group .menu-drawer-container .header__icon svg {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}

#header-group .menu-drawer-container > summary:hover,
#header-group .menu-drawer-container .header__icon:hover {
  color: #FFD166 !important;
  -webkit-text-fill-color: #FFD166 !important;
}

#header-group .menu-drawer :is(.menu-drawer__navigation, .menu-drawer__submenu, .menu-drawer__localization),
#header-group .menu-drawer .gradient {
  background-color: transparent !important;
  backdrop-filter: none !important;
}

/* A submenu is one level in, so it steps back up to the navbar teal. */
#header-group .menu-drawer .menu-drawer__submenu {
  background-color: #1a7f78 !important;
}

/* All the drawer's type is white on the teal, with the amber hover. */
#header-group .menu-drawer,
#header-group .menu-drawer * {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}

#header-group .menu-drawer :is(a, button, summary):hover,
#header-group .menu-drawer :is(a, button, summary):focus-visible {
  color: #FFD166 !important;
  -webkit-text-fill-color: #FFD166 !important;
}

#header-group .menu-drawer :is(hr, .divider, .menu-drawer__list-item--divider) {
  border-color: rgba(255, 255, 255, 0.2) !important;
}

/* The featured-product cards sit ON the teal, so they keep a light surface —
   but they are the one place inside the drawer that goes back to dark type. */
#header-group .menu-drawer :is(.resource-card, .product-card, .collection-card, .featured-blog-posts-card) {
  background-color: #FFFFFF !important;
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

#header-group .menu-drawer :is(.resource-card, .product-card, .collection-card, .featured-blog-posts-card),
#header-group .menu-drawer :is(.resource-card, .product-card, .collection-card, .featured-blog-posts-card) * {
  color: #2A2A2A !important;
  -webkit-text-fill-color: #2A2A2A !important;
}

/* Close button stays a bare icon. */
#header-group .menu-drawer .menu-drawer__close-button {
  background: transparent !important;
  border: 0 !important;
}

/* Panels are white, so everything inside them goes back to dark type.
   ⚠️ These MUST carry the #header-group prefix: the blanket
   `#header-group * { color:#FFFFFF !important }` above is ID-specificity, so a
   bare `.menu-drawer *` would lose and leave white text on a white drawer. */
#header-group .menu-list__submenu,
#header-group .menu-list__submenu *,
#header-group .mega-menu,
#header-group .mega-menu *,
#header-group .mega-menu__list,
#header-group .mega-menu__list *,
#header-group .m-switcher-dropdown,
#header-group .m-switcher-dropdown *,
#header-group .search-modal,
#header-group .search-modal *,
#header-group .search-modal__content,
#header-group .search-modal__content *,
#header-group .predictive-search,
#header-group .predictive-search * {
  color: #2A2A2A !important;
  -webkit-text-fill-color: #2A2A2A !important;
}

/* Same panels when they render outside the header. */
.menu-list__submenu *,
.mega-menu *,
.mega-menu__list *,
.m-switcher-dropdown *,
.search-modal *,
.search-modal__content *,
.predictive-search * {
  color: #2A2A2A !important;
  -webkit-text-fill-color: #2A2A2A !important;
}

/* --------------------------------------------------------------------------
   CART DRAWER
   Horizon renders the cart drawer INSIDE #header-group:
       header-actions > cart-drawer-component > .cart-drawer__inner
   so the blanket white nav rule above reaches it, and because the panel itself
   carries no colour-scheme class its own background is transparent — white type
   on a blank panel, i.e. a cart that looks empty and white. It needs a real
   surface and dark type, both at ID specificity so they beat `#header-group *`.
   -------------------------------------------------------------------------- */
/* The panel surface. NOTE the scope: everything below targets
   `.cart-drawer__inner`, NOT the whole `cart-drawer-component`. The header's
   cart trigger button lives inside that component but OUTSIDE the panel, and it
   belongs to the teal nav — painting it dark put a 2.98:1 icon on the navbar. */
.cart-drawer__inner,
.cart-drawer__content {
  background-color: var(--al-card-solid) !important;
  color: var(--al-text) !important;
}

#header-group .cart-drawer__inner,
#header-group .cart-drawer__inner * {
  color: #2A2A2A !important;
  -webkit-text-fill-color: #2A2A2A !important;
}

/* The checkout / view-cart buttons are the primary button: white on coral.
   ⚠️ `:not(.button-unstyled)` is not optional — the close button and the
   quantity steppers carry `.button` too, and skinning them paints little coral
   squares over the icon buttons. This theme marks "I am not a button" with
   `.button-unstyled`; and `.button--tertiary` is the quiet text action (the
   "Remove" link), which must not become a filled button either. */
#header-group .cart-drawer__inner :is(.button-primary, .cart__checkout-button, .cart-discount__button),
#header-group .cart-drawer__inner .button:not(.button-unstyled):not(.button-unstyled--transparent):not(.button--tertiary):not(.button--secondary) {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  background: var(--al-primary) !important;
  border-color: var(--al-primary) !important;
}

#header-group .cart-drawer__inner :is(.button-primary, .cart__checkout-button, .cart-discount__button):hover,
#header-group .cart-drawer__inner .button:not(.button-unstyled):not(.button-unstyled--transparent):not(.button--tertiary):not(.button--secondary):hover {
  background: var(--al-primary-hover) !important;
  border-color: var(--al-primary-hover) !important;
}

/* Icon buttons (close, quantity steppers) keep their bare look. */
#header-group .cart-drawer__inner :is(.button-unstyled, .button-unstyled--with-icon, .button-unstyled--transparent) {
  background: transparent !important;
  border: 0 !important;
  color: #2A2A2A !important;
  -webkit-text-fill-color: #2A2A2A !important;
}

/* Quiet actions — "Remove", "Discount", "Continue shopping". Coral text on a
   white panel is only 2.50:1, so these use the nav teal instead: 4.83:1, and
   the teal is already part of the palette. */
#header-group .cart-drawer__inner :is(.button--tertiary, .button-secondary, .link, a.underlined-link, .disclosure-trigger) {
  color: #1A7F78 !important;
  -webkit-text-fill-color: #1A7F78 !important;
  background: transparent !important;
  border-color: transparent !important;
}

#header-group .cart-drawer__inner :is(.button--tertiary, .button-secondary, .disclosure-trigger):hover {
  color: #E46538 !important;
  -webkit-text-fill-color: #E46538 !important;
}

.menu-drawer :is(a, button, summary):hover,
.menu-list__submenu :is(a, button, summary):hover,
.mega-menu :is(a, button, summary):hover,
.mega-menu__list :is(a, button, summary):hover,
.m-switcher-dropdown :is(a, button, summary):hover,
.search-modal :is(a, button, summary):hover,
.predictive-search :is(a, button, summary):hover {
  color: #E46538 !important;
  -webkit-text-fill-color: #E46538 !important;
}

/* ==========================================================================
   3. FOOTER — same #1A7F78
   ========================================================================== */

footer .section,
footer .section-wrapper,
.footer,
.footer-group,
.footer-utilities,
.shoreline-footer,
.shopify-section-group-footer,
[class*='footer'] > .section,
[class*='footer'] .color-scheme-2 {
  background-color: var(--al-nav) !important;
  color: var(--al-nav-text) !important;
}

footer,
footer .shopify-section,
.shopify-section-group-footer {
  background-color: var(--al-nav) !important;
  color: var(--al-nav-text) !important;
}

footer,
footer *,
footer :is(a, p, span, h1, h2, h3, h4, li, small, strong, label, .shoreline-footer__name) {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}

footer :is(a, button, summary, .shoreline-footer__nav a):hover {
  color: #FFD166 !important;
  -webkit-text-fill-color: #FFD166 !important;
}

footer :is(hr, .divider, .footer-utilities__divider) {
  border-color: rgba(255, 255, 255, 0.25) !important;
  background-color: rgba(255, 255, 255, 0.25) !important;
}

.shoreline-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.18) !important;
}

.shoreline-footer__brand p,
.shoreline-footer__consent,
.shoreline-footer__note {
  color: rgba(255, 255, 255, 0.86) !important;
}

.shoreline-footer__input-row input {
  background: var(--al-card-solid) !important;
  color: var(--al-text) !important;
  border: 1px solid rgba(255, 255, 255, 0.55) !important;
}

/* Newsletter / footer submit = accent button */
.shoreline-footer__input-row button,
footer button[type='submit'],
footer .button,
footer .button-primary {
  background: var(--al-accent) !important;
  color: var(--al-accent-text) !important;
  border: 1px solid var(--al-accent) !important;
}

.shoreline-footer__input-row button:hover,
footer button[type='submit']:hover,
footer .button:hover {
  background: var(--al-primary) !important;
  border-color: var(--al-primary) !important;
  color: var(--al-primary-text) !important;
}

/* Payment icons / social icons sit on the teal, keep them legible. */
footer svg { fill: currentColor; }

/* ==========================================================================
   4. TYPE — Lato Bold headings, Open Sans Regular everywhere else
   (the theme settings carry the font handles; these rules make sure nothing
   hard-codes a serif on top of them)
   ========================================================================== */

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.section-title,
.product-card__title,
.collection-card__title {
  font-family: var(--font-heading--family, 'Lato', sans-serif) !important;
  font-style: normal !important;
  letter-spacing: -0.015em;
}

body, p, li, small, input, textarea, select, button,
.body, .rte, .text,
.shore-prose,
.shore-block,
.menu-list__link,
.header__heading-link,
footer, footer a, footer p, footer li, footer span {
  font-family: var(--font-body--family, 'Open Sans', sans-serif) !important;
}

/* shoreline.css hard-codes Georgia on the hero + note headings. */
.shore-block .shore-hero h1,
body:has(.shore-block) #MainContent .shore-hero h1,
body:has(.shore-block) #MainContent .shore-market-note h3,
.shore-market-note h3 {
  font-family: var(--font-heading--family, 'Lato', sans-serif) !important;
  font-weight: 700 !important;
  font-style: normal !important;
  letter-spacing: -0.02em;
}

.shore-block :is(h1, h2, h3) {
  font-family: var(--font-heading--family, 'Lato', sans-serif) !important;
  font-weight: 700 !important;
}

.shore-block h2 { font-weight: 700 !important; }
.shore-block h3 { font-weight: 700 !important; }

/* ==========================================================================
   5. TEXT COLOURS
   ========================================================================== */

.shore-block {
  color: var(--al-text) !important;
  background: transparent !important;
}

.shore-block :is(h1, h2, h3, h4, h5, h6, p, li, strong, summary) { color: inherit; }

.shore-prose,
.shore-prose p,
.shore-kitchen__media > p,
.shore-occasions__media figcaption,
.shore-cooking-note__body,
.shore-cooking-note__body p,
.shore-question > p,
.shore-buying-guide__text,
.shore-order-checklist p,
.shore-fulfilment-step p,
.shore-picture-guide__item p,
.shore-category__copy p,
.shore-occasion__description,
.shore-hero__note,
.shore-service-strip small,
.shore-product__price s,
.shore-market-note .shore-prose {
  color: var(--al-muted) !important;
}

.shore-text-link { color: inherit !important; }

/* --------------------------------------------------------------------------
   Secondary text that lands STRAIGHT ON THE PHOTO
   With the veil down at 0.35 the picture is actually visible, and #595959 no
   longer clears AA over its darker patches (measured 2.4-3.0:1 there). These
   are exactly the blocks that sit on the canvas; anything inside a card keeps
   the specified #595959, which still measures ~7:1 on white.
   -------------------------------------------------------------------------- */
.shore-heading .shore-prose,
.al-ice__lead,
.al-ice__ticker,
.al-pp__lead,
.al-shuffle__lead,
.al-pp__footnote,
.al-shuffle__footnote,
.shore-occasions__media figcaption,
.shore-kitchen__media > p,
.shore-cooking-note__body,
.shore-cooking-note__body p,
.shore-question > p,
.shore-picture-guide__item p,
.shore-fulfilment-step p,
.shore-order-checklist p,
.shore-service-strip small,
.shore-buying-guide__text {
  color: #2A2A2A !important;
}

/* ==========================================================================
   6. CARDS — rgba(255,255,255,0.82)
   ========================================================================== */

.shore-hero,
.shore-category,
.shore-product,
.shore-empty,
.shore-hero--background .shore-hero__copy,
.shore-buying-guide,
.shore-fulfilment-step__art {
  background: var(--al-card) !important;
  border-color: var(--al-border) !important;
  border-radius: 14px;
  backdrop-filter: blur(6px);
}

.shore-category__media,
.shore-product__media,
.shore-occasion__thumbnail,
.shore-picture-guide__image {
  background: rgba(255, 255, 255, 0.55) !important;
}

.shore-hero__caption,
.shore-photo-label {
  background: var(--al-card-solid) !important;
  color: var(--al-text) !important;
  border-radius: 8px;
}

.shore-product__link,
.shore-cooking-notes,
.shore-cooking-note,
.shore-question,
.shore-question:first-child,
.shore-occasion-list,
.shore-occasion,
.shore-buying-guide__row,
.shore-fulfilment-step,
.shore-order-checklist li {
  border-color: var(--al-rule) !important;
}

.shore-block--products,
.shore-block--delivery,
.shore-block--occasions,
.shore-block--checklist {
  border-color: var(--al-rule) !important;
}

.shore-occasion:hover { background: rgba(255, 255, 255, 0.55) !important; }

.shore-fulfilment-step__number,
.shore-occasion--photographic .shore-occasion__index {
  background: var(--al-card-solid) !important;
  color: var(--al-primary-hover) !important;
  border-color: var(--al-border) !important;
}

.shore-fulfilment__route { stroke: var(--al-rule) !important; }
.shore-route-base { stroke: var(--al-rule) !important; }
.shore-route-draw { stroke: var(--al-primary) !important; }
.shore-art-wash { fill: rgba(17, 138, 178, 0.14) !important; }
.shore-art-pin { fill: var(--al-card-solid) !important; }

/* ==========================================================================
   7. BUTTONS
   primary #FF7F50 -> hover #E46538 | accent #FFD166 + #222222
   ========================================================================== */

.shore-button,
.button-primary,
button.button-primary,
.product-form__submit,
.shopify-payment-button__button,
.cart__checkout-button,
input[type='submit'].button {
  background: var(--al-primary) !important;
  border: 1px solid var(--al-primary) !important;
  color: var(--al-primary-text) !important;
  border-radius: 10px;
  font-weight: 700;
}

.shore-button:hover,
.button-primary:hover,
.product-form__submit:hover,
.shopify-payment-button__button:hover,
.cart__checkout-button:hover {
  background: var(--al-primary-hover) !important;
  border-color: var(--al-primary-hover) !important;
  color: var(--al-primary-text) !important;
}

/* `.button-unstyled` / `-transparent` mean "no button look" — never skin them. */
.button-secondary:not(.button-unstyled):not(.button-unstyled--transparent),
.shore-block .button-secondary {
  background: var(--al-accent) !important;
  border: 1px solid var(--al-accent) !important;
  color: var(--al-accent-text) !important;
  border-radius: 10px;
  font-weight: 700;
}

.button-secondary:not(.button-unstyled):not(.button-unstyled--transparent):hover,
.shore-block .button-secondary:hover {
  background: var(--al-primary) !important;
  border-color: var(--al-primary) !important;
  color: var(--al-primary-text) !important;
}

.button-unstyled,
.button-unstyled--with-icon,
.button-unstyled--transparent {
  background: transparent !important;
  border: 0 !important;
}

.shore-block :is(a, button, summary, details):focus-visible {
  outline: 2px solid var(--al-primary) !important;
  outline-offset: 4px;
}

/* ==========================================================================
   8. LABELS / TAGS — the four accent colours as filled chips
   (vivid colours cannot be *text* on a pale card and stay readable, so they
   are chips carrying #222222 type instead — see the contrast note in the
   store notes file)
   ========================================================================== */

.al-chip,
.shore-eyebrow,
.shore-photo-label,
.shore-badge,
.shore-occasion small,
.shore-cooking-note small,
.product-badges .badge,
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 0 !important;
  border-radius: 999px;
  color: var(--al-tag-ink) !important;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* default = coral */
.shore-eyebrow,
.shore-cooking-note small,
.badge { background: var(--al-tag-2) !important; }

.shore-photo-label { background: var(--al-tag-1) !important; }
.shore-photo-label > span { color: var(--al-tag-ink) !important; opacity: 0.7; }
.shore-badge { background: var(--al-tag-3) !important; }
.shore-occasion small { background: var(--al-tag-4) !important; }

.shore-note-index,
.shore-guide-index,
.shore-service-strip__icon { color: var(--al-tag-4) !important; }

/* A four-colour rhythm down the product grid. */
.shore-product:nth-child(4n + 1) .shore-eyebrow { background: var(--al-tag-1) !important; }
.shore-product:nth-child(4n + 2) .shore-eyebrow { background: var(--al-tag-2) !important; }
.shore-product:nth-child(4n + 3) .shore-eyebrow { background: var(--al-tag-3) !important; }
.shore-product:nth-child(4n + 4) .shore-eyebrow { background: var(--al-tag-4) !important; }

.shore-category:nth-child(3n + 1) .shore-eyebrow { background: var(--al-tag-1) !important; }
.shore-category:nth-child(3n + 2) .shore-eyebrow { background: var(--al-tag-2) !important; }
.shore-category:nth-child(3n + 3) .shore-eyebrow { background: var(--al-tag-4) !important; }

/* ==========================================================================
   9. DRAWERS / POPOVERS / MODALS
   These must stay opaque — the canvas is transparent now, so a transparent
   drawer would show the page photo through the cart.
   ========================================================================== */

.drawer,
.cart-drawer,
.menu-drawer,
.search-modal,
.predictive-search,
.quick-add,
.quick-add-modal,
.modal,
dialog,
.popover,
.account-popover,
[class*='drawer']__inner,
[class*='drawer'] .drawer__inner,
[class*='modal']__content,
[class*='popover']__content {
  background-color: var(--al-card-solid) !important;
  color: var(--al-text) !important;
}

.drawer :is(h1, h2, h3, p, span, a, label, li, small, strong),
[class*='drawer'] :is(h1, h2, h3, p, span, a, label, li, small, strong),
[class*='modal'] :is(h1, h2, h3, p, span, a, label, li, small, strong),
[class*='popover'] :is(h1, h2, h3, p, span, a, label, li, small, strong) {
  color: var(--al-text);
}

/* ==========================================================================
   10. FORMS
   ========================================================================== */

.field__input,
.select__select,
input[type='text'],
input[type='email'],
input[type='search'],
input[type='tel'],
input[type='number'],
textarea,
select {
  background-color: var(--al-card-solid) !important;
  color: var(--al-text) !important;
  border-color: var(--al-border) !important;
  border-radius: 10px;
}

::placeholder { color: var(--al-muted) !important; opacity: 1; }

/* ==========================================================================
   11. SMALL FIXES
   ========================================================================== */

.shore-occasions__media img,
.shore-picture-guide__image img,
.shore-product__media img,
.shore-category__media img,
.shore-kitchen__media img { border-radius: 12px; }

.shore-container { width: min(1240px, calc(100% - 80px)); }

@media (max-width: 749px) {
  .shore-container { width: calc(100% - 40px); }
  .shore-block { padding: 36px 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { background-attachment: scroll, scroll !important; }
}