/*
 * The site.
 *
 *   npx sass --watch --no-source-map --style=expanded src/scss/site.scss:site.css
 *
 * Compiles to /site.css, which includes/enqueue.php loads on every page.
 *
 * One sheet rather than one per template. Every rule below is named down to a
 * class that only exists where it belongs - .bay-customizer, .product-hero,
 * .site-header - so a page carries the rules for parts it does not have, and
 * nothing else. The two that could not be written that way, the customizer's
 * full height frame and the body it stops scrolling, are named down to the
 * template instead.
 *
 * Colours, breakpoints and the typeset mixin are in shared/_vars.scss, which
 * emits nothing itself. Sizes and spacing are written where they are used.
 */
/*
 * The palette, and the typeface.
 *
 * Colours are sampled off the design PNGs rather than taken from a spec, so
 * treat them as close and not as correct. Nothing else in the wizard names a
 * colour - sizes and spacing are written where they are used.
 */
/*
 * Where the layout changes.
 *
 * Below $tablet the sidebar leaves the column and becomes a sheet at the
 * bottom of the screen.
 *
 * The number is what the main column needs, not a device. With the sidebar
 * beside it the column is the window less 558 - two gutters, the sidebar and
 * the gap - and a location card wants about 515 of it: a 268 wide decoration
 * type switch, the 148 preview beside it, and the gaps and padding around
 * them. Under that the switch runs out of its own card. That puts the floor
 * at about 1073, and this stands a little clear of it.
 *
 * Below $phone the mobile design takes over: the cards lie down, the step
 * names wrap under their marks, and the sheet runs in one column.
 */
/*
 * Where the header runs out of room, which is its own question and its own
 * number. It holds a search field and three labelled links and can carry them
 * further down than the two column layout survives, so it changes later.
 */
/*
 * The design is drawn on 1440. Past that the customizer stops growing and the
 * surplus becomes margin on either side, so the columns keep the proportions
 * they were drawn at instead of stretching across a wide monitor.
 *
 * The bar's fill and the body's background still run edge to edge - only what
 * sits inside them is capped.
 */
/*
 * Where a window stops being the window the design was drawn on.
 *
 * The columns are capped at 1440 and the spacing inside them is drawn for
 * that. A little under it there is no surplus left to take and the cards
 * start paying for their own padding, so the summary's spacing steps down
 * before anything in it has to.
 */
/*
 * The scrollbar every scrolling area in the customizer draws.
 *
 * The browser's default is heavy enough beside a bordered card that it reads
 * as a mistake rather than as an affordance. This is the same bar everywhere -
 * the pane, the summary and the icon grid - so one of them appearing never
 * looks different from another.
 *
 * Both spellings are here on purpose: scrollbar-color covers Firefox and
 * newer Chrome, the ::-webkit rules cover Safari and older Chrome.
 */
/*
 * What was chosen, under the line it belongs to.
 *
 * WooCommerce hands this over as a definition list, one row per answer, and
 * floats the labels - which runs the answers together into a paragraph. Here
 * each answer is a row of its own: the location on the left, what goes on it
 * beside it.
 *
 * A mixin because the cart and the checkout's order review print the same list
 * and should read the same, and because they are not the same element - the
 * cart lays its line out in divs and the review in a table, so one rule cannot
 * name both without naming things neither of them has.
 */
/*
 * The redesign's palette.
 *
 * One tint, not two: the panel fill, the summary's product block and the nav
 * bar are all the same value, so naming them apart would only invite them to
 * drift.
 */
/*
 * The face, and the small reset that goes with it.
 *
 * A mixin rather than a rule, because two blocks on two different sheets need
 * it - the masthead on every page and the customizer on one - and a rule here
 * would either be drawn twice or force one of them to inherit from the other,
 * which is exactly what stopped being true when the header left the wizard.
 */
/*
 * The site.
 *
 *   npx sass --watch --no-source-map --style=expanded src/scss/site.scss:site.css
 *
 * Compiles to /site.css, which includes/enqueue.php loads on every page.
 *
 * One sheet rather than one per template. Every rule below is named down to a
 * class that only exists where it belongs - .bay-customizer, .product-hero,
 * .site-header - so a page carries the rules for parts it does not have, and
 * nothing else. The two that could not be written that way, the customizer's
 * full height frame and the body it stops scrolling, are named down to the
 * template instead.
 *
 * Colours, breakpoints and the typeset mixin are in shared/_vars.scss, which
 * emits nothing itself. Sizes and spacing are written where they are used.
 */
/*
 * The two things every page needs before anything else: a way to say something
 * only a screen reader hears, and the box a mark is drawn in.
 *
 * Both are written flat rather than under a page's wrapper, because both are
 * used by the header, which is on every page, and by the customizer, which is
 * on one.
 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
}

.glyph {
  display: block;
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
  object-fit: contain;
}

/*
 * The site.
 *
 *   npx sass --watch --no-source-map --style=expanded src/scss/site.scss:site.css
 *
 * Compiles to /site.css, which includes/enqueue.php loads on every page.
 *
 * One sheet rather than one per template. Every rule below is named down to a
 * class that only exists where it belongs - .bay-customizer, .product-hero,
 * .site-header - so a page carries the rules for parts it does not have, and
 * nothing else. The two that could not be written that way, the customizer's
 * full height frame and the body it stops scrolling, are named down to the
 * template instead.
 *
 * Colours, breakpoints and the typeset mixin are in shared/_vars.scss, which
 * emits nothing itself. Sizes and spacing are written where they are used.
 */
/*
 * The button that carries you forward, wherever it appears.
 *
 * Its own class rather than a bare .button: WooCommerce puts .button on every
 * add to cart, checkout and place order control on the site, and this would
 * land on all of them.
 *
 * A mixin as well as a class, because some of the buttons that should look
 * like this are printed by WooCommerce under names of its own choosing, and
 * asking them to also carry ours means editing its templates.
 */
.bay-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 13px 30px;
  font-family: "Inter", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #161C30;
  text-decoration: none;
  background: #8FD123;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: 0.3s ease-in filter;
  text-align: center;
}
@media (max-width: 767px) {
  .bay-button {
    padding: 11px 20px;
    font-size: 14px;
  }
}
.bay-button .glyph {
  font-size: 16px;
}
.bay-button:hover {
  filter: brightness(0.95);
}
.bay-button {
  /*
   * Nothing to press.
   *
   * Every button drawn from this mixin gets it, because a green pill that
   * refuses the click while looking exactly like the one beside it that works
   * is worse than one that never invited the press. The hover goes with it -
   * a button that still lights up under the pointer is still inviting.
   *
   * The attribute as well as the state, for the places where the control is a
   * link and cannot carry `disabled` at all.
   */
}
.bay-button:disabled, .bay-button[aria-disabled=true] {
  opacity: 0.45;
  cursor: default;
}
.bay-button:disabled:hover, .bay-button[aria-disabled=true]:hover {
  filter: none;
}

/*
 * The site.
 *
 *   npx sass --watch --no-source-map --style=expanded src/scss/site.scss:site.css
 *
 * Compiles to /site.css, which includes/enqueue.php loads on every page.
 *
 * One sheet rather than one per template. Every rule below is named down to a
 * class that only exists where it belongs - .bay-customizer, .product-hero,
 * .site-header - so a page carries the rules for parts it does not have, and
 * nothing else. The two that could not be written that way, the customizer's
 * full height frame and the body it stops scrolling, are named down to the
 * template instead.
 *
 * Colours, breakpoints and the typeset mixin are in shared/_vars.scss, which
 * emits nothing itself. Sizes and spacing are written where they are used.
 */
/*
 * The bar at the top of every page.
 *
 * Scoped to its own class rather than to a page's wrapper: the rules travel
 * with the markup, and nothing without .site-header can pick them up.
 */
/*
 * The gutters sit out here, on the parent, so the inner's max-width is the
 * width the content actually gets rather than the width of a box the padding
 * then eats into.
 *
 * The fill runs the full width; the logo and the name stop at 1440 with the
 * main column, so they keep a shared left edge at any window size.
 */
.site-masthead {
  flex: 0 0 auto;
  font-size: 15px;
  font-family: "Hanken Grotesk", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.45;
  color: #161C30;
}
.site-masthead *,
.site-masthead *::before,
.site-masthead *::after {
  box-sizing: border-box;
}
.site-masthead h1, .site-masthead h2, .site-masthead h3, .site-masthead h4, .site-masthead p, .site-masthead ol, .site-masthead ul, .site-masthead dl, .site-masthead dd, .site-masthead figure {
  margin: 0;
  padding: 0;
}
.site-masthead ol, .site-masthead ul {
  list-style: none;
}
.site-masthead a {
  color: inherit;
}
.site-masthead button:not(:where(.bay-button)) {
  font-family: "Hanken Grotesk", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.site-masthead input,
.site-masthead textarea,
.site-masthead select {
  font-family: "Hanken Grotesk", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: inherit;
  color: inherit;
}

.site-header {
  flex: 0 0 auto;
  padding: 20px 60px;
  background: #ffffff;
  border-bottom: 1px solid #DADDEA;
}
@media (max-width: 1024px) {
  .site-header {
    padding: 15px 40px;
  }
}
@media (max-width: 767px) {
  .site-header {
    padding: 15px 24px;
  }
}
.site-header .inner {
  display: flex;
  align-items: center;
  gap: 20px;
  max-width: 1440px;
  margin: 0 auto;
}
.site-header .brand-logo {
  display: flex;
  flex: 0 0 auto;
  color: #cdd1d4;
  text-decoration: none;
  background: #EDEDED;
  max-width: 130px;
}
.site-header .brand-logo .logo-mark {
  display: block;
  max-width: 100%;
}
.site-header .brand-logo.has-logo {
  background: none;
}
.site-header .site-search {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 1 247px;
  margin-left: auto;
  padding-bottom: 10px;
  border-bottom: 1px solid #DADDEA;
}
.site-header .site-search .glyph {
  font-size: 18px;
  color: #3E4576;
}
.site-header .site-search .site-search-input {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 15px;
  background: none;
  border: 0;
}
.site-header .site-search .site-search-input::placeholder {
  color: #6B7390;
}
.site-header .site-actions {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 32px;
}
.site-header .site-menu {
  display: none;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  font-size: 22px;
  color: #161C30;
}
.site-header .site-menu .glyph:last-of-type {
  display: none;
}
.site-header .site-action {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  color: #161C30;
  text-decoration: none;
}
@media (max-width: 767px) {
  .site-header .site-action {
    gap: 6px;
  }
}
.site-header .site-action .glyph {
  font-size: 18px;
}
.site-header .site-action .site-action-count {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: auto;
  padding: 3px;
  font-size: 12px;
  font-weight: 600;
  color: #ffffff;
  background: #3E4576;
  border-radius: 999px;
  aspect-ratio: 1;
}
.site-header .site-action span {
  line-height: 100%;
}
@media (max-width: 1024px) {
  .site-header .site-search,
  .site-header .site-action:not(.site-action-keep) {
    display: none;
  }
  .site-header .site-action span:not(.site-action-count) {
    display: none;
  }
  .site-header .site-actions {
    gap: 24px;
    margin-left: auto;
  }
  .site-header .site-menu {
    display: flex;
  }
  .site-header .site-action .site-action-count {
    min-width: 16px;
    height: auto;
    padding: 3px;
    font-size: 8px;
  }
}

/*
 * The open menu, which the button in the bar has to answer as well as the
 * drawer below it. Written out here rather than nested: inside .site-header
 * the ampersand is the whole chain down to the bar, and a wrapper class in
 * front of that describes an element inside itself.
 */
.site-masthead.is-menu-open .site-menu .glyph:first-of-type {
  display: none;
}
.site-masthead.is-menu-open .site-menu .glyph:last-of-type {
  display: block;
}

/*
 * The search, parked.
 *
 * Both of them: the bar's own and the copy in the drawer, which is the same
 * control at the width where the bar has no room for it. Hiding one would
 * leave the site searchable from a phone and not from a desktop.
 *
 * Left in navigation.php rather than taken out of it, so turning search back
 * on is deleting this block and nothing else. Two classes each, to answer the
 * rules above that give them a display of their own.
 */
.site-header .site-search,
.site-nav-drawer .drawer-search {
  display: none;
}

/*
 * And the margin that stood them apart from the logo, which the search was
 * carrying. The narrow header has its own copy of this, so only the wide one
 * lost it - the actions came to rest against the logo.
 */
.site-header .site-actions {
  margin-left: auto;
}

/*
 * The site.
 *
 *   npx sass --watch --no-source-map --style=expanded src/scss/site.scss:site.css
 *
 * Compiles to /site.css, which includes/enqueue.php loads on every page.
 *
 * One sheet rather than one per template. Every rule below is named down to a
 * class that only exists where it belongs - .bay-customizer, .product-hero,
 * .site-header - so a page carries the rules for parts it does not have, and
 * nothing else. The two that could not be written that way, the customizer's
 * full height frame and the body it stops scrolling, are named down to the
 * template instead.
 *
 * Colours, breakpoints and the typeset mixin are in shared/_vars.scss, which
 * emits nothing itself. Sizes and spacing are written where they are used.
 */
/*
 * The nav bar under the header, and the drawer it becomes.
 *
 * The panels open on hover and on focus-within, so the row is walkable by
 * keyboard - and they are hidden by visibility rather than display, which is
 * what lets the fade run and keeps them out of the tab order between times.
 *
 * Nothing in the bar survives a narrow header. A panel that opens on hover
 * opens on nothing without a pointer, so below the same breakpoint the header
 * uses, the bar goes and the drawer under it takes over.
 */
.site-nav {
  flex: 0 0 auto;
  background: #ECEEF7;
  border-bottom: 1px solid rgba(58, 65, 87, 0.3);
}
@media (max-width: 1024px) {
  .site-nav {
    display: none;
  }
}

.site-nav .inner {
  display: flex;
  justify-content: center;
  gap: clamp(28px, 4.5vw, 48px);
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 60px;
}

.nav-item {
  position: relative;
}
.nav-item .nav-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 20px 2px 17px;
  font-size: 17px;
  font-weight: 600;
  color: #161C30;
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
}
.nav-item .nav-link .glyph {
  font-size: 14px;
}
.nav-item:hover .nav-link {
  border-bottom-color: #DADDEA;
}
.nav-item.is-current .nav-link {
  border-bottom-color: #161C30;
}

/*
 * Centred under its item and lifted into place as it fades. Kept in the
 * layout while closed - hidden by visibility, not display - so the
 * transition has something to run on.
 */
.nav-panel {
  position: absolute;
  top: 100%;
  left: 50%;
  z-index: 140;
  min-width: 235px;
  padding: 10px;
  visibility: hidden;
  opacity: 0;
  background: #ffffff;
  border: 1px solid rgba(35, 42, 64, 0.08);
  border-radius: 12px;
  box-shadow: 0 22px 48px -20px rgba(22, 28, 48, 0.35);
  transform: translate(-50%, 8px);
  transition: opacity 0.16s, transform 0.16s, visibility 0.16s;
}
.nav-panel a {
  display: block;
  padding: 9px 14px;
  font-size: 15px;
  font-weight: 600;
  color: #161C30;
  text-decoration: none;
  white-space: nowrap;
  border-radius: 8px;
}
.nav-panel a:hover {
  color: #3E4576;
  background: #ECEEF7;
}
.nav-panel.nav-panel-wide {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 6px;
  min-width: 470px;
}

.nav-item:hover .nav-panel,
.nav-item:focus-within .nav-panel {
  visibility: visible;
  opacity: 1;
  transform: translate(-50%, 0);
}

/*
 * The narrow face. Accordions rather than panels, and it pushes the page
 * down rather than covering it - the customizer under it is a form being
 * filled in, and a menu floating over half of it reads as a lost place.
 */
/*
 * An open drawer takes the screen rather than a slice of it. Anything less is
 * a strip with two items showing and the rest scrolled out of reach, while the
 * page underneath competes with the menu over it and neither is usable.
 *
 * The masthead covers the page to do it, rather than the page being told to
 * stand down. That way this works the same wherever the header is: it needs to
 * know nothing about what is under it, and nothing under it has to know a menu
 * exists. The bar keeps its place at the top and the drawer takes the rest.
 */
@media (max-width: 1024px) {
  .site-masthead.is-menu-open {
    position: fixed;
    inset: var(--wp-admin--admin-bar--height, 0px) 0 0;
    z-index: 200;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    /*
     * Except below 991, where style.css hides the bar outright.
     *
     * Hiding it does not withdraw the height WordPress published, so the
     * drawer went on standing off a bar that was not there - opening 46px
     * down the screen with the page showing through the gap above it. A
     * hidden bar leaves nothing to stand off.
     *
     * The number is style.css's rather than one of ours, because that is
     * where the bar is hidden and the two have to agree.
     */
  }
}
@media (max-width: 1024px) and (max-width: 991px) {
  .site-masthead.is-menu-open {
    inset: 0;
  }
}
.site-nav-drawer {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  /*
   * Only where the ::-webkit rules below cannot reach.
   *
   * Chrome honours one spelling or the other, never both: given a
   * scrollbar-width or a scrollbar-color it draws the platform's own bar and
   * ignores every ::-webkit-scrollbar rule on the element - which on Windows
   * means a wide grey track with a stepper arrow at each end, the thing these
   * rules exist to avoid. Firefox is the other way round and has only these.
   *
   * So they are asked for only where the pseudo element is not understood,
   * which is exactly Firefox.
   */
}
@supports not selector(::-webkit-scrollbar) {
  .site-nav-drawer {
    scrollbar-width: thin;
    scrollbar-color: #cdd1d4 transparent;
  }
}
.site-nav-drawer::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.site-nav-drawer::-webkit-scrollbar-track {
  background: transparent;
}
.site-nav-drawer::-webkit-scrollbar-thumb {
  background: #cdd1d4;
  border-radius: 999px;
}
.site-nav-drawer::-webkit-scrollbar-thumb:hover {
  background: #DADDEA;
}
.site-nav-drawer {
  background: #ffffff;
  border-bottom: 1px solid rgba(58, 65, 87, 0.3);
}
@media (min-width: 1025px) {
  .site-nav-drawer {
    display: none;
  }
}

.site-nav-drawer .inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 6px 40px 18px;
}
@media (max-width: 767px) {
  .site-nav-drawer .inner {
    padding: 6px 24px 18px;
  }
}

.drawer-search {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 2px 10px;
  margin-bottom: 4px;
  border-bottom: 2px solid #DADDEA;
}
.drawer-search:focus-within {
  border-bottom-color: #8FD123;
}
.drawer-search .glyph {
  font-size: 18px;
  color: #3E4576;
}
.drawer-search .site-search-input {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 16px;
  background: none;
  border: 0;
}
.drawer-search .site-search-input::placeholder {
  color: #cdd1d4;
}

.drawer-link,
.drawer-group > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 0;
  font-size: 16px;
  font-weight: 700;
  color: #161C30;
  text-decoration: none;
  border-bottom: 1px solid rgba(35, 42, 64, 0.12);
  cursor: pointer;
  list-style: none;
}
.drawer-link::-webkit-details-marker,
.drawer-group > summary::-webkit-details-marker {
  display: none;
}
.drawer-link .glyph,
.drawer-group > summary .glyph {
  font-size: 18px;
  color: #3E4576;
  transition: transform 0.2s;
}

.drawer-group[open] > summary .glyph {
  transform: rotate(180deg);
}
.drawer-group a {
  display: block;
  padding: 11px 0 11px 16px;
  font-size: 15px;
  font-weight: 600;
  color: #535C78;
  text-decoration: none;
  border-left: 2px solid #ECEEF7;
}

/*
 * The site.
 *
 *   npx sass --watch --no-source-map --style=expanded src/scss/site.scss:site.css
 *
 * Compiles to /site.css, which includes/enqueue.php loads on every page.
 *
 * One sheet rather than one per template. Every rule below is named down to a
 * class that only exists where it belongs - .bay-customizer, .product-hero,
 * .site-header - so a page carries the rules for parts it does not have, and
 * nothing else. The two that could not be written that way, the customizer's
 * full height frame and the body it stops scrolling, are named down to the
 * template instead.
 *
 * Colours, breakpoints and the typeset mixin are in shared/_vars.scss, which
 * emits nothing itself. Sizes and spacing are written where they are used.
 */
/*
 * The top of the product page: the gallery on the left, what the product is
 * on the right, a rule down the middle.
 */
.product-hero {
  font-family: "Hanken Grotesk", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.45;
  color: #161C30;
}
.product-hero *,
.product-hero *::before,
.product-hero *::after {
  box-sizing: border-box;
}
.product-hero h1, .product-hero h2, .product-hero h3, .product-hero h4, .product-hero p, .product-hero ol, .product-hero ul, .product-hero dl, .product-hero dd, .product-hero figure {
  margin: 0;
  padding: 0;
}
.product-hero ol, .product-hero ul {
  list-style: none;
}
.product-hero a {
  color: inherit;
}
.product-hero button:not(:where(.bay-button)) {
  font-family: "Hanken Grotesk", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.product-hero input,
.product-hero textarea,
.product-hero select {
  font-family: "Hanken Grotesk", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: inherit;
  color: inherit;
}
.product-hero {
  font-size: 15px;
  border-bottom: 1px solid #DADDEA;
  padding: 60px 60px 80px;
}
@media (max-width: 1024px) {
  .product-hero {
    padding: 40px 40px 60px;
    border: none;
  }
}
@media (max-width: 767px) {
  .product-hero {
    padding: 40px 24px;
  }
}
.product-hero .inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: 1440px;
  margin: 0 auto;
}
@media (max-width: 767px) {
  .product-hero .inner {
    grid-template-columns: minmax(0, 1fr);
  }
}
.product-hero .gallery {
  position: relative;
  display: flex;
  gap: 40px;
  padding-left: 92px;
  padding-right: 60px;
}
@media (max-width: 1024px) {
  .product-hero .gallery {
    padding-left: 67px;
    padding-right: 0;
    gap: 24px;
  }
}
@media (max-width: 767px) {
  .product-hero .gallery {
    flex-direction: column-reverse;
    padding-left: 0;
    gap: 20px;
  }
}
.product-hero .rail {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 52px;
  gap: 10px;
}
@media (max-width: 1024px) {
  .product-hero .rail {
    width: 48px;
  }
}
@media (max-width: 767px) {
  .product-hero .rail {
    position: static;
    width: auto;
    flex: 0 0 auto;
    flex-direction: row;
  }
}
.product-hero .rail-step {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  font-size: 18px;
  color: #161C30;
}
.product-hero .rail-step:first-child .glyph {
  transform: rotate(180deg);
}
@media (max-width: 767px) {
  .product-hero .rail-step:first-child .glyph {
    transform: rotate(90deg);
  }
  .product-hero .rail-step:last-child .glyph {
    transform: rotate(-90deg);
  }
}
.product-hero .thumbs {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  gap: 20px;
  overflow-y: auto;
  scrollbar-width: none;
}
.product-hero .thumbs::-webkit-scrollbar {
  display: none;
}
@media (max-width: 1024px) {
  .product-hero .thumbs {
    gap: 12px;
  }
}
@media (max-width: 767px) {
  .product-hero .thumbs {
    flex-direction: row;
    overflow-x: auto;
    gap: 8px;
    /*
     * Only where the ::-webkit rules below cannot reach.
     *
     * Chrome honours one spelling or the other, never both: given a
     * scrollbar-width or a scrollbar-color it draws the platform's own bar and
     * ignores every ::-webkit-scrollbar rule on the element - which on Windows
     * means a wide grey track with a stepper arrow at each end, the thing these
     * rules exist to avoid. Firefox is the other way round and has only these.
     *
     * So they are asked for only where the pseudo element is not understood,
     * which is exactly Firefox.
     */
  }
  @supports not selector(::-webkit-scrollbar) {
    .product-hero .thumbs {
      scrollbar-width: thin;
      scrollbar-color: #cdd1d4 transparent;
    }
  }
  .product-hero .thumbs::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  .product-hero .thumbs::-webkit-scrollbar-track {
    background: transparent;
  }
  .product-hero .thumbs::-webkit-scrollbar-thumb {
    background: #cdd1d4;
    border-radius: 999px;
  }
  .product-hero .thumbs::-webkit-scrollbar-thumb:hover {
    background: #DADDEA;
  }
}
.product-hero .thumb {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  overflow: hidden;
  border: 1px solid #DADDEA;
  border-radius: 4px;
  opacity: 0.75;
  transition: 0.3s ease-in opacity, 0.3s ease-in border-color;
}
.product-hero .thumb.is-current {
  border-color: #161C30;
  opacity: 1;
}
@media (max-width: 1024px) {
  .product-hero .thumb {
    width: 48px;
    height: 48px;
  }
}
.product-hero .thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.product-hero .stage {
  flex: 1 1 auto;
  min-width: 0;
}
.product-hero .stage img {
  display: block;
  width: 100%;
  aspect-ratio: 504/482;
  object-fit: cover;
  border-radius: 12px;
}
@media (max-width: 1024px) {
  .product-hero .stage img {
    aspect-ratio: 1;
  }
}
@media (max-width: 767px) {
  .product-hero .stage img {
    aspect-ratio: 400/360;
  }
}
.product-hero .detail {
  padding-left: 60px;
  border-left: 1px solid #DADDEA;
}
@media (max-width: 1024px) {
  .product-hero .detail {
    padding-left: 40px;
    border: none;
  }
}
@media (max-width: 767px) {
  .product-hero .detail {
    margin-top: 40px;
    padding-left: 0;
    padding-top: 0;
    border-left: 0;
    border-top: 0;
  }
}
.product-hero .product-title {
  font-family: "Schibsted Grotesk", "Hanken Grotesk", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 40px;
  font-weight: 600;
  line-height: 120%;
}
@media (max-width: 1024px) {
  .product-hero .product-title {
    font-size: 24px;
  }
}
@media (max-width: 767px) {
  .product-hero .product-title {
    font-size: 20px;
  }
}
.product-hero .rating-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin-top: 16px;
}
@media (max-width: 1024px) {
  .product-hero .rating-row {
    font-size: 12px;
  }
}
.product-hero .rating {
  display: flex;
  align-items: center;
  gap: 20px;
}
.product-hero .rating .stars {
  display: flex;
  gap: 4px;
  font-size: 18px;
  color: #8FD123;
}
.product-hero .rating .stars svg {
  width: 20px;
  height: auto;
}
@media (max-width: 1024px) {
  .product-hero .rating .stars svg {
    width: 16px;
  }
}
.product-hero .rating .rating-text {
  font-size: 14px;
}
@media (max-width: 1024px) {
  .product-hero .rating .rating-text {
    font-size: 12px;
  }
}
.product-hero .product-sku {
  flex: 0 0 auto;
  font-size: 16px;
}
.product-hero .product-blurb {
  margin-top: 24px;
  font-size: 16px;
  line-height: 120%;
}
@media (max-width: 1024px) {
  .product-hero .product-blurb {
    margin-top: 20px;
    font-size: 12px;
  }
}
.product-hero .product-blurb.is-folded {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
  line-clamp: 6;
  overflow: hidden;
}
.product-hero .product-blurb p + p {
  margin-top: 1em;
}
.product-hero .product-blurb ul,
.product-hero .product-blurb ol {
  margin: 1em 0;
  padding-left: 1.25em;
  list-style: disc;
}
.product-hero .product-blurb ol {
  list-style: decimal;
}
.product-hero .product-blurb li + li {
  margin-top: 0.35em;
}
.product-hero .product-blurb a {
  text-decoration: underline;
}
.product-hero .product-blurb strong,
.product-hero .product-blurb b {
  font-weight: 600;
}
.product-hero .product-blurb > :last-child {
  margin-bottom: 0;
}
.product-hero .blurb-more {
  margin-top: 10px;
  font-size: 14px;
  font-weight: 600;
  color: #161C30;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.product-hero .blurb-more:hover {
  color: #3E4576;
}
.product-hero .product-facts {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-top: 24px;
}
@media (max-width: 1024px) {
  .product-hero .product-facts {
    margin-top: 20px;
  }
}
@media (max-width: 767px) {
  .product-hero .product-facts {
    flex-direction: column-reverse;
    gap: 12px;
  }
}
.product-hero .price-label {
  font-size: 14px;
}
@media (max-width: 1024px) {
  .product-hero .price-label {
    font-size: 12px;
  }
}
.product-hero .price-figure {
  margin-top: 5px;
  font-size: 32px;
  font-weight: 500;
  letter-spacing: -0.02em;
  font-family: "Schibsted Grotesk", "Hanken Grotesk", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
@media (max-width: 1024px) {
  .product-hero .price-figure {
    font-size: 24px;
  }
}
@media (max-width: 767px) {
  .product-hero .price-figure {
    font-size: 20px;
  }
}
.product-hero .price-note {
  margin-top: 5px;
  font-size: 14px;
  font-weight: 500;
}
@media (max-width: 1024px) {
  .product-hero .price-note {
    font-size: 12px;
  }
}
.product-hero .product-size {
  flex: 0 0 auto;
  font-size: 16px;
  line-height: 120%;
  font-weight: 500;
}
@media (max-width: 1024px) {
  .product-hero .product-size {
    font-size: 14px;
  }
}
@media (max-width: 767px) {
  .product-hero .product-size {
    font-size: 12px;
  }
  .product-hero .product-size br {
    display: none;
  }
}
.product-hero .bay-button {
  margin-top: 24px;
}
@media (max-width: 1024px) {
  .product-hero .bay-button {
    margin-top: 20px;
  }
}
@media (max-width: 767px) {
  .product-hero .bay-button {
    display: flex;
    width: 100%;
  }
}
.product-hero .detail .cart {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}
.product-hero .detail .cart .quantity {
  display: flex;
  align-items: stretch;
  flex: 0 0 auto;
  height: 50px;
  margin: 0;
  overflow: hidden;
  border: 1px solid #DADDEA;
  border-radius: 8px;
}
.product-hero .detail .cart .quantity-step {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 50px;
  font-size: 18px;
  color: #161C30;
  background: #D6DEE1;
  border: 0;
  cursor: pointer;
}
.product-hero .detail .cart .qty {
  flex: 1 1 auto;
  width: 76px;
  min-width: 0;
  height: 100%;
  padding: 0 4px;
  font-family: "Hanken Grotesk", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 20px;
  font-weight: 600;
  text-align: center;
  color: #161C30;
  background: #ffffff;
  border: 0;
  border-radius: 0;
  appearance: textfield;
}
.product-hero .detail .cart .qty::-webkit-outer-spin-button, .product-hero .detail .cart .qty::-webkit-inner-spin-button {
  margin: 0;
  appearance: none;
}
.product-hero .detail .cart .single_add_to_cart_button.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 13px 30px;
  font-family: "Inter", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #161C30;
  text-decoration: none;
  background: #8FD123;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: 0.3s ease-in filter;
  text-align: center;
}
@media (max-width: 767px) {
  .product-hero .detail .cart .single_add_to_cart_button.button {
    padding: 11px 20px;
    font-size: 14px;
  }
}
.product-hero .detail .cart .single_add_to_cart_button.button .glyph {
  font-size: 16px;
}
.product-hero .detail .cart .single_add_to_cart_button.button:hover {
  filter: brightness(0.95);
}
.product-hero .detail .cart .single_add_to_cart_button.button {
  /*
   * Nothing to press.
   *
   * Every button drawn from this mixin gets it, because a green pill that
   * refuses the click while looking exactly like the one beside it that works
   * is worse than one that never invited the press. The hover goes with it -
   * a button that still lights up under the pointer is still inviting.
   *
   * The attribute as well as the state, for the places where the control is a
   * link and cannot carry `disabled` at all.
   */
}
.product-hero .detail .cart .single_add_to_cart_button.button:disabled, .product-hero .detail .cart .single_add_to_cart_button.button[aria-disabled=true] {
  opacity: 0.45;
  cursor: default;
}
.product-hero .detail .cart .single_add_to_cart_button.button:disabled:hover, .product-hero .detail .cart .single_add_to_cart_button.button[aria-disabled=true]:hover {
  filter: none;
}
.product-hero .detail .cart .single_add_to_cart_button.button {
  min-height: 50px;
}
.product-hero .detail .cart .variations {
  width: 100%;
  border-collapse: collapse;
}
.product-hero .detail .cart .variations th,
.product-hero .detail .cart .variations td {
  padding: 0 0 12px;
  text-align: left;
  vertical-align: middle;
}
.product-hero .detail .cart .variations th {
  padding-right: 16px;
  font-size: 14px;
  font-weight: 600;
}
.product-hero .detail .cart .variations select {
  min-width: 200px;
  height: 44px;
  padding: 0 12px;
  font-family: "Hanken Grotesk", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #161C30;
  background: #ECEEF7;
  border: 1px solid #DADDEA;
  border-radius: 8px;
}
.product-hero .detail .cart .reset_variations {
  font-size: 13px;
  color: #535C78;
  text-decoration: underline;
}
.product-hero .detail .cart .woocommerce-variation-add-to-cart {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  width: 100%;
}
.product-hero .detail .cart .woocommerce-variation-price {
  display: none;
}
.product-hero .added_to_cart {
  display: inline-block;
  margin-top: 12px;
  font-size: 14px;
  color: #535C78;
  text-decoration: underline;
}
.product-hero {
  /*
   * Why the button above it cannot be pressed - out of stock, or no price.
   *
   * The shape the shop's own notices take, in the red that marks the one worth
   * reading rather than the blue that marks the ones that are not.
   */
}
.product-hero .product-unavailable {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 12px;
  padding: 9px 12px;
  font-size: 13px;
  line-height: 1.45;
  color: #B3261E;
  background: #ECEEF7;
  border-left: 3px solid #B3261E;
  border-radius: 6px;
}
@media (max-width: 767px) {
  .product-hero .product-unavailable {
    font-size: 12px;
  }
}
.product-hero .product-minimum {
  margin-top: 10px;
  font-size: 16px;
}
@media (max-width: 1024px) {
  .product-hero .product-minimum {
    font-size: 12px;
  }
}
@media (max-width: 767px) {
  .product-hero .product-minimum {
    font-size: 10px;
  }
}
.product-hero .product-assurance {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
  font-size: 16px;
}
@media (max-width: 1024px) {
  .product-hero .product-assurance {
    font-size: 12px;
    margin-top: 12px;
  }
}
@media (max-width: 767px) {
  .product-hero .product-assurance {
    margin-top: 18px;
  }
}
.product-hero .product-assurance .glyph {
  font-size: 20px;
}
@media (max-width: 1024px) {
  .product-hero .product-assurance .glyph {
    font-size: 20px;
  }
}

/*
 * The site.
 *
 *   npx sass --watch --no-source-map --style=expanded src/scss/site.scss:site.css
 *
 * Compiles to /site.css, which includes/enqueue.php loads on every page.
 *
 * One sheet rather than one per template. Every rule below is named down to a
 * class that only exists where it belongs - .bay-customizer, .product-hero,
 * .site-header - so a page carries the rules for parts it does not have, and
 * nothing else. The two that could not be written that way, the customizer's
 * full height frame and the body it stops scrolling, are named down to the
 * template instead.
 *
 * Colours, breakpoints and the typeset mixin are in shared/_vars.scss, which
 * emits nothing itself. Sizes and spacing are written where they are used.
 */
/*
 * The band under the hero: the price ladder, and two cards beside it.
 *
 * Two parts to one part to one part - the ladder needs room for six columns
 * and the cards need room for a sentence, and that is the ratio at which both
 * are true.
 */
.product-features {
  font-family: "Hanken Grotesk", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.45;
  color: #161C30;
}
.product-features *,
.product-features *::before,
.product-features *::after {
  box-sizing: border-box;
}
.product-features h1, .product-features h2, .product-features h3, .product-features h4, .product-features p, .product-features ol, .product-features ul, .product-features dl, .product-features dd, .product-features figure {
  margin: 0;
  padding: 0;
}
.product-features ol, .product-features ul {
  list-style: none;
}
.product-features a {
  color: inherit;
}
.product-features button:not(:where(.bay-button)) {
  font-family: "Hanken Grotesk", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.product-features input,
.product-features textarea,
.product-features select {
  font-family: "Hanken Grotesk", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: inherit;
  color: inherit;
}
.product-features {
  font-size: 15px;
  padding: 60px;
  background: #ECEEF7;
}
@media (max-width: 1024px) {
  .product-features {
    padding: 40px;
  }
}
@media (max-width: 767px) {
  .product-features {
    padding: 40px 24px;
  }
}
.product-features .inner {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 40px;
  max-width: 1440px;
  margin: 0 auto;
}
@media (max-width: 1024px) {
  .product-features .inner {
    gap: 16px;
  }
}
.product-features .inner {
  /*
   * And below this it cannot: six tier columns want about 52 apiece before
   * a price starts breaking across lines, which with the padding either side
   * is around 354 for the ladder's card - and the ladder is half of what is
   * left after the section's own gutters. Under 880 there is not that much.
   *
   * So the ladder takes the width it needs and the two cards halve the row
   * under it, which is what they did at every compact-header width before.
   */
}
@media (max-width: 800px) {
  .product-features .inner {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
  .product-features .inner .tiers {
    grid-column: 1/-1;
  }
}
@media (max-width: 767px) {
  .product-features .inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
}
.product-features .feature-card {
  padding: 24px;
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid #DADDEA;
}
@media (max-width: 1024px) {
  .product-features .feature-card {
    padding: 20px;
  }
}
.product-features .tiers-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 20px;
}
.product-features .tiers-title {
  font-family: "Schibsted Grotesk", "Hanken Grotesk", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 120%;
}
.product-features .tiers-note {
  font-size: 14px;
  color: #6B7390;
}
@media (max-width: 1024px) {
  .product-features .tiers-note {
    font-size: 12px;
  }
}
.product-features {
  /*
   * The ladder: every tier a box of its own, laid across and wrapping when
   * there is no more room across.
   *
   * A table could not do this. However many tiers a product has, a table's
   * columns are one row - so seven of them in a compact-header's half squeezed each
   * range until it broke through the middle, "25 -" over "49". Here the ones
   * that do not fit drop to the next line whole.
   *
   * auto-fit rather than a number of columns, because the number is the
   * product's: six tiers on one, seven on another, and the row works out how
   * many of them the width holds.
   */
  /*
   * The ladder: every tier as wide as the longer of its two lines, carrying
   * its own spacing either side, and wrapping when there is no more room.
   *
   * Sized by content rather than shared out in equal columns, because equal
   * columns are what made the spacing uneven: the gap between a tier and the
   * rule beside it was whatever was left after the widest price in the set had
   * been allowed for, so it differed column to column. A tier that owns its
   * own padding has the same gap everywhere.
   *
   * The ladder is pulled out by that padding and clips what hangs over, so
   * whichever tier begins a line loses both its rule and its left spacing and
   * starts on the card's own edge - on the first line and on every line after
   * it. Nothing has to know where the lines break.
   */
}
.product-features .tiers-ladder {
  display: flex;
  flex-wrap: wrap;
  row-gap: 18px;
  margin: 30px -25px 0;
  text-align: left;
  overflow: hidden;
}
@media (max-width: 1024px) {
  .product-features .tiers-ladder {
    row-gap: 12px;
    margin: 16px -20px 0;
  }
}
@media (max-width: 767px) {
  .product-features .tiers-ladder {
    margin-top: 14px;
  }
}
.product-features .tiers-ladder .tier {
  flex: 0 0 auto;
  min-width: 0;
  margin-left: -1px;
  padding: 0 25px 5px;
  border-left: 1px solid #DADDEA;
}
@media (max-width: 1024px) {
  .product-features .tiers-ladder .tier {
    padding: 0 20px 5px;
  }
}
.product-features .tiers-ladder dt {
  margin: 0;
  padding-bottom: 6px;
  font-size: 14px;
  font-weight: 400;
  line-height: 110%;
  color: #6B7390;
}
@media (max-width: 1024px) {
  .product-features .tiers-ladder dt {
    font-size: 10px;
  }
}
.product-features .tiers-ladder dd {
  margin: 0;
  font-size: 20px;
  font-weight: 500;
  line-height: 110%;
}
@media (max-width: 1024px) {
  .product-features .tiers-ladder dd {
    font-size: 16px;
  }
}
.product-features .tiers-upcharge {
  margin-top: 16px;
  font-size: 14px;
  color: #6B7390;
  font-weight: 500;
  line-height: 120%;
}
@media (max-width: 1024px) {
  .product-features .tiers-upcharge {
    margin-top: 16px;
    font-size: 12px;
  }
}
.product-features .feature-head {
  display: flex;
  align-items: center;
  gap: 24px;
}
@media (max-width: 1024px) {
  .product-features .feature-head {
    gap: 15px;
  }
}
@media (max-width: 767px) {
  .product-features .feature-head {
    gap: 12px;
  }
}
.product-features .feature-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  color: #161C30;
  background: #ECEEF7;
  border-radius: 8px;
}
@media (max-width: 1024px) {
  .product-features .feature-icon {
    width: 32px;
    height: 32px;
    border-radius: 4px;
  }
}
.product-features .feature-icon svg,
.product-features .feature-icon img {
  display: block;
  width: 20px;
  height: 20px;
  object-fit: contain;
}
@media (max-width: 1024px) {
  .product-features .feature-icon svg,
  .product-features .feature-icon img {
    width: 15px;
    height: 15px;
  }
}
.product-features .feature-title {
  font-family: "Schibsted Grotesk", "Hanken Grotesk", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 120%;
}
@media (max-width: 1024px) {
  .product-features .feature-title {
    font-size: 16px;
  }
}
.product-features .feature-text {
  margin-top: 20px;
  font-size: 14px;
  line-height: 120%;
  color: #6B7390;
}
@media (max-width: 1024px) {
  .product-features .feature-text {
    margin-top: 10px;
    font-size: 12px;
  }
}

/*
 * The site.
 *
 *   npx sass --watch --no-source-map --style=expanded src/scss/site.scss:site.css
 *
 * Compiles to /site.css, which includes/enqueue.php loads on every page.
 *
 * One sheet rather than one per template. Every rule below is named down to a
 * class that only exists where it belongs - .bay-customizer, .product-hero,
 * .site-header - so a page carries the rules for parts it does not have, and
 * nothing else. The two that could not be written that way, the customizer's
 * full height frame and the body it stops scrolling, are named down to the
 * template instead.
 *
 * Colours, breakpoints and the typeset mixin are in shared/_vars.scss, which
 * emits nothing itself. Sizes and spacing are written where they are used.
 */
/*
 * Personalize It Your Way: the ways of decorating, one card each.
 *
 * A picture full bleed to the card's edges, then what it is, who it suits, and
 * the way in. The two read as a pair rather than as a list, so they share a
 * row for as long as a row holds them.
 */
.product-personalize {
  font-family: "Hanken Grotesk", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.45;
  color: #161C30;
}
.product-personalize *,
.product-personalize *::before,
.product-personalize *::after {
  box-sizing: border-box;
}
.product-personalize h1, .product-personalize h2, .product-personalize h3, .product-personalize h4, .product-personalize p, .product-personalize ol, .product-personalize ul, .product-personalize dl, .product-personalize dd, .product-personalize figure {
  margin: 0;
  padding: 0;
}
.product-personalize ol, .product-personalize ul {
  list-style: none;
}
.product-personalize a {
  color: inherit;
}
.product-personalize button:not(:where(.bay-button)) {
  font-family: "Hanken Grotesk", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.product-personalize input,
.product-personalize textarea,
.product-personalize select {
  font-family: "Hanken Grotesk", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: inherit;
  color: inherit;
}
.product-personalize {
  font-size: 15px;
  padding: 80px 60px 0px;
  background: #ffffff;
}
@media (max-width: 1024px) {
  .product-personalize {
    padding: 60px 40px 0;
  }
}
@media (max-width: 767px) {
  .product-personalize {
    padding: 60px 24px 0;
  }
}
.product-personalize .inner {
  max-width: 1440px;
  margin: 0 auto;
}
.product-personalize .section-head {
  text-align: center;
}
.product-personalize .section-title {
  font-family: "Schibsted Grotesk", "Hanken Grotesk", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 40px;
  font-weight: 600;
  line-height: 120%;
}
@media (max-width: 1024px) {
  .product-personalize .section-title {
    font-size: 24px;
  }
}
@media (max-width: 767px) {
  .product-personalize .section-title {
    font-size: 20px;
  }
}
.product-personalize .section-lede {
  margin-top: 16px;
  font-size: 20px;
  color: #6B7390;
}
@media (max-width: 1024px) {
  .product-personalize .section-lede {
    font-size: 16px;
  }
}
@media (max-width: 767px) {
  .product-personalize .section-lede {
    margin-top: 12px;
  }
}
.product-personalize .method-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-top: 40px;
}
@media (max-width: 1024px) {
  .product-personalize .method-grid {
    margin-top: 24px;
  }
}
@media (max-width: 767px) {
  .product-personalize .method-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }
}
.product-personalize .method-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid #DADDEA;
  border-radius: 24px;
}
.product-personalize .method-image {
  display: block;
  width: 100%;
  aspect-ratio: 636/300;
  object-fit: cover;
}
@media (max-width: 1024px) {
  .product-personalize .method-image {
    aspect-ratio: 450/250;
  }
}
@media (max-width: 767px) {
  .product-personalize .method-image {
    aspect-ratio: 400/250;
  }
}
.product-personalize .method-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 40px;
}
@media (max-width: 1024px) {
  .product-personalize .method-body {
    padding: 20px;
  }
}
.product-personalize .method-title {
  font-family: "Schibsted Grotesk", "Hanken Grotesk", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 24px;
  font-weight: 600;
}
@media (max-width: 1024px) {
  .product-personalize .method-title {
    font-size: 20px;
  }
}
.product-personalize .method-text {
  margin-top: 20px;
  font-size: 16px;
  line-height: 130%;
  color: #6B7390;
}
@media (max-width: 1024px) {
  .product-personalize .method-text {
    font-size: 14px;
  }
}
@media (max-width: 767px) {
  .product-personalize .method-text {
    margin-top: 16px;
    font-size: 12px;
  }
}
.product-personalize .method-points {
  margin: 20px 0 20px 10px;
  padding-left: 15px;
  font-size: 16px;
  line-height: 130%;
  color: #6B7390;
  list-style: disc;
}
@media (max-width: 1024px) {
  .product-personalize .method-points {
    font-size: 14px;
  }
}
@media (max-width: 767px) {
  .product-personalize .method-points {
    margin: 16px 0 16px 14px;
    font-size: 12px;
    padding-left: 7px;
  }
}
.product-personalize .method-points li + li {
  margin-top: 8px;
}
@media (max-width: 1024px) {
  .product-personalize .method-points li + li {
    margin-top: 4px;
  }
}
.product-personalize .bay-button {
  width: 100%;
  margin-top: auto;
}
@media (max-width: 1024px) {
  .product-personalize .bay-button {
    font-size: 14px;
  }
}

/*
 * The site.
 *
 *   npx sass --watch --no-source-map --style=expanded src/scss/site.scss:site.css
 *
 * Compiles to /site.css, which includes/enqueue.php loads on every page.
 *
 * One sheet rather than one per template. Every rule below is named down to a
 * class that only exists where it belongs - .bay-customizer, .product-hero,
 * .site-header - so a page carries the rules for parts it does not have, and
 * nothing else. The two that could not be written that way, the customizer's
 * full height frame and the body it stops scrolling, are named down to the
 * template instead.
 *
 * Colours, breakpoints and the typeset mixin are in shared/_vars.scss, which
 * emits nothing itself. Sizes and spacing are written where they are used.
 */
/*
 * What Our Customers Say: a scrolling row of cards, two at a time.
 *
 * The track is an overflowing flex row that snaps, which is the whole
 * carousel - it swipes on touch, scrolls on a trackpad and pages with the
 * arrow keys before any script runs. product.js only adds the arrows and the
 * dots, and shows them once it knows there is more than one page.
 *
 * The arrows sit in the row beside the track rather than over it, so nothing
 * covers a card at the width where the gutters run out.
 */
.product-reviews {
  font-family: "Hanken Grotesk", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.45;
  color: #161C30;
}
.product-reviews *,
.product-reviews *::before,
.product-reviews *::after {
  box-sizing: border-box;
}
.product-reviews h1, .product-reviews h2, .product-reviews h3, .product-reviews h4, .product-reviews p, .product-reviews ol, .product-reviews ul, .product-reviews dl, .product-reviews dd, .product-reviews figure {
  margin: 0;
  padding: 0;
}
.product-reviews ol, .product-reviews ul {
  list-style: none;
}
.product-reviews a {
  color: inherit;
}
.product-reviews button:not(:where(.bay-button)) {
  font-family: "Hanken Grotesk", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.product-reviews input,
.product-reviews textarea,
.product-reviews select {
  font-family: "Hanken Grotesk", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: inherit;
  color: inherit;
}
.product-reviews {
  font-size: 15px;
  padding: 80px 60px 0;
  background: #ffffff;
}
@media (max-width: 1024px) {
  .product-reviews {
    padding: 60px 40px 0px;
  }
}
@media (max-width: 767px) {
  .product-reviews {
    padding: 60px 24px 0px;
  }
}
.product-reviews .inner {
  max-width: 1440px;
  margin: 0 auto;
}
.product-reviews .section-head {
  text-align: center;
}
.product-reviews .section-title {
  font-family: "Schibsted Grotesk", "Hanken Grotesk", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 40px;
  font-weight: 600;
  line-height: 120%;
}
@media (max-width: 1024px) {
  .product-reviews .section-title {
    font-size: 24px;
  }
}
@media (max-width: 767px) {
  .product-reviews .section-title {
    font-size: 20px;
  }
}
.product-reviews .reviews-carousel {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 40px;
}
@media (max-width: 1024px) {
  .product-reviews .reviews-carousel {
    margin-top: 24px;
    gap: 15px;
  }
}
@media (max-width: 767px) {
  .product-reviews .reviews-carousel {
    gap: 0;
    margin-top: 24px;
    width: calc(100% + 24px);
  }
}
.product-reviews .reviews-step {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  color: #ffffff;
  background: #161C30;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}
.product-reviews .reviews-step .glyph {
  width: 20px;
  height: 20px;
}
.product-reviews .reviews-step:hover {
  background: #3E4576;
}
.product-reviews .reviews-step[hidden] {
  display: none;
}
.product-reviews .reviews-step:disabled {
  opacity: 0.35;
  cursor: default;
}
@media (max-width: 767px) {
  .product-reviews .reviews-step {
    display: none;
  }
}
.product-reviews .reviews-track {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  gap: 40px;
}
@media (max-width: 1024px) {
  .product-reviews .reviews-track {
    gap: 20px;
  }
}
@media (max-width: 767px) {
  .product-reviews .reviews-track {
    gap: 16px;
  }
}
.product-reviews .reviews-track {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.product-reviews .reviews-track::-webkit-scrollbar {
  display: none;
}
.product-reviews .reviews-track:focus-visible {
  outline: 2px solid #3E4576;
  outline-offset: 4px;
}
.product-reviews .review-card {
  flex: 0 0 calc(50% - 20px);
  scroll-snap-align: start;
  display: flex;
  gap: 20px;
  padding: 20px;
  background: #ffffff;
  border: 1px solid #DADDEA;
  border-radius: 20px;
}
@media (max-width: 767px) {
  .product-reviews .review-card {
    flex-basis: 86%;
    gap: 12px;
  }
}
.product-reviews .review-photo {
  align-self: flex-start;
  aspect-ratio: 205/210;
  object-fit: cover;
  border-radius: 8px;
  width: 34%;
}
@media (max-width: 1024px) {
  .product-reviews .review-photo {
    width: auto;
    min-width: 80px;
  }
}
@media (max-width: 767px) {
  .product-reviews .review-photo {
    width: 34%;
    aspect-ratio: 205/210;
  }
}
.product-reviews .review-body {
  flex: 1 1 auto;
  min-width: 0;
}
.product-reviews .review-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 2px 16px;
}
.product-reviews .review-who {
  min-width: 0;
  font-size: 18px;
  color: #6B7390;
  overflow-wrap: anywhere;
}
@media (max-width: 1024px) {
  .product-reviews .review-who {
    font-size: 16px;
  }
}
@media (max-width: 767px) {
  .product-reviews .review-who {
    font-size: 12px;
  }
}
.product-reviews .review-who strong {
  font-weight: 600;
  color: #161C30;
}
.product-reviews .review-who .review-company {
  font-size: 14px;
  margin-left: 8px;
}
@media (max-width: 1024px) {
  .product-reviews .review-who .review-company {
    font-size: 12px;
  }
}
@media (max-width: 767px) {
  .product-reviews .review-who .review-company {
    font-size: 9px;
    margin-left: 5px;
  }
}
.product-reviews .review-date {
  flex: 0 0 auto;
  font-size: 14px;
  color: #161C30;
}
@media (max-width: 1024px) {
  .product-reviews .review-date {
    font-size: 12px;
  }
}
@media (max-width: 767px) {
  .product-reviews .review-date {
    font-size: 10px;
  }
}
.product-reviews .review-stars {
  display: flex;
  gap: 4px;
  margin-top: 6px;
  color: #8FD123;
}
.product-reviews .review-stars .glyph {
  width: 16px;
  height: 16px;
}
.product-reviews .review-used {
  margin-top: 5px;
  font-size: 14px;
  font-weight: 400;
  color: #6B7390;
}
@media (max-width: 1024px) {
  .product-reviews .review-used {
    font-size: 12px;
  }
}
.product-reviews .review-text {
  margin-top: 24px;
  font-size: 14px;
  line-height: 130%;
  color: #6B7390;
}
@media (max-width: 1024px) {
  .product-reviews .review-text {
    font-size: 12px;
    margin-top: 10px;
  }
}
.product-reviews .reviews-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 24px;
}
.product-reviews .reviews-dots[hidden] {
  display: none;
}
@media (max-width: 1024px) {
  .product-reviews .reviews-dots {
    margin-top: 16px;
  }
}
.product-reviews .reviews-dot {
  width: 70px;
  height: 4px;
  padding: 0;
  background: rgba(22, 28, 48, 0.5019607843);
  border: 0;
  border-radius: 4px;
  cursor: pointer;
  transition: 0.2s ease-in width;
}
@media (max-width: 767px) {
  .product-reviews .reviews-dot {
    width: 30px;
  }
}
.product-reviews .reviews-dot.is-current {
  width: 130px;
  background: #161C30;
}
@media (max-width: 767px) {
  .product-reviews .reviews-dot.is-current {
    width: 60px;
  }
}

/*
 * The site.
 *
 *   npx sass --watch --no-source-map --style=expanded src/scss/site.scss:site.css
 *
 * Compiles to /site.css, which includes/enqueue.php loads on every page.
 *
 * One sheet rather than one per template. Every rule below is named down to a
 * class that only exists where it belongs - .bay-customizer, .product-hero,
 * .site-header - so a page carries the rules for parts it does not have, and
 * nothing else. The two that could not be written that way, the customizer's
 * full height frame and the body it stops scrolling, are named down to the
 * template instead.
 *
 * Colours, breakpoints and the typeset mixin are in shared/_vars.scss, which
 * emits nothing itself. Sizes and spacing are written where they are used.
 */
/*
 * The closing band: a tinted panel with a picture on one side and the last
 * offer on the other.
 *
 * Tinted rather than white, so the page finishes on something rather than
 * trailing off into the footer.
 */
.product-cta {
  font-family: "Hanken Grotesk", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.45;
  color: #161C30;
}
.product-cta *,
.product-cta *::before,
.product-cta *::after {
  box-sizing: border-box;
}
.product-cta h1, .product-cta h2, .product-cta h3, .product-cta h4, .product-cta p, .product-cta ol, .product-cta ul, .product-cta dl, .product-cta dd, .product-cta figure {
  margin: 0;
  padding: 0;
}
.product-cta ol, .product-cta ul {
  list-style: none;
}
.product-cta a {
  color: inherit;
}
.product-cta button:not(:where(.bay-button)) {
  font-family: "Hanken Grotesk", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.product-cta input,
.product-cta textarea,
.product-cta select {
  font-family: "Hanken Grotesk", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: inherit;
  color: inherit;
}
.product-cta {
  font-size: 15px;
  padding: 80px 60px 80px;
  background: #ffffff;
}
@media (max-width: 1024px) {
  .product-cta {
    padding: 60px 40px;
  }
}
@media (max-width: 767px) {
  .product-cta {
    padding: 60px 24px;
  }
}
.product-cta .inner {
  max-width: 1440px;
  margin: 0 auto;
}
.product-cta .cta-panel {
  display: flex;
  align-items: stretch;
  gap: 60px;
  padding: 40px;
  background: #ECEEF7;
  border-radius: 24px;
  border: 1px solid #DADDEA;
}
@media (max-width: 1024px) {
  .product-cta .cta-panel {
    padding: 24px;
  }
}
@media (max-width: 767px) {
  .product-cta .cta-panel {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
    padding: 20px;
  }
}
.product-cta .cta-image {
  display: block;
  align-self: flex-start;
  flex: 0 0 calc(50% - 30px);
  width: calc(50% - 30px);
  aspect-ratio: 590/245;
  object-fit: cover;
  border-radius: 8px;
}
@media (max-width: 1024px) {
  .product-cta .cta-image {
    aspect-ratio: 328/168;
  }
}
@media (max-width: 767px) {
  .product-cta .cta-image {
    flex: 0 0 auto;
    aspect-ratio: 360/245;
    width: 100%;
  }
}
.product-cta .cta-body {
  display: flex;
  flex-direction: column;
  flex: 0 0 calc(50% - 30px);
  min-width: 0;
}
@media (max-width: 767px) {
  .product-cta .cta-body {
    flex: 1 1 auto;
  }
}
.product-cta .cta-title {
  font-family: "Schibsted Grotesk", "Hanken Grotesk", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 40px;
  font-weight: 600;
  line-height: 120%;
}
@media (max-width: 1024px) {
  .product-cta .cta-title {
    font-size: 24px;
  }
}
@media (max-width: 767px) {
  .product-cta .cta-title {
    font-size: 20px;
  }
}
.product-cta .cta-lede {
  margin-top: 16px;
  margin-bottom: 24px;
  font-size: 20px;
  color: #6B7390;
}
@media (max-width: 1024px) {
  .product-cta .cta-lede {
    font-size: 16px;
  }
}
@media (max-width: 767px) {
  .product-cta .cta-lede {
    font-size: 12px;
    margin: 12px 0 20px;
  }
}
.product-cta .bay-button {
  margin-top: auto;
  align-self: flex-start;
}
@media (max-width: 767px) {
  .product-cta .bay-button {
    font-size: 14px;
  }
}

/*
 * The site.
 *
 *   npx sass --watch --no-source-map --style=expanded src/scss/site.scss:site.css
 *
 * Compiles to /site.css, which includes/enqueue.php loads on every page.
 *
 * One sheet rather than one per template. Every rule below is named down to a
 * class that only exists where it belongs - .bay-customizer, .product-hero,
 * .site-header - so a page carries the rules for parts it does not have, and
 * nothing else. The two that could not be written that way, the customizer's
 * full height frame and the body it stops scrolling, are named down to the
 * template instead.
 *
 * Colours, breakpoints and the typeset mixin are in shared/_vars.scss, which
 * emits nothing itself. Sizes and spacing are written where they are used.
 */
/*
 * The shop, and the category and search archives that share its template.
 *
 * A grid of cards, the way the collection page is drawn: a picture to the
 * card's own edges, then what it is, what it costs, and the way in. The card
 * is WooCommerce's list item and everything in it is WooCommerce's own - the
 * picture, the heading and the price sit inside the link it wraps them in, and
 * the button is printed after that link closes.
 *
 * So the padding is on the words rather than on the box holding them: the
 * picture is their sibling, and a padded box would inset it too.
 *
 * The loop rules name .shop-body as well, because WooCommerce writes its own
 * from `.woocommerce ul.products li.product` - and `.woocommerce` is a class
 * on the body here, which makes that three classes and two elements before it
 * has said anything about the shop.
 */
.shop-page {
  font-family: "Hanken Grotesk", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.45;
  color: #161C30;
}
.shop-page *,
.shop-page *::before,
.shop-page *::after {
  box-sizing: border-box;
}
.shop-page h1, .shop-page h2, .shop-page h3, .shop-page h4, .shop-page p, .shop-page ol, .shop-page ul, .shop-page dl, .shop-page dd, .shop-page figure {
  margin: 0;
  padding: 0;
}
.shop-page ol, .shop-page ul {
  list-style: none;
}
.shop-page a {
  color: inherit;
}
.shop-page button:not(:where(.bay-button)) {
  font-family: "Hanken Grotesk", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.shop-page input,
.shop-page textarea,
.shop-page select {
  font-family: "Hanken Grotesk", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: inherit;
  color: inherit;
}
.shop-page {
  font-size: 15px;
  background: #ffffff;
}
.shop-page .inner {
  max-width: 1440px;
  margin: 0 auto;
}
.shop-page .shop-hero {
  padding: 74px 60px 64px;
  background: #ECEEF7;
}
@media (max-width: 767px) {
  .shop-page .shop-hero {
    padding: 40px 24px 36px;
  }
}
.shop-page .shop-body {
  padding: 44px 60px 80px;
}
@media (max-width: 767px) {
  .shop-page .shop-body {
    padding: 28px 24px 48px;
  }
}
.shop-page .woocommerce-products-header__title {
  font-family: "Schibsted Grotesk", "Hanken Grotesk", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: clamp(2.3rem, 5.8vw, 4rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.shop-page .term-description,
.shop-page .woocommerce-products-header p {
  max-width: 60ch;
  margin-top: 18px;
  font-size: 17px;
  line-height: 1.55;
  color: #535C78;
}
.shop-page .woocommerce-notices-wrapper + .woocommerce-result-count,
.shop-page .woocommerce-result-count {
  float: none;
  margin: 0;
  font-size: 14px;
  color: #535C78;
}
.shop-page .woocommerce-ordering {
  float: none;
  margin: 0;
}
.shop-page .woocommerce-result-count,
.shop-page .woocommerce-ordering {
  display: inline-block;
  vertical-align: middle;
}
.shop-page .woocommerce-ordering select {
  padding: 10px 14px;
  font-family: "Hanken Grotesk", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #161C30;
  background: #ffffff;
  border: 1px solid #DADDEA;
  border-radius: 10px;
}
.shop-page .woocommerce-ordering select:focus {
  outline: none;
  border-color: #adb4ea;
  box-shadow: 0 0 0 3px rgba(62, 69, 118, 0.12);
}
.shop-page .shop-body ul.products {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}
.shop-page .shop-body ul.products::before, .shop-page .shop-body ul.products::after {
  content: none;
}
@media (max-width: 1100px) {
  .shop-page .shop-body ul.products {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 767px) {
  .shop-page .shop-body ul.products {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
}
.shop-page .shop-body ul.products li.product {
  display: flex;
  flex-direction: column;
  float: none;
  width: auto;
  margin: 0;
  padding: 0;
  background: #ffffff;
  border: 1px solid #DADDEA;
  border-radius: 14px;
  overflow: hidden;
  transition: transform 0.25s, box-shadow 0.25s;
}
.shop-page .shop-body ul.products li.product:hover {
  transform: translateY(-5px);
  box-shadow: 0 24px 48px -24px rgba(22, 28, 48, 0.3);
}
.shop-page .shop-body ul.products li.product > a.woocommerce-loop-product__link {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  color: inherit;
  text-decoration: none;
}
.shop-page .shop-body ul.products li.product img {
  display: block;
  width: 100%;
  margin: 0;
  aspect-ratio: 4/3.4;
  object-fit: cover;
  border-radius: 0;
}
.shop-page .shop-body ul.products li.product .woocommerce-loop-product__title {
  padding: 18px 22px 0;
  font-family: "Schibsted Grotesk", "Hanken Grotesk", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: #161C30;
}
.shop-page .shop-body ul.products li.product .price {
  display: block;
  flex: 1 1 auto;
  margin: 0;
  padding: 8px 22px 0;
  font-size: 20px;
  font-weight: 700;
  color: #161C30;
}
.shop-page .shop-body ul.products li.product .price .from {
  font-size: 13px;
  font-weight: 600;
  color: #6B7390;
}
.shop-page .shop-body ul.products li.product .price del {
  font-size: 15px;
  font-weight: 400;
  color: #6B7390;
}
.shop-page .shop-body ul.products li.product .price ins {
  font-weight: 700;
  text-decoration: none;
  background: none;
}
.shop-page .shop-body ul.products li.product .star-rating {
  margin: 10px 22px 0;
  font-size: 13px;
}
.shop-page .shop-body ul.products li.product .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 13px 30px;
  font-family: "Inter", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #161C30;
  text-decoration: none;
  background: #8FD123;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: 0.3s ease-in filter;
  text-align: center;
}
@media (max-width: 767px) {
  .shop-page .shop-body ul.products li.product .button {
    padding: 11px 20px;
    font-size: 14px;
  }
}
.shop-page .shop-body ul.products li.product .button .glyph {
  font-size: 16px;
}
.shop-page .shop-body ul.products li.product .button:hover {
  filter: brightness(0.95);
}
.shop-page .shop-body ul.products li.product .button {
  /*
   * Nothing to press.
   *
   * Every button drawn from this mixin gets it, because a green pill that
   * refuses the click while looking exactly like the one beside it that works
   * is worse than one that never invited the press. The hover goes with it -
   * a button that still lights up under the pointer is still inviting.
   *
   * The attribute as well as the state, for the places where the control is a
   * link and cannot carry `disabled` at all.
   */
}
.shop-page .shop-body ul.products li.product .button:disabled, .shop-page .shop-body ul.products li.product .button[aria-disabled=true] {
  opacity: 0.45;
  cursor: default;
}
.shop-page .shop-body ul.products li.product .button:disabled:hover, .shop-page .shop-body ul.products li.product .button[aria-disabled=true]:hover {
  filter: none;
}
.shop-page .shop-body ul.products li.product .button {
  align-self: flex-start;
  margin: 16px 22px 22px;
  padding: 11px 22px;
  font-size: 14px;
}
.shop-page .shop-body ul.products li.product .button:hover {
  color: #161C30;
  background: #8FD123;
  filter: brightness(0.95);
}
.shop-page .shop-body ul.products li.product .added_to_cart {
  align-self: flex-start;
  margin: 0 22px 20px;
  font-size: 14px;
  font-weight: 600;
  color: #161C30;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.shop-page .shop-body ul.products li.product .added_to_cart:hover {
  color: #3E4576;
}
.shop-page .shop-body ul.products li.product .button:has(+ .added_to_cart) {
  margin-bottom: 10px;
}
.shop-page .shop-body ul.products li.product .onsale {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 1;
  margin: 0;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  color: #161C30;
  background: #8FD123;
  border-radius: 99px;
}
.shop-page .shop-body nav.woocommerce-pagination {
  margin-top: 40px;
  text-align: center;
}
.shop-page .shop-body nav.woocommerce-pagination ul {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
}
.shop-page .shop-body nav.woocommerce-pagination ul li {
  float: none;
  margin: 0;
  padding: 0;
  overflow: visible;
  border: 0;
}
.shop-page .shop-body nav.woocommerce-pagination ul li a,
.shop-page .shop-body nav.woocommerce-pagination ul li span {
  display: block;
  min-width: 40px;
  padding: 10px 12px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  color: #535C78;
  text-decoration: none;
  background: #ffffff;
  border: 1px solid #DADDEA;
  border-radius: 10px;
}
.shop-page .shop-body nav.woocommerce-pagination ul li a:hover,
.shop-page .shop-body nav.woocommerce-pagination ul li a:focus {
  color: #161C30;
  background: #ECEEF7;
}
.shop-page .shop-body nav.woocommerce-pagination ul li span.current {
  color: #ffffff;
  background: #161C30;
  border-color: #161C30;
}
.shop-page .woocommerce-info,
.shop-page .woocommerce-no-products-found {
  margin-top: 24px;
}

/*
 * The site.
 *
 *   npx sass --watch --no-source-map --style=expanded src/scss/site.scss:site.css
 *
 * Compiles to /site.css, which includes/enqueue.php loads on every page.
 *
 * One sheet rather than one per template. Every rule below is named down to a
 * class that only exists where it belongs - .bay-customizer, .product-hero,
 * .site-header - so a page carries the rules for parts it does not have, and
 * nothing else. The two that could not be written that way, the customizer's
 * full height frame and the body it stops scrolling, are named down to the
 * template instead.
 *
 * Colours, breakpoints and the typeset mixin are in shared/_vars.scss, which
 * emits nothing itself. Sizes and spacing are written where they are used.
 */
/*
 * The cart.
 *
 * Laid out to the design, in the site's own colours and faces: the mockup's
 * greens and greys are close enough to ours to read as the same page, and
 * where they differ ours win.
 */
.cart-page {
  font-family: "Hanken Grotesk", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.45;
  color: #161C30;
}
.cart-page *,
.cart-page *::before,
.cart-page *::after {
  box-sizing: border-box;
}
.cart-page h1, .cart-page h2, .cart-page h3, .cart-page h4, .cart-page p, .cart-page ol, .cart-page ul, .cart-page dl, .cart-page dd, .cart-page figure {
  margin: 0;
  padding: 0;
}
.cart-page ol, .cart-page ul {
  list-style: none;
}
.cart-page a {
  color: inherit;
}
.cart-page button:not(:where(.bay-button)) {
  font-family: "Hanken Grotesk", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.cart-page input,
.cart-page textarea,
.cart-page select {
  font-family: "Hanken Grotesk", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: inherit;
  color: inherit;
}
.cart-page {
  font-size: 15px;
  background: #ffffff;
}
.cart-page .inner {
  max-width: 1440px;
  margin: 0 auto;
}
.cart-page .cart-hero {
  padding: 74px 60px 44px;
  background: #ECEEF7;
}
@media (max-width: 767px) {
  .cart-page .cart-hero {
    padding: 40px 24px 36px;
  }
}
.cart-page .cart-body {
  padding: 44px 60px 84px;
}
@media (max-width: 767px) {
  .cart-page .cart-body {
    padding: 28px 24px 48px;
  }
}
.cart-page .eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #535C78;
}
.cart-page .eyebrow::before {
  content: "";
  width: 8px;
  height: 8px;
  background: #8FD123;
  border-radius: 50%;
}
.cart-page h1 {
  max-width: 18ch;
  font-family: "Schibsted Grotesk", "Hanken Grotesk", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: clamp(2.3rem, 5.8vw, 4rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.cart-page h1 em {
  font-style: italic;
  font-weight: 700;
  color: #3E4576;
}
.cart-page .cart-grid {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 44px;
  align-items: start;
}
@media (max-width: 1024px) {
  .cart-page .cart-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 767px) {
  .cart-page .cart-grid {
    gap: 26px;
  }
}
.cart-page .cart-head,
.cart-page .cart-row {
  display: grid;
  grid-template-columns: 1fr 138px 92px 34px;
  gap: 16px;
  align-items: center;
}
.cart-page .cart-head {
  padding-bottom: 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #535C78;
  border-bottom: 2px solid #161C30;
}
.cart-page .cart-row:not(.cart-head) {
  padding: 18px 0;
  border-bottom: 1px solid #DADDEA;
}
.cart-page .ci {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.cart-page .ci strong {
  font-weight: 700;
}
.cart-page .ci .item-title {
  font-size: 16px;
}
.cart-page .ci a {
  color: inherit;
  text-decoration: none;
}
.cart-page {
  /*
   * What was chosen, a row per answer - the same shape the order review shows
   * while the customer is paying, and the same again on the finished order.
   *
   * It used to run together on one line with separators drawn between its
   * parts, on the grounds that stacked it would stand taller than the item it
   * describes. It does stand taller. But four locations in a row of prose wrap
   * into a paragraph that has to be read rather than scanned, and what a
   * customer is doing here is checking that each side says what they asked
   * for.
   */
}
.cart-page .cm {
  display: block;
  font-size: 13px;
  color: #535C78;
}
.cart-page .cm dl {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 2px 8px;
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: #6B7390;
}
.cart-page .cm dl dt {
  display: block;
  float: none;
  clear: none;
  margin: 0;
  font-weight: 600;
}
.cart-page .cm dl dd {
  margin: 0;
}
.cart-page .cm dl dd::after {
  content: none;
}
.cart-page .cm dl dd p {
  margin: 0;
}
.cart-page .cm .cm-each {
  display: block;
  margin-top: 6px;
}
.cart-page .ci-edit {
  width: fit-content;
  margin-top: 4px;
  padding-bottom: 1px;
  font-size: 13px;
  font-weight: 700;
  color: #161C30;
  border-bottom: 2px solid #8FD123;
}
.cart-page .ci-edit:hover {
  color: #3E4576;
  border-color: #3E4576;
}
.cart-page .quantity {
  display: flex;
  align-items: stretch;
  width: fit-content;
  overflow: hidden;
  background: #ffffff;
  border: 1.5px solid #DADDEA;
  border-radius: 99px;
}
.cart-page .quantity-step {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 34px;
  height: 36px;
  font-size: 15px;
  color: #161C30;
  background: none;
  border: 0;
  cursor: pointer;
}
.cart-page .quantity-step:hover {
  background: #ECEEF7;
}
.cart-page .quantity input.qty {
  width: 48px;
  font-family: "Hanken Grotesk", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  color: #161C30;
  background: none;
  border: 0;
  outline: none;
  appearance: textfield;
}
.cart-page .quantity input.qty::-webkit-outer-spin-button, .cart-page .quantity input.qty::-webkit-inner-spin-button {
  margin: 0;
  appearance: none;
}
.cart-page .lt {
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
}
.cart-page .lt .amount {
  font-size: 16px;
}
.cart-page .rm.remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  font-size: 16px;
  line-height: 1;
  color: #535C78 !important;
  text-decoration: none;
  background: #ffffff;
  border: 1.5px solid #DADDEA;
  border-radius: 50%;
  cursor: pointer;
}
.cart-page .rm.remove:hover {
  color: #161C30 !important;
  background: #ffffff;
  border-color: #161C30;
}
.cart-page .cart-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
}
.cart-page .cart-update {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
}
.cart-page .coupon {
  display: flex;
  gap: 8px;
}
.cart-page .coupon .input-text {
  width: 160px;
  height: 40px;
  padding: 0 14px;
  font-family: "Hanken Grotesk", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #161C30;
  background: #ECEEF7;
  border: 1px solid #DADDEA;
  border-radius: 99px;
}
.cart-page .coupon .coupon-apply {
  height: 40px;
  padding: 0 18px;
  font-family: "Hanken Grotesk", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #161C30;
  background: none;
  border: 1.5px solid #DADDEA;
  border-radius: 99px;
  cursor: pointer;
}
.cart-page .coupon .coupon-apply:hover {
  border-color: #161C30;
}
.cart-page .cart-cont {
  display: inline-block;
  margin-top: 20px;
  font-weight: 600;
  color: #161C30;
  text-decoration: none;
  font-size: 16px;
}
.cart-page .cart-cont:hover {
  color: #3E4576;
}
.cart-page.is-saving .cart-items {
  opacity: 0.55;
  pointer-events: none;
}
.cart-page .cart-collaterals .cart_totals.co-card {
  float: none;
  width: auto;
}
.cart-page .co-card {
  padding: 24px;
  background: #ffffff;
  border: 1px solid #DADDEA;
  border-radius: 16px;
  box-shadow: 0 10px 28px -20px rgba(22, 28, 48, 0.25);
}
@media (max-width: 767px) {
  .cart-page .co-card {
    padding: 20px 18px;
  }
}
.cart-page .co-h {
  margin-bottom: 16px;
  font-family: "Schibsted Grotesk", "Hanken Grotesk", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.cart-page .co-line {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 0;
  font-size: 15px;
  border-bottom: 1px solid #DADDEA;
}
.cart-page .co-line > span:last-child,
.cart-page .co-line .amount {
  font-weight: 600;
  white-space: nowrap;
}
.cart-page .co-line ul {
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: right;
}
.cart-page .co-soft {
  font-weight: 500;
  color: #535C78;
}
.cart-page .co-tot {
  padding-top: 14px;
  font-size: 17px;
  font-weight: 800;
  border-bottom: 0;
}
.cart-page .co-tot > span:last-child,
.cart-page .co-tot .amount {
  font-weight: 800;
}
.cart-page .wc-proceed-to-checkout {
  margin-top: 14px;
  padding: 0;
}
.cart-page .wc-proceed-to-checkout a.bay-button.checkout-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 13px 30px;
  font-family: "Inter", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #161C30;
  text-decoration: none;
  background: #8FD123;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: 0.3s ease-in filter;
  text-align: center;
}
@media (max-width: 767px) {
  .cart-page .wc-proceed-to-checkout a.bay-button.checkout-button {
    padding: 11px 20px;
    font-size: 14px;
  }
}
.cart-page .wc-proceed-to-checkout a.bay-button.checkout-button .glyph {
  font-size: 16px;
}
.cart-page .wc-proceed-to-checkout a.bay-button.checkout-button:hover {
  filter: brightness(0.95);
}
.cart-page .wc-proceed-to-checkout a.bay-button.checkout-button {
  /*
   * Nothing to press.
   *
   * Every button drawn from this mixin gets it, because a green pill that
   * refuses the click while looking exactly like the one beside it that works
   * is worse than one that never invited the press. The hover goes with it -
   * a button that still lights up under the pointer is still inviting.
   *
   * The attribute as well as the state, for the places where the control is a
   * link and cannot carry `disabled` at all.
   */
}
.cart-page .wc-proceed-to-checkout a.bay-button.checkout-button:disabled, .cart-page .wc-proceed-to-checkout a.bay-button.checkout-button[aria-disabled=true] {
  opacity: 0.45;
  cursor: default;
}
.cart-page .wc-proceed-to-checkout a.bay-button.checkout-button:disabled:hover, .cart-page .wc-proceed-to-checkout a.bay-button.checkout-button[aria-disabled=true]:hover {
  filter: none;
}
.cart-page .wc-proceed-to-checkout a.bay-button.checkout-button {
  display: flex;
  width: 100%;
  line-height: 1.2;
  margin-bottom: 0;
}
.cart-page .wc-proceed-to-checkout a.bay-button.checkout-button:hover {
  background: #8FD123;
  filter: brightness(0.95);
}
.cart-page .cart-empty-notice {
  margin: 20px 0;
  color: #535C78;
}
@media (max-width: 767px) {
  .cart-page .cart-head {
    display: none;
  }
  .cart-page .cart-row {
    position: relative;
    grid-template-columns: auto 1fr;
    padding-right: 42px;
  }
  .cart-page .ci {
    grid-column: 1/-1;
  }
  .cart-page .lt {
    align-self: center;
    text-align: left;
  }
  .cart-page .rm {
    position: absolute;
    top: 10px;
    right: 0;
  }
}

/*
 * The site.
 *
 *   npx sass --watch --no-source-map --style=expanded src/scss/site.scss:site.css
 *
 * Compiles to /site.css, which includes/enqueue.php loads on every page.
 *
 * One sheet rather than one per template. Every rule below is named down to a
 * class that only exists where it belongs - .bay-customizer, .product-hero,
 * .site-header - so a page carries the rules for parts it does not have, and
 * nothing else. The two that could not be written that way, the customizer's
 * full height frame and the body it stops scrolling, are named down to the
 * template instead.
 *
 * Colours, breakpoints and the typeset mixin are in shared/_vars.scss, which
 * emits nothing itself. Sizes and spacing are written where they are used.
 */
/*
 * The checkout.
 *
 * The fields are WooCommerce's own - it writes them, validates them and knows
 * which are required - so nothing here changes their markup. What changes is
 * the frame around them: one column of fields with the order beside it, rather
 * than billing and shipping side by side with the order underneath.
 *
 * Several of these rules carry more weight than they look like they need.
 * WooCommerce dresses its own form with selectors that have elements in them,
 * and a plain class loses to those however the sheets happen to load.
 */
.checkout-page {
  font-family: "Hanken Grotesk", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.45;
  color: #161C30;
}
.checkout-page *,
.checkout-page *::before,
.checkout-page *::after {
  box-sizing: border-box;
}
.checkout-page h1, .checkout-page h2, .checkout-page h3, .checkout-page h4, .checkout-page p, .checkout-page ol, .checkout-page ul, .checkout-page dl, .checkout-page dd, .checkout-page figure {
  margin: 0;
  padding: 0;
}
.checkout-page ol, .checkout-page ul {
  list-style: none;
}
.checkout-page a {
  color: inherit;
}
.checkout-page button:not(:where(.bay-button)) {
  font-family: "Hanken Grotesk", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.checkout-page input,
.checkout-page textarea,
.checkout-page select {
  font-family: "Hanken Grotesk", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: inherit;
  color: inherit;
}
.checkout-page {
  font-size: 15px;
  background: #ffffff;
}
.checkout-page .inner {
  max-width: 1440px;
  margin: 0 auto;
}
.checkout-page .checkout-hero {
  padding: 74px 60px 64px;
  background: #ECEEF7;
}
@media (max-width: 767px) {
  .checkout-page .checkout-hero {
    padding: 40px 24px 36px;
  }
}
.checkout-page .checkout-body {
  padding: 44px 60px 84px;
}
@media (max-width: 767px) {
  .checkout-page .checkout-body {
    padding: 28px 24px 48px;
  }
}
.checkout-page .eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #535C78;
}
.checkout-page .eyebrow::before {
  content: "";
  width: 8px;
  height: 8px;
  background: #8FD123;
  border-radius: 50%;
}
.checkout-page h1 {
  font-family: "Schibsted Grotesk", "Hanken Grotesk", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: clamp(2.3rem, 5.8vw, 4rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.checkout-page h1 em {
  font-style: italic;
  font-weight: 700;
  color: #3E4576;
}
.checkout-page .co-grid {
  display: grid;
  grid-template-columns: 1.12fr 0.88fr;
  gap: 44px;
  align-items: start;
}
@media (max-width: 1024px) {
  .checkout-page .co-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 26px;
  }
}
.checkout-page #customer_details,
.checkout-page #customer_details .col-1,
.checkout-page #customer_details .col-2 {
  width: auto;
  float: none;
}
.checkout-page h3 {
  margin-bottom: 16px;
  font-family: "Schibsted Grotesk", "Hanken Grotesk", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.checkout-page .col-2 h3 {
  margin-top: 28px;
}
.checkout-page .col-2 .form-row.notes {
  padding: 0;
  margin: 0;
}
.checkout-page .col-2 .form-row.notes label {
  font-size: 11px;
  color: #535C78;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 7px;
  font-weight: 600;
}
.checkout-page .col-2 .form-row.notes textarea {
  min-height: 100px;
  padding: 13px 15px;
  border: 1px solid #DADDEA;
  border-radius: 10px;
  color: #161C30;
}
.checkout-page .col-2 .form-row.notes textarea::placeholder {
  color: #535C78;
}
.checkout-page form.checkout_coupon.woocommerce-form-coupon {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 0 24px;
  padding: 20px;
  background: #ffffff;
  border: 1px solid #DADDEA;
  border-radius: 16px;
}
@media (max-width: 767px) {
  .checkout-page form.checkout_coupon.woocommerce-form-coupon {
    padding: 16px;
  }
}
.checkout-page form.checkout_coupon.woocommerce-form-coupon .form-row {
  width: auto;
  float: none;
  margin: 0;
  padding: 0;
}
.checkout-page form.checkout_coupon.woocommerce-form-coupon .form-row::before, .checkout-page form.checkout_coupon.woocommerce-form-coupon .form-row::after {
  content: none;
}
.checkout-page form.checkout_coupon.woocommerce-form-coupon .form-row-first {
  flex: 1 1 240px;
  min-width: 0;
}
.checkout-page form.checkout_coupon.woocommerce-form-coupon .form-row-last {
  flex: 0 0 auto;
}
@media (max-width: 767px) {
  .checkout-page form.checkout_coupon.woocommerce-form-coupon .form-row-last {
    flex: 1 1 100%;
  }
}
.checkout-page form.checkout_coupon.woocommerce-form-coupon .clear {
  display: none;
}
.checkout-page form.checkout_coupon.woocommerce-form-coupon input.input-text {
  width: 100%;
  padding: 13px 15px;
  font-family: "Hanken Grotesk", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.4;
  color: #161C30;
  background: #ffffff;
  border: 1px solid #DADDEA;
  border-radius: 10px;
  box-shadow: none;
}
.checkout-page form.checkout_coupon.woocommerce-form-coupon input.input-text:focus {
  outline: none;
  border-color: #adb4ea;
  box-shadow: 0 0 0 3px rgba(62, 69, 118, 0.12);
}
.checkout-page form.checkout_coupon.woocommerce-form-coupon input.input-text::placeholder {
  color: #cdd1d4;
}
.checkout-page form.checkout_coupon.woocommerce-form-coupon button.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 13px 30px;
  font-family: "Inter", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #161C30;
  text-decoration: none;
  background: #8FD123;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: 0.3s ease-in filter;
  text-align: center;
}
@media (max-width: 767px) {
  .checkout-page form.checkout_coupon.woocommerce-form-coupon button.button {
    padding: 11px 20px;
    font-size: 14px;
  }
}
.checkout-page form.checkout_coupon.woocommerce-form-coupon button.button .glyph {
  font-size: 16px;
}
.checkout-page form.checkout_coupon.woocommerce-form-coupon button.button:hover {
  filter: brightness(0.95);
}
.checkout-page form.checkout_coupon.woocommerce-form-coupon button.button {
  /*
   * Nothing to press.
   *
   * Every button drawn from this mixin gets it, because a green pill that
   * refuses the click while looking exactly like the one beside it that works
   * is worse than one that never invited the press. The hover goes with it -
   * a button that still lights up under the pointer is still inviting.
   *
   * The attribute as well as the state, for the places where the control is a
   * link and cannot carry `disabled` at all.
   */
}
.checkout-page form.checkout_coupon.woocommerce-form-coupon button.button:disabled, .checkout-page form.checkout_coupon.woocommerce-form-coupon button.button[aria-disabled=true] {
  opacity: 0.45;
  cursor: default;
}
.checkout-page form.checkout_coupon.woocommerce-form-coupon button.button:disabled:hover, .checkout-page form.checkout_coupon.woocommerce-form-coupon button.button[aria-disabled=true]:hover {
  filter: none;
}
.checkout-page form.checkout_coupon.woocommerce-form-coupon button.button {
  float: none;
}
@media (max-width: 767px) {
  .checkout-page form.checkout_coupon.woocommerce-form-coupon button.button {
    width: 100%;
  }
}
.checkout-page form.checkout_coupon.woocommerce-form-coupon button.button:hover {
  color: #161C30;
  background: #8FD123;
  filter: brightness(0.95);
}
.checkout-page .woocommerce-additional-fields > h3 {
  display: none;
}
.checkout-page .woocommerce-billing-fields__field-wrapper,
.checkout-page .woocommerce-shipping-fields__field-wrapper,
.checkout-page .woocommerce-additional-fields__field-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 16px;
}
@media (max-width: 767px) {
  .checkout-page .woocommerce-billing-fields__field-wrapper,
  .checkout-page .woocommerce-shipping-fields__field-wrapper,
  .checkout-page .woocommerce-additional-fields__field-wrapper {
    grid-template-columns: minmax(0, 1fr);
  }
}
.checkout-page .woocommerce-additional-fields__field-wrapper {
  grid-template-columns: 1fr;
}
.checkout-page .co-main .form-row,
.checkout-page #payment .form-row {
  width: auto;
  float: none;
}
.checkout-page .woocommerce-input-wrapper {
  display: block;
}
.checkout-page .woocommerce-billing-fields .form-row {
  margin: 0 0 16px;
  padding: 0;
  grid-column: 1/-1;
}
.checkout-page .woocommerce-billing-fields .form-row > label {
  display: block;
  margin-bottom: 7px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #535C78;
}
.checkout-page .woocommerce-billing-fields .form-row .required {
  color: #535C78;
  text-decoration: none;
  border: 0;
}
.checkout-page .form-row input.input-text,
.checkout-page .form-row textarea,
.checkout-page .form-row select {
  width: 100%;
  padding: 13px 15px;
  font-family: "Hanken Grotesk", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.4;
  color: #161C30;
  background: #ffffff;
  border: 1px solid #DADDEA;
  border-radius: 10px;
  box-shadow: none;
}
.checkout-page .form-row input.input-text:focus,
.checkout-page .form-row textarea:focus,
.checkout-page .form-row select:focus {
  outline: none;
  border-color: #adb4ea;
  box-shadow: 0 0 0 3px rgba(62, 69, 118, 0.12);
}
.checkout-page .form-row input.input-text::placeholder,
.checkout-page .form-row textarea::placeholder,
.checkout-page .form-row select::placeholder {
  color: #cdd1d4;
}
.checkout-page .form-row textarea {
  min-height: 100px;
  resize: vertical;
}
.checkout-page #ship-to-different-address {
  margin: 10px 0 16px;
}
.checkout-page #ship-to-different-address label {
  display: flex;
  gap: 10px;
  align-items: center;
  font-family: "Schibsted Grotesk", "Hanken Grotesk", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
}
.checkout-page #ship-to-different-address input {
  width: 18px;
  height: 18px;
  accent-color: #3E4576;
}
.checkout-page .co-side {
  display: grid;
  gap: 16px;
}
.checkout-page .co-card {
  padding: 24px;
  background: #ffffff;
  border: 1px solid #DADDEA;
  border-radius: 16px;
  box-shadow: 0 10px 28px -20px rgba(22, 28, 48, 0.25);
}
@media (max-width: 767px) {
  .checkout-page .co-card {
    padding: 20px 18px;
  }
}
.checkout-page .co-h {
  margin-bottom: 16px;
  font-family: "Schibsted Grotesk", "Hanken Grotesk", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.checkout-page .co-order table.shop_table {
  width: 100%;
  margin: 0;
  border: 0;
  border-radius: 0;
  border-collapse: collapse;
}
.checkout-page .co-order table.shop_table thead {
  display: none;
}
.checkout-page .co-order table.shop_table tr {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid #DADDEA;
}
.checkout-page .co-order table.shop_table th,
.checkout-page .co-order table.shop_table td {
  padding: 0;
  font-weight: 400;
  text-align: left;
  border: 0;
}
.checkout-page .co-order table.shop_table td:last-child,
.checkout-page .co-order table.shop_table .amount {
  font-weight: 600;
  text-align: right;
  white-space: nowrap;
}
.checkout-page .co-order table.shop_table td.product-name dl.variation {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 2px 8px;
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: #6B7390;
}
.checkout-page .co-order table.shop_table td.product-name dl.variation dt {
  display: block;
  float: none;
  clear: none;
  margin: 0;
  font-weight: 600;
}
.checkout-page .co-order table.shop_table td.product-name dl.variation dd {
  margin: 0;
}
.checkout-page .co-order table.shop_table td.product-name dl.variation dd::after {
  content: none;
}
.checkout-page .co-order table.shop_table td.product-name dl.variation dd p {
  margin: 0;
}
.checkout-page .co-order table.shop_table .product-quantity {
  font-weight: 400;
}
.checkout-page .co-order table.shop_table .order-total {
  padding-top: 14px;
  font-size: 17px;
  font-weight: 800;
  border-bottom: 0;
}
.checkout-page .co-order table.shop_table .order-total td,
.checkout-page .co-order table.shop_table .order-total .amount {
  font-weight: 800;
}
.checkout-page .co-order table.shop_table #shipping_method {
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: right;
}
.checkout-page .co-order table.shop_table #shipping_method li {
  padding: 3px 0;
}
.checkout-page .co-order table.shop_table #shipping_method label {
  font-size: 14px;
}
.checkout-page .co-order table.shop_table #shipping_method input {
  accent-color: #3E4576;
}
.checkout-page .co-payment #payment {
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
}
.checkout-page .co-payment #payment ul.payment_methods {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
}
.checkout-page .co-payment #payment ul.payment_methods li.wc_payment_method {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0 10px;
  margin-bottom: 10px;
  padding: 14px 16px;
  line-height: 1.45;
  border: 1px solid #DADDEA;
  border-radius: 12px;
}
.checkout-page .co-payment #payment ul.payment_methods li.wc_payment_method:last-child {
  margin-bottom: 0;
}
.checkout-page .co-payment #payment ul.payment_methods li.wc_payment_method::before, .checkout-page .co-payment #payment ul.payment_methods li.wc_payment_method::after {
  content: none;
}
.checkout-page .co-payment #payment ul.payment_methods li.wc_payment_method > input[type=radio] {
  width: 17px;
  height: 17px;
  margin: 0;
  accent-color: #3E4576;
}
.checkout-page .co-payment #payment ul.payment_methods li.wc_payment_method > label {
  margin: 0;
  font-weight: 700;
  color: #161C30;
  cursor: pointer;
  font-size: 16px;
}
.checkout-page .co-payment #payment ul.payment_methods li.wc_payment_method > .payment_box {
  grid-column: 1/-1;
  margin: 12px 0 0;
  padding: 0;
  font-size: 14px;
  color: #535C78;
  background: none;
}
.checkout-page .co-payment #payment ul.payment_methods li.wc_payment_method > .payment_box::before {
  content: none;
}
.checkout-page .co-payment #payment ul.payment_methods li.wc_payment_method > .payment_box p:last-child {
  margin-bottom: 0;
}
.checkout-page .co-payment #payment .woocommerce-privacy-policy-text {
  font-size: 13px;
  line-height: 1.5;
  color: #535C78;
}
.checkout-page .co-payment #payment .form-row.place-order {
  margin: 12px 0 0;
  padding: 0;
}
.checkout-page .co-payment #payment #place_order {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 13px 30px;
  font-family: "Inter", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #161C30;
  text-decoration: none;
  background: #8FD123;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: 0.3s ease-in filter;
  text-align: center;
}
@media (max-width: 767px) {
  .checkout-page .co-payment #payment #place_order {
    padding: 11px 20px;
    font-size: 14px;
  }
}
.checkout-page .co-payment #payment #place_order .glyph {
  font-size: 16px;
}
.checkout-page .co-payment #payment #place_order:hover {
  filter: brightness(0.95);
}
.checkout-page .co-payment #payment #place_order {
  /*
   * Nothing to press.
   *
   * Every button drawn from this mixin gets it, because a green pill that
   * refuses the click while looking exactly like the one beside it that works
   * is worse than one that never invited the press. The hover goes with it -
   * a button that still lights up under the pointer is still inviting.
   *
   * The attribute as well as the state, for the places where the control is a
   * link and cannot carry `disabled` at all.
   */
}
.checkout-page .co-payment #payment #place_order:disabled, .checkout-page .co-payment #payment #place_order[aria-disabled=true] {
  opacity: 0.45;
  cursor: default;
}
.checkout-page .co-payment #payment #place_order:disabled:hover, .checkout-page .co-payment #payment #place_order[aria-disabled=true]:hover {
  filter: none;
}
.checkout-page .co-payment #payment #place_order {
  display: flex;
  width: 100%;
  float: none;
  line-height: 1.2;
}
.checkout-page .co-payment #payment #place_order:hover {
  background: #8FD123;
  filter: brightness(0.95);
}
.checkout-page .woocommerce-terms-and-conditions-wrapper {
  margin-bottom: 14px;
  font-size: 13px;
  line-height: 1.5;
  color: #535C78;
}
.checkout-page .woocommerce-terms-and-conditions-wrapper a {
  color: #161C30;
}

/*
 * The site.
 *
 *   npx sass --watch --no-source-map --style=expanded src/scss/site.scss:site.css
 *
 * Compiles to /site.css, which includes/enqueue.php loads on every page.
 *
 * One sheet rather than one per template. Every rule below is named down to a
 * class that only exists where it belongs - .bay-customizer, .product-hero,
 * .site-header - so a page carries the rules for parts it does not have, and
 * nothing else. The two that could not be written that way, the customizer's
 * full height frame and the body it stops scrolling, are named down to the
 * template instead.
 *
 * Colours, breakpoints and the typeset mixin are in shared/_vars.scss, which
 * emits nothing itself. Sizes and spacing are written where they are used.
 */
/*
 * The account, and the order once it has been placed.
 *
 * Everything behind /my-account/ - the dashboard, the orders, the addresses,
 * the account details and the login form - comes out of one shortcode. So this
 * is a frame around WooCommerce's own output rather than a replacement for it:
 * no template is overridden, nothing is unhooked, and every field, link and
 * button the plugin prints is still printed.
 *
 * The order received page is named alongside it because it is the same markup.
 * An order's lines, its totals and the addresses it is going to are drawn by
 * the same templates whether they are read back under the account or handed
 * over the moment the order is placed, and dressing them twice is how the two
 * drift apart. What only exists on one page or the other - the account's menu,
 * the received page's overview list - is in that page's own rules, and the
 * selectors here that have nothing to match simply match nothing.
 *
 * Most rules name .woocommerce as well as the part they dress. That div is the
 * shortcode's own wrapper, and naming it is what carries these past
 * WooCommerce's own rules, which are two classes deep and would otherwise tie
 * and be settled by whichever sheet happened to load second.
 */
.account-page,
.order-page {
  font-family: "Hanken Grotesk", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.45;
  color: #161C30;
}
.account-page *,
.account-page *::before,
.account-page *::after,
.order-page *,
.order-page *::before,
.order-page *::after {
  box-sizing: border-box;
}
.account-page h1, .account-page h2, .account-page h3, .account-page h4, .account-page p, .account-page ol, .account-page ul, .account-page dl, .account-page dd, .account-page figure,
.order-page h1,
.order-page h2,
.order-page h3,
.order-page h4,
.order-page p,
.order-page ol,
.order-page ul,
.order-page dl,
.order-page dd,
.order-page figure {
  margin: 0;
  padding: 0;
}
.account-page ol, .account-page ul,
.order-page ol,
.order-page ul {
  list-style: none;
}
.account-page a,
.order-page a {
  color: inherit;
}
.account-page button:not(:where(.bay-button)),
.order-page button:not(:where(.bay-button)) {
  font-family: "Hanken Grotesk", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.account-page input,
.account-page textarea,
.account-page select,
.order-page input,
.order-page textarea,
.order-page select {
  font-family: "Hanken Grotesk", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: inherit;
  color: inherit;
}
.account-page,
.order-page {
  font-size: 15px;
  background: #ffffff;
}
.account-page .inner,
.order-page .inner {
  max-width: 1440px;
  margin: 0 auto;
}
.account-page .account-hero,
.order-page .account-hero {
  padding: 74px 60px 64px;
  background: #ECEEF7;
}
@media (max-width: 767px) {
  .account-page .account-hero,
  .order-page .account-hero {
    padding: 40px 24px 36px;
  }
}
.account-page .account-body,
.order-page .account-body {
  padding: 44px 60px 80px;
}
@media (max-width: 767px) {
  .account-page .account-body,
  .order-page .account-body {
    padding: 28px 24px 48px;
  }
}
.account-page .eyebrow,
.order-page .eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #535C78;
}
.account-page .eyebrow::before,
.order-page .eyebrow::before {
  content: "";
  width: 8px;
  height: 8px;
  background: #8FD123;
  border-radius: 50%;
}
.account-page h1,
.order-page h1 {
  font-family: "Schibsted Grotesk", "Hanken Grotesk", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: clamp(2.3rem, 5.8vw, 4rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.account-page h1 em,
.order-page h1 em {
  font-style: italic;
  font-weight: 700;
  color: #3E4576;
}
.account-page .woocommerce:has(.woocommerce-MyAccount-navigation),
.order-page .woocommerce:has(.woocommerce-MyAccount-navigation) {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 44px;
  align-items: start;
}
.account-page .woocommerce:has(.woocommerce-MyAccount-navigation)::before, .account-page .woocommerce:has(.woocommerce-MyAccount-navigation)::after,
.order-page .woocommerce:has(.woocommerce-MyAccount-navigation)::before,
.order-page .woocommerce:has(.woocommerce-MyAccount-navigation)::after {
  content: none;
}
@media (max-width: 1024px) {
  .account-page .woocommerce:has(.woocommerce-MyAccount-navigation),
  .order-page .woocommerce:has(.woocommerce-MyAccount-navigation) {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }
}
.account-page .woocommerce .woocommerce-MyAccount-navigation,
.account-page .woocommerce .woocommerce-MyAccount-content,
.order-page .woocommerce .woocommerce-MyAccount-navigation,
.order-page .woocommerce .woocommerce-MyAccount-content {
  width: auto;
  float: none;
  min-width: 0;
}
.account-page .woocommerce-MyAccount-navigation,
.order-page .woocommerce-MyAccount-navigation {
  padding: 24px;
  background: #ECEEF7;
  border-radius: 14px;
}
.account-page .woocommerce-MyAccount-navigation li + li,
.order-page .woocommerce-MyAccount-navigation li + li {
  margin-top: 2px;
}
.account-page .woocommerce-MyAccount-navigation a,
.order-page .woocommerce-MyAccount-navigation a {
  display: block;
  padding: 10px 12px;
  font-weight: 600;
  color: #535C78;
  text-decoration: none;
  border-radius: 9px;
}
.account-page .woocommerce-MyAccount-navigation a:hover,
.order-page .woocommerce-MyAccount-navigation a:hover {
  color: #161C30;
  background: rgba(255, 255, 255, 0.6);
}
.account-page .woocommerce-MyAccount-navigation .is-active a,
.order-page .woocommerce-MyAccount-navigation .is-active a {
  color: #161C30;
  background: #ffffff;
}
.account-page .woocommerce-MyAccount-content h2,
.account-page .woocommerce-MyAccount-content h3,
.account-page .woocommerce-MyAccount-content legend,
.order-page .woocommerce-MyAccount-content h2,
.order-page .woocommerce-MyAccount-content h3,
.order-page .woocommerce-MyAccount-content legend {
  font-family: "Schibsted Grotesk", "Hanken Grotesk", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.account-page .woocommerce-MyAccount-content > p,
.order-page .woocommerce-MyAccount-content > p {
  margin-bottom: 14px;
  line-height: 1.6;
  color: #535C78;
}
.account-page .woocommerce-MyAccount-content a,
.order-page .woocommerce-MyAccount-content a {
  color: #161C30;
}
.account-page .woocommerce-MyAccount-content mark,
.order-page .woocommerce-MyAccount-content mark {
  color: #161C30;
  font-weight: 700;
  background: none;
}
.account-page .woocommerce table.shop_table,
.order-page .woocommerce table.shop_table {
  width: 100%;
  margin: 0 0 24px;
  font-size: 14px;
  border: 0;
  border-radius: 0;
  border-collapse: collapse;
  margin-bottom: 0;
  /*
   * The cell rules below name a child rather than a descendant, all of them.
   *
   * A customized line is a table of its own inside the product's cell, and a
   * descendant selector reaches straight into it - so every location picked
   * up this table's padding and its rule underneath, which on a phone, where
   * that inner table stacks, drew a line under each part of every location.
   *
   * The chain has to be children the whole way. `table.shop_table tbody > tr
   * > td` still reaches them, because tbody only has to be somewhere inside
   * the shop_table, and the inner table's own tbody is.
   */
}
.account-page .woocommerce table.shop_table > thead > tr > th,
.order-page .woocommerce table.shop_table > thead > tr > th {
  padding: 12px 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: left;
  color: #535C78;
  border: 0;
  border-bottom: 1px solid #DADDEA;
}
.account-page .woocommerce table.shop_table > thead > tr > th.product-total,
.order-page .woocommerce table.shop_table > thead > tr > th.product-total {
  text-align: right;
}
.account-page .woocommerce table.shop_table > tbody > tr > th,
.account-page .woocommerce table.shop_table > tbody > tr > td,
.account-page .woocommerce table.shop_table > tfoot > tr > th,
.account-page .woocommerce table.shop_table > tfoot > tr > td,
.order-page .woocommerce table.shop_table > tbody > tr > th,
.order-page .woocommerce table.shop_table > tbody > tr > td,
.order-page .woocommerce table.shop_table > tfoot > tr > th,
.order-page .woocommerce table.shop_table > tfoot > tr > td {
  padding: 16px 10px;
  font-weight: 400;
  text-align: left;
  vertical-align: middle;
  border: 0;
  border-bottom: 1px solid #DADDEA;
}
.account-page .woocommerce table.shop_table tbody .wc-item-meta.bay-lines,
.order-page .woocommerce table.shop_table tbody .wc-item-meta.bay-lines {
  padding-left: 20px;
}
@media (max-width: 767px) {
  .account-page .woocommerce table.shop_table tbody .wc-item-meta.bay-lines,
  .order-page .woocommerce table.shop_table tbody .wc-item-meta.bay-lines {
    padding-left: 10px;
  }
}
.account-page .woocommerce table.shop_table .woocommerce-orders-table__cell-order-number a,
.order-page .woocommerce table.shop_table .woocommerce-orders-table__cell-order-number a {
  font-weight: 600;
  text-decoration: none;
}
.account-page .woocommerce table.shop_table td.product-total,
.account-page .woocommerce table.shop_table tfoot td,
.order-page .woocommerce table.shop_table td.product-total,
.order-page .woocommerce table.shop_table tfoot td {
  font-weight: 600;
  text-align: right;
  white-space: nowrap;
  vertical-align: baseline;
}
.account-page .woocommerce table.shop_table tfoot tr:last-child th,
.account-page .woocommerce table.shop_table tfoot tr:last-child td,
.order-page .woocommerce table.shop_table tfoot tr:last-child th,
.order-page .woocommerce table.shop_table tfoot tr:last-child td {
  border-bottom: 0;
}
.account-page .woocommerce table.shop_table td.product-name > a,
.order-page .woocommerce table.shop_table td.product-name > a {
  font-weight: 600;
  text-decoration: none;
}
.account-page .woocommerce table.shop_table .product-quantity,
.order-page .woocommerce table.shop_table .product-quantity {
  font-weight: 400;
  color: #535C78;
}
.account-page .woocommerce table.shop_table,
.order-page .woocommerce table.shop_table {
  /*
   * A customized line is drawn by _order-lines.scss, which needs its items to
   * be boxes - the grid below dissolves them with display: contents, so a
   * padding or a rule on one does nothing at all.
   *
   * Excluded rather than out-argued: this is five selectors deep and nothing
   * a component could reasonably be named would beat it, while a rule that
   * does not match needs no weight.
   */
}
.account-page .woocommerce table.shop_table td.product-name .wc-item-meta:not(.bay-lines),
.account-page .woocommerce table.shop_table td.product-name dl.variation,
.order-page .woocommerce table.shop_table td.product-name .wc-item-meta:not(.bay-lines),
.order-page .woocommerce table.shop_table td.product-name dl.variation {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 8px;
  margin: 8px 0 0;
  padding: 0;
  font-size: 13px;
  line-height: 1.45;
  color: #535C78;
  list-style: none;
}
.account-page .woocommerce table.shop_table td.product-name .wc-item-meta:not(.bay-lines) li,
.account-page .woocommerce table.shop_table td.product-name dl.variation li,
.order-page .woocommerce table.shop_table td.product-name .wc-item-meta:not(.bay-lines) li,
.order-page .woocommerce table.shop_table td.product-name dl.variation li {
  display: contents;
}
.account-page .woocommerce table.shop_table td.product-name .wc-item-meta:not(.bay-lines) .wc-item-meta-label,
.account-page .woocommerce table.shop_table td.product-name .wc-item-meta:not(.bay-lines) dt,
.account-page .woocommerce table.shop_table td.product-name dl.variation .wc-item-meta-label,
.account-page .woocommerce table.shop_table td.product-name dl.variation dt,
.order-page .woocommerce table.shop_table td.product-name .wc-item-meta:not(.bay-lines) .wc-item-meta-label,
.order-page .woocommerce table.shop_table td.product-name .wc-item-meta:not(.bay-lines) dt,
.order-page .woocommerce table.shop_table td.product-name dl.variation .wc-item-meta-label,
.order-page .woocommerce table.shop_table td.product-name dl.variation dt {
  float: none;
  clear: none;
  margin: 0;
  font-weight: 600;
}
.account-page .woocommerce table.shop_table td.product-name .wc-item-meta:not(.bay-lines) dd,
.account-page .woocommerce table.shop_table td.product-name .wc-item-meta:not(.bay-lines) p,
.account-page .woocommerce table.shop_table td.product-name dl.variation dd,
.account-page .woocommerce table.shop_table td.product-name dl.variation p,
.order-page .woocommerce table.shop_table td.product-name .wc-item-meta:not(.bay-lines) dd,
.order-page .woocommerce table.shop_table td.product-name .wc-item-meta:not(.bay-lines) p,
.order-page .woocommerce table.shop_table td.product-name dl.variation dd,
.order-page .woocommerce table.shop_table td.product-name dl.variation p {
  margin: 0;
}
@media (max-width: 767px) {
  .account-page .woocommerce table.shop_table_responsive,
  .order-page .woocommerce table.shop_table_responsive {
    font-size: 14px;
  }
  .account-page .woocommerce table.shop_table_responsive tbody tr,
  .order-page .woocommerce table.shop_table_responsive tbody tr {
    padding: 10px 0;
    border-bottom: 1px solid #DADDEA;
  }
  .account-page .woocommerce table.shop_table_responsive tbody th,
  .order-page .woocommerce table.shop_table_responsive tbody th {
    display: block;
    padding: 5px 0;
    text-align: right;
    border: 0;
  }
  .account-page .woocommerce table.shop_table_responsive tbody td,
  .order-page .woocommerce table.shop_table_responsive tbody td {
    padding: 5px 0;
    border: 0;
  }
  .account-page .woocommerce table.shop_table_responsive tbody th::before,
  .order-page .woocommerce table.shop_table_responsive tbody th::before {
    content: attr(data-title) ": ";
    float: left;
  }
  .account-page .woocommerce table.shop_table_responsive tbody td::before,
  .account-page .woocommerce table.shop_table_responsive tbody th::before,
  .order-page .woocommerce table.shop_table_responsive tbody td::before,
  .order-page .woocommerce table.shop_table_responsive tbody th::before {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #535C78;
  }
  .account-page .woocommerce table.shop_table_responsive tbody tr:nth-child(2n) td,
  .order-page .woocommerce table.shop_table_responsive tbody tr:nth-child(2n) td {
    background: none;
  }
}
.account-page .woocommerce .form-row,
.order-page .woocommerce .form-row {
  width: auto;
  float: none;
  margin: 0 0 16px;
  padding: 0;
}
.account-page .woocommerce .form-row label,
.order-page .woocommerce .form-row label {
  display: block;
  margin-bottom: 7px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #535C78;
}
.account-page .woocommerce .form-row label.woocommerce-form__label-for-checkbox,
.order-page .woocommerce .form-row label.woocommerce-form__label-for-checkbox {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: #161C30;
  cursor: pointer;
}
.account-page .woocommerce .form-row label.woocommerce-form__label-for-checkbox input,
.order-page .woocommerce .form-row label.woocommerce-form__label-for-checkbox input {
  width: 17px;
  height: 17px;
  margin: 0;
  accent-color: #3E4576;
}
.account-page .woocommerce .form-row input.input-text,
.account-page .woocommerce .form-row textarea,
.account-page .woocommerce .form-row select,
.order-page .woocommerce .form-row input.input-text,
.order-page .woocommerce .form-row textarea,
.order-page .woocommerce .form-row select {
  width: 100%;
  padding: 13px 15px;
  font-family: "Hanken Grotesk", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.4;
  color: #161C30;
  background: #ffffff;
  border: 1px solid #DADDEA;
  border-radius: 10px;
  box-shadow: none;
}
.account-page .woocommerce .form-row input.input-text:focus,
.account-page .woocommerce .form-row textarea:focus,
.account-page .woocommerce .form-row select:focus,
.order-page .woocommerce .form-row input.input-text:focus,
.order-page .woocommerce .form-row textarea:focus,
.order-page .woocommerce .form-row select:focus {
  outline: none;
  border-color: #adb4ea;
  box-shadow: 0 0 0 3px rgba(62, 69, 118, 0.12);
}
.account-page .woocommerce .form-row input.input-text::placeholder,
.account-page .woocommerce .form-row textarea::placeholder,
.account-page .woocommerce .form-row select::placeholder,
.order-page .woocommerce .form-row input.input-text::placeholder,
.order-page .woocommerce .form-row textarea::placeholder,
.order-page .woocommerce .form-row select::placeholder {
  color: #cdd1d4;
}
.account-page .woocommerce .form-row span em,
.order-page .woocommerce .form-row span em {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  font-style: normal;
  color: #6B7390;
}
.account-page .woocommerce fieldset,
.order-page .woocommerce fieldset {
  margin: 8px 0 20px;
  padding: 20px 0 0;
  border: 0;
  border-top: 1px solid #DADDEA;
}
.account-page .woocommerce fieldset legend,
.order-page .woocommerce fieldset legend {
  padding: 0;
  margin-bottom: 14px;
}
.account-page .woocommerce a.button,
.account-page .woocommerce button.button,
.account-page .woocommerce input.button,
.account-page .woocommerce a.woocommerce-Button,
.account-page .woocommerce button.woocommerce-Button,
.order-page .woocommerce a.button,
.order-page .woocommerce button.button,
.order-page .woocommerce input.button,
.order-page .woocommerce a.woocommerce-Button,
.order-page .woocommerce button.woocommerce-Button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 13px 30px;
  font-family: "Inter", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #161C30;
  text-decoration: none;
  background: #8FD123;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: 0.3s ease-in filter;
  text-align: center;
}
@media (max-width: 767px) {
  .account-page .woocommerce a.button,
  .account-page .woocommerce button.button,
  .account-page .woocommerce input.button,
  .account-page .woocommerce a.woocommerce-Button,
  .account-page .woocommerce button.woocommerce-Button,
  .order-page .woocommerce a.button,
  .order-page .woocommerce button.button,
  .order-page .woocommerce input.button,
  .order-page .woocommerce a.woocommerce-Button,
  .order-page .woocommerce button.woocommerce-Button {
    padding: 11px 20px;
    font-size: 14px;
  }
}
.account-page .woocommerce a.button .glyph,
.account-page .woocommerce button.button .glyph,
.account-page .woocommerce input.button .glyph,
.account-page .woocommerce a.woocommerce-Button .glyph,
.account-page .woocommerce button.woocommerce-Button .glyph,
.order-page .woocommerce a.button .glyph,
.order-page .woocommerce button.button .glyph,
.order-page .woocommerce input.button .glyph,
.order-page .woocommerce a.woocommerce-Button .glyph,
.order-page .woocommerce button.woocommerce-Button .glyph {
  font-size: 16px;
}
.account-page .woocommerce a.button:hover,
.account-page .woocommerce button.button:hover,
.account-page .woocommerce input.button:hover,
.account-page .woocommerce a.woocommerce-Button:hover,
.account-page .woocommerce button.woocommerce-Button:hover,
.order-page .woocommerce a.button:hover,
.order-page .woocommerce button.button:hover,
.order-page .woocommerce input.button:hover,
.order-page .woocommerce a.woocommerce-Button:hover,
.order-page .woocommerce button.woocommerce-Button:hover {
  filter: brightness(0.95);
}
.account-page .woocommerce a.button,
.account-page .woocommerce button.button,
.account-page .woocommerce input.button,
.account-page .woocommerce a.woocommerce-Button,
.account-page .woocommerce button.woocommerce-Button,
.order-page .woocommerce a.button,
.order-page .woocommerce button.button,
.order-page .woocommerce input.button,
.order-page .woocommerce a.woocommerce-Button,
.order-page .woocommerce button.woocommerce-Button {
  /*
   * Nothing to press.
   *
   * Every button drawn from this mixin gets it, because a green pill that
   * refuses the click while looking exactly like the one beside it that works
   * is worse than one that never invited the press. The hover goes with it -
   * a button that still lights up under the pointer is still inviting.
   *
   * The attribute as well as the state, for the places where the control is a
   * link and cannot carry `disabled` at all.
   */
}
.account-page .woocommerce a.button:disabled, .account-page .woocommerce a.button[aria-disabled=true],
.account-page .woocommerce button.button:disabled,
.account-page .woocommerce button.button[aria-disabled=true],
.account-page .woocommerce input.button:disabled,
.account-page .woocommerce input.button[aria-disabled=true],
.account-page .woocommerce a.woocommerce-Button:disabled,
.account-page .woocommerce a.woocommerce-Button[aria-disabled=true],
.account-page .woocommerce button.woocommerce-Button:disabled,
.account-page .woocommerce button.woocommerce-Button[aria-disabled=true],
.order-page .woocommerce a.button:disabled,
.order-page .woocommerce a.button[aria-disabled=true],
.order-page .woocommerce button.button:disabled,
.order-page .woocommerce button.button[aria-disabled=true],
.order-page .woocommerce input.button:disabled,
.order-page .woocommerce input.button[aria-disabled=true],
.order-page .woocommerce a.woocommerce-Button:disabled,
.order-page .woocommerce a.woocommerce-Button[aria-disabled=true],
.order-page .woocommerce button.woocommerce-Button:disabled,
.order-page .woocommerce button.woocommerce-Button[aria-disabled=true] {
  opacity: 0.45;
  cursor: default;
}
.account-page .woocommerce a.button:disabled:hover, .account-page .woocommerce a.button[aria-disabled=true]:hover,
.account-page .woocommerce button.button:disabled:hover,
.account-page .woocommerce button.button[aria-disabled=true]:hover,
.account-page .woocommerce input.button:disabled:hover,
.account-page .woocommerce input.button[aria-disabled=true]:hover,
.account-page .woocommerce a.woocommerce-Button:disabled:hover,
.account-page .woocommerce a.woocommerce-Button[aria-disabled=true]:hover,
.account-page .woocommerce button.woocommerce-Button:disabled:hover,
.account-page .woocommerce button.woocommerce-Button[aria-disabled=true]:hover,
.order-page .woocommerce a.button:disabled:hover,
.order-page .woocommerce a.button[aria-disabled=true]:hover,
.order-page .woocommerce button.button:disabled:hover,
.order-page .woocommerce button.button[aria-disabled=true]:hover,
.order-page .woocommerce input.button:disabled:hover,
.order-page .woocommerce input.button[aria-disabled=true]:hover,
.order-page .woocommerce a.woocommerce-Button:disabled:hover,
.order-page .woocommerce a.woocommerce-Button[aria-disabled=true]:hover,
.order-page .woocommerce button.woocommerce-Button:disabled:hover,
.order-page .woocommerce button.woocommerce-Button[aria-disabled=true]:hover {
  filter: none;
}
.account-page .woocommerce a.button:hover,
.account-page .woocommerce button.button:hover,
.account-page .woocommerce input.button:hover,
.account-page .woocommerce a.woocommerce-Button:hover,
.account-page .woocommerce button.woocommerce-Button:hover,
.order-page .woocommerce a.button:hover,
.order-page .woocommerce button.button:hover,
.order-page .woocommerce input.button:hover,
.order-page .woocommerce a.woocommerce-Button:hover,
.order-page .woocommerce button.woocommerce-Button:hover {
  color: #161C30;
  background: #8FD123;
  filter: brightness(0.95);
}
.account-page .woocommerce .woocommerce-EditAccountForm button.woocommerce-Button,
.order-page .woocommerce .woocommerce-EditAccountForm button.woocommerce-Button {
  color: #161C30;
  background: none;
  border: 1.5px solid #161C30;
}
.account-page .woocommerce .woocommerce-EditAccountForm button.woocommerce-Button:hover,
.order-page .woocommerce .woocommerce-EditAccountForm button.woocommerce-Button:hover {
  color: #ffffff;
  background: #161C30;
  filter: none;
}
.account-page .woocommerce .woocommerce-orders-table__cell-order-actions,
.order-page .woocommerce .woocommerce-orders-table__cell-order-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.account-page .woocommerce .woocommerce-orders-table__cell-order-actions::before,
.order-page .woocommerce .woocommerce-orders-table__cell-order-actions::before {
  float: none;
  margin-right: auto;
}
.account-page .woocommerce .woocommerce-orders-table__cell-order-actions .button,
.order-page .woocommerce .woocommerce-orders-table__cell-order-actions .button {
  padding: 9px 18px;
  font-size: 13px;
}
.account-page,
.order-page {
  /*
   * The way to the next page of orders.
   *
   * Stood straight under the last row with nothing between it and the rule
   * closing the table, so it read as part of the list rather than as what to
   * do after it.
   *
   * The whole gap is set here rather than shared with the table above, which
   * carries no bottom margin of its own by the time these rules are done with
   * it - and where it did, two block siblings collapse their facing margins to
   * the larger of the two rather than adding them.
   */
}
.account-page .woocommerce .woocommerce-pagination,
.order-page .woocommerce .woocommerce-pagination {
  display: flex;
  gap: 10px;
  margin-top: 36px;
}
@media (max-width: 767px) {
  .account-page .woocommerce .woocommerce-pagination,
  .order-page .woocommerce .woocommerce-pagination {
    margin-top: 28px;
  }
}
.account-page .woocommerce:has(> form.login),
.account-page .woocommerce:has(> form.lost_reset_password),
.order-page .woocommerce:has(> form.login),
.order-page .woocommerce:has(> form.lost_reset_password) {
  max-width: 460px;
  margin: 0 auto;
  padding: 32px;
  background: #ECEEF7;
  border-radius: 14px;
}
@media (max-width: 767px) {
  .account-page .woocommerce:has(> form.login),
  .account-page .woocommerce:has(> form.lost_reset_password),
  .order-page .woocommerce:has(> form.login),
  .order-page .woocommerce:has(> form.lost_reset_password) {
    padding: 24px 20px;
  }
}
.account-page .woocommerce #customer_login.col2-set::before, .account-page .woocommerce #customer_login.col2-set::after,
.account-page .woocommerce .woocommerce-Addresses.col2-set::before,
.account-page .woocommerce .woocommerce-Addresses.col2-set::after,
.account-page .woocommerce .woocommerce-columns--addresses.col2-set::before,
.account-page .woocommerce .woocommerce-columns--addresses.col2-set::after,
.account-page .woocommerce .form-row:has(.woocommerce-form-login__submit)::before,
.account-page .woocommerce .form-row:has(.woocommerce-form-login__submit)::after,
.order-page .woocommerce #customer_login.col2-set::before,
.order-page .woocommerce #customer_login.col2-set::after,
.order-page .woocommerce .woocommerce-Addresses.col2-set::before,
.order-page .woocommerce .woocommerce-Addresses.col2-set::after,
.order-page .woocommerce .woocommerce-columns--addresses.col2-set::before,
.order-page .woocommerce .woocommerce-columns--addresses.col2-set::after,
.order-page .woocommerce .form-row:has(.woocommerce-form-login__submit)::before,
.order-page .woocommerce .form-row:has(.woocommerce-form-login__submit)::after {
  content: none;
}
.account-page .woocommerce #customer_login.col2-set,
.order-page .woocommerce #customer_login.col2-set {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  max-width: 920px;
  margin: 0 auto;
}
@media (max-width: 767px) {
  .account-page .woocommerce #customer_login.col2-set,
  .order-page .woocommerce #customer_login.col2-set {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }
}
.account-page .woocommerce #customer_login .col-1,
.account-page .woocommerce #customer_login .col-2,
.order-page .woocommerce #customer_login .col-1,
.order-page .woocommerce #customer_login .col-2 {
  width: auto;
  float: none;
  padding: 32px;
  border-radius: 14px;
}
@media (max-width: 767px) {
  .account-page .woocommerce #customer_login .col-1,
  .account-page .woocommerce #customer_login .col-2,
  .order-page .woocommerce #customer_login .col-1,
  .order-page .woocommerce #customer_login .col-2 {
    padding: 24px 20px;
  }
}
.account-page .woocommerce #customer_login .col-1,
.account-page .woocommerce #customer_login .col-2,
.order-page .woocommerce #customer_login .col-1,
.order-page .woocommerce #customer_login .col-2 {
  background: #ECEEF7;
}
.account-page .woocommerce form.login,
.account-page .woocommerce form.register,
.account-page .woocommerce form.lost_reset_password,
.order-page .woocommerce form.login,
.order-page .woocommerce form.register,
.order-page .woocommerce form.lost_reset_password {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
}
.account-page .woocommerce > h2,
.account-page .woocommerce #customer_login h2,
.order-page .woocommerce > h2,
.order-page .woocommerce #customer_login h2 {
  margin-bottom: 18px;
  font-family: "Schibsted Grotesk", "Hanken Grotesk", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 27px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.account-page .woocommerce form.register > p:not(.form-row),
.account-page .woocommerce .woocommerce-privacy-policy-text,
.account-page .woocommerce .woocommerce-privacy-policy-text p,
.order-page .woocommerce form.register > p:not(.form-row),
.order-page .woocommerce .woocommerce-privacy-policy-text,
.order-page .woocommerce .woocommerce-privacy-policy-text p {
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.5;
  color: #535C78;
}
.account-page .woocommerce form.register > p:not(.form-row) a,
.account-page .woocommerce .woocommerce-privacy-policy-text a,
.account-page .woocommerce .woocommerce-privacy-policy-text p a,
.order-page .woocommerce form.register > p:not(.form-row) a,
.order-page .woocommerce .woocommerce-privacy-policy-text a,
.order-page .woocommerce .woocommerce-privacy-policy-text p a {
  color: #161C30;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.account-page .woocommerce form.login > *:last-child,
.account-page .woocommerce form.register > *:last-child,
.order-page .woocommerce form.login > *:last-child,
.order-page .woocommerce form.register > *:last-child {
  margin-bottom: 0;
}
.account-page .woocommerce .form-row:has(.woocommerce-form-login__submit),
.order-page .woocommerce .form-row:has(.woocommerce-form-login__submit) {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
}
.account-page .woocommerce .woocommerce-form-login__submit,
.account-page .woocommerce .woocommerce-form-register__submit,
.order-page .woocommerce .woocommerce-form-login__submit,
.order-page .woocommerce .woocommerce-form-register__submit {
  width: 100%;
  float: none;
  margin: 0;
}
.account-page .woocommerce .woocommerce-LostPassword,
.order-page .woocommerce .woocommerce-LostPassword {
  margin: 14px 0 0;
  font-size: 14px;
}
.account-page .woocommerce .woocommerce-LostPassword a,
.order-page .woocommerce .woocommerce-LostPassword a {
  color: #535C78;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.account-page .woocommerce .woocommerce-LostPassword a:hover,
.order-page .woocommerce .woocommerce-LostPassword a:hover {
  color: #161C30;
}
.account-page .woocommerce .woocommerce-order-details__title,
.account-page .woocommerce .woocommerce-column__title,
.order-page .woocommerce .woocommerce-order-details__title,
.order-page .woocommerce .woocommerce-column__title {
  margin: 0 0 16px;
  font-family: "Schibsted Grotesk", "Hanken Grotesk", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.account-page .woocommerce .woocommerce-customer-details,
.order-page .woocommerce .woocommerce-customer-details {
  margin-top: 32px;
}
.account-page .woocommerce .woocommerce-customer-details address,
.order-page .woocommerce .woocommerce-customer-details address {
  padding: 20px 24px;
  font-style: normal;
  line-height: 1.7;
  color: #535C78;
  background: #ECEEF7;
  border: 0;
  border-radius: 14px;
}
.account-page .woocommerce .woocommerce-customer-details--phone,
.account-page .woocommerce .woocommerce-customer-details--email,
.order-page .woocommerce .woocommerce-customer-details--phone,
.order-page .woocommerce .woocommerce-customer-details--email {
  margin-top: 6px;
  color: #161C30;
}
.account-page .woocommerce .woocommerce-Addresses.col2-set,
.account-page .woocommerce .woocommerce-columns--addresses.col2-set,
.order-page .woocommerce .woocommerce-Addresses.col2-set,
.order-page .woocommerce .woocommerce-columns--addresses.col2-set {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
@media (max-width: 767px) {
  .account-page .woocommerce .woocommerce-Addresses.col2-set,
  .account-page .woocommerce .woocommerce-columns--addresses.col2-set,
  .order-page .woocommerce .woocommerce-Addresses.col2-set,
  .order-page .woocommerce .woocommerce-columns--addresses.col2-set {
    grid-template-columns: minmax(0, 1fr);
  }
}
.account-page .woocommerce .woocommerce-Addresses .col-1,
.account-page .woocommerce .woocommerce-Addresses .col-2,
.account-page .woocommerce .woocommerce-columns--addresses .col-1,
.account-page .woocommerce .woocommerce-columns--addresses .col-2,
.order-page .woocommerce .woocommerce-Addresses .col-1,
.order-page .woocommerce .woocommerce-Addresses .col-2,
.order-page .woocommerce .woocommerce-columns--addresses .col-1,
.order-page .woocommerce .woocommerce-columns--addresses .col-2 {
  width: auto;
  float: none;
}
.account-page .woocommerce .woocommerce-Addresses .col-1,
.account-page .woocommerce .woocommerce-Addresses .col-2,
.order-page .woocommerce .woocommerce-Addresses .col-1,
.order-page .woocommerce .woocommerce-Addresses .col-2 {
  padding: 24px;
  background: #ECEEF7;
  border-radius: 14px;
}
.account-page .woocommerce .woocommerce-Address-title.title,
.order-page .woocommerce .woocommerce-Address-title.title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin-bottom: 12px;
}
.account-page .woocommerce .woocommerce-Address-title.title::before, .account-page .woocommerce .woocommerce-Address-title.title::after,
.order-page .woocommerce .woocommerce-Address-title.title::before,
.order-page .woocommerce .woocommerce-Address-title.title::after {
  content: none;
}
.account-page .woocommerce .woocommerce-Address-title.title h2,
.account-page .woocommerce .woocommerce-Address-title.title h3,
.order-page .woocommerce .woocommerce-Address-title.title h2,
.order-page .woocommerce .woocommerce-Address-title.title h3 {
  float: none;
  margin: 0;
}
.account-page .woocommerce .woocommerce-Address-title.title .edit,
.order-page .woocommerce .woocommerce-Address-title.title .edit {
  float: none;
  flex: 0 0 auto;
  font-size: 14px;
  color: #535C78;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}
.account-page .woocommerce .woocommerce-Address-title.title .edit:hover,
.order-page .woocommerce .woocommerce-Address-title.title .edit:hover {
  color: #161C30;
}
.account-page .woocommerce address,
.order-page .woocommerce address {
  font-style: normal;
  line-height: 1.6;
  color: #535C78;
}

/*
 * The site.
 *
 *   npx sass --watch --no-source-map --style=expanded src/scss/site.scss:site.css
 *
 * Compiles to /site.css, which includes/enqueue.php loads on every page.
 *
 * One sheet rather than one per template. Every rule below is named down to a
 * class that only exists where it belongs - .bay-customizer, .product-hero,
 * .site-header - so a page carries the rules for parts it does not have, and
 * nothing else. The two that could not be written that way, the customizer's
 * full height frame and the body it stops scrolling, are named down to the
 * template instead.
 *
 * Colours, breakpoints and the typeset mixin are in shared/_vars.scss, which
 * emits nothing itself. Sizes and spacing are written where they are used.
 */
/*
 * The order received page, and only what is its own.
 *
 * The lines, the totals and the addresses are dressed in _account.scss, which
 * names this page alongside the account because they are the same templates.
 * What is here is the frame around them, the sentence at the top, and the row
 * of facts under it - none of which is drawn anywhere else.
 *
 * The typeset and the .inner cap come from that shared scope too, so nothing
 * is set twice.
 */
.order-page .order-hero {
  padding: 74px 60px 64px;
  background: #ECEEF7;
}
@media (max-width: 1024px) {
  .order-page .order-hero {
    padding: 60px 40px 52px;
  }
}
@media (max-width: 767px) {
  .order-page .order-hero {
    padding: 40px 24px 36px;
  }
}
.order-page .order-body {
  padding: 44px 60px 80px;
}
@media (max-width: 1024px) {
  .order-page .order-body {
    padding: 40px 40px 64px;
  }
}
@media (max-width: 767px) {
  .order-page .order-body {
    padding: 28px 24px 48px;
  }
}
.order-page .woocommerce-notice--success {
  margin: 0 0 40px;
  font-family: "Schibsted Grotesk", "Hanken Grotesk", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: #161C30;
}
@media (max-width: 767px) {
  .order-page .woocommerce-notice--success {
    margin-bottom: 30px;
    font-size: 19px;
  }
}
.order-page .woocommerce-notice--error {
  margin: 0 0 20px;
  padding: 14px 16px;
  font-size: 15px;
  line-height: 1.5;
  color: #B3261E;
  background: #ECEEF7;
  border-left: 3px solid #B3261E;
  border-radius: 6px;
}
.order-page .woocommerce-notice--error.woocommerce-thankyou-order-failed-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  background: none;
  border: 0;
  padding: 0;
}
.order-page .woocommerce-notice--error.woocommerce-thankyou-order-failed-actions .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 13px 30px;
  font-family: "Inter", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #161C30;
  text-decoration: none;
  background: #8FD123;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: 0.3s ease-in filter;
  text-align: center;
}
@media (max-width: 767px) {
  .order-page .woocommerce-notice--error.woocommerce-thankyou-order-failed-actions .button {
    padding: 11px 20px;
    font-size: 14px;
  }
}
.order-page .woocommerce-notice--error.woocommerce-thankyou-order-failed-actions .button .glyph {
  font-size: 16px;
}
.order-page .woocommerce-notice--error.woocommerce-thankyou-order-failed-actions .button:hover {
  filter: brightness(0.95);
}
.order-page .woocommerce-notice--error.woocommerce-thankyou-order-failed-actions .button {
  /*
   * Nothing to press.
   *
   * Every button drawn from this mixin gets it, because a green pill that
   * refuses the click while looking exactly like the one beside it that works
   * is worse than one that never invited the press. The hover goes with it -
   * a button that still lights up under the pointer is still inviting.
   *
   * The attribute as well as the state, for the places where the control is a
   * link and cannot carry `disabled` at all.
   */
}
.order-page .woocommerce-notice--error.woocommerce-thankyou-order-failed-actions .button:disabled, .order-page .woocommerce-notice--error.woocommerce-thankyou-order-failed-actions .button[aria-disabled=true] {
  opacity: 0.45;
  cursor: default;
}
.order-page .woocommerce-notice--error.woocommerce-thankyou-order-failed-actions .button:disabled:hover, .order-page .woocommerce-notice--error.woocommerce-thankyou-order-failed-actions .button[aria-disabled=true]:hover {
  filter: none;
}
.order-page .woocommerce-notice--error.woocommerce-thankyou-order-failed-actions .button {
  padding: 11px 22px;
  font-size: 14px;
}
.order-page {
  /*
   * The facts of the order, in a row: its number, the date, the address it was
   * confirmed to, the total and how it was paid.
   *
   * WooCommerce writes these as a plain list and separates them with a border
   * on each item, which leaves a rule hanging off the front of the row. The
   * same ladder the tiers use: the border is on the left of every item, the
   * row is pulled out by its own padding and the leading edge clipped away -
   * so the first item of every line loses its rule, not just the first item of
   * the first.
   *
   * Named through .woocommerce and down to the ul, because WooCommerce's own
   * rules for this list are `.woocommerce ul.order_details li` - two classes
   * and two elements - and anything shorter ties or loses, which is what left
   * its borders on the right of every item and its margins where they were.
   */
}
.order-page .woocommerce ul.woocommerce-order-overview {
  display: flex;
  flex-wrap: wrap;
  row-gap: 20px;
  margin: 0 -24px;
  padding: 0;
  overflow: hidden;
  list-style: none;
}
@media (max-width: 767px) {
  .order-page .woocommerce ul.woocommerce-order-overview {
    row-gap: 16px;
    margin: 0 -16px;
  }
}
.order-page .woocommerce ul.woocommerce-order-overview li {
  /*
   * Share the row rather than bunch at the left of it.
   *
   * The list was already the full width - the facts simply stopped where
   * their words did and left half a page of nothing after them. Growing
   * rather than each taking an equal share, so a long email still gets the
   * room it needs and an order number does not get room it cannot use.
   */
  flex: 1 1 auto;
  min-width: 0;
  margin-left: -1px;
  padding: 0 24px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #535C78;
  border-left: 1px solid #DADDEA;
  border-right: 0;
}
@media (max-width: 767px) {
  .order-page .woocommerce ul.woocommerce-order-overview li {
    padding: 0 16px;
    font-size: 11px;
  }
}
.order-page .woocommerce ul.woocommerce-order-overview li strong {
  display: block;
  margin-top: 6px;
  font-family: "Schibsted Grotesk", "Hanken Grotesk", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: none;
  color: #161C30;
  overflow-wrap: anywhere;
}
@media (max-width: 767px) {
  .order-page .woocommerce ul.woocommerce-order-overview li strong {
    font-size: 15px;
  }
}
.order-page {
  /*
   * The order and the address it is going to, side by side.
   *
   * The address is seven short lines and was taking the page's whole width to
   * say them, which left it reading as a section rather than as a detail.
   * Beside the order it is what it is: a fact about the order, in a column the
   * width of the words in it.
   *
   * Everything else in here - the thank you, the row of facts, whatever the
   * payment gateway has to say - runs across both, because none of it belongs
   * to one side or the other.
   */
}
.order-page .woocommerce-order {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  column-gap: 48px;
  align-items: start;
}
.order-page .woocommerce-order > * {
  grid-column: 1/-1;
}
.order-page .woocommerce-order {
  /*
   * Whatever the gateway has to say - "Pay with cash upon delivery." - sits
   * with the facts above it, because it is about the payment method listed
   * among them. It has no margin of its own at all, so widening the gap over
   * it only pushed it off the facts and onto the heading below, where it
   * read as a subtitle of Order details.
   */
}
.order-page .woocommerce-order > p:not(.woocommerce-notice) {
  margin: 14px 0 0;
}
.order-page .woocommerce-order {
  /*
   * And the break between the summary and the order itself belongs to the
   * order rather than to whatever happens to come before it - a gateway that
   * says nothing would otherwise take the gap away with it.
   */
}
.order-page .woocommerce-order > .woocommerce-order-details {
  grid-column: 1;
  margin-top: 44px;
  margin-bottom: 0;
}
.order-page .woocommerce-order > .woocommerce-customer-details {
  grid-column: 2;
  margin-top: 44px;
  margin-bottom: 0;
}
.order-page .woocommerce-order {
  /*
   * Below this the order table has no room to give up, so the two stack and
   * the address takes the width back.
   *
   * Last in the block on purpose. Sass leaves a nested media query where it
   * was written, and a media query is worth nothing in specificity - so put
   * above the placements it would be overridden by them at every width, and
   * the address would sit in a narrow column on a phone.
   *
   * The placements have to be undone as well as the template. A child still
   * asking for column two in a grid that has one makes itself a second
   * column rather than moving into the first.
   */
}
@media (max-width: 1024px) {
  .order-page .woocommerce-order {
    grid-template-columns: minmax(0, 1fr);
    column-gap: 0;
  }
  .order-page .woocommerce-order > .woocommerce-order-details,
  .order-page .woocommerce-order > .woocommerce-customer-details {
    grid-column: 1/-1;
  }
  .order-page .woocommerce-order > .woocommerce-customer-details {
    margin-top: 36px;
  }
}
.order-page {
  /*
   * The price stands with the product it is for.
   *
   * Centred in its cell it drifted down among the customizations, level with
   * whichever location happened to fall in the middle - which read as the
   * price of that one rather than of the whole line.
   */
}
.order-page .woocommerce table.woocommerce-table--order-details tbody td {
  vertical-align: top;
}
.order-page {
  /*
   * Three sizes, so the eye can tell what is what: the product, then the
   * places on it, then what goes on them. They were one size, which left the
   * product's name reading as the first row of a list rather than the thing
   * the list is about.
   */
}
.order-page .woocommerce table.woocommerce-table--order-details td.product-name > a {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: #161C30;
}
.order-page .woocommerce table.woocommerce-table--order-details .product-quantity {
  font-size: 15px;
}
.order-page .woocommerce table.woocommerce-table--order-details td.product-total {
  font-size: 16px;
  font-weight: 600;
  color: #161C30;
}
.order-page {
  /*
   * On a phone the order table stops being two columns.
   *
   * A product's line carries a panel of its own listing every location, and
   * beside a Total column that panel was getting about half the screen - which
   * is what made it read as a squeezed box rather than as the order. The price
   * goes under the product instead, where there is room for both.
   *
   * The totals keep their two ends. They are a label and a figure and they
   * belong on one line; stacking those would turn three facts into six.
   */
}
@media (max-width: 767px) {
  .order-page .woocommerce table.woocommerce-table--order-details {
    display: block;
  }
  .order-page .woocommerce table.woocommerce-table--order-details > thead {
    display: none;
  }
  .order-page .woocommerce table.woocommerce-table--order-details > tbody,
  .order-page .woocommerce table.woocommerce-table--order-details > tfoot,
  .order-page .woocommerce table.woocommerce-table--order-details > tbody > tr {
    display: block;
  }
  .order-page .woocommerce table.woocommerce-table--order-details > tbody > tr > th,
  .order-page .woocommerce table.woocommerce-table--order-details > tbody > tr > td {
    display: block;
    width: auto;
    text-align: left;
  }
  .order-page .woocommerce table.woocommerce-table--order-details > tbody > tr > td.product-name {
    padding-bottom: 0;
    border-bottom: 0;
  }
  .order-page .woocommerce table.woocommerce-table--order-details {
    /*
     * The line's total, named.
     *
     * Under the panel with the Total heading gone it was a figure on its own
     * at the foot of a long block - which reads as a stray number, or as the
     * order's total said a second time. It takes the shape the totals under
     * it take: what it is on the left, what it comes to on the right.
     *
     * Item total rather than Total, because the order has one of those
     * already and this is not it - it is what this line comes to, and an
     * order with two products has two of them.
     */
  }
  .order-page .woocommerce table.woocommerce-table--order-details > tbody > tr > td.product-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding-top: 12px;
  }
  .order-page .woocommerce table.woocommerce-table--order-details > tbody > tr > td.product-total::before {
    content: "Item total";
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #6B7390;
  }
  .order-page .woocommerce table.woocommerce-table--order-details {
    /*
     * The totals keep their two ends on one line, and one rule under the
     * pair of them.
     *
     * Laid out as flex items the two cells are each only as wide as their
     * own words, so the rule they each carry was drawn twice and short -
     * once under the label and once under the figure, with a gap between.
     * The row is the box that spans them both, so the rule belongs to it.
     */
  }
  .order-page .woocommerce table.woocommerce-table--order-details > tfoot > tr {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid #DADDEA;
  }
  .order-page .woocommerce table.woocommerce-table--order-details > tfoot > tr > th,
  .order-page .woocommerce table.woocommerce-table--order-details > tfoot > tr > td {
    border-bottom: 0;
  }
}
.order-page {
  /*
   * Meta on a line that is not a customized one - an attribute, a plugin's
   * note. A customized line is drawn by _order-lines.scss instead, and is
   * excluded here rather than out-argued: this selector is four elements and
   * three classes deep, so nothing a component could reasonably be named would
   * win, and a rule that does not match needs no weight at all.
   */
}
.order-page .woocommerce table.woocommerce-table--order-details ul.wc-item-meta:not(.bay-lines) {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}
.order-page .woocommerce table.woocommerce-table--order-details ul.wc-item-meta:not(.bay-lines) li {
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.5;
  color: #535C78;
}
.order-page .woocommerce table.woocommerce-table--order-details ul.wc-item-meta:not(.bay-lines) li p {
  display: inline;
  margin: 0;
}
.order-page .woocommerce table.woocommerce-table--order-details ul.wc-item-meta:not(.bay-lines) li strong {
  color: #161C30;
}

/*
 * The site.
 *
 *   npx sass --watch --no-source-map --style=expanded src/scss/site.scss:site.css
 *
 * Compiles to /site.css, which includes/enqueue.php loads on every page.
 *
 * One sheet rather than one per template. Every rule below is named down to a
 * class that only exists where it belongs - .bay-customizer, .product-hero,
 * .site-header - so a page carries the rules for parts it does not have, and
 * nothing else. The two that could not be written that way, the customizer's
 * full height frame and the body it stops scrolling, are named down to the
 * template instead.
 *
 * Colours, breakpoints and the typeset mixin are in shared/_vars.scss, which
 * emits nothing itself. Sizes and spacing are written where they are used.
 */
/*
 * What was customized, under the line it belongs to.
 *
 * Its own class rather than a page's, because the same block is printed in
 * four places - the order received page, the account's view of a past order,
 * the cart and the checkout review - and it should read the same in all of
 * them.
 *
 * A table, because it is one: where the mark goes, how it is made, and what it
 * is, a row per location under a heading each. The heading is also what lets
 * the cells stay quiet - nothing in them has to name itself, so a location
 * reads as a location and a filename as a filename.
 *
 * It was a list of rows each laying out its own three columns, which is the
 * one thing that cannot work here: every row sized its columns from its own
 * contents, so the heading measured three words while the rows below measured
 * a location name and a pill, and the two never lined up. A table shares one
 * set of widths down the whole of it.
 *
 * Named through WooCommerce's class as well as this one. Its own rule for
 * these is `.woocommerce td.product-name .wc-item-meta` - two classes and an
 * element - and it takes the margin away, so a bare .bay-lines is a class
 * short of holding on to one. The indent from the product's name is not
 * fought: _account.scss sets that on purpose, and deeper than this.
 */
table.wc-item-meta.bay-lines {
  width: 100%;
  margin: 14px 0 0;
  font-size: 14px;
  line-height: 1.5;
  border: 0;
  border-collapse: collapse;
  /*
   * Its own ground, so the locations read as something inside the line rather
   * than as more of it.
   *
   * The product's row is the white of the page and this sits on a tint of it,
   * which is the same relation the site uses everywhere else: what is being
   * said at the top level is on white, what is being said about it stands on a
   * panel. Rules alone were doing that work and could not - a hairline between
   * two rows says these are separate, not these belong to that.
   */
  background: rgba(236, 238, 247, 0.5);
  border-radius: 10px;
  /*
   * Every cell rule below is a child of this table, all the way down.
   *
   * WooCommerce dresses the order table's cells as descendants -
   * `.woocommerce table.shop_table tbody th` is two classes and three elements
   * - and this table lives inside one of those cells, so its own rows were
   * being given that table's borders. Nothing two classes and one element deep
   * can answer that; four elements can, and it cannot reach anything but this
   * table's own cells.
   */
}
table.wc-item-meta.bay-lines > thead > tr > th,
table.wc-item-meta.bay-lines > tbody > tr > th,
table.wc-item-meta.bay-lines > tbody > tr > td {
  padding: 12px 24px 12px 0;
  font-weight: 400;
  text-align: left;
  vertical-align: top;
  border: 0;
}
@media (max-width: 1024px) {
  table.wc-item-meta.bay-lines > thead > tr > th,
  table.wc-item-meta.bay-lines > tbody > tr > th,
  table.wc-item-meta.bay-lines > tbody > tr > td {
    padding-right: 18px;
  }
}
table.wc-item-meta.bay-lines > thead > tr > th:first-child,
table.wc-item-meta.bay-lines > tbody > tr > th:first-child {
  padding-left: 20px;
}
table.wc-item-meta.bay-lines > thead > tr > th:last-child,
table.wc-item-meta.bay-lines > tbody > tr > td:last-child {
  padding-right: 20px;
}
table.wc-item-meta.bay-lines > thead > tr > th {
  padding-top: 10px;
  padding-bottom: 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6B7390;
  background: #ECEEF7;
}
table.wc-item-meta.bay-lines > thead > tr > th:first-child {
  border-radius: 10px 0 0 0;
}
table.wc-item-meta.bay-lines > thead > tr > th:last-child {
  border-radius: 0 10px 0 0;
}
table.wc-item-meta.bay-lines > tbody > tr + tr > th,
table.wc-item-meta.bay-lines > tbody > tr + tr > td {
  border-top: 1px solid rgba(205, 209, 212, 0.5);
}
table.wc-item-meta.bay-lines > tbody > tr:first-child > th,
table.wc-item-meta.bay-lines > tbody > tr:first-child > td {
  padding-top: 14px;
}
table.wc-item-meta.bay-lines > tbody > tr:last-child > th,
table.wc-item-meta.bay-lines > tbody > tr:last-child > td {
  padding-bottom: 16px;
}
table.wc-item-meta.bay-lines .bay-line-label {
  font-weight: 600;
  color: #161C30;
  /*
   * break-word rather than anywhere.
   *
   * The two break the same words in the end, but anywhere also counts
   * towards how narrow a column may be asked to get - it makes the smallest
   * a name can claim to need one character wide, and a table will take that
   * offer.
   */
  overflow-wrap: break-word;
}
table.wc-item-meta.bay-lines .bay-line-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
  color: #535C78;
  overflow-wrap: break-word;
}
table.wc-item-meta.bay-lines {
  /*
   * A location switched off. Still listed - deliberately blank is an
   * instruction - but not dressed as work: the name goes quiet with the rest
   * of the row rather than standing in the ink of one that has something on it.
   */
}
table.wc-item-meta.bay-lines .is-blank .bay-line-label,
table.wc-item-meta.bay-lines .is-blank .bay-line-body {
  font-weight: 400;
  color: #6B7390;
}
table.wc-item-meta.bay-lines {
  /*
   * The decoration method, in the pill it was chosen with.
   *
   * The only colour in the block, and it carries the one fact that decides
   * which process the product goes through.
   */
}
table.wc-item-meta.bay-lines .bay-method {
  display: inline-flex;
  align-items: center;
  padding: 3px 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #ffffff;
  background: #161C30;
  border-radius: 999px;
  white-space: nowrap;
}
table.wc-item-meta.bay-lines .bay-method--color {
  background: linear-gradient(to right, #147080 0%, #514a9d 51%, #147080 100%);
}
table.wc-item-meta.bay-lines .bay-none {
  color: #cdd1d4;
}
table.wc-item-meta.bay-lines .bay-line-copy {
  font-size: 15px;
  color: #161C30;
}
@media (max-width: 767px) {
  table.wc-item-meta.bay-lines .bay-line-copy {
    font-size: 14px;
  }
}
table.wc-item-meta.bay-lines {
  /*
   * The icon, and the artwork that was uploaded. Both are shown as well as
   * named: a filename says a file arrived, not what is on it.
   *
   * The picture and the name sit on one line without a flex row - the name is
   * text and wants to behave like text, wrapping under itself when it must
   * rather than being an item something else decides the width of.
   */
}
table.wc-item-meta.bay-lines .bay-line-icon,
table.wc-item-meta.bay-lines .bay-line-art {
  min-width: 0;
}
table.wc-item-meta.bay-lines .bay-line-icon a,
table.wc-item-meta.bay-lines .bay-line-art a {
  color: #535C78;
  text-decoration: underline;
  text-underline-offset: 3px;
}
table.wc-item-meta.bay-lines .bay-line-icon a:hover,
table.wc-item-meta.bay-lines .bay-line-art a:hover {
  color: #161C30;
}
table.wc-item-meta.bay-lines .bay-line-icon img,
table.wc-item-meta.bay-lines .bay-line-art img {
  width: 22px;
  height: 22px;
  margin-right: 8px;
  object-fit: cover;
  vertical-align: middle;
  border-radius: 4px;
}
table.wc-item-meta.bay-lines {
  /*
   * No columns on a phone: a location becomes a small block of its own, its
   * name over its method over what goes on it.
   *
   * Every part of the table is told to stop being one, because a cell laid out
   * as a block inside a table that is still a table gets put back into an
   * anonymous row by the layout it was taken out of.
   */
}
@media (max-width: 767px) {
  table.wc-item-meta.bay-lines {
    display: block;
    font-size: 13px;
  }
  table.wc-item-meta.bay-lines thead {
    display: none;
  }
  table.wc-item-meta.bay-lines > tbody,
  table.wc-item-meta.bay-lines > tbody > tr,
  table.wc-item-meta.bay-lines > tbody > tr > th,
  table.wc-item-meta.bay-lines > tbody > tr > td {
    display: block;
  }
  table.wc-item-meta.bay-lines > tbody > tr > th,
  table.wc-item-meta.bay-lines > tbody > tr > td {
    padding: 0;
    text-align: left;
  }
  table.wc-item-meta.bay-lines {
    /*
     * The panel's inset belongs to the row here, not to the first and last
     * cells - they are stacked now, so every one of them is both.
     *
     * Said again rather than left to the rule above, because a pseudo class
     * counts as a class: the first-child rules that set this are a class
     * deeper than the padding reset and would keep the location indented from
     * everything under it.
     */
  }
  table.wc-item-meta.bay-lines > tbody > tr > th:first-child,
  table.wc-item-meta.bay-lines > tbody > tr > td:last-child {
    padding-left: 0;
    padding-right: 0;
  }
  table.wc-item-meta.bay-lines {
    /*
     * And the first and last rows give up the padding that opened and closed
     * the panel while there were columns. The row carries that now, so left on
     * the cells it only pushed the first location's name away from its own
     * method and let the last one's imprint sit low.
     *
     * The same reason as above: a pseudo class counts as a class, so the rules
     * setting these are a class deeper than the reset that clears them.
     */
  }
  table.wc-item-meta.bay-lines > tbody > tr:first-child > th,
  table.wc-item-meta.bay-lines > tbody > tr:first-child > td {
    padding-top: 0;
  }
  table.wc-item-meta.bay-lines > tbody > tr:last-child > th,
  table.wc-item-meta.bay-lines > tbody > tr:last-child > td {
    padding-bottom: 0;
  }
  table.wc-item-meta.bay-lines {
    /*
     * The column names come back as row labels.
     *
     * Stacked, the heading over the table is gone and with it everything that
     * said which fact was which - a pill and a filename under a location, with
     * nothing naming either. Each cell carries its column's name and wears it
     * here, so the same three things are said in the same order and the block
     * keeps the shape it has on a wider screen.
     */
  }
  table.wc-item-meta.bay-lines > tbody > tr > td[data-label] {
    display: flex;
    align-items: baseline;
    gap: 12px;
  }
  table.wc-item-meta.bay-lines > tbody > tr > td[data-label]::before {
    content: attr(data-label);
    flex: 0 0 auto;
    width: 62px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #6B7390;
  }
  table.wc-item-meta.bay-lines .bay-line-body {
    flex: 1 1 auto;
  }
  table.wc-item-meta.bay-lines .bay-line-label {
    margin-bottom: 8px;
    font-size: 14px;
  }
  table.wc-item-meta.bay-lines .is-blank .bay-line-method {
    display: none;
  }
  table.wc-item-meta.bay-lines > tbody > tr {
    padding: 14px 20px;
  }
  table.wc-item-meta.bay-lines > tbody > tr + tr {
    border-top: 1px solid rgba(205, 209, 212, 0.5);
  }
  table.wc-item-meta.bay-lines > tbody > tr + tr > th,
  table.wc-item-meta.bay-lines > tbody > tr + tr > td {
    border-top: 0;
  }
  table.wc-item-meta.bay-lines .bay-line-label {
    margin-bottom: 10px;
  }
  table.wc-item-meta.bay-lines .bay-line-method {
    margin-bottom: 10px;
  }
  table.wc-item-meta.bay-lines .bay-none {
    display: none;
  }
}

/*
 * The site.
 *
 *   npx sass --watch --no-source-map --style=expanded src/scss/site.scss:site.css
 *
 * Compiles to /site.css, which includes/enqueue.php loads on every page.
 *
 * One sheet rather than one per template. Every rule below is named down to a
 * class that only exists where it belongs - .bay-customizer, .product-hero,
 * .site-header - so a page carries the rules for parts it does not have, and
 * nothing else. The two that could not be written that way, the customizer's
 * full height frame and the body it stops scrolling, are named down to the
 * template instead.
 *
 * Colours, breakpoints and the typeset mixin are in shared/_vars.scss, which
 * emits nothing itself. Sizes and spacing are written where they are used.
 */
/*
 * WooCommerce's notices - "Cart updated.", "Coupon applied.", a validation
 * error, an out of stock warning.
 *
 * Not scoped to the cart. They are printed on the checkout, the account pages
 * and the shop as well, and a message that looks like the site in one place
 * and like the plugin in another is worse than one that always looks like the
 * plugin.
 *
 * WooCommerce paints all three the same lilac with a purple rule on top and a
 * tick drawn from its own icon font. Here they differ by what they are: a bar
 * down the side, green for something that worked, red for something that did
 * not, and the site's own blue for anything else.
 */
.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-error,
.woocommerce-notices-wrapper .woocommerce-info,
.cart-page .woocommerce-message,
.cart-page .woocommerce-error,
.cart-page .woocommerce-info,
.checkout-page .woocommerce-message,
.checkout-page .woocommerce-error,
.checkout-page .woocommerce-info,
.account-page .woocommerce-message,
.account-page .woocommerce-error,
.account-page .woocommerce-info,
.order-page .woocommerce-message,
.order-page .woocommerce-error,
.order-page .woocommerce-info {
  font-family: "Hanken Grotesk", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.45;
  color: #161C30;
}
.woocommerce-notices-wrapper .woocommerce-message *,
.woocommerce-notices-wrapper .woocommerce-message *::before,
.woocommerce-notices-wrapper .woocommerce-message *::after,
.woocommerce-notices-wrapper .woocommerce-error *,
.woocommerce-notices-wrapper .woocommerce-error *::before,
.woocommerce-notices-wrapper .woocommerce-error *::after,
.woocommerce-notices-wrapper .woocommerce-info *,
.woocommerce-notices-wrapper .woocommerce-info *::before,
.woocommerce-notices-wrapper .woocommerce-info *::after,
.cart-page .woocommerce-message *,
.cart-page .woocommerce-message *::before,
.cart-page .woocommerce-message *::after,
.cart-page .woocommerce-error *,
.cart-page .woocommerce-error *::before,
.cart-page .woocommerce-error *::after,
.cart-page .woocommerce-info *,
.cart-page .woocommerce-info *::before,
.cart-page .woocommerce-info *::after,
.checkout-page .woocommerce-message *,
.checkout-page .woocommerce-message *::before,
.checkout-page .woocommerce-message *::after,
.checkout-page .woocommerce-error *,
.checkout-page .woocommerce-error *::before,
.checkout-page .woocommerce-error *::after,
.checkout-page .woocommerce-info *,
.checkout-page .woocommerce-info *::before,
.checkout-page .woocommerce-info *::after,
.account-page .woocommerce-message *,
.account-page .woocommerce-message *::before,
.account-page .woocommerce-message *::after,
.account-page .woocommerce-error *,
.account-page .woocommerce-error *::before,
.account-page .woocommerce-error *::after,
.account-page .woocommerce-info *,
.account-page .woocommerce-info *::before,
.account-page .woocommerce-info *::after,
.order-page .woocommerce-message *,
.order-page .woocommerce-message *::before,
.order-page .woocommerce-message *::after,
.order-page .woocommerce-error *,
.order-page .woocommerce-error *::before,
.order-page .woocommerce-error *::after,
.order-page .woocommerce-info *,
.order-page .woocommerce-info *::before,
.order-page .woocommerce-info *::after {
  box-sizing: border-box;
}
.woocommerce-notices-wrapper .woocommerce-message h1, .woocommerce-notices-wrapper .woocommerce-message h2, .woocommerce-notices-wrapper .woocommerce-message h3, .woocommerce-notices-wrapper .woocommerce-message h4, .woocommerce-notices-wrapper .woocommerce-message p, .woocommerce-notices-wrapper .woocommerce-message ol, .woocommerce-notices-wrapper .woocommerce-message ul, .woocommerce-notices-wrapper .woocommerce-message dl, .woocommerce-notices-wrapper .woocommerce-message dd, .woocommerce-notices-wrapper .woocommerce-message figure,
.woocommerce-notices-wrapper .woocommerce-error h1,
.woocommerce-notices-wrapper .woocommerce-error h2,
.woocommerce-notices-wrapper .woocommerce-error h3,
.woocommerce-notices-wrapper .woocommerce-error h4,
.woocommerce-notices-wrapper .woocommerce-error p,
.woocommerce-notices-wrapper .woocommerce-error ol,
.woocommerce-notices-wrapper .woocommerce-error ul,
.woocommerce-notices-wrapper .woocommerce-error dl,
.woocommerce-notices-wrapper .woocommerce-error dd,
.woocommerce-notices-wrapper .woocommerce-error figure,
.woocommerce-notices-wrapper .woocommerce-info h1,
.woocommerce-notices-wrapper .woocommerce-info h2,
.woocommerce-notices-wrapper .woocommerce-info h3,
.woocommerce-notices-wrapper .woocommerce-info h4,
.woocommerce-notices-wrapper .woocommerce-info p,
.woocommerce-notices-wrapper .woocommerce-info ol,
.woocommerce-notices-wrapper .woocommerce-info ul,
.woocommerce-notices-wrapper .woocommerce-info dl,
.woocommerce-notices-wrapper .woocommerce-info dd,
.woocommerce-notices-wrapper .woocommerce-info figure,
.cart-page .woocommerce-message h1,
.cart-page .woocommerce-message h2,
.cart-page .woocommerce-message h3,
.cart-page .woocommerce-message h4,
.cart-page .woocommerce-message p,
.cart-page .woocommerce-message ol,
.cart-page .woocommerce-message ul,
.cart-page .woocommerce-message dl,
.cart-page .woocommerce-message dd,
.cart-page .woocommerce-message figure,
.cart-page .woocommerce-error h1,
.cart-page .woocommerce-error h2,
.cart-page .woocommerce-error h3,
.cart-page .woocommerce-error h4,
.cart-page .woocommerce-error p,
.cart-page .woocommerce-error ol,
.cart-page .woocommerce-error ul,
.cart-page .woocommerce-error dl,
.cart-page .woocommerce-error dd,
.cart-page .woocommerce-error figure,
.cart-page .woocommerce-info h1,
.cart-page .woocommerce-info h2,
.cart-page .woocommerce-info h3,
.cart-page .woocommerce-info h4,
.cart-page .woocommerce-info p,
.cart-page .woocommerce-info ol,
.cart-page .woocommerce-info ul,
.cart-page .woocommerce-info dl,
.cart-page .woocommerce-info dd,
.cart-page .woocommerce-info figure,
.checkout-page .woocommerce-message h1,
.checkout-page .woocommerce-message h2,
.checkout-page .woocommerce-message h3,
.checkout-page .woocommerce-message h4,
.checkout-page .woocommerce-message p,
.checkout-page .woocommerce-message ol,
.checkout-page .woocommerce-message ul,
.checkout-page .woocommerce-message dl,
.checkout-page .woocommerce-message dd,
.checkout-page .woocommerce-message figure,
.checkout-page .woocommerce-error h1,
.checkout-page .woocommerce-error h2,
.checkout-page .woocommerce-error h3,
.checkout-page .woocommerce-error h4,
.checkout-page .woocommerce-error p,
.checkout-page .woocommerce-error ol,
.checkout-page .woocommerce-error ul,
.checkout-page .woocommerce-error dl,
.checkout-page .woocommerce-error dd,
.checkout-page .woocommerce-error figure,
.checkout-page .woocommerce-info h1,
.checkout-page .woocommerce-info h2,
.checkout-page .woocommerce-info h3,
.checkout-page .woocommerce-info h4,
.checkout-page .woocommerce-info p,
.checkout-page .woocommerce-info ol,
.checkout-page .woocommerce-info ul,
.checkout-page .woocommerce-info dl,
.checkout-page .woocommerce-info dd,
.checkout-page .woocommerce-info figure,
.account-page .woocommerce-message h1,
.account-page .woocommerce-message h2,
.account-page .woocommerce-message h3,
.account-page .woocommerce-message h4,
.account-page .woocommerce-message p,
.account-page .woocommerce-message ol,
.account-page .woocommerce-message ul,
.account-page .woocommerce-message dl,
.account-page .woocommerce-message dd,
.account-page .woocommerce-message figure,
.account-page .woocommerce-error h1,
.account-page .woocommerce-error h2,
.account-page .woocommerce-error h3,
.account-page .woocommerce-error h4,
.account-page .woocommerce-error p,
.account-page .woocommerce-error ol,
.account-page .woocommerce-error ul,
.account-page .woocommerce-error dl,
.account-page .woocommerce-error dd,
.account-page .woocommerce-error figure,
.account-page .woocommerce-info h1,
.account-page .woocommerce-info h2,
.account-page .woocommerce-info h3,
.account-page .woocommerce-info h4,
.account-page .woocommerce-info p,
.account-page .woocommerce-info ol,
.account-page .woocommerce-info ul,
.account-page .woocommerce-info dl,
.account-page .woocommerce-info dd,
.account-page .woocommerce-info figure,
.order-page .woocommerce-message h1,
.order-page .woocommerce-message h2,
.order-page .woocommerce-message h3,
.order-page .woocommerce-message h4,
.order-page .woocommerce-message p,
.order-page .woocommerce-message ol,
.order-page .woocommerce-message ul,
.order-page .woocommerce-message dl,
.order-page .woocommerce-message dd,
.order-page .woocommerce-message figure,
.order-page .woocommerce-error h1,
.order-page .woocommerce-error h2,
.order-page .woocommerce-error h3,
.order-page .woocommerce-error h4,
.order-page .woocommerce-error p,
.order-page .woocommerce-error ol,
.order-page .woocommerce-error ul,
.order-page .woocommerce-error dl,
.order-page .woocommerce-error dd,
.order-page .woocommerce-error figure,
.order-page .woocommerce-info h1,
.order-page .woocommerce-info h2,
.order-page .woocommerce-info h3,
.order-page .woocommerce-info h4,
.order-page .woocommerce-info p,
.order-page .woocommerce-info ol,
.order-page .woocommerce-info ul,
.order-page .woocommerce-info dl,
.order-page .woocommerce-info dd,
.order-page .woocommerce-info figure {
  margin: 0;
  padding: 0;
}
.woocommerce-notices-wrapper .woocommerce-message ol, .woocommerce-notices-wrapper .woocommerce-message ul,
.woocommerce-notices-wrapper .woocommerce-error ol,
.woocommerce-notices-wrapper .woocommerce-error ul,
.woocommerce-notices-wrapper .woocommerce-info ol,
.woocommerce-notices-wrapper .woocommerce-info ul,
.cart-page .woocommerce-message ol,
.cart-page .woocommerce-message ul,
.cart-page .woocommerce-error ol,
.cart-page .woocommerce-error ul,
.cart-page .woocommerce-info ol,
.cart-page .woocommerce-info ul,
.checkout-page .woocommerce-message ol,
.checkout-page .woocommerce-message ul,
.checkout-page .woocommerce-error ol,
.checkout-page .woocommerce-error ul,
.checkout-page .woocommerce-info ol,
.checkout-page .woocommerce-info ul,
.account-page .woocommerce-message ol,
.account-page .woocommerce-message ul,
.account-page .woocommerce-error ol,
.account-page .woocommerce-error ul,
.account-page .woocommerce-info ol,
.account-page .woocommerce-info ul,
.order-page .woocommerce-message ol,
.order-page .woocommerce-message ul,
.order-page .woocommerce-error ol,
.order-page .woocommerce-error ul,
.order-page .woocommerce-info ol,
.order-page .woocommerce-info ul {
  list-style: none;
}
.woocommerce-notices-wrapper .woocommerce-message a,
.woocommerce-notices-wrapper .woocommerce-error a,
.woocommerce-notices-wrapper .woocommerce-info a,
.cart-page .woocommerce-message a,
.cart-page .woocommerce-error a,
.cart-page .woocommerce-info a,
.checkout-page .woocommerce-message a,
.checkout-page .woocommerce-error a,
.checkout-page .woocommerce-info a,
.account-page .woocommerce-message a,
.account-page .woocommerce-error a,
.account-page .woocommerce-info a,
.order-page .woocommerce-message a,
.order-page .woocommerce-error a,
.order-page .woocommerce-info a {
  color: inherit;
}
.woocommerce-notices-wrapper .woocommerce-message button:not(:where(.bay-button)),
.woocommerce-notices-wrapper .woocommerce-error button:not(:where(.bay-button)),
.woocommerce-notices-wrapper .woocommerce-info button:not(:where(.bay-button)),
.cart-page .woocommerce-message button:not(:where(.bay-button)),
.cart-page .woocommerce-error button:not(:where(.bay-button)),
.cart-page .woocommerce-info button:not(:where(.bay-button)),
.checkout-page .woocommerce-message button:not(:where(.bay-button)),
.checkout-page .woocommerce-error button:not(:where(.bay-button)),
.checkout-page .woocommerce-info button:not(:where(.bay-button)),
.account-page .woocommerce-message button:not(:where(.bay-button)),
.account-page .woocommerce-error button:not(:where(.bay-button)),
.account-page .woocommerce-info button:not(:where(.bay-button)),
.order-page .woocommerce-message button:not(:where(.bay-button)),
.order-page .woocommerce-error button:not(:where(.bay-button)),
.order-page .woocommerce-info button:not(:where(.bay-button)) {
  font-family: "Hanken Grotesk", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.woocommerce-notices-wrapper .woocommerce-message input,
.woocommerce-notices-wrapper .woocommerce-message textarea,
.woocommerce-notices-wrapper .woocommerce-message select,
.woocommerce-notices-wrapper .woocommerce-error input,
.woocommerce-notices-wrapper .woocommerce-error textarea,
.woocommerce-notices-wrapper .woocommerce-error select,
.woocommerce-notices-wrapper .woocommerce-info input,
.woocommerce-notices-wrapper .woocommerce-info textarea,
.woocommerce-notices-wrapper .woocommerce-info select,
.cart-page .woocommerce-message input,
.cart-page .woocommerce-message textarea,
.cart-page .woocommerce-message select,
.cart-page .woocommerce-error input,
.cart-page .woocommerce-error textarea,
.cart-page .woocommerce-error select,
.cart-page .woocommerce-info input,
.cart-page .woocommerce-info textarea,
.cart-page .woocommerce-info select,
.checkout-page .woocommerce-message input,
.checkout-page .woocommerce-message textarea,
.checkout-page .woocommerce-message select,
.checkout-page .woocommerce-error input,
.checkout-page .woocommerce-error textarea,
.checkout-page .woocommerce-error select,
.checkout-page .woocommerce-info input,
.checkout-page .woocommerce-info textarea,
.checkout-page .woocommerce-info select,
.account-page .woocommerce-message input,
.account-page .woocommerce-message textarea,
.account-page .woocommerce-message select,
.account-page .woocommerce-error input,
.account-page .woocommerce-error textarea,
.account-page .woocommerce-error select,
.account-page .woocommerce-info input,
.account-page .woocommerce-info textarea,
.account-page .woocommerce-info select,
.order-page .woocommerce-message input,
.order-page .woocommerce-message textarea,
.order-page .woocommerce-message select,
.order-page .woocommerce-error input,
.order-page .woocommerce-error textarea,
.order-page .woocommerce-error select,
.order-page .woocommerce-info input,
.order-page .woocommerce-info textarea,
.order-page .woocommerce-info select {
  font-family: "Hanken Grotesk", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: inherit;
  color: inherit;
}
.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-error,
.woocommerce-notices-wrapper .woocommerce-info,
.cart-page .woocommerce-message,
.cart-page .woocommerce-error,
.cart-page .woocommerce-info,
.checkout-page .woocommerce-message,
.checkout-page .woocommerce-error,
.checkout-page .woocommerce-info,
.account-page .woocommerce-message,
.account-page .woocommerce-error,
.account-page .woocommerce-info,
.order-page .woocommerce-message,
.order-page .woocommerce-error,
.order-page .woocommerce-info {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin: 0 0 24px;
  padding: 14px 18px;
  font-size: 14px;
  color: #161C30;
  background: #ECEEF7;
  border: 0;
  border-left: 4px solid #3E4576;
  border-radius: 8px;
  list-style: none;
}
.woocommerce-notices-wrapper .woocommerce-message::before, .woocommerce-notices-wrapper .woocommerce-message::after,
.woocommerce-notices-wrapper .woocommerce-error::before,
.woocommerce-notices-wrapper .woocommerce-error::after,
.woocommerce-notices-wrapper .woocommerce-info::before,
.woocommerce-notices-wrapper .woocommerce-info::after,
.cart-page .woocommerce-message::before,
.cart-page .woocommerce-message::after,
.cart-page .woocommerce-error::before,
.cart-page .woocommerce-error::after,
.cart-page .woocommerce-info::before,
.cart-page .woocommerce-info::after,
.checkout-page .woocommerce-message::before,
.checkout-page .woocommerce-message::after,
.checkout-page .woocommerce-error::before,
.checkout-page .woocommerce-error::after,
.checkout-page .woocommerce-info::before,
.checkout-page .woocommerce-info::after,
.account-page .woocommerce-message::before,
.account-page .woocommerce-message::after,
.account-page .woocommerce-error::before,
.account-page .woocommerce-error::after,
.account-page .woocommerce-info::before,
.account-page .woocommerce-info::after,
.order-page .woocommerce-message::before,
.order-page .woocommerce-message::after,
.order-page .woocommerce-error::before,
.order-page .woocommerce-error::after,
.order-page .woocommerce-info::before,
.order-page .woocommerce-info::after {
  content: none;
}
.woocommerce-notices-wrapper .woocommerce-message li,
.woocommerce-notices-wrapper .woocommerce-error li,
.woocommerce-notices-wrapper .woocommerce-info li,
.cart-page .woocommerce-message li,
.cart-page .woocommerce-error li,
.cart-page .woocommerce-info li,
.checkout-page .woocommerce-message li,
.checkout-page .woocommerce-error li,
.checkout-page .woocommerce-info li,
.account-page .woocommerce-message li,
.account-page .woocommerce-error li,
.account-page .woocommerce-info li,
.order-page .woocommerce-message li,
.order-page .woocommerce-error li,
.order-page .woocommerce-info li {
  margin: 0;
  list-style: none;
}
.woocommerce-notices-wrapper .woocommerce-message a,
.woocommerce-notices-wrapper .woocommerce-error a,
.woocommerce-notices-wrapper .woocommerce-info a,
.cart-page .woocommerce-message a,
.cart-page .woocommerce-error a,
.cart-page .woocommerce-info a,
.checkout-page .woocommerce-message a,
.checkout-page .woocommerce-error a,
.checkout-page .woocommerce-info a,
.account-page .woocommerce-message a,
.account-page .woocommerce-error a,
.account-page .woocommerce-info a,
.order-page .woocommerce-message a,
.order-page .woocommerce-error a,
.order-page .woocommerce-info a {
  color: #161C30;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.woocommerce-notices-wrapper .woocommerce-message .button,
.woocommerce-notices-wrapper .woocommerce-error .button,
.woocommerce-notices-wrapper .woocommerce-info .button,
.cart-page .woocommerce-message .button,
.cart-page .woocommerce-error .button,
.cart-page .woocommerce-info .button,
.checkout-page .woocommerce-message .button,
.checkout-page .woocommerce-error .button,
.checkout-page .woocommerce-info .button,
.account-page .woocommerce-message .button,
.account-page .woocommerce-error .button,
.account-page .woocommerce-info .button,
.order-page .woocommerce-message .button,
.order-page .woocommerce-error .button,
.order-page .woocommerce-info .button {
  order: 2;
  margin-left: auto;
  padding: 8px 18px;
  font-family: "Hanken Grotesk", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #161C30;
  text-decoration: none;
  background: #ffffff;
  border: 1.5px solid #DADDEA;
  border-radius: 99px;
}
.woocommerce-notices-wrapper .woocommerce-message .button:hover,
.woocommerce-notices-wrapper .woocommerce-error .button:hover,
.woocommerce-notices-wrapper .woocommerce-info .button:hover,
.cart-page .woocommerce-message .button:hover,
.cart-page .woocommerce-error .button:hover,
.cart-page .woocommerce-info .button:hover,
.checkout-page .woocommerce-message .button:hover,
.checkout-page .woocommerce-error .button:hover,
.checkout-page .woocommerce-info .button:hover,
.account-page .woocommerce-message .button:hover,
.account-page .woocommerce-error .button:hover,
.account-page .woocommerce-info .button:hover,
.order-page .woocommerce-message .button:hover,
.order-page .woocommerce-error .button:hover,
.order-page .woocommerce-info .button:hover {
  border-color: #161C30;
}
.woocommerce-notices-wrapper .woocommerce-message,
.cart-page .woocommerce-message,
.checkout-page .woocommerce-message,
.account-page .woocommerce-message,
.order-page .woocommerce-message {
  border-left-color: #8FD123;
}
.woocommerce-notices-wrapper .woocommerce-error,
.cart-page .woocommerce-error,
.checkout-page .woocommerce-error,
.account-page .woocommerce-error,
.order-page .woocommerce-error {
  color: #B3261E;
  border-left-color: #B3261E;
}
.woocommerce-notices-wrapper .woocommerce-error a,
.cart-page .woocommerce-error a,
.checkout-page .woocommerce-error a,
.account-page .woocommerce-error a,
.order-page .woocommerce-error a {
  color: #B3261E;
}
.woocommerce-notices-wrapper .woocommerce-info,
.cart-page .woocommerce-info,
.checkout-page .woocommerce-info,
.account-page .woocommerce-info,
.order-page .woocommerce-info {
  border-left-color: #3E4576;
}

.woocommerce-notices-wrapper:not(:empty) {
  max-width: 1440px;
  margin: 0 auto;
  padding: 24px 60px 0;
}
@media (max-width: 767px) {
  .woocommerce-notices-wrapper:not(:empty) {
    padding: 16px 24px 0;
  }
}

.cart-page .woocommerce-notices-wrapper:not(:empty),
.account-page .woocommerce-notices-wrapper:not(:empty) {
  max-width: none;
  padding: 0;
}

/*
 * The site.
 *
 *   npx sass --watch --no-source-map --style=expanded src/scss/site.scss:site.css
 *
 * Compiles to /site.css, which includes/enqueue.php loads on every page.
 *
 * One sheet rather than one per template. Every rule below is named down to a
 * class that only exists where it belongs - .bay-customizer, .product-hero,
 * .site-header - so a page carries the rules for parts it does not have, and
 * nothing else. The two that could not be written that way, the customizer's
 * full height frame and the body it stops scrolling, are named down to the
 * template instead.
 *
 * Colours, breakpoints and the typeset mixin are in shared/_vars.scss, which
 * emits nothing itself. Sizes and spacing are written where they are used.
 */
/*
 * The country and state fields, which WooCommerce turns into selectWoo - its
 * fork of select2. The native select is hidden and a box of spans is drawn in
 * its place, with the list of options in a second box.
 *
 * These rules are the one place in this stylesheet not nested inside a section
 * of the site, and they have to be: select2 appends the open list to <body>,
 * outside whatever page it was opened from. Nothing scoped to .checkout-page
 * or .account-page can reach it, which is why the list came up in Times New
 * Roman while the field above it wore the site.
 *
 * Scoped to select2's own classes instead, so it still only lands where a
 * select2 exists - on the checkout and on the account's addresses, and on
 * anything else that grows one later.
 *
 * Two classes each, matching select2's own; site.css loads after its sheet, so
 * the ties fall this way.
 */
.select2-container--default .select2-selection--single {
  height: 49px;
  background: #ffffff;
  border: 1px solid #DADDEA;
  border-radius: 10px;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  padding: 0 15px;
  font-family: "Hanken Grotesk", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 47px;
  color: #161C30;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 47px;
  right: 8px;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: #cdd1d4;
}

.select2-container--default.select2-container--open .select2-selection--single {
  border-color: #adb4ea;
  box-shadow: 0 0 0 3px rgba(62, 69, 118, 0.12);
}

/*
 * select2 squares off the two corners nearest the list so the field and the
 * list read as one joined box. Here they are two: the list stands off the
 * field with its own border all the way round, which is the shape the rest of
 * the site's menus have.
 *
 * Three classes and the same two states select2 names, because that is what it
 * takes to answer a rule already written that way.
 */
.select2-container--default.select2-container--open.select2-container--above .select2-selection--single,
.select2-container--default.select2-container--open.select2-container--below .select2-selection--single {
  border-radius: 10px;
}

/*
 * The list. Told its own face, because it is not inside the page it belongs
 * to and inherits nothing from it.
 */
.select2-container--default .select2-dropdown--below {
  margin-top: -15px;
}

.select2-container--default .select2-dropdown--above {
  margin-top: -5px;
}

.select2-container--default .select2-dropdown {
  font-family: "Hanken Grotesk", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
  color: #161C30;
  background: #ffffff;
  border: 1px solid #DADDEA;
  border-radius: 10px;
  box-shadow: 0 12px 30px -14px rgba(22, 28, 48, 0.35);
  overflow: hidden;
}

.select2-container--default .select2-search--dropdown {
  padding: 10px 10px 6px;
}
.select2-container--default .select2-search--dropdown .select2-search__field {
  padding: 10px 12px;
  font-family: "Hanken Grotesk", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.4;
  color: #161C30;
  background: #ffffff;
  border: 1px solid #DADDEA;
  border-radius: 8px;
}
.select2-container--default .select2-search--dropdown .select2-search__field:focus {
  outline: none;
  border-color: #adb4ea;
}

.select2-container--default .select2-results__options {
  padding: 0 6px 6px;
  /*
   * Only where the ::-webkit rules below cannot reach.
   *
   * Chrome honours one spelling or the other, never both: given a
   * scrollbar-width or a scrollbar-color it draws the platform's own bar and
   * ignores every ::-webkit-scrollbar rule on the element - which on Windows
   * means a wide grey track with a stepper arrow at each end, the thing these
   * rules exist to avoid. Firefox is the other way round and has only these.
   *
   * So they are asked for only where the pseudo element is not understood,
   * which is exactly Firefox.
   */
}
@supports not selector(::-webkit-scrollbar) {
  .select2-container--default .select2-results__options {
    scrollbar-width: thin;
    scrollbar-color: #cdd1d4 transparent;
  }
}
.select2-container--default .select2-results__options::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.select2-container--default .select2-results__options::-webkit-scrollbar-track {
  background: transparent;
}
.select2-container--default .select2-results__options::-webkit-scrollbar-thumb {
  background: #cdd1d4;
  border-radius: 999px;
}
.select2-container--default .select2-results__options::-webkit-scrollbar-thumb:hover {
  background: #DADDEA;
}

.select2-container--default .select2-results__option {
  padding: 9px 12px;
  border-radius: 8px;
}

/*
 * The row under the pointer, and the row already chosen. select2 paints the
 * first a solid blue and leaves the second grey; both are named through the
 * attribute they carry, because select2 4.0 writes aria-selected and later
 * versions write data-selected, and a theme that outlives the plugin's next
 * update should answer to either.
 */
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] {
  color: #161C30;
  background: #ECEEF7;
}

.select2-container--default .select2-results__option[aria-selected=true],
.select2-container--default .select2-results__option[data-selected=true] {
  font-weight: 600;
  color: #161C30;
  background: #ECEEF7;
}

.select2-container--default .select2-results__message {
  padding: 9px 12px;
  color: #6B7390;
}

/*
 * The site.
 *
 *   npx sass --watch --no-source-map --style=expanded src/scss/site.scss:site.css
 *
 * Compiles to /site.css, which includes/enqueue.php loads on every page.
 *
 * One sheet rather than one per template. Every rule below is named down to a
 * class that only exists where it belongs - .bay-customizer, .product-hero,
 * .site-header - so a page carries the rules for parts it does not have, and
 * nothing else. The two that could not be written that way, the customizer's
 * full height frame and the body it stops scrolling, are named down to the
 * template instead.
 *
 * Colours, breakpoints and the typeset mixin are in shared/_vars.scss, which
 * emits nothing itself. Sizes and spacing are written where they are used.
 */
/*
 * The customizer's chrome and the parts every screen shares: the bar, the two
 * column frame, the stepper, the footer nav and the buttons, plus the
 * placeholders standing in for images that do not exist yet.
 *
 * Nesting mirrors the markup, so a rule sits where the element does. Anything
 * that varies by screen lives in that screen's own file.
 *
 * The main column carries the left gutter and nothing carries a right one:
 * the design runs the content out to the sidebar and lets the grid's column
 * gap be the space between them.
 */
/*
 * The customizer is a page like any other: the document scrolls, and the
 * wizard is as long as the work in it.
 *
 * It used to be a box the size of the window with the cards scrolling inside
 * it, which meant a wheel that did nothing until the pointer was over the
 * right part of the screen, and a page whose length had no relation to how
 * much there was to do. The summary is the only thing that still holds itself
 * to the window - see .customizer-aside, which sticks.
 */
.bay-customizer .screen-title,
.bay-customizer .screen-subtitle,
.bay-customizer .card-label,
.bay-customizer .quantity-title,
.bay-customizer .summary-heading,
.bay-customizer .summary-style,
.bay-customizer .summary-total-value {
  font-family: "Schibsted Grotesk", "Hanken Grotesk", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.bay-customizer {
  display: flex;
  flex-direction: column;
}
.bay-customizer.is-restoring {
  visibility: hidden;
}
.bay-customizer {
  font-size: 14px;
  background: #ffffff;
  font-family: "Hanken Grotesk", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.45;
  color: #161C30;
}
.bay-customizer *,
.bay-customizer *::before,
.bay-customizer *::after {
  box-sizing: border-box;
}
.bay-customizer h1, .bay-customizer h2, .bay-customizer h3, .bay-customizer h4, .bay-customizer p, .bay-customizer ol, .bay-customizer ul, .bay-customizer dl, .bay-customizer dd, .bay-customizer figure {
  margin: 0;
  padding: 0;
}
.bay-customizer ol, .bay-customizer ul {
  list-style: none;
}
.bay-customizer a {
  color: inherit;
}
.bay-customizer button:not(:where(.bay-button)) {
  font-family: "Hanken Grotesk", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.bay-customizer input,
.bay-customizer textarea,
.bay-customizer select {
  font-family: "Hanken Grotesk", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: inherit;
  color: inherit;
}
.bay-customizer .customizer-body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 0 60px;
}
@media (max-width: 1024px) {
  .bay-customizer .customizer-body {
    padding: 0 40px;
  }
}
@media (max-width: 767px) {
  .bay-customizer .customizer-body {
    padding: 0 24px;
  }
}
.bay-customizer .customizer-body-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  column-gap: 40px;
  align-items: start;
  max-width: 1440px;
  margin: 0 auto;
}
@media (max-width: 1100px) {
  .bay-customizer .customizer-body-inner {
    grid-template-columns: minmax(0, 1fr);
    column-gap: 0;
  }
}
.bay-customizer {
  /*
   * A product with nothing to customize.
   *
   * The frame is the wizard's, so the 400 the summary would have taken was
   * still reserved and the little there is to say stood against the left edge
   * of a screen that was otherwise empty. One column here, and it sits in the
   * middle of it.
   */
}
.bay-customizer.is-unavailable .customizer-body-inner {
  grid-template-columns: minmax(0, 1fr);
  column-gap: 0;
  place-content: center;
  justify-items: center;
  padding-bottom: 60px;
}
.bay-customizer.is-unavailable .screen-head {
  max-width: 46ch;
  text-align: center;
}
.bay-customizer.is-unavailable .screen-title {
  font-size: 32px;
  font-weight: 600;
  line-height: 120%;
}
@media (max-width: 767px) {
  .bay-customizer.is-unavailable .screen-title {
    font-size: 24px;
  }
}
.bay-customizer.is-unavailable .screen-lede {
  margin-top: 12px;
  font-size: 16px;
  color: #535C78;
}
@media (max-width: 767px) {
  .bay-customizer.is-unavailable .screen-lede {
    font-size: 14px;
  }
}
.bay-customizer.is-unavailable .button {
  margin-top: 28px;
}
.bay-customizer .customizer-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
@media (max-width: 1100px) {
  .bay-customizer .customizer-main {
    padding-bottom: 120px;
  }
}
.bay-customizer .stepper {
  position: relative;
  display: flex;
  justify-content: space-between;
  flex: 0 0 auto;
  padding: 40px 0 0;
}
.bay-customizer .stepper::before, .bay-customizer .stepper::after {
  content: "";
  position: absolute;
  top: 59px;
  left: 108px;
  height: 2px;
}
.bay-customizer .stepper::before {
  right: 65px;
  background: #cdd1d4;
}
.bay-customizer .stepper::after {
  width: 0;
  background: #161C30;
}
.bay-customizer .stepper .step {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}
.bay-customizer .stepper .step-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  font-weight: 600;
  color: #6B7390;
  background: #ECEEF7;
  border-radius: 50%;
}
.bay-customizer .stepper .step-mark .step-number {
  font-size: 14px;
}
.bay-customizer .stepper .step-mark .glyph {
  display: none;
  font-size: 20px;
}
.bay-customizer .stepper .step-label {
  font-size: 15px;
  color: #6B7390;
  white-space: nowrap;
}
@media (max-width: 1100px) {
  .bay-customizer .stepper .step-label {
    font-size: 14px;
  }
}
@media (max-width: 767px) {
  .bay-customizer .stepper {
    padding-top: 30px;
  }
  .bay-customizer .stepper .step {
    width: 30%;
    gap: 4px;
  }
  .bay-customizer .stepper .step-mark {
    width: 28px;
    height: 28px;
  }
  .bay-customizer .stepper .step-mark .step-number {
    font-size: 10px;
  }
  .bay-customizer .stepper .step-label {
    font-size: 10px;
    text-align: center;
    white-space: normal;
  }
  .bay-customizer .stepper::before, .bay-customizer .stepper::after {
    top: 45px;
    left: 15%;
  }
  .bay-customizer .stepper::before {
    right: 15%;
  }
}
.bay-customizer .customizer-pane {
  position: relative;
  margin-top: 20px;
  padding-bottom: 28px;
}
@media (max-width: 1100px) {
  .bay-customizer .customizer-pane {
    margin-top: 40px;
  }
}
@media (max-width: 767px) {
  .bay-customizer .customizer-pane {
    margin-top: 30px;
  }
}
.bay-customizer .customizer-pane .screen {
  display: none;
}
.bay-customizer {
  /*
   * The way forward, held to the bottom of the window.
   *
   * It used to sit outside the box that scrolled, so it could not leave the
   * screen. Now that the page is what scrolls it would be at the end of the
   * form, and on the first step with four locations open that is a long way
   * past the work - so it stays, over the cards, on its own ground.
   *
   * Not on the sheet's screens: there the bar at the bottom of the window is
   * the summary's, and two of them stacked is one too many.
   */
}
.bay-customizer .customizer-nav {
  position: sticky;
  bottom: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  flex: 0 0 auto;
  padding: 20px 0 20px;
  background: #ffffff;
}
@media (max-width: 1100px) {
  .bay-customizer .customizer-nav {
    position: static;
    background: none;
  }
}
.bay-customizer .customizer-nav {
  /*
   * Why the button beside it cannot be pressed.
   *
   * A line of its own above the row rather than an item in it: as a peer it
   * sat after the checkout button, and the automatic margin that holds that
   * button to the right edge pushed the sentence there instead - so the
   * button came away from the edge and the row read as broken.
   *
   * Ranged right, under nothing and over the button it is about.
   */
}
.bay-customizer .customizer-nav .customizer-unavailable {
  flex: 1 0 100%;
  order: -1;
  margin-bottom: 4px;
  font-size: 13px;
  text-align: right;
  color: #B3261E;
}
@media (max-width: 767px) {
  .bay-customizer .customizer-nav .customizer-unavailable {
    font-size: 12px;
    text-align: center;
  }
}
.bay-customizer .customizer-nav .button {
  font-family: "Inter", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.bay-customizer .customizer-nav [data-nav=next],
.bay-customizer .customizer-nav [data-nav=checkout] {
  margin-left: auto;
}
.bay-customizer .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 13px 30px;
  font-size: 16px;
  font-weight: 500;
  color: #161C30;
  background: #ffffff;
  border: 1px solid black;
  border-radius: 999px;
}
@media (max-width: 767px) {
  .bay-customizer .button {
    padding: 10px 20px;
  }
}
.bay-customizer .button:hover {
  border-color: #161C30;
}
.bay-customizer .button .glyph {
  font-size: 16px;
  color: #161C30;
}
.bay-customizer .button.button-solid {
  color: #161C30;
  background: #8FD123;
  border-color: #8FD123;
}
.bay-customizer .button.button-solid:hover {
  border-color: #8FD123;
  filter: brightness(0.95);
}
.bay-customizer .button.button-solid .glyph {
  color: currentColor;
}
.bay-customizer .button {
  /*
   * Nothing to press.
   *
   * After the solid rule rather than before it, so the hover it cancels is
   * the one that rule sets - a primary button that still lights up under the
   * pointer while refusing the click is worse than one that never invited it.
   */
}
.bay-customizer .button:disabled {
  opacity: 0.45;
  cursor: default;
}
.bay-customizer .button:disabled:hover {
  filter: none;
}
.bay-customizer .share-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  font-size: 16px;
  color: #161C30;
  background: #f6f6f6;
  border: 1px solid #DADDEA;
  border-radius: 50%;
}
.bay-customizer .share-button:hover {
  border-color: #161C30;
}
.bay-customizer .share-button:disabled {
  opacity: 0.5;
  cursor: default;
}
.bay-customizer .share-button:disabled:hover {
  border-color: #DADDEA;
}
.bay-customizer {
  /*
   * The sidebar is a card standing off the edges, not a bordered column, and
   * it is the one thing on the page that stays with the window.
   *
   * Stuck rather than scrolled: the wizard below it can run to any length, and
   * a total that leaves the screen on the second card is a total nobody reads.
   * Its own height is the window less whatever the admin bar is taking, which
   * WordPress publishes as a custom property - the only signal that is present
   * exactly when the bar is and right about how tall it is.
   *
   * A column rather than a row, so the card inside it shrinks against that
   * height instead of overflowing it. Short summaries are still their own
   * height; it is only a long one that gives, and what gives inside it is the
   * middle - see .summary-scroll.
   *
   * The site header does not come into the arithmetic. It is not stuck itself,
   * so once it has scrolled away the card pins against the window, and nothing
   * here has to know how tall it was.
   */
}
.bay-customizer .customizer-aside {
  position: sticky;
  top: var(--wp-admin--admin-bar--height, 0px);
  align-self: start;
  display: flex;
  flex-direction: column;
  max-height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px));
  padding: 40px 0;
}
.bay-customizer .ref-image {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  overflow: hidden;
  color: #cdd1d4;
  background: #EDEDED;
  border: 1px solid #DADDEA;
  border-radius: 6px;
}
.bay-customizer .ref-image .ref-cross {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.bay-customizer .ref-image .ref-mark {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: #EDEDED;
}
.bay-customizer .ref-image .ref-mark .glyph {
  font-size: 26px;
}
.bay-customizer .ref-image .ref-mark .ref-caption {
  font-size: 12px;
  line-height: 1.3;
  text-align: center;
  color: #161C30;
}
.bay-customizer .mallet {
  display: block;
  width: 100%;
  height: auto;
}
.bay-customizer .mallet .mallet-head,
.bay-customizer .mallet .mallet-handle {
  fill: #e9c08a;
}
.bay-customizer .mallet[data-highlight=head] .mallet-head, .bay-customizer .mallet[data-highlight=handle] .mallet-handle {
  fill: #f2705c;
}
.bay-customizer .tile-glyph {
  display: block;
  width: 100%;
  height: 100%;
  color: #cdd1d4;
}

/*
 * Which step is showing. Everything below reads data-step off the wrapper, so
 * no screen, button or mark has to be told what it is.
 */
.bay-customizer[data-step="1"] .screen[data-screen="1"],
.bay-customizer[data-step="2"] .screen[data-screen="2"] {
  display: block;
}

.bay-customizer[data-step="1"] [data-nav=back],
.bay-customizer[data-step="2"] [data-nav=next] {
  display: none;
}

.bay-customizer:not([data-step="2"]) [data-nav=checkout] {
  display: none;
}

.bay-customizer[data-step="2"] .stepper::after {
  width: calc(100% - 173px);
}

@media (max-width: 767px) {
  .bay-customizer[data-step="2"] .stepper::after {
    width: 70%;
  }
}
.bay-customizer[data-step="1"] .step:nth-child(1) .step-mark,
.bay-customizer[data-step="2"] .step:nth-child(2) .step-mark {
  color: #ECEEF7;
  background: #161C30;
}
.bay-customizer[data-step="1"] .step:nth-child(1) .step-label,
.bay-customizer[data-step="2"] .step:nth-child(2) .step-label {
  color: #161C30;
  font-weight: 600;
}

.bay-customizer[data-step="2"] .step:nth-child(1) .step-mark {
  color: #161C30;
  background: #8FD123;
}
.bay-customizer[data-step="2"] .step:nth-child(1) .step-mark .step-number {
  display: none;
}
.bay-customizer[data-step="2"] .step:nth-child(1) .step-mark .glyph {
  display: block;
}
.bay-customizer[data-step="2"] .step:nth-child(1) .step-label {
  color: #161C30;
}

/*
 * The site.
 *
 *   npx sass --watch --no-source-map --style=expanded src/scss/site.scss:site.css
 *
 * Compiles to /site.css, which includes/enqueue.php loads on every page.
 *
 * One sheet rather than one per template. Every rule below is named down to a
 * class that only exists where it belongs - .bay-customizer, .product-hero,
 * .site-header - so a page carries the rules for parts it does not have, and
 * nothing else. The two that could not be written that way, the customizer's
 * full height frame and the body it stops scrolling, are named down to the
 * template instead.
 *
 * Colours, breakpoints and the typeset mixin are in shared/_vars.scss, which
 * emits nothing itself. Sizes and spacing are written where they are used.
 */
/*
 * The Order Summary card.
 *
 * It stands off the edges rather than sitting in a bordered column, and fills
 * whatever height the row gives it, so a short summary still reaches the
 * bottom the way the design has it.
 *
 * It never moves with the pane: the two are separate columns of the frame's
 * grid and only the pane scrolls, so the summary stays put while a long screen
 * travels under it.
 *
 * Sizes are the 1440 design's, not the export's.
 */
.customizer-aside .summary {
  display: flex;
  flex-direction: column;
  width: 100%;
  /*
   * As tall as the window will give it, and no taller.
   *
   * Shrunk rather than measured. The aside is a column with a maximum on it,
   * and a flex item gives way when what is in it will not fit - so a short
   * summary is still its own height, a long one stops at the bottom of the
   * window, and no rule here has to know what that height works out to.
   */
  flex: 0 1 auto;
  min-height: 0;
  padding: 40px;
}
@media (max-width: 1400px) {
  .customizer-aside .summary {
    padding: 30px;
  }
}
.customizer-aside .summary {
  background: #ffffff;
  border: 1px solid #DADDEA;
  border-radius: 20px;
  box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.15);
}
@media (max-width: 1100px) {
  .customizer-aside .summary {
    box-shadow: unset;
  }
}
.customizer-aside .summary {
  /*
   * What the card gives up when it runs short, and what it does not.
   *
   * The rows and the notes are the two things with no length of their own,
   * so they are the two that scroll; everything else holds its size. Flex
   * items shrink by default, and a squashed total is worse than a shorter
   * list of locations.
   */
}
.customizer-aside .summary > .summary-product,
.customizer-aside .summary > .summary-figures,
.customizer-aside .summary > .summary-total,
.customizer-aside .summary > .summary-footnote {
  flex: 0 0 auto;
}
.customizer-aside .summary {
  /*
   * The gap above the list belongs to the scrolling box, not to the heading
   * inside it.
   *
   * A margin on the first child is part of what scrolls: there at rest and
   * gone the moment anything moves, with the rows running up under the
   * product block. Padding here would be no better - a scroller's viewport
   * is its padding box, so content passes through the padding and reaches
   * the top edge just the same. Outside the box it is a gap nothing can
   * enter.
   */
  /*
   * And the bar gets a gutter of its own, out in the card's padding.
   *
   * A scrollbar is laid inside the padding box, so left alone it is drawn
   * hard against the right edge of the rows and the values read as though
   * something has been cut off them. The box reaches 20 out through the
   * card's padding and gives 14 of it back as padding, which puts the bar in
   * the middle of the card's gutter and leaves the values exactly where they
   * were - still lined up with the figures and the total underneath, which
   * are not in this box.
   *
   * 20 out and 14 back rather than the same number twice: the bar itself is
   * the 6 between them.
   */
}
.customizer-aside .summary .summary-scroll {
  flex: 1 1 auto;
  min-height: 0;
  margin: 40px -20px 0 0;
  padding-right: 14px;
}
@media (max-width: 1400px) {
  .customizer-aside .summary .summary-scroll {
    margin-top: 30px;
  }
}
.customizer-aside .summary .summary-scroll {
  overflow-y: auto;
  /*
   * Only where the ::-webkit rules below cannot reach.
   *
   * Chrome honours one spelling or the other, never both: given a
   * scrollbar-width or a scrollbar-color it draws the platform's own bar and
   * ignores every ::-webkit-scrollbar rule on the element - which on Windows
   * means a wide grey track with a stepper arrow at each end, the thing these
   * rules exist to avoid. Firefox is the other way round and has only these.
   *
   * So they are asked for only where the pseudo element is not understood,
   * which is exactly Firefox.
   */
}
@supports not selector(::-webkit-scrollbar) {
  .customizer-aside .summary .summary-scroll {
    scrollbar-width: thin;
    scrollbar-color: #cdd1d4 transparent;
  }
}
.customizer-aside .summary .summary-scroll::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.customizer-aside .summary .summary-scroll::-webkit-scrollbar-track {
  background: transparent;
}
.customizer-aside .summary .summary-scroll::-webkit-scrollbar-thumb {
  background: #cdd1d4;
  border-radius: 999px;
}
.customizer-aside .summary .summary-scroll::-webkit-scrollbar-thumb:hover {
  background: #DADDEA;
}
.customizer-aside .summary .summary-product {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: -40px -40px 0;
  padding: 40px;
}
@media (max-width: 1400px) {
  .customizer-aside .summary .summary-product {
    margin: -30px -30px 0;
    padding: 30px;
  }
}
.customizer-aside .summary .summary-product {
  background: #ECEEF7;
  border-radius: 20px 20px 0 0;
}
.customizer-aside .summary .summary-product .summary-thumb {
  display: block;
  flex: 0 0 auto;
  width: 110px;
}
.customizer-aside .summary .summary-product .summary-thumb img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  aspect-ratio: 110/100;
}
.customizer-aside .summary .summary-product .summary-thumb .ref-image {
  aspect-ratio: 110/103;
}
.customizer-aside .summary .summary-product .summary-product-text {
  min-width: 0;
}
.customizer-aside .summary .summary-product .summary-product-text .summary-style {
  font-size: 20px;
  font-weight: 500;
  line-height: 100%;
}
.customizer-aside .summary .summary-product .summary-product-text .summary-blurb {
  margin-top: 10px;
  font-size: 14px;
  line-height: 120%;
  color: #6B7390;
}
.customizer-aside .summary .summary-heading {
  font-size: 20px;
  font-weight: 500;
}
.customizer-aside .summary .summary-rows {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 40px;
}
@media (max-width: 1400px) {
  .customizer-aside .summary .summary-rows {
    margin-top: 30px;
  }
}
.customizer-aside .summary .summary-rows .summary-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
}
.customizer-aside .summary .summary-rows .summary-row .summary-label {
  font-size: 14px;
  line-height: 120%;
  color: #535C78;
}
.customizer-aside .summary .summary-rows .summary-row .summary-value {
  font-size: 14px;
  line-height: 1.2;
  text-align: right;
  font-weight: 500;
}
.customizer-aside .summary {
  /*
   * Quantity, price and ship date are fenced off from the locations above.
   *
   * The fence runs to the card's own edges rather than stopping at the
   * padding, the way the product block at the top does: pulled out through
   * the padding by the width of it, and given the same width back as padding
   * so the figures stay in the column they were in. Only the rule moves.
   */
}
.customizer-aside .summary .summary-figures {
  gap: 16px;
  margin: 40px -40px 0;
  padding: 40px 40px 0;
  border-top: 2px dashed #DADDEA;
}
@media (max-width: 1400px) {
  .customizer-aside .summary .summary-figures {
    margin: 30px -30px 0;
    padding: 30px 30px 0;
  }
}
.customizer-aside .summary .summary-notes {
  margin-top: 40px;
}
@media (max-width: 1400px) {
  .customizer-aside .summary .summary-notes {
    margin-top: 30px;
  }
}
.customizer-aside .summary .summary-notes .summary-subheading {
  font-size: 14px;
  font-weight: 500;
  line-height: 120%;
  color: #535C78;
}
.customizer-aside .summary .summary-notes .summary-note {
  margin-top: 16px;
  font-size: 14px;
  line-height: 1.2;
}
.customizer-aside .summary .summary-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  margin-top: 60px;
}
@media (max-width: 1400px) {
  .customizer-aside .summary .summary-total {
    margin-top: 40px;
  }
}
.customizer-aside .summary .summary-total .summary-total-label {
  font-size: 16px;
  font-weight: 500;
  line-height: 120%;
  color: #535C78;
}
.customizer-aside .summary .summary-total .summary-total-value {
  font-size: 20px;
  font-weight: 600;
  line-height: 120%;
}
.customizer-aside .summary .summary-footnote {
  margin-top: 8px;
  font-size: 12px;
  line-height: 120%;
  color: #6B7390;
}

/*
 * Tablet - the summary stops being a column and becomes a sheet at the bottom
 * of the screen: a bar you tap to raise it over the content.
 *
 * The type and the row spacing are the desktop's; only the arrangement
 * changes. Inside the raised sheet it is a two by two grid - the product and
 * the figures down the left, the locations and the total down the right.
 */
.summary-toggle,
.summary-scrim {
  display: none;
}

/*
 * Nested under .bay-customizer to match the rules above it. A media query adds
 * no specificity, so a bare .customizer-aside here would lose every property
 * the desktop sets on it and the sheet would still lay out as a column.
 */
@media (max-width: 1100px) {
  .bay-customizer .summary-scrim:not([hidden]) {
    position: fixed;
    inset: 0;
    z-index: 9;
    display: block;
    background: rgba(0, 0, 0, 0.45);
  }
  .bay-customizer .customizer-aside {
    position: fixed;
    right: 0;
    bottom: 0;
    top: auto;
    left: 0;
    z-index: 10;
    display: block;
    max-height: 85vh;
    overflow: visible;
    padding: 0;
    margin: 0;
    background: #EDEDED;
    border-top: 1px solid #DADDEA;
  }
  .bay-customizer .customizer-aside .summary-toggle {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 24px;
    width: 100%;
    height: 108px;
    padding: 10px;
  }
  .bay-customizer .customizer-aside .summary-toggle .summary-handle {
    display: block;
    width: 40px;
    height: 8px;
    background: #161C30;
    border-radius: 12px;
  }
}
@media (max-width: 1100px) and (max-width: 767px) {
  .bay-customizer .customizer-aside .summary-toggle .summary-handle {
    width: 32px;
    height: 6px;
  }
}
@media (max-width: 1100px) {
  .bay-customizer .customizer-aside .summary-toggle .summary-toggle-label {
    font-size: 16px;
    text-decoration: underline;
    text-underline-offset: 3px;
  }
}
@media (max-width: 1100px) and (max-width: 767px) {
  .bay-customizer .customizer-aside .summary-toggle .summary-toggle-label {
    font-size: 14px;
  }
}
@media (max-width: 1100px) {
  .bay-customizer .customizer-aside .summary {
    display: none;
  }
  .bay-customizer .customizer-aside.is-open {
    overflow-y: auto;
    background: #ffffff;
  }
  .bay-customizer .customizer-aside.is-open .summary-toggle {
    height: auto;
    gap: 0;
    padding: 30px 0 0;
  }
}
@media (max-width: 1100px) and (max-width: 767px) {
  .bay-customizer .customizer-aside.is-open .summary-toggle {
    gap: 10px;
    padding: 24px 0 0;
  }
}
@media (max-width: 1100px) {
  .bay-customizer .customizer-aside.is-open .summary-toggle .summary-toggle-label {
    display: none;
  }
  .bay-customizer .customizer-aside.is-open .summary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 40px;
    row-gap: 40px;
    min-height: 0;
    padding: 24px 40px 30px;
    border: 0;
    border-radius: 0;
    background-color: transparent;
    /*
     * The middle is no box here: its parts are placed on this grid
     * individually, and a part has to be a child of the grid to be
     * placed on it. Which also means nothing here scrolls - the sheet
     * has its own height and its own way of being opened.
     */
  }
  .bay-customizer .customizer-aside.is-open .summary .summary-scroll {
    display: contents;
  }
  .bay-customizer .customizer-aside.is-open .summary > *,
  .bay-customizer .customizer-aside.is-open .summary .summary-scroll > * {
    margin-top: 0;
  }
  .bay-customizer .customizer-aside.is-open .summary .summary-heading {
    grid-column: 1/-1;
    grid-row: 1;
    font-size: 20px;
    text-align: center;
  }
  .bay-customizer .customizer-aside.is-open .summary .summary-product {
    grid-column: 1;
    grid-row: 2/4;
    flex-direction: column;
    align-items: stretch;
    align-self: start;
    gap: 20px;
    margin: 0;
    padding: 30px 30px 20px;
    background: #ECEEF7;
    border-radius: 16px;
  }
  .bay-customizer .customizer-aside.is-open .summary .summary-product .summary-thumb {
    width: 100%;
  }
  .bay-customizer .customizer-aside.is-open .summary .summary-product .summary-thumb img,
  .bay-customizer .customizer-aside.is-open .summary .summary-product .summary-thumb .ref-image {
    width: 100%;
    height: auto;
    aspect-ratio: 391/155;
    object-fit: cover;
  }
}
@media (max-width: 1100px) and (max-width: 767px) {
  .bay-customizer .customizer-aside.is-open .summary .summary-product .summary-thumb img,
  .bay-customizer .customizer-aside.is-open .summary .summary-product .summary-thumb .ref-image {
    aspect-ratio: 102/95;
  }
}
@media (max-width: 1100px) {
  .bay-customizer .customizer-aside.is-open .summary .summary-product .summary-thumb .ref-image {
    background: #ffffff;
  }
  .bay-customizer .customizer-aside.is-open .summary .summary-rows:not(.summary-figures) {
    grid-column: 2;
    grid-row: 2;
  }
  .bay-customizer .customizer-aside.is-open .summary .summary-notes {
    grid-column: 2;
    grid-row: 3;
    align-self: start;
    margin-top: 10px;
  }
  .bay-customizer .customizer-aside.is-open .summary .summary-figures {
    grid-column: 1;
    grid-row: 4;
    margin: 0;
    padding: 0;
    border-top: 0;
  }
  .bay-customizer .customizer-aside.is-open .summary .summary-total {
    grid-column: 2;
    grid-row: 4;
    align-self: end;
  }
  .bay-customizer .customizer-aside.is-open .summary .summary-footnote {
    grid-column: 2;
    grid-row: 5;
  }
}
@media (max-width: 1100px) and (max-width: 767px) {
  .bay-customizer .customizer-aside.is-open .summary {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 26px;
    padding: 16px 24px 24px;
  }
  .bay-customizer .customizer-aside.is-open .summary .summary-heading,
  .bay-customizer .customizer-aside.is-open .summary .summary-product,
  .bay-customizer .customizer-aside.is-open .summary .summary-rows:not(.summary-figures),
  .bay-customizer .customizer-aside.is-open .summary .summary-notes,
  .bay-customizer .customizer-aside.is-open .summary .summary-figures,
  .bay-customizer .customizer-aside.is-open .summary .summary-total,
  .bay-customizer .customizer-aside.is-open .summary .summary-footnote {
    grid-column: 1;
    grid-row: auto;
  }
  .bay-customizer .customizer-aside.is-open .summary .summary-heading {
    order: -1;
  }
  .bay-customizer .customizer-aside.is-open .summary .summary-product {
    flex-direction: row;
    align-items: center;
    gap: 20px;
    padding: 20px;
  }
  .bay-customizer .customizer-aside.is-open .summary .summary-product .summary-thumb {
    width: 100px;
  }
  .bay-customizer .customizer-aside.is-open .summary .summary-product .summary-thumb .ref-image {
    aspect-ratio: 100/95;
    background: #EDEDED;
  }
  .bay-customizer .customizer-aside.is-open .summary .summary-product .summary-thumb .ref-mark {
    gap: 3px;
    padding: 4px 8px;
  }
  .bay-customizer .customizer-aside.is-open .summary .summary-product .summary-thumb .ref-mark .glyph {
    font-size: 20px;
  }
  .bay-customizer .customizer-aside.is-open .summary .summary-product .summary-thumb .ref-mark .ref-caption {
    max-width: 56px;
    font-size: 10px;
  }
  .bay-customizer .customizer-aside.is-open .summary {
    /*
     * The rule between the locations and the figures comes back, and
     * runs the sheet's full width the way it runs the card's on a
     * desktop.
     *
     * One column here rather than two, so there is a sheet edge to
     * reach again - pulled out through the 24 the sheet pads by, and
     * given the same 24 back so the figures stay where they were.
     */
  }
  .bay-customizer .customizer-aside.is-open .summary .summary-figures {
    margin: 0 -24px;
    padding: 30px 24px 0;
    border-top: 2px dashed #cdd1d4;
  }
  .bay-customizer .customizer-aside.is-open .summary .summary-heading {
    font-size: 16px;
  }
  .bay-customizer .customizer-aside.is-open .summary .summary-product .summary-product-text .summary-style {
    font-size: 16px;
  }
  .bay-customizer .customizer-aside.is-open .summary .summary-product .summary-product-text .summary-blurb {
    font-size: 14px;
  }
  .bay-customizer .customizer-aside.is-open .summary .summary-rows .summary-row .summary-label,
  .bay-customizer .customizer-aside.is-open .summary .summary-rows .summary-row .summary-value {
    font-size: 12px;
  }
  .bay-customizer .customizer-aside.is-open .summary .summary-total .summary-total-label {
    font-size: 14px;
  }
  .bay-customizer .customizer-aside.is-open .summary .summary-total .summary-total-value {
    font-size: 18px;
  }
  .bay-customizer .customizer-aside.is-open .summary .summary-notes .summary-subheading,
  .bay-customizer .customizer-aside.is-open .summary .summary-notes .summary-note {
    font-size: 12px;
  }
}
/*
 * The quantity screen's checkout button.
 *
 * On small screens the design moves it out of the footer nav and into the
 * sheet: collapsed, the bar carries it instead of the View Summary label;
 * raised, it sits under the total as the sheet's own footer, and stays put
 * while the summary above it scrolls.
 *
 * It is a third child of the aside, after the summary, so both arrangements
 * fall out of the same markup - collapsed simply hides what is between them.
 */
.summary-footer {
  display: none;
}

@media (max-width: 767px) {
  .bay-customizer[data-step="2"] .customizer-nav [data-nav=checkout] {
    display: none;
  }
  .bay-customizer[data-step="2"] .customizer-aside .summary-toggle {
    height: auto;
    gap: 0;
    padding: 14px 0 0;
  }
  .bay-customizer[data-step="2"] .customizer-aside .summary-toggle .summary-toggle-label {
    display: none;
  }
  .bay-customizer[data-step="2"] .customizer-aside .summary-footer {
    position: sticky;
    bottom: 0;
    display: block;
    padding: 14px 24px 18px;
    background: #ffffff;
  }
  .bay-customizer[data-step="2"] .customizer-aside:not(.is-open) .summary-footer {
    background: #EDEDED;
  }
  .bay-customizer[data-step="2"] .customizer-aside.is-open .summary-footer {
    border-top: 1px solid #DADDEA;
    background-color: #EDEDED;
  }
  .bay-customizer[data-step="2"] .customizer-aside .summary-checkout {
    width: 100%;
  }
}
/*
 * The site.
 *
 *   npx sass --watch --no-source-map --style=expanded src/scss/site.scss:site.css
 *
 * Compiles to /site.css, which includes/enqueue.php loads on every page.
 *
 * One sheet rather than one per template. Every rule below is named down to a
 * class that only exists where it belongs - .bay-customizer, .product-hero,
 * .site-header - so a page carries the rules for parts it does not have, and
 * nothing else. The two that could not be written that way, the customizer's
 * full height frame and the body it stops scrolling, are named down to the
 * template instead.
 *
 * Colours, breakpoints and the typeset mixin are in shared/_vars.scss, which
 * emits nothing itself. Sizes and spacing are written where they are used.
 */
/*
 * Screen two - Decoration Locations & Artwork.
 *
 * One card per location. A card that is not being decorated collapses to its
 * head and greys back; the toggle and the chevron are the same state, so
 * turning a location on opens it.
 *
 * Everything the registry can put inside a card is in the DOM at once - both
 * decoration types, both tabs, the icon grid - and only the active one is
 * shown, so nothing here has to know which combination a location holds.
 */
/*
 * A correction the customer has to act on, wherever it is raised.
 *
 * It has to read as something they can fix rather than as a page that has
 * come apart, so it is banded and in the danger colour instead of loose red
 * words. Hidden until something marks it - the card for a card's note, the
 * note itself for one belonging to the whole list - so nothing shows before
 * there is anything to say.
 */
.customizer-pane .screen[data-screen="1"] .screen-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
@media (max-width: 1024px) {
  .customizer-pane .screen[data-screen="1"] .screen-head {
    gap: 10px;
  }
}
.customizer-pane .screen[data-screen="1"] .screen-head .screen-number {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  font-size: 14px;
  font-weight: 600;
  color: #ECEEF7;
  background: #161C30;
  border-radius: 50%;
}
@media (max-width: 767px) {
  .customizer-pane .screen[data-screen="1"] .screen-head .screen-number {
    width: 24px;
    height: 24px;
    margin-top: 1px;
  }
}
.customizer-pane .screen[data-screen="1"] .screen-head .screen-headings {
  min-width: 0;
}
.customizer-pane .screen[data-screen="1"] .screen-title {
  font-size: 21px;
  font-weight: 600;
  line-height: 120%;
}
@media (max-width: 767px) {
  .customizer-pane .screen[data-screen="1"] .screen-title {
    font-size: 20px;
  }
}
.customizer-pane .screen[data-screen="1"] .screen-lede {
  margin-top: 4px;
  font-size: 14px;
  color: #6B7390;
}
@media (max-width: 767px) {
  .customizer-pane .screen[data-screen="1"] .screen-lede {
    font-size: 12px;
  }
}
.customizer-pane .screen[data-screen="1"] .locations-error {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 6px;
  background: #FBEEED;
  font-size: 14px;
  line-height: 1.4;
  color: #B3261E;
}
@media (max-width: 767px) {
  .customizer-pane .screen[data-screen="1"] .locations-error {
    font-size: 12px;
  }
}
.customizer-pane .screen[data-screen="1"] .locations-error {
  margin-top: 20px;
}
.customizer-pane .screen[data-screen="1"] .locations-error.has-error {
  display: flex;
}
.customizer-pane .screen[data-screen="1"] .location-list {
  display: flex;
  flex-direction: column;
  gap: 40px;
  margin-top: 30px;
}
@media (max-width: 1100px) {
  .customizer-pane .screen[data-screen="1"] .location-list {
    gap: 20px;
    margin-top: 20px;
  }
}
.customizer-pane .screen[data-screen="1"] .location-list .location-card {
  background: #ffffff;
  border: 1px solid #DADDEA;
  border-radius: 14px;
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
}
.customizer-pane .screen[data-screen="1"] .location-list .location-card:not(.is-open) {
  background: #ECEEF7;
  border-style: dashed;
  box-shadow: none;
}
.customizer-pane .screen[data-screen="1"] .location-list .location-card:not(.is-open) .card-thumb,
.customizer-pane .screen[data-screen="1"] .location-list .location-card:not(.is-open) .card-label,
.customizer-pane .screen[data-screen="1"] .location-list .location-card:not(.is-open) .card-spec {
  opacity: 0.5;
}
.customizer-pane .screen[data-screen="1"] .location-list .location-card .card-head {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 16px 26px;
}
@media (max-width: 1100px) {
  .customizer-pane .screen[data-screen="1"] .location-list .location-card .card-head {
    padding: 10px 26px;
  }
}
@media (max-width: 767px) {
  .customizer-pane .screen[data-screen="1"] .location-list .location-card .card-head {
    gap: 8px;
    padding: 7px 12px;
  }
}
.customizer-pane .screen[data-screen="1"] .location-list .location-card .card-head .card-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  overflow: hidden;
  background: #EBEBEB;
  border-radius: 8px;
}
@media (max-width: 767px) {
  .customizer-pane .screen[data-screen="1"] .location-list .location-card .card-head .card-thumb {
    width: 32px;
    height: 32px;
  }
}
.customizer-pane .screen[data-screen="1"] .location-list .location-card .card-head .card-thumb img,
.customizer-pane .screen[data-screen="1"] .location-list .location-card .card-head .card-thumb svg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.customizer-pane .screen[data-screen="1"] .location-list .location-card .card-head .card-headings {
  flex: 1 1 auto;
  min-width: 0;
}
.customizer-pane .screen[data-screen="1"] .location-list .location-card .card-head .card-spec {
  margin-top: 2px;
  font-size: 12px;
  color: #6B7390;
}
@media (max-width: 767px) {
  .customizer-pane .screen[data-screen="1"] .location-list .location-card .card-head .card-spec {
    font-size: 10px;
  }
}
.customizer-pane .screen[data-screen="1"] .location-list .location-card .card-head .card-label {
  font-size: 20px;
  font-weight: 600;
}
@media (max-width: 767px) {
  .customizer-pane .screen[data-screen="1"] .location-list .location-card .card-head .card-label {
    font-size: 14px;
  }
}
.customizer-pane .screen[data-screen="1"] .location-list .location-card .card-head .card-chevron {
  display: flex;
  flex: 0 0 auto;
  margin-left: 16px;
  font-size: 24px;
}
@media (max-width: 767px) {
  .customizer-pane .screen[data-screen="1"] .location-list .location-card .card-head .card-chevron {
    display: none;
  }
}
.customizer-pane .screen[data-screen="1"] .location-list .location-card .card-head .card-chevron svg path {
  stroke: #6B7390;
}
.customizer-pane .screen[data-screen="1"] .location-list .location-card .card-body {
  display: none;
  padding: 20px 26px 24px;
  border-top: 1px solid #DADDEA;
}
@media (max-width: 767px) {
  .customizer-pane .screen[data-screen="1"] .location-list .location-card .card-body {
    padding: 12px 12px 20px;
  }
}
.customizer-pane .screen[data-screen="1"] .location-list .location-card.is-open .card-body {
  display: block;
}
.customizer-pane .screen[data-screen="1"] .location-list .location-card.is-open .card-chevron {
  transform: rotate(180deg);
}
.customizer-pane .screen[data-screen="1"] .location-list .location-card .card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
}
@media (max-width: 767px) {
  .customizer-pane .screen[data-screen="1"] .location-list .location-card .card-top {
    gap: 12px;
  }
}
.customizer-pane .screen[data-screen="1"] .location-list .location-card .card-top .card-choice {
  flex: 1 1 auto;
  min-width: 0;
}
.customizer-pane .screen[data-screen="1"] .location-list .location-card .card-top .card-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 148px;
  border: 1px dashed #DADDEA;
  border-radius: 8px;
}
@media (max-width: 767px) {
  .customizer-pane .screen[data-screen="1"] .location-list .location-card .card-top .card-preview {
    width: 88px;
  }
}
.customizer-pane .screen[data-screen="1"] .location-list .location-card .card-top .card-preview img,
.customizer-pane .screen[data-screen="1"] .location-list .location-card .card-top .card-preview svg {
  display: block;
  width: 100%;
  height: auto;
}
.customizer-pane .screen[data-screen="1"] .location-list .location-card:has(.engraving-preview) .card-top .card-preview {
  width: 187px;
}
@media (max-width: 767px) {
  .customizer-pane .screen[data-screen="1"] .location-list .location-card:has(.engraving-preview) .card-top .card-preview {
    display: none;
  }
}
.customizer-pane .screen[data-screen="1"] .location-list .location-card .card-prompt {
  font-size: 16px;
  font-weight: 500;
}
@media (max-width: 767px) {
  .customizer-pane .screen[data-screen="1"] .location-list .location-card .card-prompt {
    font-size: 12px;
  }
}
.customizer-pane .screen[data-screen="1"] .location-list .location-card .card-hint {
  font-size: 16px;
  margin-bottom: 20px;
  color: #6B7390;
}
@media (max-width: 767px) {
  .customizer-pane .screen[data-screen="1"] .location-list .location-card .card-hint {
    margin-bottom: 10px;
    font-size: 10px;
  }
}
.customizer-pane .screen[data-screen="1"] .location-list .location-card .card-note {
  margin-top: 20px;
  font-size: 13px;
}
@media (max-width: 767px) {
  .customizer-pane .screen[data-screen="1"] .location-list .location-card .card-note {
    margin-top: 10px;
    font-size: 10px;
  }
}
.customizer-pane .screen[data-screen="1"] .location-list .location-card .segmented {
  display: inline-flex;
  margin-top: 18px;
  padding: 8px;
  background: #E3E6F1;
  border-radius: 24px;
}
@media (max-width: 767px) {
  .customizer-pane .screen[data-screen="1"] .location-list .location-card .segmented {
    margin-top: 12px;
  }
}
.customizer-pane .screen[data-screen="1"] .location-list .location-card .segmented .segmented-option {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 36px;
  font-size: 16px;
  cursor: pointer;
  border-radius: 24px;
  color: #6B7390;
}
@media (max-width: 767px) {
  .customizer-pane .screen[data-screen="1"] .location-list .location-card .segmented .segmented-option {
    padding: 3px 16px;
    font-size: 14px;
  }
}
.customizer-pane .screen[data-screen="1"] .location-list .location-card .segmented .segmented-option.is-active {
  color: #ffffff;
  background: #161C30;
  /*
   * ColorMark is a colour process, so the chosen pill says so -
   * the same teal to violet run the mark itself is sold under,
   * rather than the flat navy engraving gets.
   *
   * Asked of the radio rather than of a class on the label, since
   * the radio is the only place the method is named - the labels
   * carry whatever the registry decided to call it, and a card
   * with one method has the same is-active as a card with two.
   */
}
.customizer-pane .screen[data-screen="1"] .location-list .location-card .segmented .segmented-option.is-active:has(input[value=color]) {
  background: linear-gradient(to right, #147080 0%, #514A9D 51%, #147080 100%);
}
.customizer-pane .screen[data-screen="1"] .location-list .location-card .method {
  display: none;
}
.customizer-pane .screen[data-screen="1"] .location-list .location-card .method.is-active {
  display: block;
}
.customizer-pane .screen[data-screen="1"] .location-list .location-card .tabs {
  display: flex;
  gap: 20px;
  margin-top: 10px;
  border-bottom: 1px solid #DADDEA;
}
@media (max-width: 767px) {
  .customizer-pane .screen[data-screen="1"] .location-list .location-card .tabs {
    margin-top: 16px;
  }
}
.customizer-pane .screen[data-screen="1"] .location-list .location-card .tabs .tab {
  margin-bottom: -1px;
  padding-bottom: 10px;
  font-size: 14px;
  border-bottom: 2px solid transparent;
  color: #6B7390;
}
@media (max-width: 767px) {
  .customizer-pane .screen[data-screen="1"] .location-list .location-card .tabs .tab {
    padding-bottom: 8px;
    font-size: 12px;
  }
}
.customizer-pane .screen[data-screen="1"] .location-list .location-card .tabs .tab.is-active {
  font-weight: 600;
  border-bottom-color: #161C30;
  color: #161C30;
}
.customizer-pane .screen[data-screen="1"] .location-list .location-card .panel {
  display: none;
  margin-top: 20px;
}
.customizer-pane .screen[data-screen="1"] .location-list .location-card .panel.is-active {
  display: block;
}
.customizer-pane .screen[data-screen="1"] .location-list .location-card .dropzone .dropzone-target {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 131px;
  padding: 30px 20px 20px;
  text-align: center;
}
@media (max-width: 767px) {
  .customizer-pane .screen[data-screen="1"] .location-list .location-card .dropzone .dropzone-target {
    height: 133px;
  }
}
.customizer-pane .screen[data-screen="1"] .location-list .location-card .dropzone .dropzone-target {
  cursor: pointer;
  color: #6B7390;
  background: #ECEEF7;
  border-radius: 12px;
  border: 2px dashed #DADDEA;
}
.customizer-pane .screen[data-screen="1"] .location-list .location-card .dropzone .dropzone-target .glyph {
  font-size: 36px;
  color: #161C30;
  margin-bottom: 5px;
}
@media (max-width: 767px) {
  .customizer-pane .screen[data-screen="1"] .location-list .location-card .dropzone .dropzone-target .glyph {
    font-size: 30px;
  }
}
.customizer-pane .screen[data-screen="1"] .location-list .location-card .dropzone .dropzone-target .dropzone-prompt {
  font-size: 14px;
}
@media (max-width: 767px) {
  .customizer-pane .screen[data-screen="1"] .location-list .location-card .dropzone .dropzone-target .dropzone-prompt {
    font-size: 12px;
  }
}
.customizer-pane .screen[data-screen="1"] .location-list .location-card .dropzone .dropzone-target .dropzone-browse {
  font-weight: 500;
  color: #3E4576;
}
.customizer-pane .screen[data-screen="1"] .location-list .location-card .dropzone .dropzone-target .dropzone-hint {
  font-size: 12px;
}
@media (max-width: 767px) {
  .customizer-pane .screen[data-screen="1"] .location-list .location-card .dropzone .dropzone-target .dropzone-hint {
    font-size: 10px;
  }
}
.customizer-pane .screen[data-screen="1"] .location-list .location-card .dropzone .dropzone-file {
  display: none;
  grid-template-columns: 48px minmax(0, 1fr);
  column-gap: 14px;
  align-items: center;
  padding: 16px;
  background: #ECEEF7;
  border: 1px dashed #DADDEA;
  border-radius: 8px;
}
.customizer-pane .screen[data-screen="1"] .location-list .location-card .dropzone .dropzone-file .dropzone-file-thumb {
  grid-row: 1/3;
  display: block;
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 6px;
}
.customizer-pane .screen[data-screen="1"] .location-list .location-card .dropzone .dropzone-file .dropzone-file-thumb[hidden] {
  display: none;
}
.customizer-pane .screen[data-screen="1"] .location-list .location-card .dropzone .dropzone-file .dropzone-file-name {
  grid-column: 2;
  font-size: 14px;
  overflow-wrap: anywhere;
}
@media (max-width: 767px) {
  .customizer-pane .screen[data-screen="1"] .location-list .location-card .dropzone .dropzone-file .dropzone-file-name {
    font-size: 12px;
  }
}
.customizer-pane .screen[data-screen="1"] .location-list .location-card .dropzone .dropzone-file .dropzone-remove {
  grid-column: 2;
  justify-self: start;
  margin-top: 4px;
  font-size: 13px;
  color: #161C30;
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (max-width: 767px) {
  .customizer-pane .screen[data-screen="1"] .location-list .location-card .dropzone .dropzone-file .dropzone-remove {
    font-size: 11px;
  }
}
.customizer-pane .screen[data-screen="1"] .location-list .location-card .dropzone.has-file .dropzone-target {
  display: none;
}
.customizer-pane .screen[data-screen="1"] .location-list .location-card .dropzone.has-file .dropzone-file {
  display: grid;
}
.customizer-pane .screen[data-screen="1"] .location-list .location-card .dropzone .dropzone-status:empty,
.customizer-pane .screen[data-screen="1"] .location-list .location-card .dropzone .dropzone-error:empty {
  display: none;
}
.customizer-pane .screen[data-screen="1"] .location-list .location-card .dropzone .dropzone-status,
.customizer-pane .screen[data-screen="1"] .location-list .location-card .dropzone .dropzone-error {
  margin-top: 8px;
  font-size: 12px;
  color: #6B7390;
}
.customizer-pane .screen[data-screen="1"] .location-list .location-card .dropzone.has-error .dropzone-status {
  color: #B3261E;
}
.customizer-pane .screen[data-screen="1"] .location-list .location-card .field .field-label {
  display: block;
  font-size: 13px;
}
@media (max-width: 767px) {
  .customizer-pane .screen[data-screen="1"] .location-list .location-card .field .field-label {
    font-size: 12px;
  }
}
.customizer-pane .screen[data-screen="1"] .location-list .location-card .field .field-input {
  display: block;
  width: 100%;
  min-height: 84px;
  margin-top: 10px;
  padding: 12px;
  font-size: 16px;
}
@media (max-width: 767px) {
  .customizer-pane .screen[data-screen="1"] .location-list .location-card .field .field-input {
    padding: 12px;
    font-size: 13px;
  }
}
.customizer-pane .screen[data-screen="1"] .location-list .location-card .field .field-input {
  background: #ECEEF7;
  border: 1px solid #DADDEA;
  border-radius: 8px;
  resize: vertical;
}
.customizer-pane .screen[data-screen="1"] .location-list .location-card .field .field-input::placeholder {
  color: #6B7390;
}
.customizer-pane .screen[data-screen="1"] .location-list .location-card .icon-picker {
  margin-top: 0px;
}
@media (max-width: 767px) {
  .customizer-pane .screen[data-screen="1"] .location-list .location-card .icon-picker {
    margin-top: 5px;
  }
}
.customizer-pane .screen[data-screen="1"] .location-list .location-card .icon-picker {
  /*
   * Asked for and not chosen, said between the switch and the grid -
   * the two things the sentence names, and the only place where both
   * are in front of the customer at once.
   *
   * The same note the card raises, kept by the class rather than by
   * the attribute the wizard opens it with: clearing takes the class
   * off and leaves the attribute, and a display wins over [hidden]
   * either way. Open as well as faulty, so switching the icons back
   * off takes the complaint about them with it.
   */
}
.customizer-pane .screen[data-screen="1"] .location-list .location-card .icon-picker .icon-error {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 6px;
  background: #FBEEED;
  font-size: 14px;
  line-height: 1.4;
  color: #B3261E;
}
@media (max-width: 767px) {
  .customizer-pane .screen[data-screen="1"] .location-list .location-card .icon-picker .icon-error {
    font-size: 12px;
  }
}
.customizer-pane .screen[data-screen="1"] .location-list .location-card .icon-picker .icon-error {
  margin-top: 14px;
}
@media (max-width: 767px) {
  .customizer-pane .screen[data-screen="1"] .location-list .location-card .icon-picker .icon-error {
    margin-top: 10px;
  }
}
.customizer-pane .screen[data-screen="1"] .location-list .location-card .icon-picker.is-open.has-error .icon-error {
  display: flex;
}
.customizer-pane .screen[data-screen="1"] .location-list .location-card .icon-picker .icon-grid {
  display: none;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: 12px;
  max-height: 208px;
  margin-top: 16px;
  overflow-y: auto;
}
@media (max-width: 767px) {
  .customizer-pane .screen[data-screen="1"] .location-list .location-card .icon-picker .icon-grid {
    grid-template-columns: repeat(auto-fill, minmax(45px, 1fr));
  }
}
.customizer-pane .screen[data-screen="1"] .location-list .location-card .icon-picker .icon-grid {
  /*
   * Only where the ::-webkit rules below cannot reach.
   *
   * Chrome honours one spelling or the other, never both: given a
   * scrollbar-width or a scrollbar-color it draws the platform's own bar and
   * ignores every ::-webkit-scrollbar rule on the element - which on Windows
   * means a wide grey track with a stepper arrow at each end, the thing these
   * rules exist to avoid. Firefox is the other way round and has only these.
   *
   * So they are asked for only where the pseudo element is not understood,
   * which is exactly Firefox.
   */
}
@supports not selector(::-webkit-scrollbar) {
  .customizer-pane .screen[data-screen="1"] .location-list .location-card .icon-picker .icon-grid {
    scrollbar-width: thin;
    scrollbar-color: #cdd1d4 transparent;
  }
}
.customizer-pane .screen[data-screen="1"] .location-list .location-card .icon-picker .icon-grid::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.customizer-pane .screen[data-screen="1"] .location-list .location-card .icon-picker .icon-grid::-webkit-scrollbar-track {
  background: transparent;
}
.customizer-pane .screen[data-screen="1"] .location-list .location-card .icon-picker .icon-grid::-webkit-scrollbar-thumb {
  background: #cdd1d4;
  border-radius: 999px;
}
.customizer-pane .screen[data-screen="1"] .location-list .location-card .icon-picker .icon-grid::-webkit-scrollbar-thumb:hover {
  background: #DADDEA;
}
.customizer-pane .screen[data-screen="1"] .location-list .location-card .icon-picker.is-open .icon-grid {
  display: grid;
}
.customizer-pane .screen[data-screen="1"] .location-list .location-card .icon-picker .icon-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  padding: 8px;
  cursor: pointer;
  border: 1px solid #DADDEA;
  border-radius: 6px;
}
.customizer-pane .screen[data-screen="1"] .location-list .location-card .icon-picker .icon-tile.is-active {
  border-color: #161C30;
  box-shadow: inset 0 0 0 1px #161C30;
}
.customizer-pane .screen[data-screen="1"] .location-list .location-card .icon-picker .icon-tile.is-empty {
  cursor: default;
}
.customizer-pane .screen[data-screen="1"] .location-list .location-card .icon-picker .icon-tile img {
  width: 48px;
  height: 48px;
  object-fit: contain;
}
@media (max-width: 767px) {
  .customizer-pane .screen[data-screen="1"] .location-list .location-card .icon-picker .icon-tile img {
    width: 35px;
    height: 35px;
  }
}
.customizer-pane .screen[data-screen="1"] .location-list .location-card .engraving-preview {
  margin-top: 12px;
}
.customizer-pane .screen[data-screen="1"] .location-list .location-card .engraving-preview .engraving-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 84px;
  margin-top: 10px;
  padding: 0 16px;
  border-radius: 8px;
  overflow: hidden;
  background: url("img/wood-grain.svg") repeat-x 0 0/17px 100%, #E0BE8E;
  border: 2px solid #AD8E65;
}
.customizer-pane .screen[data-screen="1"] .location-list .location-card .engraving-preview .engraving-bar .engraving-text {
  font-size: 24px;
}
@media (max-width: 767px) {
  .customizer-pane .screen[data-screen="1"] .location-list .location-card .engraving-preview .engraving-bar .engraving-text {
    font-size: 20px;
  }
}
.customizer-pane .screen[data-screen="1"] .location-list .location-card .engraving-preview .engraving-bar .engraving-text {
  font-weight: 600;
  text-align: center;
  color: #966C43;
  text-shadow: 1px 2px 2px rgba(250, 250, 250, 0.75);
  max-width: 100%;
  overflow-wrap: anywhere;
}
.customizer-pane .screen[data-screen="1"] .location-list .location-card .engraving-preview .field-label {
  font-size: 13px;
}
@media (max-width: 767px) {
  .customizer-pane .screen[data-screen="1"] .location-list .location-card .engraving-preview .field-label {
    font-size: 12px;
  }
}
.customizer-pane .screen[data-screen="1"] .location-list .location-card .card-blank {
  display: none;
  font-size: 14px;
  line-height: 1.5;
  color: #535C78;
}
.customizer-pane .screen[data-screen="1"] .location-list .location-card:not(.is-decorated) .card-blank {
  display: block;
}
.customizer-pane .screen[data-screen="1"] .location-list .location-card:not(.is-decorated) .card-blank ~ * {
  display: none;
}
.customizer-pane .screen[data-screen="1"] .location-list .location-card .card-error {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 6px;
  background: #FBEEED;
  font-size: 14px;
  line-height: 1.4;
  color: #B3261E;
}
@media (max-width: 767px) {
  .customizer-pane .screen[data-screen="1"] .location-list .location-card .card-error {
    font-size: 12px;
  }
}
.customizer-pane .screen[data-screen="1"] .location-list .location-card .card-error {
  margin-bottom: 20px;
}
@media (max-width: 767px) {
  .customizer-pane .screen[data-screen="1"] .location-list .location-card .card-error {
    margin-bottom: 16px;
  }
}
.customizer-pane .screen[data-screen="1"] .location-list .location-card.has-error {
  border-color: #B3261E;
}
.customizer-pane .screen[data-screen="1"] .location-list .location-card.has-error .card-error {
  display: flex;
}
.customizer-pane .screen[data-screen="1"] .order-notes {
  margin-top: 40px;
}
@media (max-width: 767px) {
  .customizer-pane .screen[data-screen="1"] .order-notes {
    margin-top: 20px;
  }
}
.customizer-pane .screen[data-screen="1"] .order-notes .screen-subtitle {
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
@media (max-width: 767px) {
  .customizer-pane .screen[data-screen="1"] .order-notes .screen-subtitle {
    font-size: 20px;
  }
}
.customizer-pane .screen[data-screen="1"] .order-notes .order-notes-box {
  margin-top: 20px;
  padding: 16px 16px 32px;
  background: #ffffff;
  border: 1px solid #DADDEA;
  border-radius: 14px;
}
@media (max-width: 767px) {
  .customizer-pane .screen[data-screen="1"] .order-notes .order-notes-box {
    padding: 10px;
  }
}
.customizer-pane .screen[data-screen="1"] .order-notes .order-notes-input {
  display: block;
  width: 100%;
  min-height: 104px;
  padding: 20px;
  font-size: 14px;
}
@media (max-width: 767px) {
  .customizer-pane .screen[data-screen="1"] .order-notes .order-notes-input {
    min-height: 96px;
    padding: 14px;
    font-size: 12px;
  }
}
.customizer-pane .screen[data-screen="1"] .order-notes .order-notes-input {
  color: #161C30;
  background: #ECEEF7;
  border: 0;
  border-radius: 8px;
  resize: vertical;
}
.customizer-pane .screen[data-screen="1"] .order-notes .order-notes-input::placeholder {
  color: #6B7390;
}
.customizer-pane .screen[data-screen="1"] .order-notes .field-count {
  display: block;
  margin-top: 10px;
  font-size: 13px;
  text-align: right;
  color: #535C78;
}
@media (max-width: 767px) {
  .customizer-pane .screen[data-screen="1"] .order-notes .field-count {
    font-size: 11px;
  }
}

/*
 * The switch. Two sizes: the one on a card head, and a smaller one inline with
 * a question. The input sits between the label and the track in the markup, so
 * the checked state reaches the track as a sibling.
 */
.bay-customizer .toggle {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 0 0 auto;
  cursor: pointer;
}
.bay-customizer .toggle .toggle-label {
  font-size: 14px;
  color: #535C78;
}
@media (max-width: 767px) {
  .bay-customizer .toggle .toggle-label {
    font-size: 10px;
  }
}
.bay-customizer .toggle .toggle-track {
  position: relative;
  display: block;
  flex: 0 0 auto;
  width: 45px;
  height: 20px;
  background: #DADDEA;
  border-radius: 12px;
  transition: background 0.15s ease;
}
.bay-customizer .toggle .toggle-track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  background: #ffffff;
  border-radius: 50%;
  transition: transform 0.15s ease;
}
.bay-customizer .toggle .toggle-input:checked ~ .toggle-track {
  background: #3E4576;
}
.bay-customizer .toggle .toggle-input:checked ~ .toggle-track::after {
  transform: translateX(24px);
}
@media (max-width: 767px) {
  .bay-customizer .toggle {
    gap: 4px;
  }
  .bay-customizer .toggle .toggle-track {
    width: 40px;
    height: 20px;
  }
  .bay-customizer .toggle .toggle-input:checked ~ .toggle-track::after {
    transform: translateX(20px);
  }
}
.bay-customizer .toggle.toggle-inline {
  gap: 32px;
}
@media (max-width: 767px) {
  .bay-customizer .toggle.toggle-inline {
    width: 100%;
    justify-content: space-between;
  }
}
.bay-customizer .toggle.toggle-inline .toggle-label {
  font-size: 13px;
  color: #161C30;
}
@media (max-width: 767px) {
  .bay-customizer .toggle.toggle-inline .toggle-label {
    font-size: 10px;
  }
}
.bay-customizer .toggle.toggle-inline .toggle-track {
  width: 45px;
  height: 20px;
}
@media (max-width: 767px) {
  .bay-customizer .toggle.toggle-inline .toggle-track {
    width: 40px;
    height: 20px;
  }
}
.bay-customizer .toggle.toggle-inline .toggle-track::after {
  width: 14px;
  height: 14px;
}

/*
 * How much of a text field's limit is used.
 *
 * Sits under the field it counts, against the right edge so the eye finds it
 * where the text ends. js/customizer.js keeps the number current.
 */
.bay-customizer .field-count {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  text-align: right;
  color: #6B7390;
}
@media (max-width: 767px) {
  .bay-customizer .field-count {
    font-size: 10px;
  }
}

/*
 * The site.
 *
 *   npx sass --watch --no-source-map --style=expanded src/scss/site.scss:site.css
 *
 * Compiles to /site.css, which includes/enqueue.php loads on every page.
 *
 * One sheet rather than one per template. Every rule below is named down to a
 * class that only exists where it belongs - .bay-customizer, .product-hero,
 * .site-header - so a page carries the rules for parts it does not have, and
 * nothing else. The two that could not be written that way, the customizer's
 * full height frame and the body it stops scrolling, are named down to the
 * template instead.
 *
 * Colours, breakpoints and the typeset mixin are in shared/_vars.scss, which
 * emits nothing itself. Sizes and spacing are written where they are used.
 */
/*
 * Screen two - Quantity & Ship Date.
 *
 * The quantity and the tiers sit side by side: the control that changes the
 * number, and the ladder that number moves along.
 *
 * The tiers read across - a row of ranges with the price each one buys under
 * it - so the table is transposed rather than replaced. Two rows of six
 * columns is still a table, and it keeps every price tied to its range.
 *
 * Whatever shows here is a preview. The tier a quantity actually falls into is
 * resolved on the server.
 */
.customizer-pane .screen[data-screen="2"] .screen-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}
.customizer-pane .screen[data-screen="2"] .screen-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
@media (max-width: 1024px) {
  .customizer-pane .screen[data-screen="2"] .screen-head {
    gap: 10px;
  }
}
.customizer-pane .screen[data-screen="2"] .screen-head .screen-number {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  font-size: 14px;
  font-weight: 600;
  color: #ECEEF7;
  background: #161C30;
  border-radius: 50%;
}
@media (max-width: 767px) {
  .customizer-pane .screen[data-screen="2"] .screen-head .screen-number {
    width: 24px;
    height: 24px;
    margin-top: 1px;
  }
}
.customizer-pane .screen[data-screen="2"] .screen-head .screen-headings {
  min-width: 0;
}
.customizer-pane .screen[data-screen="2"] .screen-title {
  font-size: 21px;
  font-weight: 600;
  line-height: 120%;
}
@media (max-width: 767px) {
  .customizer-pane .screen[data-screen="2"] .screen-title {
    font-size: 20px;
  }
}
.customizer-pane .screen[data-screen="2"] .screen-lede {
  margin-top: 4px;
  font-size: 14px;
  color: #6B7390;
}
@media (max-width: 767px) {
  .customizer-pane .screen[data-screen="2"] .screen-lede {
    font-size: 12px;
  }
}
.customizer-pane .screen[data-screen="2"] .share-button {
  width: 40px;
  height: 40px;
  font-size: 18px;
}
.customizer-pane .screen[data-screen="2"] .share-link {
  margin: 24px 0;
}
@media (max-width: 767px) {
  .customizer-pane .screen[data-screen="2"] .share-link {
    margin: 16px 0;
  }
}
.customizer-pane .screen[data-screen="2"] .share-link .field-label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  color: #535C78;
}
@media (max-width: 767px) {
  .customizer-pane .screen[data-screen="2"] .share-link .field-label {
    font-size: 12px;
  }
}
.customizer-pane .screen[data-screen="2"] {
  /*
   * The field and its button are one control rather than two beside each
   * other: a bordered, tinted box holding the link, with the copy sitting
   * inside it at the end. The link is something to take away, not something
   * to fill in, so the box is the thing that looks like a field and nothing
   * inside it does.
   *
   * The link takes what the button leaves and runs off under an ellipsis
   * rather than pushing the button off the end - it is readable by dragging
   * through it, and the button is there so nobody has to.
   */
}
.customizer-pane .screen[data-screen="2"] .share-link-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 5px 5px 14px;
  background: #ECEEF7;
  border: 1px solid #DADDEA;
  border-radius: 10px;
}
@media (max-width: 767px) {
  .customizer-pane .screen[data-screen="2"] .share-link-row {
    padding: 4px 4px 4px 10px;
  }
}
.customizer-pane .screen[data-screen="2"] .share-link-row:focus-within {
  border-color: #3E4576;
}
.customizer-pane .screen[data-screen="2"] .share-link-row .field-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 34px;
  padding: 0;
  font-size: 13px;
  color: #535C78;
  background: none;
  border: 0;
  text-overflow: ellipsis;
}
.customizer-pane .screen[data-screen="2"] .share-link-row .field-input:focus {
  outline: none;
}
@media (max-width: 767px) {
  .customizer-pane .screen[data-screen="2"] .share-link-row .field-input {
    height: 30px;
    font-size: 12px;
  }
}
.customizer-pane .screen[data-screen="2"] .share-link-row .share-copy {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 92px;
  height: 34px;
  padding: 0 18px;
  font-size: 13px;
  font-weight: 600;
  color: #ffffff;
  background: #161C30;
  border: 0;
  border-radius: 6px;
}
.customizer-pane .screen[data-screen="2"] .share-link-row .share-copy:hover {
  background: #3E4576;
}
@media (max-width: 767px) {
  .customizer-pane .screen[data-screen="2"] .share-link-row .share-copy {
    min-width: 74px;
    height: 30px;
    padding: 0 12px;
    font-size: 12px;
  }
}
.customizer-pane .screen[data-screen="2"] .panel-box {
  padding: 24px;
  border: 1px solid #DADDEA;
  border-radius: 20px;
}
.customizer-pane .screen[data-screen="2"] .quantity-row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 20px;
  margin-top: 20px;
}
@media (max-width: 767px) {
  .customizer-pane .screen[data-screen="2"] .quantity-row {
    flex-direction: column;
    padding: 16px;
    border: 1px solid #DADDEA;
    border-radius: 20px;
    gap: 30px;
  }
  .customizer-pane .screen[data-screen="2"] .quantity-row .panel-box {
    padding: 0;
    border: 0;
    border-radius: 0;
  }
}
.customizer-pane .screen[data-screen="2"] .quantity-row .quantity-box {
  flex: 0 0 277px;
}
@media (max-width: 1100px) {
  .customizer-pane .screen[data-screen="2"] .quantity-row .quantity-box {
    flex: 0 0 240px;
  }
}
@media (max-width: 767px) {
  .customizer-pane .screen[data-screen="2"] .quantity-row .quantity-box {
    flex: 0 0 auto;
  }
}
.customizer-pane .screen[data-screen="2"] .quantity-row .tier-box {
  flex: 1 1 430px;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
@media (max-width: 767px) {
  .customizer-pane .screen[data-screen="2"] .quantity-row .tier-box {
    flex: 0 0 auto;
  }
}
.customizer-pane .screen[data-screen="2"] .quantity-title {
  font-size: 18px;
  font-weight: 500;
}
@media (max-width: 767px) {
  .customizer-pane .screen[data-screen="2"] .quantity-title {
    font-size: 18px;
  }
}
.customizer-pane .screen[data-screen="2"] .quantity-hint {
  margin-top: 6px;
  font-size: 14px;
  color: #161C30;
}
.customizer-pane .screen[data-screen="2"] .quantity-bumped {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 12px;
  padding: 9px 12px;
  font-size: 13px;
  line-height: 1.45;
  color: #B3261E;
  background: #ECEEF7;
  border-left: 3px solid #B3261E;
  border-radius: 6px;
}
.customizer-pane .screen[data-screen="2"] .quantity-bumped[hidden] {
  display: none;
}
@media (max-width: 767px) {
  .customizer-pane .screen[data-screen="2"] .quantity-bumped {
    font-size: 12px;
  }
}
.customizer-pane .screen[data-screen="2"] .counter {
  display: flex;
  align-items: stretch;
  height: 50px;
  margin-top: 24px;
  overflow: hidden;
  border: 1px solid #DADDEA;
  border-radius: 8px;
}
@media (max-width: 1024px) {
  .customizer-pane .screen[data-screen="2"] .counter {
    margin-top: 20px;
  }
}
.customizer-pane .screen[data-screen="2"] .counter .counter-button {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 60px;
  font-size: 18px;
  background: #D6DEE1;
}
.customizer-pane .screen[data-screen="2"] .counter .counter-input {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  font-size: 20px;
  font-weight: 600;
  text-align: center;
  background: #ffffff;
  border: 0;
  appearance: textfield;
}
.customizer-pane .screen[data-screen="2"] .counter .counter-input::-webkit-outer-spin-button, .customizer-pane .screen[data-screen="2"] .counter .counter-input::-webkit-inner-spin-button {
  margin: 0;
  appearance: none;
}
.customizer-pane .screen[data-screen="2"] .tier-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
}
.customizer-pane .screen[data-screen="2"] .tier-head .panel-box-title {
  font-size: 18px;
  font-weight: 500;
}
@media (max-width: 767px) {
  .customizer-pane .screen[data-screen="2"] .tier-head .panel-box-title {
    font-size: 14px;
  }
}
.customizer-pane .screen[data-screen="2"] .tier-head .tier-note {
  font-size: 14px;
  text-align: right;
  color: #6B7390;
}
@media (max-width: 767px) {
  .customizer-pane .screen[data-screen="2"] .tier-head .tier-note {
    font-size: 10px;
  }
}
.customizer-pane .screen[data-screen="2"] .tier-head {
  margin-bottom: 24px;
}
@media (max-width: 767px) {
  .customizer-pane .screen[data-screen="2"] .tier-head {
    margin-bottom: 30px;
  }
}
.customizer-pane .screen[data-screen="2"] {
  /*
   * The ladder: every tier a box of its own, laid across and wrapping when
   * there is no more room across.
   *
   * Each one is as wide as the longer of its two lines and carries its own
   * spacing either side, so the gap between one tier and the next is the
   * same everywhere - which is what a table could not do. There the columns
   * were all the width of the widest, and where the content sat inside a
   * column decided how far it fell from the rule beside it.
   *
   * The ladder is pulled out by that spacing and clips what overflows, so
   * the tier that begins a line loses both its rule and its left padding and
   * starts on the card's own edge - on the first line and on every line
   * after it. Nothing has to know where the lines break.
   */
}
.customizer-pane .screen[data-screen="2"] .tier-ladder {
  display: flex;
  flex-wrap: wrap;
  row-gap: 18px;
  margin: auto -22px 0;
  overflow: hidden;
}
@media (max-width: 767px) {
  .customizer-pane .screen[data-screen="2"] .tier-ladder {
    margin: auto -10px 0;
  }
}
.customizer-pane .screen[data-screen="2"] .tier-ladder .tier {
  flex: 0 0 auto;
  padding: 0 22px;
  border-left: 1px solid #DADDEA;
  margin-left: -1px;
}
@media (max-width: 767px) {
  .customizer-pane .screen[data-screen="2"] .tier-ladder .tier {
    padding: 0 10px;
  }
}
.customizer-pane .screen[data-screen="2"] .tier-ladder dt {
  margin: 0;
  padding-bottom: 6px;
  font-size: 14px;
  font-weight: 400;
  color: #6B7390;
  text-align: center;
}
@media (max-width: 767px) {
  .customizer-pane .screen[data-screen="2"] .tier-ladder dt {
    font-size: 12px;
  }
}
.customizer-pane .screen[data-screen="2"] .tier-ladder dd {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  text-align: center;
}
@media (max-width: 767px) {
  .customizer-pane .screen[data-screen="2"] .tier-ladder dd {
    font-size: 16px;
  }
}
.customizer-pane .screen[data-screen="2"] .tier-upcharge {
  display: none;
  margin-top: 16px;
  font-size: 13px;
  color: #535C78;
}
@media (max-width: 767px) {
  .customizer-pane .screen[data-screen="2"] .tier-upcharge {
    margin-top: 12px;
    font-size: 11px;
  }
}
.customizer-pane .screen[data-screen="2"] .screen-subtitle {
  margin-top: 40px;
  font-size: 18px;
  font-weight: 600;
}
@media (max-width: 767px) {
  .customizer-pane .screen[data-screen="2"] .screen-subtitle {
    margin-top: 32px;
    font-size: 20px;
  }
}
.customizer-pane .screen[data-screen="2"] .ship {
  display: flex;
  align-items: flex-start;
  gap: 60px;
  margin-top: 20px;
  padding: 20px;
  border-radius: 16px;
}
@media (max-width: 1024px) {
  .customizer-pane .screen[data-screen="2"] .ship {
    gap: 40px;
  }
}
@media (max-width: 767px) {
  .customizer-pane .screen[data-screen="2"] .ship {
    flex-direction: column;
    gap: 12px;
  }
}
.customizer-pane .screen[data-screen="2"] .ship .ship-field {
  flex: 0 0 226px;
}
@media (max-width: 767px) {
  .customizer-pane .screen[data-screen="2"] .ship .ship-field {
    flex: 0 0 auto;
    width: 100%;
  }
}
.customizer-pane .screen[data-screen="2"] .ship .ship-field .field-label {
  display: block;
  font-size: 16px;
  font-weight: 500;
}
.customizer-pane .screen[data-screen="2"] .ship .ship-field .field-input {
  display: block;
  width: 100%;
  height: 40px;
  margin-top: 10px;
  padding: 0 12px;
  font-size: 14px;
  background: #ECEEF7;
  border: 1px solid #DADDEA;
  border-radius: 6px;
}
.customizer-pane .screen[data-screen="2"] .ship .ship-note {
  flex: 1 1 auto;
  min-width: 0;
  padding: 16px;
  font-size: 12px;
  line-height: 120%;
  color: #161C30;
  background: #ECEEF7;
  border-radius: 12px;
}
@media (max-width: 767px) {
  .customizer-pane .screen[data-screen="2"] .ship .ship-note {
    flex: 0 0 auto;
    width: 100%;
  }
}
.customizer-pane .screen[data-screen="2"] .ship .ship-note ul {
  margin-top: 4px;
  padding-left: 18px;
  list-style: disc;
  color: #6B7390;
}
.customizer-pane .screen[data-screen="2"] .ship .ship-note li {
  margin-top: 2px;
}

/*# sourceMappingURL=site.css.map */