/* ===========================================================
   PRODUCT PAGE
   Loaded after home.css, so anything shared is already in.
   =========================================================== */

/* --- the two-column top ----------------------------------- */
.hh-pdp { padding-block: var(--hh-s5) var(--hh-s8); }   /* 32, matching the category page */
.hh-pdp__inner {
  display: grid;
  /* The gallery column is exactly as wide as the square stage; everything
     the viewport does not need for the picture goes to the buy column. */
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "gallery head" "gallery buy";
  grid-template-rows: auto 1fr;
  gap: var(--hh-s4) var(--hh-s7);
  align-items: start;
}
.hh-pdp__head    { grid-area: head; }
.hh-pdp__gallery { grid-area: gallery; }
.hh-pdp__buy     { grid-area: buy; }

/* --- gallery ---------------------------------------------- */
/* A SQUARE, SIZED BY HEIGHT. A square as wide as half the page put the
   bottom of the product below a laptop's fold; a wide box the height of
   the viewport left a thin cigar in a field of cream. This is the square,
   sized by what the viewport has left under the chrome (34 + 84 + 52) and
   the section padding — 196px, now the breadcrumb lives in the buy column
   rather than in a row of its own — plus 8px so the frame never sits dead
   on the viewport edge. So the PICTURE always fits.
   The thumbnail row is deliberately not in that budget: the image gets the
   height, and the thumbnails may sit just under the fold. The column beside
   it gets the width. */
/* …and never more than 46vw, so a short, narrow laptop (1024×768) still
   leaves the buy column room to breathe. At 1440 wide the height wins. */
/* THE SQUARE IS SIZED BY THE FOLD: 252px is the chrome, the breadcrumb row
   and the section padding, and the picture takes everything under that. The
   thumbnail row is not in the budget. 46vw stops a short, narrow laptop
   squeezing the buy column; 680 is a sanity cap for a tall monitor.

   The page sits on the site's own container, full width. A narrower
   container built from the picture was tried and rejected (Will, 23 Oct:
   "I don't like the restricted width"). The width beside a height-sized
   square goes to a vertical thumbnail rail; the buy column takes the rest. */
:root { --hh-stage: clamp(380px, min(calc(100svh - 252px), 46vw), 680px); }
.hh-pdp__stage {
  --pad: var(--hh-s5);
  position: relative; overflow: hidden;
  width: var(--hh-stage); height: var(--hh-stage);
  border: 1px solid var(--hh-line);
  background: radial-gradient(120% 95% at 50% 42%, #fcfbf8 0%, var(--hh-surface-3) 55%, #eeeae0 100%);
}
/* One photograph, standing up — that is how a cigar is shown and how a
   buyer expects to see one. The stage is height-driven, so the cigar is as
   tall as the viewport allows rather than as tall as half the page is
   wide. The two detail views are the SAME file scaled to the stage width
   and windowed with object-position: the band sits a quarter of the way
   down the cut-out, the foot at the bottom. */
/* `.hh-pdp__stage .hh-pdp__img`, not `.hh-pdp__img`: WooCommerce's stock
   stylesheet sets `.woocommerce img { height: auto }` at (0,1,1), which
   would otherwise beat the class alone and let a 208×2560 cut-out run to
   its natural height. */
.hh-pdp__stage .hh-pdp__img {
  position: absolute;
  top: var(--pad); left: var(--pad);
  width: calc(100% - var(--pad) * 2); height: calc(100% - var(--pad) * 2);
  object-fit: contain; object-position: 50% 50%;
  /* A photo on white sits on the tinted stage as a white box; multiply
     drops the white into the stage and leaves the cigar. Cut-outs with
     transparency are unaffected. */
  mix-blend-mode: multiply;
  /* No drop-shadow. It was written for a cut-out, where it traces the
     cigar; on the live photography — pure-white studio shots, measured at
     255 to the corners — it traces the photo's rectangle and draws a
     second, lighter panel inside the stage. Multiply alone makes the two
     one surface. (23 Oct 2026) */
}
.hh-pdp__stage[data-view="band"] .hh-pdp__img,
.hh-pdp__stage[data-view="foot"] .hh-pdp__img { object-fit: cover; }
.hh-pdp__stage[data-view="band"] .hh-pdp__img { object-position: 50% 25%; }
.hh-pdp__stage[data-view="foot"] .hh-pdp__img { object-position: 50% 100%; }

.hh-pdp__flag {
  position: absolute; top: var(--hh-s5); left: var(--hh-s5);
  margin: 0; padding: 6px var(--hh-s3);
  background: var(--hh-ink); color: var(--hh-gold-300);
  font-size: var(--hh-t-xxs); letter-spacing: .12em; text-transform: uppercase;
}
.hh-pdp__caption {
  position: absolute; left: var(--hh-s5); bottom: var(--hh-s4); margin: 0;
  font-size: var(--hh-t-xxs); letter-spacing: .08em; text-transform: uppercase;
  color: var(--hh-ink-500);
}

/* THE THUMBNAILS SIT INSIDE THE STAGE. An 80px rail beside a height-sized
   square cost 92px of the buy column on every product and drew the eye
   with two white boxes before the cigar. Most products have two images.
   Now they stand in the stage's bottom-left corner, where the photo is
   white and nothing is lost behind them, 52px each, and the gallery is the
   square alone. On a phone they go back to a row under the stage, where a
   thumb would otherwise sit under the thumb that taps it. (23 Oct 2026) */
.hh-pdp__gallery {
  position: relative;
  display: grid; grid-template-columns: var(--hh-stage);
  gap: var(--hh-card-gap); align-items: start;
}
.hh-pdp__thumbs {
  position: absolute; left: var(--hh-s4); bottom: var(--hh-s4); z-index: 1;
  display: flex; flex-direction: column; gap: 6px;
}
.hh-pdp__thumb {
  flex: 0 0 auto; width: 52px; aspect-ratio: 1; padding: 0; overflow: hidden;
  background: #fff; border: 1px solid var(--hh-line);
  cursor: pointer;
}
.hh-pdp__thumb.is-on { border-color: var(--hh-ink); box-shadow: inset 0 0 0 1px var(--hh-ink); }
.hh-pdp__thumb:focus-visible { outline: 2px solid var(--hh-gold-750); outline-offset: 2px; }
.hh-pdp__thumb img { width: 100%; height: 100%; object-fit: cover; }
.hh-pdp__thumb[data-view="full"] img { object-fit: contain; padding: 6px; }
.hh-pdp__thumb[data-view="band"] img { object-position: 50% 25%; }
.hh-pdp__thumb[data-view="foot"] img { object-position: 50% 100%; }

/* --- the column: what this is, then buy it -------------------- */
/* One composition. Three things carry weight — the name, the price, the
   button — and everything else is quiet text in one voice, with a single
   rule between "what this is" and "buy it". The column is 560px because the
   page container is built to make it so (see the stage, above). */
.hh-pdp__head .hh-eyebrow { margin: 0 0 10px; }
.hh-pdp__title {
  font-family: var(--hh-font-display);
  /* 24 -> 32px, not 28 -> 44. The prototype's name was "RC No. 7"; the
     real catalogue's cigar names run to a median of 34 characters and a
     tenth of them past 50, and Capstone is a wide face — at 44px
     "Intemperance BA XXI Breach of the Peace Cigar" was three lines and
     the tallest thing on the screen. At 32px it is two, and the price
     and the buy column come back into the fold. (23 Oct 2026) */
  font-size: clamp(1.5rem, 1.15rem + 1.1vw, 2rem);
  font-weight: 500; line-height: 1.1; letter-spacing: var(--hh-ls-head);
  text-wrap: balance;
  margin: 0 0 var(--hh-s3);
}
.hh-pdp__price {
  margin: 0 0 var(--hh-s4);
  display: flex; align-items: baseline; gap: var(--hh-s3); flex-wrap: wrap;
  font-size: var(--hh-t-h3); font-weight: 600; font-variant-numeric: tabular-nums;
}
.hh-pdp__per { font-size: var(--hh-t-sm); font-weight: 400; color: var(--hh-ink-500); }
.hh-pdp__sub { margin: 0 0 var(--hh-s4); max-width: 60ch; font-size: 15px; line-height: 1.6; color: var(--hh-ink-700); }
@media (min-width: 1360px) {
  .hh-pdp__sub { font-size: 16px; }
  .hh-pdp__price { font-size: 1.75rem; }
}

/* One line of specification: the meter, then vitola, size, time. */
.hh-pdp__specline {
  margin: 0; display: flex; flex-wrap: wrap; align-items: center;
  font-size: var(--hh-t-sm); color: var(--hh-ink-600);
}
/* .hh-pdp__fact, not .hh-pdp__spec — that name belongs to the Specification
   panel below. */
.hh-pdp__fact { display: inline-flex; align-items: center; }
.hh-pdp__fact + .hh-pdp__fact::before { content: "\00b7"; margin: 0 10px; color: var(--hh-ink-400); }
.hh-pdp__specline .hh-strength__label { margin-left: 2px; color: var(--hh-ink-600); font-size: var(--hh-t-sm); letter-spacing: 0; }

.hh-pdp__buy {
  display: flex; flex-direction: column; gap: var(--hh-s5);
  padding-top: var(--hh-s5); border-top: 1px solid var(--hh-line);
}

/* --- format options ---------------------------------------- */
/* Two to a row, equal, the width of the column: an option is a decision,
   so it gets a tile, not a tag. Classed hh-opt, not hh-tile — that name
   belongs to the homepage category tiles, and their white uppercase
   styling landed on these for one build. */
.hh-pdp__formats { border: 0; padding: 0; margin: 0; }
.hh-pdp__formats legend { margin-bottom: var(--hh-s2); }
.hh-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--hh-card-gap); }
.hh-opt { position: relative; display: block; cursor: pointer; }
.hh-opt input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.hh-opt__box {
  display: flex; align-items: center; justify-content: space-between; gap: var(--hh-s3);
  min-height: 56px; padding: 10px 18px;
  border: 1px solid var(--hh-line); background: #fff;
  transition: background var(--hh-fast) var(--hh-ease), color var(--hh-fast) var(--hh-ease), border-color var(--hh-fast) var(--hh-ease);
}
.hh-opt__name { display: flex; flex-direction: column; gap: 2px; font-size: 15px; font-weight: 500; line-height: 1.2; }
.hh-opt__name small { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--hh-ink-500); font-weight: 400; }
.hh-opt__price { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hh-opt:hover .hh-opt__box { border-color: var(--hh-ink-400); }
.hh-opt input:checked + .hh-opt__box { background: var(--hh-ink); border-color: var(--hh-ink); color: #fff; }
.hh-opt input:checked + .hh-opt__box .hh-opt__name small { color: var(--hh-ink-300); }
/* Focus has to live on the box, because the input it belongs to is invisible. */
.hh-opt input:focus-visible + .hh-opt__box { outline: 2px solid var(--hh-gold-750); outline-offset: 2px; }
.hh-opt.is-out .hh-opt__box { color: var(--hh-ink-500); background: var(--hh-surface-2); }
.hh-opt.is-out input:checked + .hh-opt__box { background: var(--hh-ink-700); border-color: var(--hh-ink-700); color: #fff; }

/* The link variant, for the theme. Single and box are separate products at
   separate URLs joined by a family term (inc/product-family.php), so a
   format tile is NAVIGATION: an <a>, the current one marked. Same box, same
   states; only what makes a tile "chosen" differs. */
.hh-opt--link { text-decoration: none; color: inherit; }
.hh-opt--link.is-current .hh-opt__box { background: var(--hh-ink); border-color: var(--hh-ink); color: #fff; }
.hh-opt--link.is-current .hh-opt__name small { color: var(--hh-ink-300); }
.hh-opt--link.is-out.is-current .hh-opt__box { background: var(--hh-ink-700); border-color: var(--hh-ink-700); }
.hh-opt--link:focus-visible { outline: 2px solid var(--hh-gold-750); outline-offset: 2px; }

/* The theme renders Woo's quantity input inside our stepper; give it the
   same box whatever class Woo put on it. */
.hh-qty input.qty { width: 44px; border: 0; text-align: center; font: inherit; font-variant-numeric: tabular-nums; -moz-appearance: textfield; }

/* --- delivery: above the button, weight from type ----------- */
/* One line: the day it lands, then the cutoff, a dot between. On a phone
   the cutoff wraps under the day. */
.hh-pdp__delivery { display: flex; align-items: center; gap: var(--hh-s3); margin: 0; }
.hh-pdp__delivery .hh-icon { width: 22px; height: 22px; color: var(--hh-gold-750); flex: 0 0 auto; }
.hh-pdp__delivery-txt { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; row-gap: 2px; line-height: 1.3; min-width: 0; }
.hh-pdp__delivery-lead { font-size: var(--hh-t-base); font-weight: 600; color: var(--hh-ink); }
.hh-pdp__delivery-sub { font-size: var(--hh-t-sm); color: var(--hh-ink-600); }
.hh-pdp__delivery-sub::before { content: "\00b7"; margin-right: 8px; color: var(--hh-ink-400); }
.hh-pdp__delivery-sub b { font-weight: 600; color: var(--hh-ink); }

/* --- actions ---------------------------------------------- */
.hh-pdp__actions { display: flex; gap: var(--hh-card-gap); margin: 0; }
.hh-qty { display: flex; align-items: stretch; border: 1px solid var(--hh-line); }
.hh-qty__btn {
  width: 40px; border: 0; background: none; cursor: pointer;
  font-size: 1rem; color: var(--hh-ink);
}
.hh-qty__btn:hover { background: var(--hh-surface-2); }
.hh-qty__in {
  width: 44px; border: 0; text-align: center; font: inherit;
  font-variant-numeric: tabular-nums; -moz-appearance: textfield;
}
.hh-qty__in::-webkit-outer-spin-button,
.hh-qty__in::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.hh-pdp__add { flex: 1; min-height: 54px; padding-block: 0; font-size: var(--hh-t-sm); letter-spacing: .12em; }

.hh-pdp__notify {
  margin: 0; padding: var(--hh-s4);
  background: var(--hh-surface-3); border: 1px solid var(--hh-line);
}
.hh-pdp__notify p { margin: 0 0 var(--hh-s3); font-size: var(--hh-t-sm); }
.hh-pdp__notifyrow { display: flex; gap: var(--hh-card-gap); }
.hh-pdp__notifyrow input {
  flex: 1; min-width: 0; padding: 0 var(--hh-s4);
  border: 1px solid var(--hh-line); background: #fff; font: inherit;
}

/* --- the service detail, folded ----------------------------- */
.hh-pdp__accs { border-top: 1px solid var(--hh-line); }
.hh-pdp__acc { border-bottom: 1px solid var(--hh-line); }
.hh-pdp__acc summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--hh-s3);
  padding: 15px 0; cursor: pointer; list-style: none;
  font-size: var(--hh-t-sm); font-weight: 500; color: var(--hh-ink);
}
.hh-pdp__acc summary::-webkit-details-marker { display: none; }
.hh-pdp__acc summary .hh-icon { width: 14px; height: 14px; color: var(--hh-ink-500); flex: 0 0 auto; transition: transform var(--hh-fast) var(--hh-ease); }
.hh-pdp__acc[open] summary .hh-icon { transform: rotate(180deg); }
.hh-pdp__acc-body { padding: 0 0 var(--hh-s4); font-size: var(--hh-t-sm); line-height: 1.6; color: var(--hh-ink-600); max-width: 56ch; }
.hh-pdp__acc-body p { margin: 0 0 8px; }
.hh-pdp__acc-body p:last-child { margin-bottom: 0; }
.hh-pdp__acc-body a { color: var(--hh-ink-700); }
.hh-pdp__acc-body b { font-weight: 600; color: var(--hh-ink); }

/* --- description + spec ----------------------------------- */
.hh-pdp__detailin {
  display: grid; grid-template-columns: 1.25fr 1fr;
  gap: clamp(var(--hh-s7), 5vw, var(--hh-s9));
  align-items: start;
}
.hh-pdp__copy p { max-width: 62ch; }
.hh-notes {
  list-style: none; margin: 0 0 var(--hh-s6); padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--hh-s2);
}
.hh-notes li {
  border: 1px solid var(--hh-line); padding: 6px var(--hh-s3);
  font-size: var(--hh-t-xs); color: var(--hh-ink-700);
}
.hh-pdp__strength { display: flex; align-items: center; gap: var(--hh-s4); }
.hh-pdp__spec { background: var(--hh-surface-3); padding: var(--hh-s6); }
.hh-pdp__spec .hh-spec { grid-template-columns: 1fr; }
.hh-pdp__spec .hh-spec dt { white-space: nowrap; }
.hh-pdp__spec .hh-label { display: block; margin: var(--hh-s5) 0 var(--hh-s3); }
.hh-pdp__care { margin: 0; font-size: var(--hh-t-sm); color: var(--hh-ink-600); }
/* --- pairings --------------------------------------------- */
.hh-pairs {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--hh-card-gap);
  grid-template-columns: repeat(3, 1fr);
}
.hh-pair__link { text-decoration: none; color: inherit; display: block; }
.hh-pair__row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--hh-s3); margin-top: var(--hh-s3);
}
.hh-pair__media { background: var(--hh-surface); aspect-ratio: 1; overflow: hidden; }
.hh-pair__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hh-pair__name { font-weight: 500; margin: var(--hh-s4) 0 2px; }
.hh-pair__meta { font-size: var(--hh-t-xs); color: var(--hh-ink-500); margin: 0 0 var(--hh-s3); }
.hh-pair__why { font-size: var(--hh-t-sm); color: var(--hh-ink-600); margin: 0 0 var(--hh-s3); }
.hh-pair__price { font-weight: 600; margin: 0; }

/* --- reviews empty state ---------------------------------- */
.hh-empty {
  border: 1px solid var(--hh-line); padding: var(--hh-s7);
  text-align: center; max-width: 52ch; margin-inline: auto;
}
.hh-empty__lead { font-size: var(--hh-t-lg); font-weight: 500; margin: 0 0 var(--hh-s3); }
.hh-empty p { color: var(--hh-ink-600); margin: 0 0 var(--hh-s5); }
.hh-sechead__note { color: var(--hh-ink-500); font-size: var(--hh-t-sm); margin: var(--hh-s3) 0 0; }

/* --- sticky buy bar --------------------------------------- */
/* Phone only, and only once the real buy box has left the screen. It repeats
   the button rather than adding a second one — a phone simply loses the
   first, and this hands it back. */
.hh-pdp__bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: var(--hh-ink); color: #fff;
  border-top: 1px solid var(--hh-line-dark);
  transform: translateY(100%);
  transition: transform var(--hh-fast) var(--hh-ease);
}
.hh-pdp__bar.is-on { transform: none; }
.hh-pdp__barin {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--hh-s4);
  padding: var(--hh-s3) var(--hh-gutter);
  padding-bottom: max(var(--hh-s3), env(safe-area-inset-bottom));
}
.hh-pdp__barname { margin: 0; font-size: var(--hh-t-sm); font-weight: 500; }
.hh-pdp__barprice { margin: 0; font-size: var(--hh-t-xs); color: var(--hh-gold-300);
                    font-variant-numeric: tabular-nums; }
.hh-pdp__barper { color: var(--hh-ink-300); }
.hh-pdp__bar .hh-btn { flex: 0 0 auto; }

@media (min-width: 901px) {
  /* The buy column follows you down the description on desktop, keeping the
     price and the button in reach while you read the spec.

     It used to be free: a 4:5 gallery was always the taller column. A square
     one is not — at 1425px the gallery measures 741px against the buy
     column's 767px, so which one wins now depends on the product (name
     length, how many formats, whether there is a saving badge). Sticky is
     kept because it still does its job whenever the buy column is the
     shorter of the two, and is an inert no-op when it is not. */
  .hh-pdp__buy { position: sticky; top: var(--hh-s7); }
  .hh-pdp__bar { display: none; }
}

@media (max-width: 900px) {
  /* Name and price before the picture on a phone. The stage is shorter here
     too: a phone cannot give the gallery a screen and still show the price. */
  .hh-pdp__inner { grid-template-columns: 1fr; grid-template-areas: "head" "gallery" "buy"; gap: var(--hh-s5); }
  .hh-pdp__gallery { width: 100%; max-width: 360px; margin-inline: auto; grid-template-columns: 1fr; }
  .hh-pdp__thumbs { position: static; flex-direction: row; order: 2; gap: var(--hh-card-gap); }
  .hh-pdp__thumb { width: 64px; }
  .hh-pdp__stage { width: 100%; height: auto; aspect-ratio: 1; --pad: var(--hh-s4); }
  /* Five on a phone is three then two; the second row's first cell loses
     its divider like the first row's does. */
  .hh-pdp__detailin { grid-template-columns: 1fr; }
  .hh-pairs { grid-template-columns: 1fr; }
  .hh-pair__link { display: grid; grid-template-columns: 96px 1fr;
               gap: var(--hh-s4); align-items: center; }
  .hh-pair__name { margin-top: 0; }
  /* The sticky bar sits on top of the footer's last inch otherwise. */
  .hh-footer { padding-bottom: 88px; }
}

/* ---------------------------------------------------------------
   FORMAT SELECTOR — the link variant

   Single and box are separate products at separate URLs, joined by a shared
   family term, so the control is NAVIGATION: one link per format, the
   current one marked. That keeps every format indexable, which is why the
   catalogue is not simply converted to variations.

   The radio rules above are kept for the prototype, which still renders the
   in-page variation version. Both share .hh-fmt__box, so the two agree on
   everything except what makes a format "chosen".
   --------------------------------------------------------------- */
.hh-fmt--link {
  display: block;
  text-decoration: none;
  color: inherit;
}
.hh-fmt--link:hover .hh-fmt__box { border-color: var(--hh-ink-400); }
.hh-fmt--link.is-current .hh-fmt__box {
  border-color: var(--hh-ink);
  box-shadow: inset 0 0 0 1px var(--hh-ink);
}
/* The link IS the control, so the ring goes on the link, not on a box
   standing in for an invisible input. */
.hh-fmt--link:focus-visible {
  outline: 2px solid var(--hh-gold-750);
  outline-offset: 2px;
}
/* Out of stock is dimmed but still a link — following it is how you reach
   that format's notify form, which is the whole point of showing it. */
.hh-fmt--link.is-out .hh-fmt__box { background: var(--hh-surface-2); }
.hh-fmt--link.is-out .hh-fmt__label,
.hh-fmt--link.is-out .hh-fmt__price { color: var(--hh-ink-600); }

/* The container is a plain group now, not a fieldset — which matters more
   than it sounds. A <legend> sits outside its fieldset's formatting context;
   a <p> in the same place becomes a GRID CELL, so the label took the first
   column and pushed the formats along one. It has to span the row. */
.hh-pdp__formats > .hh-label {
  grid-column: 1 / -1;
  display: block;
  margin-bottom: 0;
}

/* ---------------------------------------------------------------
   REVIEWS

   Four things are collected per review: text, a 1-5 rating, the smoker's
   own reading of the strength, and an optional photograph. Reviews from an
   account that bought the product are marked.
   --------------------------------------------------------------- */

/* --- our stars, not Trustpilot's ---------------------------------

   The green squares in the announcement strip are Trustpilot's mark and
   carry Trustpilot's meaning. On-site reviews get gold outline stars so the
   two are never mistaken for each other. Two stacked rows, the filled one
   clipped to the score, so 4.3 draws as 4.3. */
.hh-stars { position: relative; display: inline-flex; line-height: 0; }
.hh-stars__lay { display: flex; gap: 2px; }
.hh-stars__lay .hh-icon { width: 16px; height: 16px; flex: 0 0 auto; }
.hh-stars__lay--off { color: var(--hh-ink-200); }
.hh-stars__lay--on {
  position: absolute; top: 0; left: 0; overflow: hidden;
  /* gold-750, not gold-600. The stars ARE the rating, so they are a
     meaningful graphic under WCAG 1.4.11 and owe 3:1. gold-600 measured
     2.72:1 on the summary panel; this is 4.4:1. Same token the eyebrow uses
     on light grounds — tokens.css says gold-600 has no light variant. */
  color: var(--hh-gold-750);
  /* The gaps are inside the measured width, so the clip is out by a
     fraction of a pixel at part-fills. Cheaper than a per-star mask. */
  width: calc(var(--score) / 5 * 100%);
}

/* --- the summary panel ------------------------------------------- */
.hh-revsum {
  display: grid; gap: var(--hh-s6);
  padding: var(--hh-s6); margin-bottom: var(--hh-s6);
  background: var(--hh-surface-2); border: 1px solid var(--hh-line);
}
.hh-revsum__score { display: grid; justify-items: start; gap: var(--hh-s3); }
.hh-revsum__big {
  font-family: var(--hh-font-display); font-size: 3.5rem;
  line-height: 1; margin: 0;
}
.hh-revsum__meta { font-size: var(--hh-t-sm); color: var(--hh-ink-600); margin: 0; }
.hh-revsum__score .hh-btn { margin-top: var(--hh-s3); }

.hh-revbars { list-style: none; margin: 0; padding: 0;
              display: grid; gap: var(--hh-s2); align-content: center; }
.hh-revbars li { display: grid; grid-template-columns: auto auto 1fr auto;
                 align-items: center; gap: var(--hh-s3);
                 font-size: var(--hh-t-sm); }
.hh-revbars .hh-icon { color: var(--hh-gold-750); }
.hh-revbar__track { height: 6px; background: var(--hh-ink-100); overflow: hidden; }
.hh-revbar__fill { display: block; height: 100%; width: var(--w);
                   /* 2.47:1 at gold-600. Same rule as the stars. */
                   background: var(--hh-gold-750); }
.hh-revbar__c { color: var(--hh-ink-600); min-width: 2ch; text-align: right; }

/* --- strength: theirs against ours -------------------------------

   The reason to collect a strength reading at all. Every cigar site prints
   the maker's number; printing what the people who smoked it reported is
   the part that cannot be copied without the reviews behind it. */
.hh-revstr { display: grid; gap: var(--hh-s3); align-content: center; }
.hh-revstr__row { display: flex; align-items: center; gap: var(--hh-s4); }
.hh-revstr__who { font-size: var(--hh-t-sm); color: var(--hh-ink-600);
                  min-width: 8ch; }
/* The box's reading is the reference, not the headline, so it is greyed —
   but greyed against the SAME light track it sits on made three-of-five
   read as five-of-five. The on pips need to be dark enough to count. */
.hh-revstr__row--stated .hh-strength__pip { background: var(--hh-ink-100); }
.hh-revstr__row--stated .hh-strength__pip.is-on { background: var(--hh-ink-500); }
.hh-revstr__row--stated .hh-strength__label { color: var(--hh-ink-600); }
.hh-revstr__verdict { margin: var(--hh-s2) 0 0; font-size: var(--hh-t-sm); }
.hh-revstr__verdict b { font-weight: 600; }

/* --- customer photos ---------------------------------------------- */
.hh-revphotos { margin-bottom: var(--hh-s6); }
.hh-revphotos__list {
  list-style: none; margin: var(--hh-s3) 0 0; padding: 0;
  display: flex; gap: var(--hh-s3); overflow-x: auto;
  scrollbar-width: thin;
}
.hh-revphotos__list li { flex: 0 0 120px; }

/* --- the list ----------------------------------------------------- */
.hh-revlist { list-style: none; margin: 0; padding: 0; display: grid; }
.hh-revitem { padding: var(--hh-s6) 0; border-top: 1px solid var(--hh-line); }
.hh-revitem:last-child { border-bottom: 1px solid var(--hh-line); }

.hh-revitem__head { display: flex; align-items: center; gap: var(--hh-s3); }
.hh-revitem__who {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: var(--hh-r-full);
  background: var(--hh-ink); color: var(--hh-gold-300);
  font-family: var(--hh-font-display); font-size: var(--hh-t-base);
}
.hh-revitem__name { margin: 0; font-weight: 600;
                    display: flex; align-items: center; gap: var(--hh-s3);
                    flex-wrap: wrap; }
.hh-revitem__when { margin: 0; font-size: var(--hh-t-xs); color: var(--hh-ink-600); }
.hh-revitem__fmt::before { content: "\00b7"; margin: 0 6px; }

/* Verified purchase. It is the only claim on the page we can actually
   stand behind, so it is stated plainly and not as a colour. */
.hh-revitem__ver {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--hh-t-xxs); font-weight: 500;
  letter-spacing: var(--hh-ls-wide); text-transform: uppercase;
  color: #1c6b45; padding: 3px 7px;
  background: var(--hh-success-bg); border: 1px solid rgba(28,107,69,.25);
}
.hh-revitem__ver .hh-icon { width: 13px; height: 13px; }

.hh-revitem__rate { display: flex; align-items: center; gap: var(--hh-s4);
                    flex-wrap: wrap; margin-top: var(--hh-s4); }
.hh-revitem__str { font-size: var(--hh-t-sm); color: var(--hh-ink-600); }
.hh-revitem__str b { color: var(--hh-ink); font-weight: 600; }

.hh-revitem__title { font-size: var(--hh-t-base); font-weight: 600;
                     margin: var(--hh-s3) 0 var(--hh-s2);
                     font-family: var(--hh-font-body);
                     letter-spacing: normal; }
.hh-revitem__body { margin: 0; max-width: 68ch; color: var(--hh-ink-800); }
.hh-revitem__photo { width: 140px; margin-top: var(--hh-s4); }

.hh-revitem__helpful {
  display: flex; align-items: center; gap: var(--hh-s3);
  margin: var(--hh-s4) 0 0; font-size: var(--hh-t-xs); color: var(--hh-ink-600);
}
.hh-revitem__btn {
  font: inherit; cursor: pointer; padding: 5px 12px;
  background: none; border: 1px solid var(--hh-line); color: var(--hh-ink);
}
.hh-revitem__btn:hover { border-color: var(--hh-ink); background: var(--hh-surface-3); }

.hh-revlist__more { margin-top: var(--hh-s6); text-align: center; }

@media (min-width: 701px) {
  .hh-revsum { grid-template-columns: auto 1fr auto; gap: var(--hh-s7); }
  .hh-revbars { border-inline: 1px solid var(--hh-line); padding-inline: var(--hh-s7); }
  .hh-revitem__photo { width: 180px; }
}

/* ---------------------------------------------------------------
   VITOLA, TO SCALE
   One row is 7½ inches. Bar height is ring gauge in 64ths of an inch at
   the same scale, so a 50-ring Robusto is visibly fatter than a 38-ring
   Lancero and two-thirds of its length.
   --------------------------------------------------------------- */
.hh-vitola { margin-top: var(--hh-s7); }
.hh-vitola .hh-h4 { margin-bottom: var(--hh-s2); }
.hh-vitola__note { max-width: 62ch; color: var(--hh-ink-600); margin: 0 0 var(--hh-s5); }
.hh-vitola__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--hh-s4); }
.hh-vitola__list li {
  display: grid; grid-template-columns: 6.5em 1fr; align-items: center;
  column-gap: var(--hh-s4); row-gap: 4px; font-size: var(--hh-t-sm);
}
.hh-vitola__name { color: var(--hh-ink-600); }
.hh-vitola__list .is-me .hh-vitola__name { color: var(--hh-ink); font-weight: 600; }
.hh-vitola__bar {
  display: block; width: var(--w); height: var(--h);
  border-radius: 999px; background: var(--hh-ink-300);
}
.hh-vitola__list .is-me .hh-vitola__bar { background: var(--hh-ink); }
.hh-vitola__meta { grid-column: 2; font-size: var(--hh-t-xs); color: var(--hh-ink-500); }

@media (max-width: 560px) {
  .hh-opts { grid-template-columns: 1fr; }
}


/* Buy now, beside Add to basket. Ghost, so the gold button stays the one
   the eye lands on; the fast path is for people who already know. */
.hh-pdp__buynow { margin-top: var(--hh-s3); }

/* ============================================================ gift card
   The one product that is not a cigar: amount, design and delivery route
   as option tiles, the recipient fields only when it goes by email, and a
   drawn card standing in for artwork until Havana House supply designs.
   notes/erply.md §6. */
.hh-opts--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hh-opt__box--center { justify-content: center; text-align: center; }
.hh-gc__block + .hh-gc__block { margin-top: var(--hh-s5); }
.hh-gc__custom { margin-top: var(--hh-s3); }
.hh-gc__field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--hh-ink-600); }
.hh-gc__field > span:first-child { font-weight: 500; color: var(--hh-ink); }
.hh-gc__field input, .hh-gc__field textarea {
  box-sizing: border-box; width: 100%; min-height: 48px; padding: 12px 14px;
  border: 1px solid var(--hh-line); border-radius: 0; background: var(--hh-surface); color: var(--hh-ink);
  font: inherit; font-size: 15px; line-height: 1.3; appearance: none;
}
.hh-gc__field textarea { min-height: 88px; resize: vertical; }
.hh-gc__field input:focus, .hh-gc__field textarea:focus { outline: none; border-color: var(--hh-ink); box-shadow: 0 0 0 1px var(--hh-ink); }
.hh-gc__field small { font-size: 12px; color: var(--hh-ink-500); }
.hh-gc__money { display: flex; align-items: center; border: 1px solid var(--hh-line); background: var(--hh-surface); }
.hh-gc__money b { padding: 0 0 0 14px; font-size: 18px; font-weight: 500; }
.hh-gc__money input { border: 0 !important; box-shadow: none !important; }
.hh-gc__grid { display: grid; gap: var(--hh-s3); margin-bottom: var(--hh-s3); }
@media (min-width: 641px) { .hh-gc__grid { grid-template-columns: 1fr 1fr; } }
.hh-gc__email[hidden] { display: none; }
.hh-gc__fine { margin: var(--hh-s3) 0 0; font-size: 12px; line-height: 1.5; color: var(--hh-ink-600); }
.hh-gc__designs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--hh-card-gap); }
.hh-gc__design { position: relative; cursor: pointer; }
.hh-gc__design input { position: absolute; inset: 0; opacity: 0; margin: 0; }
.hh-gc__design-box { display: flex; flex-direction: column; gap: 6px; padding: 6px; border: 1px solid var(--hh-line); font-size: 13px; text-align: center; }
.hh-gc__design-box img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.hh-gc__design input:checked + .hh-gc__design-box { border-color: var(--hh-ink); box-shadow: 0 0 0 1px var(--hh-ink); }
.hh-gc__design input:focus-visible + .hh-gc__design-box { outline: 2px solid var(--hh-gold-750); outline-offset: 2px; }
/* The drawn card: 16:10, ink, gold brand, the chosen amount large. */
.hh-gc__card {
  aspect-ratio: 16 / 10; width: 100%; max-width: 560px; margin: 0 auto; padding: 7%; box-sizing: border-box;
  display: flex; flex-direction: column; justify-content: space-between;
  background: var(--hh-ink); color: #fff; border-radius: 14px; box-shadow: 0 24px 48px -24px rgba(0,0,0,.5);
}
.hh-gc__card-brand { font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--hh-gold-500); }
.hh-gc__card-amt { font-size: clamp(2.5rem, 8vw, 4rem); font-weight: 500; line-height: 1; font-variant-numeric: tabular-nums; }
.hh-gc__card-foot { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--hh-ink-300); }
.hh-gc__about { display: grid; gap: var(--hh-s6); max-width: 1100px; }
@media (min-width: 901px) { .hh-gc__about { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.hh-gc__points { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--hh-s3); align-content: start; }
.hh-gc__points li { padding: var(--hh-s3) 0; border-top: 1px solid var(--hh-line); font-size: 15px; line-height: 1.5; }
.hh-gc__points b { display: block; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--hh-ink-500); margin-bottom: 4px; }
/* Phone: the two buttons stack full width so "Add to basket · £250" stays on one line. */
@media (max-width: 640px) {
  .hh-gc .hh-pdp__actions { flex-direction: column; align-items: stretch; }
  .hh-gc .hh-pdp__actions .hh-btn { width: 100%; justify-content: center; }
}
/* The card as printed: 85.6 × 54 mm with 3.18 mm corners. One artwork file
   serves print and web; the site crops the bleed and adds the radius. */
.hh-gc__art, .hh-gc__card { aspect-ratio: 85.6 / 54; border-radius: 3.7% / 5.9%; object-fit: cover; box-shadow: 0 24px 48px -24px rgba(0,0,0,.5); }
.hh-gc .hh-pdp__stage { background: transparent; }
.hh-gc .hh-pdp__stage .hh-gc__art { width: 100%; max-width: 560px; height: auto; margin: 0 auto; display: block; }
.hh-gc__design-box img { aspect-ratio: 85.6 / 54; border-radius: 3.7% / 5.9%; }
/* Desktop: the card is an object, not a hero. Card-sized, centred in the
   stage, not filling the column (Will, 8 Nov 2026). */
@media (min-width: 901px) {
  .hh-gc .hh-pdp__stage { display: flex; align-items: center; justify-content: center; min-height: 420px; }
  .hh-gc .hh-pdp__stage .hh-gc__art, .hh-gc .hh-gc__card { max-width: 360px; }
}
@media (min-width: 901px) {
  .hh-gc .hh-pdp__stage { aspect-ratio: auto; height: auto; min-height: 0; padding: var(--hh-s4) 0; align-items: flex-start; }
}
/* The gift card stage is not the cigar stage: no frame, no tinted ground,
   no blend, no absolute image. A card on the page, its own height. */
.hh-gc .hh-pdp__stage { width: auto; height: auto; aspect-ratio: auto; border: 0; background: transparent; overflow: visible; padding: 0; display: block; }
.hh-gc .hh-pdp__stage .hh-pdp__img.hh-gc__art { position: static; width: 100%; max-width: 560px; height: auto; display: block; margin: 0 auto; mix-blend-mode: normal; object-fit: cover; }
@media (min-width: 901px) {
  .hh-gc .hh-pdp__stage { padding: var(--hh-s4) 0; }
  .hh-gc .hh-pdp__stage .hh-pdp__img.hh-gc__art, .hh-gc .hh-gc__card { max-width: 360px; }
}
/* Even rhythm between the blocks: the custom-amount field sits inside its block, so the gap below is the same as everywhere else. */
.hh-gc__block + .hh-gc__block { margin-top: var(--hh-s6); }
.hh-gc__custom:not([hidden]) { margin-top: var(--hh-s3); }
/* Amount tiles: small, one row of six on desktop, three across on a phone
   (Will, 8 Nov 2026: "the tiles should not be as big"). */
.hh-gc__amounts { gap: 8px; }
.hh-gc__amounts .hh-opt__box { min-height: 42px; padding: 6px 10px; }
.hh-gc__amounts .hh-opt__price, .hh-gc__amounts .hh-opt__name { font-size: 14px; }
@media (min-width: 901px) { .hh-gc__amounts { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
/* One rhythm for the whole form: 32px between every block, whatever sits
   between them in the markup (a hidden design input broke the sibling
   rule, Will, 8 Nov 2026). The fine print tucks closer under the buttons. */
.hh-gc__form { display: flex; flex-direction: column; gap: var(--hh-s6); }
.hh-gc__form > * { margin: 0 !important; }
.hh-gc__form > .hh-gc__fine { margin-top: calc(var(--hh-s3) - var(--hh-s6)) !important; }
.hh-gc__form > input[type="hidden"] { display: none; }
.hh-gc__email .hh-gc__grid { margin-bottom: var(--hh-s3); }
/* Woo's clearfix pseudo-elements on .cart became flex items and took a gap of their own. */
.woocommerce .hh-pdp.hh-gc .hh-gc__form::before, .woocommerce .hh-pdp.hh-gc .hh-gc__form::after, .hh-pdp.hh-gc .hh-gc__form::before, .hh-pdp.hh-gc .hh-gc__form::after { display: none !important; content: none !important; }
/* The type toggle: one box, two halves, the chosen half in ink with a gold
   hairline on top; an icon, a name and one line of help in each. */
.hh-gc__route { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--hh-line); background: #fff; }
.hh-gc__seg { position: relative; cursor: pointer; }
.hh-gc__seg + .hh-gc__seg { border-left: 1px solid var(--hh-line); }
.hh-gc__seg input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.hh-gc__segbox {
  display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px 14px;
  border-top: 2px solid transparent; color: var(--hh-ink);
  transition: background var(--hh-fast) var(--hh-ease), color var(--hh-fast) var(--hh-ease), border-color var(--hh-fast) var(--hh-ease);
}
.hh-gc__segicon { flex: 0 0 auto; width: 26px; height: 26px; color: var(--hh-gold-750); }
.hh-gc__segtext { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.hh-gc__segtext b { font-size: 15px; font-weight: 600; line-height: 1.2; }
.hh-gc__segtext small { font-size: 12px; line-height: 1.35; color: var(--hh-ink-600); }
.hh-gc__seg:hover .hh-gc__segbox { background: var(--hh-surface-2); }
.hh-gc__seg input:checked + .hh-gc__segbox { background: var(--hh-ink); color: #fff; border-top-color: var(--hh-gold-500); }
.hh-gc__seg input:checked + .hh-gc__segbox .hh-gc__segicon { color: var(--hh-gold-500); }
.hh-gc__seg input:checked + .hh-gc__segbox small { color: var(--hh-ink-300); }
.hh-gc__seg input:focus-visible + .hh-gc__segbox { outline: 2px solid var(--hh-gold-750); outline-offset: -2px; }
@media (max-width: 480px) { .hh-gc__segbox { flex-direction: column; align-items: flex-start; gap: 8px; } }
.hh-gc__seg { display: flex; }
.hh-gc__segbox { flex: 1 1 auto; box-sizing: border-box; }
/* The type switch, the checkout's Deliver / Collect recipe (checkout.css
   .hh-ck__mode): light track, white pill for the choice, hint below. */
.hh-gc__mode { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 0; padding: 4px; border: 0; border-radius: 6px; background: var(--hh-ink-100); }
.hh-gc__modeopt { position: relative; display: flex; align-items: center; justify-content: center; min-height: 40px; padding: 8px 10px; border-radius: 4px; color: var(--hh-ink-600); cursor: pointer; transition: background var(--hh-fast) var(--hh-ease), color var(--hh-fast) var(--hh-ease), box-shadow var(--hh-fast) var(--hh-ease); }
.hh-gc__modeopt:hover { color: var(--hh-ink); }
.hh-gc__modeopt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.hh-gc__modetext { display: inline-flex; align-items: center; gap: 8px; font-size: var(--hh-t-sm); font-weight: 500; line-height: 1; }
.hh-gc__modetext .hh-icon { width: 18px; height: 18px; color: currentColor; }
.hh-gc__modeopt:has(input:checked) { background: var(--hh-surface); color: var(--hh-ink); box-shadow: 0 1px 2px rgba(0,0,0,.12), 0 0 0 1px rgba(0,0,0,.04); }
.hh-gc__modeopt:has(input:checked) .hh-gc__modetext { font-weight: 600; }
.hh-gc__modeopt:has(input:focus-visible) { outline: 2px solid var(--hh-ink); outline-offset: 2px; }
.hh-gc__modehint { display: none; margin: 12px 0 0; font-size: 13px; line-height: 1.5; color: var(--hh-ink-600); }
.hh-gc__mode:has(input[value="email"]:checked) ~ .hh-gc__modehint--email,
.hh-gc__mode:has(input[value="post"]:checked) ~ .hh-gc__modehint--post { display: block; }
/* The optional extras fold away behind one quiet line. */
.hh-gc__more { margin-top: var(--hh-s3); }
.hh-gc__more > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--hh-gold-750); text-decoration: underline; text-decoration-color: var(--hh-gold-500); text-underline-offset: 3px; }
.hh-gc__more > summary::-webkit-details-marker { display: none; }
.hh-gc__more > summary::before { content: "+"; font-size: 15px; line-height: 1; }
.hh-gc__more[open] > summary::before { content: "–"; }
.hh-gc__more[open] > summary { margin-bottom: var(--hh-s3); }
.hh-gc__more .hh-gc__grid { margin-bottom: var(--hh-s3); }
/* Quieter fields: lighter label, lighter border. */
.hh-gc__field > span:first-child { font-weight: 400; color: var(--hh-ink-700); }
.hh-gc__email .hh-gc__grid { margin-bottom: 0; }
/* Retire the heavy tile toggle. */
.hh-gc__route, .hh-gc__seg, .hh-gc__segbox { display: none; }
/* No heading on the type switch (Will, 8 Nov 2026): it names its own options. It sits a step closer to the amount tiles. */
.hh-gc__form > .hh-gc__block--type { margin-top: calc(var(--hh-s4) - var(--hh-s6)) !important; }
.hh-gc__message { margin-top: var(--hh-s3); }
.hh-gc__more .hh-gc__grid { margin-bottom: 0; }
/* Rhythm, final (Will, 8 Nov 2026): the switch a full step under the
   tiles, the buttons a shorter step under the fields they conclude. */
.hh-gc__form > .hh-gc__block--type { margin-top: 0 !important; }
.hh-gc__form > .hh-pdp__actions { margin-top: calc(var(--hh-s4) - var(--hh-s6)) !important; }
.hh-gc__more { margin-top: var(--hh-s2); }
.hh-gc__more[open] > summary { margin-bottom: var(--hh-s3); }
/* Recipient fields, final shape (Will, 8 Nov 2026). */
.hh-gc__check { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; font-size: 15px; color: var(--hh-ink); cursor: pointer; }
.hh-gc__check input { width: 18px; height: 18px; margin: 0; accent-color: var(--hh-ink); }
.hh-gc__when { justify-content: flex-end; }
.hh-gc__date { margin-top: 6px; }
.hh-gc__date[hidden] { display: none; }
.hh-gc__count { float: right; font-style: normal; font-size: 12px; color: var(--hh-ink-500); font-variant-numeric: tabular-nums; }
.hh-gc__message > span:first-child { display: flex; justify-content: space-between; align-items: baseline; }
.hh-gc__more { display: none; }
/* Field order (Will, 8 Nov 2026): recipient name + email; message; your
   name on its own row, half width on desktop; Send immediately, with the
   date beneath it only when unticked. The checkbox is drawn, not the
   browser's: an 18px square, ink when ticked with a white tick. */
.hh-gc__email > * + * { margin-top: var(--hh-s3); }
.hh-gc__message { margin-top: var(--hh-s3); }
.hh-gc__when { justify-content: flex-start; }
.hh-gc__check { display: flex; align-items: center; gap: 10px; min-height: 24px; font-size: 15px; color: var(--hh-ink); cursor: pointer; }
.hh-gc__check input {
  appearance: none; -webkit-appearance: none; flex: 0 0 auto; width: 18px; height: 18px; margin: 0;
  border: 1px solid var(--hh-ink-400); border-radius: 2px; background: var(--hh-surface); display: grid; place-items: center; cursor: pointer;
}
.hh-gc__check input::before { content: ""; width: 10px; height: 6px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: translateY(-1px) rotate(-45deg); opacity: 0; }
.hh-gc__check input:checked { background: var(--hh-ink); border-color: var(--hh-ink); }
.hh-gc__check input:checked::before { opacity: 1; }
.hh-gc__check input:focus-visible { outline: 2px solid var(--hh-gold-750); outline-offset: 2px; }
.hh-gc__date { margin-top: var(--hh-s3); }
/* A refused gift card says why, above the form. */
.hh-gc .hh-pdp__buy .woocommerce-error, .hh-gc .hh-pdp__buy .woocommerce-message { list-style: none; margin: 0 0 var(--hh-s4); padding: 12px 14px; border-left: 3px solid var(--hh-danger, #b3261e); background: var(--hh-surface-2); font-size: 14px; line-height: 1.5; }
.hh-gc .hh-pdp__buy .woocommerce-message { border-left-color: var(--hh-gold-500); }