/* ============================================================
   WordPress / WooCommerce layer
   ------------------------------------------------------------
   main.css is Hugo's stylesheet, copied verbatim. It is not edited here, and
   nothing in this file changes how a Hugo page looks — the two never share a
   document. This file does two jobs:

     1. Styles markup Hugo never had: WooCommerce tables, quantity, cart,
        checkout, notices.
     2. Undoes Hugo components that WooCommerce reuses for a different purpose.
        `.summary` is the clearest case: it is the cream review card on the blog
        and the product column in WooCommerce.

   Where a rule fights WooCommerce's own stylesheet, the selector carries a
   `body` prefix. That wins on specificity rather than on load order, because
   the theme does not control when woocommerce.css is printed.
   ============================================================ */

/* Long prices and wide tables were pushing the document wider than the
   viewport, which is what put the last nav link off the right edge. */
/* #ff0171 is the brand pink, but at 3.82:1 on white it fails the 4.5 needed for
   normal text. Shapes keep the brand colour; text uses this darker one at
   6.2:1, which still reads as the same family. */
:root { --pink-text: #c00052; }

body { overflow-x: clip; }

/* ---------- Header ---------- */

/* Both dimensions are caps, not sizes. A fixed `height` plus a `max-width`
   distorts: the height pins the 8:1 ratio at 352px wide, then the max-width
   squeezes the width to 240 and the mark comes out 5.5:1 — stretched tall.
   Two caps scale together and keep the ratio whatever the logotype's shape is. */
body .brand__logo {
  width: auto;
  height: auto;
  max-height: 44px;
  max-width: 100%;
  object-fit: contain;
}

/* The width the logotype needs is bought back from the links rather than from
   the mark: at 44px tall this wordmark is 352px wide, and the eight links no
   longer fit beside it at Hugo's 12px horizontal padding. 10px each side pays
   for it without shrinking anything the visitor is meant to read. */
body .nav__link { padding-left: 10px; padding-right: 10px; }

/* Hugo switches to the burger at 1080px. WordPress pages carry the same eight
   links but the store adds nothing to the header, so the switch stays where
   Hugo put it — this only guards the band where the logotype is at its widest. */
@media (max-width: 1200px) {
  body .nav-toggle { display: inline-flex; }
  body .nav {
    display: none;
    position: absolute;
    top: var(--header-h);
    left: 0;
    right: 0;
    background: var(--gold);
    flex-direction: column;
    align-items: stretch;
    padding: 12px 20px 20px;
    gap: 2px;
    box-shadow: var(--shadow-sm);
  }
  body .nav.is-open { display: flex; }
  body .nav__link { padding: 12px 14px; border-radius: 8px; }
  body .brand__logo { height: auto; max-height: 40px; max-width: 60vw; }
}

/* A green hairline under the gold header, which otherwise ends in a shadow
   alone. One pixel of the other brand colour, on every commerce page. */
body .site-header { border-bottom: 1px solid var(--green); }

/* ---------- Page chrome ---------- */

body .main { padding: 32px 0 64px; }

body .woocommerce-breadcrumb {
  margin: 0 0 18px;
  font-size: 0.85rem;
  color: var(--ink-soft);
}
body .woocommerce-breadcrumb a { color: var(--pink-text); }

/* ---------- Product ---------- */

/* The Tickets product has no gallery. What showed was WooCommerce's empty
   placeholder frame, which reads as a broken image. */
body.woocommerce-page div.product div.images { display: none; }
body.woocommerce-page div.product div.summary { width: 100%; float: none; }

/* The collision. Hugo's `.summary` is a quoted-review card — cream, gold spine,
   shadow — and WooCommerce puts the same class on the product column. */
body.woocommerce-page div.product .summary.entry-summary {
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

body.woocommerce-page div.product .product_title { margin: 0 0 10px; }

body.woocommerce-page div.product p.price {
  margin: 0 0 18px;
  font-family: var(--font-head);
  font-size: 1.6rem;
  color: var(--ink);
}
body.woocommerce-page div.product p.price del { opacity: 0.5; font-size: 0.8em; }
body.woocommerce-page div.product p.price ins { text-decoration: none; }

body.woocommerce-page del { opacity: 0.5; }
body.woocommerce-page ins { text-decoration: none; color: inherit; }

body .woocommerce-product-details__short-description ul {
  margin: 0 0 22px;
  padding-left: 1.15em;
}
body .woocommerce-product-details__short-description li { margin: 0 0 6px; }

/* ---------- Ticket card ----------
   One decision per band, three bands: who is coming, which day, what it costs.
   The card carries two weights only — its own edge and the button. Everything
   inside is separated by hairlines, never by another box. */

.ticket {
  width: 80%;
  margin-inline: auto;
}
@media (max-width: 900px) {
  .ticket { width: 100%; }
}

.ticket__title {
  margin: 0 0 10px;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.ticket__intro { margin: 0 0 20px; color: var(--ink-soft); font-size: 17px; }
.ticket__intro ul { margin: 0; padding-left: 1.15em; }
.ticket__intro li { margin: 0 0 6px; }

body.woocommerce-page .ticket__form {
  margin: 0;
  padding: 20px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 5px solid var(--gold);
  border-radius: 10px;
  /* Two layers: a 1px contact shadow so the card sits on the page, and a wide
     soft one that is barely visible — enough to lift it, not enough to notice. */
  box-shadow:
    0 1px 2px rgba(34, 34, 34, 0.04),
    0 10px 28px rgba(34, 34, 34, 0.06);
}

/* On a desktop card the rows and the calendar sit side by side. Stacked, the
   month grid stretched to seven 154px columns and the card grew a foot tall.
   Under 1000px they stack, which is the only thing that fits. */
@media (min-width: 1000px) {
  body.woocommerce-page .ticket__form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
    grid-template-areas:
      "items calendar"
      "action action";
    column-gap: 40px;
    row-gap: 20px;
    align-items: start;
  }
  /* Rows and total top-aligned in the left column, so the total follows the
     rows instead of floating in the middle of the calendar's height. The button
     closes the card across its full width. */
  .ticket__items { grid-area: items; align-self: center; }
  /* Written with the body prefix because the base `.ticket__field` rule sits
     later in this file: same specificity, later wins, and the 20px top margin
     was landing above "Visit date" on desktop. */
  body.woocommerce-page .ticket__field { grid-area: calendar; margin: 0; padding: 0; }
  body.woocommerce-page .ticket__form .single_add_to_cart_button { grid-area: action; }
}

/* ---------- Who is coming ---------- */

.ticket__row {
  position: relative;
  display: grid;
  /* Fixed widths, not `auto`. Each row is its own grid, so an `auto` column
     sized itself to that row's label — a longer name pushed that row's stepper
     sideways and the two pills stopped lining up. 134px is the stepper's own
     width (44 + 44 + 44 plus the border). */
  grid-template-columns: minmax(0, 1fr) 134px 120px;
  align-items: center;
  gap: 16px;
  padding: 16px 0;
}
/* Both hairlines — between the rows, and under them above the total — are the
   same pink at the same width, so the list reads as one block with one closing
   rule rather than two different kinds of line. */
.ticket__row + .ticket__row::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--pink);
}
.ticket__row:first-child { padding-top: 4px; }

.ticket__who { font-size: 17px; color: var(--ink); }

.ticket__price {
  text-align: right;
  font-size: 17px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  white-space: nowrap;
}
.ticket__price del {
  font-weight: 400;
  color: var(--ink-soft);
}
.ticket__price { line-height: 1.4; }
.ticket__price del,
.ticket__price small { margin-top: 2px; }
.ticket__was {
  display: block;
  font-size: 13px;
  font-weight: 400;
  color: #4a4a52; /* 8.8:1 — muted, not faint */
}
.ticket__price small {
  display: block;
  font-size: 12px;
  font-weight: 400;
  color: var(--ink-soft);
}

/* Compact stepper, 44px targets, no shadow: the control is a line of text with
   two hit areas beside it, not a widget. */
/* The capsule itself is green, not just the two buttons. A 44px rectangular
   button cannot fill a curve deeper than 44px, so the container's white
   background showed as a sliver inside the rounded end. Green here means there
   is nothing left to show through, whatever the radius computes to. */
.ticket__stepper {
  display: inline-flex;
  align-items: center;
  background: var(--green);
  border: 1px solid var(--green);
  border-radius: 999px;
  overflow: hidden;
}
.ticket__step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  font-size: 18px;
  line-height: 1;
  color: #fff;
  /* Transparent: the capsule behind provides the green, so the button face and
     the pill's curve can never disagree. */
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.ticket__step:hover { background: #26490b; }
.ticket__stepper input {
  width: 44px;
  height: 44px;
  padding: 0;
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  text-align: center;
  background: var(--paper);
  border: 0;
  appearance: textfield;
  -moz-appearance: textfield;
}
.ticket__stepper input::-webkit-outer-spin-button,
.ticket__stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ---------- Which day ---------- */

.ticket__field { margin: 20px 0 0; }
.ticket__label {
  display: block;
  margin: 0 0 8px;
  padding: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}
.ticket__field .required { color: var(--pink-text); text-decoration: none; }
body .booking-date-error { margin: 6px 0 0; color: #b3261e; font-weight: 600; }

/* Full card width, as the largest thing on the page. The grid is bound by the
   row height, so the day itself stays a 44px circle however wide the card is. */
body .ticket__calendar {
  width: 100%;
  padding: 12px 14px 14px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
}
body .ticket__calendar .ui-datepicker { width: 100%; font-size: 15px; }

/* Three columns, not a flex row. jQuery UI outputs prev, next, then the title,
   so a flex row put both chevrons together on the left of the month. */
/* Absolutely positioned chevrons rather than a grid. jQuery UI prints prev,
   next, then the title, and a grid with explicit columns still let the title
   land on a second row; pinning the arrows to the edges cannot. */
body .ticket__calendar .ui-datepicker-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  margin-bottom: 8px;
}
body .ticket__calendar .ui-datepicker-prev { position: absolute; left: 0; top: 0; }
body .ticket__calendar .ui-datepicker-next { position: absolute; right: 0; top: 0; }
body .ticket__calendar .ui-datepicker-title {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-align: center;
}
/* The chevrons are 44px touch targets, but until now they only became a circle
   while a cursor was over them. On glass the pale disc never appeared, so an
   arrow read as a lone glyph rather than a button. The disc is now there at
   rest, drawn in --line, the same tone as every hairline divider; hover and
   press only darken it, so the control keeps one colour. */
body .ticket__calendar .ui-datepicker-prev,
body .ticket__calendar .ui-datepicker-next {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  font-size: 1.3rem;
  line-height: 1;
  color: var(--ink);
  background: var(--line);
  text-decoration: none;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
body .ticket__calendar .ui-datepicker-prev:hover,
body .ticket__calendar .ui-datepicker-next:hover { background: #e2dbc7; }
body .ticket__calendar .ui-datepicker-prev:active,
body .ticket__calendar .ui-datepicker-next:active { background: #d8d0b8; }
/* Before today, or past the last bookable month, jQuery UI marks the arrow
   ui-state-disabled. With a disc at rest it would otherwise advertise a tap
   that does nothing, so the disabled arrow loses the disc and goes faint. */
body .ticket__calendar .ui-datepicker-prev.ui-state-disabled,
body .ticket__calendar .ui-datepicker-next.ui-state-disabled {
  background: transparent;
  opacity: 0.35;
  cursor: default;
}
body .ticket__calendar .ui-datepicker-prev span,
body .ticket__calendar .ui-datepicker-next span { display: none; }
body .ticket__calendar .ui-datepicker-prev::before { content: "\2039"; }
body .ticket__calendar .ui-datepicker-next::before { content: "\203a"; }

body .ticket__calendar table { width: 100%; border-collapse: collapse; }
body .ticket__calendar th {
  padding: 6px 0 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
body .ticket__calendar td { padding: 2px 0; text-align: center; }
body .ticket__calendar td a,
body .ticket__calendar td span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0 auto;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  text-decoration: none;
  border-radius: 50%;
  transition: background-color 0.2s ease, color 0.2s ease;
}
body .ticket__calendar td a:hover { background: #f4f1e6; }
/* Today is an outline; the chosen day is filled. Two states, two treatments. */
/* Brand gold, at 2px. It is 1.8:1 on white, under the 3:1 a non-text indicator
   wants, so the ring is not the only cue: today's number is also emboldened and
   jQuery UI marks it aria-current, which a screen reader reads as "today". */
body .ticket__calendar td.ui-datepicker-today a {
  font-weight: 600;
  box-shadow: inset 0 0 0 2px var(--gold);
}
/* The chosen day is styled only once a day has been chosen. jQuery UI seeds its
   selected day with today before anything is picked, so styling `ui-state-active`
   outright painted today as already selected. The gate is a class on the
   calendar wrapper, because the wrapper survives the month re-render that
   `onSelect` triggers and a class on a day cell does not. */
body .ticket__calendar.has-choice td a.ui-state-active {
  font-weight: 600;
  color: #fff;
  background: var(--green);
}
/* #c9c4b6 was 1.7:1 — dates in the past read as missing rather than closed.
   #6f6d66 is 5.2:1: clearly lighter than a bookable day at 15.9:1, still text
   rather than a smudge. */
body .ticket__calendar .ui-datepicker-unselectable span,
body .ticket__calendar .ui-datepicker-other-month span {
  color: #6f6d66;
  /* A second, non-colour cue that these cannot be booked — kept faint, so it
     says "not available" without competing with the numbers. */
  text-decoration: line-through;
  text-decoration-color: rgba(111, 109, 102, 0.45);
  text-decoration-thickness: 1px;
}

/* ---------- What it costs ---------- */

.ticket__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 18px 0 0;
  padding-top: 16px;
  /* The line under the ticket rows, in the brand pink: the one rule on the
     card that separates choosing from paying. */
  border-top: 1px solid var(--pink);
}
/* The label matches the ticket rows — 17px, same ink — and is bold, because
   it is naming the figure beside it rather than captioning the card. */
.ticket__total span { font-size: 17px; font-weight: 700; color: var(--ink); }
.ticket__total strong {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  transition: opacity 0.2s ease;
}
.ticket__total strong.is-updated { opacity: 0.5; }

/* One primary action, full width, its own height. */
body.woocommerce-page .ticket__form .single_add_to_cart_button {
  width: 100%;
  height: 50px;
  border-radius: 12px;
  font-size: 17px;
  font-weight: 600;
  transition: background-color 0.2s ease;
}

.ticket__more {
  margin: 28px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.ticket__more h2 { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }

/* Phone layout. The card is a single column, and the order changes with it:
   the total sits directly under the rows, before the calendar, because on one
   screen the price follows the quantities and the calendar is the long part at
   the bottom. */
@media (max-width: 999px) {
  body.woocommerce-page .ticket__form { display: flex; flex-direction: column; }
  .ticket__field { margin: 20px 0 0; }
  body.woocommerce-page .ticket__form .single_add_to_cart_button { margin-top: 20px; }
}

@media (max-width: 640px) {
  body.woocommerce-page .ticket__form { padding: 16px; }
  .ticket__title { font-size: 24px; }
}

/* Below about 560px a row cannot hold label, stepper and price on one line:
   the label moves to its own line and the control and the price share the one
   underneath. */
@media (max-width: 560px) {
  .ticket__row {
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "who who"
      "step price";
    row-gap: 10px;
    padding: 14px 0;
  }
  .ticket__who { grid-area: who; }
  .ticket__stepper { grid-area: step; }
  .ticket__price { grid-area: price; align-self: center; }
}


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

body.woocommerce-page a.button,
body.woocommerce-page button.button,
body.woocommerce-page input.button,
body.woocommerce-page #respond input#submit,
body.woocommerce-page .single_add_to_cart_button,
body.woocommerce-page #place_order {
  padding: 15px 28px;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  background: var(--green);
  border: 0;
  border-radius: 999px;
  text-transform: none;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.18s ease;
}
body.woocommerce-page a.button:hover,
body.woocommerce-page button.button:hover,
body.woocommerce-page input.button:hover,
body.woocommerce-page #respond input#submit:hover,
body.woocommerce-page .single_add_to_cart_button:hover,
body.woocommerce-page #place_order:hover {
  color: #fff;
  background: #26490b;
  text-decoration: none;
}
body.woocommerce-page a.button:disabled,
body.woocommerce-page button.button:disabled,
body.woocommerce-page button.button.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
body.woocommerce-page button.button.alt,
body.woocommerce-page a.button.alt,
body.woocommerce-page input.button.alt { background: var(--green); }

/* WooCommerce's own hover for `.button.alt` is `.woocommerce button.button.alt:hover`
   at (0,4,1). Ours was (0,3,2), so the button went purple the moment it was
   hovered. Element plus class list makes this (0,4,2) and wins on specificity
   rather than on whichever stylesheet happens to print last. */
body.woocommerce-page a.button.alt:hover,
body.woocommerce-page button.button.alt:hover,
body.woocommerce-page input.button.alt:hover {
  color: #fff;
  background: #26490b;
}

/* ---------- Notices ---------- */

body .woocommerce-message,
body .woocommerce-info,
body .woocommerce-error {
  margin: 0 0 20px;
  padding: 14px 18px;
  color: var(--ink);
  background: var(--cream);
  border: 0;
  border-left: 5px solid var(--green);
  border-radius: var(--radius-sm);
  list-style: none;
}
body .woocommerce-error { border-left-color: #b3261e; }
body .woocommerce-message::before,
body .woocommerce-info::before,
body .woocommerce-error::before { display: none; }

/* ---------- Tabs ----------
   The description panel carries the refund policy; the tab strip is WooCommerce
   chrome from a different design language. Panel stays, strip goes. */

body.woocommerce-page div.product .woocommerce-tabs ul.tabs { display: none; }
body.woocommerce-page div.product .woocommerce-tabs .panel {
  margin: 28px 0 0;
  padding: 20px 0 0;
  border-top: 1px solid var(--line);
}

/* ---------- Shop ---------- */

body.woocommerce-page ul.products li.product { text-align: left; }
body.woocommerce-page ul.products li.product a img { border-radius: var(--radius-sm); }
body.woocommerce-page .woocommerce-result-count,
body.woocommerce-page .woocommerce-ordering { margin-bottom: 18px; }

/* ---------- Cart ---------- */

body.woocommerce-page table.cart { width: 100%; border-collapse: collapse; }
body.woocommerce-page table.cart th {
  padding: 10px 12px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border-bottom: 2px solid var(--line);
}
body.woocommerce-page table.cart td {
  padding: 14px 12px;
  vertical-align: middle;
  border-bottom: 1px solid var(--line);
}
body.woocommerce-page table.cart img { width: 64px; height: auto; border-radius: 8px; }
/* Tickets have no photograph. WooCommerce's grey placeholder in the thumbnail
   column reads as a product image that failed to load. */
body.woocommerce-page table.cart img[src*="woocommerce-placeholder"] { display: none; }
body.woocommerce-page .cart-collaterals .cart_totals { width: 100%; float: none; }
body.woocommerce-page .cart_totals h2 { font-size: 1.3rem; }

/* The Update button says what the change already said. cart.js submits the form
   when a quantity changes, so this is the click it replaces — and the cart is
   reachable but not a step on this store: add-to-cart goes straight to checkout. */
body.woocommerce-page .woocommerce-cart-form .actions button[name="update_cart"] { display: none; }

/* ---------- Checkout ---------- */

body.woocommerce-page form .form-row input.input-text,
body.woocommerce-page form .form-row textarea,
body.woocommerce-page form .form-row select {
  padding: 12px 14px;
  font-size: 1rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
body.woocommerce-page form .form-row label {
  font-size: 0.9rem;
  font-weight: 600;
}
body.woocommerce-page form .form-row .required { color: var(--pink); }


/* Links inside the card's own copy — the refund policy and the bullets — are
   body text, not interface chrome, so they take the accessible pink. */
.ticket__intro a,
.ticket__more a { color: var(--pink-text); }
.ticket__intro a:hover,
.ticket__more a:hover { color: var(--pink); }

/* ============================================================
   Checkout
   ------------------------------------------------------------
   This page renders through page.php, so it arrives wrapped in
   `.post__content` — which is Hugo's prose container, with its own table
   styling, its own heading sizes and a centred page head. Everything below
   either undoes that or styles WooCommerce's markup, which is a 2012 form.
   ============================================================ */

body.woocommerce-checkout .page-head { text-align: left; margin: 0 0 24px; }
body.woocommerce-checkout .page-head__title {
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

body.woocommerce-checkout .post__content { font-size: 17px; }

body.woocommerce-checkout .woocommerce h3 {
  margin: 28px 0 14px;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* Two columns for the name pair, one for anything that needs the width. */
body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
body.woocommerce-checkout .form-row { margin: 0; padding: 0; }
/* WooCommerce floats the first and last name at 47% each. Left as floats
   inside the grid they sat at opposite edges of the row with a field's width
   of nothing between them. The grid decides the width now. */
body.woocommerce-checkout .form-row-first,
body.woocommerce-checkout .form-row-last {
  float: none;
  width: auto;
  overflow: visible;
}
body.woocommerce-checkout .form-row-wide { grid-column: 1 / -1; }

body.woocommerce-checkout .woocommerce form .form-row label {
  display: block;
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
}
body.woocommerce-checkout .woocommerce form .form-row .required { color: var(--pink-text); }

body.woocommerce-checkout .woocommerce form .form-row input.input-text,
body.woocommerce-checkout .woocommerce form .form-row textarea,
body.woocommerce-checkout .woocommerce form .form-row select {
  width: 100%;
  height: 46px;
  padding: 0 14px;
  font-size: 16px;
  color: var(--ink);
  background: var(--paper);
  /* #ece7d8 is 1.2:1 on white — an input you cannot see until you are in it.
     This is 3.4:1, which clears the 3:1 a control's own boundary needs. */
  border: 1px solid #8f8b80;
  border-radius: 10px;
}
body.woocommerce-checkout .woocommerce form .form-row input.input-text:focus,
body.woocommerce-checkout .woocommerce form .form-row textarea:focus,
body.woocommerce-checkout .woocommerce form .form-row select:focus {
  border-color: var(--ink);
  outline: none;
}

/* ---- Order summary ---- */

body.woocommerce-checkout .post__content table.shop_table {
  margin: 0;
  border: 0;
  border-radius: 0;
  border-collapse: collapse;
}
body.woocommerce-checkout .post__content table.shop_table thead th {
  padding: 0 0 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: none;
  text-align: left;
}
body.woocommerce-checkout .post__content table.shop_table td,
body.woocommerce-checkout .post__content table.shop_table th {
  padding: 14px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  text-align: left;
}
body.woocommerce-checkout .post__content table.shop_table td:last-child,
body.woocommerce-checkout .post__content table.shop_table th:last-child { text-align: right; }
body.woocommerce-checkout .post__content table.shop_table tbody tr:last-child td { border-bottom: 0; }
body.woocommerce-checkout .post__content table.shop_table .product-name { width: 60%; }
body.woocommerce-checkout .post__content table.shop_table .product-total { white-space: nowrap; }
body.woocommerce-checkout .post__content table.shop_table dl.variation { margin: 4px 0 0; }
body.woocommerce-checkout .post__content table.shop_table dl.variation dt,
body.woocommerce-checkout .post__content table.shop_table dl.variation dd {
  display: inline;
  margin: 0;
  font-size: 14px;
  color: var(--ink-soft);
}
/* "Visit date:October 23, 2026" — the paragraph inside the dd is a block, so the
   whitespace between the two halves collapsed away. */
body.woocommerce-checkout .post__content table.shop_table dl.variation dd { margin-left: 4px; }
body.woocommerce-checkout .post__content table.shop_table dl.variation dd p {
  display: inline;
  margin: 0;
}
body.woocommerce-checkout .post__content table.shop_table .cart-subtotal th,
body.woocommerce-checkout .post__content table.shop_table .cart-subtotal td,
body.woocommerce-checkout .post__content table.shop_table .order-total th,
body.woocommerce-checkout .post__content table.shop_table .order-total td {
  font-size: 15px;
  border-top: 1px solid var(--line);
}
body.woocommerce-checkout .post__content table.shop_table .order-total td {
  font-size: 22px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ---- Payment ---- */

body.woocommerce-checkout #payment {
  margin-top: 24px;
  padding: 0;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
}
body.woocommerce-checkout #payment ul.payment_methods {
  padding: 0;
  border-bottom: 0;
  list-style: none;
}
body.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method {
  padding: 16px 18px;
  border-top: 1px solid var(--line);
}
body.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method:first-child { border-top: 0; }
body.woocommerce-checkout #payment ul.payment_methods li label { font-size: 16px; font-weight: 600; }
body.woocommerce-checkout #payment ul.payment_methods li input.input-radio { accent-color: var(--green); }
body.woocommerce-checkout #payment div.payment_box {
  margin: 10px 0 0;
  padding: 12px 14px;
  font-size: 14px;
  color: var(--ink-soft);
  background: #f6f4ee;
  border-radius: 8px;
}
body.woocommerce-checkout #payment div.payment_box::before { display: none; }
body.woocommerce-checkout #payment div.form-row.place-order { padding: 18px; }
/* Shown above Place Order while CCAvenue is selected. The order status is
   written when the browser comes back from the gateway, so the customer has to
   bring this tab back; the inline script hides the box for any other gateway. */
body.woocommerce-checkout #payment .pgf-checkout-note {
  margin: 0 0 14px;
  padding: 12px 14px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--ink);
  background: #ffdbeb;
  border: 2px solid var(--pink);
  border-radius: 8px;
}
/* English and Hindi run as one line, a middot between them; the line wraps on
   narrow screens, so the box stays two lines at most. */
body.woocommerce-checkout #payment .pgf-checkout-note span[lang="hi"]::before { content: " · "; }
body.woocommerce-checkout #payment #place_order {
  width: 100%;
  height: 50px;
  border-radius: 12px;
  font-size: 17px;
  font-weight: 600;
}

/* The summary's Subtotal row, hidden when it repeats the Total. The class is set
   in functions.php only while the two figures are equal. The total then takes
   the rule the item row already draws, instead of drawing a second one above
   itself. */
body.pgf-totals-equal .woocommerce-checkout-review-order-table tr.cart-subtotal { display: none; }
body.pgf-totals-equal .woocommerce-checkout-review-order-table tr.order-total th,
body.pgf-totals-equal .woocommerce-checkout-review-order-table tr.order-total td { border-top: 0; }

/* The note printed under a failed order's notice (functions.php). WooCommerce's
   message names the bank and the gateway; this names the farm. The links take
   the darker pink so small text keeps its contrast on white. */
body.woocommerce-order-received .pgf-payment-failed-help {
  margin: 0 0 28px;
  color: var(--ink);
}
body.woocommerce-order-received .pgf-payment-failed-help a { color: var(--pink-text); }

/* ============================================================
   Order received — the day pass
   ------------------------------------------------------------
   The customer screenshots this page and shows it at the ticket
   counter, so the page is one card and nothing else: pass number,
   visit date, guest, and the two counts the counter reads, torn
   off from the rest by a perforation. WooCommerce's order table
   and customer details are not rendered at all (the template
   stops them), which is why nothing here needs to hide a table.

   The card is cream on white so the screenshot keeps a visible
   edge, and the only saturated surfaces are the brand band and
   the total. Everything else is hairlines, the way the ticket
   card on the product page is built.
   ============================================================ */

body.woocommerce-order-received .woocommerce-order { margin: 0; }

body.woocommerce-order-received .pass {
  max-width: 760px;
  margin: 0 auto;
  overflow: hidden;
  /* The card's paper is plain white; the marigold (#fdb100) is kept for the
     footer band and carried by the hairlines, the perforation and the border.
     Scoped to the card so the rest of the site keeps its cream. */
  --pass-paper: #faf7ef;
  --pass-foot: #fdb100;
  --pass-line: #feda85;
  --pass-tear: #feca52;
  --pass-band-text: #fed473;
  background: var(--pass-paper);
  border: 1px solid var(--pass-line);
  border-radius: 18px;
  /* Same two layers as the ticket card: 1px of contact, and a wide soft one
     that lifts the card without announcing itself. */
  box-shadow:
    0 1px 2px rgba(34, 34, 34, 0.05),
    0 14px 34px rgba(34, 34, 34, 0.10);
}

/* ---------- Band ---------- */

body.woocommerce-order-received .pass__band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  /* One line on a paid pass, so the band is shallower than it was when it
     carried a "Day Picnic Pass" title under the wordmark. */
  padding: 15px 28px;
  background: var(--green);
  color: var(--pass-band-text);
}
body.woocommerce-order-received .pass__brand {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pass-band-text);
}

/* ---------- Pass number, date, guest ---------- */

body.woocommerce-order-received :is(.pass__ident, .pass__guest, .pass__stub) { margin: 0; }

body.woocommerce-order-received .pass__ident,
body.woocommerce-order-received .pass__guest,
body.woocommerce-order-received .pass__stub {
  display: grid;
  gap: 22px;
}
body.woocommerce-order-received .pass__ident { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); padding: 24px 28px 0; }
body.woocommerce-order-received .pass__guest { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 20px 28px 30px; }

/* The hairline between the two halves of a row. Drawn on the second cell so
   the first one keeps its alignment with the band above it. */
body.woocommerce-order-received :is(.pass__ident, .pass__guest, .pass__stub) > div + div {
  padding-left: 22px;
  border-left: 1px solid var(--pass-line);
}

body.woocommerce-order-received .pass__label {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
body.woocommerce-order-received dd { margin: 0; }

body.woocommerce-order-received .pass__no {
  font-size: 34px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
body.woocommerce-order-received .pass__date {
  font-family: var(--font-head);
  font-size: 25px;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
body.woocommerce-order-received .pass__name,
body.woocommerce-order-received .pass__phone {
  font-size: 21px;
  font-weight: 600;
  line-height: 1.2;
}
body.woocommerce-order-received .pass__phone { font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }

/* ---------- Perforation ---------- */

/* The two notches are the page colour drawn over the card at each end of the
   dashed rule; `overflow: hidden` on the card clips them to a semicircle. */
body.woocommerce-order-received .pass__tear {
  position: relative;
  height: 0;
  border-top: 2px dashed var(--pass-tear);
}
body.woocommerce-order-received .pass__tear span {
  position: absolute;
  top: -16px;
  width: 32px;
  height: 32px;
  background: var(--paper);
  border-radius: 50%;
}
body.woocommerce-order-received .pass__tear span:first-child { left: -17px; }
body.woocommerce-order-received .pass__tear span:last-child { right: -17px; }

/* ---------- Stub: the numbers the counter reads ---------- */

body.woocommerce-order-received .pass__stub {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.1fr);
  padding: 26px 28px 28px;
}
/* Number first in the markup, label under it. */
body.woocommerce-order-received .pass__stub .pass__label { margin: 2px 0 0; }
body.woocommerce-order-received .pass__n {
  margin: 0 0 2px;
  font-size: 60px;
  font-weight: 700;
  /* `normal`, not a fixed ratio: anything tighter than the glyphs makes the
     saved-image renderer draw the label on top of the number. Sits ~6px taller
     than the old 0.95 and looks the same. */
  line-height: normal;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
body.woocommerce-order-received .pass__paid {
  margin: 0 0 2px;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--pink-text);
  font-variant-numeric: tabular-nums;
}

/* ---------- Foot ---------- */

body.woocommerce-order-received .pass__foot {
  padding: 15px 28px 17px;
  border-top: 1px solid var(--pass-foot);
  /* The brand marigold itself, at full strength: the footer is the one band of
     the card that wears the primary colour rather than a tint of it. The note
     text steps up to the ink to keep its contrast on the deeper gold. */
  background: var(--pass-foot);
}
body.woocommerce-order-received .pass__also {
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--ink);
}
body.woocommerce-order-received .pass__note {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink);
}
body.woocommerce-order-received .pass__note strong { color: var(--ink); }

/* A paid pass carries its barcode, so the foot becomes two columns: the note,
   and the code. The white box around the code is the barcode's quiet zone —
   scanners need a light margin on every side of the bars. */
body.woocommerce-order-received .pass__foot--code {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
body.woocommerce-order-received .pass__foot-text { min-width: 0; }
body.woocommerce-order-received .pass__code {
  flex: none;
  padding: 8px 10px 6px;
  text-align: center;
  background: #fff;
  border-radius: 6px;
}
body.woocommerce-order-received .pass__code svg {
  display: block;
  max-width: 100%;
  height: auto;
}
body.woocommerce-order-received .pass__code span {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

/* The page still fires `woocommerce_thankyou` — the Meta pixel and the
   abandoned-cart cleanup both listen to it — and the booking plugin listens to
   the same hook to print its own "Booking Date" heading under the pass. The
   pass already carries that date in the stub, so the duplicate is hidden here
   and only here. Display only: the plugin's storage, validation, email and
   admin column are untouched. */
body.woocommerce-order-received .woocommerce-order > h2,
body.woocommerce-order-received .woocommerce-order > h2 + p { display: none; }

/* The site's floating Call Now / Book Now pills are fixed to the bottom-left
   of the viewport. On the pass they sit over the very numbers the counter is
   being shown, and a screenshot keeps them. They are navigation, not part of
   the order, so this one page drops them. */
body.woocommerce-order-received .floating-actions { display: none; }

/* ---------- Narrow screens ----------
   The card keeps its two-up rows and the type steps down, so the pass stays
   one phone screen tall — which is where the screenshot is usually taken. */
@media (max-width: 620px) {
  body.woocommerce-order-received .pass__band { padding: 13px 18px; }
  body.woocommerce-order-received .pass__brand { font-size: 13px; letter-spacing: 0.13em; }

  body.woocommerce-order-received .pass__ident { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 14px; padding: 16px 18px 0; }
  body.woocommerce-order-received .pass__guest { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; padding: 14px 18px 20px; }
  /* The rows stay two-up, as on the desktop card, and only the type steps down.
     Stacking them (which is what the pass did before it carried a barcode) put
     ~170px on the card and pushed the barcode off a phone screen — and the
     counter needs the barcode and the counts in the same screenshot. */
  body.woocommerce-order-received :is(.pass__ident, .pass__guest) > div + div {
    padding-left: 14px;
    border-left: 1px solid var(--pass-line);
    border-top: 0;
  }
  body.woocommerce-order-received .pass__no { font-size: 25px; }
  body.woocommerce-order-received .pass__date { font-size: 17px; line-height: 1.35; }
  body.woocommerce-order-received .pass__name,
  body.woocommerce-order-received .pass__phone { font-size: 16px; }

  body.woocommerce-order-received .pass__stub {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    padding: 18px 18px 18px;
  }
  body.woocommerce-order-received .pass__stub > div + div { padding-left: 16px; }
  body.woocommerce-order-received .pass__stub > div:last-child {
    grid-column: 1 / -1;
    padding: 14px 0 0;
    border-left: 0;
    border-top: 1px solid var(--pass-line);
  }
  body.woocommerce-order-received .pass__n { font-size: 46px; }
  body.woocommerce-order-received .pass__paid { font-size: 24px; }

  body.woocommerce-order-received .pass__foot { padding: 13px 18px 15px; }
  body.woocommerce-order-received .pass__note { font-size: 13px; }
  /* The barcode needs the full card width to keep its bars fat enough to scan,
     so it drops below the note instead of sitting beside it. */
  body.woocommerce-order-received .pass__foot--code {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
  body.woocommerce-order-received .pass__code { align-self: center; }
}

/* ---------- Print / save as PDF ----------
   The guest may print the pass at home instead of screenshotting it. On paper
   the page is the card and nothing else: the site's header, footer, page title
   and the print button itself are dropped, the card takes the printable width,
   and backgrounds are forced to print (marigold card, green band) because browsers
   leave them white by default. The barcode is inline SVG, so it stays sharp at
   any size. */

body.woocommerce-order-received .pass__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  max-width: 760px;
  margin: 18px auto 0;
}
body.woocommerce-order-received .pass__print,
body.woocommerce-order-received .pass__save {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 46px;
  padding: 0 22px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  color: var(--ink);
  background: transparent;
  border: 2px solid var(--ink);
  border-radius: 999px;
  cursor: pointer;
}
body.woocommerce-order-received .pass__print:hover,
body.woocommerce-order-received .pass__save:hover {
  color: #fff;
  background: var(--ink);
}
body.woocommerce-order-received .pass__print svg,
body.woocommerce-order-received .pass__save svg {
  width: 18px;
  height: 18px;
}
/* Rendering the PNG can take a moment on a phone; a disabled pill says so. */
body.woocommerce-order-received .pass__save[disabled] {
  opacity: 0.55;
  cursor: progress;
}

@media print {
  @page {
    size: A4 portrait;
    margin: 14mm;
  }

  /* Backgrounds are part of the pass — a white page with white text in the
     band would be worse than the ink. */
  body.woocommerce-order-received,
  body.woocommerce-order-received * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  body.woocommerce-order-received {
    background: #fff;
  }

  /* Everything that is site chrome, not the pass. */
  body.woocommerce-order-received .site-header,
  body.woocommerce-order-received .site-footer,
  body.woocommerce-order-received .floating-actions,
  body.woocommerce-order-received .skip-link,
  body.woocommerce-order-received .page-head,
  body.woocommerce-order-received .divider,
  body.woocommerce-order-received .pass__actions {
    display: none !important;
  }

  body.woocommerce-order-received .main,
  body.woocommerce-order-received .container,
  body.woocommerce-order-received .post__content {
    margin: 0;
    padding: 0;
    max-width: none;
  }

  body.woocommerce-order-received .pass {
    max-width: none;
    width: 100%;
    margin: 0;
    border-radius: 4mm;
    /* The wide soft shadow is a screen effect; on paper it prints as a grey
       smear around the card. */
    box-shadow: none;
    break-inside: avoid;
    page-break-inside: avoid;
  }
}