/** Shopify CDN: Minification failed

Line 77:15 Expected identifier but found "{"
Line 77:16 Unexpected "{"
Line 77:24 Expected ":"
Line 78:10 Expected identifier but found "{"
Line 78:11 Unexpected "{"
Line 78:19 Expected ":"
Line 81:10 Expected identifier but found "{"
Line 81:11 Unexpected "{"
Line 81:19 Expected ":"

**/
/*

Please add any custom CSS code in here, it will be easier to transfer if updating themes.

We highly recommend labelling changes, or App installs, so these can also be updated or removed as needed.

*/

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.product-page--pricing--discount span.money {
    font-size: 14px;
    font-weight: bold;
}
span.variant-value-wrapper {
    color: white;
    background: #4527b6;
}
p.compair-saved {
    position: absolute;
    bottom: 100%;
    margin: 0;
    padding: 2px 3px;
    color: black;
    font-weight: 700;
    border: 2px solid #37ea93;
    font-size: 14px;
    border-radius: 8px;
}
.product-page--pricing {
    margin-top: 46px;
    position: relative;
}
li.product-page--pricing--variant-price span.money {
    font-weight: bold;
    color: #37ea93;
}
#footer-payment-methods {
    align-items: center;
}
img.custom-afterpay {
    width: 71px;
    border-radius: 6px;
    margin-left: 3px;
    height: 33px;
    display: flex;
    align-items: baseline;
    justify-content: center;
}
.container {
    max-width: 100%;
}

/* ///////////////////////////////////scrolling-aanouncement-bar-css////////////////////////////////////////// */
  .custom-marquee {
    position: relative;
    width: 91%;
    max-width: 100%;
    height: 43px;
    overflow-x: hidden;
    margin-right: 25px !important;
    background:{{section.settings.colorBackground}}; 
    color:{{section.settings.colorText}}; 
  }
  .custom-marquee a {
    color:{{section.settings.colorText}}; 
  }
  .custom-marquee .track {
      position: absolute;
      bottom: 6px;
      white-space: nowrap;
      will-change: transform;
      animation: marquee 20s linear infinite;
  }
  .custom-marquee .content {
    margin-left: 40px;
  }
  @keyframes marquee {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(-20%);
    }
  }

/* ///////////////////////////////////scrolling-aanouncement-bar-css////////////////////////////////////////// */

/* ============ PTP Fable 5: display typography (added by Claude) ============ */
.ptpx-hero-h1,.ptpx-kits-h2,.ptpx-flav-h2,.ptpx-soc-h2,.ptpx-gift-h3,.ptpx-faq-h2,.ptpx-cta-h2,.ptpx-kit-name,.ptpx-pack-name,.ptpx-kit-pr,.ptpx-pack-price,.ptpx-flav-name,.ptpx-kitp-title,.ptpx-kitp-price,.ptphow-h2,.ptpoc-h2,.ptpen-h,.ptpuse-h2{font-family:'DM Serif Display',Georgia,serif !important;font-weight:400 !important;font-style:normal !important;letter-spacing:0}
.ptpx-hero-h1 em,.ptpx-cta-h2 em{font-style:normal !important}
/* ============ end typography ============ */

/* ============ PTP Fable 5: button overrides (added by Claude) ============ */
/* The theme styles all links purple + underlined. These force PTP buttons to render correctly. DO NOT REMOVE. */
a.ptpx-btn,a.ptpx-btn:link,a.ptpx-btn:visited,a.ptpx-btn:hover,a.ptpx-btn:active,
a.ptpx-kit-btn,a.ptpx-kit-btn:link,a.ptpx-kit-btn:visited,a.ptpx-kit-btn:hover,a.ptpx-kit-btn:active{
  text-decoration:none !important;border-bottom:0 !important;box-shadow:none !important;
}
a.ptpx-btn--solid,a.ptpx-btn--solid:link,a.ptpx-btn--solid:visited,a.ptpx-btn--solid:hover,a.ptpx-btn--solid:active{background:#DC4B83 !important;color:#ffffff !important}
a.ptpx-btn--ghost,a.ptpx-btn--ghost:link,a.ptpx-btn--ghost:visited,a.ptpx-btn--ghost:hover,a.ptpx-btn--ghost:active{background:transparent !important;color:#ffffff !important;border:2px solid rgba(255,255,255,.6) !important}
a.ptpx-kit-btn,a.ptpx-kit-btn:link,a.ptpx-kit-btn:visited{color:#ffffff !important}
.ptpx-hero-h1{color:#ffffff !important}
.ptpx-hero-h1 em{color:#FFC8DE !important}
a.ptpx-pack,a.ptpx-pack:link,a.ptpx-pack:visited,a.ptpx-pack:hover,a.ptpx-pack:active,
a.ptpx-flav-card,a.ptpx-flav-card:link,a.ptpx-flav-card:visited,a.ptpx-flav-card:hover,a.ptpx-flav-card:active,
a.ptpen-card,a.ptpen-card:link,a.ptpen-card:visited,
a.ptpoc-tile,a.ptpoc-tile:link,a.ptpoc-tile:visited,
a.ptpx-kitp-cross,a.ptpx-kitp-cross:link,a.ptpx-kitp-cross:visited{text-decoration:none !important}
/* ============ end button overrides ============ */

/* ============ PTP Fable 5: product gallery sizing (added by Claude) ============ */
.ptpk-main,.ptpb-main{max-width:480px;margin-left:auto;margin-right:auto;background:#ffffff !important;border:1px solid #f1ecfa}
.ptpk-main img,.ptpb-main img{width:100% !important;height:auto !important;aspect-ratio:1/1 !important;object-fit:contain !important;padding:14px}
.ptpk-vid,.ptpb-vid{max-width:480px;margin-left:auto;margin-right:auto}
.ptpk-thumbs,.ptpb-thumbs{max-width:480px;margin-left:auto;margin-right:auto}
.ptpk-thumbs img,.ptpb-thumbs img{object-fit:contain !important;background:#ffffff;border:1px solid #f1ecfa;padding:4px}
@media(max-width:860px){
  .ptpk-main,.ptpb-main,.ptpk-vid,.ptpb-vid,.ptpk-thumbs,.ptpb-thumbs{max-width:100%}
  .ptpk-main img,.ptpb-main img{padding:18px}
}
/* ============ end gallery sizing ============ */

/* ============ PTP Fable 5: seasoning gallery (added by Claude) ============ */
.ptps-gal{background:#ffffff;border-radius:18px;overflow:hidden;display:block}
.ptps-gal img{width:100% !important;height:auto !important;aspect-ratio:4/3 !important;max-height:440px;object-fit:cover !important;object-position:center !important;padding:0 !important;display:block}
.ptps-thumbs img{aspect-ratio:1/1 !important;object-fit:cover !important;padding:0 !important}
@media(max-width:860px){.ptps-gal img{aspect-ratio:4/3 !important;max-height:320px}}
/* ============ end seasoning gallery ============ */

/* ============ PTP Fable 5: bowl swatch labels (added by Claude) ============ */
.ptp-sw-item{width:84px !important}
.ptp-sw-nm{font-size:10.5px !important;line-height:1.3 !important;min-height:2.6em}
.ptp-sw-ltd{display:block;font-weight:700;color:#DC4B83;font-size:9px;letter-spacing:.04em;text-transform:uppercase}
/* ============ end bowl swatch labels ============ */

/* ============ PTP Fable 5: mobile hierarchy pass (added by Claude) ============ */
.ptpx-flav-grid{display:grid !important}
@media(max-width:900px){
  .ptpx-flav-grid{grid-template-columns:repeat(2,1fr) !important;gap:10px !important}
  .ptpx-fc-nm{font-size:16px !important;line-height:1.15 !important}
  .ptpx-fc-body{padding:12px 11px 12px !important}
  .ptpx-fc-pr{font-size:13.5px !important}
  .ptpx-fc-add{width:34px !important;height:34px !important;flex:0 0 34px !important;font-size:19px !important}
}
@media(max-width:340px){
  .ptpx-flav-grid{grid-template-columns:1fr !important}
}
.ptpx-kits-h2,.ptpx-flav-h2,.ptphow-h2,.ptpoc-h2,.ptpx-soc-h2,.ptpx-faq-h2,.ptpuse-h2{
  font-size:clamp(30px,6vw,44px) !important;
  line-height:1.08 !important;
  margin-bottom:10px !important;
}
.ptpx-kits,.ptpx-flav,.ptphow,.ptpoc,.ptpuse{padding-top:56px !important;padding-bottom:56px !important}
@media(max-width:900px){
  .ptpx-kits,.ptpx-flav,.ptphow,.ptpoc,.ptpuse{padding-top:44px !important;padding-bottom:44px !important}
}
.ptpen-note{display:block;font:700 11px/1.3 'Archivo',sans-serif;letter-spacing:.07em;text-transform:uppercase;color:#3E22AD;margin:0 0 7px}
.ptpx-flav-viewall{text-align:center;margin-top:22px}
.ptpx-flav-viewall a{display:inline-block;font:700 14px/1 'Archivo',sans-serif;color:#3E22AD;background:#fff;border:2px solid #3E22AD;padding:15px 26px;border-radius:999px;text-decoration:none !important}
.ptpx-flav-viewall a:hover{background:#3E22AD;color:#fff}
/* ============ end mobile hierarchy pass ============ */

/* ============ PTP Fable 5: kit card image sizing (added by Claude) ============ */
/* The kit photos are a mixed set: some square, some wide flat-lays. A fixed aspect
   ratio with object-fit:contain letterboxed the odd ones out, leaving large white
   gaps above and below. These let each image size naturally, capped in height. */
.ptpx-kit-img{padding:4px 20px 14px !important}
.ptpx-kit-img img{
  width:100% !important;height:auto !important;aspect-ratio:auto !important;
  max-height:230px;object-fit:contain !important;display:block;margin:0 auto;
}
.ptpx-kit-name{padding-bottom:2px !important}
.ptpx-kit-size{margin-bottom:2px !important}
@media(max-width:900px){
  .ptpx-kit-img{padding:2px 18px 12px !important}
  .ptpx-kit-img img{max-height:200px}
}
/* ============ end kit card image sizing ============ */

/* ============ PTP Fable 5: legibility pass (added by Claude) ============ */
/* Measured before changing anything: body grey #5c556e on cream #FFF9F3 gives 6.74:1,
   which already passes WCAG AA (4.5:1) and AAA for large text. Contrast was not the
   failure. The real problem was SIZE - several blocks sat at 11-12.5px, too small on
   a phone whatever the contrast. These raise small text to a 13px floor and darken
   the grey to #4A4356 (9.02:1) since that costs nothing.

   MINIMUM BODY SIZE ANYWHERE ON THIS SITE IS 12.5px. Do not go below it. */
.ptpx-kits-sub,.ptpx-kit-tag,.ptpx-kit-inc,.ptpen-p,.ptphow-tx,.ptphow-side-p,
.ptpuse-sub,.ptpuse-fl,.ptpx-packs-head p,.ptps-tag,.ptprv-sub,.ptpby-lede,
.ptpcol-count{color:#4A4356 !important}
.ptphow-tx{font-size:13.5px !important;line-height:1.55 !important}
.ptphow-side-p{font-size:13.5px !important;line-height:1.6 !important}
.ptphow-nm{font-size:13px !important}
.ptpuse-nm{font-size:13.5px !important}
.ptpuse-fl{font-size:12.5px !important;line-height:1.5 !important}
.ptpx-kit-inc{font-size:12.5px !important;line-height:1.5 !important}
.ptpx-kit-tag{font-size:13.5px !important}
.ptpx-kit-lbl{font-size:12.5px !important}
.ptpx-kit-save{font-size:12.5px !important;padding:8px 11px !important}
.ptpen-p{font-size:14px !important;line-height:1.55 !important}
.ptpx-gift-list{font-size:14.5px !important}
.ptpx-fc-ds{font-size:12.5px !important;min-height:3.2em !important;margin-bottom:10px !important}
.ptphow-side a{text-transform:none}
@media(max-width:900px){
  .ptphow-tx{font-size:13px !important}
  .ptpuse-fl{font-size:12.5px !important}
  .ptpx-fc-ds{font-size:12.5px !important}
}
/* ============ end legibility pass ============ */

/* ============ PTP Fable 5: visual rhythm pass, 28 Jul (added by Claude) ============ */
/* NOTE ON CLASS PREFIXES: the current homepage section uses .ptpch- classes.
   The .ptpx- rules above target an earlier version of the homepage and are kept
   only in case that section is ever restored. Everything below is .ptpch-.

   THE PROBLEM THIS SOLVES: section backgrounds ran cream, pink-cream, lilac,
   white, cream, white, lilac, cream, white. All very light values. The page had
   a dark hero, then a long undifferentiated pale stretch, then a dark signup.
   No beat in the middle. These four changes give the page three acts instead
   of one, without touching any markup. */

/* 1. THE POPPER BOWL SECTION GOES DARK.
   It is the one hardware product and it sits two thirds down, exactly where the
   pale run needs breaking. This is the single highest impact change here. */
.ptpch .bowl{
  background:linear-gradient(165deg,#2C1780 0%,#3E22AD 100%) !important;
  position:relative;
}
.ptpch .bowl h2{color:#ffffff !important}
.ptpch .bowl p{color:rgba(255,255,255,.9) !important}
.ptpch .bowl .eyebrow{color:#FFC8DE !important}
.ptpch .bowl .dots .lbl{color:rgba(255,255,255,.86) !important}
.ptpch .bowl .dot{border-color:rgba(255,255,255,.9) !important;box-shadow:0 3px 12px rgba(0,0,0,.35) !important}
.ptpch .bowl-photo{box-shadow:0 26px 64px rgba(0,0,0,.42) !important}
/* Butter button on deep purple: 10.4:1 against the background, and it is the only
   butter-coloured CTA on the page, so the bowl reads as its own moment. */
.ptpch .bowl-ctas .btn,
.ptpch .bowl-ctas a.btn:link,
.ptpch .bowl-ctas a.btn:visited{
  background:#FFC93C !important;color:#17121F !important;
  box-shadow:0 8px 24px rgba(0,0,0,.28) !important;
}
.ptpch .bowl-ctas a.btn:hover{box-shadow:0 16px 38px rgba(0,0,0,.4) !important}
.ptpch .bowl-ctas .note{color:rgba(255,255,255,.78) !important}

/* 2. USE CASE CARDS CARRY THE FLAVOUR THEY RECOMMEND.
   Nine strong flavour colours existed and only ever appeared on small carousel
   tiles. Each card now tints toward the flavour it points at, with a solid rule
   in the full colour on top. Tints were contrast checked before use: body text
   sits above 8:1 on every one, well clear of the 4.5:1 requirement. */
.ptpch .uc-card{border-top:4px solid transparent !important;transition:transform .32s cubic-bezier(.34,1.42,.64,1),box-shadow .3s ease,background .25s ease !important}
.ptpch .uc-grid .uc-card:nth-child(1){background:#FFF6DE !important;border-top-color:#F7C400 !important}
.ptpch .uc-grid .uc-card:nth-child(2){background:#FBEFE4 !important;border-top-color:#C97C3C !important}
.ptpch .uc-grid .uc-card:nth-child(3){background:#F7EAF1 !important;border-top-color:#7B2A55 !important}
.ptpch .uc-grid .uc-card:nth-child(4){background:#EFF9EC !important;border-top-color:#AEE3A1 !important}
.ptpch .uc-grid .uc-card:nth-child(5){background:#E8F2ED !important;border-top-color:#1E5C40 !important}
.ptpch .uc-grid .uc-card:nth-child(6){background:#EDF5FA !important;border-top-color:#B9D6EA !important}
.ptpch .uc-card:hover{border-color:transparent !important}
.ptpch .uc-grid .uc-card:nth-child(1):hover{border-top-color:#F7C400 !important}
.ptpch .uc-grid .uc-card:nth-child(2):hover{border-top-color:#C97C3C !important}
.ptpch .uc-grid .uc-card:nth-child(3):hover{border-top-color:#7B2A55 !important}
.ptpch .uc-grid .uc-card:nth-child(4):hover{border-top-color:#AEE3A1 !important}
.ptpch .uc-grid .uc-card:nth-child(5):hover{border-top-color:#1E5C40 !important}
.ptpch .uc-grid .uc-card:nth-child(6):hover{border-top-color:#B9D6EA !important}

/* 3. THE KITS GRADIENT WAS INVISIBLE.
   It ran #FFF3F8 to cream, a two shade difference nobody would notice. Either
   commit or go flat. This commits. */
.ptpch .kits-sec{background:linear-gradient(175deg,#FFE4EF 0%,#FFF9F3 62%) !important}

/* 4. ONE CURVED EDGE, USED ONCE.
   The kits panel rises over the hero on a 40px radius. Softens the most
   important transition on the page. Deliberately not repeated elsewhere:
   more than one and it becomes a gimmick. */
.ptpch .kits-sec{
  position:relative;z-index:3;
  border-top-left-radius:40px;border-top-right-radius:40px;
  margin-top:-42px;padding-top:66px !important;
}
.ptpch .hero{padding-bottom:96px !important}
@media(max-width:820px){
  .ptpch .kits-sec{border-top-left-radius:28px;border-top-right-radius:28px;margin-top:-30px;padding-top:48px !important}
  .ptpch .hero{padding-bottom:58px !important}
}
/* ============ end visual rhythm pass ============ */

/* ============ PTP Fable 5: origin band compression, 6 Aug (added by Claude) ============ */
/* "Australia's Original Popcorn Seasoning" is the category-creator claim and the one
   line no competitor can copy, so it stays. But it was running as a full-height
   section (64px desktop / 44px mobile top and bottom, on top of a 36px heading and
   a 20px margin under the made-in line) for three short lines of copy. On a phone
   that is close to half a screen of near-empty space sitting between the kits and
   the how-it-works steps.

   This compresses it to a slim trust band without cutting any words. Roughly 45%
   less vertical space on mobile. Text sizes stay above the 12.5px floor set in the
   legibility pass above. */
.ptpch .origin{padding:38px 0 !important}
.ptpch .origin .in{max-width:640px !important}
.ptpch .origin h2{font-size:clamp(21px,3.1vw,29px) !important;line-height:1.18 !important;margin:0 0 9px !important}
.ptpch .origin p{font-size:15.5px !important;line-height:1.5 !important;max-width:48ch !important}
.ptpch .origin .made{margin-top:13px !important;font-size:12.5px !important;letter-spacing:.12em !important}
@media(max-width:820px){
  .ptpch .origin{padding:24px 0 !important}
  .ptpch .origin h2{font-size:20.5px !important;line-height:1.2 !important;margin:0 0 7px !important}
  .ptpch .origin p{font-size:14.5px !important;line-height:1.45 !important}
  .ptpch .origin .made{margin-top:10px !important;font-size:12.5px !important}
}
/* ============ end origin band compression ============ */