/*
Theme Name: Jessica Ashby Art
Theme URI: https://www.jessicaashby.co.uk/
Author: Red Eagle Tech
Author URI: https://redeagle.tech/
Description: Bespoke theme for Jessica Ashby Art — North London artist running painting workshops, selling art prints and offering body-paint services. Brand-faithful rebuild of the previous Wix site (ticket #603).
Version: 1.1.0
Requires at least: 6.4
Requires PHP: 8.2
License: Proprietary
Text Domain: jessashby
*/

/* ==========================================================================
   Design tokens — sampled from the live Wix site (H1 design-fidelity pass):
   #333 ink, flat colour bands (yellow #FFF000, coral #FF6160), turquoise pill
   buttons, pale-yellow form fills, cream footer, and her own painted textures
   as backgrounds (all under assets/images/wix/).
   ========================================================================== */

/* Anton — bundled fallback for Impact (see --font-heading). Latin subset only: the site
   is English; anything else falls through to the rest of the stack. */
@font-face {
  font-family: "Anton";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/anton-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --pink: #ff1e8e;
  --pink-deep: #d1006b;
  --yellow: #fff000;
  --coral: #ff6160;
  --cyan: #1fd6d6;
  --cyan-deep: #00a8a8;
  --teal-band: #8bd0c3;
  --pink-band: #ffbed3;
  --grey-band: #dbdbdb;
  --page-grey: #e8e6e6;
  --cream: #fff1d4;
  --input-fill: #fff9e1;
  --ink: #333333;
  --ink-soft: #5a5a66;
  --paper: #ffffff;
  --paper-tint: #faf7f2;
  --rule: rgba(51, 51, 51, 0.14);

  /* Wix type, verified against the SERVED CSS (2026-07-30, AC3 ticket #603): body copy is
     Helvetica (helvetica-w01 roman/bold), but the headings and the nav menu carry inline
     impact-w01-2010 overrides — the display face is IMPACT, not Helvetica. Wix serves
     Impact as a webfont; iOS/Android do not ship it, so the bundled Anton (OFL, the
     standard Impact-alike) fills in there while desktop renders true Impact. Both faces
     are single-weight: anywhere --font-heading applies, font-weight MUST be 400, or the
     browser synthesises an ugly fake bold. */
  --font-heading: Impact, "Anton", "Arial Narrow Bold", Haettenschweiler, sans-serif;
  --font-body: "Helvetica Neue", Helvetica, Arial, sans-serif;

  --wrap: 1180px;
  --wrap-narrow: 900px;
  --gap: clamp(1rem, 3vw, 2rem);
  --section-y: clamp(2.75rem, 6vw, 4.5rem);
  --radius: 8px;
  --shadow: 0 10px 30px rgba(43, 43, 51, 0.10);
}

/* ==========================================================================
   Reset / base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--ink); text-underline-offset: 3px; }
a:hover { color: var(--pink-deep); }
:focus-visible { outline: 3px solid var(--cyan-deep); outline-offset: 3px; border-radius: 4px; }

/* Wix headings: Impact via inline overrides in the served markup, ~38-60px, near-black. */
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 400; /* single-weight face — see the --font-heading note */
  line-height: 1.3;
  letter-spacing: 0.01em;
  color: var(--ink);
  margin: 0 0 0.5em;
  text-wrap: balance;
}
h1, h2 { font-size: clamp(1.7rem, 1.4rem + 1.4vw, 2.375rem); }
h3 { font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem); }
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.wrap-narrow { width: min(100% - 2.5rem, var(--wrap-narrow)); margin-inline: auto; }
.section { padding-block: var(--section-y); }
.text-center { text-align: center; }
.lede { font-size: 1.02rem; color: var(--ink); }
.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--ink); color: #fff; padding: 0.75rem 1.25rem;
}
.skip-link:focus { left: 0; }

/* ==========================================================================
   Buttons — Wix uses small turquoise pills with dark text
   ========================================================================== */
.btn {
  display: inline-block; border: 0; cursor: pointer;
  font-family: var(--font-body); font-weight: 700; font-size: 0.92rem; /* Wix pills are Helvetica bold, not Impact */
  letter-spacing: 0.01em; text-decoration: none;
  padding: 0.7rem 1.9rem; border-radius: 999px;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.btn-cyan, .btn-pink, .btn-ink { background: var(--cyan); color: var(--ink); }
.btn-cyan:hover, .btn-pink:hover, .btn-ink:hover { background: var(--cyan-deep); color: #fff; }
.btn-outline { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.btn-outline:hover { background: var(--ink); color: #fff; }

/* ==========================================================================
   Header — the painted-mural band from the Wix site, wordmark + white nav on top
   ========================================================================== */
.site-header {
  position: relative; z-index: 100;
  /* 78%, not 32%: the painted FACE occupies rows ~45-90% of the mural, so a low
     position framed hair and sky (AC2, ticket #603). If the framing ever drifts,
     tune this against the rendered header at desktop AND mobile widths — the
     visible band is a different slice of the image at each. */
  background: #2c3550 url("assets/images/wix/header-mural.jpg") center 78% / cover no-repeat;
  min-height: clamp(150px, 19.5vw, 280px);
}
.header-inner {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--gap); padding-block: 1rem;
}
.brand { display: inline-flex; align-items: center; gap: 0.35rem; text-decoration: none; flex-shrink: 0; }
.brand-logo img { width: auto; height: clamp(44px, 5.5vw, 66px); }
.brand-block {
  font-family: var(--font-heading); font-weight: 400;
  font-size: clamp(1rem, 0.85rem + 0.55vw, 1.35rem);
  letter-spacing: -0.01em; padding: 0.22em 0.5em; line-height: 1.1;
}
.brand-first { background: var(--pink); color: var(--yellow); }
.brand-last { background: var(--yellow); color: var(--pink); transform: translateY(4px); }

.nav-toggle {
  display: none; background: none; border: 0; cursor: pointer;
  padding: 0.5rem; color: #fff;
}
.nav-toggle svg { width: 28px; height: 28px; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.6)); }

.site-nav ul { display: flex; align-items: center; gap: clamp(0.8rem, 1.6vw, 1.4rem); list-style: none; margin: 0; padding: 0; }
.site-nav a {
  /* The Wix nav is Impact white on the mural (StylableHorizontalMenu inline style). */
  font-family: var(--font-heading); font-weight: 400; font-size: 1rem;
  color: #fff; text-decoration: none; padding: 0.35rem 0;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
}
.site-nav a:hover { color: var(--yellow); }
.site-nav .current-menu-item > a, .site-nav .current_page_item > a,
.site-nav .current-menu-ancestor > a { color: var(--yellow); }

/* Events dropdown (AC8, ticket #603) — children are injected in code from the published
   sub-pages of /events/ (functions.php), so the menu maintains itself as events come and
   go. Hover for mouse, :focus-within for keyboard; a solid panel because the parent bar
   sits on the mural artwork. */
.site-nav li { position: relative; }
.site-nav li.menu-item-has-children > a::after {
  content: "▾"; display: inline-block; margin-left: 0.3em; font-size: 0.75em;
  transform: translateY(-1px);
}
.site-nav .sub-menu {
  display: none; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  min-width: 240px; padding: 0.45rem 0; margin: 0; list-style: none;
  background: #fff; border-radius: 6px; box-shadow: var(--shadow); z-index: 130;
}
.site-nav li:hover > .sub-menu, .site-nav li:focus-within > .sub-menu { display: block; }
.site-nav .sub-menu a {
  display: block; padding: 0.55rem 1.15rem; color: var(--ink);
  font-size: 0.95rem; text-shadow: none; white-space: nowrap;
}
.site-nav .sub-menu a:hover { color: var(--pink-deep); background: var(--paper-tint); }
.site-nav .sub-menu .current-menu-item > a { color: var(--pink-deep); }
.header-cart { position: relative; display: inline-flex; align-items: center; color: #fff; text-decoration: none; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5)); }
.header-cart svg { width: 22px; height: 22px; }
.header-cart .count {
  position: absolute; top: -7px; right: -9px; min-width: 19px; height: 19px;
  background: var(--pink); color: #fff; border-radius: 999px;
  font-size: 0.7rem; font-weight: 700; line-height: 19px; text-align: center; padding: 0 4px;
}

@media (max-width: 860px) {
  .nav-toggle { display: inline-flex; }
  .site-nav {
    position: absolute; inset: 100% 0 auto 0; background: #23252b;
    display: none; box-shadow: var(--shadow); z-index: 110;
  }
  .site-nav.is-open { display: block; }
  .site-nav ul { flex-direction: column; align-items: stretch; gap: 0; padding: 0.5rem 1.25rem 1.25rem; }
  .site-nav li { border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
  .site-nav a { display: block; padding: 0.9rem 0; text-shadow: none; }
  /* On mobile the dropdown is always expanded inline — a hover panel has no hover to
     open it, and hiding pages behind a second tap loses them. */
  .site-nav .sub-menu {
    display: block; position: static; transform: none; min-width: 0;
    background: none; box-shadow: none; padding: 0 0 0.4rem 1rem;
  }
  .site-nav .sub-menu li { border-bottom: 0; }
  .site-nav .sub-menu a { color: rgba(255, 255, 255, 0.85); padding: 0.45rem 0; font-size: 0.92rem; }
  .site-nav .sub-menu a:hover { background: none; color: var(--yellow); }
  .site-nav li.menu-item-has-children > a::after { content: none; }
}

/* ==========================================================================
   Home sections (front-page.php) — Wix's stacked colour bands
   ========================================================================== */

/* 1. White intro under the mural */
.home-intro { padding-block: clamp(2rem, 4.5vw, 3rem); text-align: center; }
.home-intro p { max-width: 78ch; margin-inline: auto; }

/* 2. Yellow band: white card + rotated photo collage */
.block-yellow { background: var(--yellow); }
.band-split { display: grid; gap: clamp(1.5rem, 4vw, 3rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); align-items: center; }
.band-card { background: #fff; padding: clamp(1.75rem, 4vw, 3rem); text-align: center; }
.band-card .btn { margin-top: 1rem; }
/* Rounds 3+4, the collage: the Wix honeycomb is an EIGHT-tile vertical chain —
   pairs and nested single centres alternating (2-1-2-1-2) with a uniform white
   lattice. Each tile is its own diamond: a 4x6 grid with overlapping 2x2 areas;
   in each area the tile is a centred square at 1/sqrt(2) of the box PLUS one
   border width, rotated 45deg — the extra width makes neighbouring borders
   overlap exactly, so interior lines match the single-border outer rim (round-4
   feedback: no double-width channels). Nothing is ever clipped: the round-3
   rewrite already dropped the rotate-the-whole-grid + overflow-hidden approach
   that sliced the outer corners. Per-slot object-position classes reproduce the
   old gallery's focal crops. */
.collage-frame { padding: clamp(0.25rem, 2vw, 1rem); }
.collage {
  --tile-border: 7px;
  display: grid; grid-template: repeat(6, 1fr) / repeat(4, 1fr);
  aspect-ratio: 2 / 3; width: 100%; max-width: 440px; margin-inline: auto;
}
.collage .tile:nth-child(1) { grid-area: 1 / 1 / 3 / 3; }
.collage .tile:nth-child(2) { grid-area: 1 / 3 / 3 / 5; }
.collage .tile:nth-child(3) { grid-area: 2 / 2 / 4 / 4; z-index: 1; } /* centres nest over the pair boxes */
.collage .tile:nth-child(4) { grid-area: 3 / 1 / 5 / 3; }
.collage .tile:nth-child(5) { grid-area: 3 / 3 / 5 / 5; }
.collage .tile:nth-child(6) { grid-area: 4 / 2 / 6 / 4; z-index: 1; }
.collage .tile:nth-child(7) { grid-area: 5 / 1 / 7 / 3; }
.collage .tile:nth-child(8) { grid-area: 5 / 3 / 7 / 5; }
/* White-bordered tiles that open the lightbox, flat like the Wix original. */
.collage .tile {
  display: block; overflow: hidden;
  width: calc(70.7% + var(--tile-border)); aspect-ratio: 1; place-self: center;
  transform: rotate(45deg);
  background: rgba(255, 255, 255, 0.35);
  border: var(--tile-border) solid #fff;
  cursor: zoom-in;
}
.collage .tile img { width: 100%; height: 100%; object-fit: cover; transform: rotate(-45deg) scale(1.45); transition: transform 0.25s ease; }
.collage .tile:hover img { transform: rotate(-45deg) scale(1.52); }
/* Focal crops matched by eye against the old gallery (slot = lattice position).
   front-page.php emits tile-pos-N on EVERY slot; slots absent here (5/6/7) are
   correct on the default centre crop, and the class means a future crop tweak
   is one line in this list. */
.collage .tile-pos-1 img { object-position: 62% 55%; }
.collage .tile-pos-2 img { object-position: 50% 25%; }
.collage .tile-pos-3 img { object-position: 50% 12%; }
.collage .tile-pos-4 img { object-position: 50% 18%; }
.collage .tile-pos-8 img { object-position: 50% 38%; }

/* 3. Coral testimonials: photo-backed cards, coral names, white copy */
.block-coral { background: var(--coral); }
.block-coral > .wrap > h2 { color: #fff; text-align: center; }
.t-card {
  position: relative; overflow: hidden; border-radius: 4px;
  min-height: 520px; background-size: cover; background-position: center top;
  display: flex; flex-direction: column; justify-content: flex-start;
  padding: 2rem 1.5rem;
}
/* Darker scrim + larger bold copy: the card backgrounds are busy photos, and the old
   site sets its testimonials big and bold (round 2, item 4). */
.t-card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(30, 39, 58, 0.78), rgba(30, 39, 58, 0.92)); }
.t-card > * { position: relative; }
.t-card cite { font-style: normal; font-weight: 700; color: var(--coral); display: block; text-align: center; }
.t-card .quote-role { display: block; text-align: center; font-weight: 700; color: var(--coral); font-size: 0.9rem; margin-bottom: 1.1rem; }
/* Larger + bold: the card backgrounds are busy photos and the old site sets its
   testimonials big and bold (round 2, item 4). */
.t-card blockquote { margin: 0; color: #fff; text-align: center; font-size: 1.08rem; font-weight: 700; line-height: 1.6; }
.t-card .quote-mark { color: var(--coral); font-size: 3rem; line-height: 1; font-weight: 700; margin-top: auto; }

/* 4. "View & Purchase Art" on her paint-strokes texture — Wix shows it heavily veiled in white,
   so the strokes read as a pale wash, not full-strength colour. */
.band-strokes-light { background: linear-gradient(rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)), url("assets/images/wix/strokes.jpg") center / cover no-repeat var(--paper); }
.print-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: clamp(1rem, 2.5vw, 1.75rem); margin-top: 2.25rem; }
.print-strip a { display: block; }
.print-strip img { width: 100%; aspect-ratio: 1; object-fit: cover; }

/* 5. Body Paint: purple/magenta gradient band with a photo row */
.band-purple {
  background: linear-gradient(140deg, #6a35c2 0%, #a44fd0 32%, #d0559a 58%, #e17ab0 76%, #35c9dd 100%);
  color: #fff;
}
.band-purple h2 { color: #fff; text-align: center; }
.band-purple .band-sub { text-align: center; color: rgba(255, 255, 255, 0.95); }
.photo-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: clamp(1rem, 2.5vw, 1.75rem); margin-top: 2rem; }
.photo-strip img { width: 100%; aspect-ratio: 1; object-fit: cover; }

/* 6. Contact on the yellow-black paint texture — like the strokes, Wix veils it almost to cream. */
.band-wash { background: linear-gradient(rgba(255, 250, 238, 0.90), rgba(255, 250, 238, 0.90)), url("assets/images/wix/wash-watercolour.jpg") center / cover no-repeat var(--paper); }
.contact-grid { display: grid; gap: clamp(1.5rem, 4vw, 3rem); grid-template-columns: 1.4fr 1fr; align-items: start; }
@media (max-width: 800px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-dark {
  background: #3b3b3b; color: rgba(255, 255, 255, 0.94); border-radius: 10px;
  padding: clamp(1.5rem, 3vw, 2.25rem);
}
.contact-dark h3 { color: #fff; }
.contact-dark a { color: #fff; font-weight: 400; }
.contact-dark a:hover { color: var(--yellow); }
.contact-dark dt { font-weight: 700; margin-top: 1rem; }
.contact-dark dd { margin: 0.2rem 0 0; }

/* ==========================================================================
   Generic inner-page banner (white, centred, Wix-style plain heading)
   ========================================================================== */
.page-banner { background: var(--paper); padding-block: clamp(1.75rem, 4vw, 2.75rem) 0.5rem; text-align: center; }
.page-banner h1 { margin: 0; }
.page-banner p { color: var(--ink); margin: 0.6rem auto 0; max-width: 60ch; }

/* Colour blocks kept for content use */
.block-pink { background: var(--pink); color: #fff; }
.block-pink h2, .block-pink h3 { color: #fff; }
.block-cyan { background: var(--cyan); }
.block-tint { background: var(--paper-tint); }

/* ==========================================================================
   About page — white card floating on her hot-pink painted texture
   ========================================================================== */
body.page-about { background: #b52d5e url("assets/images/wix/texture-pink.jpg") center / cover fixed no-repeat; }
body.page-about .site-footer { margin-top: 0; }
.page-card { background: #fff; padding: clamp(1.75rem, 4vw, 3rem); margin-block: clamp(2rem, 5vw, 3.5rem); }
.page-card h1 { text-align: left; }
.about-portrait { float: right; width: min(46%, 420px); margin: 0 0 1.25rem 1.75rem; }
@media (max-width: 700px) { .about-portrait { float: none; width: 100%; margin: 0 0 1.25rem; } }
.about-contact-band { background: var(--cream); padding-block: clamp(2rem, 5vw, 3rem); }
.about-contact-band .page-card { margin-block: 0; }

/* ==========================================================================
   Events index — full-width colour band per event, as on Wix
   ========================================================================== */
body.page-events { background: var(--page-grey); }
.events-intro { background: var(--paper); padding-block: clamp(1.5rem, 4vw, 2.5rem); text-align: center; }
.events-intro .wrap-narrow p { max-width: 84ch; margin-inline: auto; }
.event-band { padding-block: clamp(2.5rem, 6vw, 4rem); }
.event-band h2 { text-align: center; }
.event-band h2 a { text-decoration: none; color: inherit; }
.band-strokes { background: linear-gradient(rgba(252, 248, 240, 0.85), rgba(252, 248, 240, 0.85)), url("assets/images/wix/strokes.jpg") center / cover no-repeat var(--page-grey); }
.band-eventpink { background: var(--pink-band); }
.band-grey { background: var(--grey-band); }
.band-teal { background: var(--teal-band); }
.band-cream { background: var(--cream); }
.event-hero { margin: 1.5rem auto; max-width: 975px; }
.event-hero img { width: 100%; height: auto; }
.event-copy { max-width: 900px; margin-inline: auto; }
.event-copy h3 { margin-top: 1.4em; }
.event-facts { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; gap: 0.35rem; }
.event-facts b { font-weight: 700; }
.event-upcoming { font-weight: 700; margin-top: 1.6rem; }

/* Event pages themselves reuse the band colour behind a white content card */
.event-page-band { padding-block: clamp(1.5rem, 4vw, 2.5rem); }
.event-page-band .page-card { margin-block: 0; }

/* ==========================================================================
   DesignMyNight ticketing embed
   ========================================================================== */
.dmn-embed { background: transparent; padding: 0; margin-top: 1.25rem; }
/* The consent gate must read as a deliberate booking card, not a broken widget
   (round 2, item 1 - the click-through itself was verified working). */
.dmn-consent {
  background: #fff; border: 1px solid var(--rule); border-radius: 8px;
  padding: 2rem 1.5rem 1.75rem; text-align: center; box-shadow: var(--shadow);
}
.dmn-consent::before {
  content: "📅"; display: block; font-size: 2rem; line-height: 1; margin-bottom: 0.75rem;
}
.dmn-consent .dmn-lead { max-width: 52ch; margin-inline: auto; font-weight: 700; }
.dmn-consent .btn { margin: 0.75rem 0 0.5rem; font-size: 1rem; padding: 0.8rem 2.4rem; }
/* Which half of the card shows follows the stored choice (round 3): theme.js
   stamps data-cookie-consent on <html>. Declined stays hidden until JS says so,
   so no-JS visitors keep the accept card + the direct booking link. */
.dmn-when-declined { display: none; }
html[data-cookie-consent="declined"] .dmn-when-unset { display: none; }
html[data-cookie-consent="declined"] .dmn-when-declined { display: block; }
.dmn-embed h3 { margin-bottom: 0.9rem; }
.dmn-embed iframe { width: 100%; min-height: 620px; border: 0; border-radius: 6px; background: #fff; display: block; }
.dmn-fallback { font-size: 0.9rem; color: var(--ink-soft); margin-top: 0.75rem; }

/* ==========================================================================
   Blog — white column on the black & white graffiti wall
   ========================================================================== */
body.blog, body.single-post { background: #1c1c1c url("assets/images/wix/graffiti.jpg") center top / cover fixed no-repeat; }
.blog-column { background: #fff; padding: clamp(1.25rem, 3vw, 2.5rem); margin-block: 0 clamp(2rem, 5vw, 3rem); }
.blog-column > h1 { margin-bottom: 1.5rem; }
.post-row { display: grid; grid-template-columns: minmax(180px, 300px) 1fr; gap: clamp(1rem, 2.5vw, 1.75rem); padding-block: 1.5rem; border-bottom: 1px solid var(--rule); align-items: start; }
.post-row:last-child { border-bottom: 0; }
@media (max-width: 640px) { .post-row { grid-template-columns: 1fr; } }
.post-row img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.post-row h2 { font-size: 1.35rem; margin-bottom: 0.4rem; }
.post-row h2 a { text-decoration: none; }
.post-row .entry-meta { margin-bottom: 0.6rem; }
body.single-post .blog-column { margin-top: 0; }

/* ==========================================================================
   WooCommerce — plain Wix-like tiles: image, light name, from-price
   ========================================================================== */
.woocommerce ul.products { display: grid; gap: clamp(1.25rem, 3vw, 2rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); margin: 0; padding: 0; list-style: none; }
/* WooCommerce core puts a table clearfix (::before/::after) on ul.products; under display:grid the
   ::before becomes an anonymous grid item that occupies the FIRST CELL (a blank tile). Kill both. */
.woocommerce ul.products::before, .woocommerce ul.products::after { content: none; }
.woocommerce ul.products li.product { margin: 0 !important; width: auto !important; float: none !important; text-align: left; position: relative; }
.woocommerce ul.products li.product a img { border-radius: 0; box-shadow: none; margin-bottom: 0.75rem; }
.woocommerce ul.products li.product .woocommerce-loop-product__title { font-family: var(--font-body); font-weight: 400; font-size: 1rem !important; padding: 0 !important; color: var(--ink); }
.woocommerce ul.products li.product .price { color: var(--ink) !important; font-weight: 400; font-size: 0.95rem; }
.badge-bestseller {
  position: absolute; top: 0; left: 0; z-index: 5;
  background: #1e5ae8; color: #fff; font-size: 0.8rem; font-weight: 400;
  padding: 0.3rem 0.7rem;
}
/* Wix shop shows no result count or sort dropdown */
.woocommerce .woocommerce-result-count, .woocommerce .woocommerce-ordering { display: none; }
.woocommerce-products-header { text-align: center; }
.woocommerce span.onsale { background: var(--pink); color: #fff; border-radius: 999px; min-height: 0; line-height: 1; padding: 0.45rem 0.9rem; font-weight: 700; top: 0.7rem; left: 0.7rem; margin: 0; }
/* Buttons (add-to-basket arrives with Stripe): Wix uses a flat blue rectangle */
.woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit.alt, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt {
  background: #1e5ae8; color: #fff; border-radius: 3px; font-family: var(--font-body);
  font-weight: 400; padding: 0.85rem 1.8rem;
}
.woocommerce #respond input#submit:hover, .woocommerce a.button:hover, .woocommerce button.button:hover,
.woocommerce input.button:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover {
  background: #1747b8; color: #fff;
}
.woocommerce div.product .product_title { font-weight: 400; margin-bottom: 0.3rem; }
.woocommerce div.product p.price, .woocommerce div.product span.price { color: var(--ink); font-size: 1.1rem; font-weight: 400; }
.woocommerce .quantity .qty { padding: 0.5rem; border: 1px solid var(--rule); border-radius: 3px; }

/* Shop closed / browse-only notice (checkout disabled pending the client's Stripe onboarding) */
.shop-notice {
  background: var(--yellow); border-radius: 4px; padding: 0.85rem 1.2rem;
  margin-bottom: 1.75rem; font-weight: 400; font-size: 0.95rem;
}
.shop-notice strong { font-weight: 700; }

/* Sizes + prices on a product page, standing in for the variations selector that browse-only
   removes. Capped in width so two short columns do not stretch across a desktop layout. */
.size-price {
  border-collapse: collapse; width: 100%; max-width: 22rem; margin: 1.25rem 0 0;
}
.size-price caption {
  text-align: left; font-weight: 700; font-size: 0.92rem; padding-bottom: 0.4rem;
}
.size-price th, .size-price td {
  border-bottom: 1px solid rgba(0, 0, 0, 0.12); padding: 0.55rem 0; font-size: 0.98rem;
}
.size-price th { text-align: left; font-weight: 400; }
.size-price td { text-align: right; font-weight: 700; white-space: nowrap; }

/* ==========================================================================
   Forms (Contact Form 7) — Wix's pale-yellow fills and turquoise Send
   ========================================================================== */
.wpcf7 form { display: grid; gap: 1rem; }
.wpcf7 label { display: block; font-weight: 700; font-size: 0.92rem; margin-bottom: 0.35rem; }
.wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 input[type="tel"], .wpcf7 textarea {
  width: 100%; padding: 0.8rem 0.9rem; border: 0; border-radius: 2px;
  font: inherit; background: var(--input-fill); color: var(--ink);
  box-shadow: inset 0 0 0 1px rgba(51, 51, 51, 0.10);
}
.wpcf7 input:focus, .wpcf7 textarea:focus { outline: none; box-shadow: inset 0 0 0 2px var(--cyan-deep); }
.wpcf7 input[type="submit"] {
  background: var(--cyan); color: var(--ink); border: 0; border-radius: 999px;
  font-family: var(--font-body); font-weight: 700; font-size: 0.95rem;
  padding: 0.8rem 2.4rem; cursor: pointer; justify-self: stretch;
}
.wpcf7 input[type="submit"]:hover { background: var(--cyan-deep); color: #fff; }
.wpcf7-response-output { border-radius: 4px; padding: 0.9rem 1.1rem !important; margin: 0 !important; }
.form-cols-2 { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; }
@media (max-width: 560px) { .form-cols-2 { grid-template-columns: 1fr; } }

/* ==========================================================================
   Editorial content (pages + posts)
   ========================================================================== */
.entry-content > * + * { margin-top: 1.15em; }
.entry-content h2 { margin-top: 1.8em; }
.entry-content h3 { margin-top: 1.5em; }
.entry-content img { border-radius: 4px; }
.entry-content blockquote {
  margin: 1.8em 0; padding: 1rem 1.5rem; border-left: 5px solid var(--yellow);
  background: var(--paper-tint); border-radius: 0 4px 4px 0;
}
.entry-content ul, .entry-content ol { padding-left: 1.4rem; }

/* Tables in editorial copy — first used by the delivery timescales on Delivery & returns.
   The overflow goes on the FIGURE, never on the table itself: `display: block` on a <table>
   discards the table layout algorithm, so columns stop sizing to content and border-collapse
   is left undefined by the spec. `figure.wp-block-table` is what the block editor emits, so
   hand-authored content uses the same wrapper to get the same behaviour. Without it a wide
   table scrolls the whole PAGE sideways on a phone instead of scrolling itself. */
.entry-content figure.wp-block-table { overflow-x: auto; }
.entry-content table {
  width: 100%; border-collapse: collapse; font-size: 0.97rem;
}
.entry-content th, .entry-content td {
  padding: 0.6rem 0.9rem; border-bottom: 1px solid var(--rule);
  text-align: left; vertical-align: top;
}
.entry-content thead th { border-bottom-width: 2px; }
.entry-content tbody tr:last-child td { border-bottom: none; }

.entry-meta { color: var(--ink-soft); font-size: 0.92rem; margin-bottom: 1.5rem; }

/* Gallery blocks (AC6: the body-paint portfolio) — the block library handles columns;
   this evens the tiles out so a mixed portrait/landscape set reads as a clean grid,
   like the Wix gallery it mirrors. The ratio goes on the FIGURE (its width is definite
   from the flex row, so the height derives) and the img just fills the box — putting
   aspect-ratio on an img that also has height:100% collides with core's is-cropped rules. */
.entry-content .wp-block-gallery { gap: 0.6rem; }
.entry-content .wp-block-gallery .wp-block-image { aspect-ratio: 1 / 1; }
.entry-content .wp-block-gallery .wp-block-image img {
  border-radius: 4px; width: 100%; height: 100%; object-fit: cover;
}

.pagination { display: flex; gap: 0.5rem; justify-content: center; margin-top: 3rem; flex-wrap: wrap; }
.pagination .page-numbers {
  display: inline-block; padding: 0.6rem 1rem; border-radius: 999px;
  text-decoration: none; background: var(--paper-tint); color: var(--ink); font-weight: 700;
}
.pagination .page-numbers.current, .pagination .page-numbers:hover { background: var(--pink); color: #fff; }

/* Cards kept for general use (search results etc.) */
.grid { display: grid; gap: clamp(1.25rem, 3vw, 2rem); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.card { background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column; }
.card-media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--paper-tint); }
.card-media img { width: 100%; height: 100%; object-fit: cover; }
.card-body { padding: 1.35rem; display: flex; flex-direction: column; gap: 0.6rem; flex: 1; }
.card a.stretched { text-decoration: none; color: inherit; }
.split { display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.split-media img { border-radius: 4px; }

/* ==========================================================================
   Footer — the slim cream strip from the Wix site
   ========================================================================== */
.site-footer { background: var(--cream); color: var(--ink); padding-block: 1.4rem; text-align: center; font-size: 0.9rem; }
.site-footer p { margin: 0.25rem 0; }
.site-footer a { color: var(--ink); }
.site-footer .footer-logo { height: 18px; width: auto; display: inline-block; vertical-align: -3px; margin-left: 0.35rem; }
.footer-social { display: inline-flex; gap: 0.75rem; margin-left: 0.75rem; vertical-align: middle; }
.footer-social a { color: var(--ink); }
.footer-social svg { width: 16px; height: 16px; }

/* Floating social rail — pinned to the right edge, as on Wix */
.social-rail { position: fixed; right: 0.75rem; top: 50%; transform: translateY(-50%); z-index: 90; display: grid; gap: 0.9rem; }
.social-rail a { color: var(--ink); }
.social-rail a:hover { color: var(--pink); }
.social-rail svg { width: 20px; height: 20px; }
@media (max-width: 1100px) { .social-rail { display: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .btn:hover { transform: none; }
}

/* ==========================================================================
   Round-2 feedback additions (ticket #603): lightbox, powered-by badge,
   body-paint enquiry layout
   ========================================================================== */

/* Collage lightbox */
body.lightbox-open { overflow: hidden; }
.lightbox-overlay {
  position: fixed; inset: 0; z-index: 999; display: none;
  align-items: center; justify-content: center;
  background: rgba(12, 12, 16, 0.88); padding: clamp(1rem, 4vw, 3rem);
}
.lightbox-overlay.is-open { display: flex; }
.lightbox-overlay img {
  max-width: min(92vw, 1100px); max-height: 86vh; width: auto; height: auto;
  border-radius: 4px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); background: #fff;
}
.lightbox-overlay button {
  position: absolute; background: none; border: 0; color: #fff; cursor: pointer;
  font-size: 2rem; line-height: 1; padding: 0.6rem 0.9rem; opacity: 0.85;
}
.lightbox-overlay button:hover { opacity: 1; }
.lightbox-close { top: 0.8rem; right: 1rem; font-size: 2.6rem; }
.lightbox-prev { left: 0.6rem; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 0.6rem; top: 50%; transform: translateY(-50%); }

/* "Powered by Red Eagle Tech" badge - the official light-background brand
   artwork (round 3), full colour on transparency, so no pill behind it. */
.powered-by {
  display: inline-flex; align-items: center; vertical-align: middle;
  margin-left: 0.75rem; transition: opacity 0.2s ease;
}
.powered-by:hover { opacity: 0.75; }
.powered-by img { height: 32px; width: auto; display: block; }

/* Body-paint enquiry section (template-body-paint.php) - coral band heading,
   dark contact card + cyan form on the paint-strokes wash, like the old site. */
.bp-enquire-band { background: var(--coral); padding-block: clamp(1.1rem, 3vw, 1.7rem); text-align: center; }
.bp-enquire-band h2 { color: #fff; margin: 0; }
.bp-enquire { position: relative; background: url("assets/images/wix/strokes.jpg") center / cover; }
.bp-enquire::before { content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, 0.85); }
.bp-enquire > .wrap { position: relative; }
.bp-enquire-grid {
  display: grid; gap: clamp(1.5rem, 4vw, 3rem);
  grid-template-columns: minmax(300px, 440px) 1fr; align-items: start;
}
@media (max-width: 860px) { .bp-enquire-grid { grid-template-columns: 1fr; } }
.bp-contact-card { background: #2b2b31; color: #fff; padding: clamp(1.5rem, 3vw, 2.2rem); }
.bp-contact-card a { color: #fff; }
.bp-contact-card a:hover { color: var(--cyan); }
.bp-photo { display: block; width: 100%; height: auto; margin-top: 1.5rem; }
.bp-form h3 { margin-bottom: 1.2rem; }
.bp-form .wpcf7 input[type="text"], .bp-form .wpcf7 input[type="email"],
.bp-form .wpcf7 input[type="tel"], .bp-form .wpcf7 textarea { background: #cdf2f6; }
.bp-form .wpcf7 input[type="submit"] {
  border-radius: 4px; justify-self: start; padding: 0.85rem 3.2rem;
  background: var(--cyan); color: #fff; font-weight: 700;
}
.bp-form .wpcf7 input[type="submit"]:hover { background: var(--cyan-deep); }

/* ==========================================================================
   Round-3 feedback additions (ticket #603): site-wide cookie banner
   ========================================================================== */

/* Slim fixed bar; below the lightbox overlay (999) so an open photo wins. */
.cookie-banner {
  position: fixed; inset: auto 0 0 0; z-index: 900;
  background: #fff; border-top: 1px solid var(--rule);
  box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.12);
  padding-block: 1rem;
}
.cookie-banner-inner {
  display: flex; align-items: center; justify-content: center; gap: 1.25rem;
  flex-wrap: wrap; text-align: left;
}
.cookie-banner-inner p { margin: 0; }
.cookie-banner-text { max-width: 62ch; font-size: 0.92rem; }
/* Equal prominence (PECR): Accept and Decline are the same component at the
   same size — only the fill differs. */
.cookie-banner-actions { display: flex; gap: 0.75rem; flex-shrink: 0; }
.cookie-banner .btn { margin: 0; }

/* Footer "Cookie preferences" — a button that must read like the links beside it. */
.linklike {
  background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
  font: inherit; color: var(--ink); text-decoration: underline;
}
.linklike:hover { color: var(--cyan-deep); }