/** Shopify CDN: Minification failed

Line 242:0 Unexpected "@media"

**/
/* ==========================================================================
   FRANKY'S — custom styles (The Local Folk)
   Loaded after theme.css in layout/theme.liquid. Keep theme.css untouched so
   Stretch updates stay easy; put all Franky's overrides here.
   ========================================================================== */

/* --- P4: Shop by Colour (templates/collection.colour.json) ---------------
   Switcher: sections/frankys-colour-switcher.liquid
   Heading:  sections/frankys-colour-heading.liquid
   Mobile first. Tile sizes come from section settings as CSS variables. */
.colour-switcher {
  --section-stack-row-gap: 2rem;
}

.colour-switcher__intro {
  max-width: 37rem;
  margin-inline: auto;
}

.colour-switcher__picker {
  display: grid;
  row-gap: 1.25rem;
}

.frankys-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.frankys-section-header__link {
  flex-shrink: 0;
  font-size: var(--text-sm);
}

.colour-switcher__list {
  display: grid;
  grid: auto / auto-flow var(--colour-switcher-tile-width, 70vw);
  gap: calc(var(--container-gutter) / 2);
}

.colour-switcher__tile {
  display: block;
  min-width: 44px;
  min-height: 44px;
  -webkit-tap-highlight-color: transparent;
}

.colour-switcher__media {
  aspect-ratio: 1;
}

.colour-switcher__media .content-box__background-media img {
  object-fit: cover;
}

.colour-switcher__tile {
  background: none; /* the tile scheme is only used for its text colour */
}

/* Figma (421px tile): icon centred ~37% down, name centred 62.5% down at 50px */
.colour-switcher__media {
  --content-box-spacing: 0px;
  container-type: inline-size;
}

.colour-switcher__label {
  position: absolute;
  inset: 0;
  color: rgb(var(--text-color));
}

.colour-switcher__label .h3 {
  position: absolute;
  inset-inline: 0;
  top: 62.5%;
  transform: translateY(-50%);
  font-size: clamp(.875rem, 11.9cqi, 3.125rem);
  line-height: 1.2;
}

/* Icon SVGs live in assets/ and are painted in the tile text colour through a mask
   (see snippets/frankys-colour-icon.liquid) */
.colour-switcher__icon--mask {
  display: block;
  aspect-ratio: var(--icon-ratio, 1);
  background-color: currentColor;
  -webkit-mask: var(--icon-url) center / contain no-repeat;
  mask: var(--icon-url) center / contain no-repeat;
}

/* Icon width is a % of the tile, set per icon in snippets/frankys-colour-icon.liquid */
.colour-switcher__icon {
  position: absolute;
  left: 50%;
  top: 37%;
  width: var(--icon-width, 30%);
  height: auto;
  transform: translate(-50%, -50%);
}

/* Current colour: a thin bar under the tile in the page text colour (not in the Figma; keeps the state visible) */
.colour-switcher__picker {
  --colour-switcher-current: var(--text-color);
}

.colour-switcher__tile {
  padding-block-end: 6px;
}

.colour-switcher__tile[aria-current="page"] {
  box-shadow: inset 0 -3px 0 rgb(var(--colour-switcher-current));
}

.colour-switcher__tile:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: -6px;
}

.colour-heading {
  padding-block-end: 1rem;
}

.colour-heading__description {
  display: grid;
  justify-items: start;
  gap: .25rem;
  max-width: 45rem;
}

.colour-heading__description-text > :last-child {
  margin-block-end: 0;
}

/* Swapping colours: fade the old grid while the next one loads */
.shopify-section[aria-busy="true"] {
  opacity: .5;
  transition: opacity .2s ease;
}

@media screen and (min-width: 700px) {
  .colour-switcher__list {
    grid: auto / auto-flow 26vw;
  }
}

@media screen and (min-width: 1000px) {
  .colour-switcher__list {
    grid: auto / auto-flow calc((100% - (var(--colour-switcher-tiles-per-row, 4) - 1) * var(--container-gutter) / 2) / var(--colour-switcher-tiles-per-row, 4));
  }
}

@media (prefers-reduced-motion: reduce) {
  .shopify-section[aria-busy="true"] {
    transition: none;
  }
}

/* P4: "Good mornings" banner (text-with-media on the colour template).
   Figma: 50/50, copy left on #ebe9d1, photo right at 864 x 602; on mobile the
   copy sits above the photo. Section id ends in __good_mornings. */
:is([id$="__good_taste"], [id$="__good_mornings"]) .color-scheme {
  --background: 235 233 209;
}

:is([id$="__good_taste"], [id$="__good_mornings"]) .section-split__column--image {
  aspect-ratio: 864 / 602;
}

:is([id$="__good_taste"], [id$="__good_mornings"]) .section-split__column--image img {
  object-fit: cover;
}

@media screen and (max-width: 999px) {
  :is([id$="__good_taste"], [id$="__good_mornings"]) .section-split {
    display: flex;
    flex-direction: column-reverse;
  }

  :is([id$="__good_taste"], [id$="__good_mornings"]) .section-split__column:not(.section-split__column--image) {
    padding-block: var(--section-vertical-spacing);
  }
}

/* P4: "Collections you will love": heading and link on one line on mobile too */
:is([id$="__collections_you_will_love"], [id$="__shop_by_colour"]) .section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

/* P4: type sizes from the Figma, scaled between the mobile (402px) and desktop (1728px) frames */
.colour-switcher__intro .h3 {
  font-size: clamp(2rem, 1.659rem + 1.357vw, 3.125rem);
  line-height: 1.2;
}

.colour-switcher .frankys-section-header .h5,
.colour-heading .h5,
.shopify-section--frankys-collection-products .frankys-section-header .h5,
:is([id$="__collections_you_will_love"], [id$="__shop_by_colour"]) .section-header .h5 {
  font-size: clamp(1.25rem, 1.061rem + .754vw, 1.875rem);
  line-height: 1.2;
}

:is([id$="__good_taste"], [id$="__good_mornings"]) .h3 {
  max-width: 11.5em; /* Figma text box is 553px at 50px: breaks after "table," */
  font-size: clamp(1.875rem, 1.496rem + 1.508vw, 3.125rem);
  line-height: 1.2;
}

/* P4: product grids on the colour template are contained with small gaps and no
   borders (Figma), unlike the edge-to-edge bordered grid on other collections. */
.shopify-section--colour-switcher ~ .shopify-section--main-collection,
.shopify-section--frankys-collection-products {
  --product-list-column-gap: .375rem;
  --product-list-row-gap: 2rem;
}

.shopify-section--colour-switcher ~ .shopify-section--main-collection .collection {
  padding-inline: var(--container-gutter);
}

.shopify-section--colour-switcher ~ .shopify-section--main-collection .collection__results,
.shopify-section--colour-switcher ~ .shopify-section--main-collection .collection__toolbar {
  padding-inline: 0;
}

.shopify-section--colour-switcher ~ .shopify-section--main-collection .collection__toolbar {
  border-block-start-width: 0;
}

.shopify-section--colour-switcher ~ .shopify-section--main-collection .product-card--bordered,
/* Product rows: scroll bar instead of arrows on mobile (the bar is in the section markup) */
@media screen and (max-width: 699px) {
  .shopify-section--frankys-collection-products .floating-controls__control {
    display: none;
  }
}

.shopify-section--frankys-collection-products .product-card--bordered {
  outline: 0;
}

.shopify-section--colour-switcher ~ .shopify-section--main-collection .product-list,
.shopify-section--frankys-collection-products .product-list {
  --product-list-card-border-width: 0px;
  gap: var(--product-list-row-gap) var(--product-list-column-gap);
}

/* Card text lines up with the left edge of the photo (Figma); the theme pads it for bordered cards */
.shopify-section--colour-switcher ~ .shopify-section--main-collection .product-card__info,
.shopify-section--frankys-collection-products .product-card__info {
  padding-inline: 0;
}

/* Mobile filter button: full-width outlined bar, as in the mobile Figma */
@media screen and (max-width: 699px) {
  .shopify-section--colour-switcher ~ .shopify-section--main-collection .collection__toolbar [aria-controls="facets-drawer"] {
    width: 100%;
    min-height: 48px;
    padding-inline: 1.25rem;
    justify-content: space-between;
    flex-direction: row-reverse;
    border: 1px solid rgb(var(--text-color));
  }

  .shopify-section--colour-switcher ~ .shopify-section--main-collection .collection__toolbar {
    flex-wrap: wrap;
  }
}

@media screen and (min-width: 1000px) {
  .shopify-section--colour-switcher ~ .shopify-section--main-collection,
  .shopify-section--frankys-collection-products {
    --product-list-column-gap: .75rem;
    --product-list-row-gap: 3rem;
  }
}

/* P4: "Collections you will love" names sized to the card like the colour tiles.
   9cqi keeps the longest name ("Placemats") on one line inside the card padding,
   and words never split mid-word. */
:is([id$="__collections_you_will_love"], [id$="__shop_by_colour"]) .collection-list__item .h3 {
  font-size: clamp(.875rem, 9cqi, 3.125rem);
  line-height: 1.2;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: manual;
}

/* --- FRANKY'S (TLF) P4: Homepage (templates/index.json) --------------------
   Figma: "Homepage - Desktop" (1728px) and "Homepage - Mobile" (402px).
   Stock sections; these rules are scoped to the homepage section keys.
   "Good taste" reuses the "Build your own table" rules above, and
   "Shop by Colour" reuses the "Collections you will love" rules. */

/* Section headings: 20px mobile to 30px desktop, like the colour template */
:is([id$="__made_for_living"], [id$="__instagram"], [id$="__reasons_to_love"]) .h5,
.ugc-videos__header .h5 {
  font-size: clamp(1.25rem, 1.061rem + .754vw, 1.875rem);
  line-height: 1.2;
}

[id$="__made_for_living"] .prose {
  max-width: 52rem;
  margin-inline: auto;
}

/* Hero and "Set the table your way": 30px mobile to 50px desktop */
:is([id$="__hero"], [id$="__set_the_table"]) .h3 {
  font-size: clamp(1.875rem, 1.496rem + 1.508vw, 3.125rem);
  line-height: 1.2;
}

[id$="__hero"] .h3 {
  max-width: 13.4em; /* "A Good Day Starts With A" is ~12.2em, adding "Good" makes ~14.5em: "Good Night" always wraps to line 2 */
  margin-inline: auto;
}

/* Hero: a little taller on phones when the section uses a fixed height (theme "md" is 45vmax) */
@media screen and (max-width: 699px) {
  [id$="__hero"] .content-box.min-h-md {
    min-height: clamp(26rem, 115vw, 40rem); /* Figma mobile hero is a little taller than wide */
  }
}

/* Hero copy and button as in the Figma: regular-weight copy, "Shop Now" not lowercased */
[id$="__hero"] .prose p {
  font-weight: 400;
}

[id$="__hero"] .button {
  text-transform: none;
}

/* Hero on phones (Figma mobile): text block sits low with the button near the bottom edge */
@media screen and (max-width: 699px) {
  [id$="__hero"] .content-box > .place-self-center {
    align-self: end;
  }

  /* "A Good Day Starts With" is 10.2em, adding "A" makes 11em: "A Good Night" goes to line 2 */
  [id$="__hero"] .h3 {
    max-width: 10.6em;
  }

  [id$="__hero"] .prose {
    --prose-heading-spacing: 1.75rem;
    --prose-button-spacing: 3.25rem;
  }

  [id$="__hero"] .prose p {
    max-width: none;
    font-size: .8125rem;
    line-height: 1.6;
  }
}

/* "At home with Frankys": UGC videos (sections/frankys-ugc-videos.liquid).
   Tall 303 x 540 cards, handle bottom left. About two across on mobile,
   five across on desktop; more cards scroll. */
.ugc-videos__header {
  max-width: 52rem;
  margin-inline: auto;
}

.ugc-videos {
  display: grid;
  grid: auto / auto-flow var(--ugc-videos-mobile-width, 52vw);
  gap: calc(var(--container-gutter) / 2);
}

.ugc-videos__card {
  position: relative;
  display: block;
  aspect-ratio: 303 / 540;
  overflow: hidden;
  background: rgb(var(--text-color) / .1); /* grey box until a poster or video is added */
}

.ugc-videos__media,
.ugc-videos__poster,
.ugc-videos__video,
.ugc-videos__toggle {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.ugc-videos__poster,
.ugc-videos__video {
  object-fit: cover;
}

/* The video sits under the poster until it's actually playing */
.ugc-videos__video {
  z-index: 0;
}

.ugc-videos__poster {
  z-index: 1;
  transition: opacity .3s ease;
}

frankys-ugc-video[playing] .ugc-videos__poster {
  opacity: 0;
}

.ugc-videos__toggle {
  z-index: 2;
  display: grid;
  place-items: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.ugc-videos__toggle .play-button {
  width: 56px;
  height: 56px;
}

frankys-ugc-video[playing] .ugc-videos__toggle .play-button {
  opacity: 0;
}

.ugc-videos__toggle:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -6px;
}

.ugc-videos__handle {
  position: absolute;
  z-index: 3;
  inset-inline-start: 1.125rem;
  inset-block-end: .75rem;
  margin: 0;
  color: #f5f5f5;
  font-size: var(--text-sm);
  line-height: 1.5;
  text-shadow: 0 1px 4px rgb(0 0 0 / .25);
}

@media (prefers-reduced-motion: reduce) {
  .ugc-videos__poster,
  .ugc-videos__toggle .play-button {
    transition: none;
  }
}

/* Category tiles (2 x 2): 50px heading in the middle, button at the bottom */
[id$="__category_tiles"] .media-blocks__item {
  --button-background-primary: 172 208 207;
  --button-text-primary: 80 61 53;
  aspect-ratio: 1;
  container-type: inline-size;
}

[id$="__category_tiles"] .media-blocks__item img {
  object-fit: cover;
}

[id$="__category_tiles"] .media-blocks__item .h3 {
  max-width: 70%; /* Figma text box is 553px in a 789px tile */
  margin-inline: auto;
  font-size: clamp(1.25rem, 6.3cqi, 3.125rem); /* 50px in a 789px tile: scales with the tile, not the window */
  line-height: 1.2;
  text-align: center;
}

/* "Shop by Colour" tiles: squares in the mobile and tablet carousel (about 2 across on a phone) */
@media screen and (max-width: 699px) {
  [id$="__shop_by_colour"] .collection-list {
    --collection-list-grid: auto / auto-flow 46vw;
  }

  /* Names sized to the 46vw tile so "Chocolate" and "Terracotta" fit on one line */
  [id$="__shop_by_colour"] .collection-list__item .content-box {
    --content-box-spacing: .75rem;
  }

  [id$="__shop_by_colour"] .collection-list__item .h3 {
    font-size: 6.2vw;
  }
}

@media screen and (min-width: 700px) and (max-width: 999px) {
  [id$="__shop_by_colour"] .collection-list {
    --collection-list-grid: auto / auto-flow 30vw;
  }

  [id$="__shop_by_colour"] .collection-list__item .content-box {
    --content-box-spacing: .75rem;
  }

  [id$="__shop_by_colour"] .collection-list__item .h3 {
    font-size: 4vw;
  }
}

/* "Shop by Colour" names are #ebe9d1 in the Figma (not white) */
[id$="__shop_by_colour"] .collection-list__item {
  --text-color: 235 233 209;
}

/* Homepage colour cards with an icon: laid out like the colour page tiles,
   icon centred ~37% down and the name 62.5% down */
[id$="__shop_by_colour"] .content-box:has(> .colour-switcher__icon) > .prose {
  position: absolute;
  inset-inline: var(--content-box-spacing);
  top: 62.5%;
  transform: translateY(-50%);
  width: auto;
}

/* Desktop grid: name sized to the tile like the colour page (11.9cqi), so two-word names stay on one line under the icon */
@media screen and (min-width: 1000px) {
  [id$="__shop_by_colour"] .content-box:has(> .colour-switcher__icon) {
    --content-box-spacing: .75rem;
    container-type: inline-size;
  }

  [id$="__shop_by_colour"] .content-box:has(> .colour-switcher__icon) .h3 {
    font-size: clamp(.875rem, 11.9cqi, 3.125rem);
  }
}

/* Milk, Butter and Beige tiles are too pale for light text: the lightest brown on each
   that still meets 3:1 contrast for large text (homepage tiles and colour switcher) */
[id$="__shop_by_colour"] .collection-list__item[href*="/collections/milk"],
.colour-switcher__tile[href*="/collections/milk"] {
  --text-color: 169 127 96; /* #a97f60, 3.1:1 on Milk */
}

[id$="__shop_by_colour"] .collection-list__item[href*="/collections/butter"],
.colour-switcher__tile[href*="/collections/butter"] {
  --text-color: 146 107 79; /* #926b4f, 3:1 on Butter */
}

[id$="__shop_by_colour"] .collection-list__item[href*="/collections/beige"],
.colour-switcher__tile[href*="/collections/beige"] {
  --text-color: 159 117 86; /* #9f7556, 3.1:1 on Beige */
}

/* @frankysaus: three square photos on mobile, six across on desktop */
[id$="__instagram"] .media-blocks {
  --media-blocks-grid: auto-flow / repeat(3, minmax(0, 1fr));
  --media-blocks-gap: .25rem;
}

[id$="__instagram"] .media-blocks__item {
  aspect-ratio: 1;
}

[id$="__instagram"] .media-blocks__item img {
  object-fit: cover;
}

/* "Reasons to love Frankys": light blue band, text in the brand brown.
   Lives in the footer group (sections/footer-group.json), so it shows on every page. */
[id$="__reasons_to_love"] .color-scheme {
  --text-color: 80 61 53;
}

@media screen and (max-width: 699px) {
  [id$="__instagram"] .media-blocks__item:nth-child(n + 4) {
    display: none;
  }
}

@media screen and (min-width: 700px) {
  .ugc-videos {
    grid: auto / auto-flow 30vw;
  }
}

@media screen and (min-width: 1000px) {
  .ugc-videos {
    grid: auto / auto-flow calc((100% - (var(--ugc-videos-per-row, 5) - 1) * var(--container-gutter) / 2) / var(--ugc-videos-per-row, 5));
  }

  [id$="__instagram"] .media-blocks {
    --media-blocks-grid: auto-flow / repeat(6, minmax(0, 1fr));
    --media-blocks-gap: .5rem;
  }
}