/* --------------------------------------------------------------
## Config - Used throughout main.css
## Brand: Protect & Care
--------------------------------------------------------------*/

/* @link https://utopia.fyi/type/calculator?c=320,16,1.2,1240,20,1.25,6,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
/* @link https://utopia.fyi/space/calculator?c=320,16,1.2,1240,20,1.25,4,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

/* Fonts */
/* Embed any custom fonts here */
/* Make sure you change the font name for Primary and Secondary font-family below */

@import url("https://use.typekit.net/jmk7cmq.css");
@import url('https://fonts.googleapis.com/css2?family=Albert+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');

:root {

--font-family-primary: "filson-pro", sans-serif;
--font-family-secondary: "Albert Sans", sans-serif;

/* Sizing */

/* 1.2 - 1.25 Scale */
/* --font-size--2: clamp(0.6944rem, 0.6577rem + 0.1836vw, 0.8rem);
--font-size--1: clamp(0.8333rem, 0.7754rem + 0.2899vw, 1rem);
--font-size-0: clamp(1rem, 0.913rem + 0.4348vw, 1.25rem);
--font-size-1: clamp(1.2rem, 1.0739rem + 0.6304vw, 1.5625rem);
--font-size-2: clamp(1.44rem, 1.2615rem + 0.8924vw, 1.9531rem);
--font-size-3: clamp(1.728rem, 1.4799rem + 1.2407vw, 2.4414rem);
--font-size-4: clamp(2.0736rem, 1.7334rem + 1.7011vw, 3.0518rem);
--font-size-5: clamp(2.4883rem, 2.027rem + 2.3067vw, 3.8147rem);
--font-size-6: clamp(2.986rem, 2.366rem + 3.0998vw, 4.7684rem); */

  --font-size--2: clamp(0.6944rem, 0.6643rem + 0.151cqi, 0.7813rem);
--font-size--1: clamp(0.8333rem, 0.7971rem + 0.1812cqi, 0.9375rem);
--font-size-0: clamp(1rem, 0.9565rem + 0.2174cqi, 1.125rem);
--font-size-1: clamp(1.2rem, 1.1478rem + 0.2609cqi, 1.35rem);
--font-size-2: clamp(1.44rem, 1.3774rem + 0.313cqi, 1.62rem);
--font-size-3: clamp(1.728rem, 1.6529rem + 0.3757cqi, 1.944rem);
--font-size-4: clamp(2.0736rem, 1.9834rem + 0.4508cqi, 2.3328rem);
--font-size-5: clamp(2.4883rem, 2.3801rem + 0.5409cqi, 2.7994rem);
--font-size-6: clamp(2.986rem, 2.8562rem + 0.6491cqi, 3.3592rem);

/* Spacing */
  --space-3xs: clamp(0.25rem, 0.2283rem + 0.1087vi, 0.3125rem);
  --space-2xs: clamp(0.5rem, 0.4565rem + 0.2174vi, 0.625rem);
  --space-xs: clamp(0.75rem, 0.6848rem + 0.3261vi, 0.9375rem);
  --space-s: clamp(1rem, 0.913rem + 0.4348vi, 1.25rem);
  --space-m: clamp(1.5rem, 1.3696rem + 0.6522vi, 1.875rem);
  --space-l: clamp(2rem, 1.8261rem + 0.8696vi, 2.5rem);
  --space-xl: clamp(3rem, 2.7391rem + 1.3043vi, 3.75rem);
  --space-2xl: clamp(4rem, 3.6522rem + 1.7391vi, 5rem);
  --space-3xl: clamp(6rem, 5.4783rem + 2.6087vi, 7.5rem);

  --space-vertical: var(--space-xs);
  --space-vertical-gap: var(--space-m);
  --space-horizontal: var(--space-xs);

/* Debug */
  --color-debug: hsl(300, 100%, 50%);
  --color-debug-tint: hsl(300, 100%, 50%, .2);
  --color-debug-tint2: hsl(300, 100%, 50%, .1);

/* Typography */
  --font-weight-1: 100;
  --font-weight-2: 200;
  --font-weight-3: 300;
  --font-weight-4: 400;
  --font-weight-5: 500;
  --font-weight-6: 600;
  --font-weight-7: 700;
  --font-weight-8: 800;
  --font-weight-9: 900;

  --font-lineheight-00: .95;
  --font-lineheight-0: 1.1;
  --font-lineheight-1: 1.25;
  --font-lineheight-2: 1.375;
  --font-lineheight-3: 1.5;
  --font-lineheight-4: 1.75;
  --font-lineheight-5: 2;

  --font-letterspacing-0: -.05em;
  --font-letterspacing-1: .025em;
  --font-letterspacing-2: .050em;
  --font-letterspacing-3: .075em;
  --font-letterspacing-4: .150em;
  --font-letterspacing-5: .500em;
  --font-letterspacing-6: .750em;
  --font-letterspacing-7: 1em;

/* Borders */
  --default-border-width: 1px;
  --default-border-radius: 0.5em;

/* Containers */
  --border-radius-primary: var(--space-l);
/* Buttons */
  --border-radius-secondary: var(--space-l);
/* Accordion etc */
  --border-radius-tertairy: var(--space-2xs);

  --border-size-1: 1px;
  --border-size-2: 2px;
  --border-size-3: 5px;
  --border-size-4: 10px;
  --border-size-5: 25px;

/* Brand colours */
  /* Used rgba to allow easy setup of colours just set the rgb & rgba and all the tints are automatically done for you. */
  /* Use this tool to convert Hex colours to RGB/A https://rgbacolorpicker.com/hex-to-rgba */

/* Primary - HEX Color #192641 */
--color-primary-hs: 221, 44%;
--color-primary-l: 18%;
  --color-primary-dark-3: hsla(var(--color-primary-hs), 6%, 100%);
  --color-primary-dark-2: hsla(var(--color-primary-hs), 10%, 100%);
  --color-primary-dark-1: hsla(var(--color-primary-hs), 14%, 100%);
--color-primary: hsla(var(--color-primary-hs), var(--color-primary-l), 100%);
  --color-primary-tint-9: hsla(var(--color-primary-hs), var(--color-primary-l), 90%);
  --color-primary-tint-8: hsla(var(--color-primary-hs), var(--color-primary-l), 80%);
  --color-primary-tint-7: hsla(var(--color-primary-hs), var(--color-primary-l), 70%);
  --color-primary-tint-6: hsla(var(--color-primary-hs), var(--color-primary-l), 60%);
  --color-primary-tint-5: hsla(var(--color-primary-hs), var(--color-primary-l), 50%);
  --color-primary-tint-4: hsla(var(--color-primary-hs), var(--color-primary-l), 40%);
  --color-primary-tint-3: hsla(var(--color-primary-hs), var(--color-primary-l), 30%);
  --color-primary-tint-2: hsla(var(--color-primary-hs), var(--color-primary-l), 20%);
  /* Direct adjustments to make more blue tint less grey when this light */
  --color-primary-tint-15: hsla(var(--color-primary-hs), 92%, 100%);
  --color-primary-tint-1: hsla(var(--color-primary-hs), 95%, 100%);


/* Secondary - HEX Color #03ac83 */
--color-secondary-hs: 165, 97%;
--color-secondary-l: 34%;
  --color-secondary-dark-3: hsla(var(--color-secondary-hs), 10%, 100%);
  --color-secondary-dark-2: hsla(var(--color-secondary-hs), 18%, 100%);
  --color-secondary-dark-1: hsla(var(--color-secondary-hs), 26%, 100%);
--color-secondary: hsla(var(--color-secondary-hs), var(--color-secondary-l), 100%);
  --color-secondary-tint-9: hsla(var(--color-secondary-hs), var(--color-secondary-l), 90%);
  --color-secondary-tint-8: hsla(var(--color-secondary-hs), var(--color-secondary-l), 80%);
  --color-secondary-tint-7: hsla(var(--color-secondary-hs), var(--color-secondary-l), 70%);
  --color-secondary-tint-6: hsla(var(--color-secondary-hs), var(--color-secondary-l), 60%);
  --color-secondary-tint-5: hsla(var(--color-secondary-hs), var(--color-secondary-l), 50%);
  --color-secondary-tint-4: hsla(var(--color-secondary-hs), var(--color-secondary-l), 40%);
  --color-secondary-tint-3: hsla(var(--color-secondary-hs), var(--color-secondary-l), 30%);
  --color-secondary-tint-2: hsla(var(--color-secondary-hs), var(--color-secondary-l), 20%);
  --color-secondary-tint-15: hsla(var(--color-secondary-hs), var(--color-secondary-l), 15%);
  --color-secondary-tint-1: hsla(var(--color-secondary-hs), var(--color-secondary-l), 10%);

/* Tertiary - HEX Color #e1554c */
--color-tertiary-hs: 4, 71%;
--color-tertiary-l: 59%;
  --color-tertiary-dark-3: hsla(var(--color-tertiary-hs), 29%, 100%);
  --color-tertiary-dark-2: hsla(var(--color-tertiary-hs), 39%, 100%);
  --color-tertiary-dark-1: hsla(var(--color-tertiary-hs), 49%, 100%);
--color-tertiary: hsla(var(--color-tertiary-hs), var(--color-tertiary-l), 100%);
  --color-tertiary-tint-9: hsla(var(--color-tertiary-hs), var(--color-tertiary-l), 90%);
  --color-tertiary-tint-8: hsla(var(--color-tertiary-hs), var(--color-tertiary-l), 80%);
  --color-tertiary-tint-7: hsla(var(--color-tertiary-hs), var(--color-tertiary-l), 70%);
  --color-tertiary-tint-6: hsla(var(--color-tertiary-hs), var(--color-tertiary-l), 60%);
  --color-tertiary-tint-5: hsla(var(--color-tertiary-hs), var(--color-tertiary-l), 50%);
  --color-tertiary-tint-4: hsla(var(--color-tertiary-hs), var(--color-tertiary-l), 40%);
  --color-tertiary-tint-3: hsla(var(--color-tertiary-hs), var(--color-tertiary-l), 30%);
  --color-tertiary-tint-2: hsla(var(--color-tertiary-hs), var(--color-tertiary-l), 20%);
  --color-tertiary-tint-15: hsla(var(--color-tertiary-hs), var(--color-tertiary-l), 15%);
  --color-tertiary-tint-1: hsla(var(--color-tertiary-hs), var(--color-tertiary-l), 10%);

/* Status colours */
/* Specific to Pacifica */
/* Hex Red #d70202 */
--color-status-action-hs: 0, 98%;
--color-status-action-l: 43%;
--color-status-action: hsla(var(--color-tertiary-hs), var(--color-tertiary-l));
--color-status-action-tint: hsla(var(--color-tertiary-hs), var(--color-tertiary-l), 10%);
/* Use lightness percentage value for better contrast/accessibility  */
--color-status-action-text: hsla(var(--color-tertiary-hs), 33%, 100%);

/* Hex Orange #cd4d00 */
--color-status-warning-hs: 23, 100%;
--color-status-warning-l: 40%;
--color-status-warning: hsla(var(--color-status-warning-hs), var(--color-status-warning-l));
--color-status-warning-tint: hsla(var(--color-status-warning-hs), var(--color-status-warning-l), 10%);
/* Use lightness percentage value for better contrast/accessibility  */
--color-status-warning-text: hsla(var(--color-status-warning-hs), 30%, 100%);

/* Hex Brand Colour Used Instead */
--color-status-success-hs: var(--color-secondary-hs);
--color-status-success-l: var(--color-secondary-l);
--color-status-success: hsla(var(--color-status-success-hs), var(--color-status-success-l));
--color-status-success-tint: hsla(var(--color-status-success-hs), var(--color-status-success-l), 10%);
/* Use lightness percentage value for better contrast/accessibility  */
--color-status-success-text: var(--color-secondary-dark-1);

/* OFFER - Allows option for Status colours red, orange green, brand colour or a additional colour only for offers */
--color-offer-hs: 273, 100%;
--color-offer-l: 39%;
--color-offer: hsla(var(--color-offer-hs), var(--color-offer-l), 100%);
--color-offer: hsla(var(--color-offer-hs), var(--color-offer-l));
--color-offer-tint: hsla(var(--color-offer-hs), var(--color-offer-l), 15%);
/* Use lightness percentage value for better contrast/accessibility  */
--color-offer-text: #fff;

/* For Other Brands as Pacifica already has green & red */
/* --color-status-action: rgba(215, 2, 2, 1);
--color-status-action-rgb: 215, 2, 2;
--color-status-action-tint: rgba(var(--color-status-action-rgb), .1); */

/* --color-status-success: rgba(59, 120, 0, 1);
--color-status-success-rgb: 59, 120, 0;
--color-status-success-tint: rgba(var(--color-status-success-rgb), .1); */

/* --color-status-warning: rgba(205, 77, 0, 1);
--color-status-warning-rgb: 205, 77, 0;
--color-status-warning-tint: rgba(var(--color-status-warning-rgb), .2); */


/* Utility Colour classes */
.pc_color_primary { color: var(--color-primary); }
.pc_color_secondary { color: var(--color-secondary); fill: var(--color-secondary); }
.pc_color_tertiary { color: var(--color-tertiary); }
.pc_color_success { color: var(--color-status-success); }
.pc_color_warning { color: var(--color-status-warning); }
.pc_color_action { color: var(--color-status-action); }

/* Buttons and positive items like CTAs */
--color-cta: var(--color-secondary);

/* Offers and items that need importance */
--color-highlight: var(--color-tertiary);

.pc_page--login,
.pc_page--login .pc_section {
    background-color: var(--color-primary);
  }

/* Header */

.pc_header__image {
  display: flex;
  align-items: flex-end;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  min-height: 200px;
  padding: 0;

  @media (min-width: 1000px) {
    min-height: 400px
  }
}
/* Different hero image can be on a page by page basis,
class is set on body tag */
/* Make specific adjustments like height on a per image basis too */
/* .pc_page--register .pc_header__image { */
.pc_header {
  a {
    border: 0
  }
}

/* Header Logos */

.pc_header__logo {
  max-width: 180px;
  min-height: 60px;
}
.pc_header__pbp {
  max-width: 100px
}

/* Footer */

.pc_footer {
  small {
    /* color: rgba(255,255,255,.75) */
  }
}

/* UI backdrop */
--color-page-bg: var(--color-primary-tint-5);
--color-page-text: var(--color-primary);
--color-base-text: var(--color-primary);
--color-box: #fff;
/* --color-section-bg: var(--color-primary-tint-1); */
--color-section-bg: hsla(var(--color-primary-hs), 94%, 100%);
--shadow: 0px 2px 2px 0px rgba(25, 38, 65, 0.10);
--shadow-big: 0px 8px 8px 0px rgba(25, 38, 65, 0.10);

/* UI Items */
--color--basket--highlight: var(--color-primary-tint-1);
--color--basket--footer: #fff;

/* Forms */
--form-element-spacing-vertical: 1rem;
--form-element-spacing-horizontal: 1.25rem;

/* Details */
--details-bg-color: #fff;
--details-summary-color: var(--color-primary-tint-9);

/* Icons */
/* Set here so you can change the fill hex color: fill="%23 e1554c"
   If set as a inline element use eg. color: red
   If set as a pseudo element then it has to be done like below
 */
--icon-circle-tick: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="%2303ac83" viewBox="0 0 256 256"><path d="M173.66,98.34a8,8,0,0,1,0,11.32l-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35A8,8,0,0,1,173.66,98.34ZM232,128A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z"></path></svg>');

--icon-circle-tick-solid: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%2303ac83" viewBox="0 0 256 256"><path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm45.66,85.66-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35a8,8,0,0,1,11.32,11.32Z"></path></svg>');

--icon-circle-cross: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="%23e1554c" viewBox="0 0 256 256"><path d="M165.66,101.66,139.31,128l26.35,26.34a8,8,0,0,1-11.32,11.32L128,139.31l-26.34,26.35a8,8,0,0,1-11.32-11.32L116.69,128,90.34,101.66a8,8,0,0,1,11.32-11.32L128,116.69l26.34-26.35a8,8,0,0,1,11.32,11.32ZM232,128A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z"></path></svg>');

--icon-down-arrow: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 256 256"><path d="M216.49,104.49l-80,80a12,12,0,0,1-17,0l-80-80a12,12,0,0,1,17-17L128,159l71.51-71.52a12,12,0,0,1,17,17Z"></path></svg>');

}

/* ------------------------------------------------------------ */
/* Boxes */
/* ------------------------------------------------------------ */

/* div classes explained: w_column w_box wol_box--login
   w_column sets width
   w_box sets padding and colour
   w_box--hero sets custom colour or any other specifics for this only
   w_box--modifier-name like w_box--hero means only do things for this specific part of the page
*/

/* -------------------------
Box - Padding and colour */

.pc_box {
  /* Could have zero padding if no bg colour used for example
  padding: 0; */
  padding:  var(--space-vertical) var(--space-s) var(--space-vertical) var(--space-s);
  /* Set to 0 if no border radius required
     border-radius: 0; */
  border-radius: var(--border-radius-tertairy);
  /* Change for every box
     Or change the individual box using modifier eg .pc_box--hero
     background-color: transparent; */
  background-color: var(--color-box);
  margin-block: var(--space-vertical)
}

/* -------------------------
Box Modifiers
For specific parts of the page only

Possible modifications:
border, background image etc */

.pc_box--hero {
  background-color: transparent;
}
.pc_box--service,
.pc_box--highlight {
  background-color: var(--color-primary);
  color: #fff
}
.pc_box--info {
  background-color: var(--color-primary-tint-1);
}
.pc_box--warning {
  background-color: var(--color-status-warning-tint);

  h4 {
    color: var(--color-status-warning)
  }
}
.pc_box--action {
  background-color: var(--color-status-action-tint);

  h4 {
    color: var(--color-status-action)
  }
}
.pc_box--success {
  background-color: var(--color-secondary-tint-15);
  .pc_box__title {
    color: var(--color-cta)
  }
}
.pc_box--focus {
  border: var(--border-size-1) solid var(--color-primary-tint-2);
}
.pc_box--price {
  border-radius: var(--border-radius-primary);
  display: flex;
  flex-direction: column;
  height: max-content;
  align-self: center;
  color: var(--color-primary);

  p:nth-of-type(1),
  p:nth-of-type(2) {
    margin-bottom: 0;
  }

}

/* ------------------------------------------------------------ */
/* Buttons */
/* ------------------------------------------------------------ */

.button,
.pc_button--primary {
  background-color: var(--color-green);
  color: #fff;
}
.pc_button--secondary {
  background-color: var(--color-secondary);
  color: var(--color-primary)
}

/* ------------------------------------------------------------ */
/* Icons - Primary is default on a light background colour */
/* ------------------------------------------------------------ */
/* On a dark background colour,
comment out color and it will be the font color */
.pc_box--highlight > i
 {
  color: var(--color-secondary);
}

/* ------------------------------------------------------------ */
/* Layout & Images */
/* ------------------------------------------------------------ */