/* #region |||||||||| FONTS ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*| */

    /* QUICKSAND --------------------------------------------------------------------------------------------*| */
     @font-face {
      font-family: 'Quicksand';
      src: url('/assets/fonts/Quicksand-VariableFont_wght.ttf') format('truetype');
      font-weight: 300 700;
      font-style: normal;
      font-display: swap;
    }
    /* RUBIK --------------------------------------------------------------------------------------------*| */
    @font-face {
      font-family: 'Rubik';
      src: url('/assets/fonts/Rubik-VariableFont_wght.ttf') format('truetype');
      font-weight: 300 900;
      font-style: normal;
      font-display: swap;
    }
    @font-face {
      font-family: 'Rubik';
      src: url('/assets/fonts/Rubik-Italic-VariableFont_wght.ttf') format('truetype');
      font-weight: 300 900;
      font-style: italic;
      font-display: swap;
    }
/* #endregion */



/* #region |||||||||| CHEAT CODES ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*| */
:root {
  /* BRAND COLOURS --------------------------------------------------------------------------------------------*| */
      --C-TEA:    #089CA3;                  
      --C-DTEA:   #077d83;
      --C-MAG:    #A22171;                  
      --C-DMAG:   #8f1e64;  
      --C-LIG:    #E7E7E9;                  
      --C-DLIG:   #c9c9cc; 
      --C-DRK:    #1C1B23;         
      --C-WHT:    #ffffff;
      --C-BLK:    #000000;
      --C-GRD:    rgba(0,0,0,0.07);        /* grid line colour — adjust opacity to taste */
      
    /* TYPOGRAPHY --------------------------------------------------------------------------------------------*| */
      --F-QCK:          'Quicksand', Arial, sans-serif;
      --F-RUB:          'Rubik', Arial, sans-serif;

    /* SPACING --------------------------------------------------------------------------------------------*| */
      --SPACE-XS:       0.25rem;   /*  4px — tight nudges */
      --SPACE-SM:       0.5rem;    /*  8px — small gaps */
      --SPACE-MD:       1rem;      /* 16px — base unit */
      --SPACE-LG:       1.5rem;    /* 24px — comfortable breathing room */
      --SPACE-XL:       2.5rem;    /* 40px — section padding */
      --SPACE-2XL:      4rem;      /* 64px — large section gaps */
      --SPACE-3XL:      6rem;      /* 96px — hero / page-level spacing */

    /* SEMANTIC SPACING — change these to respace the whole site ----------------*|
       These are the only values you need to touch for global layout changes.    */
      --GAP-SECTION:    30px;   /* top/bottom padding on every .section */
      --GAP-SECTION-SM: var(--SPACE-MD);   /* tight sections (--section--tight) */
      --GAP-SECTION-LG: var(--SPACE-2XL);  /* loose sections (--section--loose) */
      --GAP-HEADING:    var(--SPACE-MD);   /* space below a section__header */
      --GAP-SUBHEADING: var(--SPACE-MD);   /* space below a section__sub */
      --GAP-CONTENT:    var(--SPACE-LG);   /* gap between header block and content */
      --GAP-CARDS:      var(--SPACE-MD);   /* gap between cards in a grid */
      --PAD-CARD:       var(--SPACE-LG);   /* internal padding inside cards */
      --PAD-PAGE-X:     var(--SPACE-LG);   /* horizontal page margin on narrow viewports */

    /* TYPOGRAPHY --------------------------------------------------------------------------------------------*| */
      --TEXT-XS:        0.75rem;   /* 12px — labels, captions */
      --TEXT-SM:        0.875rem;  /* 14px — small UI text */
      --TEXT-MD:        1rem;      /* 16px — base body */
      --TEXT-LG:        1.25rem;   /* 20px — lead paragraphs */
      --TEXT-XL:        1.5rem;    /* 24px — small headings */
      --TEXT-2XL:       2rem;      /* 32px — section headings */
      --TEXT-3XL:       3rem;      /* 48px — hero headings */

    /* SHAPES --------------------------------------------------------------------------------------------*| */
      --R-SM:           4px;       /* subtle rounding — inputs, tags */
      --R-MD:           8px;       /* cards, buttons */
      --R-LG:           12px;      /* modals, panels */
      --R-XL:           20px;      /* large cards */
      --R-PILL:         999px;     /* fully rounded — badges, pills */
      --R-CIRCLE:       50%;       /* avatars, icons */

    /* LAYOUT --------------------------------------------------------------------------------------------*| */
      --MAX-WIDTH:      1200px;
      --MAX-CWIDTH:     1100px;
      --MAX-W-PROSE:    680px;     /* readable line length for body text */
      --MAX-W-NARROW:   480px;     /* forms, modals */
      --NAV-H:          130px;     /* matches nav rendered height — adjust if logo changes */

    /* GRADIENTS --------------------------------------------------------------------------------------------*| */
      --G-TOP:          linear-gradient(to top,     var(--C-TEA), var(--C-MAG));
      --G-RIGHT:        linear-gradient(to right,   var(--C-TEA), var(--C-MAG));
      --G-BOTTOM:       linear-gradient(to bottom,  var(--C-TEA), var(--C-MAG));
      --G-FADE:         linear-gradient(to top,     var(--C-BLK) 0%, transparent 100%);
      --G-90:           90%;

    /* TRANSITIONS --------------------------------------------------------------------------------------------*| */
      --T-FAST:         0.15s ease;
      --T-BASE:         0.25s ease;
      --T-SLOW:         0.4s ease;

    /* SHADOWS --------------------------------------------------------------------------------------------*| */
      --S-SM:           0 1px 3px rgba(0,0,0,0.08);
      --S-MD:           0 4px 12px rgba(0,0,0,0.10);
      --S-LG:           0 8px 24px rgba(0,0,0,0.12);
      --S-XL:           0 16px 48px rgba(0,0,0,0.15);
      --S-CARD:         0 4px 15px rgba(0,0,0,0.06);   /* default card resting state */
      --S-CARD-HOVER:   0 12px 30px rgba(0,0,0,0.16);  /* card on hover */
      --S-INNER:        0 2px 8px rgba(0,0,0,0.15);    /* arrow buttons, inset UI */
      --S-FORM:         0 4px 20px rgba(0,0,0,0.07);   /* form panels, summaries */

    /* COLOURS — MISC --------------------------------------------------------------------------------------------*| */
      --C-STAR:         #f5c842;                        /* review star gold */
    }
/* #endregion */


  
/* #region |||||||||| BROWSER SETTINGS ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*| */

    /* BROWSER RESET --------------------------------------------------------------------------------------------*| */
        * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        }

    /* SMOOTH SCROLL --------------------------------------------------------------------------------------------*| */
        html {
        scroll-behavior: smooth;
        overflow-x: hidden;
        }

    /* BODY BASE --------------------------------------------------------------------------------------------*| */
body {
  font-family: var(--F-RUB);
  color: var(--C-DRK);
  background: var(--C-LIG);
  line-height: 1.6;
  font-weight: 400;
  font-size: var(--TEXT-MD);
  min-height: 100vh;
  isolation: isolate;
  animation: pageFadeIn 0.25s ease forwards;
  overflow-x: hidden;
  max-width: 100vw;

  /* Sticky footer — main uses flex:1 to push footer down */
  display: flex;
  flex-direction: column;
}

    /* PAGE TRANSITION --------------------------------------------------------------------------------------------*| */
        body.is-leaving {
        animation: pageFadeOut 0.2s ease forwards;
        pointer-events: none;
        }
        @keyframes pageFadeIn {
        from { opacity: 0; }
        to   { opacity: 1; }
        }
        @keyframes pageFadeOut {
        from { opacity: 1; }
        to   { opacity: 0; }
        }
/* #endregion */


  
/* #region |||||||||| BACKGROUND ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*| */
      body::before {
        content: '';
        position: fixed;
        inset: 0;
        pointer-events: none;
        z-index: -1;
        background-image:
          linear-gradient(var(--C-GRD) 1px, transparent 1px),
          linear-gradient(90deg, var(--C-GRD) 1px, transparent 1px);
        background-size: 25px 25px;
        -webkit-mask-image: linear-gradient(to top, var(--C-BLK) 0%, var(--C-BLK) 5%, transparent var(--G-90));
        mask-image:         linear-gradient(to top, var(--C-BLK) 0%, var(--C-BLK) 5%, transparent var(--G-90));
      }
/* #endregion */


  
/* #region |||||||||| TYPOGRAPHY STYLES ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*| */

    /* #region HEADINGS --------------------------------------------------------------------------------------------*| */
        h1 {
        font-family: var(--F-QCK);
        font-size: var(--TEXT-3XL);     /* 48px */
        font-weight: 700;
        line-height: 1.1;
        letter-spacing: -0.03em;
        color: var(--C-DRK);
        }
        h2 {
        font-family: var(--F-QCK);
        font-size: var(--TEXT-2XL);     /* 32px */
        font-weight: 700;
        line-height: 1.15;
        letter-spacing: -0.025em;
        color: var(--C-DRK);
        }
        h3 {
        font-family: var(--F-QCK);
        font-size: var(--TEXT-XL);      /* 24px */
        font-weight: 600;
        line-height: 1.2;
        letter-spacing: -0.02em;
        color: var(--C-DRK);
        }
        h4 {
        font-family: var(--F-QCK);
        font-size: var(--TEXT-LG);      /* 20px */
        font-weight: 600;
        line-height: 1.3;
        letter-spacing: -0.01em;
        color: var(--C-DRK);
        }
        h5 {
        font-family: var(--F-QCK);
        font-size: var(--TEXT-MD);      /* 16px */
        font-weight: 600;
        line-height: 1.4;
        letter-spacing: 0em;
        color: var(--C-DRK);
        }
        h6 {
        font-family: var(--F-QCK);
        font-size: var(--TEXT-SM);      /* 14px */
        font-weight: 600;
        line-height: 1.4;
        letter-spacing: 0.01em;
        color: var(--C-DRK);
        }
    /* #endregion */

    /* #region BODY VARIANTS --------------------------------------------------------------------------------------------*| */
        .text-xl {
        font-size: var(--TEXT-XL);      /* 24px — hero intro / pull quotes */
        line-height: 1.4;
        font-weight: 300;
        }
        .text-lg {
        font-size: var(--TEXT-LG);      /* 20px — lead paragraph */
        line-height: 1.5;
        font-weight: 400;
        }
        .text-md {
        font-size: var(--TEXT-MD);      /* 16px — standard body */
        line-height: 1.6;
        font-weight: 400;
        }
        .text-sm {
        font-size: var(--TEXT-SM);      /* 14px — captions, meta info */
        line-height: 1.6;
        font-weight: 400;
        }
        .text-xs {
        font-size: var(--TEXT-XS);      /* 12px — labels, legal, footnotes */
        line-height: 1.5;
        font-weight: 500;
        }
    /* #endregion */

/* #endregion */


  
/* #region |||||||||| SECTIONS + HEADINGS ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*| */

    /* BASE SECTION — every page section starts here --------------------------------------------------------------------------------------------*| */
        .section {
        position: relative;
        z-index: 1;
        width: 100%;
        max-width: var(--MAX-CWIDTH);
        margin: 0 auto;
        padding-top: var(--GAP-SECTION);
        padding-bottom: var(--GAP-SECTION);
        padding-left: var(--PAD-PAGE-X);
        padding-right: var(--PAD-PAGE-X);
        }

        /* Remove horizontal padding once the viewport is wide enough
           that MAX-CWIDTH provides the natural gutter */
        @media (min-width: 1160px) {
          .section {
            padding-left: 0;
            padding-right: 0;
          }
        }

        /* Tighten vertical section rhythm on mobile */
        @media (max-width: 768px) {
          .section {
            padding-top: var(--SPACE-2XL);
            padding-bottom: var(--SPACE-2XL);
            padding-left: var(--SPACE-XL);
            padding-right: var(--SPACE-XL);
          }
          .section--hero {
            padding-top: var(--SPACE-2XL);
            padding-bottom: var(--SPACE-XL);
          }
        }

        @media (max-width: 480px) {
          .section {
            padding-top: var(--SPACE-XL);
            padding-bottom: var(--SPACE-XL);
            padding-left: var(--SPACE-LG);
            padding-right: var(--SPACE-LG);
          }
          .section--hero {
            padding-top: var(--SPACE-XL);
            padding-bottom: var(--SPACE-LG);
          }
        }

    /* SECTION WIDTH MODIFIERS —————————————————————————————————————————— */
        /* Narrow cap for long-form prose */
        .section--narrow  { max-width: var(--MAX-W-PROSE); }   /* 680px — article body, success pages */

    /* SECTION SPACING MODIFIERS ——————————————————————————————————————— */
        /* Override vertical rhythm without touching the base class */
        .section--flush   { padding-top: 0; padding-bottom: 0; }
        .section--tight   { padding-top: var(--GAP-SECTION-SM);  padding-bottom: var(--GAP-SECTION-SM);  }
        .section--loose   { padding-top: var(--GAP-SECTION-LG);  padding-bottom: var(--GAP-SECTION-LG);  }
        .section--hero    { padding-top: var(--SPACE-3XL);        padding-bottom: var(--GAP-SECTION-LG);  }

    /* SECTION LAYOUT MODIFIERS ————————————————————————————————————————— */
        /* Turn a section into a two-column split */
        .section--split {
          display: grid;
          grid-template-columns: 1fr 1.4fr;
          gap: var(--GAP-SECTION-LG);
          align-items: start;
        }
        /* Turn a section into a uniform card grid */
        .section--grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--GAP-CARDS); }
        .section--grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--GAP-CARDS); }
        @media (max-width: 900px) {
          .section--split  { grid-template-columns: 1fr; gap: var(--SPACE-LG); }
          .section--grid-3 { grid-template-columns: repeat(2, 1fr); }
        }
        @media (max-width: 560px) {
          .section--grid-2,
          .section--grid-3 { grid-template-columns: 1fr; }
        }
    /* SECTION HEADING ————————————————————————————————————————— */
        .section__header {
          font-size: var(--TEXT-2XL);
          font-family: var(--F-QCK);
          color: var(--C-DRK);
          margin-bottom: var(--GAP-HEADING);
          text-align: left;
          padding-top: var(--SPACE-SM);
          padding-bottom: var(--SPACE-SM);
        }
        .section__header--accent { color: var(--C-TEA); }
        .section__header--hero   { font-size: var(--TEXT-3XL); }

        @media (max-width: 768px) {
          .section__header--hero { font-size: var(--TEXT-2XL); }  /* 32px on mobile */
        }
        @media (max-width: 480px) {
          .section__header--hero { font-size: 1.75rem; }           /* ~28px on small phones */
        }

    /* SECTION SUBHEADING ————————————————————————————————————— */
        .section__sub {
          font-size: var(--TEXT-MD);
          color: var(--C-DRK);
          opacity: 0.6;
          line-height: 1.7;
          max-width: var(--MAX-W-PROSE);
          margin-bottom: var(--GAP-SUBHEADING);
        }

/* #endregion */


  
/* #region |||||||||| CALL TO ACTION ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*| */

    /*  #region ||||||||||  BUTTON BASE --------------------------------------------------------------------------------------------*| */
        .btn {              /* USED LIKE THIS: <a class="btn" href="#">Button</a> */
        display: inline-block;
        padding: var(--SPACE-SM) var(--SPACE-LG);   /* 8px top/bottom — 24px left/right */
        background: var(--C-TEA);
        color: var(--C-LIG);
        text-decoration: none;
        font-family: var(--F-RUB);
        font-size: var(--TEXT-SM);                  /* 14px */
        font-weight: 500;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        border-radius: var(--R-MD);                 /* 8px */
        transition: var(--T-BASE);
        width: fit-content;
        }
        .btn:hover {
        background: var(--C-DTEA);
        color: var(--C-WHT);
        }

        /* Add to cart */
.btn-buy {
  width: 100%;
  padding: 1rem 1.5rem;
  background: var(--C-TEA);
  color: var(--C-WHT);
  border: none;
  border-radius: var(--R-MD);
  font-family: var(--F-QCK);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
}
.btn-buy:hover:not(:disabled) {
  background: var(--C-DTEA);
  transform: translateY(-1px);
}
.btn-buy:disabled { opacity: 0.6; cursor: not-allowed; }

        /* #endregion */


    /*  #region |||||||||| LEFT POSITION --------------------------------------------------------------------------------------------*| */
        .btn--left {
        margin-top: var(--GAP-CONTENT);
        margin-right: auto;
        }

        .btn--right {
        margin-top: var(--GAP-CONTENT);
        margin-left: auto;
        display: block;
        }
        /* #endregion */
    
/* #endregion */










/* #region |||||||||| BACK TO TOP ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*| */
        #back-to-top {
          position: fixed;
          top: 0;
          left: 50%;
          transform: translateX(-50%) translateY(-100%);
          z-index: 200;
          background: var(--C-MAG);
          color: var(--C-WHT);
          border: none;
          border-radius: 0 0 var(--R-MD) var(--R-MD);
          padding: 0.45rem 1.2rem;
          padding-top: calc(env(safe-area-inset-top, 0px) + 0.45rem);
          font-family: var(--F-QCK);
          font-size: 0.8rem;
          font-weight: 600;
          cursor: pointer;
          display: flex;
          align-items: center;
          opacity: 0;
          pointer-events: none;
          transition: opacity 0.3s ease, transform 0.3s ease, background 0.2s;
        }
        #back-to-top.is-visible { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }
        #back-to-top:hover { background: var(--C-DMAG); }
/* #endregion */



/* #region |||||||||| ACCESSIBILITY + GLOBAL FIXES ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*| */

main { /* Pushes the footer to the bottom always */
  flex: 1;
}

    /* First section on every page — consistent distance from nav */
        main > .section:first-child {
          padding-top: var(--GAP-SECTION);
        }

    /* FORM HINT --------------------------------------------------------------------------------------------*| */
        .form-hint {
          font-size: 0.75rem;
          opacity: 0.45;
          margin-top: 0.2rem;
          display: block;
        }

    /* SKIP TO MAIN CONTENT --------------------------------------------------------------------------------------------*| */
        .skip-link {
          position: absolute;
          top: -100%;
          left: 1rem;
          z-index: 9999;
          padding: 0.5rem 1rem;
          background: var(--C-TEA);
          color: var(--C-WHT);
          font-family: var(--F-QCK);
          font-size: 0.85rem;
          font-weight: 600;
          border-radius: 0 0 var(--R-MD) var(--R-MD);
          text-decoration: none;
          transition: top 0.2s;
        }
        .skip-link:focus {
          top: 0;
        }

    /* VISUALLY HIDDEN (screen-reader only) --------------------------------------------------------------------------------------------*| */
        .visually-hidden {
          position: absolute;
          width: 1px;
          height: 1px;
          padding: 0;
          margin: -1px;
          overflow: hidden;
          clip: rect(0, 0, 0, 0);
          white-space: nowrap;
          border: 0;
        }

    /* FOCUS VISIBLE --------------------------------------------------------------------------------------------*| */
        :focus-visible {
          outline: 2px solid var(--C-TEA);
          outline-offset: 3px;
          border-radius: 3px;
        }
        /* Remove focus ring for mouse users */
        :focus:not(:focus-visible) {
          outline: none;
        }

    /* FIX: Cart empty state — centred to full window --------------------------------------------------------------------------------------------*| */
        .cart-empty {
          grid-column: 1 / -1;
          min-height: 60vh;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          text-align: center;
          padding: 4rem 2rem;
        }

    /* FIX: Nav flash — hide placeholders until components load --------------------------------------------------------------------------------------------*| */
        #nav-placeholder,
        #footer-placeholder {
          min-height: 0;
        }

    /* Prevent FOUC — body starts hidden, JS reveals after nav loads --------------------------------------------------------------------------------------------*| */
        body.nav-loading {
          visibility: hidden;
        }

/* #endregion */






/* #region |||||||||| COOKIE BANNER ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*| */
#cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 500;
  background: var(--C-DRK);
  color: var(--C-LIG);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--SPACE-LG);
  padding: var(--SPACE-MD) var(--PAD-PAGE-X);
  font-family: var(--F-RUB);
  font-size: var(--TEXT-SM);
  line-height: 1.5;
  transform: translateY(100%);
  transition: transform 0.35s ease;
}
#cookie-banner.is-visible {
  transform: translateY(0);
}
#cookie-banner p {
  margin: 0;
  opacity: 0.8;
  max-width: 680px;
}
#cookie-banner p a {
  color: var(--C-TEA);
  text-decoration: underline;
  text-underline-offset: 2px;
}
#cookie-banner p a:hover {
  color: #fff;
}
#cookie-accept {
  flex-shrink: 0;
  padding: var(--SPACE-XS) var(--SPACE-LG);
  background: var(--C-TEA);
  color: var(--C-WHT);
  border: none;
  border-radius: var(--R-MD);
  font-family: var(--F-QCK);
  font-size: var(--TEXT-XS);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: background var(--T-FAST);
}
#cookie-accept:hover { background: var(--C-DTEA); }
@media (max-width: 600px) {
  #cookie-banner { flex-direction: column; align-items: flex-start; gap: var(--SPACE-SM); }
  #cookie-accept { width: 100%; text-align: center; }
}
/* #endregion */