/*
 * Site-specific styles, extracted from the inline <style> blocks and style=""
 * attributes the Shopify sections used to output.
 */

/*
 * Page width. The Shopify theme capped everything at 1200px with a 60px gutter,
 * which reads thin on large screens. One max width and one gutter now drive the
 * header, sections, product pages and footer, so they all stay aligned. The
 * gutter grows a little on wide screens.
 */
:root { --page-max: 1440px; --gutter: 3.2rem; }
@media only screen and (min-width: 46.85em) { :root { --gutter: 6rem; } }
@media only screen and (min-width: 61.85em) { :root { --gutter: clamp(6rem, 5vw, 8rem); } }

.header__content-wrapper,
.footer__content-wrapper,
.footer--has-blocks .footer__content-wrapper,
.custom-content,
.banner-text-box-wrapper,
.product,
.page,
.article,
.template-blog,
.collection-wrapper,
.collection-list,
.page-width {
  max-width: var(--page-max);
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
.announcement-bar > * { max-width: var(--page-max); }
.banner .banner-text-box-wrapper { padding-left: var(--gutter); padding-right: var(--gutter); }

/* Archived (non-functional) commerce UI: account, cart, forms */
form[data-archived] { opacity: .45; pointer-events: none; }
a[data-archived] { pointer-events: none; opacity: .45; }

/* Brand type, matched to suckerpunch.bar */

/* One paragraph style everywhere (bar's body copy: Hauora 18/27) */
p, ul, .rte, .rte p, .rte ul, .rte li, .product__description {
  font-family: var(--font-body-family);
  font-size: 1.8rem;
  line-height: 1.5;
  letter-spacing: normal;
}

/* Small uppercase labels: Service Gothic, sized like the bar's "Location" titles */
.footer__title,
.h4, h4,
.kit-title__series,
.kit-title__featuring {
  font-family: var(--font-accent-family);
  font-size: 1.5rem;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: .1em;
}

/*
 * Kit titles: series / name / featuring on their own lines. Tan is used only
 * for kit names. text-box trims each line to its cap height and baseline, so
 * the gaps above and below the kit name are visually identical.
 */
.kit-title__series,
.kit-title__name,
.kit-title__featuring {
  display: block;
  text-box: trim-both cap alphabetic;
}
/* "Suckerpunch Kit #2" sits in a pill: 1px border in the text colour, fully rounded */
.kit-title__series {
  width: fit-content;
  font-size: 1.2rem;
  padding: .7rem 1.1rem;
  border: 1px solid currentColor;
  border-radius: 40px;
}
.kit-title__name a { color: inherit; text-decoration: none; }
.kit-title__name {
  font-family: var(--font-kit-family);
  font-size: 4rem;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: normal;
  margin: 1.6rem 0 2.4rem;
}
@media (max-width: 749px) {
  .kit-title__name { font-size: 3.2rem; margin: 1.2rem 0 1.8rem; }
}

/* Nav: purple, same size on desktop and in the mobile drawer */
.menu-navigation__item,
.menu-dropdown__item,
.header--secondary-background .menu-navigation__item {
  font-family: var(--font-accent-family);
  font-size: 1.4rem;
  line-height: 2rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #707cf7;
}
/* No underline at rest (including the current page); on hover it fades in and floats up */
.menu-navigation__title--main-menu::after,
.menu-navigation__item--active .menu-navigation__title--main-menu::after,
.menu-navigation__item--is-expanded .menu-navigation__title--main-menu::after {
  background-color: currentColor;
  bottom: -.6rem;
  opacity: 0;
  transform: translateY(.5rem);
  transition: opacity .25s ease, transform .25s ease;
}
.menu-navigation__item:hover .menu-navigation__title--main-menu::after,
.menu-navigation__item:focus-visible .menu-navigation__title--main-menu::after {
  opacity: 1;
  transform: translateY(0);
}
.menu-navigation__item--link:not(.menu-navigation__item--active):hover,
.menu-navigation__item:not(.menu-navigation__item--active):hover > .menu-navigation__title { opacity: 1; }

/* Logo is the purple wordmark image */
.header__logo { color: #707cf7; }

/* Header */
.header__logo-image { width: 5.2rem; max-width: 5.2rem; height: auto; }

/*
 * Render type the way suckerpunch.bar does: default (subpixel) smoothing rather
 * than the theme's greyscale antialiasing, and text-rendering: optimizeSpeed,
 * which turns off kerning and ligatures exactly as the bar site does.
 */
html, body, button, input, select, textarea {
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
}
body { text-rendering: optimizeSpeed; }

/* Announcement bar: identical to suckerpunch.bar (purple, slim, uppercase Service Gothic) */
.announcement-bar,
.theme-classic .announcement-bar {
  background-color: #707cf7;
  border-bottom: 0;
  --focus-color: rgba(255, 255, 255, 0.8);
  --focus-offset-color: #707cf7;
}
.announcement-bar > * { padding-top: 1rem; padding-bottom: 1rem; }
/* matches .header__top on suckerpunch.bar: 12px, 14px from 1140px wide, .05em; white like the kit card text */
.announcement-bar__link,
.announcement-bar__message {
  color: #ffffff;
  font-family: var(--font-accent-family);
  font-size: 1.2rem;
  line-height: 1.5;
  text-transform: uppercase;
  letter-spacing: .05em;
}
@media (min-width: 71.25em) {
  .announcement-bar__link,
  .announcement-bar__message { font-size: 1.4rem; }
}

/* Footer: three-line rule (as on suckerpunch.bar), the width of the content column */
.footer {
  border-top: 0;
  color: #000000;
  padding-top: 10rem; /* 100px above the three lines, same as below them */
  --focus-color: rgba(0, 0, 0, 0.8);
  --focus-offset-color: #edeae6;
}
.footer__content-wrapper,
.footer--has-blocks .footer__content-wrapper { padding-top: 0; }
@media only screen and (max-width: 46.84em) {
  .footer { padding-top: 10rem; }
}
/* three 1px #303030 lines 12px apart, then 100px to the content, as on suckerpunch.bar */
.footer__content-wrapper::before {
  content: "";
  display: block;
  height: 2.5rem;
  margin-bottom: 5rem;
  color: #303030;
  border-top: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  background: linear-gradient(currentColor, currentColor) 0 1.1rem / 100% 1px no-repeat;
}
.theme-classic .footer__content-wrapper::before { color: #ffffff; }
.footer__title,
.footer__title--newsletter {
  color: #000000;
  margin-bottom: 2rem;
}
.footer__newsletter-submit,
.disclosure,
.footer .disclosure-list__item--current .disclosure-list__option { color: #6f7fef; }
.footer,
.footer .disclosure-list { background-color: #edeae6; }
.footer .disclosure-list__option { color: #000000; }
.footer .disclosure__toggle svg { stroke: #000000; }
.footer .disclosure__toggle { border-bottom-color: #000000; }
.footer .disclosure-list__option:hover { border-bottom: 1px solid #6f7fef; }

/* Footer: two columns. About on the left; mailing list, then Contact Us and Follow Us (as on suckerpunch.bar) on the right */
.footer .footer__content--two-col {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6rem var(--gutter);
  margin-bottom: 0;
}
@media only screen and (min-width: 46.85em) {
  .footer .footer__content--two-col { grid-template-columns: 1fr 1fr; }
}
.footer__about .rte { max-width: 52rem; }
.footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 3rem 8rem;
  margin-top: 9.3rem;
}
.footer__links .footer__title { margin-bottom: .8rem; }
/* footer headings are 16px on suckerpunch.bar */
.footer .footer__title { font-size: 1.6rem; }
/* 50px from the last footer content to the bottom of the page; drop the theme's empty copyright row */
.footer__content-wrapper,
.footer--has-blocks .footer__content-wrapper { padding-bottom: 5rem; }
.footer__bottom-content--reverse { display: none; }
.footer__link {
  color: #707cf7;
  font-family: var(--font-accent-family);
  font-size: 1.4rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .1s linear;
}
.footer__link:hover { border-bottom-color: currentColor; }
.footer__icon-link { display: inline-block; color: #707cf7; line-height: 0; }
.footer__icon-link svg { width: 2.1rem; height: 2.1rem; }
.footer__icon-link:hover { opacity: .7; }
.theme-classic .footer__link,
.theme-classic .footer__icon-link { color: #ffffff; }
.theme-classic .footer__links .footer__title { color: #ffffff; }

/* Mailing list field, matching the bar site: outlined box, uppercase placeholder, arrow button */
.footer__newsletter-form[data-archived] { opacity: 1; }
.footer__newsletter-form { width: 100%; }
.newsletter-field {
  display: flex;
  align-items: stretch;
  width: 100%;
  max-width: 46rem;
  border: 1px solid #707cf7;
}
.newsletter-field__input {
  flex: 1;
  min-width: 0;
  height: 5.3rem;
  padding: 0 1.6rem;
  border: 0;
  background: transparent;
  font-family: var(--font-accent-family);
  font-size: 1.6rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #000000;
}
.newsletter-field__input::placeholder { color: #777777; opacity: 1; }
.newsletter-field__submit {
  display: flex;
  align-items: center;
  padding: 0 2rem;
  border: 0;
  background: transparent;
  color: #707cf7;
}

/* Home page banner (text box sits above the photo, which used to cover its button on mobile) */
.banner-text-box-wrapper { position: relative; z-index: 1; }
.banner__image--right-bottom { object-position: right bottom; }

/*
 * Homepage sections: one gap everywhere. Each section keeps its top padding and
 * drops its bottom padding, so the space between the hero and kit 3, kit 3 and
 * kit 1, and kit 1 and the footer lines is the same (7rem, 5rem on phones).
 */
.content-for-layout .custom-content { padding-bottom: 0; }

/* Product pages: content spans the same column as the header and footer lines */
@media only screen and (min-width: 46.85em) and (max-width: 61.84em) {
  .product--template { padding-left: var(--gutter); padding-right: var(--gutter); }
  .product--template .product__content--template { max-width: none; padding-left: 0; padding-right: 0; }
  .product--template .product__media-wrapper { margin-left: 0; margin-right: 0; }
}
@media only screen and (min-width: 61.85em) {
  .product--template {
    grid-template-columns: var(--gutter) [left] minmax(0, 44rem) var(--gutter) [right] minmax(0, 1fr) var(--gutter);
    padding-left: 0;
    padding-right: 0;
  }
}

/* Home page kit cards: rounded, coloured panels, one colour per kit, equal padding on all sides */
.kit-card {
  background-color: var(--kit-color);
  color: #ffffff;
  border-radius: var(--border-radius-global);
  padding: 6rem;
  text-align: left;
}
.kit-card--spring-fling { --kit-color: #707cf7; }
.kit-card--foresummer   { --kit-color: #ff8e5e; }
.kit-card--winter-well  { --kit-color: #a19322; }
.kit-card h2, .kit-card h3,
.kit-card p, .kit-card .rte { color: #ffffff; }
/* the theme adds margin-top to everything in the banner box; kit cards space with margin-bottom only */
.kit-card :not(:first-child) { margin-top: 0; }
.kit-card .kit-title__series,
.kit-card .kit-title__featuring { margin: 0; }
.kit-card .kit-title__name { margin: calc(var(--kit-gap) / 2) 0 2.4rem; } /* half the card rhythm */
/*
 * One rhythm inside each card (--kit-gap): FEATURED's rule to the pill, "Featuring ..." to
 * the description, and the description to the button. Paragraphs are trimmed to their
 * cap height and baseline so the gaps measure from the visible text.
 */
.kit-card { --kit-gap: 4rem; }
.kit-card p:not(.kit-card__featured), .kit-card .rte p { text-box: trim-both cap alphabetic; }
.kit-card h2, .kit-card h3 { margin: 0 0 var(--kit-gap); line-height: 1; }
.kit-card .rte, .kit-card > p:not(.kit-card__featured) { margin: 0 0 var(--kit-gap); }
/*
 * Kit buttons: the bar site's large button (.btn.--large) in its simple outline
 * style, in white on the coloured card. Hover fills white with the card colour.
 */
.kit-card .button {
  margin: 0;
  padding: .8rem 2.4rem;
  border: 1px solid #ffffff;
  border-radius: 100px;
  background-color: transparent;
  color: #ffffff;
  font-family: var(--font-accent-family);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: .05em;
  text-transform: uppercase;
  text-decoration: line-through;
  box-shadow: none;
  transition: background-color .2s linear, color .2s linear;
}
.kit-card .button:hover { background-color: #ffffff; color: var(--kit-color); box-shadow: none; }
@media (min-width: 64em) {
  .kit-card .button { font-size: 1.8rem; padding: .8rem 3.2rem; }
}
.kit-card > :last-child { margin-bottom: 0; }

/*
 * Card height: 75% of a kit photo's width. Photos are (content width - 3rem gap) / 2
 * wide; container units read that width from the section, so the Spring Fling card
 * uses the same height. The two photos beside cards are cropped to the card's
 * height, anchored to the bottom (where the bottles and glasses are). If a card's
 * text needs more room at narrower widths, the card grows and its photo grows with it.
 */
@media only screen and (min-width: 46.85em) {
  .banner .banner-text-box-wrapper,
  .custom-content__wrapper { container-type: inline-size; }
  .kit-card {
    /* 75% of the photo, or the tallest card's content if that's more (measured by kit-cards.js), so all three match */
    --kit-h: max(calc((100cqw - 3rem) / 2 * .75), var(--kit-content-h, 52.5rem));
    min-height: var(--kit-h);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .kit-card .button { align-self: flex-start; }
  .custom-content__item:has(> .kit-card) { align-self: stretch; display: flex; }
  .custom-content__item > .kit-card { flex: 1; }
  .custom-content__item:has(> .custom-content__image) {
    align-self: stretch;
    position: relative;
    min-height: max(calc((100cqw - 3rem) / 2 * .75), var(--kit-content-h, 52.5rem));
  }
  /* the photo fills its cell instead of setting the row height */
  .custom-content__item > .custom-content__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center bottom;
  }

  /* less empty space above the first kit: 3rem under the header, 5rem card overhang */
  .banner.banner-alignment-top { margin-top: 3rem; padding-top: 5rem; }
  .banner .banner-text-box-top { transform: translateY(-5rem); }
}

/* "FEATURED" label, styled like the NA BEER / NA WINE titles on the bar site */
.kit-card__featured {
  display: block;
  width: fit-content;
  margin: 0 0 var(--kit-gap);
  padding-bottom: 1rem;
  border-bottom: 1px solid currentColor;
  font-family: var(--font-accent-family);
  font-size: 2rem;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .02em;
  text-box: trim-both cap alphabetic;
}
@media (max-width: 749px) {
  .kit-card { padding: 3.2rem; --kit-gap: 3rem; }
  .kit-card .kit-title__name { margin: calc(var(--kit-gap) / 2) 0 1.8rem; }
}

/* Product option selects */
.form__input--select { background-image: url(../images/icon-select.svg); }

/*
 * Classic palette: gift-service, local-pickup and kit-002 were archived from
 * an earlier version of the theme settings, so they keep their original look.
 */
:root.theme-classic {
  --color-background: #fafafa;
  --color-background-rgba-stripped: 250, 250, 250;
  --color-secondary-background: #ebdec3;
  --color-button: #31314a;
  --border-radius-button-and-badges: 2px;
  --border-radius-global: 0;
}
.theme-classic .footer {
  border-top-color: #ffffff;
  color: #ffffff;
  --focus-color: rgba(255, 255, 255, 0.8);
  --focus-offset-color: #31314a;
}
.theme-classic .footer__title,
.theme-classic .footer__newsletter-submit,
.theme-classic .disclosure,
.theme-classic .footer .disclosure-list__item--current .disclosure-list__option,
.theme-classic .footer .disclosure-list__option { color: #ffffff; }
.theme-classic .footer,
.theme-classic .footer .disclosure-list { background-color: #31314a; }
.theme-classic .footer .disclosure__toggle svg { stroke: #ffffff; }
.theme-classic .footer .disclosure__toggle { border-bottom-color: #ffffff; }
.theme-classic .footer .disclosure-list__option:hover { border-bottom-color: #ffffff; }
.theme-classic .footer__title--newsletter { color: #ffffff; }
.theme-classic .newsletter-field { border-color: #ffffff; }
.theme-classic .newsletter-field__input,
.theme-classic .newsletter-field__submit { color: #ffffff; }
.theme-classic .newsletter-field__input::placeholder { color: rgba(255, 255, 255, .7); }

/* The footer supplies the 100px above its lines, so page templates don't add their own bottom padding */
.product--template,
.product,
.page,
.article,
.template-blog,
.collection-wrapper,
.collection { padding-bottom: 0; margin-bottom: 0; }
@media only screen and (min-width: 61.85em) {
  .product--template { padding-bottom: 0; }
}
.product--template .product__content--information,
.collection__section { margin-bottom: 0; }