.cocktail-page {
  line-height: var(--line-height-body);
}

@media (min-width: 640px) {
  .cocktail-content-right-column {
    align-self: flex-start;
    padding: 1rem;
    background: #f6f6f6;
  }
  .shopify-container {
    background: #fff;
  }
  /* Dark mode. Both panels kept their light backgrounds while the text on them
     took the dark theme's colour (#e8e8e8), so the shop summary and footnote
     were near invisible. Values are the dark palette's `off` (#2a2a2a) and
     `content-bg` (#1a1a1a) — the same tones core's swatch uses, spelled out
     because this file is plain CSS with no access to the Sass config.

     The column lifts off the page and the shop container sits back down to the
     page tone inside it, keeping the two readable as separate surfaces. That
     inverts the light-mode relationship (there the container is lighter than
     its column), which is the usual dark-mode trade: lighter reads as nearer,
     so the container would otherwise compete with the cards it holds.

     Scoped inside this media query to match the light rules — below 640px
     neither element has a background, and the dark theme must not add one. */
  html[data-theme="dark"] .cocktail-content-right-column {
    background: #2a2a2a;
  }
  html[data-theme="dark"] .shopify-container {
    background: #1a1a1a;
  }
}

/* Headings use the body typeface at 700 (UIUXRULES: the permitted weight for
   sub-headings where the heading typeface is not used). */
.cocktail-page h1,
.cocktail-page h2,
.cocktail-page h3,
.cocktail-page h4,
.cocktail-page h5,
.cocktail-page h6 {
  font-family: 'Body default', Georgia, serif;
  font-weight: 700;
}

.cocktail-page ol,
.cocktail-page ul {
  padding-left: 1rem;
  margin: 0;
}
.cocktail-page .text-inline ul,
.cocktail-page .text-inline ol {
  padding-left: 0;
}
.cocktail-page .text-inline ul li:after,
.cocktail-page .text-inline ol li:after {
  content: "\2022";
  font-weight: 500;
  margin: 0 2px 0 4px;
}
.cocktail-page .text-inline ul li:last-child:after,
.cocktail-page .text-inline ol li:last-child:after {
  content: "";
}


.cocktail-title {
  font-size: var(--font-size-plus-3);
  font-weight: 700;
  margin: 0;
}
.cocktail-heading {
  font-size: var(--font-size-plus-2);
  margin: 0 0 1rem;
  font-weight: 700;
  text-align: left;
}
.cocktail-sub-heading {
  font-size: var(--font-size-base);
  font-weight: 500;
  margin: 1rem 0 0;
}
/* Run-in labels that open a line of body text — "Garnish:", "AKA:",
   "To make X:", "Notes on X:", "*Alcohol-free:". Legacy marked these
   .legacy-longform-heading, which is defined in a legacy stylesheet this page
   does not load, so they rendered as plain body text. Weighted to match
   .cocktail-your-notes__heading, the same pattern elsewhere on the page. */
.cocktail-inline-heading {
  font-weight: 700;
}

.cocktail-ratings {
  display: flex;
  flex-flow: row nowrap;
  font-size: var(--font-size-sub-1);
  font-weight: 500;
  gap: 1rem;
}
/* Ratings sit at their natural width but shrink on a tight row; min-width
   releases the min-content floor so the label truncates (ellipsis) instead
   of the item extending beyond its container. */
.cocktail-rating {
  display: flex;
  align-items: center;
  line-height: 1;
  gap: 4px;
  flex: 0 1 auto;
  min-width: 0;
}
.cocktail-rating__label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/*
  Community-recipe attribution (partial/attribution.twig), shown in the same
  slot on the recipe page and above the login prompt on the teaser.

  App-owned markup rather than the core alert component: legacy's version
  carries the contributor's avatar and several paragraphs, and the component
  has an icon slot and a single message. It is filled rather than outlined: the
  section colour for cocktails (core's `cocktails` swatch, #FFD269 — the same
  yellow as the navigation item) marks it as page furniture rather than an
  alert. Vertical padding is halved against the horizontal so the band stays
  tight to the avatar, which sets the height.

  The avatar aligns to the top of the card rather than to the centre of the
  body: the body's height varies with the contributor name's wrapping and with
  which of the optional meta lines (private / published / updated / competition)
  are present, and centring made the avatar drift down the card as those lines
  appeared. Top alignment keeps it fixed against the first line of text.
*/
.cocktail-attribution {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 8px 16px;
  border-radius: 4px;
  background: #ffd269;
}
.cocktail-attribution__avatar {
  flex-shrink: 0;
  width: 72px;
  height: 72px;
}
.cocktail-attribution__avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  margin-top: 8px;
}
/* min-width releases the min-content floor so a long contributor name wraps
   inside the card instead of pushing it wider. */
.cocktail-attribution__body {
  flex: 1;
  min-width: 0;
}
.cocktail-attribution__body p {
  margin: 0;
}
.cocktail-attribution__your-recipe {
  font-size: var(--font-size-sub-1);
}
/* Three-line contributor card: a quiet lead-in, the name as the loudest thing
   in the block, then the disclaimer stepped back below it. */
.cocktail-attribution__name {
  font-size: var(--font-size-plus-1);
  font-weight: 700;
  line-height: 1.2;
}
/* The name links to the contributor's profile but reads as part of the card
   rather than as body-copy link — the swatch's paired ink, underlined.
   font-weight is restated here because core styles links at 500, and a rule on
   the anchor beats the 700 inherited from the paragraph. */
.cocktail-attribution__name a {
  color: #000;
  font-weight: 700;
  text-decoration: underline;
}
.cocktail-attribution__disclaimer {
  font-size: var(--font-size-sub-1);
}
/* The dates / competition group is a distinct sub-block, set off from the
   contributor lines above it (legacy uses a .mt-3 utility). Set at the
   smallest step on the scale — it is the quietest content in the card. */
.cocktail-attribution__meta {
  margin-top: 1rem;
  font-size: var(--font-size-sub-1);
}

/* The card's ink in dark mode. Its background is the fixed cocktails swatch
   (#ffd269) in both themes — the panel never darkens — but the text on it is
   inherited, so the dark theme was painting #e8e8e8 body copy and #4da3ff links
   onto yellow, neither of which is legible.

   Scoped to the whole card rather than to the individual lines so the meta
   block's optional links (the competition, the owner's "Edit your recipe here")
   are covered too, not just the contributor name. The `a` / `a:visited`
   variants are spelled out because the theme's own anchor rule
   (`html[data-theme="dark"] a`, specificity 0-1-2) outranks a bare class —
   the same reason the name link was rendering blue. */
html[data-theme="dark"] .cocktail-attribution,
html[data-theme="dark"] .cocktail-attribution a,
html[data-theme="dark"] .cocktail-attribution a:visited {
  color: #000;
}

/*
  Gate-page column row. A gated recipe (views/cocktail/gate.twig) has one column
  of copy and an empty second column, so that it sits on the same axis as a real
  recipe instead of 236px to its right.

  The width has to be set here, on the row, rather than on the empty column.
  `__rhs` is a flex item sized by its children's intrinsic contribution, and
  core sizes each `__content` with a *percentage* basis (`flex: 1 1 50%`), which
  contributes nothing intrinsically when the column is empty — so the row
  collapsed and both columns came out at 220px. Giving the empty column a
  definite basis instead only moves the problem: it then has to refuse to shrink
  to hold the row open, so at 1024px it sat at its full 440px while the copy was
  squeezed to 264px against a real recipe's 351px.

  With the row given the definite basis, both columns keep core's own
  `flex: 1 1 50%` and shrink together exactly as a recipe's do. Expressed as the
  column width twice plus the gutter (core: .dg-layout-default__content
  max-width 440px, $dg_gutter_desktop 32px) rather than as 912px, so it reads as
  the thing it is.

  Desktop only. Below the medium breakpoint __rhs stacks its children, where the
  empty column is a harmless zero-height box and a fixed width is not.
*/
@media (min-width: 640px) {
  .cocktail-gate-rhs {
    flex: 0 1 calc(440px * 2 + 32px);
  }
}

/*
  Related-content boxes in the right-hand column. An app-owned flex column on
  the same 16px rhythm as the page column — replacing Foundation's .grid-xy,
  whose margin grid spaces cells by a 2rem gutter (a half-gutter on each cell,
  the outer halves cancelled by negative margins on the row). That was both out
  of step with the rest of the column and fragile: the negative margins only
  work while every cell keeps its own, so a first-child margin reset anywhere
  above pulled the whole grid half a gutter out of place.
*/
.cocktail-related-boxes {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* "See more..." category list — flush left (the page-level 1rem ul padding
   is for content lists with markers; this one is unstyled links). */
.cocktail-page .cocktail-see-more-list {
  padding-left: 0;
}

.cocktail-ingredients__table {
  width: 100%;
}
.cocktail-ingredients__footer {
  margin-top: 1rem;
  font-size: var(--font-size-sub-1);

}

/* Closes the Health & Nutrition section, so it takes no trailing margin: the
   base `p` rule's 16px would otherwise sit between the note and the section's
   own bottom edge, and the column already owns the gap to whatever follows. */
.cocktail-health-nutrition__footer {
  margin-top: 1rem;
  margin-bottom: 0;
  font-size: var(--font-size-sub-1);
}
/* The sub-0.85-accuracy caveat above the partial "contains at least" figure.
   Legacy sets this with .text-small, which is defined in core's default.css —
   a stylesheet this page does not load — so it had no effect here. */
.cocktail-health-nutrition__note {
  font-size: var(--font-size-sub-1);
}

/* "Cocktail of the day: 14th August 2026 is …" — sits beneath the review on
   every recipe carrying a calendar entry; the header badge additionally
   appears on the day itself. Legacy used .legacy-longform-inline-container /
   .legacy-longform-heading here, neither of which is defined in the
   stylesheets this page loads. */
/* "Showing the first N of M comments." — same .text-small problem as
   .cocktail-health-nutrition__note above. */
.cocktail-comments__note {
  font-size: var(--font-size-sub-1);
}

/*
  Controls row: 35% / 30% / 35%. Expressed in fr units (7:6:7 = 35:30:35) so
  the shares are taken from the space remaining AFTER the gaps — raw
  percentages would total 100% + gaps and overflow the row. Grid, not flex:
  fr tracks split exactly, whereas flex growth/shrink is weighted by each
  item's padding-floored base — the card (8px sides) and the un-padded
  #js-keep-awake wrapper would always end up a few px off their shares.
*/
.cocktail-controls {
  display: grid;
  grid-template-columns: 7fr 6fr 7fr;
  gap: 0.5rem;
}

.cocktail-controls > :first-child,
.cocktail-controls > :last-child {
  /* release the min-content floor so the equal tracks always win */
  min-width: 0;
}

.long-form__quote {
  border-left: .125rem solid #cacaca;
  color: #727272;
  display: block !important;
  font-style: italic;
  margin: 1rem;
  padding: 0 1.25em;
}

.cocktail-flavour-profile__footer {
  margin-top: 1rem;
}

/*
  The lifestyle gallery (lead media + switchable thumbnails) is the core
  gallery component (component-gallery.css/js) — only the hero block below
  (.cocktail-gallery--main: cutout image + personalisation controls) remains
  app-side.
*/
.cocktail-gallery img {
  max-width: 100%;
}

.cocktail-gallery--main {
  display: flex;
  flex-flow: row nowrap;
  gap: 16px;
  align-items: center;
}
/* The 60% share sits on the image's WRAPPER: sizing the img itself as a flex
   item forces its width while the height caps, stretching/squashing it. The
   img sizes naturally inside the wrapper (capped both ways), centred. */
.cocktail-gallery__image {
  width: 60%;
  flex: 1 0 60%;
}
.cocktail-gallery--main img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  max-height: 22rem;
  width: auto;
  height: auto;
  /* 8px (0.5 x grid gutter) */
  border-radius: 0.5rem;
}
/*
  NO z-index HERE. The personalisation modals are rendered inside this element,
  and the core modal is position:fixed z-index:9999 with a position:fixed
  z-index:999 overlay that lives at the document root. A z-index on this
  wrapper makes it a stacking context, which confines the modal's 9999 to
  *within* it — the whole subtree then paints at this element's level, i.e.
  beneath the overlay. Every click inside the notes, collections and
  preferred-brands modals was being swallowed by their own overlay as a result.

  Layering over the gallery image is handled by source order instead: this
  element follows .cocktail-gallery__image, and with both positioned and
  neither creating a stacking context, the later one paints on top.
*/
.cocktail-gallery__controls {
  flex: 0 1 auto;
  position: relative;
}

/*
  Cocktail-of-the-day stamp — overlaid on the top right of the gallery image,
  and only on the day itself. The wrapper is the positioning context (the
  --default variant already sets position/z-index on it; this covers the
  user-gen variant too).

  Deliberately no z-index: the badge follows the <img> in source order and both
  are positioned, so it paints above without one. Adding a z-index here would
  create another stacking context around the gallery — the exact shape of the
  bug that trapped the personalisation modals under their own overlay.
*/
.cocktail-gallery__image {
  position: relative;
}

.cocktail-cotd-badge {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 3.5rem;
  height: 3.5rem;
}

.cocktail-cotd-badge svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* z-index removed alongside the one on .cocktail-gallery__controls: leaving it
   here would paint this wrapper (level 1) above the controls (level auto) and
   the overflowing image would cover them. Source order handles it. */
.cocktail-page--default .cocktail-gallery__image {
  position: relative;
  align-self: stretch;
}
.cocktail-page--default .cocktail-gallery__image img {
  position: absolute;
  top: -1rem;
  right: -1rem;
  bottom: -1rem;
  left: -1rem;
  width: calc(100% + 2rem);
  height: calc(100% + 2rem);
  max-width: none;
  max-height: none;
  margin: 0;
  object-fit: contain;
}

.cocktail-page--user-gen .cocktail-gallery--main {
  flex-flow: column nowrap;
}
/*
  User-generated mix photos are presented at the full width of the column
  (design decision, 2026-08-17). They are member snapshots at whatever aspect
  the phone took them at, so the 22rem height cap left portrait shots narrow —
  512x769 rendered 234px wide in a 440px column. Releasing the cap and driving
  the width instead lets the image fill the column and take whatever height its
  aspect needs.

  Both rules are required: .cocktail-gallery--main centres its items, so the
  wrapper shrink-wraps its content unless it is given the width too.
*/
.cocktail-page--user-gen .cocktail-gallery--main .cocktail-gallery__image {
  flex: 1 1 auto;
  width: 100%;
}
.cocktail-page--user-gen .cocktail-gallery--main img {
  width: 100%;
  height: auto;
  max-height: none;
}


/* Personalisation controls — one control per row, ruled apart. */
.cocktail-personalisation-controls {
  display: flex;
  gap: 8px 0;
  flex-flow: row wrap;
}
.cocktail-personalisation-controls__item {
  border-bottom: 1px solid #dcdfe1;
  width: 100%;
  padding-bottom: 4px;
}

.cocktail-page--user-gen .cocktail-personalisation-controls__item {
  width: 50%;
}

.cocktail-personalisation-controls__item:last-child,
.cocktail-page--user-gen .cocktail-personalisation-controls__item:nth-child(9n) {
  border-bottom: 0;
}

/*
  Servings stepper — a single row: [- button] [count + icon] [+ button],
  everything vertically centred.
*/
.cocktail-servings {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-weight: 700;
  font-size: var(--font-size-base);
  width: 100%;
}
.cocktail-servings button {
  flex: 1 0 auto;
  justify-content: center;
}


.cocktail-servings__count {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

/*
  Servings stepper — the loading icon is hidden until a count change is
  pending: the stepper JS adds `submitting` to the form while the debounced
  serving POST is in flight. The icon is absolutely positioned (top-right of
  the containing component-group) so revealing it causes no layout shift.
  The group provides the positioning context; the core component-group__item
  is position:relative and would otherwise capture the icon, so it is
  neutralised within this group (nothing else in it positions absolutely).
*/
.cocktail-servings-group {
  position: relative;
}

.cocktail-servings-group .component-group__item {
  position: static;
}

.cocktail-servings-form .svg-icon--loading {
  display: none;
}

.cocktail-servings-form.submitting .svg-icon--loading {
  display: block;
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 1rem;
  height: 1rem;
}

/*
  Dropdown option list — shared by the unit-of-measure and rating dropdowns
  (partial/dropdown/*.twig). The options sit inside a single container (a
  <form> for units), so the dropdown body's own flex column only sees one
  child — the container must stack its buttons itself. Long lists (the 11
  rating options) scroll within the panel.
*/
.cocktail-dropdown-options {
  display: flex;
  flex-direction: column;
  max-height: min(24rem, 60vh);
  overflow-y: auto;
}

/* Hidden until the JS surfaces a failed engagement POST (e.g. a rate-limited
   vote); mirrors the legacy modal's form-control__info--error slot. */
.cocktail-dropdown-options__error {
  padding: 0.25rem 0.5rem;
  font-size: var(--font-size-sub-1);
  color: #ad0000;
}

html[data-theme="dark"] .cocktail-dropdown-options__error {
  color: #ff8a70;
}

/* The rate control anchors its dropdown to its controls-row item. */
.cocktail-personalisation-controls__item--dropdown {
  position: relative;
}

.cocktail-your-notes__heading {
  font-weight: 700;
}

/*
  Modal body sections — layout mirrored from the profile app's modals
  ("Available for", #js-modal-available-for): the first section carries its
  own 3px top border, which pairs with the modal head's border to give the
  heading its double-border treatment; sections pad 1.5rem vertically. The
  trailing action row drops the border and top padding (profile parity).
*/
.cocktail-modal-section {
  padding: 1.5rem 0;
  border-top: 3px solid #dcdfe1;
}

html[data-theme="dark"] .cocktail-modal-section {
  border-top-color: #3a3a3a;
}

.cocktail-modal-section--no-border {
  border-top: none;
}

.cocktail-modal-section--no-top-pad {
  padding-top: 0;
}

/* Action row inside the personalisation modals (save / create buttons). */
.cocktail-modal-actions {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

/* Collections modal rows — checkbox + a right-aligned loading slot shown
   while that collection's toggle is in flight; 0.5rem between options
   (profile modal parity). */
.cocktail-collections-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.cocktail-modal-section .cocktail-collections-option + .cocktail-collections-option {
  margin-top: 0.5rem;
}

.cocktail-collections-option__loading .svg-icon {
  display: block;
  width: 1rem;
  height: 1rem;
}

.cocktail-collections-empty {
  text-align: center;
}

/* New-comment form at the top of the comments section. */
.cocktail-new-comment {
  margin-bottom: 1.5rem;
}

/* "See discussion in the Forum" link below the comment threads. */
.cocktail-comments-forum-link {
  margin-top: 1rem;
}

/* Reply context inside the new-comment modal ("Replying to {author}"). */
.cocktail-reply-context {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

/* Preferred-brands modal rows — ingredient name + current-brand tag in the
   head, the (lazily-built) picker beneath. */
.cocktail-preferred-row__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.cocktail-preferred-row__name {
  font-weight: 500;
}

.cocktail-preferred-row__brand {
  font-size: var(--font-size-sub-1);
  color: #767676;
}

html[data-theme="dark"] .cocktail-preferred-row__brand {
  color: #a0a0a0;
}

.cocktail-preferred-row__brand--set {
  font-weight: 700;
  color: inherit;
}

.cocktail-preferred-row__picker,
.cocktail-preferred-row__note {
  margin-top: 0.5rem;
}

/* Loading placeholder icon — inline with the text, sized to the font
   (unsized svg-icons render at their intrinsic size). Cleared with the
   placeholder when the picker builds. */
.cocktail-preferred-row__picker .svg-icon--loading {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
}

.cocktail-preferred-row__note {
  font-size: var(--font-size-sub-1);
  color: #767676;
}

.cocktail-preferred-add-new {
  margin-top: 0.5rem;
}

.cocktail-preferred-add-new .cocktail-modal-actions {
  margin-top: 0.5rem;
}
.cocktail-dropdown-options__option {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  background: none;
  border: 0;
  border-radius: 0.25rem;
  /* right padding reserves the selected-check slot on every option so the
     rows keep a consistent width */
  padding: 0.25rem 3rem 0.25rem 0.5rem;
  text-align: left;
  cursor: pointer;
  color: inherit;
  font-size: var(--font-size-base);
  font-weight: 500;
}

/* Right-aligned, vertically-centred icon slot: the check on the selected
   unit, swapped for the loading icon while a new pick round-trips. */
.cocktail-dropdown-options__check,
.cocktail-dropdown-options__loading {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
}

.cocktail-dropdown-options__check .svg-icon,
.cocktail-dropdown-options__loading .svg-icon {
  display: block;
  width: 1rem;
  height: 1rem;
}

.cocktail-dropdown-options__option:hover {
  background: #f3f3f3;
}

html[data-theme="dark"] .cocktail-dropdown-options__option:hover {
  background: #333333;
}

.cocktail-dropdown-options__option--selected {
  font-weight: 700;
}

.cocktail-dropdown-options__info {
  font-size: var(--font-size-sub-1);
  font-weight: 400;
  color: #767676;
}

html[data-theme="dark"] .cocktail-dropdown-options__info {
  color: #a0a0a0;
}

.ingredient-measure {
  white-space: nowrap;
  vertical-align: baseline;
  padding-right: 4px;
}

/*
  Inline variant (rating dropdown) — the descriptor sits on the same line as
  the value, legacy <select> style ("5+ ─ Outstanding"). The value gets a
  fixed slot so the dash column lines up down the list (legacy faked this
  with &nbsp; runs).
*/
.cocktail-dropdown-options--inline .cocktail-dropdown-options__option {
  flex-direction: row;
  align-items: baseline;
}

.cocktail-dropdown-options--inline .cocktail-dropdown-options__value {
  min-width: 2rem;
}

.cocktail-dropdown-options--inline .cocktail-dropdown-options__info {
  font-size: inherit;
  white-space: nowrap;
}
/* ============================================================
   Difford's Shop panel
   Ported from legacy-www module/_shop.scss (shopify-* block) with the scss
   functions resolved: fontFamily('shop') = 'Shop default' (in core
   fonts.css), fontWeight shop=300 / shop-bold=500 / bold=500, fontSize
   base--=0.75rem / base-=0.875rem / base=1rem. Legacy's base+ (1.33rem)
   price size is nudged to 1.25rem, the nearest UIUXRULES-permitted size.
   The shop lives in its own branded bubble and is EXEMPT from the
   site-wide font-size scale (do not convert these to --font-size-*
   variables). It keeps its own (light) appearance in dark mode too; only
   the panel border adapts.
   ============================================================ */

.cocktail-shop-mobile {
  padding-top: 1rem;
  padding-bottom: 2rem;
}

.shopify-head {
  background: #151515;
  border-radius: 0.125rem 0.125rem 0 0;
  padding: 0.75rem 0.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.shopify-head > img {
  width: 10rem;
  height: 1.75rem;
}
@media (min-width: 640px) {
  .shopify-head > img {
    width: 8rem;
    height: 1.25rem;
  }
}

.shopify-container {
  padding: 0.5rem;
  border: 1px solid #151515;
  border-radius: 0 0 0.125rem 0.125rem;
  /* 16px, matching the column's gap — legacy's 2rem predates it */
  margin: 0 0 16px;
}
html[data-theme="dark"] .shopify-container {
  border-color: #787878;
}

.shopify-head,
.shopify-container,
.shopify-item {
  font-size: 1rem;
  word-spacing: 0.001em;
  font-family: 'Shop default', Geneva, Arial, sans-serif;
  font-weight: 300;
  font-feature-settings: "kern" 1;
  font-kerning: normal;
  line-height: normal;
}

.shopify-muted {
  color: #787878;
}

.shopify-item__button {
  display: inline-flex;
  align-items: center;
  height: 2rem;
  padding: 0 1rem;
  border: 1px solid #151515;
  border-radius: 1rem;
  background: #fff;
  color: #151515;
  font-size: 0.75rem;
  font-weight: 500;
}
a.shopify-item__button {
  color: #151515;
  text-decoration: none;
}

.shopify-item__heading {
  display: block;
  margin-bottom: 0;
}
.shopify-item__heading > a {
  color: inherit;
  text-decoration: none;
}

.shopify-item__price {
  font-size: 1.25rem;
  font-weight: 500;
}

.shopify-item__body {
  flex: 1;
}

.shopify-item__image-container {
  flex: 0 0 2.5rem;
  margin-right: 1rem;
}
@media (min-width: 640px) {
  .shopify-item__image-container {
    margin-right: 0.75rem;
  }
}
/* Bottle cutouts carry whatever aspect ratio the product shot had, and at the
   container's fixed width a tall one runs away with the row: Fernet Branca is
   512x1333, which rendered 83px tall next to a square bottle's 32px. Cap the
   height so no single product can set the row height.

   object-fit is what keeps the cutout in proportion: with width:100% and the
   cap both in play, the box is no longer the image's own aspect ratio, and the
   default (fill) would stretch the bottle to match it. `contain` scales the
   cutout down to fit and letterboxes the remainder instead. Images already
   inside the cap (square bottles, the 128x128 barware shots) are untouched. */
.shopify-item__image-container img {
  width: 100%;
  height: auto;
  max-height: 3rem;
  object-fit: contain;
  mix-blend-mode: multiply;
}

/* Row inside a barware card: price left, buy button right
   (legacy flex-container align-justify align-middle mt-2). */
.shopify-item__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.5rem;
}
.shopify-item__row p {
  margin: 0;
}

.shopify-item--barware {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  font-size: 0.875rem;
  background: #fff;
  color: #151515;
  padding-bottom: 0.5rem;
}
.shopify-item--barware .shopify-item__heading {
  font-size: 0.875rem;
  padding-right: 5rem;
}
@media (min-width: 640px) {
  .shopify-item--barware .shopify-item__heading {
    font-size: 0.75rem;
    padding-right: 0;
  }
}
.shopify-item--barware .shopify-item__price {
  font-size: 1rem;
}
.shopify-item--barware .shopify-item__button {
  height: 1.75rem;
  padding: 0 0.75rem;
}
/* Divider between barware cards (legacy bt-1 pt-3 mt-2 utilities). */
.shopify-barware .shopify-item--barware:not(:first-child) {
  border-top: 1px solid #e7e7e7;
  padding-top: 1rem;
  margin-top: 0.5rem;
}

/* Mobile action row under the collapsed barware list. */
.shopify-actions {
  margin-top: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Space between ingredient cards (legacy mb-2 on all but the last). */
.shopify-multi .shopify-item + .shopify-item {
  margin-top: 0.5rem;
}

/* Cost / yield / buy-now summary under the ingredient list
   (legacy text-xsmall mt-3 mb-5 px-2 utilities). */
.shopify-summary {
  font-size: 0.75rem;
  margin: 1rem 0 2rem;
  padding: 0 0.5rem;
}
.shopify-summary p {
  margin: 0;
}
.shopify-summary__cost {
  margin-bottom: 0.5rem;
}
.shopify-summary .shopify-button {
  margin: 1rem 0;
}

/*
  Ingredient card checkbox. The legacy markup uses the legacy form module's
  form-control-checkbox structure; those classes have no styles in this app
  (and the core checkbox component takes a plain-string label, so it can't
  hold this rich card label), so the needed rules are ported here scoped
  under .shopify-multi. Base form values resolved: form-spacing 1rem, border
  1px, radius 0.25rem, input bg #fff / border #969696, focus outline 4px
  #9bcbfe.
*/
.shopify-multi .form-control-checkbox {
  position: relative;
  z-index: 1;
}
.shopify-multi .form-control-checkbox__input {
  cursor: pointer;
  position: absolute;
  width: 1rem;
  height: 1rem;
  top: calc(1px + 1rem);
  left: calc(1px + 1rem);
  margin: 0;
}
.shopify-multi .form-control-checkbox__input:focus + .form-control-checkbox__label,
.shopify-multi .form-control-checkbox__input:focus-visible + .form-control-checkbox__label {
  outline: 4px solid #9bcbfe;
  box-shadow: 0 0 0 1px #000000 inset;
  border-color: #000000;
}
.shopify-multi .form-control-checkbox__label {
  cursor: pointer;
  word-wrap: break-word;
  margin: 0;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  font-weight: 500;
  background: #ffffff;
  color: #151515;
  border: 1px solid #969696;
  border-radius: 0.25rem;
  padding: 0.5rem 0.5rem 0.5rem calc(3rem + 2px);
  min-height: 3rem;
}
.shopify-multi .shopify-item__body {
  font-size: 0.875rem;
}
.shopify-multi .shopify-item__image-container {
  margin: 0 0 0.5rem;
  flex: 0 1 2rem;
}
.shopify-multi .form-control-checkbox .shopify-item__price {
  display: block;
  margin: 0.5rem 0 0;
  font-size: 0.875rem;
}
.shopify-multi .form-control-checkbox__info {
  font-size: 0.75rem;
  font-weight: 300;
  display: block;
  margin-top: 0.25rem;
}
.shopify-multi .shopify-button {
  width: 100%;
}

.shopify-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 7px 30px;
  font-size: 0.875rem;
  overflow: hidden;
  border-radius: 24px;
  background: #151515;
  color: #fff;
  font-weight: 500;
}
.shopify-button .svg-icon {
  width: 1rem;
  height: 1rem;
}
.shopify-button .svg-icon:first-child {
  margin-right: 0.5rem;
}
.shopify-button .svg-icon:last-child {
  margin-left: 0.5rem;
}
.shopify-button--disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.shopify-button--small {
  height: auto;
  padding: 0.5rem 1rem;
}
.shopify-button--outline {
  background: #fff;
  border: 1px solid #151515;
  color: #151515;
}
a.shopify-button {
  text-decoration: none;
  color: #fff;
}
a.shopify-button:visited {
  color: #fff;
}
a.shopify-button--outline {
  color: #151515;
}
a.shopify-button--outline:visited {
  color: #151515;
}

.shopify-footer {
  margin-top: 1.5rem;
  font-size: 0.75rem;
}
a.shopify-link {
  color: #787878;
  font-weight: 300;
}

/* Hover states (what-input runs in the core bundle, as in legacy). */
[data-whatintent="mouse"] .shopify-item__button:hover,
[data-whatintent="mouse"] a.shopify-item__button:hover {
  background: #151515;
  color: #fff;
}
[data-whatintent="mouse"] .shopify-button:hover,
[data-whatintent="mouse"] a.shopify-button:hover {
  color: rgba(255, 255, 255, 0.9);
}
[data-whatintent="mouse"] .shopify-button--outline:hover,
[data-whatintent="mouse"] a.shopify-button--outline:hover {
  border-color: rgba(255, 255, 255, 0.9);
}
[data-whatintent="mouse"] .shopify-head:hover {
  opacity: 0.8;
}

/*
  Dark mode for the shop panel. The panel carries its own colour system rather
  than the site's, so it needs its own inversion rather than inheriting one.

  Surfaces: the cards were pure white on the now-dark container, the last bright
  blocks on the page. They take the same `off` (#2a2a2a) lift as the other
  panels, with `border` (#3a3a3a) for their edges and dividers, and the dark
  base colour for text — the cards pin #151515 in light mode, which would be
  near-black on a dark card.

  Buttons: the panel's light-mode hierarchy is dark-filled = primary, light with
  a dark outline = secondary, and hover swaps the two. That hierarchy is
  preserved by inverting it wholesale rather than by lightening everything: the
  primary fills light on dark text (it was #151515 on a #1a1a1a container, all
  but invisible), and the outline variants sit transparent with a light border
  so they stay quieter than the primary, exactly as they do in light mode.

  The `a` and `a:visited` variants must be spelled out: the theme's own anchor
  rule (`html[data-theme="dark"] a`, specificity 0-1-2) outranks a bare class
  and was already repainting every one of these buttons link-blue.
*/
html[data-theme="dark"] .shopify-multi .form-control-checkbox__label {
  background: #2a2a2a;
  color: #e8e8e8;
  border-color: #3a3a3a;
}
html[data-theme="dark"] .shopify-item--barware {
  background: transparent;
  color: #e8e8e8;
}
html[data-theme="dark"] .shopify-barware .shopify-item--barware:not(:first-child) {
  border-top-color: #3a3a3a;
}

/* Product images drop the multiply blend. Multiply is `base x blend`, so every
   pixel can only get darker: against a #2a2a2a card a light product — the
   silver jigger, the stirring glass — collapses to near-black and is
   effectively invisible. It earns its place in light mode, where it knocks the
   white backing out of the cutouts against a white card, but there is no light
   backing to knock out here.

   The trade is that a cutout whose backing is opaque rather than transparent
   shows that backing as a pale box on the dark card. That is the lesser
   problem: a visible product in a box beats a legible box with no visible
   product. */
html[data-theme="dark"] .shopify-item__image-container img {
  mix-blend-mode: normal;
}

/* Product names ask to `color: inherit` so they match their card. The theme's
   anchor rule outranks that too, so they were rendering link-blue against
   #e8e8e8 card text; restated here at a weight that wins. */
html[data-theme="dark"] .shopify-item__heading > a,
html[data-theme="dark"] .shopify-item__heading > a:visited {
  color: inherit;
}

/* Primary: filled light, dark text. */
html[data-theme="dark"] .shopify-button,
html[data-theme="dark"] a.shopify-button,
html[data-theme="dark"] a.shopify-button:visited {
  background: #e8e8e8;
  color: #151515;
}

/* Secondary / outline: transparent with a light edge, quieter than the primary. */
html[data-theme="dark"] .shopify-item__button,
html[data-theme="dark"] a.shopify-item__button,
html[data-theme="dark"] a.shopify-item__button:visited,
html[data-theme="dark"] .shopify-button--outline,
html[data-theme="dark"] a.shopify-button--outline,
html[data-theme="dark"] a.shopify-button--outline:visited {
  background: transparent;
  border-color: #e8e8e8;
  color: #e8e8e8;
}

/* Hovers mirror the light-mode swap. Both attributes sit on <html>, so they
   combine on one compound selector rather than nesting. */
html[data-theme="dark"][data-whatintent="mouse"] .shopify-item__button:hover,
html[data-theme="dark"][data-whatintent="mouse"] a.shopify-item__button:hover {
  background: #e8e8e8;
  color: #151515;
}
html[data-theme="dark"][data-whatintent="mouse"] .shopify-button:hover,
html[data-theme="dark"][data-whatintent="mouse"] a.shopify-button:hover {
  color: rgba(21, 21, 21, 0.9);
}
html[data-theme="dark"][data-whatintent="mouse"] .shopify-button--outline:hover,
html[data-theme="dark"][data-whatintent="mouse"] a.shopify-button--outline:hover {
  border-color: rgba(26, 26, 26, 0.9);
}