/** Shopify CDN: Minification failed

Line 890:48 Unexpected "__eyebrow"

**/
/* ==========================================================================
   Peacock Emerald skin — PERCY ALLERTON (dt53fq-dy.myshopify.com)
   --------------------------------------------------------------------------
   Scope, by request: navigation bar, footer, global type, text colours,
   borders, content cards, buttons, tags. Nothing else is restyled — the
   page layout, sections and Liquid business code are untouched.

   Deliberately NOT set here: page/content background image, gradients,
   textures. The content canvas is left unpainted so your own background
   image shows through — see --pk-page-background-image below.
   ========================================================================== */

:root {
  /* palette ------------------------------------------------------------- */
  --pk-nav: #0F4D47;
  --pk-nav-text: #FFFFFF;
  --pk-nav-hover: #FFB020;
  --pk-card: rgba(15, 77, 71, 0.74);
  --pk-text: #FFFFFF;
  /* Secondary text was #B7D8D4. With the pale module wash in place it only
     reached ~4.3:1 against the background, so it is lifted one step to stay
     comfortably readable. Revert this line to go back. */
  --pk-text-muted: #C9E6E1;
  --pk-btn: #176B63;
  --pk-btn-hover: #0F4D47;
  --pk-accent: #FFB020;
  --pk-on-accent: #0B2E2B;
  --pk-border: rgba(255, 176, 32, 0.35);

  /* gemstone ink: the palette used for gradient type */
  --pk-ink-solid: #FFFFFF;
  --pk-ink-body: #F2FAF8;
  --pk-ink-1: #FFFFFF;
  --pk-ink-2: #CFEDE7;
  --pk-ink-3: #7ED9C6;
  --pk-ink-4: #FFB020;

  /* four-colour tag accents */
  --pk-tag-1: #123B70;
  --pk-tag-2: #FFB020;
  --pk-tag-3: #FF5CA8;
  --pk-tag-4: #7ED9C6;

  --pk-radius-btn: 7px;
  --pk-radius-card: 11px;

  /* page canvas — reserved for your own background image ------------------
     One photograph runs behind the whole page. Swap the URL below to change
     it; the wash on top is what keeps type readable, so if you pick a much
     lighter or darker image, adjust --pk-module-wash with it.              */
  --pk-module-background-image: url('/cdn/shop/files/pk-bg-9-23.png?v=1790069757');
  --pk-page-background-image: none;
  --pk-page-background-color: #0B2E2B;

  /* The wash sits on top of the photograph. It is deliberately opaque enough
     to carry white type — the image is a pale cream, so a thin wash would
     leave every heading unreadable. Lower the last number for more image. */
  --pk-module-wash: rgba(15, 77, 71, 0.85);

  /* type ----------------------------------------------------------------- */
  --pk-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --pk-font-heading: 'Archivo Black', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* theme hooks, so every theme component inherits the same two families */
  --font-body--family: var(--pk-font-body);
  --font-primary--family: var(--pk-font-body);
  --font-subheading--family: var(--pk-font-body);
  --font-accent--family: var(--pk-font-body);
  --font-heading--family: var(--pk-font-heading);
  --font-body--weight: 400;
  /* Archivo Black ships a single 400 weight — never synthesise a bold */
  --font-heading--weight: 400;
}

/* The theme emits one --color-border per colour scheme from the theme
   editor, and a colour picker cannot express 35% alpha. Re-declare it on
   every scheme element (and :root) with !important so the border colour
   below is what actually renders. */
:root,
body,
[class*='color-scheme'] {
  --color-border: var(--pk-border) !important;
}

/* ---------------------------------------------------------------- canvas
   One photograph runs behind the entire page. On wide screens it is pinned
   to the viewport, so every module shows the same crop and there is no seam
   where one module ends and the next begins. */
html {
  background-color: var(--pk-page-background-color);
  background-image: none;
}

body {
  background-color: var(--pk-page-background-color);
  background-image: var(--pk-page-background-image, none), var(--pk-module-background-image);
  background-repeat: no-repeat, no-repeat;
  background-position: center top, center top;
  background-size: cover, cover;
  background-attachment: fixed, fixed;
  color: var(--pk-text);
}

/* iOS ignores background-attachment: fixed, so the photograph is carried by
   a fixed pseudo-element instead — still one image, still seamless. */
@media (max-width: 749px) {
  body,
  body.template-index-motion {
    /* the image moves to the fixed pseudo-element; an opaque body would paint
       over it, because negative z-index sits under the body background */
    background-color: transparent;
    background-image: none;
  }

  body::before,
  body.template-index-motion::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    background-image: var(--pk-module-background-image);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    pointer-events: none;
  }
}

/* The wash: ONE translucent layer behind every module, applied to the page
   containers rather than to each section. Because every module shares the
   same single layer, the joins between them are invisible by construction —
   no per-module tint to mismatch at the edges. Navigation is outside this
   element and keeps its solid colour; the hero paints its own cover. */
body main.content-for-layout,
body .shopify-section-group-footer-group {
  background-color: var(--pk-module-wash) !important;
  background-image: none !important;
}

/* the modules themselves stay clear, so nothing double-layers */
body main.content-for-layout > .shopify-section,
body main .section,
body main .section-background,
body main .editorial-hero,
body main .editorial-marquee,
body main .editorial-collections,
body main .editorial-spotlight,
body main .editorial-products,
body main .editorial-recipes,
body main .editorial-story,
body main .editorial-faq,
body .shopify-section-group-footer-group .section,
body .shopify-section-group-footer-group .section-background {
  background-color: transparent !important;
  background-image: none !important;
}

/* ------------------------------------------------------------ navigation */
.header,
.header-section,
.header__row,
.header__row--mobile,
#header-group .section-background,
.header-drawer {
  background-color: var(--pk-nav);
  background-image: none;
}

.header,
.header a,
.header button,
.header summary,
.header span,
.header .link,
.header .menu-list__link {
  color: var(--pk-nav-text);
}

/* the theme's own hover tint on header icons is removed: the hover cue is
   the colour change, nothing else */
#header-group .button-unstyled,
#header-group .header-actions__action,
#header-group .close-button,
#header-group .account-popover__summary,
#header-group .disclosure__button,
#header-group button.button-unstyled {
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--pk-nav-text);
}

.header a:hover,
.header button:hover,
.header summary:hover,
.header .link:hover,
.header .menu-list__link:hover,
.header [aria-expanded='true'],
.header details[open] > summary,
#header-group .button-unstyled:hover,
#header-group .header-actions__action:hover {
  color: var(--pk-nav-hover);
  background: none !important;
}

.header a,
.header .menu-list__link,
.header .disclosure__button,
.header summary {
  font-family: var(--pk-font-body);
  font-weight: 400;
  transition: color 160ms ease;
}

/* ---------------------------------------------------------------- footer */
/* The footer counts as a module here (only the navigation bar and the hero
   cover were excluded), so it takes the same translucent wash as the rest of
   the page instead of a hard band of solid colour. */
.editorial-footer,
#footer-group .section-background,
footer .section-background,
.shopify-section-group-footer-group .section-background,
.shopify-section-group-footer-group .section {
  background-color: transparent !important;
  background-image: none !important;
}

.editorial-footer {
  color: var(--pk-text);
}

.editorial-footer__intro h2,
.editorial-footer__seal strong,
.editorial-footer__wordmark {
  color: var(--pk-text);
}

.editorial-footer__intro > span,
.editorial-footer__intro > span:first-child,
.editorial-footer__coordinates strong,
.editorial-footer__form label {
  color: var(--pk-accent);
}

.editorial-footer__intro p,
.editorial-footer__coordinates,
.editorial-footer__coordinates span,
.editorial-footer__seal span,
.editorial-footer__message {
  color: var(--pk-text-muted);
}

.editorial-footer__nav a,
.editorial-footer__nav span,
.footer-utilities,
.footer-utilities a,
.footer-utilities span,
.footer-utilities p,
.footer-utilities li,
.footer-utilities .copyright,
footer a {
  color: var(--pk-text-muted);
  font-family: var(--pk-font-body);
  font-weight: 400;
}

.editorial-footer__nav a:hover,
.footer-utilities a:hover,
footer a:hover {
  color: var(--pk-nav-hover);
}

/* ----------------------------------------------------------------- type */
body,
.content-for-layout,
p,
li,
span,
a,
label,
small,
strong,
input,
textarea,
select,
button,
.rte {
  font-family: var(--pk-font-body);
}

body,
p,
li,
a,
label,
input,
textarea,
select,
button,
.rte {
  font-weight: 400;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.editorial-hero__title,
.editorial-collections__header h2,
.editorial-products__header h2,
.editorial-recipes__header h2,
.editorial-faq__header h2,
.editorial-spotlight__content h2,
.editorial-story__statement h2,
.editorial-footer__intro h2,
.editorial-footer__wordmark,
.editorial-collections__meta h3,
.editorial-products__details h3,
.editorial-recipes__meta h3,
.editorial-story__steps h3 {
  font-family: var(--pk-font-heading);
  font-weight: 400;
  letter-spacing: 0.01em;
}

/* ----------------------------------------------------------- text levels */
body,
.editorial-hero__title,
.editorial-collections__header h2,
.editorial-products__header h2,
.editorial-recipes__header h2,
.editorial-faq__header h2,
.editorial-spotlight__content h2,
.editorial-story__statement h2 {
  color: var(--pk-text);
}

body .editorial-products__details p,
body .editorial-products__details strong,
body .editorial-collections__meta p,
body .editorial-collections__header p,
body .editorial-recipes__header p,
body .editorial-recipes__meta p,
body .editorial-faq__header p,
body .editorial-faq__answer p,
body .editorial-story__statement > p,
body .editorial-story__steps p,
body .editorial-spotlight__content > p,
body .editorial-hero__intro p,
body .editorial-marquee__track span,
body .rte p,
body .rte li {
  color: var(--pk-text-muted);
}

/* eyebrows, kickers and index numbers take the amber accent */
.editorial-hero__kicker,
.editorial-products__header span:first-child,
.editorial-collections__header span,
.editorial-recipes__header span,
.editorial-faq__header > span,
.editorial-story__eyebrow span,
.editorial-spotlight__index,
.editorial-spotlight__notes li span:first-child {
  color: var(--pk-accent);
}

/* prices read as the headline of a card */
.editorial-products__details strong,
.price,
.price__container,
.price-item,
.product__price,
.mobile-purchase-dock__price,
.unit-price,
[class*='price--'] {
  color: var(--pk-text);
  font-family: var(--pk-font-heading);
  font-weight: 400;
}

.price--compare,
.price__sale s,
s.price-item,
del,
.editorial-products__details s {
  color: var(--pk-text-muted);
}

.rte a,
.editorial-faq__answer a,
.editorial-recipes__meta a,
.editorial-footer__nav a,
.editorial-products__header a,
.editorial-recipes__link {
  color: var(--pk-accent);
}

.rte a:hover,
.editorial-faq__answer a:hover,
.editorial-recipes__meta a:hover,
.editorial-products__header a:hover,
.editorial-recipes__link:hover {
  color: var(--pk-nav-hover);
}

/* ---------------------------------------------------------------- cards */
.editorial-products__card,
.editorial-collections__card,
.editorial-recipes__card,
.editorial-story__steps li,
.editorial-faq__item,
.editorial-spotlight__notes,
.editorial-spotlight__content,
.editorial-products__details,
.card,
.product-card,
.collection-card,
.image-card,
.featured-blog-posts-card,
.predictive-search-results__card,
.pg-card,
.resource-card,
.resource-card__content,
.product-grid__card,
.product-information,
.collapsible-content {
  background-color: var(--pk-card);
  border: 1px solid var(--pk-border);
  border-radius: var(--pk-radius-card);
  color: var(--pk-text);
}

/* "body" prefix + !important: each section prints its own styles later in
   the document, so the card tint needs to outrank them. */
body .editorial-products__card,
body .editorial-collections__card,
body .editorial-recipes__card,
body .editorial-story__steps li,
body .editorial-faq__item,
body .editorial-spotlight__notes,
body .editorial-spotlight__content,
body .editorial-products__details,
body .card,
body .product-card,
body .collection-card,
body .image-card,
body .pg-card,
body .resource-card,
body .resource-card__content,
body .product-grid__card {
  background-color: var(--pk-card) !important;
  border-color: var(--pk-border) !important;
  border-radius: var(--pk-radius-card);
}

.editorial-collections__card,
.editorial-recipes__card,
.editorial-products__card,
.product-card,
.collection-card,
.image-card,
.pg-card,
.resource-card,
.product-grid__card {
  overflow: hidden;
}

/* the photo panel above a card keeps the card's own tint so the two read
   as one object */
.editorial-products__media,
.product-card__content {
  background-color: transparent;
  border-radius: calc(var(--pk-radius-card) - 2px) calc(var(--pk-radius-card) - 2px) 0 0;
}

.editorial-collections__card:hover,
.editorial-recipes__card:hover,
.editorial-story__steps li:hover,
.editorial-faq__item:hover,
.product-card:hover,
.collection-card:hover,
.image-card:hover,
.pg-card:hover,
.resource-card:hover {
  border-color: var(--pk-accent) !important;
}

.editorial-story__steps li {
  box-shadow: none !important;
}

/* -------------------------------------------------------------- buttons */
.button:not(.button-unstyled):not(.close-button),
.button-primary:not(.button-unstyled),
.button--primary:not(.button-unstyled),
.btn:not(.button-unstyled),
button.button:not(.button-unstyled):not(.close-button),
input[type='submit'],
.shopify-payment-button__button,
.add-to-cart-button,
.quick-add__button,
.sticky-add-to-cart__button,
.mobile-purchase-dock__button,
.editorial-products__form button,
.editorial-products__placeholder-button,
.editorial-footer__input-row button {
  background-color: var(--pk-btn);
  background-image: none;
  color: var(--pk-text);
  border: 1px solid var(--pk-btn);
  border-radius: var(--pk-radius-btn);
  font-family: var(--pk-font-body);
  font-weight: 400;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

.button:not(.button-unstyled):not(.close-button):hover,
.button-primary:not(.button-unstyled):hover,
.button--primary:not(.button-unstyled):hover,
.btn:not(.button-unstyled):hover,
button.button:not(.button-unstyled):not(.close-button):hover,
input[type='submit']:hover,
.shopify-payment-button__button:hover,
.add-to-cart-button:hover,
.quick-add__button:hover,
.sticky-add-to-cart__button:hover,
.mobile-purchase-dock__button:hover,
.editorial-products__form button:hover,
.editorial-footer__input-row button:hover {
  background-color: var(--pk-btn-hover);
  background-image: none;
  border-color: var(--pk-btn-hover);
  color: var(--pk-text);
}

/* accent buttons — amber with dark text */
.button--secondary,
.button-secondary,
.editorial-hero__button,
.editorial-spotlight__button {
  background-color: var(--pk-accent);
  background-image: none;
  color: var(--pk-on-accent);
  border: 1px solid var(--pk-accent);
  border-radius: var(--pk-radius-btn);
}

.button--secondary:hover,
.button-secondary:hover,
.editorial-hero__button:hover,
.editorial-spotlight__button:hover {
  background-color: var(--pk-accent);
  background-image: none;
  border-color: var(--pk-accent);
  color: var(--pk-on-accent);
  filter: brightness(1.06);
}

/* ----------------------------------------------------------------- tags */
.tag,
.product-tag,
.badge,
.card__badge,
.product-badges__badge,
.product-badges,
.pill,
.filter-chip,
.pills__pill,
.editorial-spotlight__stamp,
.editorial-story__stage,
.editorial-products__number {
  border-radius: var(--pk-radius-btn);
  font-family: var(--pk-font-body);
  font-weight: 400;
  border: 1px solid var(--pk-border);
}

/* the four accent colours, applied in rotation so a run of tags never reads
   as one flat block */
.tag,
.product-tag,
.badge,
.card__badge,
.product-badges__badge,
.product-badges,
.pill,
.filter-chip,
.pills__pill,
.editorial-spotlight__stamp,
.editorial-story__stage {
  background-color: var(--pk-tag-1);
  color: var(--pk-text);
}

.tag:nth-of-type(4n + 2),
.product-tag:nth-of-type(4n + 2),
.badge:nth-of-type(4n + 2),
.product-badges__badge:nth-of-type(4n + 2),
.pill:nth-of-type(4n + 2),
.filter-chip:nth-of-type(4n + 2),
.pills__pill:nth-of-type(4n + 2) {
  background-color: var(--pk-tag-2);
  color: var(--pk-on-accent);
}

.tag:nth-of-type(4n + 3),
.product-tag:nth-of-type(4n + 3),
.badge:nth-of-type(4n + 3),
.product-badges__badge:nth-of-type(4n + 3),
.pill:nth-of-type(4n + 3),
.filter-chip:nth-of-type(4n + 3),
.pills__pill:nth-of-type(4n + 3) {
  background-color: var(--pk-tag-3);
  color: var(--pk-text);
}

.tag:nth-of-type(4n),
.product-tag:nth-of-type(4n),
.badge:nth-of-type(4n),
.product-badges__badge:nth-of-type(4n),
.pill:nth-of-type(4n),
.filter-chip:nth-of-type(4n),
.pills__pill:nth-of-type(4n) {
  background-color: var(--pk-tag-4);
  color: var(--pk-on-accent);
}

/* named accents that should always carry one specific colour */
.editorial-products__number {
  background-color: var(--pk-tag-4);
  color: var(--pk-on-accent);
  border-color: var(--pk-tag-4);
}

.editorial-spotlight__stamp {
  background-color: var(--pk-tag-2);
  color: var(--pk-on-accent);
  border-color: var(--pk-tag-2);
}

.editorial-story__stage {
  background-color: var(--pk-tag-1);
  color: var(--pk-text);
  border-color: var(--pk-tag-1);
}

.tag--active,
.filter-chip--active,
.pill--active,
[aria-selected='true'].filter-chip,
[aria-current='true'].tag {
  background-color: var(--pk-tag-3);
  color: var(--pk-text);
  border-color: var(--pk-tag-3);
}

.tag:hover,
.product-tag:hover,
.pill:hover,
.filter-chip:hover,
.badge:hover {
  background-color: var(--pk-accent);
  color: var(--pk-on-accent);
  border-color: var(--pk-accent);
}

/* --------------------------------------------------------------- borders */
hr,
.divider,
.header__divider,
.editorial-products__header a {
  border-color: var(--pk-border);
}

/* ------------------------------------------------- inputs, panels, drawers
   These sit outside the page canvas, so they need an opaque-enough surface
   to stay usable; they reuse the brand green rather than the card tint. */
.field__input,
.select__select,
input[type='text'],
input[type='email'],
input[type='search'],
input[type='tel'],
input[type='url'],
input[type='password'],
textarea,
select,
.localization-form__select,
.newsletter-form__field-wrapper .field__input {
  background-color: var(--pk-card);
  color: var(--pk-text);
  border: 1px solid var(--pk-border);
  border-radius: var(--pk-radius-btn);
}

.field__input::placeholder,
input::placeholder,
textarea::placeholder {
  color: var(--pk-text-muted);
  opacity: 1;
}

/* ------------------------------------------------- selection and focus */
::selection {
  background: rgba(255, 176, 32, 0.35);
  color: #ffffff;
}

:focus-visible {
  outline: 2px solid var(--pk-accent);
  outline-offset: 2px;
}

/* ==========================================================================
   CASCADE GUARDS
   --------------------------------------------------------------------------
   Shopify prints every section's {% stylesheet %} inline in the body — after
   this file — so equal-specificity rules of ours would lose. These repeats
   add a "body" prefix where a section style could otherwise win.
   ========================================================================== */

body .shopify-section-group-footer-group .section-background,
body .shopify-section-group-footer-group .section {
  background-color: transparent !important;
  background-image: none !important;
}

body .shopify-section-group-footer-group .footer-utilities,
body .shopify-section-group-footer-group .footer-utilities a,
body .shopify-section-group-footer-group .footer-utilities span,
body .shopify-section-group-footer-group .footer-utilities p,
body .shopify-section-group-footer-group .footer-utilities li,
body .shopify-section-group-footer-group .footer-utilities .copyright {
  color: var(--pk-text-muted) !important;
}

body .shopify-section-group-footer-group .footer-utilities a:hover {
  color: var(--pk-nav-hover) !important;
}

/* text the section styles dim below full contrast */
body .editorial-recipes__meta p,
body .editorial-recipes__link,
body .editorial-recipes__header p,
body .editorial-story__steps p,
body .editorial-products__details p,
body .editorial-marquee__track span {
  opacity: 1;
}

body .editorial-recipes__meta > span:first-child,
body .editorial-story__eyebrow span {
  opacity: 0.9;
}

/* the marquee strip: solid mint first, gemstone gradient where supported
   (the full treatment lives in the typography section below) */
body .editorial-marquee__track span {
  background-image: none;
  color: var(--pk-text-muted);
  -webkit-text-fill-color: currentColor;
}

body .editorial-marquee__mark {
  color: var(--pk-accent);
}

/* recipe cards: one row, equal heights, link pinned to the card edge */
body .editorial-recipes__grid {
  align-items: stretch;
}

body .editorial-recipes__card {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  height: 100%;
}

body .editorial-recipes__media {
  flex: 0 0 auto;
}

body .editorial-recipes__meta {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  background-color: transparent;
}

body .editorial-recipes__meta .editorial-recipes__link {
  margin-top: auto;
}

/* --------------------------------------------------- plain page templates
   Pages keep the unpainted canvas; nothing is layered on top of it. */
body main[data-template^='page'] .section-background,
body main[data-template^='page'] .section {
  background-color: transparent !important;
  background-image: none !important;
}

body main[data-template='collection'] .shopify-section .section-background {
  background-color: transparent !important;
  background-image: none !important;
}

body main[data-template='collection'] .pg-section {
  background-color: transparent !important;
  background-image: none !important;
}

/* --------------------------------------------------------------- mobile */
@media (max-width: 749px) {
  body .editorial-story {
    grid-template-columns: minmax(0, 1fr);
  }

  body .editorial-story__watermark,
  body .editorial-story__current,
  body .editorial-story__arrow {
    display: none;
  }

  body .editorial-recipes__grid {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: minmax(0, 1fr);
    overflow-x: visible;
    scroll-snap-type: none;
  }

  body .editorial-recipes__card {
    scroll-snap-align: none;
  }

  /* the theme's extra mobile menu row is redundant: the Main menu lives in
     the drawer on phones */
  body #header-group .header__row--mobile {
    display: none !important;
  }
}

/* ==========================================================================
   HOMEPAGE MOTION LAYER
   --------------------------------------------------------------------------
   The index template also loads assets/homepage-motion.css, which ships its
   own "calm" palette and paints the page canvas, the cards and even the
   button radius (6px). This stylesheet is loaded after it, so rather than
   fighting rule by rule the palette is re-pointed at peacock emerald and the
   few hard-coded values are stated outright.
   ========================================================================== */

body.template-index-motion {
  --calm-ink: var(--pk-text);
  --calm-muted: var(--pk-text-muted);
  --calm-paper: transparent; /* page canvas stays unpainted */
  --calm-surface: var(--pk-card);
  --calm-sea: var(--pk-accent);
  --calm-sea-soft: var(--pk-card);
  --calm-sand: var(--pk-card);
  --calm-border: var(--pk-border);
  --calm-shadow: none;
  color: var(--pk-text);
  /* longhands only — homepage-motion.css uses a `background` shorthand on this
     same selector, and a shorthand here would wipe the page photograph */
  background-color: var(--pk-page-background-color);
  background-image: var(--pk-page-background-image, none), var(--pk-module-background-image);
  background-repeat: no-repeat, no-repeat;
  background-position: center top, center top;
  background-size: cover, cover;
  background-attachment: fixed, fixed;
}

/* the hero itself is page canvas; its inner panels are cards */
body.template-index-motion .editorial-hero {
  background: transparent !important;
  color: var(--pk-text);
}

body.template-index-motion .editorial-hero__title,
body.template-index-motion .editorial-hero__kicker,
body.template-index-motion [class*='editorial-']__eyebrow {
  color: var(--pk-accent);
}

body.template-index-motion .editorial-hero__title {
  font-family: var(--pk-font-heading);
  font-weight: 400;
}

body.template-index-motion .editorial-hero__intro {
  color: var(--pk-text-muted);
}

body.template-index-motion .editorial-hero__feature,
body.template-index-motion .editorial-hero__product,
body.template-index-motion .editorial-spotlight__inner,
body.template-index-motion .editorial-collections__card,
body.template-index-motion .editorial-products__card,
body.template-index-motion .editorial-recipes__card,
body.template-index-motion .editorial-story__steps li {
  background: var(--pk-card) !important;
  border: 1px solid var(--pk-border) !important;
  border-radius: var(--pk-radius-card) !important;
  box-shadow: none !important;
  color: var(--pk-text) !important;
}

body.template-index-motion .editorial-collections__card {
  color: var(--pk-text) !important;
}

body.template-index-motion .editorial-collections__card:hover,
body.template-index-motion .editorial-products__card:hover,
body.template-index-motion .editorial-recipes__card:hover {
  border-color: var(--pk-accent) !important;
}

/* accent button: amber fill, dark ink (homepage-motion hard-codes #fff) */
body.template-index-motion .editorial-hero__button {
  background: var(--pk-accent) !important;
  border-color: var(--pk-accent) !important;
  color: var(--pk-on-accent) !important;
  border-radius: var(--pk-radius-btn) !important;
}

body.template-index-motion .editorial-hero__button:hover {
  background: var(--pk-accent) !important;
  border-color: var(--pk-accent) !important;
  color: var(--pk-on-accent) !important;
}

/* the homepage rescales every button to 6px and the spotlight stamp to a
   pill; both are overridden back to the requested radii */
body.template-index-motion #MainContent a[class*='button'],
body.template-index-motion #MainContent button:not([disabled]) {
  border-radius: var(--pk-radius-btn) !important;
}

body.template-index-motion .editorial-spotlight__stamp {
  background: var(--pk-tag-2) !important;
  color: var(--pk-on-accent) !important;
  border-radius: var(--pk-radius-btn) !important;
}

body.template-index-motion .editorial-story__steps li {
  background: var(--pk-card) !important;
}

body.template-index-motion .editorial-footer__newsletter {
  background: var(--pk-card) !important;
  border: 1px solid var(--pk-border) !important;
  border-radius: var(--pk-radius-card) !important;
  box-shadow: none !important;
}

body.template-index-motion .editorial-products__button,
body.template-index-motion .editorial-recipes__link {
  color: var(--pk-accent);
}

/* ==========================================================================
   CART COUNT CIRCLES
   --------------------------------------------------------------------------
   The theme renders its item-count bubble a second time next to the word
   "Cart": once inside the cart page's <h1> and once inside the drawer's
   <h2 class="cart-drawer__heading">. Both read as a stray circle sitting on
   the heading, so they are switched off here. The badge on the cart icon in
   the header is a different element and stays as it is.
   ========================================================================== */
body .cart-title .cart-bubble,
body .cart-page__title .cart-bubble,
body .cart-drawer__heading .cart-bubble {
  display: none !important;
}

/* ==========================================================================
   GEMSTONE TYPE
   --------------------------------------------------------------------------
   Peacock emerald reads like a polished stone: a cool white core, a mint
   facet, an amber flash. Headings and prices carry that gradient; body copy
   stays quiet so the page still reads.

   Every gradient has a solid colour stated first, so a browser without
   background-clip:text still shows readable type instead of nothing.
   ========================================================================== */

/* 1. solid ink first — the safe layer ----------------------------------- */

body,
body p,
body li,
body .rte,
body .rte p,
body .rte li {
  color: var(--pk-ink-body);
}

body h1, body h2, body h3, body h4, body h5, body h6,
body .h1, body .h2, body .h3, body .h4, body .h5, body .h6,
body .editorial-hero__title,
body .editorial-collections__header h2,
body .editorial-products__header h2,
body .editorial-recipes__header h2,
body .editorial-faq__header h2,
body .editorial-spotlight__content h2,
body .editorial-story__statement h2,
body .editorial-footer__intro h2,
body .editorial-collections__meta h3,
body .editorial-products__details h3,
body .editorial-recipes__meta h3,
body .editorial-story__steps h3,
body .pk-moods__heading,
body .pk-packs__heading,
body .product-card__title,
body .card__heading {
  color: var(--pk-ink-solid);
}

body.template-index-motion .editorial-hero__title,
body.template-index-motion .editorial-collections__header h2,
body.template-index-motion .editorial-spotlight__copy h2,
body.template-index-motion .editorial-products__header h2,
body.template-index-motion .editorial-recipes__header h2,
body.template-index-motion .editorial-story__statement h2,
body.template-index-motion .editorial-faq__header h2,
body.template-index-motion .editorial-footer__intro h2 {
  color: var(--pk-ink-solid);
}

/* 2. the gradient, only where it can actually be clipped ------------------ */

@supports (-webkit-background-clip: text) or (background-clip: text) {
  body h1, body h2, body h3, body h4, body h5, body h6,
  body .h1, body .h2, body .h3, body .h4, body .h5, body .h6,
  body .editorial-hero__title,
  body .editorial-collections__header h2,
  body .editorial-products__header h2,
  body .editorial-recipes__header h2,
  body .editorial-faq__header h2,
  body .editorial-spotlight__content h2,
  body .editorial-story__statement h2,
  body .editorial-footer__intro h2,
  body .editorial-collections__meta h3,
  body .editorial-products__details h3,
  body .editorial-recipes__meta h3,
  body .editorial-story__steps h3,
  body .pk-moods__heading,
  body .pk-packs__heading,
  body .product-card__title,
  body .card__heading,
  body.template-index-motion .editorial-hero__title,
  body.template-index-motion .editorial-collections__header h2,
  body.template-index-motion .editorial-spotlight__copy h2,
  body.template-index-motion .editorial-products__header h2,
  body.template-index-motion .editorial-recipes__header h2,
  body.template-index-motion .editorial-story__statement h2,
  body.template-index-motion .editorial-faq__header h2,
  body.template-index-motion .editorial-footer__intro h2 {
    background-image: linear-gradient(
      102deg,
      var(--pk-ink-1) 0%,
      var(--pk-ink-2) 28%,
      var(--pk-ink-3) 62%,
      var(--pk-ink-4) 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }

  /* prices: amber into mint, the flash of the stone */
  body .price,
  body .price__container,
  body .price-item,
  body .product__price,
  body .editorial-products__details strong,
  body .mobile-purchase-dock__price,
  body .unit-price {
    background-image: linear-gradient(96deg, var(--pk-ink-4) 0%, var(--pk-ink-3) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }

  /* the scrolling strip: mint through white into amber */
  body .editorial-marquee__track span {
    background-image: linear-gradient(
      90deg,
      var(--pk-ink-3) 0%,
      var(--pk-ink-1) 45%,
      var(--pk-ink-2) 70%,
      var(--pk-ink-4) 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
    -webkit-text-fill-color: transparent;
  }

  /* the four pack facts keep their own colour, polished */
  body .pk-packs__fact--1 .pk-packs__value {
    background-image: linear-gradient(120deg, #7ED9C6 0%, #DCF7F1 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }

  body .pk-packs__fact--2 .pk-packs__value {
    background-image: linear-gradient(120deg, #FFB020 0%, #FFE3A8 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }

  body .pk-packs__fact--3 .pk-packs__value {
    background-image: linear-gradient(120deg, #123B70 0%, #5B8FD6 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }

  body .pk-packs__fact--4 .pk-packs__value {
    background-image: linear-gradient(120deg, #FF5CA8 0%, #FFB3D6 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}

/* 3. supporting colours --------------------------------------------------- */

/* eyebrows and kickers keep the amber, tightened up */
body .editorial-hero__kicker,
body .editorial-products__header span:first-child,
body .editorial-collections__header span,
body .editorial-recipes__header span,
body .editorial-faq__header > span,
body .editorial-story__eyebrow span,
body .editorial-spotlight__index,
body .pk-moods__eyebrow,
body .pk-packs__eyebrow {
  color: var(--pk-accent);
}

/* secondary copy stays mint so it sits behind the headings */
body .editorial-products__details p,
body .editorial-collections__meta p,
body .editorial-collections__header p,
body .editorial-recipes__header p,
body .editorial-recipes__meta p,
body .editorial-faq__header p,
body .editorial-faq__answer p,
body .editorial-story__statement > p,
body .editorial-story__steps p,
body .editorial-spotlight__content > p,
body .editorial-hero__intro p,
body .pk-moods__text,
body .pk-packs__text {
  color: var(--pk-text-muted);
}

/* inline links: amber, with a soft underline that brightens to mint */
body .rte a,
body .editorial-faq__answer a,
body .editorial-recipes__meta a,
body .editorial-products__header a,
body .editorial-recipes__link,
body .editorial-products__button {
  color: var(--pk-accent);
  text-decoration-color: rgba(255, 176, 32, 0.45);
  text-underline-offset: 0.2em;
  transition: color 160ms ease, text-decoration-color 160ms ease;
}

body .rte a:hover,
body .editorial-faq__answer a:hover,
body .editorial-recipes__meta a:hover,
body .editorial-products__header a:hover,
body .editorial-recipes__link:hover,
body .editorial-products__button:hover {
  color: var(--pk-ink-3);
  text-decoration-color: rgba(126, 217, 198, 0.6);
}

/* selection and focus pick up the same amber flash */
::selection {
  background: rgba(255, 176, 32, 0.35);
  color: #ffffff;
}