/** 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 ============ */

/* ============ PTP: spritzer add-on card, 27 Sep (added by Claude) ============ */
/* The olive oil spritzer offer on the kit product pages was a hot pink card
   (#DC4B83 border on #FFF6FA) sitting directly above a deep purple Add to cart
   button, with the lilac flavour card above it. Three colour languages in one
   column, and the pink read as a warning rather than an offer. It now uses the
   same purple as .ptpk-addon, the extra-bowl card defined in the same section.
   The bottle photo is white on white, so it gets a hairline.

   WHY HERE AND NOT IN sections/ptp-kit-product.liquid: those colours are hardcoded
   in that section's {% style %} block and that file is 62KB. The connector can only
   upsert whole files, so changing two hex values there means retyping the largest
   and highest-risk file on the site by hand.

   !important is required because that {% style %} block renders inline in the body,
   after this stylesheet.

   WARNING, and the reason this took two attempts: assets/ptp-kit-uniformity.css and
   assets/ptp-kit-images.css are NOT LOADED. Nothing imports them. Their rules were
   copied into this file instead, which is why the kit cards still look right. The
   header comment inside ptp-kit-uniformity.css claims "Loaded via custom.css" and
   that is false. Edits to either file do nothing. Put CSS here. */
.ptpk-spray{border-color:#3E22AD !important;background:#F9F7FE !important}
.ptpk-spray input[type="checkbox"]{accent-color:#3E22AD !important}

/* 27 Sep, later the same day: the product shot was replaced with the white can on a
   deep purple field, baked into the image rather than transparent (IMG-8503.png,
   1122x1402). The tile was a 44x44 square with object-fit:contain and a white fill,
   so a portrait image letterboxed with white slivers down both sides. The tile is
   now portrait at roughly the image's own ratio and the white fill and hairline are
   gone, so the purple runs edge to edge. object-fit:cover rather than contain so
   sub-pixel rounding cannot reintroduce a sliver.

   IF THE IMAGE IS EVER SWAPPED BACK to a white-background or transparent packshot,
   revert this block or the can will be cropped and sitting on nothing. */
.ptpk-spray img{width:46px !important;height:59px !important;object-fit:cover !important;background:transparent !important;border:0 !important;border-radius:8px !important}
/* ============ end spritzer add-on card ============ */