/* ==========================================================================
   Wild Kiwi — "dark copper distillery" redesign
   Scoped to body.wk-redesign so nothing here can touch the live front page.
   ========================================================================== */

body.wk-redesign {
  --wk-ink:      #0C0A09;   /* page ground - warm black, makes copper glow */
  --wk-slate:    #16130F;   /* menu panel */
  --wk-copper:   #B87333;   /* structure: spine, rules, leaders */
  --wk-patina:   #4E7C6B;   /* verdigris - dietary pills only */
  --wk-patina-t: #8FC7B2;   /* pill text, lifted for contrast */
  --wk-amber:    #FFC100;   /* brand yellow - prices + primary CTA only */
  --wk-bone:     #F4F1EC;
  --wk-ash:      #9A9289;
  --wk-line:     rgba(244, 241, 236, .08);

  --wk-display: "Saira Condensed", "Arial Narrow", sans-serif;
  --wk-body:    "Montserrat", system-ui, sans-serif;
  --wk-head-h:  64px;

  background: var(--wk-ink);
  color: var(--wk-bone);
  font-family: var(--wk-body);
}

body.wk-redesign * { box-sizing: border-box; }

/* Breakdance boxes every section at 1120px. These sections are full-bleed by
   design; .wk-shell does the measure instead. */
body.wk-redesign .section-container { max-width: none; width: 100%; padding-inline: 0; }

/* Breakdance's global heading colour is the brand yellow. Here amber is
   reserved for prices and CTAs, so headings are set back to bone explicitly. */
body.wk-redesign :where(h1, h2, h3, h4) {
  font-family: var(--wk-display);
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1.05;
  margin: 0;
  color: var(--wk-bone);
}

/* Keyboard focus - visible everywhere, never removed */
body.wk-redesign :focus-visible {
  outline: 2px solid var(--wk-amber);
  outline-offset: 3px;
}

.wk-shell { width: min(1120px, 100% - 3rem); margin-inline: auto; }
@media (max-width: 640px) { .wk-shell { width: min(1120px, 100% - 2rem); } }

.wk-eyebrow {
  font-family: var(--wk-display);
  font-weight: 600;
  font-size: .75rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--wk-copper);
}

/* ---------- Hero -------------------------------------------------------- */

.wk-hero {
  position: relative; min-height: min(88vh, 780px); display: grid; align-items: end;
  background-image: url("https://wildkiwidistillery.com/wp-content/uploads/2024/10/wk_bg_dist.webp");
  background-size: cover;
  background-position: center 40%;
}
.wk-hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(12,10,9,.55) 0%, rgba(12,10,9,.15) 35%, rgba(12,10,9,.92) 88%, var(--wk-ink) 100%);
}
.wk-hero__inner {
  position: relative; z-index: 2;
  padding-top: calc(var(--wk-head-h) + 3rem);
  padding-bottom: clamp(3rem, 6vw, 5rem);
}
.wk-hero__logo { max-width: min(330px, 62vw); height: auto; margin-bottom: 1.75rem; }
.wk-hero__thesis {
  font-family: var(--wk-display);
  font-weight: 700;
  font-size: clamp(2rem, 4.6vw, 3.5rem);
  line-height: 1;
  text-transform: uppercase;
  max-width: 21ch;
  text-wrap: balance;
  color: var(--wk-bone);
  text-shadow: 0 2px 24px rgba(12,10,9,.7);
}
.wk-hero__thesis em { font-style: normal; color: var(--wk-amber); }
.wk-hero__sub {
  margin: 1.15rem 0 0;
  color: var(--wk-ash);
  font-size: 1rem;
  letter-spacing: .01em;
  max-width: 46ch;
}

/* ---------- Buttons ----------------------------------------------------- */

.wk-actions { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 2rem; }

.wk-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--wk-display); font-weight: 600;
  font-size: .95rem; letter-spacing: .1em; text-transform: uppercase;
  padding: .85rem 1.6rem; border-radius: 2px; text-decoration: none;
  border: 1px solid transparent;
  transition: transform .18s ease, background-color .18s ease, color .18s ease;
}
.wk-btn--primary { background: var(--wk-amber); color: #17130A; }
.wk-btn--primary:hover { transform: translateY(-2px); background: #ffd047; }
.wk-btn--ghost { border-color: rgba(184,115,51,.55); color: var(--wk-bone); }
.wk-btn--ghost:hover { border-color: var(--wk-copper); background: rgba(184,115,51,.12); transform: translateY(-2px); }

/* ---------- Generic section --------------------------------------------- */

.wk-section { padding-block: clamp(3.5rem, 7vw, 6rem); }
.wk-section--slate { background: var(--wk-slate); }
.wk-section__title { font-size: clamp(1.75rem, 3.4vw, 2.6rem); text-transform: uppercase; margin-top: .5rem; }

/* ---------- Hours ------------------------------------------------------- */

.wk-hours { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 1px; margin-top: 2.5rem; background: var(--wk-line); border: 1px solid var(--wk-line); }
.wk-hours__day { background: var(--wk-ink); padding: 1.1rem .9rem; text-align: center; }
.wk-hours__day dt { font-family: var(--wk-display); font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; color: var(--wk-ash); }
.wk-hours__day dd { margin: .5rem 0 0; font-family: var(--wk-display); font-weight: 600; font-size: 1.05rem; }
.wk-hours__day--shut dd { color: var(--wk-ash); }
.wk-hours__day--today { background: rgba(184,115,51,.14); box-shadow: inset 0 2px 0 var(--wk-copper); }
.wk-hours__day--today dd { color: var(--wk-amber); }
.wk-hours__notice { margin: 1.25rem 0 0; font-size: .85rem; font-style: italic; color: var(--wk-copper); }

/* ---------- Category chips (sticky) ------------------------------------- */

.wk-chips {
  position: sticky; top: var(--wk-head-h); z-index: 20;
  background: rgba(12,10,9,.94);
  backdrop-filter: blur(10px);
  border-block: 1px solid var(--wk-line);
  padding-block: .7rem;
}
.wk-chips__row { display: flex; gap: .5rem; overflow-x: auto; scrollbar-width: none; }
.wk-chips__row::-webkit-scrollbar { display: none; }
.wk-chip {
  flex: 0 0 auto; text-decoration: none; white-space: nowrap;
  font-family: var(--wk-display); font-weight: 600; font-size: .78rem;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--wk-ash); padding: .45rem .85rem; border-radius: 2px;
  border: 1px solid transparent; transition: color .15s ease, border-color .15s ease;
}
.wk-chip:hover { color: var(--wk-bone); border-color: rgba(184,115,51,.4); }
.wk-chip[aria-current="true"] { color: var(--wk-amber); border-color: var(--wk-copper); }

/* ---------- THE SIGNATURE: the spirit-safe spine ------------------------ */
/* A copper hairline runs the height of the menu. Each category taps off it
   like an outlet on a still's manifold. Structure, not decoration.         */

/* No top padding - the chip nav sits flush against the section above it so it
   docks under the header cleanly instead of floating in dead space. */
.wk-menu { background: var(--wk-slate); padding-block: 0 clamp(3rem, 6vw, 5rem); }
.wk-menu > .wk-shell { padding-top: clamp(1rem, 2vw, 2rem); }
.wk-menu__inner { position: relative; padding-left: 3rem; }
.wk-menu__inner::before {
  content: ""; position: absolute; left: 0; top: .5rem; bottom: .5rem; width: 1px;
  background: linear-gradient(180deg, transparent, var(--wk-copper) 4%, var(--wk-copper) 96%, transparent);
  opacity: .65;
}

.wk-cat { position: relative; padding-block: clamp(2.25rem, 4vw, 3.25rem) 0; scroll-margin-top: calc(var(--wk-head-h) + 64px); }

.wk-cat__head { position: relative; }
/* the take-off pipe */
.wk-cat__head::before {
  content: ""; position: absolute; left: -3rem; top: .78em; width: 2.1rem; height: 1px;
  background: var(--wk-copper);
}
/* the valve */
.wk-cat__head::after {
  content: ""; position: absolute; left: -3.3rem; top: calc(.78em - 3px); width: 7px; height: 7px;
  background: var(--wk-copper); transform: rotate(45deg);
}
.wk-cat__title { font-size: clamp(1.45rem, 3vw, 2.1rem); text-transform: uppercase; color: var(--wk-bone); }
.wk-cat__note { margin: .5rem 0 0; font-size: .8rem; color: var(--wk-ash); font-style: italic; }

@media (max-width: 720px) {
  .wk-menu__inner { padding-left: 1.5rem; }
  .wk-cat__head::before { left: -1.5rem; width: .9rem; }
  .wk-cat__head::after { left: -1.75rem; }
}

/* ---------- Menu item --------------------------------------------------- */

.wk-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2rem, 4vw, 3.75rem); margin-top: 1.75rem; }
@media (max-width: 860px) { .wk-items { grid-template-columns: 1fr; } }

.wk-item { padding-block: 1.15rem; border-bottom: 1px solid var(--wk-line); }
.wk-item__top { display: flex; align-items: baseline; gap: .7rem; }
.wk-item__name {
  font-family: var(--wk-display); font-weight: 600;
  font-size: clamp(1rem, 1.5vw, 1.2rem); letter-spacing: .03em;
  text-transform: uppercase; color: var(--wk-bone);
}
/* leader ties the price to its item and kills the dead gutter */
.wk-item__leader { flex: 1 1 auto; min-width: 1.5rem; border-bottom: 1px dotted rgba(184,115,51,.55); transform: translateY(-.3em); }
.wk-item__price {
  font-family: var(--wk-display); font-weight: 600; font-size: 1.1rem;
  font-variant-numeric: tabular-nums; color: var(--wk-amber); white-space: nowrap;
}
.wk-item__price sup { font-size: .62em; opacity: .7; top: -.55em; margin-right: .05em; }
.wk-item__desc { margin: .45rem 0 0; color: var(--wk-ash); font-size: .875rem; line-height: 1.55; max-width: 56ch; }

.wk-diet { display: flex; flex-wrap: wrap; gap: .3rem; margin: .55rem 0 0; padding: 0; list-style: none; }
.wk-diet > li { list-style: none; }

/* Mobile density. Descriptions wrap to 4-5 lines on a phone, which pushed each
   item past 200px and left barely three on screen at a time. */
@media (max-width: 560px) {
  .wk-item { padding-block: .85rem; }
  .wk-item__desc { margin-top: .3rem; font-size: .82rem; line-height: 1.45; }
  .wk-diet { margin-top: .4rem; }
  .wk-cat { padding-top: 2rem; }
  .wk-items { margin-top: 1.1rem; }
}
.wk-pill {
  font-family: var(--wk-display); font-weight: 600; font-size: .625rem;
  letter-spacing: .1em; padding: .16rem .42rem; border-radius: 2px;
  border: 1px solid var(--wk-patina); color: var(--wk-patina-t);
}

/* ---------- Legend ------------------------------------------------------ */

.wk-legend { margin-top: 3.5rem; padding-top: 1.5rem; border-top: 1px solid var(--wk-line); display: flex; flex-wrap: wrap; gap: 1.25rem; }
.wk-legend__item { display: flex; align-items: center; gap: .5rem; font-size: .78rem; color: var(--wk-ash); }

/* ---------- Reviews ----------------------------------------------------- */

.wk-reviews { padding-block: clamp(3.5rem, 7vw, 6rem); }
.wk-reviews__mount { margin-top: 2.5rem; }

/* ---------- Book CTA ---------------------------------------------------- */

.wk-book { background: var(--wk-slate); padding-block: clamp(3.5rem, 7vw, 6rem); text-align: center; }
.wk-book__title { font-size: clamp(1.9rem, 4.5vw, 3.1rem); text-transform: uppercase; }
.wk-book__sub { margin: 1rem auto 0; color: var(--wk-ash); max-width: 44ch; }
.wk-book .wk-actions { justify-content: center; }

/* ---------- Header ------------------------------------------------------ */
/* Pinned solid - no hide-on-scroll, so the category chips always dock
   against a stable edge instead of chasing a moving header.                */

.wk-head {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  background: rgba(12, 10, 9, .95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--wk-line);
}
/* Sit below the WP admin bar for logged-in editors; logged-out visitors are
   unaffected because .admin-bar is only present when the bar renders.
   Desktop only: below 783px WordPress switches the admin bar to
   position:absolute so it scrolls away, and a fixed 46px offset would strand
   the header with a transparent gap above it the moment you scroll. */
@media (min-width: 783px) {
  body.admin-bar .wk-head { top: 32px; }
}

.wk-head__row { display: flex; align-items: center; gap: 1.5rem; min-height: 68px; }

/* Constrain by height, not width - the wordmark is 420x294, so sizing by
   width pushed the bar to 104px tall. */
.wk-head__brand { display: block; flex: 0 0 auto; line-height: 0; }
.wk-head__brand img { height: clamp(38px, 4.2vw, 50px); width: auto; }

.wk-head__nav { margin-left: auto; display: flex; align-items: center; gap: 1.6rem; }
.wk-head__link {
  font-family: var(--wk-display); font-weight: 600; font-size: .95rem;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--wk-bone); text-decoration: none;
  padding-block: .35rem; border-bottom: 1px solid transparent;
}
.wk-head__link:hover { color: var(--wk-amber); border-bottom-color: var(--wk-copper); }
.wk-head__tel {
  font-family: var(--wk-display); font-weight: 600; font-size: .95rem;
  letter-spacing: .04em; color: var(--wk-ash); text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.wk-head__tel:hover { color: var(--wk-bone); }
.wk-btn--sm { padding: .6rem 1.1rem; font-size: .82rem; }

/* Burger - hidden until the nav needs collapsing */
.wk-head__toggle {
  display: none; margin-left: auto; width: 44px; height: 44px;
  background: none; border: 1px solid rgba(184,115,51,.45); border-radius: 2px;
  cursor: pointer; padding: 0; place-content: center; gap: 5px;
}
.wk-head__toggle span { display: block; width: 20px; height: 2px; background: var(--wk-bone); margin-inline: auto; transition: transform .2s ease, opacity .2s ease; }
.wk-head__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.wk-head__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.wk-head__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 900px) {
  .wk-head__toggle { display: grid; }
  .wk-head__nav {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: .35rem;
    background: var(--wk-ink); border-bottom: 1px solid var(--wk-line);
    padding: 1rem clamp(1rem, 4vw, 2rem) 1.5rem;
    margin-left: 0;
    display: none;
  }
  .wk-head__nav.is-open { display: flex; }
  .wk-head__link { padding-block: .7rem; border-bottom: 1px solid var(--wk-line); }
  .wk-head__tel { padding-block: .7rem; }
  .wk-btn--sm { justify-content: center; margin-top: .5rem; }
}

/* ---------- Footer ------------------------------------------------------ */

.wk-foot { background: var(--wk-slate); border-top: 1px solid var(--wk-line); padding-block: clamp(2.5rem, 5vw, 4rem) 0; }

.wk-foot__grid {
  display: grid; gap: clamp(1.75rem, 3vw, 3rem);
  grid-template-columns: 1.3fr 1fr 1fr 1.1fr;
  align-items: start;
}
@media (max-width: 980px) { .wk-foot__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .wk-foot__grid { grid-template-columns: 1fr; } }

/* The live footer renders this logo at 519px and lets it bleed off-canvas. */
.wk-foot__logo { width: clamp(150px, 16vw, 200px); height: auto; display: block; }
.wk-foot__blurb { margin: 1rem 0 0; color: var(--wk-ash); font-size: .875rem; max-width: 28ch; }

.wk-foot__social { list-style: none; display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.15rem 0 0; padding: 0; }
.wk-foot__social a {
  display: inline-flex; align-items: center; gap: .45rem;
  color: var(--wk-ash); font-size: .8rem; text-decoration: none;
  border: 1px solid var(--wk-line); border-radius: 2px;
  padding: .45rem .7rem;
  transition: color .15s ease, border-color .15s ease;
}
.wk-foot__social a:hover { color: var(--wk-amber); border-color: var(--wk-copper); }
.wk-foot__social svg { flex: 0 0 auto; }

.wk-foot__title {
  font-family: var(--wk-display); font-size: .8rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--wk-copper);
  margin: 0 0 .9rem;
}
.wk-foot__addr { font-style: normal; color: var(--wk-ash); font-size: .875rem; line-height: 1.6; }
.wk-foot__link { display: block; margin-top: .5rem; color: var(--wk-bone); font-size: .875rem; text-decoration: none; border-bottom: 1px solid transparent; width: fit-content; }
.wk-foot__link:hover { color: var(--wk-amber); border-bottom-color: var(--wk-copper); }

.wk-foot__hours { margin: 0; font-size: .85rem; }
.wk-foot__hours > div { display: flex; justify-content: space-between; gap: 1rem; padding-block: .3rem; border-bottom: 1px solid var(--wk-line); }
.wk-foot__hours dt { font-family: var(--wk-display); letter-spacing: .1em; text-transform: uppercase; color: var(--wk-ash); }
.wk-foot__hours dd { margin: 0; color: var(--wk-bone); font-variant-numeric: tabular-nums; }

/* Today's row, so the footer answers "are they open now?" at a glance.
   Matches the hours grid treatment on the home page. */
.wk-foot__hours .is-today { border-bottom-color: var(--wk-copper); }
.wk-foot__hours .is-today dt { color: var(--wk-amber); }
.wk-foot__hours .is-today dd { color: var(--wk-amber); font-weight: 600; }

/* The map was the one bright object in a dark footer, and squashed to a
   244x118 letterbox. Fix the ratio and knock it back into the palette; it
   returns to full colour on hover/focus so it still reads as interactive. */
.wk-foot__map { display: block; text-decoration: none; }
.wk-foot__map img {
  width: 100%; height: auto; display: block;
  aspect-ratio: 16 / 10; object-fit: cover;
  border: 1px solid var(--wk-line); border-radius: 2px;
  filter: grayscale(.55) brightness(.72) contrast(1.05) sepia(.18);
  transition: filter .25s ease, border-color .25s ease;
}
.wk-foot__map:hover img,
.wk-foot__map:focus-visible img { filter: none; border-color: var(--wk-copper); }
.wk-foot__map span {
  display: inline-block; margin-top: .6rem; font-family: var(--wk-display);
  font-size: .8rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--wk-amber); border-bottom: 1px solid var(--wk-copper);
}

.wk-foot__base {
  margin-top: clamp(2rem, 4vw, 3rem); padding-block: 1.25rem;
  border-top: 1px solid var(--wk-line);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem;
}
.wk-foot__base p { margin: 0; font-size: .78rem; color: var(--wk-ash); }
.wk-foot__base a { color: var(--wk-ash); text-decoration: none; border-bottom: 1px solid rgba(184,115,51,.35); }
.wk-foot__base a:hover { color: var(--wk-amber); }

/* ---------- Interior pages (bookings, contact) -------------------------- */

/* The header is fixed. Pages that open with the full-bleed hero handle their
   own clearance; every other page needs it here, including the WooCommerce
   pages whose banner is injected mid-content. */
body.wk-redesign:not(:has(.wk-hero)) { padding-top: var(--wk-head-h); }

.wk-pagehead {
  padding-top: clamp(2.5rem, 5vw, 4rem);
  padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
  border-bottom: 1px solid var(--wk-line);
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(184,115,51,.16), transparent 60%),
    var(--wk-slate);
}
.wk-pagehead__title { font-size: clamp(2rem, 5vw, 3.4rem); text-transform: uppercase; margin-top: .5rem; }
.wk-pagehead__sub { margin: 1rem 0 0; color: var(--wk-ash); max-width: 52ch; }

/* Breakdance renders the booking iframe and the contact form inside its own
   section wrapper. Give those sections the page ground and real breathing room -
   the global Breakdance section padding is 0. */
body.wk-redesign .bde-section { background: var(--wk-ink); }

/* These Divs carry a large top margin from the original layout, which existed
   to push content clear of the old transparent header. The banner does that
   job now, so the margin is dead space. */
body.wk-redesign .section-container > .bde-div { margin-top: 0; }
body.wk-redesign .wk-pagehead ~ .bde-section,
body.wk-redesign .bde-section:has(.breakdance-form),
body.wk-redesign .bde-section:has(.bde-code-block) { padding-block: clamp(2.5rem, 5vw, 4rem); }

/* Two-column contact: form beside the details column.
   These elements are direct children of a Breakdance Div rather than a
   .wk-shell, and .section-container's max-width is removed above, so this
   has to carry the page measure itself. */
body.wk-redesign .wk-contact-grid {
  width: min(1120px, 100% - 3rem);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, .85fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
}
@media (max-width: 900px) {
  body.wk-redesign .wk-contact-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  body.wk-redesign .wk-contact-grid { width: min(1120px, 100% - 2rem); }
}

/* Same measure for the booking widget, which is also a bare Breakdance child. */
body.wk-redesign .bde-code-block { width: min(900px, 100% - 3rem); margin-inline: auto; }

.wk-aside { display: grid; gap: 2rem; align-content: start; }
.wk-aside__block { padding-bottom: 1.5rem; border-bottom: 1px solid var(--wk-line); }
.wk-aside__block:last-child { border-bottom: 0; padding-bottom: 0; }
.wk-aside__note { margin: 0 0 1rem; color: var(--wk-ash); font-size: .875rem; }

/* ---------- Breakdance form, restyled ----------------------------------- */

body.wk-redesign .breakdance-form { display: grid; gap: 1.1rem; }
body.wk-redesign .breakdance-form-field { display: grid; gap: .45rem; }

body.wk-redesign .breakdance-form-field__label {
  font-family: var(--wk-display); font-weight: 600; font-size: .8rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--wk-ash);
}
body.wk-redesign .breakdance-form-field__required { color: var(--wk-copper); margin-left: .25rem; }

body.wk-redesign .breakdance-form-field__input,
body.wk-redesign .breakdance-form textarea,
body.wk-redesign .breakdance-form select {
  width: 100%;
  background: var(--wk-slate);
  border: 1px solid var(--wk-line);
  border-radius: 2px;
  color: var(--wk-bone);
  font-family: var(--wk-body);
  font-size: 1rem;
  padding: .8rem .9rem;
  transition: border-color .15s ease, background-color .15s ease;
}
body.wk-redesign .breakdance-form textarea { min-height: 160px; resize: vertical; }
body.wk-redesign .breakdance-form-field__input::placeholder { color: #6E6862; }
body.wk-redesign .breakdance-form-field__input:focus,
body.wk-redesign .breakdance-form textarea:focus {
  outline: none;
  border-color: var(--wk-copper);
  background: var(--wk-panel-2, #1B1B1F);
}
body.wk-redesign .breakdance-form-field__input:focus-visible,
body.wk-redesign .breakdance-form textarea:focus-visible {
  outline: 2px solid var(--wk-amber); outline-offset: 2px;
}

body.wk-redesign .breakdance-form button[type="submit"],
body.wk-redesign .breakdance-form .breakdance-form-button {
  justify-self: start;
  background: var(--wk-amber);
  color: #17130A;
  border: 0; border-radius: 2px; cursor: pointer;
  font-family: var(--wk-display); font-weight: 600;
  font-size: .95rem; letter-spacing: .1em; text-transform: uppercase;
  padding: .9rem 1.8rem;
  transition: transform .18s ease, background-color .18s ease;
}
body.wk-redesign .breakdance-form button[type="submit"]:hover { transform: translateY(-2px); background: #ffd047; }

/* ---------- Booking widget ---------------------------------------------- */
/* NowBookIt renders in an iframe we cannot restyle from here, so it is framed
   as a deliberate light panel rather than left as a raw slab on dark. */

body.wk-redesign .bde-code-block iframe {
  background: #fff;
  border: 1px solid rgba(184,115,51,.45) !important;
  border-radius: 3px;
  display: block;
}

/* ---------- WooCommerce -------------------------------------------------
   Written against Woo's stable class names and its block equivalents. These
   pages are unused today (plugin deactivated, no products), so this is a
   token-consistent baseline, not a verified layout - it needs a pass once
   WooCommerce is switched on and real products exist.
   ---------------------------------------------------------------------- */

body.wk-redesign .wk-woo { padding-block: clamp(2rem, 4vw, 3.5rem); }

/* Give Woo's own containers the page measure, since .section-container's
   max-width is removed above. */
body.wk-redesign .woocommerce,
body.wk-redesign .wc-block-components-main,
body.wk-redesign .wp-block-woocommerce-cart,
body.wk-redesign .wp-block-woocommerce-checkout {
  width: min(1120px, 100% - 3rem);
  margin-inline: auto;
}

/* Headings and copy inherit the page palette rather than Woo's defaults. */
body.wk-redesign .woocommerce h1,
body.wk-redesign .woocommerce h2,
body.wk-redesign .woocommerce h3 { font-family: var(--wk-display); text-transform: uppercase; color: var(--wk-bone); }
body.wk-redesign .woocommerce { color: var(--wk-bone); }

/* Product grid */
body.wk-redesign ul.products { list-style: none; display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); padding: 0;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
body.wk-redesign ul.products li.product { background: var(--wk-slate); border: 1px solid var(--wk-line); border-radius: 2px; padding: 1rem; }
body.wk-redesign ul.products li.product img { width: 100%; height: auto; border-radius: 2px; }
body.wk-redesign ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--wk-display); font-size: 1.05rem; letter-spacing: .03em;
  text-transform: uppercase; color: var(--wk-bone); margin: .75rem 0 .35rem;
}
body.wk-redesign ul.products li.product .price,
body.wk-redesign .woocommerce div.product p.price,
body.wk-redesign .wc-block-components-product-price {
  color: var(--wk-amber); font-family: var(--wk-display); font-weight: 600;
  font-variant-numeric: tabular-nums;
}
body.wk-redesign .woocommerce del { color: var(--wk-ash); opacity: .7; }

/* Buttons - match the site CTA rather than Woo's pill */
body.wk-redesign .woocommerce a.button,
body.wk-redesign .woocommerce button.button,
body.wk-redesign .woocommerce input.button,
body.wk-redesign .woocommerce #respond input#submit,
body.wk-redesign .wc-block-components-button {
  background: var(--wk-amber); color: #17130A;
  border: 0; border-radius: 2px;
  font-family: var(--wk-display); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  padding: .8rem 1.5rem;
  transition: transform .18s ease, background-color .18s ease;
}
body.wk-redesign .woocommerce a.button:hover,
body.wk-redesign .woocommerce button.button:hover,
body.wk-redesign .wc-block-components-button:hover { background: #ffd047; color: #17130A; transform: translateY(-2px); }

body.wk-redesign .woocommerce a.button.alt,
body.wk-redesign .woocommerce button.button.alt { background: var(--wk-amber); color: #17130A; }

/* Tables: cart, order review, account orders */
body.wk-redesign .woocommerce table.shop_table,
body.wk-redesign .woocommerce table.shop_attributes {
  border: 1px solid var(--wk-line); border-collapse: collapse; width: 100%;
}
body.wk-redesign .woocommerce table.shop_table th,
body.wk-redesign .woocommerce table.shop_table td {
  border-bottom: 1px solid var(--wk-line); padding: .9rem; color: var(--wk-bone);
}
body.wk-redesign .woocommerce table.shop_table th {
  font-family: var(--wk-display); font-size: .8rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--wk-ash); text-align: left;
}

/* Form fields - reuse the contact-form treatment */
body.wk-redesign .woocommerce form .form-row input.input-text,
body.wk-redesign .woocommerce form .form-row textarea,
body.wk-redesign .woocommerce form .form-row select,
body.wk-redesign .wc-block-components-text-input input {
  width: 100%; background: var(--wk-slate); color: var(--wk-bone);
  border: 1px solid var(--wk-line); border-radius: 2px; padding: .8rem .9rem;
  font-family: var(--wk-body);
}
body.wk-redesign .woocommerce form .form-row label,
body.wk-redesign .wc-block-components-text-input label {
  font-family: var(--wk-display); font-size: .8rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--wk-ash);
}
body.wk-redesign .woocommerce form .form-row input.input-text:focus-visible {
  outline: 2px solid var(--wk-amber); outline-offset: 2px;
}

/* Notices */
body.wk-redesign .woocommerce-message,
body.wk-redesign .woocommerce-info,
body.wk-redesign .woocommerce-error {
  background: var(--wk-slate); color: var(--wk-bone);
  border-top: 2px solid var(--wk-copper); border-radius: 2px;
  padding: 1rem 1.25rem; list-style: none;
}
body.wk-redesign .woocommerce-error { border-top-color: #C25B4A; }
body.wk-redesign .woocommerce-message a, body.wk-redesign .woocommerce-info a { color: var(--wk-amber); }

/* Account navigation */
body.wk-redesign .woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .25rem; }
body.wk-redesign .woocommerce-MyAccount-navigation a {
  display: block; padding: .7rem .9rem; text-decoration: none;
  color: var(--wk-ash); border: 1px solid transparent; border-radius: 2px;
  font-family: var(--wk-display); letter-spacing: .1em; text-transform: uppercase; font-size: .85rem;
}
body.wk-redesign .woocommerce-MyAccount-navigation a:hover,
body.wk-redesign .woocommerce-MyAccount-navigation .is-active a {
  color: var(--wk-amber); border-color: var(--wk-copper); background: rgba(184,115,51,.1);
}

/* ---------- Motion ------------------------------------------------------ */

/* No scroll-reveal on the menu. It animated the category headings but not the
   items beneath them, so sections read as empty for a beat while scrolling on
   mobile. A menu is reference material - it should be legible instantly. */

@media (prefers-reduced-motion: reduce) {
  body.wk-redesign *,
  body.wk-redesign *::before,
  body.wk-redesign *::after { animation: none !important; transition: none !important; }
}

/* ---------- Live open/closed badge -------------------------------------- */
/* Rendered only when the Opening Hours plugin can parse the hours with
   confidence, so it is never a guess. Colour is backed by a text label, never
   colour alone. */

.wk-status {
  display: inline-flex; align-items: center; gap: .5rem;
  margin-top: .9rem; padding: .4rem .8rem; border-radius: 999px;
  font-family: var(--wk-display); font-weight: 600; font-size: .8rem;
  letter-spacing: .12em; text-transform: uppercase;
  border: 1px solid currentColor;
}
.wk-status__dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.wk-status--open    { color: #8FC7B2; }
.wk-status--closing { color: var(--wk-amber); }
.wk-status--opening { color: var(--wk-amber); }
.wk-status--closed  { color: var(--wk-ash); }
.wk-status--open .wk-status__dot { box-shadow: 0 0 0 4px rgba(143,199,178,.15); }

.wk-foot__notice { margin: .8rem 0 0; font-size: .78rem; font-style: italic; color: var(--wk-copper); }