/*
 * The design layer. Ships as a sane, fast base that reads the theme.json
 * tokens; the WordPress Site Team pipeline extends and overrides this file
 * from the approved design contract. Everything here reads a custom property,
 * so re-theming is a token change, not a rewrite.
 */

*, *::before, *::after { box-sizing: border-box; }
img, svg, video { max-width: 100%; height: auto; display: block; }

:root {
  --container: var(--wp--style--global--wide-size, 1200px);
  --reveal-y: 16px;
  --reveal-dur: 0.6s;
}

body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Readable measure for running text inside a constrained column. */
.entry-content p, .wp-block-post-content p { max-width: 68ch; }

a { color: var(--wp--preset--color--accent); }
a:hover { text-decoration: underline; }

/* Focus visible, on-token, never removed. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--wp--preset--color--accent);
  outline-offset: 2px;
}

.wp-block-button__link { transition: transform .18s ease, filter .18s ease; }
.wp-block-button__link:hover { transform: translateY(-1px); filter: brightness(1.05); }

/* Skip link. */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--wp--preset--color--text); color: var(--wp--preset--color--background);
  padding: .6rem 1rem;
}
.skip-link:focus { left: 0; }

/*
 * Class-based motion. The markup starts in its final position; JS adds
 * .is-in to play the entrance. If JS never runs, everything is already
 * visible. See design.js.
 */
.reveal { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(var(--reveal-y)); transition: opacity var(--reveal-dur) ease-out, transform var(--reveal-dur) ease-out; }
  .js .reveal.is-in { opacity: 1; transform: none; }
  .js .reveal-stagger > * { opacity: 0; transform: translateY(var(--reveal-y)); transition: opacity var(--reveal-dur) ease-out, transform var(--reveal-dur) ease-out; }
  .js .reveal-stagger.is-in > * { opacity: 1; transform: none; }
  .js .reveal-stagger.is-in > *:nth-child(2) { transition-delay: .08s; }
  .js .reveal-stagger.is-in > *:nth-child(3) { transition-delay: .16s; }
  .js .reveal-stagger.is-in > *:nth-child(4) { transition-delay: .24s; }
}


/* ================================================================== *
 * Unicorn Smokes — project overrides, appended per design-contract.json.
 * Everything below reads the theme.json tokens above; the only new
 * values introduced here are the metallicAccent gradient (itself a
 * contract token) and shape.shadow's exact spec. Nothing hardcoded
 * outside the token system.
 * ================================================================== */

:root {
  --metallic: linear-gradient(120deg, #8A6A28 0%, #F0D38C 32%, #BF8328 52%, #F5E0A8 70%, #8A6A28 100%);
  --frame-shadow: 0 20px 40px -12px rgba(0,0,0,0.55);
  --radius: 2px; /* collector's-cabinet sharpness, overrides the theme default 12px */
  /*
   * Taste-check fix pass (2026-08-22): --ease, --ease-out and --sig-gap were
   * referenced throughout this file (button/card/back-to-top hover, the
   * hero/feature column gap) but never actually defined anywhere, so every
   * transition/gap using them silently fell back to instant/none rather than
   * the intended crafted motion. Defining them here, in the token block,
   * rather than hardcoding values at each call site.
   */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --sig-gap: var(--wp--preset--spacing--60);
  /*
   * --line is referenced both here and in a lot of hand-authored inline
   * page-content styles (FAQ <details> borders etc.) as a hairline color,
   * but was never actually defined anywhere — it was meant to alias the
   * theme.json "line" palette slug. Defining the alias here fixes every
   * existing var(--line) call site sitewide with a single token addition,
   * with no need to touch already-published page content.
   */
  --line: var(--wp--preset--color--line);
}

/* Tabular lining figures for prices / vintage years, per contract type notes */
.tabular-nums, .price, .stat-number, .count-up, .release-year { font-variant-numeric: lining-nums tabular-nums; }

/* ------------------------------------------------------------------ *
 * Metallic surface: buttons, dividers, shimmer sweep on hover/entrance
 * ------------------------------------------------------------------ */
.wp-block-button:not(.is-style-outline) .wp-block-button__link,
.btn-metallic {
  background: var(--metallic);
  background-size: 220% 100%;
  background-position: 0% 50%;
  color: var(--wp--preset--color--accent-contrast);
  border: none;
  transition: background-position .6s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease);
}
.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover,
.btn-metallic:hover {
  background-position: 100% 50%;
  transform: translateY(-2px);
  box-shadow: var(--frame-shadow);
}
.wp-block-button:not(.is-style-outline) .wp-block-button__link:focus-visible,
.btn-metallic:focus-visible { outline: 2px solid var(--wp--preset--color--accent-2); outline-offset: 3px; }

/*
 * Taste-check fix pass (2026-08-22): the "outline" secondary CTA variant
 * (hand-authored as an <a class="wp-block-button__link"> with an inline
 * style="background:transparent;border:1.5px solid currentColor") never had
 * its own text color set, so it inherited theme.json's global button color
 * (styles.elements.button, --accent-contrast, a dark color meant for text
 * ON a gold fill) against the page's near-black background — a measured
 * 1.04:1 contrast, an invisible "ghost" button. currentColor for the border
 * was already correct in intent; it just needed something other than the
 * button-element default to resolve to. !important is required here: the
 * inline style already wins the background/border longhands, and the
 * color needs to beat theme.json's own .wp-element-button rule the same way.
 */
a.wp-block-button__link[style*="background:transparent"] {
  background: var(--metallic) !important;
  background-size: 220% 100%;
  background-position: 0% 50%;
  border: none !important;
  color: var(--wp--preset--color--accent-contrast) !important;
  transition: background-position .6s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease);
}
a.wp-block-button__link[style*="background:transparent"]:hover {
  background-position: 100% 50% !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--frame-shadow) !important;
}
a.wp-block-button__link[style*="background:transparent"]:focus-visible {
  outline: 2px solid var(--wp--preset--color--accent-2);
  outline-offset: 3px;
}

.hairline-metallic { border: 0; height: 2px; background: var(--metallic); background-size: 220% 100%; }

/* ------------------------------------------------------------------ *
 * "Under glass": gold rule-line frame + soft drop shadow on every
 * product/content photo. Never a flat, borderless image.
 * ------------------------------------------------------------------ */
.framed {
  position: relative;
  display: block;
  padding: 10px;
  border: 1px solid transparent;
  background:
    linear-gradient(var(--wp--preset--color--surface), var(--wp--preset--color--surface)) padding-box,
    var(--metallic) border-box;
  background-size: auto, 220% 100%;
  box-shadow: var(--frame-shadow);
  border-radius: var(--radius);
}
.framed img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.framed.ar-1-1 img, .framed.ar-4-5 img, .framed.ar-3-4 img { object-fit: cover; }
.wp-block-image .framed { margin: 0 auto; }
figure.wp-block-image { margin: 0; }

/* ------------------------------------------------------------------ *
 * Taste-check fix pass (2026-08-22): "Shop by Collection" bento grid.
 * The markup (.is-bento > a.is-tile.bento-lg/md/sm.card) had zero CSS —
 * it rendered as a bare stacked text list. Built as a cabinet of six
 * unevenly-sized tiles (one large "start here" tile, two medium, three
 * small), each framed like the site's product photography, so it reads
 * as a cabinet of collectible tiers rather than a coupon grid.
 * ------------------------------------------------------------------ */
.is-bento {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, minmax(150px, 210px)) minmax(120px, 150px);
  grid-template-areas:
    "lg lg md1"
    "lg lg md2"
    "sm1 sm2 sm3";
  gap: clamp(1rem, 2vw, 1.5rem);
}
.is-bento > a:nth-child(1) { grid-area: lg; }
.is-bento > a:nth-child(2) { grid-area: md1; }
.is-bento > a:nth-child(3) { grid-area: md2; }
.is-bento > a:nth-child(4) { grid-area: sm1; }
.is-bento > a:nth-child(5) { grid-area: sm2; }
.is-bento > a:nth-child(6) { grid-area: sm3; }

.is-tile {
  position: relative;
  overflow: hidden;
  padding: 1.5rem;
  border: 1px solid var(--wp--preset--color--accent);
  border-radius: var(--radius);
  background:
    radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--wp--preset--color--accent) 16%, transparent), transparent 60%),
    repeating-linear-gradient(135deg, color-mix(in srgb, var(--wp--preset--color--surface) 92%, black) 0 2px, var(--wp--preset--color--surface) 2px 5px);
  box-shadow: var(--frame-shadow);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.is-tile::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--metallic);
  background-size: 220% 100%;
  background-position: 0% 50%;
  opacity: 0;
  transition: opacity .4s var(--ease), background-position .6s var(--ease);
  pointer-events: none;
}
.is-tile:hover, .is-tile:focus-visible {
  transform: translateY(-6px);
  border-color: var(--wp--preset--color--accent-2);
  box-shadow: var(--frame-shadow), 0 0 32px 0 color-mix(in srgb, var(--wp--preset--color--accent) 35%, transparent);
}
.is-tile:hover::before, .is-tile:focus-visible::before { opacity: .1; background-position: 100% 50%; }
.is-tile .eyebrow, .is-tile h3 { position: relative; z-index: 1; }
.is-tile .eyebrow {
  color: var(--wp--preset--color--text);
  letter-spacing: .08em;
}
@keyframes eyebrow-shimmer {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .eyebrow { animation: none; }
}

.is-lit {
  background: var(--metallic);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent !important;
  animation: eyebrow-shimmer 5s ease-in-out infinite;
}

.eyebrow {
  color: var(--wp--preset--color--text);
  letter-spacing: .08em;
}
.is-tile h3 { color: var(--wp--preset--color--text); transition: color .3s var(--ease); }
.is-tile:hover h3, .is-tile:focus-visible h3 { color: var(--wp--preset--color--accent-2); }
.bento-lg { padding: clamp(1.5rem, 3vw, 2.25rem); }
.bento-lg h3 { font-size: clamp(1.5rem, 2.5vw, 2rem); }
.bento-md h3 { font-size: 1.25rem; }
.bento-sm { padding: 1.1rem; }
.bento-sm h3 { font-size: 1.05rem; }

@media (max-width: 768px) {
  .is-bento {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: minmax(190px, 230px) repeat(2, minmax(130px, 160px)) minmax(110px, 140px);
    grid-template-areas:
      "lg lg"
      "md1 md2"
      "sm1 sm2"
      "sm3 sm3";
  }
}
@media (max-width: 480px) {
  .is-bento {
    grid-template-columns: 1fr;
    grid-template-rows: 190px repeat(5, 110px);
    grid-template-areas: "lg" "md1" "md2" "sm1" "sm2" "sm3";
  }
}

/* Case-opening reveal for framed media: scale + fade, like a glass case unlocking */
@media (prefers-reduced-motion: no-preference) {
  .js .framed.reveal { transform: scale(.96) translateY(var(--reveal-y)); }
  .js .framed.reveal.is-in { transform: none; }
}

/* Styled placeholder ground (imagery.fallback): dark texture + gold frame,
 * subtle unicorn watermark, used until real product photography lands. */
.photo-fallback {
  background:
    radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--wp--preset--color--accent) 10%, transparent), transparent 60%),
    repeating-linear-gradient(135deg, color-mix(in srgb, var(--wp--preset--color--surface) 90%, black) 0 2px, var(--wp--preset--color--surface) 2px 4px);
  display: flex; align-items: center; justify-content: center;
}
.photo-fallback::after {
  content: "";
  width: 42%; aspect-ratio: 1;
  background: var(--metallic);
  -webkit-mask-image: var(--unicorn-mark, none);
  mask-image: var(--unicorn-mark, none);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
  opacity: .28;
}

/* ------------------------------------------------------------------ *
 * Social icons: metallic gradient cut with a CSS mask (never flat gold).
 * mask-size/-repeat/-position set as SEPARATE properties — appending a
 * background-style shorthand after url() silently invalidates the whole
 * declaration and renders an unmasked solid square. Confirmed bug, fixed
 * here per the design contract's own footer notes.
 * ------------------------------------------------------------------ */
.social-icons { display: flex; gap: 1rem; align-items: center; }
.social-icon {
  display: inline-block;
  width: 22px; height: 22px;
  background: var(--metallic);
  background-size: 220% 100%;
  background-position: 0% 50%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
  transition: transform .3s var(--ease), background-position .6s var(--ease);
}
.social-icon:hover { transform: translateY(-2px); background-position: 100% 50%; }
.social-icon.icon-instagram {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 2.2c3.2 0 3.6 0 4.85.07 1.17.05 2.02.24 2.75.52a5.5 5.5 0 0 1 2 1.3 5.5 5.5 0 0 1 1.3 2c.28.73.47 1.58.52 2.75.06 1.25.07 1.65.07 4.85s0 3.6-.07 4.85c-.05 1.17-.24 2.02-.52 2.75a5.5 5.5 0 0 1-1.3 2 5.5 5.5 0 0 1-2 1.3c-.73.28-1.58.47-2.75.52-1.25.06-1.65.07-4.85.07s-3.6 0-4.85-.07c-1.17-.05-2.02-.24-2.75-.52a5.5 5.5 0 0 1-2-1.3 5.5 5.5 0 0 1-1.3-2c-.28-.73-.47-1.58-.52-2.75C2.2 15.6 2.2 15.2 2.2 12s0-3.6.07-4.85c.05-1.17.24-2.02.52-2.75a5.5 5.5 0 0 1 1.3-2 5.5 5.5 0 0 1 2-1.3c.73-.28 1.58-.47 2.75-.52C8.4 2.2 8.8 2.2 12 2.2zm0 1.8c-3.15 0-3.52 0-4.76.07-.96.04-1.48.2-1.82.34-.46.18-.79.39-1.13.73-.34.34-.55.67-.73 1.13-.14.34-.3.86-.34 1.82C3.15 8.87 3.15 9.24 3.15 12s0 3.13.07 4.4c.04.96.2 1.48.34 1.82.18.46.39.79.73 1.13.34.34.67.55 1.13.73.34.14.86.3 1.82.34 1.24.06 1.61.07 4.76.07s3.52 0 4.76-.07c.96-.04 1.48-.2 1.82-.34.46-.18.79-.39 1.13-.73.34-.34.55-.67.73-1.13.14-.34.3-.86.34-1.82.06-1.27.07-1.64.07-4.4s0-3.13-.07-4.4c-.04-.96-.2-1.48-.34-1.82a2.9 2.9 0 0 0-.73-1.13 2.9 2.9 0 0 0-1.13-.73c-.34-.14-.86-.3-1.82-.34C15.52 4 15.15 4 12 4zm0 3.05A4.95 4.95 0 1 1 7.05 12 4.95 4.95 0 0 1 12 7.05zm0 1.8A3.15 3.15 0 1 0 15.15 12 3.15 3.15 0 0 0 12 8.85zm5.15-1.98a1.16 1.16 0 1 1-1.16-1.16 1.16 1.16 0 0 1 1.16 1.16z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 2.2c3.2 0 3.6 0 4.85.07 1.17.05 2.02.24 2.75.52a5.5 5.5 0 0 1 2 1.3 5.5 5.5 0 0 1 1.3 2c.28.73.47 1.58.52 2.75.06 1.25.07 1.65.07 4.85s0 3.6-.07 4.85c-.05 1.17-.24 2.02-.52 2.75a5.5 5.5 0 0 1-1.3 2 5.5 5.5 0 0 1-2 1.3c-.73.28-1.58.47-2.75.52-1.25.06-1.65.07-4.85.07s-3.6 0-4.85-.07c-1.17-.05-2.02-.24-2.75-.52a5.5 5.5 0 0 1-2-1.3 5.5 5.5 0 0 1-1.3-2c-.28-.73-.47-1.58-.52-2.75C2.2 15.6 2.2 15.2 2.2 12s0-3.6.07-4.85c.05-1.17.24-2.02.52-2.75a5.5 5.5 0 0 1 1.3-2 5.5 5.5 0 0 1 2-1.3c.73-.28 1.58-.47 2.75-.52C8.4 2.2 8.8 2.2 12 2.2zm0 1.8c-3.15 0-3.52 0-4.76.07-.96.04-1.48.2-1.82.34-.46.18-.79.39-1.13.73-.34.34-.55.67-.73 1.13-.14.34-.3.86-.34 1.82C3.15 8.87 3.15 9.24 3.15 12s0 3.13.07 4.4c.04.96.2 1.48.34 1.82.18.46.39.79.73 1.13.34.34.67.55 1.13.73.34.14.86.3 1.82.34 1.24.06 1.61.07 4.76.07s3.52 0 4.76-.07c.96-.04 1.48-.2 1.82-.34.46-.18.79-.39 1.13-.73.34-.34.55-.67.73-1.13.14-.34.3-.86.34-1.82.06-1.27.07-1.64.07-4.4s0-3.13-.07-4.4c-.04-.96-.2-1.48-.34-1.82a2.9 2.9 0 0 0-.73-1.13 2.9 2.9 0 0 0-1.13-.73c-.34-.14-.86-.3-1.82-.34C15.52 4 15.15 4 12 4zm0 3.05A4.95 4.95 0 1 1 7.05 12 4.95 4.95 0 0 1 12 7.05zm0 1.8A3.15 3.15 0 1 0 15.15 12 3.15 3.15 0 0 0 12 8.85zm5.15-1.98a1.16 1.16 0 1 1-1.16-1.16 1.16 1.16 0 0 1 1.16 1.16z'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------------ *
 * Product cards: hover lift + gold glow, staggered grid entrance.
 * ------------------------------------------------------------------ */
.product-card {
  position: relative;
  display: flex; flex-direction: column; gap: .9rem;
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.1rem;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.product-card:hover, .product-card:focus-within {
  transform: translateY(-6px);
  border-color: var(--wp--preset--color--accent);
  box-shadow: var(--frame-shadow), 0 0 0 1px color-mix(in srgb, var(--wp--preset--color--accent) 40%, transparent), 0 0 32px 0 color-mix(in srgb, var(--wp--preset--color--accent) 35%, transparent);
}
.product-card .framed { padding: 8px; }
.product-card:hover .framed img, .product-card:focus-within .framed img { transform: scale(1.035); }
.product-card .framed img { transition: transform .5s var(--ease); }
.product-card__title { font-family: var(--wp--preset--font-family--display); font-size: 1.15rem; line-height: 1.25; margin: 0; }
.product-card__title a { color: var(--wp--preset--color--text); }
.product-card__title a:hover { color: var(--wp--preset--color--accent); text-decoration: none; }
.product-card__price { font-weight: 600; color: var(--wp--preset--color--accent); }
.product-card__meta { color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--small); }
.product-card__badge {
  position: absolute; top: 1rem; left: 1rem; z-index: 2;
  font-size: .7rem; letter-spacing: .08em; text-transform: uppercase;
  padding: .3rem .6rem; background: var(--metallic); color: var(--wp--preset--color--accent-contrast);
  border-radius: 2px;
}
.product-grid {
  display: grid; gap: clamp(1.25rem, 3vw, 2.25rem);
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.product-grid.reveal-stagger > * { transition-delay: calc(var(--i, 0) * .06s); }

/* Filter bar */
.filter-bar { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; align-items: center; margin-block-end: clamp(1.5rem, 3vw, 2.5rem); }
.filter-bar select, .filter-bar input { min-width: 10rem; }
.filter-bar label { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--muted); display: flex; flex-direction: column; gap: .3rem; }

/* ------------------------------------------------------------------ *
 * Forms: static placeholder styling (Contact / Enthusiast / Mobile
 * Lounge Inquiry). No live backend by client's explicit instruction.
 * ------------------------------------------------------------------ */
.uc-form { max-width: 42rem; display: flex; flex-direction: column; gap: 1.4rem; }
.uc-form .field { display: flex; flex-direction: column; gap: .45rem; }
.uc-form label { font-size: var(--wp--preset--font-size--small); letter-spacing: .04em; text-transform: uppercase; color: var(--wp--preset--color--muted); }
.uc-form input, .uc-form textarea {
  background: var(--wp--preset--color--background);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: .85rem 1rem;
  color: var(--wp--preset--color--text);
  font-family: var(--wp--preset--font-family--body);
  font-size: 1rem;
}
.uc-form input:focus-visible, .uc-form textarea:focus-visible {
  outline: none; border-color: var(--wp--preset--color--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--accent) 25%, transparent);
}
.uc-form textarea { min-height: 9rem; resize: vertical; }
.uc-form button[type="submit"] {
  align-self: flex-start;
  cursor: pointer;
  font: inherit; font-weight: 600; letter-spacing: .04em;
  padding: .9rem 1.8rem;
  border: none; border-radius: var(--radius);
  background: var(--metallic); background-size: 220% 100%; background-position: 0% 50%;
  color: var(--wp--preset--color--accent-contrast);
  transition: background-position .6s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease);
}
.uc-form button[type="submit"]:hover { background-position: 100% 50%; transform: translateY(-2px); box-shadow: var(--frame-shadow); }
.uc-form button[type="submit"]:focus-visible { outline: 2px solid var(--wp--preset--color--accent-2); outline-offset: 3px; }

/* ------------------------------------------------------------------ *
 * Back-to-top: unicorn mark rendered in the metallic gradient, gold pulse.
 * ------------------------------------------------------------------ */
#site-back-to-top {
  position: fixed; right: 26px; bottom: 26px; z-index: 140;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--accent);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transform: translateY(14px);
  transition: opacity .5s var(--ease), transform .5s var(--ease-out), border-color .3s var(--ease);
  animation: uc-top-pulse 2.4s ease-in-out infinite;
}
#site-back-to-top.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
#site-back-to-top:hover { border-color: var(--wp--preset--color--accent-2); }
#site-back-to-top .uc-mark {
  width: 28px; height: 28px;
  background: var(--metallic); background-size: 220% 100%; background-position: 0% 50%;
  -webkit-mask-image: var(--unicorn-mark); mask-image: var(--unicorn-mark);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
  transition: background-position .6s var(--ease);
}
#site-back-to-top:hover .uc-mark { background-position: 100% 50%; }
@keyframes uc-top-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--wp--preset--color--accent) 55%, transparent); }
  70% { box-shadow: 0 0 0 16px color-mix(in srgb, var(--wp--preset--color--accent) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--wp--preset--color--accent) 0%, transparent); }
}
@media (prefers-reduced-motion: reduce) { #site-back-to-top { animation: none; } }

/* ------------------------------------------------------------------ *
 * Nav active-state (paired selector so color applies to the inner span
 * WordPress actually renders text into, not just the <a>).
 * ------------------------------------------------------------------ */
.wp-block-navigation .current-menu-item > a,
.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content,
.wp-block-navigation [aria-current="page"],
.wp-block-navigation [aria-current="page"] .wp-block-navigation-item__content {
  color: var(--wp--preset--color--accent);
  position: relative;
}
.wp-block-navigation .current-menu-item > a::after,
.wp-block-navigation [aria-current="page"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 3px; background: var(--metallic); background-size: 220% 100%; box-shadow: 0 0 6px rgba(191,131,40,.55);
}

/* Home page: header logo (and footer wordmark link, once wrapped) gets the
   same active-link treatment as every other nav item on every other page --
   WordPress's own 'home' body class marks the front page, no PHP needed. */
.uc-logo, .footer-home-link { position: relative; }
body.home .uc-logo span:last-child,
body.home .footer-home-link span:last-child {
  color: var(--wp--preset--color--accent) !important;
}
body.home .uc-logo::after,
body.home .footer-home-link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 3px;
  background: var(--metallic);
  background-size: 220% 100%;
  box-shadow: 0 0 6px rgba(191,131,40,.55);
}
body.home .footer-home-link::after {
  left: calc(44px + 0.65rem);
}

/* ------------------------------------------------------------------ *
 * Sitewide non-negotiable: zero the block-gap injected margin at every
 * level a block theme can silently add one, so no blank strip ever
 * appears between sections.
 * ------------------------------------------------------------------ */
.wp-site-blocks > header,
.wp-site-blocks > .site-header,
.wp-site-blocks > main { margin-block-start: 0; }
.entry-content > .sig + *,
.entry-content > * + .sig,
.entry-content > .sig + .sig,
.wp-block-post-content > .sig + *,
.wp-block-post-content > * + .sig,
.wp-block-post-content > .sig + .sig { margin-block-start: 0; }

/* Skip link ordering: works regardless of DOM position, explicit not implicit. */
.skip-link { z-index: 999999; }

.site-footer { margin-top: clamp(2rem, 4vw, 3.5rem); }

/* Legal / footer band */
.site-footer .legal-note { max-width: 68ch; }
.site-footer a { color: var(--wp--preset--color--text); }
.site-footer a:hover { color: var(--wp--preset--color--accent); }
.site-footer .legal-credit-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--line);
}
.site-footer .legal-credit-link:hover {
  color: var(--wp--preset--color--accent);
  text-decoration-color: currentColor;
}

/* Journal post-thumbnail framed treatment reuses .framed; index rows already styled. */

/* ------------------------------------------------------------------ *
 * WooCommerce native product grid/single/cart: reskin to the gold-frame
 * + hover-glow treatment via real block classes (no custom Store API
 * grid this round — see build notes), so the store reads as this
 * business rather than a stock WooCommerce theme.
 * ------------------------------------------------------------------ */
.wc-block-product,
ul.products li.product {
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.1rem;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.wc-block-product:hover, ul.products li.product:hover {
  transform: translateY(-6px);
  border-color: var(--wp--preset--color--accent);
  box-shadow: var(--frame-shadow), 0 0 0 1px color-mix(in srgb, var(--wp--preset--color--accent) 40%, transparent), 0 0 32px 0 color-mix(in srgb, var(--wp--preset--color--accent) 35%, transparent);
}
.wc-block-components-product-image,
ul.products li.product .wp-post-image {
  padding: 8px;
  background: var(--wp--preset--color--background);
  border: 1px solid var(--wp--preset--color--accent);
  box-shadow: var(--frame-shadow);
  border-radius: var(--radius);
  overflow: hidden;
}
.wc-block-components-product-image img { transition: transform .5s var(--ease); }
.wc-block-product:hover .wc-block-components-product-image img { transform: scale(1.035); }
.wc-block-product .wp-block-post-title, .wc-block-grid__product-title {
  font-family: var(--wp--preset--font-family--display);
}
.wc-block-components-product-price, .price {
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--wp--preset--color--accent);
  font-weight: 600;
}
.wc-block-components-product-button .wp-block-button__link,
.single_add_to_cart_button, .checkout-button, a.button.add_to_cart_button,
.wp-block-button__link {
  background: var(--metallic);
  background-size: 220% 100%;
  color: var(--wp--preset--color--accent-contrast) !important;
  border: none;
  transition: background-position .6s var(--ease), transform .18s var(--ease);
}
.wc-block-components-product-button .wp-block-button__link:hover,
.single_add_to_cart_button:hover, a.button.add_to_cart_button:hover,
.wp-block-button__link:hover {
  background-position: 100% 50%;
  transform: translateY(-2px);
}
.woocommerce-product-gallery .wc-block-components-product-image,
.woocommerce div.product div.images img {
  border: 1px solid var(--wp--preset--color--accent);
  box-shadow: var(--frame-shadow);
  border-radius: var(--radius);
  padding: 10px;
  background: var(--wp--preset--color--surface);
}
.woocommerce table.shop_table, .wc-block-cart, .wc-block-checkout {
  --wc-blue: var(--wp--preset--color--accent);
}
.woocommerce table.shop_table { border-color: var(--line); }
.woocommerce table.shop_table th, .woocommerce table.shop_table td { border-color: var(--line); }

/*
 * Taste-check fix pass (2026-08-22): the Cart line item was showing the
 * product name twice — once as the real linked heading, once again in the
 * WooCommerce Cart block's own auto-generated "description" slot, which
 * falls back to an excerpt of the product's long description when no real
 * short description exists. For products whose CSV description field is
 * just the product name repeated (a source-data quality gap, not a build
 * bug — see punch-list.md), that excerpt is a verbatim duplicate. Rather
 * than leave a redundant line on every cart item, or hand-write short
 * descriptions for 121 products as part of a defect-fix pass, suppress the
 * slot itself: it never carries information the shopper doesn't already
 * have from the product name and image right next to it.
 */
.wc-block-components-product-metadata__description { display: none; }

/* ------------------------------------------------------------------ *
 * Taste-check fix pass (2026-08-22): text+image split sections
 * (.sig-feature, .sig-split, and the plain .sig .wp-block-columns
 * pattern used for Our Story's credentials section) hardcode
 * flex-direction: row / row-reverse inline, with flex-basis percentages
 * and no responsive breakpoint — so at 375px both columns were squeezed
 * to ~150-220px side by side instead of stacking, in one case (Home's
 * Mobile Lounge teaser) badly enough to overlap the CTA button with the
 * paragraph above it. Inline styles win over source order, so the
 * breakpoint below needs !important to actually override them.
 * ------------------------------------------------------------------ */
@media (max-width: 768px) {
  .sig__inner > .wp-block-columns[style*="display:flex"] {
    flex-direction: column !important;
    gap: clamp(1.5rem, 5vw, 2.5rem) !important;
  }
  .sig__inner > .wp-block-columns[style*="display:flex"] > * {
    flex: 1 1 100% !important;
    flex-basis: 100% !important;
    width: 100% !important;
  }
}


/* ------------------------------------------------------------------ *
 * Sitewide edge gutter -- .sig had zero horizontal padding anywhere,
 * so section content touched the viewport edge on every page (real
 * defect, confirmed via computed style: padding-left/margin-left were
 * both 0px on the hero and every other section). .sig itself stays
 * full-bleed for backgrounds (alignfull); the gutter lives on the
 * inner wrapper so readable content always has breathing room.
 * ------------------------------------------------------------------ */
.sig__inner {
  padding-inline: clamp(1.5rem, 4vw, 4rem);
}

.sig__inner p:has(> a.wp-block-button__link):not([style*="margin-top"]) {
  margin-top: 2rem;
}


/* ------------------------------------------------------------------ *
 * WooCommerce single-product title was inheriting the sitewide page-hero
 * H1 scale (clamp up to 5.5rem / ~88px at wide viewports) -- correct for
 * a standalone page headline, disproportionate next to a product's price
 * and Add to Cart button in the compact product-summary layout.
 * ------------------------------------------------------------------ */
body.single-product h1.wp-block-post-title,
.woocommerce div.product .product_title {
  font-size: clamp(1.75rem, 3vw, 2.75rem) !important;
  line-height: 1.15;
}


/* ------------------------------------------------------------------ *
 * Footer nav: client tried the two-column split and reverted it --
 * back to one column, spacing tightened instead (her stated fallback).
 * ------------------------------------------------------------------ */
.site-footer .wp-block-navigation__container {
  display: flex !important;
  flex-direction: column;
  gap: 0.5rem;
}

/* Footer logo mark: absolutely positioned above the first column so it
 * does NOT sit in normal flow -- the client's first version pushed the
 * "Unicorn Smokes" wordmark down inside its own column, throwing off
 * alignment against the nav and Premium Cigar Association columns
 * (which still start at the row's real top edge). Absolute positioning
 * keeps every column's actual first line aligned, with the mark
 * floating above as a visual flourish, not a layout participant. Sized
 * up (was 40px) so it reads as an intentional lockup element rather
 * than a small stray icon next to the now-larger visual gap it leaves.
 */
.site-footer .footer-logo-wrap {
  position: relative;
}
.site-footer .footer-logo {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 44px;
  height: 44px;
  background: var(--metallic);
  background-size: 220% 100%;
  -webkit-mask-image: var(--unicorn-mark);
  mask-image: var(--unicorn-mark);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.site-footer .footer-home-link {
  display: flex !important;
  align-items: center;
  min-height: 44px;
  padding-left: calc(44px + 0.65rem);
}

/* Legal/copyright band: copyright above the health-warning line, both
 * centered, per client request. */
.site-footer .legal-stack {
  text-align: center;
}
.site-footer .legal-stack p {
  margin: 0 0 0.4rem;
}


/* ------------------------------------------------------------------ *
 * .is-narrow was used throughout the site's hand-authored markup (22
 * occurrences across 6 main pages alone -- statement blocks, FAQ
 * sections, callouts) but had ZERO CSS definition anywhere in this
 * file. Every section meant to read as a centered, comfortable text
 * column (the FAQ block flagged directly: "full width and totally
 * aligned left") was instead spanning the section's full working width
 * edge to edge. This is very likely the dominant cause of the sitewide
 * "everything is full-width, left- or right-justified" impression --
 * not a one-off FAQ bug. Fixed once, sitewide, rather than patched
 * per section.
 * ------------------------------------------------------------------ */
.sig__inner.is-narrow {
  max-width: 760px;
  margin-inline: auto;
}


/* ------------------------------------------------------------------ *
 * Full-bleed hero background for content pages that had NO image at
 * all behind their headline (Our Story, Current Releases,
 * Authentication & Provenance all called for a hero image in their own
 * approved copy and never got one -- confirmed, not assumed). Reuses
 * the same photo-fallback texture/watermark language already used
 * elsewhere on the site rather than a random stock photo, so it reads
 * as an intentional placeholder consistent with the rest of the site,
 * not a licensing gamble -- swap for real photography later without
 * touching layout.
 * ------------------------------------------------------------------ */
.sig-hero.has-hero-bg {
  position: relative;
  min-height: 56vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--wp--preset--color--accent) 12%, transparent), transparent 60%),
    repeating-linear-gradient(135deg, color-mix(in srgb, var(--wp--preset--color--surface) 90%, black) 0 2px, var(--wp--preset--color--surface) 2px 4px);
}
.sig-hero.has-hero-bg::after {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 50%;
  background: var(--metallic);
  -webkit-mask-image: var(--unicorn-mark, none);
  mask-image: var(--unicorn-mark, none);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
  opacity: .22;
  pointer-events: none;
}
.sig-hero.has-hero-bg .sig__inner {
  position: relative;
  z-index: 1;
}

/* ------------------------------------------------------------------ *
 * Real full-bleed photographic hero: a genuine uploaded photo behind
 * the headline, edge-to-edge, replacing the CSS-texture placeholder for
 * any page that now has real imagery. Text sits in a fixed-width column
 * (not centered) so it can be positioned wherever the photo's own
 * composition leaves room -- the client's standing instruction is
 * full-width bleed on every hero going forward, any source photo ratio,
 * cropped via background-size:cover rather than resized by hand.
 * ------------------------------------------------------------------ */
.sig-hero.has-photo {
  position: relative;
  min-height: 88vh;
  display: flex;
  align-items: center;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}
.sig-hero.has-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(11,11,12,.85) 0%, rgba(11,11,12,.62) 40%, rgba(11,11,12,.25) 65%, transparent 85%);
  z-index: 1;
}
.sig-hero.has-photo .sig__inner {
  position: relative;
  z-index: 2;
  max-width: 840px;
  margin-inline: 0;
  padding-left: clamp(2rem, 7vw, 6rem);
}
/* The sitewide hero H1 size clamps up to 5.5rem based on VIEWPORT width,
 * with no awareness that this column is now much narrower than the old
 * two-column layout's ~half-viewport text side -- at a wide viewport it
 * was wrapping into 6+ lines and ballooning to 800px+ tall. Capped lower,
 * scoped to this hero variant only. */
.sig-hero.has-photo h1 {
  font-size: clamp(2.5rem, 3.8vw, 4.25rem);
  line-height: 1.1;
}
/* Shorter full-bleed variant for utility/secondary-page heroes (Journal,
 * Contact) -- still full-width bleed per the standing rule, just not the
 * full 88vh a primary page hero gets, so the actual page content (the
 * post list, the contact form) isn't pushed entirely below the fold. */
.sig-hero.has-photo.is-compact {
  min-height: 52vh;
}
@media (max-width: 780px) {
  .sig-hero.has-photo { min-height: 70vh; }
  .sig-hero.has-photo::before {
    background: linear-gradient(180deg, rgba(11,11,12,.35) 0%, rgba(11,11,12,.88) 55%, rgba(11,11,12,.95) 100%);
  }
  .sig-hero.has-photo .sig__inner { max-width: none; }
}
.sig-hero.has-hero-bg .sig__inner::before {
  content: "";
  position: absolute;
  inset: -1.5rem -2rem;
  background: linear-gradient(100deg, var(--wp--preset--color--background) 55%, transparent 100%);
  z-index: -1;
  border-radius: var(--radius);
}


/* ------------------------------------------------------------------ *
 * Sitewide section divider, applied automatically between every pair
 * of stacked .sig sections (no per-page markup edits needed). Modeled
 * on Exile Cigars' rule-flanked crest divider, but built thicker and
 * with a real glow -- Exile's version sits on a light cream page and
 * can afford to be subtle; Unicorn Smokes is black-on-black, so the
 * same subtlety would simply disappear. Unicorn head, not a crown,
 * rendered in the metallic gradient via the same mask technique used
 * for the logo/back-to-top/social icons.
 * ------------------------------------------------------------------ */
.sig {
  padding-block: clamp(4rem, 8vw, 6.5rem);
}
.sig + .sig {
  position: relative;
  padding-top: clamp(6rem, 11vw, 9rem);
}
.sig + .sig::before {
  content: "";
  position: absolute;
  top: 0;
  left: 7%;
  right: 7%;
  height: 1px;
  background: linear-gradient(
    to right,
    #8A6A28 0%, #F0D38C 20%, #BF8328 35%, #F5E0A8 48%,
    transparent calc(50% - 34px), transparent calc(50% + 34px),
    #F5E0A8 52%, #BF8328 65%, #F0D38C 80%, #8A6A28 100%
  );
  z-index: 2;
}
.sig + .sig::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  background: var(--metallic);
  background-size: 220% 100%;
  -webkit-mask-image: var(--unicorn-mark);
  mask-image: var(--unicorn-mark);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  z-index: 3;
  filter: drop-shadow(0 0 10px rgba(191,131,40,.6)) drop-shadow(0 2px 5px rgba(0,0,0,.7));
}


/* ------------------------------------------------------------------ *
 * The closing statement in every .sig-cta block ("The story is the
 * reason the collection looks the way it does...", "A curated
 * collection only means something if you can trust...", "Trust in a
 * rare cigar retailer isn't a claim...") was rendering as plain body
 * text right before the CTA button -- flagged directly as needing the
 * pull-quote/headline treatment the client referenced. Targets the
 * first <p> in every sig-cta block automatically (Mobile Lounge's
 * sig-cta opens with an <h2> instead, so it's naturally unaffected --
 * no per-page markup changes needed).
 * ------------------------------------------------------------------ */

/* sig-cta button (and any short line immediately following it) reads as part
 * of one centered closing statement -- match the pull-quote text above it. */
.sig-cta > .sig__inner > p:has(> a.wp-block-button__link),
.sig-cta > .sig__inner > p:has(> a.wp-block-button__link) + p {
  text-align: center;
}

/* sig-cta blocks read as one centered closing composition -- every direct
 * child (heading, body text, blockquote, links) centers, not just the
 * pull-quote/button pieces that already had their own rules. margin-inline
 * auto is needed alongside text-align because the sitewide 68ch paragraph
 * cap gives each <p> its own zero-margin box that text-align alone can't
 * re-center. */
.sig-cta > .sig__inner {
  text-align: center;
}
.sig-cta > .sig__inner > p,
.sig-cta > .sig__inner > blockquote,
.sig-cta > .sig__inner > h2,
.sig-cta > .sig__inner > h3 {
  margin-inline: auto;
}
.sig-cta > .sig__inner > p:first-child {
  font-family: var(--wp--preset--font-family--display);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 600;
  line-height: 1.3;
  color: var(--wp--preset--color--text);
  text-align: center;
  position: relative;
  padding-bottom: 2rem;
  margin-bottom: 2rem;
}
.sig-cta > .sig__inner > p:first-child::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 2px;
  background: var(--wp--preset--color--accent);
}


/* ------------------------------------------------------------------ *
 * Journal empty-state ("New entries are coming soon") was a bare,
 * unstyled paragraph floating in a large empty section -- give it the
 * same eyebrow/muted treatment as everything else so it reads as a
 * designed empty state, not a stray line.
 * ------------------------------------------------------------------ */

/* FAQ accordions (Current Releases, Mobile Lounge) use plain <details>/
 * <summary> with no open/close affordance at all -- add one. */
.sig details > summary {
  list-style: none;
  cursor: pointer;
  position: relative;
  padding-right: 3rem !important;
}
.sig details > summary::-webkit-details-marker { display: none; }
.sig details > summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 27px;
  height: 27px;
  border-radius: 50%;
  border: 1px solid var(--wp--preset--color--accent);
  text-align: center;
  line-height: 25px;
  font-size: 1.1rem;
  background: var(--metallic);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  transition: transform .3s var(--ease), border-color .3s var(--ease);
}
.sig details[open] > summary::after {
  transform: translateY(-50%) rotate(45deg);
}
/* Journal post-template cards had ZERO layout CSS at all -- they were
 * rendering as WordPress's raw default (a plain <ul><li> block stack, one
 * full-width post after another), which is why a single card's featured
 * image displayed at up to ~1400px wide: the image's own inline
 * aspect-ratio/object-fit/width:100% (correctly generated by Gutenberg's
 * post-featured-image block) was scaling to fill an entirely unconstrained
 * container, not a genuine layout bug in the image itself. Adding the
 * missing grid + card styling together, since .card also had no
 * background/padding/hover treatment defined anywhere in this file. */
.wp-block-query.sig .wp-block-post-template {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: stretch;
  list-style: none;
  padding: 0;
  margin: 0;
}
.wp-block-query.sig .wp-block-post-template > li {
  height: 100%;
  margin-block-start: 0 !important;
}
@media (max-width: 900px) {
  .wp-block-query.sig .wp-block-post-template { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .wp-block-query.sig .wp-block-post-template { grid-template-columns: 1fr; }
}
.wp-block-query.sig .card {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 0.85rem;
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.wp-block-query.sig .card:hover {
  transform: translateY(-6px);
  border-color: var(--wp--preset--color--accent);
  box-shadow: var(--frame-shadow);
}
.wp-block-query.sig .card h3 {
  font-family: var(--wp--preset--font-family--display);
  font-size: 1.15rem;
  line-height: 1.3;
  margin: 0;
}
.wp-block-query.sig .card h3 a {
  color: var(--wp--preset--color--text);
  text-decoration: none;
}
.wp-block-query.sig .card h3 a:hover {
  color: var(--wp--preset--color--accent);
}
.wp-block-query.sig .card p {
  color: var(--wp--preset--color--muted);
  font-size: 0.95rem;
  margin: 0;
}
.wp-block-query-no-results p {
  text-align: center;
  color: var(--wp--preset--color--muted);
  font-size: 1.05rem;
  letter-spacing: .02em;
  margin-inline: auto;
}

/* WooCommerce cart cross-sell ("New in store") product images had no
 * frame at all -- every other product image sitewide gets the gold
 * "under glass" frame; these were a plain WooCommerce default.
 */
.wc-block-cart-cross-sells-product img,
.wp-block-woocommerce-empty-cart-block img {
  border: 1px solid transparent;
  background:
    linear-gradient(var(--wp--preset--color--surface), var(--wp--preset--color--surface)) padding-box,
    var(--metallic) border-box;
  border-radius: var(--radius);
  padding: 6px;
}


/* ------------------------------------------------------------------ *
 * Full-bleed sitewide divider (gold line + Unicorn mark badge) right
 * before the footer, matching the same treatment used between every
 * .sig section -- turns the plain background-shade seam where the
 * footer's slightly lighter surface color begins into an intentional,
 * branded closing moment, on every page, not just ones that happen to
 * end with two .sig sections in a row.
 * ------------------------------------------------------------------ */
.site-footer {
  position: relative;
  padding-top: clamp(5rem, 9vw, 7rem);
}
.site-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 7%;
  right: 7%;
  height: 1px;
  background: linear-gradient(
    to right,
    #8A6A28 0%, #F0D38C 20%, #BF8328 35%, #F5E0A8 48%,
    transparent calc(50% - 34px), transparent calc(50% + 34px),
    #F5E0A8 52%, #BF8328 65%, #F0D38C 80%, #8A6A28 100%
  );
  z-index: 2;
}
.site-footer::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  background: var(--metallic);
  background-size: 220% 100%;
  -webkit-mask-image: var(--unicorn-mark);
  mask-image: var(--unicorn-mark);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  z-index: 3;
  filter: drop-shadow(0 0 10px rgba(191,131,40,.6)) drop-shadow(0 2px 5px rgba(0,0,0,.7));
}

/* Footer top spacing above the 3-column content row -- the gold rule
 * that used to sit here was removed once the full-bleed sitewide
 * divider (gold line + Unicorn mark badge) was added right above the
 * whole footer, making this second, narrower line redundant. */
.footer-columns {
  padding-top: 2rem;
}

/* ------------------------------------------------------------------ *
 * Single blog post featured image: the bare post-featured-image block
 * had no size cap at all, so it rendered at full native resolution
 * (up to ~1750px tall on a portrait upload). Cap it to a sane header
 * width/height, matching the framed treatment used everywhere else.
 * ------------------------------------------------------------------ */
main .wp-block-post-featured-image {
  max-width: 780px;
  margin: 1.5rem auto 2.5rem;
}

/* ------------------------------------------------------------------ *
 * Push the section divider down below full-bleed page heroes specifically,
 * so it stops sitting flush against the bottom edge of the hero photo
 * (blends into busy imagery, e.g. the envelope art on Contact).
 * ------------------------------------------------------------------ */
.sig-hero + .sig::before,
.sig-hero + .sig::after {
  top: 32px;
}

/* ------------------------------------------------------------------ *
 * Single blog post title was rendering at the theme's base xx-large
 * preset (76.8px) with no override -- noticeably bigger than every
 * page's own hero H1 (48.64px at the same viewport). Match the hero's
 * own clamp for visual consistency across the site.
 * ------------------------------------------------------------------ */
main .wp-block-post-title {
  font-size: clamp(2.5rem, 3.8vw, 4.25rem);
  line-height: 1.1;
  text-align: center;
  margin-top: clamp(1.5rem, 4vw, 3rem) !important;
  margin-block-start: clamp(1.5rem, 4vw, 3rem) !important;
}

/* ------------------------------------------------------------------ *
 * Fallback shown in the featured-image slot when a blog post has no
 * photo (see functions.php's post-featured-image render filter): the
 * same .framed gold-bordered box every real photo uses, with the site's
 * own Unicorn mark centered inside instead of a blank gap.
 * ------------------------------------------------------------------ */
.unicorn-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
}
.unicorn-fallback__mark {
  width: 55%;
  max-width: 340px;
  aspect-ratio: 1;
  background: var(--metallic);
  background-size: 220% 100%;
  -webkit-mask-image: var(--unicorn-mark);
  mask-image: var(--unicorn-mark);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

/* Extra breathing room below the Shop page's own hero specifically
 * (scoped to .shop-hero, not the sitewide .sig-hero.has-photo rule)
 * before the breadcrumbs/product grid that follows it. */
.shop-hero {
  margin-bottom: 40px !important;
  margin-block-end: 40px !important;
}