/* Nov 5 2026: all button corners use the Elementor size variable RadiusButton (5px). */
/* ==========================================================================
   jsabo.css — JSabo Art site stylesheet
   Source of truth: claude/site-concept-source.dc.html (the approved prototype)
   Every value here is copied verbatim from that file. Do not round to a grid.

   This file carries what Elementor v4 atomic cannot express: box-shadows,
   gradient overlays, hover lift/zoom, keyframe animation, translucent-blur
   nav, sticky columns, masonry, arch corners, chips, drawer animation.
   Structure and editable text live in Elementor; effects live here.

   Sections are labelled with the screen they serve.
   Enqueued by the "JSabo site stylesheet" snippet in Code Snippets.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. FONTS — self-hosted, weights the prototype actually uses.
   Files already live in wp-content/uploads/fonts/. Declared here as well as
   in Elementor Custom Fonts so raw-CSS surfaces (WooCommerce checkout, cart)
   get them too.
   -------------------------------------------------------------------------- */
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:300;font-display:swap;src:url('../fonts/cormorant-garamond-latin-300-normal.woff2') format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/cormorant-garamond-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/cormorant-garamond-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/cormorant-garamond-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:300;font-display:swap;src:url('../fonts/cormorant-garamond-latin-300-italic.woff2') format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:400;font-display:swap;src:url('../fonts/cormorant-garamond-latin-400-italic.woff2') format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:500;font-display:swap;src:url('../fonts/cormorant-garamond-latin-500-italic.woff2') format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:300;font-display:swap;src:url('../fonts/archivo-latin-300-normal.woff2') format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/archivo-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/archivo-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/archivo-latin-600-normal.woff2') format('woff2')}

/* --------------------------------------------------------------------------
   1. TOKENS — mirror of the Elementor Variables, for the raw CSS below.
   Change a colour in Elementor Variables AND here, or they drift.
   -------------------------------------------------------------------------- */
:root{
  --js-bone:#F7F3EA;
  --js-ink:#23201A;
  --js-stone:var(--ColorStone, #6F6757); /* Nov 5 2026: follows Elementor variable ColorStone */
  --js-slate:#544E42;
  --js-canvas:#EFEADD;
  --js-panel:#F1E7CF;
  --js-terracotta:#B0604E;
  --js-sage:#54614E;
  --js-display:'Cormorant Garamond',Georgia,serif;
  --js-body:'Archivo',system-ui,sans-serif;
  --js-max:1500px;        /* page max width */
  --js-max-narrow:1240px; /* about / contact / checkout */
  --js-pad:48px;          /* side padding */
  --js-ease:cubic-bezier(.16,1,.3,1);
}

/* --------------------------------------------------------------------------
   2. BASE — the prototype's body defaults.
   -------------------------------------------------------------------------- */
html{scroll-behavior:auto} /* prototype sets this explicitly */

/* The theme sets display on elements we hide with the [hidden] attribute
   (the room view, saved-only gallery cards), which cancels it out. */
[hidden]{display:none!important}

/* Elementor v4 gives every atomic container a default 10px padding as an
   editor convenience. The prototype has none — all spacing is deliberate —
   and left in place it adds 10px at every nesting level (the header alone
   came out 49px too tall). Zero it site-wide: Global Classes and per-element
   styles both outrank this, so any padding that IS in the design still wins. */
/* The atomic-container padding reset is NOT here. Elementor's atomic base
   (uploads/elementor/css/base-desktop.css) sets .elementor .e-flexbox-base
   {padding:10px}, and a copy of that selector in this file would also outrank
   the Global Classes, because this file prints last. The reset is instead
   attached to the base-desktop / base-mobile handles with wp_add_inline_style
   in the "JSabo site stylesheet" snippet, so it prints immediately after the
   base and before the Global Class files — beating the default while still
   losing to any padding the design actually sets. */
body{
  background:var(--js-bone);
  color:var(--js-ink);
  font-family:var(--js-body);
  -webkit-font-smoothing:antialiased;
}
/* NOTE: do NOT put overflow-x:clip on html or body — overflow on the root
   propagates to the viewport and kills page scrolling. The prototype scopes
   it to an inner wrapper, so sections that bleed past the viewport (the hero
   painting) clip themselves instead. */

/* --------------------------------------------------------------------------
   3. KEYFRAMES — verbatim from the prototype's <style> block.
   -------------------------------------------------------------------------- */
@keyframes js-rise{0%{opacity:0;transform:translateY(30px)}100%{opacity:1;transform:translateY(0)}}
@keyframes js-fadein{0%{opacity:0}100%{opacity:1}}
@keyframes js-drift1{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes js-marq{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* Reveal-on-scroll. The "jsabo-nav-scroll" snippet adds .is-in when a block
   with .js-reveal enters the viewport; blocks already on screen at load are
   left alone, exactly as the prototype does. */
.js-reveal{opacity:0}
.js-reveal.is-in{animation:js-rise 1s var(--js-ease) both}
@media (prefers-reduced-motion:reduce){
  .js-reveal{opacity:1;animation:none!important}
  .js-marquee-track,
.js-drift,
.js-drift-9{animation:none!important}
}

/* Entrance animations on the hero (fire on load, no observer). */
.js-rise-1{animation:js-rise 1s .1s both}
.js-rise-2{animation:js-rise 1.1s .25s both}
.js-rise-3{animation:js-rise 1.1s .45s both}
.js-rise-4{animation:js-rise 1.1s .7s both}
.js-rise-5{animation:js-rise 1.1s .85s both}
.js-fade-hero{animation:js-fadein 1.6s .3s both}
.js-fade-cue{animation:js-fadein 1.5s 1.4s both}

/* Floating inset images: artist teaser (8s) and About stacks (9s). */
.js-drift{animation:js-drift1 8s ease-in-out infinite}
.js-drift-9{animation:js-drift1 9s ease-in-out infinite}

/* --------------------------------------------------------------------------
   4. NAVIGATION (screen: Navigation)
   Fixed, 22x48 padding, transparent at rest over the Bone page with a
   hairline under it; after 40px of scroll it becomes translucent Bone with
   a 10px blur and a 1px shadow. The .jsabo-scrolled class is toggled by the
   "jsabo-nav-scroll" snippet.
   -------------------------------------------------------------------------- */
/* NOTE ON SELECTORS: Elementor v4 renders each Global Class using its LABEL
   as the CSS class name (a class labelled "site-header-bar" renders as
   .site-header-bar). So the hooks below are the global-class labels you can
   see in Elementor > Global Classes. Rename a class there and you must
   rename it here too. */
.site-header-bar{
  position:fixed;
  top:0;left:0;right:0;
  z-index:60;
  background:transparent;
  border-bottom:1px solid rgba(35,32,26,.1);
  transition:background .5s ease,box-shadow .5s ease,padding .5s ease;
}
/* Elementor emits atomic global classes as .e-atomic-element.site-header-bar
   (specificity 0,2,0) and loads them after this file, so the scrolled state
   needs to outrank that — hence the body prefix. */
body .site-header-bar.jsabo-scrolled{
  background:rgba(247,243,234,.94);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  box-shadow:0 1px 0 rgba(35,32,26,.09);
}
/* The admin bar must not sit on top of a fixed header. */
.admin-bar .site-header-bar{top:32px}
@media screen and (max-width:782px){.admin-bar .site-header-bar{top:46px}}

/* The inner bar (page-wrap + row-between) already carries the 1500 max width
   and the 48px side padding; the 22px vertical padding is on site-header-bar.
   Only the transition is left to do here. */
.site-header-bar > .page-wrap{transition:padding .4s ease}

/* Neither half of the header may shrink: the brand lockup stays on one line
   and the nav keeps the Collection pill on the same row as the links.
   v4 has no flex-shrink control, so it lives here. */
/* Atomic containers default to width:100%, which would make each half claim
   the whole bar. Size them to their content instead. */
.site-header-bar .nav-row,
.site-header-bar [data-id="brandlock"]{flex:none;width:auto}
.site-header-bar .nav-row > *{flex:none;width:auto}
.site-header-bar .brand-name{white-space:nowrap}

/* Elementor's .e-button-base gives every button 24px of side padding. The
   prototype's nav links have none — the 36px gap is the only spacing — so
   strip it back, or the row reads at 84px apart. */
.nav-row .nav-link{padding-left:0;padding-right:0;padding-top:0}

/* Nav links: 12.5px .14em uppercase, hover reveals a 1px underline.
   The transparent background is what stops Elementor rendering these as
   default link-blue buttons (the Aug 31 bug). Values live on the nav-link
   global class; this only covers the menu-widget markup Elementor emits. */
.nav-row .elementor-item{
  font-family:var(--js-body);
  font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;
  color:var(--js-ink);text-decoration:none;background:transparent;
  border-bottom:1px solid transparent;padding:0 0 2px;
}
.nav-row .elementor-item:hover{border-bottom-color:var(--js-ink);color:var(--js-ink)}

/* "Collection (n)" pill. Values live on the nav-cart-pill global class; this
   covers the Menu Cart widget markup when it replaces the plain button. */
.nav-cart-pill,
.nav-cart-pill .elementor-menu-cart__toggle .elementor-button{
  font-family:var(--js-body);
  font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;
  color:var(--js-bone);background:var(--js-ink);
  padding:10px 18px;border-radius:var(--RadiusButton,5px);border:none;text-decoration:none;
  display:inline-flex;align-items:center;gap:6px;line-height:1;
  transition:background .3s ease;
}
.nav-cart-pill:hover,
.nav-cart-pill .elementor-menu-cart__toggle .elementor-button:hover{background:#000;color:var(--js-bone)}
/* Menu Cart ships an icon and a separate counter; the prototype has neither —
   just the word and the count in brackets. */
.nav-cart-pill .elementor-button-icon{display:none}

/* The hero headline never wraps (prototype: white-space:nowrap on the h1).
   v4 has no white-space control, so it lives here. Released below 900px,
   where nowrap would overflow the viewport. */
.t-hero{white-space:nowrap}
@media (max-width:900px){.t-hero{white-space:normal}}

/* --------------------------------------------------------------------------
   5. BUTTONS (all screens)
   solid   = Ink pill, 17x34, lifts 2px on hover
   ghost   = Ink text on a 1px underline rule
   outline = 1px rgba(35,32,26,.3) pill, border darkens on hover
   bone    = Bone pill on the Ink bands
   -------------------------------------------------------------------------- */
.jsabo-btn-solid{
  display:inline-block;background:var(--js-ink);color:var(--js-bone);
  font-family:var(--js-body);font-size:12.5px;letter-spacing:.16em;
  text-transform:uppercase;font-weight:500;
  padding:17px 34px;border-radius:var(--RadiusButton,5px);border:none;text-decoration:none;
  cursor:pointer;transition:transform .3s ease;
}
.jsabo-btn-solid:hover{transform:translateY(-2px);color:var(--js-bone)}

.jsabo-btn-ghost{
  display:inline-block;color:var(--js-ink);background:transparent;
  font-family:var(--js-body);font-size:12.5px;letter-spacing:.16em;
  text-transform:uppercase;font-weight:500;
  border:none;border-bottom:1px solid var(--js-ink);
  padding:0 0 3px;text-decoration:none;cursor:pointer;
}

.jsabo-btn-outline{
  display:inline-block;background:transparent;color:var(--js-ink);
  font-family:var(--js-body);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;font-weight:500;
  padding:12px 22px;border:1px solid rgba(35,32,26,.3);border-radius:var(--RadiusButton,5px);
  cursor:pointer;transition:border-color .25s ease;
}
.jsabo-btn-outline:hover{border-color:var(--js-ink)}

.jsabo-btn-bone{
  display:inline-block;background:var(--js-bone);color:var(--js-ink);
  font-family:var(--js-body);font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;font-weight:500;
  padding:16px 32px;border-radius:var(--RadiusButton,5px);text-decoration:none;cursor:pointer;
}

/* --------------------------------------------------------------------------
   6. SHARED EFFECT UTILITIES
   Elementor v4 has controls for none of these.
   -------------------------------------------------------------------------- */
/* Image zoom on card hover. The wrapper clips; the image scales. */
.js-zoom{overflow:hidden;display:block}
.js-zoom img{display:block;width:100%;transition:transform 1.2s var(--js-ease)}
.js-zoom:hover img{transform:scale(1.06)}
.js-zoom--sm:hover img{transform:scale(1.045)}   /* gallery cards */
.js-zoom--tile:hover img{transform:scale(1.05)}  /* originals/prints tiles */
.js-zoom--ig img{transition:transform 1s var(--js-ease)}
.js-zoom--ig:hover img{transform:scale(1.08)}    /* instagram strip */

/* Arch corners on the first and last collection cards. */
.js-arch-tl{border-radius:120px 4px 4px 4px;overflow:hidden}
.js-arch-br{border-radius:4px 4px 120px 4px;overflow:hidden}

/* Dark gradient over the two big tiles, so white type stays legible. */
.js-tile-overlay::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(to top,rgba(24,21,16,.72),rgba(24,21,16,0) 55%);
  pointer-events:none;
}

/* The deep drop shadows. */
.js-shadow-lg{box-shadow:0 50px 100px -30px rgba(35,32,26,.4)}
.js-shadow-md{box-shadow:0 40px 80px -25px rgba(35,32,26,.45)}
.js-shadow-float{box-shadow:0 24px 60px -20px rgba(35,32,26,.3)}
.js-shadow-thumb{box-shadow:0 10px 24px -8px rgba(35,32,26,.3)}

/* --------------------------------------------------------------------------
   6b. HOME — HERO (screen: Home)
   Full-height split: copy on the left over a painting that bleeds to the right
   edge from 84px down, with a 120px Bone fade over its left edge. Caption sits
   bottom-right over the painting, scroll cue bottom-left on the page.
   Hooks are element ids from the Home page, matched as [data-id="<id>"],
   because these are one-off positions rather than reusable design tokens.
   NOTE: use [data-id=...], not .elementor-element-<id> — Elementor only puts
   that class on CONTAINERS. Atomic widgets (e-heading / e-paragraph / e-image)
   render as a bare tag carrying only data-id and their base class, so a
   .elementor-element-* selector silently matches nothing on a widget.
   The .elementor prefix lifts these to specificity (0,2,0) so they beat
   Elementor's own .elementor .e-*-base defaults.
   -------------------------------------------------------------------------- */


/* Left column. The padding-left keeps the copy on the 1500px content grid
   even though the section itself is full-bleed. */


/* Nov 5 2026: hero quote size/font now set in Elementor (class t-hero-quote, variable TextQuote) */


/* Entrance: the prototype staggers these on load. */


/* Right column: the painting. */


/* 120px Bone fade down the painting's left edge. */


/* Caption over the painting, bottom right. */


/* Scroll cue, bottom left, on the same 1500px grid as the copy. */


@media (max-width:1024px){
  /* Copy first, then the painting — the prototype has no mobile layout, so
     this is the derived one: same order, stacked. */
  
  
  
  
  
  
}

/* --------------------------------------------------------------------------
   6c. HOME — TITLE MARQUEE (screen: Home)
   The two spans are identical; the track is twice the content wide and slides
   exactly half its width, so the loop is seamless. 60s, linear, forever.
   -------------------------------------------------------------------------- */
.elementor .title-strip{display:flex;overflow:hidden}
.elementor .title-strip > *{
  flex:none;white-space:nowrap;
  animation:js-marq 60s linear infinite;
}
.elementor .title-strip .strip-titles{padding-right:0}

/* --------------------------------------------------------------------------
   6d. HOME — THE COLLECTIONS (screen: Home)
   Five cards, arch corner on the first and last, every second card dropped
   54px, 380px images that zoom to 1.06 on hover.
   -------------------------------------------------------------------------- */


/* Card 2 and 4 sit 54px lower, as in the prototype's stagger. */

.elementor .art-media{display:block;overflow:hidden}


/* --------------------------------------------------------------------------
   6e. HOME — SPOTLIGHT (screen: Home)
   Panel band. The painting sits on an offset tinted panel and casts the
   deep shadow; copy sits opposite.
   -------------------------------------------------------------------------- */


/* --------------------------------------------------------------------------
   6f. HOME — ORIGINALS / PRINTS TILES (screen: Home)
   Two 520px tiles, image zooming to 1.05 under a dark gradient so the Bone
   type stays legible.
   -------------------------------------------------------------------------- */


/* --------------------------------------------------------------------------
   6g. HOME — ARTIST TEASER (screen: Home)
   560px portrait with a small framed painting floating off its corner.
   -------------------------------------------------------------------------- */


/* --------------------------------------------------------------------------
   6h. HOME — INSIDE THE STUDIO (screen: Home)
   Ink band: film tile with a play button, plus two photographs, all 420px.
   -------------------------------------------------------------------------- */


/* Play button: a Bone disc with a solid triangle, centred, non-interactive. */


/* --------------------------------------------------------------------------
   6i. HOME — PRESS QUOTE (screen: Home)
   Narrower measure (1100) and centred.
   -------------------------------------------------------------------------- */


/* --------------------------------------------------------------------------
   6j. HOME — COLLECTOR EXPERIENCE / TRUST COLUMNS (screen: Home)
   Three columns between hairlines.
   -------------------------------------------------------------------------- */


/* --------------------------------------------------------------------------
   6k. HOME — NEWSLETTER (screen: Home)
   820px measure, centred. The form is WPForms; these rules strip its default
   chrome back to the prototype's underline field + Ink pill.
   Swap for Omnisend later without touching this CSS.
   -------------------------------------------------------------------------- */


.elementor .form-mailing-list{width:100%}
/* WPForms styles its own button and fields through CSS custom properties and
   a "medium field" width cap. Setting the variables is more durable than
   out-specifying its stylesheet, which changes between releases. */
.elementor .form-mailing-list .wpforms-container{
  margin:0 auto;max-width:600px;width:100%;
  --wpforms-button-background-color:#F7F3EA;
  --wpforms-button-text-color:#23201A;
  --wpforms-button-border-radius:var(--RadiusButton,5px);
  --wpforms-field-border-radius:0px;
  --wpforms-field-text-color:#F7F3EA;
  --wpforms-label-color:#F7F3EA;
}
/* The field must fill its column; WPForms caps "medium" fields well short. */
.elementor .form-mailing-list input[type=email].wpforms-field-medium,
.elementor .form-mailing-list input[type=email]{max-width:100%;width:100%}
.elementor .form-mailing-list .wpforms-form{
  display:flex;gap:14px;align-items:flex-end;
}
.elementor .form-mailing-list .wpforms-field-container{flex:1;margin:0}
.elementor .form-mailing-list .wpforms-field{padding:0}
.elementor .form-mailing-list .wpforms-field-label{display:none}
.elementor .form-mailing-list input[type=email]{
  width:100%;border:none;border-bottom:1px solid rgba(247,243,234,.75);
  background:transparent;padding:14px 4px;border-radius:0;
  font-family:var(--js-body);font-size:15px;font-weight:300;color:var(--js-bone); /* Nov 5 2026: light on the green mailing-list band */
  box-shadow:none;
}
.elementor .form-mailing-list .wpforms-submit-container{padding:0;margin:0;flex:none}
.elementor .form-mailing-list button[type=submit]{
  background:var(--js-bone);color:var(--js-ink);border:none;
  font-family:var(--js-body);font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;font-weight:500;
  padding:15px 30px;border-radius:var(--RadiusButton,5px);cursor:pointer;
}
.elementor .form-mailing-list button[type=submit]:hover{background:#fff;color:var(--js-ink)}
.elementor .form-mailing-list input[type=email]::placeholder{color:rgba(247,243,234,.75);opacity:1}
.elementor .form-mailing-list .wpforms-confirmation-container-full{
  background:transparent;border:none;padding:0;
  font-family:var(--js-display);font-style:italic;font-size:22px;color:var(--js-bone);
}
/* Nov 5 2026: mailing-list thank-you message in bright white on the green band (WPForms colours its own <p>) */
.elementor .form-mailing-list .wpforms-confirmation-container-full,
.elementor .form-mailing-list .wpforms-confirmation-container-full p,
.elementor .form-mailing-list .wpforms-confirmation-container-full *{color:#FFFFFF!important;background:transparent!important;border:none!important;text-align:center;font-size:24px;line-height:1.4;text-wrap:balance}

/* --------------------------------------------------------------------------
   6l. HOME — INSTAGRAM STRIP (screen: Home)
   Six square tiles. Static for now, linking to the profile; swap for a live
   feed when the Instagram connection exists.
   -------------------------------------------------------------------------- */


/* --------------------------------------------------------------------------
   6m. HOME — MOBILE (derived; the prototype has no mobile layout)
   Everything stacks; the staggered offsets and the 6-up strip collapse.
   -------------------------------------------------------------------------- */

@media (max-width:767px){
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  .elementor .form-mailing-list .wpforms-form{flex-direction:column;align-items:stretch;gap:20px}
  .elementor .form-mailing-list button[type=submit]{width:100%}
  
  
}

/* Copy Jeanette still has to check before launch carries .jsabo-verify and,
   on staging only, a faint dotted underline so it is visible on the page.
   Delete this rule (not the class) when the copy is signed off. */
.jsabo-verify{border-bottom:1px dotted rgba(176,96,78,.55)}

/* --------------------------------------------------------------------------
   6n. GALLERY (screen: The Gallery / Prints & editions)
   Rendered by the [jsabo_gallery] shortcode in the "JSabo gallery" snippet,
   so these are plain class hooks rather than Elementor ids.
   Kicker/title/intro, a Collection chip row, an Availability row with the
   result count, then a three-column masonry of cards.
   -------------------------------------------------------------------------- */
.jsabo-gallery{
  max-width:var(--js-max);margin:0 auto;width:100%;
  padding:170px var(--js-pad) 120px;
}
.jsabo-gallery .jsabo-gallery__head{max-width:720px;margin-bottom:64px}
.jsabo-gallery .jsabo-gallery__kicker{
  font-family:var(--js-body);font-size:11px;letter-spacing:.32em;
  text-transform:uppercase;color:var(--js-stone);font-weight:500;margin:0 0 20px;
}
.jsabo-gallery .jsabo-gallery__title{
  font-family:var(--js-display);font-weight:400;font-size:64px;line-height:1.05;
  margin:0 0 20px;color:var(--js-ink);letter-spacing:-.01em;
}
.jsabo-gallery .jsabo-gallery__intro{
  font-family:var(--js-body);font-size:15px;font-weight:300;color:var(--js-slate);
  line-height:1.75;margin:0;
}
.jsabo-gallery .jsabo-gallery__empty{
  font-family:var(--js-display);font-style:italic;font-size:22px;
  color:var(--js-stone);padding:60px 0;
}

/* Chips. Active is a filled Ink pill, the rest are hairline outlines. */
.jsabo-gallery .jsabo-chips{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:16px}
.jsabo-gallery .jsabo-chip{
  display:inline-block;cursor:pointer;border-radius:var(--RadiusButton,5px);
  font-family:var(--js-body);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;font-weight:500;padding:9px 18px;
  background:transparent;color:var(--js-slate);
  border:1px solid rgba(35,32,26,.25);text-decoration:none;
  transition:all .25s ease;
}
.jsabo-gallery .jsabo-chip:hover{border-color:var(--js-ink);color:var(--js-ink)}
.jsabo-gallery .jsabo-chip--active{background:var(--js-ink);color:var(--js-bone);border-color:var(--js-ink)}
.jsabo-gallery .jsabo-chip--active:hover{color:var(--js-bone)}

/* Availability row + result count, over a hairline. */
.jsabo-gallery .jsabo-filterbar{
  display:flex;flex-wrap:wrap;gap:28px;align-items:center;
  padding:18px 0 26px;border-bottom:1px solid rgba(35,32,26,.12);
  margin-bottom:56px;
}
.jsabo-gallery .jsabo-filterbar__group{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.jsabo-gallery .jsabo-filterbar__label{
  font-family:var(--js-body);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--js-stone);margin-right:4px;
}
.jsabo-gallery .jsabo-count{
  margin-left:auto;font-family:var(--js-body);font-size:12px;
  color:var(--js-stone);letter-spacing:.08em;
}

/* Gallery layout (Jim Nov 5). Without JavaScript: rows of three, left to right.
   With it (initGalleryMasonry in jsabo.js): masonry. The first three in
   Products > Sorting go across the top, then each next painting drops into
   the shortest column, so there are no gaps and paintings keep their shape.
   --jsabo-cols tells the script how many columns to use at each width. */
.jsabo-gallery .jsabo-masonry{--jsabo-cols:3;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:40px;align-items:start}
.jsabo-gallery .jsabo-masonry.is-masonry{display:flex;align-items:flex-start;gap:40px}
.jsabo-gallery .jsabo-masonry__col{flex:1 1 0;min-width:0}
.jsabo-gallery .jsabo-card{
  break-inside:avoid;-webkit-column-break-inside:avoid;
  margin:0 0 48px;display:block;
}
.jsabo-gallery .jsabo-card__media{
  display:block;position:relative;overflow:hidden;background:var(--js-canvas);
  text-decoration:none;
}
.jsabo-card__media img{
  width:100%;height:auto;display:block;
  transition:transform 1.2s var(--js-ease);
}
.jsabo-card__media:hover img{transform:scale(1.045)}
.jsabo-gallery .jsabo-card__noimage{display:block;width:100%;aspect-ratio:3/4;background:var(--js-canvas)}

.jsabo-gallery .jsabo-card__row{
  display:flex;justify-content:space-between;align-items:baseline;
  margin-top:18px;gap:12px;
}
.jsabo-gallery .jsabo-card__text{text-decoration:none;color:var(--js-ink);display:block}
.jsabo-gallery .jsabo-card__title{
  display:block;font-family:var(--js-display);font-size:24px;font-weight:500;
  font-style:italic;line-height:1.15;color:var(--js-ink);
}
.jsabo-gallery .jsabo-card__meta{
  display:block;font-family:var(--js-body);font-size:11.5px;letter-spacing:.1em;
  color:var(--js-stone);margin-top:5px;line-height:1.5;
}
.jsabo-gallery .jsabo-card__right{text-align:right;flex:none}
.jsabo-gallery .jsabo-card__price{
  display:block;font-family:var(--js-body);font-size:14px;font-weight:500;
  color:var(--js-ink);white-space:nowrap;
}

/* Save toggle: an open ring that fills Terracotta once saved. */
.jsabo-gallery .jsabo-card__save{
  cursor:pointer;background:none;border:none;padding:4px 0 0;
  font-family:var(--js-body);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--js-stone);
  display:inline-flex;align-items:center;gap:6px;
}
.jsabo-gallery .jsabo-card__save-mark{
  width:9px;height:9px;border-radius:50%;
  border:1px solid currentColor;background:transparent;
  display:inline-block;transition:background .2s ease;
}
/* Terracotta is written literally here, not as var(--js-terracotta): the theme
   reset sets a colour on <button> that the variable form was losing to. */
.jsabo-gallery .jsabo-card__save.is-saved,
.jsabo-gallery button.jsabo-card__save.is-saved{color:#B0604E}
.jsabo-gallery .jsabo-card__save.is-saved .jsabo-card__save-mark{background:#B0604E;border-color:#B0604E}

@media (max-width:1024px){
  .jsabo-gallery{padding:130px var(--js-pad) 80px}
  .jsabo-gallery .jsabo-gallery__title{font-size:46px}
  .jsabo-gallery .jsabo-masonry{--jsabo-cols:2;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px}
  .jsabo-gallery .jsabo-masonry.is-masonry{gap:24px}
}
@media (max-width:767px){
  .jsabo-gallery{padding:110px 20px 70px}
  .jsabo-gallery .jsabo-gallery__head{margin-bottom:36px}
  .jsabo-gallery .jsabo-gallery__title{font-size:36px}
  .jsabo-gallery .jsabo-masonry{--jsabo-cols:1;grid-template-columns:minmax(0,1fr)}
  .jsabo-gallery .jsabo-card{margin-bottom:44px}
  .jsabo-gallery .jsabo-filterbar{gap:16px;margin-bottom:34px}
  .jsabo-gallery .jsabo-count{margin-left:0}

  /* Seven collection chips wrapped over five rows pushed the first artwork
     most of a screen down. On a phone each chip row becomes one swipeable
     strip that bleeds into the 20px gutters. */
  .jsabo-gallery .jsabo-chips{
    flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;
    scrollbar-width:none;-ms-overflow-style:none;
    margin-left:-20px;margin-right:-20px;padding:2px 20px;
  }
  .jsabo-gallery .jsabo-chips::-webkit-scrollbar{display:none}
  .jsabo-gallery .jsabo-chip{flex:none}
  .jsabo-gallery .jsabo-filterbar{flex-direction:column;align-items:flex-start}
  .jsabo-gallery .jsabo-filterbar .jsabo-chips{width:100%}
  .jsabo-gallery .jsabo-filterbar__group{
    flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;width:100%;
    scrollbar-width:none;-ms-overflow-style:none;
    margin-left:-20px;margin-right:-20px;padding:2px 20px;
  }
  .jsabo-gallery .jsabo-filterbar__group::-webkit-scrollbar{display:none}
  .jsabo-gallery .jsabo-filterbar__group > *{flex:none}
}

/* --------------------------------------------------------------------------
   6o. PRODUCT (screen: Artwork Detail)
   Rendered by [jsabo_product] in the "JSabo product page" snippet.
   Sticky painting on the left, the collector column on the right.
   -------------------------------------------------------------------------- */
.jsabo-product{display:block;max-width:none}
.jsabo-product__crumb{
  display:inline-block;margin-bottom:44px;text-decoration:none;
  font-family:var(--js-body);font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--js-stone);
}
.jsabo-product__crumb:hover{color:var(--js-ink)}
.jsabo-product__kicker{
  font-family:var(--js-body);font-size:11px;letter-spacing:.3em;
  text-transform:uppercase;color:var(--js-stone);font-weight:500;margin:0 0 16px;
}
.jsabo-product .jsabo-product__title{
  font-family:var(--js-display);font-weight:400;font-style:italic;
  font-size:58px;line-height:1.03;margin:0 0 18px;color:var(--js-ink);
}
.jsabo-product__spec{
  font-family:var(--js-body);font-size:13px;letter-spacing:.08em;
  color:var(--js-slate);margin:0 0 30px;
}
.jsabo-product__story,
.jsabo-product__story p{
  font-family:var(--js-body);font-size:15.5px;line-height:1.85;font-weight:300;
  color:var(--js-slate);margin:0 0 34px;
}

/* "The original" - price opposite the Acquire button, over a hairline. */
.jsabo-buy{border-top:1px solid rgba(35,32,26,.14);margin:0;padding:26px 0 0}
.jsabo-buy__row{display:flex;align-items:center;justify-content:space-between;gap:24px}
.jsabo-buy__label{
  font-family:var(--js-body);font-size:10.5px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--js-stone);margin:0 0 6px;
}
.jsabo-buy__price{
  font-family:var(--js-display);font-size:34px;font-weight:500;margin:0;
  color:var(--js-ink);line-height:1.1;
}
.jsabo-buy__price .woocommerce-Price-amount{font-family:inherit;font-size:inherit}
.jsabo-buy__cta{border:none}
.jsabo-buy__note{
  font-family:var(--js-body);font-size:12px;color:var(--js-stone);
  letter-spacing:.04em;margin:18px 0 26px;
}
.jsabo-buy--sold{padding-bottom:8px}
.jsabo-buy__sold{
  font-family:var(--js-display);font-size:24px;font-style:italic;
  color:var(--js-slate);margin:0 0 18px;line-height:1.35;
}

/* "Archival prints" - each size is a selectable row. */
.jsabo-prints{border-top:1px solid rgba(35,32,26,.14);padding-top:26px;margin:0}
.jsabo-prints__sizes{display:flex;flex-direction:column;gap:10px;margin-bottom:22px}
.jsabo-size{
  display:flex;justify-content:space-between;align-items:center;
  text-align:left;width:100%;padding:14px 18px;border-radius:6px;
  background:transparent;border:1px solid rgba(35,32,26,.18);
  color:var(--js-ink);cursor:pointer;transition:all .25s ease;
}
.jsabo-size input{position:absolute;opacity:0;pointer-events:none}
.jsabo-size.is-chosen{background:rgba(35,32,26,.06);border-color:var(--js-ink)}
.jsabo-size__text{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.jsabo-size__label{font-family:var(--js-body);font-size:13.5px;font-weight:500;letter-spacing:.02em}
.jsabo-size__sub{font-family:var(--js-body);font-size:11px;color:var(--js-stone);letter-spacing:.06em}
.jsabo-size__price{font-family:var(--js-body);font-size:14px;font-weight:500;white-space:nowrap}
.jsabo-size__price .woocommerce-Price-amount{font-family:inherit;font-size:inherit}

/* Finish and colour: small pill choices. */
.jsabo-choice{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.jsabo-choice__label{
  font-family:var(--js-body);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--js-stone);
}
.jsabo-choice__opts{display:flex;gap:8px;flex-wrap:wrap}
.jsabo-opt{
  cursor:pointer;border-radius:var(--RadiusButton,5px);padding:9px 16px;
  border:1px solid rgba(35,32,26,.25);background:transparent;
  font-family:var(--js-body);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;font-weight:500;color:var(--js-slate);
  transition:all .25s ease;
}
.jsabo-opt input{position:absolute;opacity:0;pointer-events:none}
.jsabo-opt.is-chosen{background:var(--js-ink);color:var(--js-bone);border-color:var(--js-ink)}

.jsabo-prints__cta{
  width:100%;text-align:center;background:transparent;
  border:1px solid var(--js-ink);color:var(--js-ink);
  font-family:var(--js-body);font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;font-weight:500;
  padding:16px;border-radius:var(--RadiusButton,5px);cursor:pointer;transition:all .3s ease;
}
.jsabo-prints__cta:hover{background:var(--js-ink);color:var(--js-bone)}
.jsabo-prints__cta[disabled]{opacity:.4;cursor:not-allowed}

/* The three collector accordions. */
.jsabo-accordions{margin-top:34px;border-top:1px solid rgba(35,32,26,.14)}
.jsabo-accordion{border-bottom:1px solid rgba(35,32,26,.14);padding:18px 0}
.jsabo-accordion__summary{
  cursor:pointer;display:flex;justify-content:space-between;align-items:center;
  font-family:var(--js-body);font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;font-weight:500;color:var(--js-ink);list-style:none;
}
.jsabo-accordion__summary::-webkit-details-marker{display:none}
.jsabo-accordion__mark{position:relative;width:11px;height:11px;flex:none}
.jsabo-accordion__mark::before,
.jsabo-accordion__mark::after{
  content:'';position:absolute;background:var(--js-ink);
  top:50%;left:0;width:11px;height:1px;transform:translateY(-50%);
}
.jsabo-accordion__mark::after{transform:translateY(-50%) rotate(90deg);transition:transform .25s ease}
.jsabo-accordion[open] .jsabo-accordion__mark::after{transform:translateY(-50%) rotate(0deg)}
.jsabo-accordion__body{
  font-family:var(--js-body);font-size:13.5px;font-weight:300;line-height:1.75;
  color:var(--js-slate);margin:14px 0 0;
}

/* The theme and the Elementor kit both colour bare <a> and <button>, and they
   outrank a single class. These repeat the design's colours at a specificity
   that wins, with literal values so nothing depends on a custom property
   resolving inside a themed button. */
.jsabo-product a.jsabo-product__crumb{color:var(--js-stone);background:transparent}
.jsabo-product a.jsabo-product__crumb:hover{color:#23201A}
.jsabo-product button.jsabo-buy__cta,
.jsabo-buy button.jsabo-buy__cta{
  background:#23201A;color:#F7F3EA;border:none;
  font-family:var(--js-body);font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;font-weight:500;
  padding:17px 34px;border-radius:var(--RadiusButton,5px);cursor:pointer;
  transition:transform .3s ease;
}
.jsabo-product button.jsabo-buy__cta:hover,
.jsabo-buy button.jsabo-buy__cta:hover{transform:translateY(-2px);background:#23201A;color:#F7F3EA}
.jsabo-prints button.jsabo-prints__cta{
  background:transparent;color:#23201A;border:1px solid #23201A;
}
.jsabo-prints button.jsabo-prints__cta:hover{background:#23201A;color:#F7F3EA}
.jsabo-prints label.jsabo-opt.is-chosen{background:#23201A;color:#F7F3EA;border-color:#23201A}
.jsabo-prints label.jsabo-size.is-chosen{background:rgba(35,32,26,.06);border-color:#23201A}

/* Layout: 1.15fr / .85fr with the painting sticky beside the scrolling column. */
.elementor [data-id="prodinner"]{
  display:grid;grid-template-columns:1.15fr .85fr;gap:90px;align-items:start;
  padding-block:150px 100px;
}
.elementor [data-id="prodmedia"]{position:sticky;top:120px;display:block}
.jsabo-media__work img{
  width:100%;height:auto;display:block;
  box-shadow:0 50px 110px -35px rgba(35,32,26,.35);
}
.jsabo-media__work{background:var(--js-canvas);display:block}
.jsabo-media__zoom{display:block;cursor:zoom-in}
.jsabo-media__actions{display:flex;gap:12px;margin-top:20px;flex-wrap:wrap}
.jsabo-media a.jsabo-btn-outline,
.jsabo-media button.jsabo-btn-outline{
  background:transparent;color:#23201A;border:1px solid rgba(35,32,26,.3);
  font-family:var(--js-body);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;font-weight:500;
  padding:12px 22px;border-radius:var(--RadiusButton,5px);cursor:pointer;text-decoration:none;
  transition:border-color .25s ease;
}
.jsabo-media a.jsabo-btn-outline:hover,
.jsabo-media button.jsabo-btn-outline:hover{border-color:#23201A;color:#23201A}

/* The room: a wall, a console and its legs, drawn in CSS. The artwork width is
   set inline from the piece's real width against an 8ft wall. */
.jsabo-room{
  position:relative;height:560px;border-radius:4px;overflow:hidden;
  background:linear-gradient(#E8DFC9 72%,#B9A98B 72%,#C9BA9E 74%,#A4936F 100%);
  box-shadow:inset 0 0 80px rgba(35,32,26,.08);
}
.jsabo-room__art{
  position:absolute;left:50%;top:14%;transform:translateX(-50%);
  background:var(--js-bone);padding:10px;
  box-shadow:0 30px 60px -18px rgba(35,32,26,.5);
}
.jsabo-room__art img{width:100%;height:auto;display:block}
.jsabo-room__console{
  position:absolute;left:50%;bottom:9%;transform:translateX(-50%);
  width:340px;height:96px;background:#54492F;border-radius:3px 3px 0 0;
}
.jsabo-room__leg{position:absolute;bottom:5.5%;width:10px;height:24px;background:#3E351F}
.jsabo-room__leg--l{left:50%;transform:translateX(-50%) translateX(-150px)}
.jsabo-room__leg--r{left:50%;transform:translateX(-50%) translateX(150px)}
.jsabo-room__note{
  position:absolute;right:18px;bottom:14px;margin:0;
  font-family:var(--js-body);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(35,32,26,.55);
}
.elementor [data-id="proddetail"]{display:block;width:auto}

/* "Hangs well beside": four works in a row, same card as the gallery but with
   a fixed image height so the row reads evenly rather than as a masonry. */


.jsabo-related{display:grid;grid-template-columns:repeat(4,1fr);gap:34px;align-items:start}
.jsabo-related .jsabo-card{margin:0}
.jsabo-related .jsabo-card__media img{height:300px;object-fit:cover}
.jsabo-related .jsabo-card__title{font-size:20px}
.jsabo-related .jsabo-card__meta{display:none}
.jsabo-related .jsabo-card__save{display:none}
.jsabo-related .jsabo-card__row{margin-top:14px}
.jsabo-related .jsabo-card__price{font-size:12px;font-weight:400;color:var(--js-stone)}
@media (max-width:1024px){.jsabo-related{grid-template-columns:repeat(2,1fr);gap:24px}}
@media (max-width:767px){.jsabo-related{grid-template-columns:1fr}}

@media (max-width:1024px){
  .elementor [data-id="prodinner"]{grid-template-columns:1fr;gap:48px;padding-block:120px 70px}
  .elementor [data-id="prodmedia"]{position:static}
  .jsabo-product .jsabo-product__title{font-size:40px}
}
@media (max-width:767px){
  .jsabo-product .jsabo-product__title{font-size:32px}
  .jsabo-buy__row{flex-direction:column;align-items:flex-start;gap:16px}
  .jsabo-buy__cta{width:100%;text-align:center}
}

/* --------------------------------------------------------------------------
   6p. THE ARTIST (screen: The Artist)
   Panel quote hero, three acts with stacked floating photographs, a centred
   statement, then the Ink band with "Shown & noted" and "Visit the studio".
   -------------------------------------------------------------------------- */


/* Acts two and three stack a large photograph with a smaller one drifting off
   its bottom-right corner. */


/* The Ink band. */


/* The right-hand word in each row is the quieter one. */


/* --------------------------------------------------------------------------
   6q. INQUIRE (screen: Contact)
   Copy and contact rows on the left, the WPForms enquiry form inside a Panel
   card on the right. The form's own chrome is stripped back to the design's
   underline fields and Ink Send pill.
   -------------------------------------------------------------------------- */


/* The label column is a fixed 80px so the values line up. */


/* The Panel card. */


/* WPForms, stripped back. Colours are set through its own custom properties
   rather than by out-specifying its stylesheet. */
.elementor .form-contact .wpforms-container{
  margin:0;max-width:none;
  --wpforms-button-background-color:#23201A;
  --wpforms-button-text-color:#F7F3EA;
  --wpforms-button-border-radius:var(--RadiusButton,5px);
  --wpforms-field-border-radius:0px;
  --wpforms-field-text-color:#23201A;
  --wpforms-label-color:#23201A;
}
.elementor .form-contact .wpforms-field{padding:0 0 26px}
.elementor .form-contact .wpforms-field-label{display:none}
.elementor .form-contact input[type=text],
.elementor .form-contact input[type=email],
.elementor .form-contact select,
.elementor .form-contact textarea{
  width:100%;max-width:100%;
  border:none;border-bottom:1px solid rgba(35,32,26,.7); /* Nov 5 2026: stronger line for contrast */
  background:transparent;border-radius:0;box-shadow:none;
  padding:12px 2px;
  font-family:var(--js-body);font-size:17px;font-weight:400;color:var(--js-ink); /* Nov 5 2026: bigger, heavier */
}
.elementor .form-contact textarea{resize:vertical;min-height:120px}
.elementor .form-contact select{color:var(--js-ink)}
/* Nov 5 2026: placeholder words dark enough to read on the beige card */
.elementor .form-contact div.wpforms-container-full input::placeholder,
.elementor .form-contact div.wpforms-container-full textarea::placeholder{color:#544E42;opacity:1}
.elementor .form-contact div.wpforms-container-full select > option.placeholder{color:#544E42;opacity:1}
.elementor .form-contact input:focus,
.elementor .form-contact select:focus,
.elementor .form-contact textarea:focus{
  outline:1px solid var(--js-ink);outline-offset:2px;border-bottom-color:var(--js-ink);
}
.elementor .form-contact .wpforms-submit-container{padding:6px 0 0}
.elementor .form-contact button[type=submit]{
  width:100%;background:#23201A;color:#F7F3EA;border:none;
  font-family:var(--js-body);font-size:14px;letter-spacing:.16em;
  text-transform:uppercase;font-weight:500;
  padding:18px; /* Nov 5 2026: bigger Send */border-radius:var(--RadiusButton,5px);cursor:pointer;
}
.elementor .form-contact button[type=submit]:hover{background:#000;color:#F7F3EA}

/* The "Received." state, styled like the design rather than a Woo notice. */
.elementor .form-contact .wpforms-confirmation-container-full{
  background:transparent;border:none;padding:60px 0;text-align:center;
}
.jsabo-sent__title{
  font-family:var(--js-display);font-style:italic;font-size:30px;
  margin:0 0 14px;color:var(--js-ink);
}
.jsabo-sent__body{
  font-family:var(--js-body);font-size:14px;font-weight:300;
  color:var(--js-slate);line-height:1.7;margin:0;
}


/* --------------------------------------------------------------------------
   6r. CART DRAWER (screen: Cart drawer)
   440px panel off the right edge over a dimmed page, sliding in on open.
   -------------------------------------------------------------------------- */
.jsabo-drawer{position:fixed;inset:0;z-index:100}
/* The drawer is toggled with the `hidden` attribute, which means its
   entrance animations run once on the very first page paint and then sit
   "finished" — with fill:both holding the 0% frame, the backdrop never
   actually dimmed. Hanging the animations off :not([hidden]) both gives the
   open state a correct resting value and restarts the entrance each time. */
.jsabo-drawer__backdrop{
  position:absolute;inset:0;background:rgba(24,21,16,.45);opacity:1;
}
.jsabo-drawer:not([hidden]) .jsabo-drawer__backdrop{
  animation:js-fadein .4s both;
}
.jsabo-drawer__panel{
  position:absolute;top:0;right:0;bottom:0;width:440px;max-width:100vw;
  background:var(--js-bone);
  box-shadow:-30px 0 80px rgba(24,21,16,.3);
  display:flex;flex-direction:column;
  opacity:1;transform:none;
}
.jsabo-drawer:not([hidden]) .jsabo-drawer__panel{
  animation:js-rise .5s var(--js-ease) both;
}
.jsabo-drawer__head{
  display:flex;justify-content:space-between;align-items:center;
  padding:30px 34px;border-bottom:1px solid rgba(35,32,26,.12);
}
.jsabo-drawer__title{font-family:var(--js-display);font-size:24px;font-weight:500;color:var(--js-ink)}
.jsabo-drawer button.jsabo-drawer__close{
  background:none;border:none;font-size:22px;color:var(--js-stone);
  padding:4px;cursor:pointer;line-height:1;
}
.jsabo-drawer__body{
  flex:1;overflow-y:auto;padding:26px 34px;
  display:flex;flex-direction:column;gap:24px;
}
.jsabo-drawer__empty{text-align:center;padding:70px 0}
.jsabo-drawer__emptytext{
  font-family:var(--js-display);font-style:italic;font-size:22px;
  color:var(--js-stone);margin:0 0 22px;
}
.jsabo-drawer__item{display:flex;gap:18px;align-items:center}
.jsabo-drawer img.jsabo-drawer__thumb{
  width:66px;height:84px;object-fit:cover;flex:none;
  box-shadow:0 10px 24px -8px rgba(35,32,26,.3);
}
.jsabo-drawer__meta{flex:1;display:flex;flex-direction:column}
.jsabo-drawer__name{font-family:var(--js-display);font-style:italic;font-size:19px;color:var(--js-ink)}
.jsabo-drawer__desc{font-family:var(--js-body);font-size:11.5px;color:var(--js-stone);margin-top:3px}
.jsabo-drawer a.jsabo-drawer__remove{
  font-family:var(--js-body);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--js-stone);
  text-decoration:underline;padding:6px 0 0;background:none;align-self:flex-start;
}
.jsabo-drawer__price{font-family:var(--js-body);font-size:14px;font-weight:500;color:var(--js-ink)}
.jsabo-drawer__foot{padding:26px 34px 32px;border-top:1px solid rgba(35,32,26,.12)}
.jsabo-drawer__totalrow{
  display:flex;justify-content:space-between;
  font-family:var(--js-body);font-size:15px;font-weight:500;
  color:var(--js-ink);margin-bottom:8px;
}
.jsabo-drawer__note{font-family:var(--js-body);font-size:11.5px;color:var(--js-stone);margin:0 0 20px}
.jsabo-drawer a.jsabo-drawer__cta{
  display:block;width:100%;text-align:center;
  background:#23201A;color:#F7F3EA;text-decoration:none;
  font-family:var(--js-body);font-size:12.5px;letter-spacing:.16em;
  text-transform:uppercase;font-weight:500;
  padding:18px;border-radius:var(--RadiusButton,5px);
}
.jsabo-drawer a.jsabo-drawer__cta:hover{background:#000;color:#F7F3EA}

/* The header pill is a button here, not a link, so it needs the pill styling
   repeated at a specificity that beats the theme's button reset. */
.site-header-bar button.nav-cart-pill{
  font-family:var(--js-body);font-size:12.5px;letter-spacing:.14em;
  text-transform:uppercase;font-weight:500;
  color:#F7F3EA;background:#23201A;border:none;
  padding:10px 18px;border-radius:var(--RadiusButton,5px);cursor:pointer;line-height:1;
}
.site-header-bar button.nav-cart-pill:hover{background:#000;color:#F7F3EA}

@media (max-width:520px){
  .jsabo-drawer__panel{width:100vw}
  .jsabo-drawer__body,
.jsabo-drawer__head,
.jsabo-drawer__foot{padding-left:20px;padding-right:20px}
}

/* --------------------------------------------------------------------------
   6s. CHECKOUT & CART (screens: Checkout, Cart)
   These pages use WooCommerce's block checkout, so the hooks are its own
   wc-block-* class names. The design's shape: a narrow measure, "The
   acquisition" title, underline fields, and the order summary as a Panel card.
   Payment fields are left exactly as the gateway renders them.
   -------------------------------------------------------------------------- */
.jsabo-checkout__head{
  max-width:var(--js-max-narrow);margin:0 auto;
  padding:180px var(--js-pad) 0;
}
/* h1 needs the tag in front of it: Elementor's kit prints `.elementor-kit-5 h1`
   (0,1,1) and a bare class would lose to it. */
.jsabo-checkout__title,
h1.jsabo-checkout__title{
  font-family:var(--js-display);font-weight:400;font-size:50px;
  margin:0 0 10px;color:var(--js-ink);line-height:1.1;letter-spacing:-.01em;
}
.jsabo-checkout__sub{
  font-family:var(--js-body);font-size:14px;font-weight:300;
  color:var(--js-stone);margin:0 0 46px;
}

.wp-block-woocommerce-checkout,
.wp-block-woocommerce-cart{
  max-width:var(--js-max-narrow);margin:0 auto;
  padding:0 var(--js-pad) 130px;
}

/* Section headings become the design's numbered step labels. The block
   checkout renders them as h2s inside each step. */
.wc-block-components-checkout-step__title,
.wc-block-components-title{
  font-family:var(--js-body)!important;font-size:10.5px!important;
  letter-spacing:.24em!important;text-transform:uppercase!important;
  font-weight:500!important;color:var(--js-stone)!important;
}
.wc-block-components-checkout-step__heading{margin-bottom:18px}

/* Underline fields, as everywhere else in the design. */
.wc-block-components-text-input input,
.wc-block-components-text-input input[type=text],
.wc-block-components-text-input input[type=email],
.wc-block-components-text-input input[type=tel],
.wc-block-components-address-form input,
.wc-block-components-combobox input,
.wc-block-components-textarea{
  border:none!important;border-bottom:1px solid rgba(35,32,26,.3)!important;
  border-radius:0!important;background:transparent!important;box-shadow:none!important;
  padding:24px 2px 9px!important;
  font-family:var(--js-body);font-size:14.5px;font-weight:300;color:var(--js-ink);
}
.wc-block-components-text-input label,
.wc-block-components-combobox label{
  font-family:var(--js-body);font-size:13px;font-weight:300;color:var(--js-stone);
}

/* The order summary sits in a Panel card and follows the page. */
.wp-block-woocommerce-checkout-totals-block{
  background:var(--js-panel);border-radius:6px;padding:44px;
  position:sticky;top:120px;align-self:start;
}
.wp-block-woocommerce-checkout-totals-block .wc-block-components-title{
  margin-bottom:24px;
}
.wc-block-components-order-summary__content{background:transparent}

/* The place-order button, as the design's Ink pill. */
.wc-block-components-checkout-place-order-button,
.wc-block-cart__submit-button{
  background:#23201A!important;color:#F7F3EA!important;border:none!important;
  font-family:var(--js-body)!important;font-size:12.5px!important;
  letter-spacing:.16em!important;text-transform:uppercase!important;
  font-weight:500!important;padding:19px!important;border-radius:var(--RadiusButton,5px)!important;
  transition:transform .3s ease;
}
.wc-block-components-checkout-place-order-button:hover,
.wc-block-cart__submit-button:hover{transform:translateY(-2px)}

/* Selects and radio cards get the same underline treatment as the inputs. */
.wc-blocks-components-select__container{
  border:none!important;background:transparent!important;border-radius:0!important;
}
.wc-blocks-components-select__select,
.wc-block-components-country-input select,
.wc-block-components-state-input select{
  border:none!important;border-bottom:1px solid rgba(35,32,26,.3)!important;
  border-radius:0!important;background:transparent!important;box-shadow:none!important;
  padding:24px 2px 9px!important;height:auto!important;
  font-family:var(--js-body)!important;font-size:14.5px!important;
  font-weight:300!important;color:var(--js-ink)!important;
}
.wc-blocks-components-select__label,
.wc-block-components-checkout-step__description{
  font-family:var(--js-body)!important;font-size:13px!important;
  font-weight:300!important;color:var(--js-stone)!important;
}
.wc-block-components-radio-control-accordion-option,
.wc-block-components-radio-control__option{
  border:1px solid rgba(35,32,26,.14)!important;border-radius:4px!important;
  background:transparent!important;
}
.wc-block-components-radio-control__label,
.wc-block-components-radio-control__secondary-label{
  font-family:var(--js-body)!important;font-size:13.5px!important;
  font-weight:300!important;color:var(--js-slate)!important;
}

/* The summary block ships with its own card background; inside the Panel
   card it reads as a box within a box, so it goes flat. */
.wc-block-components-checkout-order-summary,
.wc-block-components-checkout-order-summary__content,
.wc-block-components-panel,
.wp-block-woocommerce-checkout-order-summary-block{
  background:transparent!important;border:none!important;box-shadow:none!important;
}
.wc-block-components-checkout-order-summary__title{
  border-top:none!important;margin-top:0!important;padding-top:0!important;
  border-bottom:1px solid rgba(35,32,26,.12)!important;padding-bottom:16px!important;
}
/* The floating labels are absolutely positioned inside the field, so the
   field needs headroom (above) and the label needs the same left edge as
   the value it sits over. */
.wc-blocks-components-select__label,
.wc-block-components-text-input label,
.wc-block-components-combobox label{
  left:0!important;padding-left:2px!important;top:6px!important;
  font-family:var(--js-body)!important;font-size:12px!important;
  font-weight:400!important;letter-spacing:.02em!important;
  color:var(--js-stone)!important;transform:none!important;
}
/* The order summary card's heading is its own element, not a shared title. */
.wc-block-components-checkout-order-summary__title-text,
.wc-block-components-checkout-order-summary__title{
  font-family:var(--js-body)!important;font-size:10.5px!important;
  letter-spacing:.24em!important;text-transform:uppercase!important;
  font-weight:500!important;color:var(--js-stone)!important;
}
.wc-block-components-order-summary-item__description .wc-block-components-product-name{
  font-family:var(--js-display)!important;font-size:17px!important;
  font-weight:400!important;color:var(--js-ink)!important;
}
.wc-block-components-order-summary-item__description .wc-block-components-product-metadata{
  font-family:var(--js-body)!important;font-size:12px!important;
  font-weight:300!important;color:var(--js-stone)!important;
}
/* --- The cart screen's own table ------------------------------------- */
.wc-block-cart-items{border-collapse:collapse;width:100%}
.wc-block-cart-items__header th,
.wc-block-cart-items__header{
  font-family:var(--js-body)!important;font-size:10.5px!important;
  letter-spacing:.24em!important;text-transform:uppercase!important;
  font-weight:500!important;color:var(--js-stone)!important;
  border-bottom:1px solid rgba(35,32,26,.12);padding-bottom:16px;
}
.wc-block-cart-items__row{border-bottom:1px solid rgba(35,32,26,.1)}
.wc-block-cart-items__row td{padding:26px 0;vertical-align:top}
.wc-block-cart-item__image{width:96px;padding-right:22px!important}
.wc-block-cart-item__image img{width:96px;height:120px;object-fit:cover;border-radius:2px}
.wc-block-cart-item__product .wc-block-components-product-name{
  font-family:var(--js-display)!important;font-size:21px!important;
  font-weight:400!important;color:var(--js-ink)!important;
  text-decoration:none!important;display:block;margin-bottom:8px;
}
.wc-block-cart-item__product .wc-block-components-product-metadata,
.wc-block-cart-item__product .wc-block-components-product-metadata__description,
.wc-block-cart-item__product .wc-block-components-product-price{
  font-family:var(--js-body)!important;font-size:12.5px!important;
  font-weight:300!important;color:var(--js-stone)!important;
}
.wc-block-cart-item__total .wc-block-components-product-price{
  font-family:var(--js-body)!important;font-size:14.5px!important;color:var(--js-ink)!important;
}
.wc-block-components-quantity-selector{
  border:1px solid rgba(35,32,26,.18)!important;border-radius:var(--RadiusButton,5px)!important;
  min-width:104px;margin-top:16px;
}
.wc-block-components-quantity-selector input,
.wc-block-components-quantity-selector button{
  font-family:var(--js-body)!important;color:var(--js-ink)!important;background:transparent!important;
}
.wc-block-cart-item__remove-link{
  font-family:var(--js-body)!important;font-size:10.5px!important;
  letter-spacing:.2em!important;text-transform:uppercase!important;
  color:var(--js-stone)!important;text-decoration:none!important;
}
.wc-block-cart-item__remove-link:hover{color:var(--js-terracotta)!important}

/* --- Totals card: shared by cart and checkout ------------------------- */
.wp-block-woocommerce-cart-totals-block{
  background:var(--js-panel);border-radius:6px;padding:36px;align-self:start;
}
.wc-block-cart__totals-title{
  font-family:var(--js-body)!important;font-size:10.5px!important;
  letter-spacing:.24em!important;text-transform:uppercase!important;
  font-weight:500!important;color:var(--js-stone)!important;
  border:none!important;margin-bottom:22px!important;
}
.wc-block-components-totals-item__label,
.wc-block-components-totals-item__value{
  font-family:var(--js-body)!important;font-size:13.5px!important;
  font-weight:300!important;color:var(--js-slate)!important;
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value{
  font-family:var(--js-display)!important;font-size:22px!important;
  font-weight:400!important;color:var(--js-ink)!important;letter-spacing:0;
}
.wc-block-components-panel__button{
  font-family:var(--js-body)!important;font-size:12.5px!important;
  font-weight:300!important;color:var(--js-slate)!important;
}

/* The block checkout's snackbar container is laid out in flow inside the
   summary card and reserves ~800px of empty space there. It is meant to be a
   fixed overlay. */
.wc-block-components-notices__snackbar{
  position:fixed!important;left:0;right:0;bottom:0;height:auto;z-index:120;
}

/* Woo's inline links (Log in, Add apartment…) take the theme's link colour. */
.wc-block-checkout__login-prompt,
.wc-block-components-checkout-step a,
.wc-block-components-address-card__edit{
  color:var(--js-stone)!important;text-decoration:none!important;
  border-bottom:1px solid rgba(35,32,26,.25);
  font-family:var(--js-body);font-size:12.5px;font-weight:300;
}
.wc-block-checkout__login-prompt:hover{color:var(--js-ink)!important}

/* The summary card keeps its inset on a phone. */
@media (max-width:767px){
  .wp-block-woocommerce-checkout-totals-block,
.wp-block-woocommerce-cart-totals-block{padding:24px!important}
}

/* The pill buttons are anchors on the cart, so the theme's link colour and
   underline have to be shut off explicitly. */
.wc-block-cart__submit-button,
a.wc-block-cart__submit-button,
a.wc-block-cart__submit-button:hover,
a.wc-block-cart__submit-button:visited{
  color:#F7F3EA!important;text-decoration:none!important;
}
/* The thank-you page: "It's yours." */
.woocommerce-order .woocommerce-notice--success,
.wc-block-order-confirmation-status{
  text-align:center;max-width:640px;margin:0 auto;padding:60px 0;
  background:transparent;border:none;
}
.jsabo-thanks__title{
  display:block;font-family:var(--js-display);font-style:italic;font-size:52px;
  margin-bottom:22px;color:var(--js-ink);
}
.jsabo-thanks__body{
  display:block;font-family:var(--js-body);font-size:15.5px;font-weight:300;
  line-height:1.85;color:var(--js-slate);margin:0 auto 40px;max-width:560px;
}
.jsabo-thanks__cta{
  display:inline-block;background:#23201A;color:#F7F3EA;text-decoration:none;
  font-family:var(--js-body);font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;font-weight:500;padding:16px 32px;border-radius:var(--RadiusButton,5px);
}

/* Hello Elementor prints its own page header on the Woo screens; the design
   supplies the title itself. */
body.woocommerce-cart .page-header,
body.woocommerce-checkout .page-header,
body.woocommerce-account .page-header{display:none}

/* Empty collection. */
.jsabo-cart-empty{
  max-width:var(--js-max-narrow);margin:0 auto;padding:20px var(--js-pad) 150px;
}
.jsabo-cart-empty__title{
  font-family:var(--js-display);font-style:italic;font-size:31px;
  color:var(--js-ink);margin:0 0 12px;font-weight:400;
}
.jsabo-cart-empty__body{
  font-family:var(--js-body);font-size:14.5px;font-weight:300;
  color:var(--js-stone);margin:0 0 34px;
}
a.jsabo-cart-empty__cta{
  display:inline-block;background:#23201A;color:#F7F3EA;text-decoration:none;
  font-family:var(--js-body);font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;font-weight:500;padding:16px 32px;border-radius:var(--RadiusButton,5px);
  transition:transform .3s ease;
}
a.jsabo-cart-empty__cta:hover{transform:translateY(-2px);color:#F7F3EA}

/* The thank-you screen is only ever "It's yours." — the checkout's own title
   and the theme's endpoint heading both step aside for it. */
body.woocommerce-order-received .jsabo-checkout__head,
body.woocommerce-order-received .page-header{display:none}
body.woocommerce-order-received .wp-block-woocommerce-checkout,
body.woocommerce-order-received .woocommerce{
  max-width:var(--js-max-narrow);margin:0 auto;padding:150px var(--js-pad) 130px;
}

/* The theme paints links orange-and-underlined; the CTA is a pill, so it
   needs the tag in the selector to outrank that. */
a.jsabo-thanks__cta,
a.jsabo-thanks__cta:hover,
a.jsabo-thanks__cta:visited{color:#F7F3EA;text-decoration:none}

/* One measure for the whole confirmation: the overview row and the details
   table were landing on different left edges. */
.woocommerce-order{max-width:840px;margin:0 auto}
.woocommerce-order .woocommerce-order-details,
.woocommerce-order .woocommerce-customer-details{padding:0;margin:0}

/* Order summary tables on the thank-you and account screens. */
.woocommerce-order .woocommerce-order-overview{
  list-style:none;margin:0 0 56px;padding:34px 0 0;
  display:flex;flex-wrap:wrap;gap:38px;justify-content:center;
  border-top:1px solid rgba(35,32,26,.12);
}
.woocommerce-order .woocommerce-order-overview li{
  font-family:var(--js-body);font-size:10.5px;letter-spacing:.24em;
  text-transform:uppercase;font-weight:500;color:var(--js-stone);
}
.woocommerce-order .woocommerce-order-overview li strong{
  display:block;margin-top:9px;font-family:var(--js-display);font-size:19px;
  letter-spacing:0;text-transform:none;font-weight:400;color:var(--js-ink);
}
.woocommerce-order .woocommerce-order-details__title,
.woocommerce-order .woocommerce-column__title{
  font-family:var(--js-body);font-size:10.5px;letter-spacing:.24em;
  text-transform:uppercase;font-weight:500;color:var(--js-stone);margin:0 0 20px;
}
.woocommerce-order table.woocommerce-table--order-details{
  width:100%;margin:0;border:none;border-collapse:collapse;background:transparent;
  font-family:var(--js-body);font-size:14.5px;font-weight:300;color:var(--js-slate);
}
.woocommerce-order table.woocommerce-table--order-details th,
.woocommerce-order table.woocommerce-table--order-details td{
  padding:16px 0;border:none;border-bottom:1px solid rgba(35,32,26,.1);
  text-align:left;background:transparent;
}
.woocommerce-order table.woocommerce-table--order-details th{
  font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;
  font-weight:500;color:var(--js-stone);
}
.woocommerce-order table.woocommerce-table--order-details td:last-child,
.woocommerce-order table.woocommerce-table--order-details th:last-child{text-align:right}
.woocommerce-order table.woocommerce-table--order-details a{
  color:var(--js-ink);text-decoration:none;
}
.woocommerce-order .wc-item-meta{list-style:none;margin:6px 0 0;padding:0;font-size:12.5px;color:var(--js-stone)}
.woocommerce-order .wc-item-meta li{display:flex;gap:6px}
.woocommerce-order .wc-item-meta li p{margin:0}

@media (max-width:767px){
  .jsabo-checkout__head{padding:120px 20px 0}
  .jsabo-checkout__title,
h1.jsabo-checkout__title{font-size:34px}
  .wp-block-woocommerce-checkout,
.wp-block-woocommerce-cart{padding:0 20px 70px}
  .wp-block-woocommerce-checkout-totals-block{position:static;padding:24px}
  .jsabo-thanks__title{font-size:34px}
}

/* --------------------------------------------------------------------------
   7. FOOTER (screen: Footer)
   4 columns 1.4/1/1/1, hairline above the baseline row.
   -------------------------------------------------------------------------- */
/* The footer's geometry and type already live in Global Classes that match
   the prototype exactly (surface-ink, footer-shell, grid-footer, footer-col,
   footer-label, footer-link, footer-body, footer-brand, footer-baseline,
   footer-motto, footer-fineprint), including their tablet and mobile
   variants. Only the things v4 cannot express are left here. */

/* Underline on hover for the footer's plain links. */
.footer-link:hover{text-decoration:underline}

/* On mobile the baseline row stacks; v4 has no flex-direction variant set
   on this class, and the two halves would otherwise collide. */
@media (max-width:767px){
  .footer-baseline{flex-direction:column;align-items:flex-start;gap:12px}
}

/* --------------------------------------------------------------------------
   8. MOBILE — nav collapses to brand + Collection pill + menu toggle.
   The prototype is desktop-only, so everything below 768 is derived. Rules
   that belong to one screen live with that screen (6m, 6n, 6o…); this
   section carries the header, the hero type ramp and the cross-screen
   minimums (44px hit targets, 20px gutters).
   -------------------------------------------------------------------------- */

/* The toggle and the drop-down panel are injected by initMobileNav() so the
   Elementor header template stays untouched. The panel holds CLONES of the
   nav links — the originals stay in the bar and are simply hidden. */
.site-header-bar button.jsabo-navtoggle{
  display:none;width:44px;height:44px;padding:0;border:none;background:none;
  cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px;
}
.site-header-bar button.jsabo-navtoggle span{
  display:block;width:20px;height:1px;background:var(--js-ink);
  transition:transform .3s var(--js-ease),opacity .2s ease;
}
.site-header-bar.is-navopen .jsabo-navtoggle span:first-child{transform:translateY(3px) rotate(45deg)}
.site-header-bar.is-navopen .jsabo-navtoggle span:last-child{transform:translateY(-3px) rotate(-45deg)}
.jsabo-navpanel{
  position:absolute;top:100%;left:0;right:0;
  background:var(--js-bone);border-bottom:1px solid rgba(35,32,26,.1);
  display:flex;flex-direction:column;padding:4px 20px 20px;
  box-shadow:0 24px 40px -28px rgba(24,21,16,.4);
}
a.jsabo-navpanel__link{
  display:flex;align-items:center;min-height:48px;padding:4px 0;
  font-family:var(--js-body);font-size:12.5px;letter-spacing:.14em;
  text-transform:uppercase;font-weight:500;color:var(--js-ink);text-decoration:none;
  border-bottom:1px solid rgba(35,32,26,.08);
}
a.jsabo-navpanel__link:last-child{border-bottom:none}


.site-header-bar button.jsabo-navtoggle:hover,
.site-header-bar button.jsabo-navtoggle:focus{background:none}

@media (max-width:767px){
  /* Header: brand, then the Collection pill and the toggle. */
  .site-header-bar > .page-wrap{padding:16px 20px}
  .site-header-bar .nav-row{gap:10px}
  .site-header-bar .nav-row .nav-link{display:none}
  .site-header-bar button.jsabo-navtoggle{display:flex}
  .elementor .brand-name{font-size:19px;letter-spacing:.05em}
  .elementor .brand-tagline{font-size:8.5px;letter-spacing:.24em}
  .elementor [data-id="hdrinner"]{flex-wrap:nowrap;gap:12px}
  .elementor [data-id="brandlock"]{flex:none}
  .site-header-bar button.nav-cart-pill{padding:12px 15px;font-size:11px;letter-spacing:.12em}

  /* Hero: the clamp bottoms out at 58px, which is a desktop size on a
     390px screen and breaks "I don't have a plan," across two lines. */
  
  
  
  
  
  

  /* Long button labels ("Add print to collection — $95") run to the edge
     at 390px, so the tracking and size step down. */
  .jsabo-prints__cta,
.jsabo-buy__cta{font-size:12px;letter-spacing:.12em;padding-left:16px;padding-right:16px}

  /* Anything tappable clears 44px. */
  .jsabo-chip,
.jsabo-save,
.jsabo-prints__row,
.jsabo-acc summary,
.wc-block-components-quantity-selector button{min-height:44px}

  /* Checkout: the summary comes before the form on a phone. */
  .wp-block-woocommerce-checkout{display:flex;flex-direction:column}
  .wp-block-woocommerce-checkout-totals-block{order:-1;margin-bottom:34px}
  .wp-block-woocommerce-checkout-fields-block{order:0}
  .wp-block-woocommerce-cart{display:flex;flex-direction:column}
  .wp-block-woocommerce-cart-totals-block{margin-top:30px}
}

/* At 390px the lockup, a "Collection (1)" pill and a 44px toggle add up to
   more than the bar: everything steps down a notch, and the toggle keeps its
   44px target by overhanging into the gutter. */
@media (max-width:420px){
  .elementor .brand-name{font-size:17.5px}
  .elementor .brand-tagline{font-size:8px;letter-spacing:.22em}
  .site-header-bar .nav-row{gap:6px}
  .site-header-bar button.nav-cart-pill{padding:11px 13px;font-size:10.5px;letter-spacing:.1em}
  .site-header-bar button.jsabo-navtoggle{margin-right:-10px}
}

/* --------------------------------------------------------------------------
   9. HOUSEKEEPING — carried over from Site Settings > Custom CSS so
   everything lives in one file.
   -------------------------------------------------------------------------- */

/* Elementor Pro's reCAPTCHA v3 key is registered for jsaboart.com, so on
   staging the badge renders as a red "Invalid domain for site key" box that
   hangs off the right edge. Nothing on this site uses Elementor Forms — the
   forms are WPForms — so the badge is hidden. Fix properly by adding the
   staging domain to the key in the Google console, or by clearing the
   Elementor > Settings > Integrations reCAPTCHA keys on staging. */
.grecaptcha-badge{display:none!important}
/* Masonry cards must not split across columns (no v4 break-inside control). */
.art-card{break-inside:avoid;-webkit-column-break-inside:avoid}
/* Poem card keeps the poet's line breaks from the ACF textarea. */
.poem-text{white-space:pre-line}
/* Hide the poem card on artworks with no poem yet
   (body class from the "Poem block visibility" snippet). */
body.no-poem .poem-card{display:none}
/* Artwork status badge, written by the "Artwork status badges" snippet. */
.jsabo-badge{
  font-family:var(--js-body);font-size:9.5px;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--js-ink);background:rgba(247,243,234,.92);
  padding:7px 12px;border-radius:999px;display:inline-block;line-height:1;
}
.jsabo-badge--grid{position:absolute;top:14px;left:14px;z-index:2}
.jsabo-badge--single{margin:0 0 4px}
/* "New release" is the inverse: Ink pill, Bone type. */
.jsabo-badge--new{background:var(--js-ink);color:var(--js-bone)}

/* Copy Jeanette still has to verify before launch is tagged .jsabo-verify
   so it is easy to find. No visual effect. */
.jsabo-verify{}


/* ===== HOME: COLLECTIONS GRID (Oct 8 2026) =====
   Seven series tiles: 3 centered on top, 4 below, all the same size.
   8-column grid, each tile spans 2; the first tile starts at column 2 so
   the top row of three sits centred over the four. */


/* Section title on one line on desktop. */


/* PRODUCT: framed canvas spec list (Oct 9 2026) */
.jsabo-prints__detail{list-style:none;margin:16px 0 4px;padding:14px 16px;border:1px solid rgba(127,127,127,.35);font-size:.9rem;line-height:1.5}
.jsabo-prints__detail[hidden]{display:none}
.jsabo-prints__detail li{position:relative;padding-left:14px;margin:0 0 6px}
.jsabo-prints__detail li:last-child{margin-bottom:0}
.jsabo-prints__detail li::before{content:'';position:absolute;left:0;top:.65em;width:5px;height:1px;background:currentColor}
.jsabo-prints__detail li:first-child{font-weight:600}