/** Shopify CDN: Minification failed

Line 763:0 Unexpected "}"

**/
/* ==========================================================================
   KegDrop — the single custom stylesheet for this theme.

   NOTE ON SELECTORS: sections placed in a JSON template render with an id of
   `shopify-section-template--<theme_id>__<key>`, not `shopify-section-<key>`.
   Everything section-scoped therefore uses [id*="<key>"], which matches both
   forms. Do not switch these back to plain id selectors.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Archivo+Narrow:wght@700&display=swap");

:root {
  --page-width: 132rem;
  --kd-dur-fast: 120ms;
  --kd-dur-base: 180ms;
  --kd-dur-slow: 260ms;
  --kd-ease: cubic-bezier(0.2, 0.7, 0.35, 1);
  --kd-keg-mark: url("/cdn/shop/files/kegdrop-keg-mark.png?v=1788894690");

  /* Lucide-style icons for the delivery stripe, inlined as data URIs. Dawn's
     multicolumn image field is an image_picker and will not take SVG. */
  --kd-icon-truck: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23051721'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d='M10%2017h4V5H2v12h3'/><path%20d='M20%2017h2v-3.34a4%204%200%200%200-1.17-2.83L19%209h-5v8h1'/><circle%20cx='7.5'%20cy='17.5'%20r='2.5'/><circle%20cx='17.5'%20cy='17.5'%20r='2.5'/></svg>");
  --kd-icon-wrench: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23051721'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d='M14.7%206.3a1%201%200%200%200%200%201.4l1.6%201.6a1%201%200%200%200%201.4%200l3.77-3.77a6%206%200%200%201-7.94%207.94l-6.91%206.91a2.12%202.12%200%200%201-3-3l6.91-6.91a6%206%200%200%201%207.94-7.94l-3.76%203.76z'/></svg>");
  --kd-icon-clock: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23051721'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'><circle%20cx='12'%20cy='12'%20r='10'/><polyline%20points='12%206%2012%2012%2016%2014'/></svg>");
  --kd-icon-pin: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23051721'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d='M20%2010c0%204.993-5.539%2010.193-7.399%2011.799a1%201%200%200%201-1.202%200C9.539%2020.193%204%2014.993%204%2010a8%208%200%200%201%2016%200'/><circle%20cx='12'%20cy='10'%20r='3'/></svg>");
  --kd-icon-user: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23051721'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d='M19%2021v-2a4%204%200%200%200-4-4H9a4%204%200%200%200-4%204v2'/><circle%20cx='12'%20cy='7'%20r='4'/></svg>");
}

.kd-eyebrow,
.kd-badge,
.announcement-bar__message,
.footer-block__heading {
  font-family: 'Archivo Narrow', var(--font-heading-family);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.collection-list-title,
.multicolumn .title,
.collection__title .title,
[id*="featured_collection"] .title {
  text-transform: uppercase;
  letter-spacing: -0.015em;
}

.drawer__inner,
cart-drawer .drawer__inner,
menu-drawer .menu-drawer {
  border-radius: 10px;
}

.card,
.card-wrapper .card {
  transition: box-shadow var(--kd-dur-fast) var(--kd-ease),
              transform var(--kd-dur-fast) var(--kd-ease);
}

.card-wrapper:hover .card {
  box-shadow: 0 2px 8px rgba(5, 23, 33, 0.08);
  transform: translateY(-1px);
}

.color-scheme-1 .button--secondary {
  --color-secondary-button-text: 255, 255, 255;
}

.color-scheme-5 .button--secondary {
  --color-secondary-button-text: 169, 190, 198;
}

/* --- Header -------------------------------------------------------------
   Dawn lays .header--middle-left out as a three-column grid, heading /
   navigation / icons, and puts the free space (1fr) on the ICONS column.
   That pins the nav directly beside the logo. Moving the 1fr to the
   navigation column instead, and ending the menu within it, pushes the links
   across to sit next to the cart icons as the design has them.

   Dawn gives .header__menu-item no font-size of its own, so it inherits the
   1.5rem body size. 1.6rem is a deliberate nudge up from that.

   Scoped to 990px and up because below that Dawn hides the inline menu and
   swaps in the hamburger drawer. */
@media screen and (min-width: 990px) {
  .header--middle-left {
    grid-template-columns: auto 1fr auto;
  }

  .header--middle-left .header__inline-menu {
    justify-self: end;
  }

  .header__menu-item {
    font-size: 1.6rem;
  }
}

/* --- Hero -------------------------------------------------------------- */
[id*="image_banner"] .banner {
  overflow: hidden;
  background-color: #051721;
  min-height: auto;
}

[id*="image_banner"] .banner__content {
  padding: 120px 0;
  align-items: center;
  z-index: 2;
}

[id*="image_banner"] .banner__media.media {
  position: absolute;
  top: auto;
  left: auto;
  right: max(4rem, calc((100vw - var(--page-width)) / 2));
  bottom: -40px;
  width: 560px;
  height: auto !important;
  padding: 0 !important;
  background: transparent !important;
  overflow: visible;
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.4));
}

[id*="image_banner"] .banner__media.media img {
  position: static !important;
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
}

[id*="image_banner"] .banner__box {
  max-width: 60rem;
  padding: 0;
}

[id*="image_banner"] .banner__heading::before {
  content: "Nationwide delivery";
  display: block;
  margin-bottom: 20px;
  font-family: 'Archivo Narrow', var(--font-heading-family);
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #FAA902;
}

[id*="image_banner"] .banner__heading {
  font-size: clamp(4.4rem, 6.4vw, 10.4rem);
  line-height: 0.9;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  max-width: 14ch;
  word-break: keep-all;
  overflow-wrap: normal;
  hyphens: none;
  margin: 0;
  color: #FFFFFF;
}

[id*="image_banner"] .banner__heading em {
  font-style: normal;
  color: #FAA902;
}

[id*="image_banner"] .banner__text {
  font-size: 1.9rem;
  line-height: 1.55;
  color: #A9BEC6;
  max-width: 44ch;
  margin: 24px 0 0;
}

[id*="image_banner"] .banner__buttons {
  margin-top: 32px;
  gap: 12px;
}

[id*="image_banner"] .banner__buttons .button {
  min-height: 48px;
  border-radius: 6px;
}

[id*="image_banner"] .button--secondary {
  box-shadow: 0 0 0 2px #416571;
  color: #FFFFFF;
}

@media screen and (max-width: 749px) {
  [id*="image_banner"] .banner__content {
    padding: 48px 1.5rem;
  }

  [id*="image_banner"] .banner__media.media {
    right: 0;
    bottom: 0;
    width: 200px;
    opacity: 0.16;
    filter: none;
  }

  [id*="image_banner"] .banner__heading {
    font-size: 3.8rem;
  }
}

/* --- Amber delivery stripe ---------------------------------------------
   Dawn already lays this out four across from the section's own column
   setting. Do NOT override .multicolumn-list to display:grid — Dawn's
   .grid__item keeps its percentage width inside the grid cell and the
   columns collapse to one character wide. Only the chrome is reset here.

   Also used on the product template, which is why the section is keyed
   "delivery_stripe" there too. */
[id*="delivery_stripe"] .multicolumn-card,
[id*="delivery_stripe"] .multicolumn-list__item {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}

[id*="delivery_stripe"] .multicolumn-card__info {
  padding: 0;
}

[id*="delivery_stripe"] .multicolumn-card__info h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Archivo Narrow', var(--font-heading-family);
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #051721;
  margin: 0;
}

[id*="delivery_stripe"] .multicolumn-card__info h3::before {
  content: "";
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px 20px;
}

[id*="delivery_stripe"] .multicolumn-list__item:nth-child(1) h3::before {
  background-image: var(--kd-icon-truck);
}

[id*="delivery_stripe"] .multicolumn-list__item:nth-child(2) h3::before {
  background-image: var(--kd-icon-wrench);
}

[id*="delivery_stripe"] .multicolumn-list__item:nth-child(3) h3::before {
  background-image: var(--kd-icon-pin);
}

[id*="delivery_stripe"] .multicolumn-list__item:nth-child(4) h3::before {
  background-image: var(--kd-icon-user);
}

/* --- "Cellar to bar in three" ------------------------------------------ */
[id*="how_it_works"] .multicolumn-list {
  counter-reset: kd-step;
}

[id*="how_it_works"] .multicolumn-card,
[id*="how_it_works"] .multicolumn-list__item {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}

[id*="how_it_works"] .multicolumn-card__info::before {
  counter-increment: kd-step;
  content: "0" counter(kd-step);
  display: block;
  font-family: var(--font-heading-family);
  font-weight: 900;
  font-size: 7.2rem;
  line-height: 1;
  color: #FAA902;
  margin-bottom: 12px;
}

[id*="how_it_works"] .multicolumn-card__info h3 {
  font-size: 2.2rem;
  line-height: 1.2;
  color: #FFFFFF;
  margin: 0 0 8px;
}

[id*="how_it_works"] .multicolumn-card__info .rte,
[id*="how_it_works"] .multicolumn-card__info .rte p {
  color: #A9BEC6;
  margin: 0;
  max-width: 34ch;
}

[id*="how_it_works"] .multicolumn__title .title::before {
  content: "How it works";
  display: block;
  margin-bottom: 16px;
  font-family: 'Archivo Narrow', var(--font-heading-family);
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #FAA902;
}

/* --- "Shop the cellar" tiles — nine collections, 3 across ---------------
   The tile is drawn on .card-wrapper rather than .card, which is the element
   whose box we fully control. */
[id*="collection_list"] .collection-list-title::before {
  content: "Nine collections";
  display: block;
  margin-bottom: 16px;
  font-family: 'Archivo Narrow', var(--font-heading-family);
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6B7C84;
}

[id*="collection_list"] .card__media,
[id*="collection_list"] .card .media,
[id*="collection_list"] .card__inner {
  display: none !important;
}

/* The collection descriptions are full sentences and are reused as the
   banner text on each collection page, so they are hidden here and the short
   tile label is set per position below instead. */
[id*="collection_list"] .card__information > .rte,
[id*="collection_list"] .card__caption {
  display: none;
}

[id*="collection_list"] .collection-list__item {
  display: flex;
}

[id*="collection_list"] .collection-list__item .card-wrapper {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 136px;
  min-height: 136px;
  max-height: 136px;
  border: 1px solid #DDE3E6;
  border-radius: 6px;
  background: #F4F6F7;
}

[id*="collection_list"] .collection-list__item .card,
[id*="collection_list"] .collection-list__item .card__content {
  height: 100%;
  min-height: 0;
  width: 100%;
  background: transparent;
  border: 0;
  box-shadow: none;
}

[id*="collection_list"] .collection-list__item .card__content {
  display: flex;
  align-items: flex-end;
  padding: 24px 20px 20px;
  margin: 0;
}

[id*="collection_list"] .collection-list__item .card-wrapper::after {
  content: "";
  position: absolute;
  top: -16px;
  right: -22px;
  width: 138px;
  height: 138px;
  background-image: var(--kd-keg-mark);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: top right;
  opacity: 0.14;
  pointer-events: none;
  z-index: 0;
}

[id*="collection_list"] .card__information,
[id*="collection_list"] .card__heading {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 0;
}

[id*="collection_list"] .card__heading a {
  font-family: var(--font-heading-family);
  font-weight: 900;
  font-size: 2rem;
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  color: #051721;
}

[id*="collection_list"] .card__heading .icon-wrap,
[id*="collection_list"] .card__heading .svg-wrapper {
  display: none;
}

/* Tile subheadings. Keyed to tile POSITION, matching the block order in
   templates/index.json — reorder the tiles there and these must move too. */
[id*="collection_list"] .collection-list__item .card__information::after {
  display: block;
  margin-top: 5px;
  font-family: var(--font-body-family);
  font-weight: 400;
  font-size: 1.3rem;
  line-height: 1.3;
  letter-spacing: normal;
  text-transform: none;
  color: #6B7C84;
}

[id*="collection_list"] .collection-list__item:nth-child(1) .card__information::after {
  content: "30L & 50L pub kegs";
}

[id*="collection_list"] .collection-list__item:nth-child(2) .card__information::after {
  content: "Independent breweries";
}

[id*="collection_list"] .collection-list__item:nth-child(3) .card__information::after {
  content: "Home machine kegs";
}

[id*="collection_list"] .collection-list__item:nth-child(4) .card__information::after {
  content: "8L pro-home kegs";
}

[id*="collection_list"] .collection-list__item:nth-child(5) .card__information::after {
  content: "On tap & bottled";
}

[id*="collection_list"] .collection-list__item:nth-child(6) .card__information::after {
  content: "Fonts, coolers, couplers";
}

[id*="collection_list"] .collection-list__item:nth-child(7) .card__information::after {
  content: "CO\2082 , mixed gas, fittings";
}

[id*="collection_list"] .collection-list__item:nth-child(8) .card__information::after {
  content: "Line cleaner, brushes, caps";
}

[id*="collection_list"] .collection-list__item:nth-child(9) .card__information::after {
  content: "Glasses, trays, mats";
}

[id*="collection_list"] .collection-list__item:nth-child(1) .card-wrapper,
[id*="collection_list"] .collection-list__item:nth-child(6) .card-wrapper {
  background: #051721;
  border-color: #123244;
}

[id*="collection_list"] .collection-list__item:nth-child(1) .card-wrapper::after,
[id*="collection_list"] .collection-list__item:nth-child(6) .card-wrapper::after {
  opacity: 0.09;
}

[id*="collection_list"] .collection-list__item:nth-child(1) .card__heading a,
[id*="collection_list"] .collection-list__item:nth-child(6) .card__heading a {
  color: #FFFFFF;
}

/* The two navy tiles need the lighter grey for the subheading to read. */
[id*="collection_list"] .collection-list__item:nth-child(1) .card__information::after,
[id*="collection_list"] .collection-list__item:nth-child(6) .card__information::after {
  color: #A9BEC6;
}

/* --- "This week's drops" ------------------------------------------------ */
[id*="featured_collection"] .title::before {
  content: "Moving fast";
  display: block;
  margin-bottom: 16px;
  font-family: 'Archivo Narrow', var(--font-heading-family);
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6B7C84;
}

[id*="featured_collection"] .card__media,
[id*="featured_collection"] .card .media {
  background: #F4F6F7;
  border-radius: 6px;
}

[id*="featured_collection"] .card__media img,
[id*="featured_collection"] .card .media img {
  object-fit: contain;
  padding: 6%;
}

/* --- Footer ------------------------------------------------------------- */
.footer .footer__content-top {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.3fr;
  gap: 40px;
  align-items: start;
  padding-bottom: 48px;
}

.footer .footer__content-top .footer__blocks-wrapper {
  display: contents;
}

.footer .footer__content-top .footer-block,
.footer .footer__content-top .footer-block--newsletter {
  margin: 0;
  width: auto;
  max-width: none;
  text-align: left;
  align-items: flex-start;
}

.footer .footer-block__newsletter {
  width: 100%;
  max-width: none;
  text-align: left;
}

.footer .footer-block__heading {
  color: #FAA902;
  font-size: 1.3rem;
  margin: 0 0 20px;
}

.footer .footer-block__brand-info .rte,
.footer .footer-block__brand-info .rte p {
  color: #A9BEC6;
  max-width: 34ch;
  margin: 20px 0 0;
}

.footer .footer-block__details-content a.link {
  color: #FFFFFF;
  text-decoration: none;
  padding: 6px 0;
  display: inline-block;
}

.footer .footer-block__details-content a.link:hover {
  color: #FAA902;
}

/* Dawn's newsletter has a heading but no subtext field. Edit this string. */
.footer .footer-block__newsletter .footer-block__heading::after {
  content: "New kegs and restock alerts, once a week.";
  display: block;
  margin-top: 20px;
  font-family: var(--font-body-family);
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 1.6;
  letter-spacing: normal;
  text-transform: none;
  color: #FFFFFF;
}

.footer .footer__newsletter.newsletter-form {
  display: block;
  margin: 24px 0 0;
  width: 100%;
  max-width: none;
}

/* Dawn nests the submit button INSIDE .field and pins it over the input, so
   .field is the flex row — making the outer wrapper flex does nothing. */
.footer .newsletter-form__field-wrapper {
  width: 100%;
  max-width: none;
}

.footer .newsletter-form__field-wrapper .field {
  position: relative;
  display: flex;
  gap: 12px;
  align-items: stretch;
  width: 100%;
  margin: 0;
}

.footer .newsletter-form__field-wrapper .field::after,
.footer .newsletter-form__field-wrapper .field::before {
  display: none;
}

.footer .newsletter-form__field-wrapper .field__input {
  flex: 1 1 auto;
  min-width: 0;
  background: #0A2130;
  border: 1px solid #123244;
  border-radius: 6px;
  color: #FFFFFF;
  height: 48px;
  padding: 0 16px;
  box-shadow: none;
}

/* Dawn renders the input hint as a floating <label>, not a real placeholder,
   so the text cannot be changed without editing locales/en.default.json.
   Instead the label is emptied and restyled as a static placeholder. It hides
   on focus and once a valid address is entered (the input is `required`, so
   :valid only matches real input). Edit the string below. */
.footer .newsletter-form__field-wrapper .field__label {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  padding: 0;
  font-size: 0;
  line-height: 1;
  color: #6B7C84;
  pointer-events: none;
  transition: opacity var(--kd-dur-fast) var(--kd-ease);
}

.footer .newsletter-form__field-wrapper .field__label::after {
  content: "you@pub.co.uk";
  font-family: var(--font-body-family);
  font-size: 1.6rem;
}

.footer .newsletter-form__field-wrapper .field__input:focus ~ .field__label,
.footer .newsletter-form__field-wrapper .field__input:valid ~ .field__label {
  opacity: 0;
  transform: translateY(-50%);
}

/* The amber Join button. Dawn's .button uses ::before for its shadow and
   ::after for its border ring, both absolutely positioned — so ::after is
   fully reset here before being reused to carry the label. */
.footer .newsletter-form__button {
  position: static !important;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto !important;
  min-width: 9rem;
  height: 48px;
  margin: 0;
  padding: 0 24px;
  background: #FAA902 !important;
  background-color: #FAA902 !important;
  color: #051721 !important;
  border: 0;
  border-radius: 6px;
  box-shadow: none;
  font-family: var(--font-body-family);
  font-weight: 700;
  font-size: 1.5rem;
}

.footer .newsletter-form__button .svg-wrapper,
.footer .newsletter-form__button::before {
  display: none !important;
}

.footer .newsletter-form__button::after {
  content: "Join";
  position: static;
  inset: auto;
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: none;
  opacity: 1;
  color: #051721;
}

.footer .newsletter-form__button:hover {
  background: #D68F00 !important;
  background-color: #D68F00 !important;
}

.footer .footer__content-bottom {
  border-top: 1px solid #123244;
  padding-top: 24px;
}

.footer .footer__content-bottom-wrapper--center {
  justify-content: flex-start;
}

.footer .footer__copyright {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  text-align: left;
}

.footer .footer__copyright .policies {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  padding: 0;
  margin: 0;
}

.footer .footer__copyright .policies li:first-child::before {
  content: none;
}

.footer .footer__copyright,
.footer .footer__copyright a {
  color: #A9BEC6;
}

.footer .footer__copyright a:hover {
  color: #FFFFFF;
}

@media screen and (max-width: 989px) {
  .footer .footer__content-top {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }

  .footer .footer__copyright {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}

@media screen and (max-width: 749px) {
  .footer .footer__content-top { grid-template-columns: 1fr; }
  .footer .footer__copyright .policies li::before { content: none; }
}
}

/* ==========================================================================
   COLLECTION TEMPLATE (prompt 5)

   Scoped on Dawn's own class names (.collection-hero, .facets-vertical,
   .kd-card) rather than on section ids. The collection banner and product
   grid are the only sections that carry these classes, so [id*="..."] is not
   needed here — and [id*="banner"] would also match the homepage hero.
   ========================================================================== */

/* --- Collection banner -------------------------------------------------- */
.collection-hero {
  position: relative;
  overflow: hidden;
}

.collection-hero__inner {
  position: relative;
  z-index: 1;
  padding-top: 40px;
  padding-bottom: 48px;
}

.collection-hero::after {
  content: "";
  position: absolute;
  right: -40px;
  top: 50%;
  transform: translateY(-50%);
  width: 300px;
  height: 300px;
  background-image: var(--kd-keg-mark);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center right;
  opacity: 0.16;
  pointer-events: none;
  z-index: 0;
}

.collection-hero__title {
  margin: 0;
  font-family: var(--font-heading-family);
  font-weight: 900;
  font-size: 6rem;
  line-height: 0.94;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  max-width: 20ch;
  color: #FFFFFF;
}

.collection-hero__description,
.collection-hero__description p {
  margin: 16px 0 0;
  font-size: 1.9rem;
  line-height: 1.55;
  color: #A9BEC6;
  max-width: 60ch;
}

.kd-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 20px;
  font-size: 1.3rem;
  color: #A9BEC6;
}

.kd-breadcrumb a {
  color: #A9BEC6;
  text-decoration: none;
}

.kd-breadcrumb a:hover {
  color: #FFFFFF;
}

.kd-breadcrumb [aria-current="page"] {
  color: #FFFFFF;
}

.kd-breadcrumb__sep {
  color: #A9BEC6;
}

@media screen and (max-width: 749px) {
  .collection-hero__inner {
    padding-top: 16px;
    padding-bottom: 20px;
  }

  .collection-hero__title {
    font-size: 3rem;
  }

  .collection-hero__description,
  .collection-hero__description p {
    font-size: 1.7rem;
  }

  .collection-hero::after {
    width: 180px;
    height: 180px;
    right: -50px;
  }
}

/* --- Filter sidebar ------------------------------------------------------
   Dawn's vertical facets are already a flex row at 750px and up; only the
   column width, rules and type are reset. Below 750px Dawn swaps to its own
   mobile facet drawer with no help from here.

   The sidebar is sticky, so it MUST have a max-height and its own overflow:
   a sticky element taller than the viewport pins at the top and the bottom
   of the list becomes unreachable — you cannot scroll to it. --header-height
   is set by the sticky-header script; the fallback covers first paint.

   overflow-x MUST be pinned to hidden. Setting overflow-y to auto makes the
   browser compute overflow-x as auto too, and the vertical scrollbar then
   eats into the content box and tips the fixed-width form into horizontal
   overflow — which is why the panel scrolled sideways. scrollbar-gutter
   reserves the scrollbar space up front so the list does not shift when it
   appears. */
@media screen and (min-width: 750px) {
  .facets__form-vertical {
    width: 300px;
    max-width: 100%;
  }

  .facets-vertical .facets-wrapper {
    padding-right: 24px;
    align-self: flex-start;
    position: sticky;
    top: calc(var(--header-height, 8rem) + 2rem);
    max-height: calc(100vh - var(--header-height, 8rem) - 4rem);
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-gutter: stable;
    overscroll-behavior: contain;
  }

  .facets__heading--vertical {
    font-family: var(--font-heading-family);
    font-weight: 900;
    font-size: 1.7rem;
    color: #051721;
  }

  .facets__disclosure-vertical {
    border-top: 1px solid #DDE3E6;
  }

  .facets-vertical .facets__summary {
    padding-top: 16px;
    padding-bottom: 16px;
    font-family: var(--font-heading-family);
    font-weight: 800;
    font-size: 1.5rem;
    color: #051721;
  }
}

.facets-vertical .facet-checkbox {
  font-size: 1.4rem;
  color: #051721;
}

.facets-vertical .facets__price .field__input {
  border-radius: 6px;
}

/* Active filters render as removable pills. Dawn puts them at the top of the
   sidebar in vertical mode, not in the sort row. */
span.active-facets__button-inner {
  border-radius: 100px;
  background: #F4F6F7;
  box-shadow: 0 0 0 1px #DDE3E6;
  padding: 6px 12px;
  font-size: 1.3rem;
  font-weight: 600;
}

.active-facets__button:hover .active-facets__button-inner {
  box-shadow: 0 0 0 1px #051721;
}

.product-count__text,
.facet-filters__label {
  font-size: 1.4rem;
  color: #051721;
}

/* --- Product card --------------------------------------------------------
   Rendered by snippets/kd-card-product.liquid, not Dawn's card-product.
   Nothing here touches .grid or .grid__item — the 3-up layout comes from the
   section's own columns_desktop setting. */
.kd-card {
  position: relative;
  display: flex;
  flex-direction: column;
}

.kd-card__media {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  background: #F4F6F7;
  border-radius: 6px;
  overflow: hidden;
  transition: box-shadow var(--kd-dur-fast) var(--kd-ease),
              transform var(--kd-dur-fast) var(--kd-ease);
}

.kd-card__media img {
  width: 84%;
  height: 84%;
  object-fit: contain;
}

.kd-card__media--empty::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--kd-keg-mark);
  background-size: 52% auto;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.14;
}

.kd-card:hover .kd-card__media {
  box-shadow: 0 2px 8px rgba(5, 23, 33, 0.08);
  transform: translateY(-1px);
}

.kd-card__badges {
  position: absolute;
  left: 10px;
  top: 10px;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-width: 82%;
}

.kd-badge {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border: 1px solid #DDE3E6;
  border-radius: 4px;
  background: #FFFFFF;
  color: #051721;
  font-family: 'Archivo Narrow', var(--font-heading-family);
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.kd-badge--navy {
  background: #051721;
  border-color: #051721;
  color: #FFFFFF;
}

.kd-badge--amber {
  background: #FAA902;
  border-color: #FAA902;
  color: #051721;
}

.kd-badge--out {
  background: transparent;
  border-color: #8A969B;
  color: #8A969B;
}

.kd-card__title {
  margin: 12px 0 0;
  font-family: var(--font-body-family);
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1.35;
  letter-spacing: normal;
}

.kd-card__title a {
  color: #051721;
  text-decoration: none;
}

.kd-card__title a:hover {
  text-decoration: underline;
  text-underline-offset: 0.3rem;
}

.kd-card__meta {
  margin: 3px 0 0;
  font-size: 1.3rem;
  color: #6B7C84;
}

.kd-card__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.kd-card__amount {
  font-family: var(--font-heading-family);
  font-weight: 900;
  font-size: 2rem;
  line-height: 1.2;
  color: #051721;
}

.kd-card__was {
  font-size: 1.2rem;
  color: #6B7C84;
}

.kd-card__ppl {
  font-size: 1.2rem;
  color: #6B7C84;
}

.kd-card__stock {
  margin: 6px 0 0;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.45;
}

.kd-card__stock--in {
  color: #0F7A55;
}

.kd-card__stock--low {
  color: #B4620A;
}

.kd-card__stock--out {
  color: #8A969B;
}

.kd-card--soldout .kd-card__media {
  opacity: 0.7;
}

.kd-card--soldout .kd-card__title a,
.kd-card--soldout .kd-card__amount {
  color: #8A969B;
}

@media screen and (max-width: 749px) {
  .kd-card__title {
    font-size: 1.5rem;
  }

  .kd-card__amount {
    font-size: 1.8rem;
  }

  .kd-card__badges {
    left: 8px;
    top: 8px;
    gap: 4px;
  }
}

/* ==========================================================================
   PRODUCT TEMPLATE (prompt 6)

   Scoped on Dawn's own product classes. Verified against the markup in
   sections/main-product.liquid, snippets/product-media-gallery.liquid,
   snippets/product-thumbnail.liquid and snippets/buy-buttons.liquid.
   ========================================================================== */

/* --- Gallery -------------------------------------------------------------
   product-thumbnail.liquid wraps each image in .product-media-container,
   which carries its own --ratio from the image. The plinth is drawn there;
   the 62% contain comes from padding on the img, the same trick the homepage
   "This week's drops" cards use. The container ratio is deliberately left
   alone — forcing 1:1 fights Dawn's own ratio maths. */
.product__media-item .product-media-container {
  background: #F4F6F7;
  border-radius: 6px;
  overflow: hidden;
}

.product__media-item .product__media.media {
  background: transparent;
}

.product__media-item .product__media img {
  object-fit: contain;
  padding: 19%;
  box-sizing: border-box;
}

/* Thumbnails. Dawn's "thumbnail" gallery layout puts these below the image,
   not stacked to the left as the mockup shows — repositioning them is not
   attempted here because no product yet has more than one image to test it. */
.thumbnail-list__item {
  max-width: 88px;
}

.thumbnail {
  border-radius: 6px;
}

.thumbnail[aria-current="true"] {
  box-shadow: 0 0 0 2px #051721;
}

/* --- Buy column ---------------------------------------------------------- */
.product__info-container {
  max-width: 520px;
}

.product__column-sticky {
  top: 80px;
}

/* Vendor — the "text" block set to uppercase. */
.product__info-container .product__text.caption-with-letter-spacing {
  font-family: 'Archivo Narrow', var(--font-heading-family);
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #416571;
  margin: 0 0 12px;
}

.product__info-container .product__title h1 {
  font-family: var(--font-heading-family);
  font-weight: 900;
  font-size: 3.8rem;
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: #051721;
  margin: 0;
}

.product__info-container .price {
  font-family: var(--font-heading-family);
  font-weight: 900;
  color: #051721;
}

.product__info-container .price--large {
  font-size: 3.2rem;
  line-height: 1.2;
}

.kd-pdp__ppl {
  margin: 4px 0 0;
  font-family: var(--font-body-family);
  font-weight: 400;
  font-size: 1.3rem;
  color: #6B7C84;
}

.kd-pdp__stock {
  margin: 12px 0 0;
  font-size: 1.4rem;
  font-weight: 700;
}

.kd-pdp__stock--in {
  color: #0F7A55;
}

.kd-pdp__stock--low {
  color: #B4620A;
}

.kd-pdp__stock--out {
  color: #8A969B;
}

/* --- Quantity and add to cart -------------------------------------------
   The mockup has these on one row. Dawn renders them as two sibling blocks
   inside .product__info-container with no shared wrapper, so a single row
   would need a change to main-product.liquid (101KB, whole-file replace
   only). Left stacked; the button carries the design's 56px height.

   Dawn draws the stepper's border ring on ::after, so the pill radius has to
   go on both the element and the pseudo-element. */
.product-form__quantity {
  margin-top: 24px;
}

.product-form__quantity .quantity,
.product-form__quantity .quantity::after {
  border-radius: 100px;
}

.product-form__buttons .product-form__submit {
  min-height: 56px;
  border-radius: 6px;
  font-family: var(--font-body-family);
  font-weight: 700;
  font-size: 1.6rem;
  letter-spacing: normal;
}

/* --- Description ---------------------------------------------------------
   The scraped supplier descriptions carry a .prop-list repeating size, ABV,
   country and region — in supplier units ("11gal", "4.5 %") that contradict
   the spec table below. Hidden so the page states each fact once. Delete
   this rule to bring it back.

   NOTE: not every product wraps those facts in .prop-list — some repeat them
   as plain paragraphs, which this rule cannot reach. See the spec table. */
.product__description {
  margin-top: 24px;
  font-size: 1.6rem;
  line-height: 1.6;
  color: #051721;
}

.product__description .prop-list {
  display: none;
}

/* --- Specification table ------------------------------------------------- */
.kd-pdp__specs {
  margin: 24px 0 0;
  border-top: 1px solid #DDE3E6;
}

.kd-pdp__spec {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding: 12px 0;
  border-bottom: 1px solid #DDE3E6;
}

.kd-pdp__spec dt {
  margin: 0;
  font-size: 1.4rem;
  color: #6B7C84;
}

.kd-pdp__spec dd {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 600;
  color: #051721;
  text-align: right;
}

/* --- Related products ---------------------------------------------------- */
.related-products__heading {
  font-family: var(--font-heading-family);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.015em;
}

.related-products .card__media,
.related-products .card .media {
  background: #F4F6F7;
  border-radius: 6px;
}

.related-products .card__media img,
.related-products .card .media img {
  object-fit: contain;
  padding: 8%;
}

@media screen and (max-width: 749px) {
  .product__info-container .product__title h1 {
    font-size: 3rem;
  }

  .product__info-container .price--large {
    font-size: 2.6rem;
  }

  .product__media-item .product__media img {
    padding: 15%;
  }
}

/* --- Sticky mobile add-to-cart -------------------------------------------
   Markup in snippets/kd-pdp-sticky-atc.liquid. Desktop hides it entirely.
   The button is styled from scratch rather than given Dawn's .button class,
   which would bring its ::before shadow and ::after border ring with it. */
.kd-stickybar {
  display: none;
}

@media screen and (max-width: 749px) {
  .kd-stickybar {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    background: #FFFFFF;
    border-top: 1px solid #DDE3E6;
    box-shadow: 0 -2px 8px rgba(5, 23, 33, 0.08);
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  }

  .kd-stickybar__inner {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .kd-stickybar__price {
    flex: 0 0 auto;
    font-family: var(--font-heading-family);
    font-weight: 900;
    font-size: 1.8rem;
    color: #051721;
  }

  .kd-stickybar__btn {
    flex: 1 1 auto;
    min-height: 48px;
    padding: 0 20px;
    border: 0;
    border-radius: 6px;
    background: #FAA902;
    color: #051721;
    font-family: var(--font-body-family);
    font-weight: 700;
    font-size: 1.5rem;
    cursor: pointer;
  }

  .kd-stickybar__btn[disabled] {
    background: #DDE3E6;
    color: #8A969B;
    cursor: default;
  }

  /* Keep the footer clear of the bar. */
  .shopify-section-group-footer-group {
    padding-bottom: 72px;
  }
}

/* ==========================================================================
   CART DRAWER (prompt 7)

   Scoped on the classes in assets/component-cart-drawer.css. The global
   chrome — Paper scheme, 10px radius, 1px border, 30% drawer shadow — is
   already set in theme settings from prompt 2, so only the overlay tint,
   motion and line-item treatment are handled here.

   Not built: the deposit row (no product carries a deposit) and the
   free-delivery progress line (no threshold agreed). The compatibility
   warning needs the saved-setup cookie from prompt 8.
   ========================================================================== */
.drawer {
  background-color: rgba(5, 23, 33, 0.4);
  transition-duration: var(--kd-dur-slow);
}

.drawer__inner {
  transition: transform var(--kd-dur-slow) var(--kd-ease);
}

.drawer__heading {
  font-family: var(--font-heading-family);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.015em;
  color: #051721;
}

.drawer__footer {
  border-top: 1px solid #DDE3E6;
}

/* Line items — the same Fog plinth as the catalogue cards. */
.cart-drawer .cart-item__media {
  background: #F4F6F7;
  border-radius: 6px;
  overflow: hidden;
}

.cart-drawer .cart-item__image {
  object-fit: contain;
  padding: 10%;
}

.cart-drawer .cart-item__details {
  font-size: 1.4rem;
  line-height: 1.45;
  color: #051721;
}

.cart-drawer .product-option {
  font-size: 1.2rem;
  color: #6B7C84;
}

.cart-drawer .price {
  font-family: var(--font-heading-family);
  font-weight: 900;
  color: #051721;
}

.cart-drawer .quantity,
.cart-drawer .quantity::after {
  border-radius: 100px;
}

.cart-drawer .cart__checkout-button {
  min-height: 56px;
  border-radius: 6px;
  font-family: var(--font-body-family);
  font-weight: 700;
  font-size: 1.6rem;
  letter-spacing: normal;
}