/* ============================================================
   Royal Liquor Core styles
   Swap the 8 hex values in :root to rebrand the whole site.
   ============================================================ */

:root {
  --ink:       #0B0B0C;
  --bone:      #F6F3ED;
  --brass:     #C08A2E;
  --slate:     #6B6B6B;
  --line:      #E2DED5;
  --in-stock:  #1E7A55;
  --low-stock: #B23A2C;
  --white:     #FFFFFF;

  --font-display: 'Fraunces', Georgia, serif;
  --font-ui:      'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --h1:   clamp(2.25rem, 1.2rem + 4.5vw, 4rem);
  --h2:   clamp(1.75rem, 1.1rem + 2.8vw, 2.5rem);
  --h3:   clamp(1.25rem, 1.05rem + 0.9vw, 1.5rem);
  --body: clamp(1rem, 0.96rem + 0.18vw, 1.0625rem);

  /* Tied to Blocksy's own container variable so our sections line up with the
     header, the logo and the footer instead of guessing a width. If the theme
     container is ever changed in the Customizer, this follows it. */
  --wrap:        var(--theme-normal-container-max-width, 1248px);
  --gutter:      clamp(1rem, 0.7rem + 1.2vw, 2rem);
  /* 80px was the original, then 36 to 56px, now 28 to 40px. Two stacked
     sections meet at twice this, so it reads as roughly double on screen. */
  --section-pad: clamp(1.75rem, 0.75rem + 2vw, 2.5rem);
  --radius:      2px;

  --utility-h: 36px;
  --bar-h:     72px;
}

/* ---- BASE ---- */

/* The gutter is added to the max width rather than eaten out of it, so the
   inner content edge lands at exactly (viewport - --wrap) / 2. That is the
   same left edge as the theme's centred container, which is what puts every
   heading and paragraph in line with the logo above them. Below that width
   the gutter keeps text off the screen edge. */
.lq-wrap {
  width: 100%;
  max-width: calc(var(--wrap) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

[class^="lq-"], [class^="lq-"] * { box-sizing: border-box; }

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(1px,1px,1px,1px);
  white-space: nowrap;
}

.lq-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 24px;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--white);
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 180ms ease-out;
}
.lq-btn:hover { opacity: 0.85; color: var(--white); }
.lq-btn--accent { background: var(--brass); border-color: var(--brass); color: var(--ink); }
.lq-btn--accent:hover { color: var(--ink); }
.lq-btn--ghost { background: transparent; color: var(--ink); }

/* ============================================================
   HEADER
   ============================================================ */

.lq-header {
  position: sticky;
  top: 0;
  z-index: 500;
  background: var(--white);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-ui);
}

.lq-utility {
  background: var(--ink);
  color: var(--bone);
  font-size: 13px;
  line-height: 1;
}
.lq-utility__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: var(--utility-h);
}
.lq-utility__msg { margin: 0; }
.lq-utility__msg strong { color: var(--brass); font-weight: 600; }
.lq-utility__links { display: flex; gap: 20px; }
.lq-utility a { color: var(--bone); text-decoration: none; }
.lq-utility a:hover { color: var(--brass); }

.lq-bar__inner {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: var(--bar-h);
  transition: min-height 180ms ease-out;
}
.lq-header.is-stuck .lq-bar__inner { min-height: 60px; }
.lq-header.is-stuck .lq-utility { display: none; }

.lq-logo {
  flex: 0 0 auto;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.lq-logo img { display: block; max-height: 40px; width: auto; }

.lq-nav { flex: 1 1 auto; }
.lq-nav ul { list-style: none; margin: 0; padding: 0; }
.lq-nav > ul { display: flex; gap: 2px; }
.lq-nav > ul > li { position: static; }
.lq-nav > ul > li > a {
  display: block;
  padding: 26px 12px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.lq-nav > ul > li:hover > a,
.lq-nav > ul > li.current-menu-item > a,
.lq-nav > ul > li.current-menu-parent > a { border-bottom-color: var(--brass); }

.lq-nav .sub-menu {
  position: absolute;
  left: 0; right: 0; top: 100%;
  display: none;
  column-count: 4;
  column-gap: 32px;
  padding: 32px calc(50vw - var(--wrap) / 2 + var(--gutter));
  background: var(--white);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
@media (max-width: 1320px) {
  .lq-nav .sub-menu { padding-inline: var(--gutter); }
}
.lq-nav > ul > li:hover .sub-menu,
.lq-nav > ul > li:focus-within .sub-menu { display: block; }
.lq-nav .sub-menu li { break-inside: avoid; }
.lq-nav .sub-menu a {
  display: block;
  padding: 8px 0;
  font-size: 15px;
  color: var(--slate);
  text-decoration: none;
}
.lq-nav .sub-menu a:hover { color: var(--ink); }

.lq-search { flex: 0 1 250px; position: relative; }
.lq-search input {
  width: 100%;
  height: 44px;
  padding: 0 44px 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bone);
  font-family: var(--font-ui);
  font-size: 16px;
  color: var(--ink);
}
.lq-search input:focus { outline: 2px solid var(--ink); outline-offset: 1px; }
.lq-search button {
  position: absolute;
  right: 4px; top: 4px;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border: 0; background: none; cursor: pointer; color: var(--slate);
}

.lq-actions { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.lq-actions a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 44px; min-height: 44px;
  padding: 0 10px;
  color: var(--ink);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
}
.lq-actions a:hover { color: var(--brass); }
.lq-cart__count {
  display: inline-flex;
  align-items: center; justify-content: center;
  min-width: 20px; height: 20px;
  padding: 0 5px;
  border-radius: 10px;
  background: var(--brass);
  color: var(--ink);
  font-size: 12px; font-weight: 600;
}
.lq-cart__total { color: var(--slate); font-weight: 400; }

.lq-burger {
  display: none;
  width: 44px; height: 44px;
  padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--ink);
}
.lq-burger span {
  display: block;
  width: 22px; height: 2px;
  margin: 5px auto;
  background: currentColor;
}

@media (max-width: 1023px) {
  .lq-burger { display: block; }
  .lq-nav { display: none; }
  .lq-bar__inner { flex-wrap: wrap; gap: 8px; }
  .lq-search { order: 5; flex: 1 1 100%; margin-bottom: 12px; }
  .lq-logo { flex: 1 1 auto; text-align: center; font-size: 18px; }
  .lq-utility__links { display: none; }
  .lq-utility__inner { justify-content: center; text-align: center; }
  .lq-actions .lq-label { display: none; }
  .lq-cart__total { display: none; }
}

/* ---- drawer ---- */

.lq-drawer {
  position: fixed;
  inset: 0 auto 0 0;
  width: min(88vw, 380px);
  z-index: 900;
  background: var(--white);
  transform: translateX(-100%);
  transition: transform 200ms ease-out;
  overflow-y: auto;
  padding: 20px var(--gutter) 60px;
  font-family: var(--font-ui);
}
.lq-drawer.is-open { transform: translateX(0); }
.lq-drawer__close {
  width: 44px; height: 44px;
  margin-left: auto; display: block;
  border: 0; background: none; font-size: 26px; cursor: pointer; color: var(--ink);
}
.lq-drawer ul { list-style: none; margin: 0; padding: 0; }
.lq-drawer li { position: relative; }
.lq-drawer a {
  display: block;
  padding: 14px 44px 14px 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
  font-size: 16px; font-weight: 600;
}
.lq-drawer .sub-menu { display: none; padding-left: 16px; }
.lq-drawer .sub-menu.is-open { display: block; }
.lq-drawer .sub-menu a { font-weight: 400; color: var(--slate); font-size: 15px; }
.lq-drawer__toggle {
  position: absolute; right: 0; top: 0;
  width: 44px; height: 49px;
  border: 0; background: none; cursor: pointer;
  font-size: 18px; color: var(--slate);
}

.lq-scrim {
  position: fixed; inset: 0; z-index: 800;
  background: rgba(0,0,0,0.5);
  opacity: 0; pointer-events: none;
  transition: opacity 200ms ease-out;
}
.lq-scrim.is-open { opacity: 1; pointer-events: auto; }
body.lq-lock { overflow: hidden; }

/* ============================================================
   FOOTER
   ============================================================ */

.lq-footer {
  background: var(--ink);
  color: var(--bone);
  font-family: var(--font-ui);
  font-size: 15px;
}
.lq-footer a { color: var(--bone); text-decoration: none; }
.lq-footer a:hover { color: var(--brass); }

.lq-footer__news { border-bottom: 1px solid rgba(255,255,255,0.12); }
.lq-footer__news .lq-wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 32px; padding-block: 40px; flex-wrap: wrap;
}
.lq-footer__news h2 {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-size: var(--h3); font-weight: 700; color: var(--white);
}
.lq-footer__news p { margin: 0; color: rgba(246,243,237,0.7); font-size: 14px; }
.lq-newsletter-form { display: flex; gap: 8px; flex: 1 1 340px; max-width: 460px; }
.lq-newsletter-form input[type="email"] {
  flex: 1 1 auto; height: 48px; padding: 0 14px;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: var(--radius);
  background: transparent; color: var(--white);
  font-family: var(--font-ui); font-size: 16px;
}
.lq-newsletter-form input::placeholder { color: rgba(246,243,237,0.5); }

.lq-footer__cols {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 40px;
  padding-block: 56px;
}
.lq-footer__cols h3 {
  margin: 0 0 16px;
  font-size: 13px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--brass);
}
.lq-footer__cols ul { list-style: none; margin: 0; padding: 0; }
.lq-footer__cols li { margin-bottom: 10px; }
.lq-footer__brand p { margin: 0 0 16px; color: rgba(246,243,237,0.7); line-height: 1.6; }
.lq-footer__logo {
  display: inline-block; margin-bottom: 14px;
  font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--white);
}
.lq-footer__contact li { display: flex; gap: 10px; }
.lq-footer__contact span { color: rgba(246,243,237,0.55); min-width: 68px; }

.lq-footer__bar {
  border-top: 1px solid rgba(255,255,255,0.12);
  padding-block: 24px;
  font-size: 13px;
  color: rgba(246,243,237,0.65);
}
.lq-footer__bar .lq-wrap {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 16px;
}
.lq-footer__age {
  width: 100%;
  margin: 0 0 8px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  color: var(--bone);
}
.lq-footer__pay { display: flex; gap: 8px; flex-wrap: wrap; }
.lq-footer__pay span {
  padding: 5px 10px;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: var(--radius);
  font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase;
}

@media (max-width: 1023px) {
  .lq-footer__cols { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 600px) {
  .lq-footer__cols { grid-template-columns: 1fr; }
  .lq-footer__news .lq-wrap { flex-direction: column; align-items: flex-start; }
  .lq-newsletter-form { width: 100%; max-width: none; }
  .lq-footer__bar .lq-wrap { flex-direction: column; align-items: flex-start; }
}

/* focus */
.lq-header a:focus-visible,
.lq-footer a:focus-visible,
.lq-drawer a:focus-visible,
.lq-btn:focus-visible,
[class^="lq-"] button:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 2px;
}

/* ============================================================
   BUTTONS, extra variants
   ============================================================ */

/* Solid white. Readable on any photograph, 19.7:1 against ink text.
   Use as the second button in a pair, never as the only button. */
.lq-btn--solid {
  background: var(--white);
  border-color: var(--white);
  color: var(--ink);
}
.lq-btn--solid:hover { color: var(--ink); }

@media (max-width: 600px) {
  .lq-btn { min-height: 52px; width: 100%; }
}

/* ============================================================
   HERO
   ============================================================ */

.lq-hero {
  position: relative;
  background: var(--ink);
  font-family: var(--font-ui);
  overflow: hidden;
}

/* Slides share one grid cell, so the section is as tall as the tallest
   slide and nothing shifts when the slide changes. */
.lq-hero__track { display: grid; }
.lq-hero__slide {
  grid-area: 1 / 1;
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 560px;
  opacity: 0;
  visibility: hidden;
  z-index: 1;
  /* A real crossfade: the incoming slide sits on top and fades in over the
     outgoing one, so there is never a gap where the hero is empty. The old
     version faded out first and then faded in, which is what made the change
     read as a hard cut. */
  transition: opacity 900ms ease-in-out, visibility 0s linear 900ms;
}
.lq-hero__slide.is-active {
  opacity: 1;
  visibility: visible;
  z-index: 2;
  transition: opacity 900ms ease-in-out, visibility 0s;
}

/* The picture crossfades, but two captions on screen at once would read as
   doubled up text. So the caption clears quickly and the new one arrives
   after the images have mostly swapped. */
.lq-hero__slide .lq-hero__cap {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 260ms ease-out, transform 260ms ease-out;
}
.lq-hero__slide.is-active .lq-hero__cap {
  opacity: 1;
  transform: none;
  transition: opacity 560ms ease-out 300ms, transform 560ms ease-out 300ms;
}

.lq-hero--compact .lq-hero__slide { min-height: 360px; }
.lq-hero--dark .lq-hero__slide { min-height: 320px; }

/* Selector is doubled up on purpose. Elementor ships
   .elementor img { height: auto } at specificity 0,1,1, which outranks a
   single class and makes the image render at its intrinsic ratio instead of
   filling the slide. */
.lq-hero .lq-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* No aspect-ratio here. The image is absolutely positioned and fills the
     slide, so it cannot shift layout, and an aspect-ratio would override
     height:100% and render the image taller than the slide. The slide's
     min-height is what reserves the space. */
}
.lq-hero .lq-hero--dark .lq-hero__img,
.lq-hero--dark .lq-hero__img { display: none; }

.lq-hero__scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}
.lq-hero--dark .lq-hero__scrim { background: none; }

.lq-hero__cap {
  position: relative;
  padding-block: var(--section-pad);
  color: var(--white);
}
.lq-hero--many .lq-hero__cap { padding-bottom: calc(var(--section-pad) + 34px); }
.lq-hero--center .lq-hero__cap { text-align: center; }

.lq-hero__eyebrow {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brass);
}

.lq-hero__title {
  max-width: 16ch;
  margin: 0 0 16px;
  font-family: var(--font-display);
  font-size: var(--h1);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--white);
}
.lq-hero--center .lq-hero__title { max-width: 22ch; margin-inline: auto; }

.lq-hero__sub {
  max-width: 52ch;
  margin: 0 0 28px;
  font-size: var(--body);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.88);
}
.lq-hero--center .lq-hero__sub { margin-inline: auto; }

.lq-hero__btns { display: flex; flex-wrap: wrap; gap: 12px; }
.lq-hero--center .lq-hero__btns { justify-content: center; }

/* ---- hero controls ---- */

.lq-hero__controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding-block: 16px;
}
.lq-hero__controls-in {
  display: flex;
  align-items: center;
  gap: 8px;
}
.lq-hero--center .lq-hero__controls-in { justify-content: center; }

.lq-hero__arrow,
.lq-hero__play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: var(--radius);
  background: rgba(11, 11, 12, 0.65);
  color: var(--white);
  cursor: pointer;
  transition: opacity 180ms ease-out;
}
.lq-hero__arrow:hover,
.lq-hero__play:hover { opacity: 0.8; }

.lq-hero__dots {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-inline: 4px;
}
.lq-hero__dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.lq-hero__dot span {
  display: block;
  width: 28px;
  height: 3px;
  background: rgba(255, 255, 255, 0.45);
  transition: background 180ms ease-out;
}
.lq-hero__dot.is-active span { background: var(--brass); }

.lq-hero__play .lq-hero__icon-play { display: none; }
.lq-hero__play[aria-pressed="true"] .lq-hero__icon-pause { display: none; }
.lq-hero__play[aria-pressed="true"] .lq-hero__icon-play { display: block; }

.lq-hero__arrow:focus-visible,
.lq-hero__play:focus-visible,
.lq-hero__dot:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 2px;
}

@media (max-width: 600px) {
  .lq-hero__slide { min-height: 480px; }
  .lq-hero--compact .lq-hero__slide { min-height: 300px; }
  .lq-hero__title { max-width: none; }
  .lq-hero__btns { flex-direction: column; align-items: stretch; }
  .lq-hero--many .lq-hero__cap { padding-bottom: calc(var(--section-pad) + 40px); }
}

/* ---- hero image zoom ----
   The active slide's photograph starts slightly enlarged and settles back to
   its natural size over the life of the slide. This is a Ken Burns effect and
   it sits outside the motion budget in CLAUDE.md section 6, which allows
   opacity and a 4px translate only. Added on the owner's explicit request.
   It is decorative, it never moves text, and it is switched off entirely for
   anyone who has asked for reduced motion. */

.lq-hero__slide.is-active .lq-hero__img {
  animation: lq-hero-zoom 4200ms ease-out forwards;
  transform-origin: center;
  will-change: transform;
}

@keyframes lq-hero-zoom {
  from { transform: scale(1.1); }
  to   { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .lq-hero__slide { transition: opacity 1ms linear, visibility 0s; }
  .lq-hero__slide .lq-hero__cap { opacity: 1; transform: none; transition: none; }
  .lq-hero__slide.is-active .lq-hero__img { animation: none; transform: none; will-change: auto; }
}

/* ============================================================
   PRODUCT ROW and CARD
   ============================================================ */

.lq-row {
  padding-block: var(--section-pad);
  background: var(--bone);
  font-family: var(--font-ui);
}
.lq-row--dark { background: var(--ink); color: var(--bone); }

.lq-row__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px 24px;
  margin-bottom: 28px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.lq-row--dark .lq-row__head { border-bottom-color: rgba(255, 255, 255, 0.15); }

.lq-row__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--h2);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.lq-row--dark .lq-row__title { color: var(--white); }

.lq-row__links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  flex: 1 1 auto;
}
.lq-row__links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 14px;
  color: var(--slate);
  text-decoration: none;
  transition: color 180ms ease-out, border-color 180ms ease-out;
}
.lq-row__links a:hover { color: var(--ink); border-color: var(--ink); }
.lq-row--dark .lq-row__links a { color: rgba(246, 243, 237, 0.75); border-color: rgba(255, 255, 255, 0.2); }
.lq-row--dark .lq-row__links a:hover { color: var(--white); border-color: var(--white); }

.lq-row__all {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-left: auto;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 2px solid var(--brass);
}
.lq-row--dark .lq-row__all { color: var(--white); }

/* ---- grid ---- */

.lq-grid {
  display: grid;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.lq-grid--2 { grid-template-columns: repeat(2, 1fr); }
.lq-grid--3 { grid-template-columns: repeat(3, 1fr); }
.lq-grid--4 { grid-template-columns: repeat(4, 1fr); }
.lq-grid--5 { grid-template-columns: repeat(5, 1fr); }

@media (max-width: 1023px) {
  .lq-grid--4, .lq-grid--5 { grid-template-columns: repeat(3, 1fr); }
}
/* Two per row on phones, and it stays two all the way down to 320px.
   Shoppers compare bottles side by side, so one per row wastes the screen. */
@media (max-width: 767px) {
  .lq-grid { gap: 12px; }
  .lq-grid--2, .lq-grid--3, .lq-grid--4, .lq-grid--5 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 400px) {
  .lq-grid { gap: 10px; }
  .lq-grid--2, .lq-grid--3, .lq-grid--4, .lq-grid--5 { grid-template-columns: repeat(2, 1fr); }
}

/* ---- card ----
   Colour here is functional, never decorative. Red means act now (a sale, or
   stock running out). Green means reassurance (in stock, ships today). Both
   are the tokens already in the palette, so nothing new was invented.
   Measured against white: red 5.94:1, green 5.29:1, both clear of 4.5:1.
   ---- */

.lq-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color 180ms ease-out;
}
.lq-card:hover { border-color: var(--ink); }
.lq-card:focus-within { border-color: var(--ink); }

.lq-card__media {
  position: relative;
  display: block;
  background: var(--bone);
}
.lq-card .lq-card__media img,
.lq-card .lq-card__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* Badges sit top left, stacked, never overlapping the bottle. */
.lq-card__flags {
  position: absolute;
  top: 8px;
  left: 8px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.lq-card__flag {
  padding: 4px 8px;
  border-radius: var(--radius);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--white);
  background: var(--ink);
}
.lq-card__flag--sale  { background: var(--low-stock); }
.lq-card__flag--new   { background: var(--in-stock); }
.lq-card__flag--rare  { background: var(--brass); color: var(--ink); }

.lq-card__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px;
  flex: 1 1 auto;
}

.lq-card__eyebrow {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--slate);
}

.lq-card__title {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
}
.lq-card__title a { color: var(--ink); text-decoration: none; }
/* The title link stretches over the whole card, so the tap target is the
   card itself rather than one line of 18px text. */
.lq-card__title a::after { content: ""; position: absolute; inset: 0; }
.lq-card__title a:hover { text-decoration: underline; }
.lq-card__title a:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }

/* Brass on white is 3.04:1 and fails, so a plain price stays ink.
   On a reduction the old price is struck through in red and the new price
   is green, so the saving reads at a glance. Red 5.94:1, green 5.29:1,
   both clear of the 4.5:1 floor. Colour is never the only signal: the old
   price also carries a strike, the new one is heavier. */
.lq-card__price {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
}
.lq-card__price del {
  color: var(--low-stock);
  text-decoration: line-through;
  font-weight: 400;
  font-size: 14px;
  margin-right: 6px;
}
.lq-card__price ins {
  text-decoration: none;
  color: var(--in-stock);
  font-weight: 700;
}

.lq-card__stock {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 13px;
  font-weight: 600;
}
.lq-card__stock::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
}
.lq-card__stock.is-in  { color: var(--in-stock); }
.lq-card__stock.is-low { color: var(--low-stock); }
.lq-card__stock.is-out { color: var(--slate); }

/* Always visible, never revealed on hover. Sits above the stretched title
   link so it stays clickable. */
.lq-card__buy { position: relative; z-index: 1; margin-top: auto; padding-top: 8px; }
.lq-card__buy .button,
.lq-card__buy .added_to_cart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  padding: 0 12px;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--white);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background 180ms ease-out, border-color 180ms ease-out;
}
.lq-card__buy .button:hover {
  background: var(--in-stock);
  border-color: var(--in-stock);
  color: var(--white);
}
.lq-card__buy .added_to_cart {
  margin-top: 8px;
  background: var(--white);
  color: var(--in-stock);
  border-color: var(--in-stock);
}
.lq-card__buy .button:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 2px;
}

/* Two cards per row at 320px leaves about 140px each, so everything
   tightens up rather than wrapping or overflowing. */
@media (max-width: 767px) {
  .lq-card__body { padding: 10px; gap: 4px; }
  .lq-card__title { font-size: 14px; }
  .lq-card__price { font-size: 15px; }
  .lq-card__price del { font-size: 13px; }
  .lq-card__stock { font-size: 12px; }
  .lq-card__buy .button,
  .lq-card__buy .added_to_cart { min-height: 48px; font-size: 12px; letter-spacing: 0.04em; }
  .lq-card__flag { font-size: 10px; padding: 3px 6px; }
  .lq-row__all { margin-left: 0; }
}

/* ============================================================
   ELEMENTOR CONTAINER RESET

   Every lq_ section carries its own --section-pad and its own full bleed
   background. The Elementor container that wraps one must therefore add no
   padding, gap or margin of its own, or a white band appears between the
   header and the first section.

   Scoped with :has() so it only touches containers holding an lq_ section.
   Containers the owner builds for anything else keep their own spacing.
   ============================================================ */

.e-con:has(.elementor-shortcode > [class^="lq-"]),
.e-con-inner:has(.elementor-shortcode > [class^="lq-"]) {
  padding: 0;
  gap: 0;
  margin: 0;
}

.elementor-widget-shortcode:has(> .elementor-shortcode > [class^="lq-"]),
.elementor-widget-shortcode:has(> .elementor-widget-container > .elementor-shortcode > [class^="lq-"]) {
  margin: 0;
  padding: 0;
}

.elementor-shortcode:has(> [class^="lq-"]) {
  margin: 0;
  padding: 0;
}

/* Sections are full bleed, so the widget wrapper must never clip them. */
.elementor-shortcode > [class^="lq-"] { width: 100%; }

/* Belt and braces. Blocksy wraps the content area in its own containers and
   some layouts add vertical spacing above the first block. A page whose first
   section is one of ours must start flush against the header, because the
   section paints its own full bleed background. */
body:has([class^="lq-"]) .site-main,
body:has([class^="lq-"]) #main,
body:has([class^="lq-"]) .ct-container-full,
body:has([class^="lq-"]) .elementor {
  margin-top: 0;
  padding-top: 0;
}

body:has([class^="lq-"]) .elementor > .e-con:first-child,
body:has([class^="lq-"]) .elementor > .elementor-section:first-child {
  margin-top: 0;
}

/* ============================================================
   SHARED SECTION SURFACES

   Every section paints its own background and vertical padding, which is why
   the Elementor container above must add none. Alternating bone and white
   down a page is what gives the homepage its rhythm without adding colour
   that carries no meaning.
   ============================================================ */

.lq-heading,
.lq-trust,
.lq-editorial,
.lq-split,
.lq-steps,
.lq-spec,
.lq-faq,
.lq-tiles,
.lq-bands,
.lq-contact,
.lq-creds,
.lq-lead,
.lq-news,
.lq-band,
.lq-sec {
  padding-block: var(--section-pad);
  font-family: var(--font-ui);
  font-size: var(--body);
  color: var(--ink);
}

.lq-editorial--bone, .lq-steps--bone, .lq-spec--bone, .lq-faq--bone,
.lq-tiles--bone, .lq-bands--bone, .lq-contact--bone, .lq-creds--bone,
.lq-lead--bone, .lq-split--bone, .lq-sec--bone { background: var(--bone); }

.lq-editorial--white, .lq-steps--white, .lq-spec--white, .lq-faq--white,
.lq-tiles--white, .lq-bands--white, .lq-contact--white, .lq-lead--white,
.lq-split--white, .lq-sec--white { background: var(--white); }

.lq-editorial--dark, .lq-steps--dark, .lq-tiles--dark, .lq-bands--dark,
.lq-contact--dark, .lq-lead--dark, .lq-split--dark, .lq-sec--dark {
  background: var(--ink);
  color: var(--bone);
}
.lq-editorial--dark h2, .lq-steps--dark h2, .lq-tiles--dark h2,
.lq-bands--dark h2, .lq-contact--dark h2, .lq-lead--dark h2,
.lq-split--dark h2, .lq-sec--dark h2 { color: var(--white); }

.lq-sec--pad-none  { padding-block: 0; }
.lq-sec--pad-tight { padding-block: calc(var(--section-pad) * 0.5); }
.lq-sec--pad-loose { padding-block: calc(var(--section-pad) * 1.4); }
.lq-sec--center    { text-align: center; }

/* One shared heading treatment, so every section reads as the same family. */
.lq-heading__title,
.lq-trust__heading,
.lq-editorial__heading,
.lq-split__heading,
.lq-steps__heading,
.lq-spec__heading,
.lq-faq__heading,
.lq-tiles__heading,
.lq-bands__heading,
.lq-contact__heading,
.lq-creds__heading,
.lq-lead__heading,
.lq-news__heading,
.lq-band__heading {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-size: var(--h2);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.01em;
}

.lq-heading__sub,
.lq-editorial__sub,
.lq-steps__sub,
.lq-spec__sub,
.lq-tiles__sub,
.lq-bands__sub {
  max-width: none;
  margin: 0 0 24px;
  color: var(--slate);
  line-height: 1.6;
}

/* ---- lq_heading ---- */

.lq-heading__in {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px 24px;
}
.lq-heading--center .lq-heading__in { justify-content: center; text-align: center; }
.lq-heading__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 2px solid var(--brass);
}

/* ---- lq_trust_strip ---- */

.lq-trust--light { background: var(--bone); }
.lq-trust--dark  { background: var(--ink); color: var(--bone); }
.lq-trust--dark .lq-trust__title { color: var(--white); }
.lq-trust--dark .lq-trust__text  { color: rgba(246,243,237,0.75); }
.lq-trust--dark .lq-trust__icon  { color: var(--brass); }

.lq-trust__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.lq-trust__item { display: flex; gap: 12px; align-items: flex-start; }
.lq-trust__icon { flex: 0 0 auto; color: var(--in-stock); }
.lq-trust__title { margin: 0 0 4px; font-size: 15px; font-weight: 600; line-height: 1.3; }
.lq-trust__text  { margin: 0; font-size: 14px; line-height: 1.55; color: var(--slate); }

@media (max-width: 900px) { .lq-trust__list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .lq-trust__list { grid-template-columns: 1fr; gap: 18px; } }

/* ---- lq_editorial ---- */

/* One column. Heading on top, copy underneath, everything sharing the same
   left edge and running the full width of the shell. An earlier version put
   the heading in a left column and the prose in a right one, which indented
   the copy and broke that shared alignment. */
.lq-editorial__body { max-width: none; line-height: 1.7; }
.lq-editorial__body p { margin: 0 0 16px; }
.lq-editorial__body p:last-child { margin-bottom: 0; }
.lq-editorial__body a { color: var(--ink); text-underline-offset: 3px; }
.lq-editorial--dark .lq-editorial__body a { color: var(--brass); }

.lq-editorial__body.is-collapsed {
  max-height: 10.5em;
  overflow: hidden;
}
.lq-editorial__more {
  margin-top: 16px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  background: transparent;
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}
.lq-editorial--dark .lq-editorial__more { border-color: var(--bone); color: var(--bone); }

/* ---- lq_split ---- */

.lq-split__in {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(24px, 3vw, 44px);
}
/* Stacked, so the row gap would sit on top of the heading's own margin and
   double the space between a heading and its first line. */
.lq-split--noimage .lq-split__in { gap: 0; }
.lq-split--reverse .lq-split__media { order: 2; }
.lq-split--noimage .lq-split__in { grid-template-columns: 1fr; }
.lq-split--noimage .lq-split__copy { max-width: none; }
.lq-split__media { border-radius: var(--radius); overflow: hidden; background: var(--bone); }
.lq-split .lq-split__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.lq-split--noimage .lq-split__head .lq-split__heading { margin: 0 0 12px; }

.lq-split__eyebrow {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate);
}
.lq-split__copy p { margin: 0 0 16px; line-height: 1.7; }
.lq-split__cta { margin-top: 4px; }

@media (max-width: 860px) {
  .lq-split__in { grid-template-columns: 1fr; }
  .lq-split--reverse .lq-split__media { order: 0; }
}

/* ---- lq_steps ---- */

.lq-steps__list {
  display: grid;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}
.lq-steps__list--2 { grid-template-columns: repeat(2, 1fr); }
.lq-steps__list--3 { grid-template-columns: repeat(3, 1fr); }
.lq-steps__list--4 { grid-template-columns: repeat(4, 1fr); }

.lq-steps__item { padding-top: 4px; }
.lq-steps__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-bottom: 12px;
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--white);
  font-size: 14px;
  font-weight: 700;
}
.lq-steps--dark .lq-steps__num { background: var(--brass); color: var(--ink); }
.lq-steps__title { margin: 0 0 6px; font-size: 16px; font-weight: 600; line-height: 1.3; }
.lq-steps__text  { margin: 0; font-size: 14px; line-height: 1.6; color: var(--slate); }
.lq-steps--dark .lq-steps__text { color: rgba(246,243,237,0.75); }

@media (max-width: 900px) {
  .lq-steps__list--3, .lq-steps__list--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .lq-steps__list { grid-template-columns: 1fr; gap: 20px; }
}

/* ---- lq_spec_table ---- */

.lq-spec__table {
  width: 100%;
  border-collapse: collapse;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.lq-spec__table th,
.lq-spec__table td {
  padding: 14px 16px;
  text-align: left;
  vertical-align: top;
  font-size: 15px;
  line-height: 1.5;
  border-bottom: 1px solid var(--line);
}
.lq-spec__table thead th {
  background: var(--ink);
  color: var(--white);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.lq-spec__table tbody th { font-weight: 600; color: var(--ink); }
.lq-spec__table tbody td { color: var(--slate); }
.lq-spec__table tbody tr:last-child th,
.lq-spec__table tbody tr:last-child td { border-bottom: 0; }
.lq-spec__note { margin: 16px 0 0; font-size: 14px; color: var(--slate); max-width: none; }

/* Stacks to label above value. Never scrolls sideways. */
@media (max-width: 760px) {
  .lq-spec__table, .lq-spec__table tbody, .lq-spec__table tr,
  .lq-spec__table th, .lq-spec__table td { display: block; width: 100%; }
  .lq-spec__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); }
  .lq-spec__table tr {
    border-bottom: 1px solid var(--line);
    padding: 12px 0;
  }
  .lq-spec__table tr:last-child { border-bottom: 0; }
  .lq-spec__table th, .lq-spec__table td { border: 0; padding: 6px 16px; }
  .lq-spec__table td::before,
  .lq-spec__table tbody th::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--slate);
  }
  .lq-spec__table tbody th { font-size: 16px; }
}

/* ---- lq_faq ---- */

.lq-faq__search { max-width: 520px; margin: 0 0 24px; }
.lq-faq__search label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
}
.lq-faq__search input {
  width: 100%;
  height: 48px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  font-family: var(--font-ui);
  font-size: 16px;
  color: var(--ink);
}
.lq-faq__search input:focus { outline: 2px solid var(--ink); outline-offset: 1px; }
.lq-faq__count { margin: 8px 0 0; font-size: 13px; color: var(--slate); }

.lq-faq__group + .lq-faq__group { margin-top: 32px; }
.lq-faq__group-title {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--slate);
}
.lq-faq__list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.lq-faq__item { border-bottom: 1px solid var(--line); }
.lq-faq__q { margin: 0; font-size: inherit; font-weight: inherit; }
.lq-faq__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  min-height: 56px;
  padding: 14px 0;
  border: 0;
  background: none;
  text-align: left;
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
  cursor: pointer;
}
.lq-faq__chev { flex: 0 0 auto; color: var(--slate); transition: transform 180ms ease-out; }
.lq-faq__btn[aria-expanded="true"] .lq-faq__chev { transform: rotate(180deg); }
.lq-faq__a { padding: 0 0 18px; max-width: none; }
.lq-faq__a p { margin: 0; line-height: 1.7; color: var(--slate); }
.lq-faq__a a { color: var(--ink); text-underline-offset: 3px; }
.lq-faq__empty { margin-top: 24px; color: var(--slate); }

/* ---- lq_tile_grid ---- */

.lq-tiles__list {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.lq-tiles__list--2 { grid-template-columns: repeat(2, 1fr); }
.lq-tiles__list--3 { grid-template-columns: repeat(3, 1fr); }
.lq-tiles__list--4 { grid-template-columns: repeat(4, 1fr); }
.lq-tiles__list--5 { grid-template-columns: repeat(5, 1fr); }
.lq-tiles__list--6 { grid-template-columns: repeat(6, 1fr); }

.lq-tile__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  text-decoration: none;
  overflow: hidden;
  transition: border-color 180ms ease-out, transform 180ms ease-out;
}
.lq-tile__link:hover { border-color: var(--ink); transform: translateY(-4px); }
.lq-tile__link:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
.lq-tile__media { display: block; background: var(--bone); }
.lq-tile .lq-tile__img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.lq-tile__body { display: flex; flex-direction: column; gap: 4px; padding: 16px; flex: 1 1 auto; }
.lq-tile__label { font-size: 15px; font-weight: 600; line-height: 1.3; }
.lq-tile__note  { font-size: 13px; color: var(--slate); line-height: 1.45; }
.lq-tile__count {
  margin-top: auto;
  padding-top: 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--in-stock);
}

@media (max-width: 1023px) { .lq-tiles__list--5, .lq-tiles__list--6 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767px) {
  .lq-tiles__list { gap: 12px; }
  .lq-tiles__list--3, .lq-tiles__list--4,
  .lq-tiles__list--5, .lq-tiles__list--6 { grid-template-columns: repeat(2, 1fr); }
  .lq-tile__body { padding: 12px; }
}

/* ---- lq_price_bands ---- */

.lq-bands__list {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.lq-bands__list--2 { grid-template-columns: repeat(2, 1fr); }
.lq-bands__list--3 { grid-template-columns: repeat(3, 1fr); }
.lq-bands__list--4 { grid-template-columns: repeat(4, 1fr); }

.lq-band-tile a {
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 100%;
  padding: 20px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  text-decoration: none;
  transition: border-color 180ms ease-out, background 180ms ease-out;
}
.lq-band-tile a:hover { border-color: var(--ink); background: var(--bone); }
.lq-band-tile a:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
.lq-band-tile__label { font-family: var(--font-display); font-size: var(--h3); font-weight: 700; line-height: 1.1; }
.lq-band-tile__note  { font-size: 14px; color: var(--slate); line-height: 1.5; }
.lq-band-tile__go    { margin-top: auto; padding-top: 12px; color: var(--in-stock); }
.lq-bands__note { margin: 20px 0 0; font-size: 14px; color: var(--slate); }

@media (max-width: 900px) { .lq-bands__list--3, .lq-bands__list--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .lq-bands__list { grid-template-columns: 1fr; } }

/* ---- lq_id_notice ---- */

.lq-idnotice {
  padding-block: calc(var(--section-pad) * 0.5);
  background: var(--bone);
  font-family: var(--font-ui);
}
/* Icon above rather than beside, so the heading keeps the same left edge as
   every other heading on the page. */
.lq-idnotice__in { display: block; }
.lq-idnotice__icon { display: block; margin-bottom: 10px; }
.lq-idnotice__icon { flex: 0 0 auto; color: var(--low-stock); }
.lq-idnotice__title { margin: 0 0 6px; font-size: 17px; font-weight: 700; }
.lq-idnotice__text { margin: 0 0 8px; max-width: none; font-size: 15px; line-height: 1.6; color: var(--slate); }
.lq-idnotice__text:last-child { margin-bottom: 0; }
.lq-idnotice__text a { color: var(--ink); }
.lq-idnotice--compact { padding-block: 20px; }
.lq-idnotice--compact .lq-idnotice__title { font-size: 15px; }

/* ---- lq_contact_methods ---- */

.lq-contact__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.lq-contact__item {
  display: flex;
  gap: 12px;
  padding: 18px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.lq-contact--dark .lq-contact__item { background: transparent; border-color: rgba(255,255,255,0.2); }
.lq-contact__icon { flex: 0 0 auto; color: var(--in-stock); }
.lq-contact__title { margin: 0 0 2px; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate); }
.lq-contact__value { margin: 0 0 2px; font-size: 16px; font-weight: 600; }
.lq-contact__value a { color: var(--ink); text-decoration: none; }
.lq-contact__value a:hover { text-decoration: underline; }
.lq-contact--dark .lq-contact__value a { color: var(--white); }
.lq-contact__note { margin: 0; font-size: 13px; color: var(--slate); line-height: 1.45; }
.lq-contact--compact { padding-block: calc(var(--section-pad) * 0.6); }

@media (max-width: 1023px) { .lq-contact__list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px)  { .lq-contact__list { grid-template-columns: 1fr; } }

/* ---- lq_credentials ---- */

.lq-creds__intro { max-width: none; margin: 0 0 24px; line-height: 1.7; color: var(--slate); }
.lq-creds__intro a { color: var(--ink); }
.lq-creds__list { margin: 0; max-width: 620px; border-top: 1px solid var(--line); }
.lq-creds__row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 24px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.lq-creds__row dt { flex: 0 0 190px; font-size: 14px; font-weight: 600; color: var(--slate); margin: 0; }
.lq-creds__row dd { margin: 0; font-size: 15px; font-weight: 600; }
@media (max-width: 520px) { .lq-creds__row dt { flex: 1 1 100%; } }

/* ---- lq_lead_form ---- */

.lq-lead__in { display: grid; grid-template-columns: minmax(240px, 1fr) minmax(0, 2fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.lq-lead__text { max-width: 46ch; line-height: 1.7; color: var(--slate); }
.lq-lead--dark .lq-lead__text { color: rgba(246,243,237,0.8); }
.lq-lead__form {
  padding: clamp(20px, 3vw, 32px);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
@media (max-width: 860px) { .lq-lead__in { grid-template-columns: 1fr; } }

/* ---- lq_newsletter ---- */

.lq-news--dark  { background: var(--ink); color: var(--bone); }
.lq-news--light { background: var(--bone); }
.lq-news--dark .lq-news__heading { color: var(--white); }
.lq-news__in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px 40px;
}
.lq-news__copy { flex: 1 1 320px; }
.lq-news__offer { margin: 0; max-width: 52ch; line-height: 1.6; color: var(--slate); }
.lq-news--dark .lq-news__offer { color: rgba(246,243,237,0.75); }
.lq-news__form { flex: 1 1 380px; max-width: 480px; }
.lq-news--light .lq-newsletter-form input[type="email"] { border-color: var(--line); background: var(--white); color: var(--ink); }
@media (max-width: 600px) { .lq-news__form, .lq-news__copy { flex: 1 1 100%; } }

/* ---- lq_cta_band ---- */

.lq-band--dark   { background: var(--ink); color: var(--bone); }
.lq-band--light  { background: var(--bone); }
.lq-band--accent { background: var(--in-stock); color: var(--white); }
.lq-band--dark .lq-band__heading   { color: var(--white); }
.lq-band--accent .lq-band__heading { color: var(--white); }
.lq-band--accent .lq-band__text    { color: rgba(255,255,255,0.9); }
.lq-band--accent .lq-btn--solid    { background: var(--white); border-color: var(--white); color: var(--ink); }

.lq-band__in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 40px;
}
.lq-band--center .lq-band__in { flex-direction: column; text-align: center; }
.lq-band__copy { flex: 1 1 420px; }
.lq-band__text { margin: 0; max-width: none; line-height: 1.65; color: var(--slate); }
.lq-band--dark .lq-band__text { color: rgba(246,243,237,0.8); }
.lq-band__btns { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 600px) { .lq-band__btns { width: 100%; flex-direction: column; } }

/* ---- lq_legal ---- */

.lq-legal { padding-block: var(--section-pad); background: var(--white); font-family: var(--font-ui); }
.lq-legal__head { padding-bottom: 20px; margin-bottom: 32px; border-bottom: 1px solid var(--line); }
.lq-legal__title {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: var(--h1);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.lq-legal__updated { margin: 0; font-size: 14px; color: var(--slate); }
.lq-legal__review {
  padding: 0 0 20px;
  margin: 0 0 28px;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
  line-height: 1.6;
  color: var(--low-stock);
}
/* One column. The contents list used to sit in a sticky 240px sidebar, which
   pushed every clause heading 300px in from the left and broke the alignment
   the rest of the site keeps. It now sits above the text, and everything
   starts at the same edge as the logo. */
.lq-legal__grid { display: grid; grid-template-columns: 1fr; gap: 0; }

/* No tinted box. A padded panel inset its own text by the padding amount,
   which is exactly the misalignment we are trying to remove. Hairlines above
   and below do the same separating job without moving anything sideways. */
.lq-legal__toc {
  margin-bottom: 32px;
  padding: 20px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
@media (min-width: 900px) {
  .lq-legal__toc ol {
    column-count: 2;
    column-gap: 40px;
  }
  .lq-legal__toc li { break-inside: avoid; }
}
.lq-legal__toc-title { margin: 0 0 10px; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate); }
.lq-legal__toc ol { margin: 0; padding-left: 18px; }
.lq-legal__toc li { margin-bottom: 8px; }
.lq-legal__toc a { font-size: 14px; color: var(--slate); text-decoration: none; line-height: 1.4; }
.lq-legal__toc a:hover { color: var(--ink); text-decoration: underline; }

.lq-legal__summary {
  padding: 0 0 24px;
  margin-bottom: 32px;
  border-bottom: 1px solid var(--line);
}
.lq-legal__summary h2 { margin: 0 0 8px; font-family: var(--font-ui); font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate); }
.lq-legal__summary p { margin: 0 0 8px; line-height: 1.65; }
.lq-legal__summary-note { font-size: 13px; color: var(--slate); }

.lq-legal__body { max-width: none; }
.lq-legal__body h2 {
  margin: 36px 0 12px;
  font-family: var(--font-display);
  font-size: var(--h3);
  font-weight: 700;
  line-height: 1.2;
  scroll-margin-top: 100px;
}
.lq-legal__body h3 { margin: 24px 0 8px; font-size: 16px; font-weight: 600; }
.lq-legal__body p, .lq-legal__body li { line-height: 1.75; }
.lq-legal__body p { margin: 0 0 14px; }
.lq-legal__body ul, .lq-legal__body ol { margin: 0 0 16px; padding-left: 20px; }
.lq-legal__body li { margin-bottom: 6px; }
.lq-legal__body a { color: var(--ink); text-underline-offset: 3px; }

@media (max-width: 900px) {
  .lq-legal__toc { padding: 16px 0; }
}

/* Editor only notices. Visitors never see these. */
.lq-lead__todo, .lq-news__todo, .lq-creds__todo {
  margin: 16px 0 0;
  padding: 12px 14px;
  background: var(--bone);
  border-radius: var(--radius);
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink);
}

/* ============================================================
   WOOCOMMERCE LOOP CARDS

   Category archives, shop and search render WooCommerce's own loop, not
   lq_product_row. Section 5 says restyle those with CSS rather than rebuild
   them, so this maps the default markup onto the same card language as the
   homepage: white surface, 1px rule, 2px radius, red for a reduction, green
   for reassurance, and Add to Cart visible at all times.
   ============================================================ */

.woocommerce ul.products,
ul.products {
  display: grid;
  gap: 24px;
  margin: 0 0 32px;
  padding: 0;
  list-style: none;
}
.woocommerce ul.products.columns-2, ul.products.columns-2 { grid-template-columns: repeat(2, 1fr); }
.woocommerce ul.products.columns-3, ul.products.columns-3 { grid-template-columns: repeat(3, 1fr); }
.woocommerce ul.products.columns-4, ul.products.columns-4 { grid-template-columns: repeat(4, 1fr); }
.woocommerce ul.products.columns-5, ul.products.columns-5 { grid-template-columns: repeat(5, 1fr); }

.woocommerce ul.products li.product,
ul.products li.product {
  position: relative;
  display: flex;
  flex-direction: column;
  width: auto;
  margin: 0;
  padding: 0 0 14px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  text-align: left;
  transition: border-color 180ms ease-out;
}
.woocommerce ul.products li.product:hover,
ul.products li.product:hover { border-color: var(--ink); }

.woocommerce ul.products li.product img,
ul.products li.product img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 0 12px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: var(--bone);
  border-radius: 0;
}

/* Sale flag, red, same as the homepage card. */
.woocommerce ul.products li.product .onsale,
ul.products li.product .onsale {
  position: absolute;
  top: 8px;
  left: 8px;
  right: auto;
  min-height: 0;
  min-width: 0;
  margin: 0;
  padding: 4px 8px;
  border-radius: var(--radius);
  background: var(--low-stock);
  color: var(--white);
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.2;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title,
ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2,
ul.products li.product h2 {
  margin: 0;
  padding: 0 14px 6px;
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
}

.woocommerce ul.products li.product .price,
ul.products li.product .price {
  display: block;
  margin: 0;
  padding: 0 14px 10px;
  font-family: var(--font-ui);
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
}
/* Old price struck through in red, new price green. */
.woocommerce ul.products li.product .price del,
ul.products li.product .price del {
  color: var(--low-stock);
  text-decoration: line-through;
  font-weight: 400;
  font-size: 14px;
  margin-right: 6px;
  opacity: 1;
}
.woocommerce ul.products li.product .price ins,
ul.products li.product .price ins {
  text-decoration: none;
  color: var(--in-stock);
  font-weight: 700;
  background: none;
}

/* Always on, never a hover reveal. */
.woocommerce ul.products li.product .button,
ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart,
ul.products li.product .added_to_cart {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: auto;
  min-height: 48px;
  margin: auto 14px 0;
  align-self: stretch;
  padding: 0 12px;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--white);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  transition: background 180ms ease-out, border-color 180ms ease-out;
}
.woocommerce ul.products li.product .button:hover,
ul.products li.product .button:hover {
  background: var(--in-stock);
  border-color: var(--in-stock);
  color: var(--white);
}
.woocommerce ul.products li.product .added_to_cart,
ul.products li.product .added_to_cart {
  margin-top: 8px;
  background: var(--white);
  color: var(--in-stock);
  border-color: var(--in-stock);
}

/* Stock wording from WooCommerce, coloured the same way as our own cards. */
.woocommerce ul.products li.product .stock.in-stock,
ul.products li.product .stock.in-stock { color: var(--in-stock); font-weight: 600; padding: 0 14px 8px; }
.woocommerce ul.products li.product .stock.out-of-stock,
ul.products li.product .stock.out-of-stock { color: var(--slate); font-weight: 600; padding: 0 14px 8px; }

@media (max-width: 1023px) {
  .woocommerce ul.products.columns-4, ul.products.columns-4,
  .woocommerce ul.products.columns-5, ul.products.columns-5 { grid-template-columns: repeat(3, 1fr); }
}
/* Two per row on phones, matching the homepage. */
@media (max-width: 767px) {
  .woocommerce ul.products, ul.products { gap: 12px; }
  .woocommerce ul.products.columns-2, ul.products.columns-2,
  .woocommerce ul.products.columns-3, ul.products.columns-3,
  .woocommerce ul.products.columns-4, ul.products.columns-4,
  .woocommerce ul.products.columns-5, ul.products.columns-5 { grid-template-columns: repeat(2, 1fr); }

  .woocommerce ul.products li.product .woocommerce-loop-product__title,
  ul.products li.product .woocommerce-loop-product__title,
  .woocommerce ul.products li.product h2, ul.products li.product h2 { padding: 0 10px 4px; font-size: 14px; }
  .woocommerce ul.products li.product .price, ul.products li.product .price { padding: 0 10px 8px; font-size: 15px; }
  .woocommerce ul.products li.product .button, ul.products li.product .button,
  .woocommerce ul.products li.product .added_to_cart, ul.products li.product .added_to_cart {
    margin-inline: 10px;
    font-size: 12px;
    letter-spacing: 0.04em;
  }
  .woocommerce ul.products li.product .onsale, ul.products li.product .onsale { font-size: 10px; padding: 3px 6px; }
}

/* ---- category archive banner ----
   Blocksy renders the category image as a <figure> inside the hero, then puts
   the title and breadcrumb after it, so the text sits on whatever colour the
   theme picked and the breadcrumb becomes unreadable. Stacking all three in
   one grid cell puts the image behind, a flat 50% scrim over it, and the text
   on top. Same scrim as the homepage hero, which is the one gradient-free
   overlay CLAUDE.md section 6 allows. */

body.tax-product_cat .hero-section,
body.post-type-archive-product .hero-section {
  position: relative;
  display: grid;
  min-height: 220px;
  background-color: var(--ink);
  overflow: hidden;
}

body.tax-product_cat .hero-section > figure,
body.post-type-archive-product .hero-section > figure {
  grid-area: 1 / 1;
  margin: 0;
  width: 100%;
  height: 100%;
}
body.tax-product_cat .hero-section > figure img,
body.post-type-archive-product .hero-section > figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Blocksy already puts an overlay layer over the image, at
   .ct-media-container::after, and the Customizer had it set to an opaque
   red, which hid the photograph completely and left the breadcrumb
   unreadable. Recolour that same layer to the flat 50% black scrim rather
   than adding a second one. !important is deliberate: Blocksy's selector
   carries identical specificity, so source order alone would decide it. */
body.tax-product_cat .hero-section .ct-media-container::after,
body.post-type-archive-product .hero-section .ct-media-container::after {
  background: rgba(0, 0, 0, 0.62) !important;
}

/* The banner image comes from archive-hero.php as --lq-archive-image, because
   the category image is a bottle cutout on white and a scrim over white just
   gives flat grey. Blocksy's own figure is hidden rather than removed, so the
   markup is untouched and turning this off is a one line change. */
body.tax-product_cat .hero-section > figure,
body.post-type-archive-product .hero-section > figure { display: none; }

body.tax-product_cat .hero-section::before,
body.post-type-archive-product .hero-section::before {
  content: "";
  grid-area: 1 / 1;
  background-image: var(--lq-archive-image, none);
  background-size: cover;
  background-position: center;
}

body.tax-product_cat .hero-section::after,
body.post-type-archive-product .hero-section::after {
  content: "";
  grid-area: 1 / 1;
  /* Deliberately darker than the 0.5 in CLAUDE.md section 6. The breadcrumb is
     13px text sitting over an unpredictable photograph, and 0.5 did not carry
     it. Still a flat fill, still no gradient. */
  background: rgba(0, 0, 0, 0.62);
  z-index: 1;
}

body.tax-product_cat .hero-section > .entry-header,
body.post-type-archive-product .hero-section > .entry-header {
  grid-area: 1 / 1;
  position: relative;
  z-index: 2;
  align-self: center;
  padding-block: clamp(28px, 5vw, 56px);
}

/* White on a 50% scrim reads on any photograph. The breadcrumb keeps brass
   for the current page only, which is 6.48:1 against the ink underneath. */
body.tax-product_cat .hero-section .entry-title,
body.tax-product_cat .hero-section h1,
body.post-type-archive-product .hero-section h1 { color: var(--white); }

body.tax-product_cat .hero-section .ct-breadcrumbs,
body.tax-product_cat .hero-section .ct-breadcrumbs a,
body.post-type-archive-product .hero-section .ct-breadcrumbs,
body.post-type-archive-product .hero-section .ct-breadcrumbs a {
  color: var(--white);
}
body.tax-product_cat .hero-section .ct-breadcrumbs a:hover { color: var(--brass); }
body.tax-product_cat .hero-section .ct-breadcrumbs [aria-current],
body.tax-product_cat .hero-section .ct-breadcrumbs .ct-active { color: var(--brass); }

/* Blocksy wraps loop images in .ct-media-container and forces 4/3, which
   slices the top off a tall bottle. Product shots are square, so a 1/1 box
   shows the whole bottle and crops nothing. Specificity has to beat
   Blocksy's own container rule. */
.woocommerce ul.products li.product .ct-media-container,
ul.products li.product .ct-media-container {
  aspect-ratio: 1 / 1;
  background: var(--white);
}
.woocommerce ul.products li.product .ct-media-container img,
ul.products li.product .ct-media-container img {
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: var(--white);
  /* Supplier bottle shots carry a lot of empty white margin, so at 1:1 the
     bottle ends up tiny in the frame. A modest zoom eats the margin instead
     of the bottle. The container clips, so nothing spills. */
  transform: scale(1.32);
  transform-origin: center;
}
.woocommerce ul.products li.product .ct-media-container,
ul.products li.product .ct-media-container { overflow: hidden; }

/* ============================================================
   REVEAL ON SCROLL

   Sections fade up as they come into view. Kept inside the motion budget in
   CLAUDE.md section 6: opacity and a 4px translate, 200ms, ease-out. No
   parallax, no scaling, no movement tied to scroll position.

   The starting state is only applied once JS has confirmed it can run and the
   visitor has not asked for reduced motion, so nothing is ever stuck invisible
   if a script fails.
   ============================================================ */

/* 4px and 200ms, the section 6 budget, was too subtle to read as motion at
   all. Raised on the owner's request after two rounds of "there are no
   animations". Still opacity and a vertical translate only, still switched
   off entirely for reduced motion. */
.lq-anim [data-lq-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 420ms ease-out, transform 420ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.lq-anim [data-lq-reveal].is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .lq-anim [data-lq-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   BUILT IN FORM

   Used by lq_lead_form when no forms plugin id is set. Single column, labels
   above fields, 16px inputs so iOS does not zoom on focus.
   ============================================================ */

.lq-form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; }
.lq-form__row { display: grid; gap: 6px; align-content: start; grid-column: 1 / -1; }
.lq-form__row--half { grid-column: span 1; }
@media (max-width: 700px) {
  .lq-form { grid-template-columns: 1fr; }
  .lq-form__row--half { grid-column: 1 / -1; }
}
.lq-form label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
  text-align: left;
}
.lq-form__hint {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 400;
  color: var(--slate);
}
.lq-form input[type="text"],
.lq-form input[type="email"],
.lq-form input[type="tel"],
.lq-form textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
}
.lq-form textarea { min-height: 140px; resize: vertical; }
.lq-form input:focus,
.lq-form textarea:focus { outline: 2px solid var(--ink); outline-offset: 1px; }
.lq-form input:invalid:not(:placeholder-shown),
.lq-form textarea:invalid:not(:placeholder-shown) { border-color: var(--low-stock); }

.lq-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.lq-form__submit { grid-column: 1 / -1; justify-self: start; }
.lq-form__note { grid-column: 1 / -1; }
.lq-form__msg  { grid-column: 1 / -1; }
@media (max-width: 600px) { .lq-form__submit { justify-self: stretch; } }

.lq-form__note { margin: 0; font-size: 13px; color: var(--slate); line-height: 1.55; }
.lq-form__note a { color: var(--ink); }

.lq-form__msg {
  margin: 0 0 16px;
  padding: 14px 16px;
  border-radius: var(--radius);
  font-size: 15px;
  line-height: 1.6;
}
.lq-form__msg--ok   { background: var(--bone); color: var(--in-stock); font-weight: 600; }
.lq-form__msg--fail { background: var(--bone); color: var(--low-stock); font-weight: 600; }

/* ============================================================
   WOOCOMMERCE FORMS AND BUTTONS

   Order tracking, coupon fields, address forms and anything else Woo prints
   outside our own sections. Same field shape as lq_lead_form, 16px so iOS
   does not zoom, and buttons that meet contrast: white on brass is only
   3.04:1, so brass buttons carry ink text instead.
   ============================================================ */

.woocommerce form .form-row,
.woocommerce-page form .form-row { display: grid; gap: 6px; margin: 0 0 16px; padding: 0; }

.woocommerce form .form-row label,
.woocommerce-page form .form-row label {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.4;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce-page form .form-row input.input-text,
.woocommerce-page form .form-row textarea,
.woocommerce input.input-text,
.woocommerce textarea,
.woocommerce select {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  box-shadow: none;
}
.woocommerce input.input-text:focus,
.woocommerce textarea:focus,
.woocommerce select:focus { outline: 2px solid var(--ink); outline-offset: 1px; }

/* Order tracking. The form holds an intro paragraph, two fields and a button,
   and Woo floats the fields. Grid replaces the floats, but the paragraph and
   the button have to be told to span, or the paragraph takes the first column
   and the fields shunt sideways. */
.woocommerce form.track_order,
.woocommerce form.woocommerce-form-track-order { display: grid; gap: 0 20px; }

.woocommerce form.track_order .form-row-first,
.woocommerce form.track_order .form-row-last,
.woocommerce form.woocommerce-form-track-order .form-row-first,
.woocommerce form.woocommerce-form-track-order .form-row-last { width: 100%; float: none; }

.woocommerce form.track_order .clear,
.woocommerce form.woocommerce-form-track-order .clear { display: none; }

.woocommerce form.track_order button.button,
.woocommerce form.woocommerce-form-track-order button.button { justify-self: start; }

@media (min-width: 700px) {
  .woocommerce form.track_order,
  .woocommerce form.woocommerce-form-track-order { grid-template-columns: 1fr 1fr; }

  .woocommerce form.track_order > p:not(.form-row),
  .woocommerce form.woocommerce-form-track-order > p:not(.form-row) { grid-column: 1 / -1; }

  .woocommerce form.track_order > .form-row-first,
  .woocommerce form.woocommerce-form-track-order > .form-row-first { grid-column: 1; }

  .woocommerce form.track_order > .form-row-last,
  .woocommerce form.woocommerce-form-track-order > .form-row-last { grid-column: 2; }

  .woocommerce form.track_order > p.form-row:last-child,
  .woocommerce form.woocommerce-form-track-order > p.form-row:last-child { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .woocommerce form.track_order button.button,
  .woocommerce form.woocommerce-form-track-order button.button { justify-self: stretch; }
}

/* Buttons. Ink on brass is 6.48:1. White on brass is 3.04:1 and fails. */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce-page a.button,
.woocommerce-page button.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 24px;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--white);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 180ms ease-out, border-color 180ms ease-out;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce-page button.button:hover {
  background: var(--in-stock);
  border-color: var(--in-stock);
  color: var(--white);
}
.woocommerce button.button.alt,
.woocommerce a.button.alt,
.woocommerce input.button.alt {
  background: var(--brass);
  border-color: var(--brass);
  color: var(--ink);
}
.woocommerce button.button.alt:hover,
.woocommerce a.button.alt:hover { background: var(--ink); border-color: var(--ink); color: var(--white); }

.woocommerce .button:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }

@media (max-width: 600px) {
  .woocommerce a.button,
  .woocommerce button.button,
  .woocommerce input.button { min-height: 52px; width: 100%; }
}

/* Woo notices, in the same language as the rest of the site. */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bone);
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
}
.woocommerce-message { color: var(--in-stock); font-weight: 600; }
.woocommerce-error   { color: var(--low-stock); font-weight: 600; }

/* ============================================================
   FOOTER, CURRENT PAGE

   WordPress marks the page you are on with current-menu-item on the list item,
   and current-menu-ancestor on a parent. Gold on the dark footer measures
   6.48:1, so it is a legible highlight rather than decoration alone: it also
   carries a heavier weight, because colour on its own is not an accessible
   way to signal state.
   ============================================================ */

/* !important is needed here, and it is worth saying why rather than leaving it
   looking lazy. WPCode snippet 214 is still active and injects an inline
   `footer.ct-footer a { color: var(--rlc-muted) }` marked important, which
   beats anything a stylesheet can say. That snippet is dead weight from the
   previous build and should be retired; once it is, the !important can go. */
footer.ct-footer li[class*="current-menu-"] > a,
footer.ct-footer li[class*="current_page_item"] > a,
footer.ct-footer li[class*="current-menu-"] > .ct-menu-link,
.ct-footer .current-menu-item > a,
.ct-footer .current_page_item > a,
.ct-footer .current-menu-ancestor > a,
.lq-footer .current-menu-item > a,
.lq-footer .current_page_item > a,
.site-footer .current-menu-item > a,
.site-footer .current_page_item > a {
  color: var(--brass) !important;
  font-weight: 600;
}

footer.ct-footer li[class*="current-menu-"] > a:hover,
.ct-footer .current-menu-item > a:hover,
.lq-footer .current-menu-item > a:hover,
.site-footer .current-menu-item > a:hover { color: var(--white) !important; }

/* ============================================================
   THEME BUTTON TOKENS

   Blocksy drives every button it renders from these four custom properties,
   so overriding them here fixes the header, the footer, WooCommerce and the
   order tracking form in one place instead of fighting selector specificity
   in four.

   The theme shipped white text on #C9A227, which measures 2.42:1 and fails
   the 4.5:1 floor badly. Ink on that gold would pass at 8.13:1, but our own
   buttons are ink with white text at 19.67:1, so matching them keeps one
   button language across the site. Hover goes green at 5.29:1.
   ============================================================ */

:root {
  --theme-button-background-initial-color: var(--ink);
  --theme-button-text-initial-color: var(--white);
  --theme-button-background-hover-color: var(--in-stock);
  --theme-button-text-hover-color: var(--white);
  --theme-button-border-radius: var(--radius);
  --theme-button-min-height: 48px;
}

/* ============================================================
   ARCHIVE CARDS MATCH THE HOMEPAGE CARD

   WooCommerce prints the loop card as figure, title, price, category, actions.
   The homepage card reads category, title, price, stock, buy. Rather than
   replace the template, the parts are reordered with flex order and given the
   homepage classes' styling, so both cards are one design with one set of
   rules. The stock line is added by loop-stock.php.
   ============================================================ */

.woocommerce ul.products li.product,
ul.products li.product { display: flex; flex-direction: column; }

.woocommerce ul.products li.product > figure,
ul.products li.product > figure { order: 0; margin: 0 0 12px; }

/* Category becomes the eyebrow above the name. */
.woocommerce ul.products li.product > .entry-meta,
ul.products li.product > .entry-meta {
  order: 1;
  margin: 0 0 4px;
  padding: 0 14px;
  list-style: none;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--slate);
  line-height: 1.3;
}
.woocommerce ul.products li.product > .entry-meta li,
ul.products li.product > .entry-meta li { display: inline; margin: 0; }
.woocommerce ul.products li.product > .entry-meta a,
ul.products li.product > .entry-meta a { color: var(--slate); text-decoration: none; }

.woocommerce ul.products li.product > .woocommerce-loop-product__title,
.woocommerce ul.products li.product > h2,
ul.products li.product > .woocommerce-loop-product__title,
ul.products li.product > h2 { order: 2; margin: 0 0 6px; }

.woocommerce ul.products li.product > .price,
ul.products li.product > .price { order: 3; margin: 0 0 6px; }

.woocommerce ul.products li.product > .lq-loop__stock,
ul.products li.product > .lq-loop__stock,
.woocommerce ul.products li.product .lq-loop__stock,
ul.products li.product .lq-loop__stock {
  order: 4;
  margin: 0 0 10px;
  padding: 0 14px;
}

.woocommerce ul.products li.product > .ct-woo-card-actions,
ul.products li.product > .ct-woo-card-actions,
.woocommerce ul.products li.product > .button,
ul.products li.product > .button {
  order: 5;
  margin-top: auto;
  padding: 0 14px;
  width: 100%;
}

/* Full width buy button. display:flex rather than inline-flex, or the button
   shrinks to the width of its own text and sits off to one side. */
.woocommerce ul.products li.product .button,
ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart,
ul.products li.product .added_to_cart {
  display: flex !important;
  width: 100%;
  margin-inline: 0;
}

@media (max-width: 767px) {
  .woocommerce ul.products li.product > .entry-meta,
  ul.products li.product > .entry-meta,
  .woocommerce ul.products li.product .lq-loop__stock,
  ul.products li.product .lq-loop__stock { padding-inline: 10px; }

  .woocommerce ul.products li.product > .ct-woo-card-actions,
  ul.products li.product > .ct-woo-card-actions { padding-inline: 10px; }
}

/* Same fix on our own card: it was inline-flex, so the button hugged its text
   instead of filling the card. */
.lq-card__buy .button,
.lq-card__buy .added_to_cart { display: flex; width: 100%; }

/* ============================================================
   MANUAL PAYMENT INSTRUCTIONS

   Shown on the order received page for Zelle, Cash App and PayPal orders.
   Deliberately prominent: the customer has just placed an order that is not
   paid for, and if they miss this step nothing ever ships.
   ============================================================ */

.lq-paynote {
  margin: 0 0 28px;
  padding: 20px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-ui);
}
.lq-paynote__title {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: var(--h3);
  font-weight: 700;
  line-height: 1.2;
  color: var(--ink);
}
.lq-paynote__text {
  margin: 0;
  font-size: var(--body);
  line-height: 1.7;
  color: var(--ink);
}

/* Note under a manual payment method in the Checkout block. */
.lq-paymethod__note {
  margin: 8px 0 0;
  font-family: var(--font-ui);
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--muted);
}

/* ---- carousel row ----
   A product row that scrolls sideways instead of wrapping. Built on native
   scroll snapping, so touch, trackpad and keyboard all work with no library.
   The arrows drive the same scroll position, they are not a second system. */

.lq-carousel {
  position: relative;
}

.lq-grid--track {
  --track-cols: 4;
  --track-gap: 24px;
  display: flex;
  gap: var(--track-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* Room for the card focus ring, which would otherwise be clipped. */
  padding-block: 3px;
}
.lq-grid--track::-webkit-scrollbar { display: none; }

.lq-grid--2.lq-grid--track { --track-cols: 2; }
.lq-grid--3.lq-grid--track { --track-cols: 3; }
.lq-grid--4.lq-grid--track { --track-cols: 4; }
.lq-grid--5.lq-grid--track { --track-cols: 5; }

.lq-grid--track > .lq-card {
  flex: 0 0 calc((100% - var(--track-gap) * (var(--track-cols) - 1)) / var(--track-cols));
  scroll-snap-align: start;
}

.lq-grid--track:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 4px;
}

@media (max-width: 1023px) {
  .lq-grid--4.lq-grid--track, .lq-grid--5.lq-grid--track { --track-cols: 3; }
}
@media (max-width: 767px) {
  .lq-grid--track { --track-gap: 12px; }
  .lq-grid--2.lq-grid--track, .lq-grid--3.lq-grid--track,
  .lq-grid--4.lq-grid--track, .lq-grid--5.lq-grid--track { --track-cols: 2; }
}
@media (max-width: 400px) {
  .lq-grid--track { --track-gap: 10px; }
}

.lq-carousel__nav {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}

.lq-carousel__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background-color 150ms ease-out, color 150ms ease-out;
}
.lq-carousel__btn:hover { background: var(--ink); color: var(--white); }
.lq-carousel__btn:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 2px;
}
.lq-carousel__btn[disabled] { opacity: 0.35; cursor: default; }
.lq-carousel__btn[disabled]:hover { background: transparent; color: var(--ink); }

.lq-row--dark .lq-carousel__btn {
  border-color: rgba(255, 255, 255, 0.28);
  color: var(--white);
}
.lq-row--dark .lq-carousel__btn:hover { background: var(--white); color: var(--ink); }
.lq-row--dark .lq-carousel__btn[disabled]:hover { background: transparent; color: var(--white); }

.lq-carousel__play .lq-carousel__icon-play { display: none; }
.lq-carousel__play[aria-pressed="true"] .lq-carousel__icon-pause { display: none; }
.lq-carousel__play[aria-pressed="true"] .lq-carousel__icon-play { display: block; }

@media (prefers-reduced-motion: reduce) {
  .lq-grid--track { scroll-behavior: auto; }
}

/* ---- card text alignment ----
   The theme centres product text inside WooCommerce loops, which fights the
   left alignment the rest of the site keeps. Everything in the card body
   reads from the left. The button is the one exception: a full width button
   with its label off to one side looks broken, so its label stays centred. */

.lq-card,
.lq-card__body,
.lq-card__eyebrow,
.lq-card__title,
.lq-card__title a,
.lq-card__price,
.lq-card__stock {
  text-align: left;
}

.lq-card__body {
  align-items: stretch;
}

.lq-card__buy {
  width: 100%;
  text-align: left;
}

.lq-card__buy .button,
.lq-card__buy .added_to_cart {
  text-align: center;
  justify-content: center;
}

/* ---- mobile header cart ----
   The cart sits next to the menu button on phones. The desktop version shows
   the running total beside the icon, which on a 320px screen pushes the logo
   and the menu button into each other, so on mobile it is the icon and the
   item count only. Delete this block to bring the total back. */

[data-device="mobile"] .ct-header-cart .ct-label {
  display: none;
}

[data-device="mobile"] .ct-header-cart {
  margin-inline-end: 4px;
}