/* Mobile header overrides for peterbatchelder.com */
/* Increment version= in header.php to cache-bust */

/* ── Prevent horizontal scroll / page drift ── */
html {
  overflow-x: clip !important;
}

#mobile-available-work { display: none; }

/* ── Hide the mobile bar on desktop ── */
#mobile-site-header { display: none; }

/* ══════════════════════════════════════════════════════════════════════
   GLOBAL DESIGN SYSTEM — Josefin Sans + Gold
   Applies site-wide on all screen sizes.
══════════════════════════════════════════════════════════════════════ */

/* ── Custom-template page title: high specificity + early so it wins immediately,
      preventing any progressive-render flash of the larger global h1 rule ── */
h1.pb-page-title {
  font-size: 17px !important;
  text-align: center !important;
  color: rgba(240,236,228,0.55) !important;
  letter-spacing: 0.26em !important;
  text-transform: uppercase !important;
  font-family: 'Josefin Sans', 'Helvetica Neue', Arial, sans-serif !important;
  font-weight: 300 !important;
  border-bottom: 1px solid rgba(218,165,32,0.18) !important;
  padding-bottom: 14px !important;
  margin-bottom: 24px !important;
  line-height: 1.3 !important;
}

/* ── Headings ── */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Josefin Sans', 'Helvetica Neue', Arial, sans-serif !important;
  font-weight: 300 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  line-height: 1.25 !important;
}
h1 { font-size: calc(2rem + 5px) !important; text-align: center !important; }
h2 { font-size: calc(1.4rem + 5px) !important; text-align: center !important; }
h3 { font-size: 1.15rem !important; }
h4 { font-size: 0.95rem !important; }

/* ── Global link hover — gold ── */
a:hover, a:focus {
  color: #daa520 !important;
  text-decoration: none !important;
}

/* ── Desktop & tablet navigation links — off / hover / active ── */
.navbar-inner .nav > li > a,
.navbar-inner .nav > li > a:visited {
  font-family: 'Josefin Sans', 'Helvetica Neue', Arial, sans-serif !important;
  font-weight: 300 !important;
  font-size: 13px !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  color: rgba(220,216,210,0.92) !important;   /* off: brighter warm grey */
  background: transparent !important;
  text-shadow: none !important;
  border-radius: 3px !important;
  transition: color 0.15s, background-color 0.15s !important;
}
/* Hover: subtle gold wash, text lifts to full gold.
   Covers plain items AND dropdown-toggle items (e.g. "Available Work") */
.navbar-inner .nav > li > a:hover,
.navbar-inner .nav > li.dropdown > a:hover,
.navbar-inner .nav > li.dropdown > a.dropdown-toggle:hover,
.navbar-inner .nav > li.open > a,
.navbar-inner .nav > li.open > a:hover,
.navbar-inner .nav > li.open > a:focus {
  color: #daa520 !important;
  background-color: rgba(218,165,32,0.10) !important;
  text-shadow: none !important;
}
/* Active / current page: richer gold background, bright gold text */
.navbar-inner .nav > li.active > a,
.navbar-inner .nav > li.current-menu-item > a,
.navbar-inner .nav > li.current_page_item > a,
.navbar-inner .nav > li.current-menu-ancestor > a,
.navbar-inner .nav > li.active > a:hover,
.navbar-inner .nav > li.active > a:focus {
  color: #ffe066 !important;
  background-color: rgba(218,165,32,0.22) !important;
  text-shadow: none !important;
}

/* ══════════════════════════════════════════════════════════════════════
   FOOTER — elegant minimal redesign
══════════════════════════════════════════════════════════════════════ */

#footer,
#footer .container,
#footer .container-fluid,
#footer .row,
#footer .row-fluid,
#footer .span12,
#footer .widget-area,
#footer .footer-inner,
html body #footer {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}
#footer {
  border-top: 1px solid rgba(218,165,32,0.18) !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}

#footer footer {
  padding: 24px 20px 24px !important;
  text-align: center !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Footer nav — full-width flex row, truly centered */
#footer-nav {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Target both possible class names from the two walkers */
#footer-nav ul,
#footer-nav .footer-nav-list,
#footer-nav .nav {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  gap: 6px 0 !important;
}

#footer-nav ul > li,
#footer-nav .footer-nav-list > li,
#footer-nav .nav > li {
  display: flex !important;
  align-items: center !important;
  float: none !important;
}

/* Hide the • | • separator item however it appears */
#footer-nav li a[href*="available-in-studio"],
#footer-nav li a[title*="•"],
#footer-nav li a[title*="|"] {
  display: none !important;
}
#footer-nav li:has(a[href*="available-in-studio"]),
#footer-nav li:has(a[title*="•"]) {
  display: none !important;
}

/* Gold hairline separator between visible items */
#footer-nav li + li::before {
  content: '' !important;
  display: inline-block !important;
  width: 1px !important;
  height: 8px !important;
  background: rgba(218,165,32,0.22) !important;
  margin: 0 13px !important;
  flex-shrink: 0 !important;
}
/* Prevent double-separator when hidden li is adjacent */
#footer-nav li:has(a[href*="available-in-studio"]) + li::before,
#footer-nav li:has(a[title*="•"]) + li::before {
  display: none !important;
}

/* Nav link typography */
#footer-nav li > a,
#footer-nav li > a:visited {
  font-family: 'Josefin Sans', 'Helvetica Neue', Arial, sans-serif !important;
  font-weight: 300 !important;
  font-size: 13px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: rgba(220,216,210,0.82) !important;
  text-decoration: none !important;
  border-bottom: none !important;
  background: transparent !important;
  padding: 4px 0 !important;
  transition: color 0.15s !important;
  line-height: 1 !important;
}

#footer-nav li > a:hover {
  color: #daa520 !important;
  background: transparent !important;
  border-bottom: none !important;
}

/* Copyright line */
#footer-copyright {
  font-family: 'Josefin Sans', 'Helvetica Neue', Arial, sans-serif !important;
  font-weight: 300 !important;
  font-size: 12px !important;
  letter-spacing: 0.20em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.18) !important;
  margin-top: 24px !important;
  padding-top: 18px !important;
  border-top: 1px solid rgba(255,255,255,0.05) !important;
}

/* ── All Bootstrap buttons ── */
.btn {
  font-family: 'Josefin Sans', 'Helvetica Neue', Arial, sans-serif !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  border-radius: 3px !important;
  border: none !important;
  text-shadow: none !important;
  box-shadow: none !important;
  transition: opacity 0.15s !important;
}
.btn-primary,
.btn-primary:visited {
  background: linear-gradient(135deg, #daa520 0%, #c8910a 100%) !important;
  color: #1a1a1a !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(218,165,32,0.3) !important;
}
.btn-primary:hover, .btn-primary:focus {
  opacity: 0.88 !important;
  color: #1a1a1a !important;
}
.btn-default, .btn-secondary {
  background: transparent !important;
  color: #daa520 !important;
  border: 1px solid rgba(218,165,32,0.45) !important;
}
.btn-default:hover {
  background: rgba(218,165,32,0.08) !important;
  color: #daa520 !important;
  border-color: #daa520 !important;
}

/* ══════════════════════════════════════════════════════════════════════
   AVAILABLE WORK GALLERY — artcell grid
══════════════════════════════════════════════════════════════════════ */

/* Legacy #artholder (old template) */
#artholder {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: flex-start !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 0 !important;
  float: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.row > #artholder,
.row > .span12#artholder {
  float: none !important;
  margin-left: 0 !important;
  width: 100% !important;
}
#artholder > .clear,
#artholder > div.clear {
  display: none !important;
}

/* ── artcell-wrapper: 3 columns on desktop — paintings ~33% wider, no clipping ── */

/* Switch to 3 columns. Specificity (1,1,0) beats cached template's
   .artcell-wrapper (0,1,0) which sets 4 columns. */
#holder .artcell-wrapper,
#cellhead .artcell-wrapper {
  grid-template-columns: repeat(3, 1fr) !important;
  width: 100% !important;
  margin-left: 0 !important;
  align-items: stretch !important;
}

/* Un-clip the <a> image wrapper */
#artcell > a,
#holder .artcell > a {
  overflow: visible !important;
  display: block !important;
  line-height: 0 !important;
}

/* Images: fixed height so all rows are uniform; width auto so aspect ratio is preserved.
   Specificity (2,1,2) beats style.css's #artcell img (1,0,1). */
#holder .artcell-wrapper #artcell > a > img,
#holder .artcell-wrapper .artcell > a > img,
#cellhead .artcell-wrapper #artcell > a > img,
#cellhead .artcell-wrapper .artcell > a > img {
  height: 235px !important;
  width: auto !important;
  max-width: 100% !important;
  max-height: 235px !important;
  object-fit: contain !important;
  margin-left: auto !important;
  margin-right: auto !important;
  display: block !important;
}

/* Mobile: 1-column */
@media (max-width: 767px) {
  #holder .artcell-wrapper,
  #cellhead .artcell-wrapper {
    grid-template-columns: 1fr !important;
  }
}

/* Grid items: reset any flex sizing so grid controls width */
.artcell-wrapper > #artcell,
.artcell-wrapper > .artcell {
  padding-top: 14px !important;
  flex: none !important;
  width: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  background-color: transparent !important;
  background: none !important;
  border-radius: 0 !important;
  border: none !important;
}

/* ── Remove gray card boxes (non-wrapper context) ── */
#artcell,
.artcell {
  background-color: transparent !important;
  background: none !important;
  border-radius: 0 !important;
  border: none !important;
}

/* ── Sold: dim + "SOLD" overlay on image ── */
.artcell.sold,
#artcell.sold {
  background-color: transparent !important;
  background: none !important;
}
.artcell.sold,
.artcell.sold a,
.artcell.sold b,
.artcell.sold i,
.artcell.sold #artcelllocation,
.artcell.sold .reddot {
  color: #aaa !important;
}
/* Image link: shrink to image width so the SOLD banner only covers the image,
   not the entire cell. fit-content keeps it block-level but hugs content width.
   overflow: hidden clips the ::after strictly to the image <a> bounds.
   Two-ID selectors (2,1,1) beat every single-ID rule. */
#holder .artcell-wrapper #artcell.sold > a,
#holder .artcell-wrapper .artcell.sold > a,
#cellhead .artcell-wrapper #artcell.sold > a,
#cellhead .artcell-wrapper .artcell.sold > a,
.artcell.sold > a,
#artcell.sold > a {
  position: relative !important;
  display: block !important;
  width: fit-content !important;
  height: 235px !important;
  overflow: hidden !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
/* Center sold cells */
#holder .artcell-wrapper #artcell.sold,
#holder .artcell-wrapper .artcell.sold,
#cellhead .artcell-wrapper #artcell.sold,
#cellhead .artcell-wrapper .artcell.sold,
.artcell.sold,
#artcell.sold {
  text-align: center !important;
}
/* "SOLD" banner — bottom of the image only, with word padding */
.artcell.sold > a::after,
#artcell.sold > a::after {
  content: 'SOLD' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  background: rgba(160,30,30,0.78) !important;
  color: rgba(255,255,255,0.92) !important;
  font-family: 'Josefin Sans', 'Helvetica Neue', Arial, sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.34em !important;
  text-align: center !important;
  padding: 12px 20px 9px !important;
  text-transform: uppercase !important;
  pointer-events: none !important;
}

/* ── Mobile: SOLD banner larger at small sizes ── */
@media (max-width: 767px) {
  .artcell.sold > a::after,
  #artcell.sold > a::after {
    font-size: 14px !important;
    letter-spacing: 0.28em !important;
    padding: 14px 24px 10px !important;
  }
}

/* ── Painting image: subtle hover ── */
/* Shadow on the <a> wrapper (image only), opacity on the img itself */
#artcell > a,
.artcell > a {
  display: block !important;
  overflow: hidden !important;
  line-height: 0 !important;
}
/* Painting thumbnail: fixed 220px height, width auto (aspect ratio preserved). */
#cellhead .artcell-wrapper #artcell > a > img,
#cellhead .artcell-wrapper .artcell > a > img,
#holder .artcell-wrapper #artcell > a > img,
#holder .artcell-wrapper .artcell > a > img,
.artcell-wrapper > #artcell > a > img,
.artcell-wrapper > .artcell > a > img,
#artcell > a > img,
.artcell > a > img {
  height: 235px !important;
  width: auto !important;
  max-width: 100% !important;
  max-height: 235px !important;
  margin-left: auto !important;
  object-fit: contain !important;
  display: block !important;
}
#artcell:hover > a > img,
.artcell:hover > a > img {
  filter: drop-shadow(0 3px 8px rgba(0,0,0,0.28)) !important;
}
/* Reddot dot: always tiny */
.artcell-wrapper > #artcell .reddot img,
.artcell-wrapper > .artcell .reddot img,
#artcell .reddot img,
.artcell .reddot img {
  width: 12px !important;
  max-width: 12px !important;
  height: 12px !important;
  display: inline-block !important;
}

/* ── Artcell typography ── */
#artcell,
.artcell {
  font-family: 'Josefin Sans', 'Helvetica Neue', Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 300 !important;
  letter-spacing: 0.06em !important;
  color: #ccc !important;
  line-height: 1.75 !important;
  text-align: center !important;
}
.artcell b,
.artcell strong,
#artcell b,
#artcell strong {
  font-family: 'Josefin Sans', 'Helvetica Neue', Arial, sans-serif !important;
  font-weight: 400 !important;
  font-size: 19px !important;
  letter-spacing: 0.08em !important;
  display: block !important;
  margin-top: 14px !important;
  margin-bottom: -6px !important;
  line-height: 1.2 !important;
  color: #f0ece4 !important;
  text-transform: uppercase !important;
}
.artcell a:hover,
#artcell a:hover {
  color: #daa520 !important;
}

/* ── "Details and Inquire" link ── */
.artcell i,
#artcell i {
  display: block !important;
  margin-top: 8px !important;
}
.artcell i a,
#artcell i a,
.artcell i a:link,
.artcell i a:visited {
  font-style: normal !important;
  font-size: 12px !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: #daa520 !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(218,165,32,0.25) !important;
  padding-bottom: 1px !important;
  transition: color 0.15s, border-color 0.15s !important;
}
.artcell i a:hover,
#artcell i a:hover {
  color: #daa520 !important;
  border-color: rgba(218,165,32,0.7) !important;
}

/* ── "All original oils" page title ── */
.container > h2[style],
#cellhead ~ h2,
#cellhead + h2,
h2[style*="All original"] {
  font-family: 'Josefin Sans', 'Helvetica Neue', Arial, sans-serif !important;
  font-weight: 300 !important;
  font-size: 13px !important;
  letter-spacing: 0.34em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.55) !important;
  text-align: center !important;
  margin-left: 0 !important;
  margin-bottom: 28px !important;
  padding-bottom: 16px !important;
  border-bottom: 1px solid rgba(218,165,32,0.2) !important;
}

/* ── Availability / reddot location ── */
#artcelllocation,
#artcell #artcelllocation,
.artcell #artcelllocation {
  font-size: 13px !important;
  letter-spacing: 0.1em !important;
  color: #aaa !important;
  display: inline !important;
  vertical-align: baseline !important;
  line-height: inherit !important;
  margin-left: 5px !important;
}
/* Hide the <br> between the reddot span and the gallery name so
   "Currently in / SOLD through" and the gallery name sit on one line. */
#artcell .reddot + br,
.artcell .reddot + br {
  display: none !important;
}

/* ── Mobile: bump painting data +2px (must follow global rules to win) ── */
@media (max-width: 767px) {
  #artcell,
  .artcell {
    font-size: 16px !important;
  }
  .artcell b,
  .artcell strong,
  #artcell b,
  #artcell strong {
    font-size: 21px !important;
  }
  #artcelllocation,
  #artcell #artcelllocation,
  .artcell #artcelllocation {
    font-size: 15px !important;
  }
  .artcell i a,
  #artcell i a,
  .artcell i a:link,
  .artcell i a:visited {
    font-size: 14px !important;
    color: #daa520 !important;
  }
}

/* ── Page title on content pages ── */
.entry-title,
.page-title,
#page-title,
.post-title {
  font-family: 'Josefin Sans', 'Helvetica Neue', Arial, sans-serif !important;
  font-weight: 300 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  text-align: center !important;
}

@media (max-width: 767px) {

  /* ── Hide the original Bootstrap title container ── */
  #header-title-container {
    display: none !important;
  }

  /* ────────────────────────────────────────────────
     NAVBAR CONTAINER
     flex-column: stacks #mobile-site-header directly
     against the .row with zero gap — no background
     color so black comes only from .navbar itself.
  ──────────────────────────────────────────────── */
  #header-nav-container {
    position: sticky !important;
    top: 0 !important;
    z-index: 9999 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    /* env(safe-area-inset-top) pushes content below iOS notch/Dynamic Island */
    padding: env(safe-area-inset-top, 0px) 0 0 0 !important;
    margin: 0 !important;
    background: #1a1a1a !important;
  }

  /* Container wrapping #mobile-available-work: show on all pages */
  #header-nav-container > .container {
    display: block !important;
    padding: 6px 0 !important;
    margin: 0 !important;
    background: #e8dfc8 !important;
  }
  #header-nav-container > .container > .row {
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  /* Hide on the Available Work page — you're already there */
  body:has(.availablework-menu-item.active) #header-nav-container > .container,
  body:has(.availablework-menu-item.current-menu-item) #header-nav-container > .container {
    display: none !important;
  }
  /* Bootstrap clearfix ::before/::after become flex items in a flex
     container. Kill them so they add zero height between title bar
     and the navbar row. */
  #header-nav-container::before,
  #header-nav-container::after {
    display: none !important;
    content: none !important;
    height: 0 !important;
    line-height: 0 !important;
    font-size: 0 !important;
  }
  #header-nav-container > .row {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    float: none !important;
  }
  #header-nav-container .span12 {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
  }

  /* ────────────────────────────────────────────────
     WHITE TITLE BAR — 60 px, title centered
  ──────────────────────────────────────────────── */
  #mobile-site-header {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 60px !important;
    background: #fff !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  #mobile-site-header > a {
    font-family: 'Josefin Sans', 'Helvetica Neue', Arial, sans-serif !important;
    font-weight: 300 !important;
    font-size: 19px !important;
    letter-spacing: 0.22em !important;
    line-height: 1 !important;
    padding-top: 3px !important;
    text-transform: uppercase !important;
    color: #2a2a2a !important;
    text-decoration: none !important;
    text-align: center !important;
    white-space: nowrap !important;
    border-bottom: none !important;
    background: none !important;
  }

  /* ── Hide desktop-only elements ── */
  #header-join-col, #socials, #join, #pb-right-cluster, #searchform, .search-form { display: none !important; }
  .container > br { display: none !important; }

  /* ────────────────────────────────────────────────
     BLACK NAVBAR BAR — exactly 60 px to match white bar
     padding-top: 60px drives the collapsed height.
     Hamburger top: 17px centers it in 60px.
     (hamburger button ~26px tall: (60-26)/2 ≈ 17)
  ──────────────────────────────────────────────── */
  .navbar {
    margin: 0 !important;
    border-radius: 0 !important;
    background: #1a1a1a !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    min-height: 60px !important;
    overflow: visible !important;
  }
  .navbar-inner {
    position: relative !important;
    border-radius: 0 !important;
    padding-top: 60px !important;
    padding-bottom: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-top: 0 !important;
    min-height: 0 !important;
    background: #1a1a1a !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  /* ── Hamburger: centered in 60px bar ── */
  .navbar .btn-navbar,
  a.btn.btn-navbar {
    position: absolute !important;
    top: 10px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    display: block !important;
    float: none !important;
    background: #444 !important;
    background-image: none !important;
    border: none !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    padding: 7px 9px 5px !important;
    margin: 0 !important;
    z-index: 10 !important;
    text-align: center !important;
  }
  .navbar .btn-navbar::after,
  a.btn.btn-navbar::after {
    content: "MENU" !important;
    display: block !important;
    color: #fff !important;
    font-family: Arial, sans-serif !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    line-height: 1 !important;
    margin-top: 5px !important;
    text-align: center !important;
  }
  .navbar .btn-navbar .icon-bar,
  a.btn.btn-navbar .icon-bar {
    background: #fff !important;
    display: block !important;
    width: 18px !important;
    height: 2px !important;
    border-radius: 1px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 3px !important;
  }
  .navbar .btn-navbar .icon-bar:last-child,
  a.btn.btn-navbar .icon-bar:last-child {
    margin-bottom: 0 !important;
  }

  /* ── Nav dropdown ── */
  .navbar-inverse .nav-collapse {
    background: #1a1a1a !important;
    width: 100% !important;
    clear: both !important;
  }
  .navbar-inverse .nav-collapse .nav > li > a {
    color: #ccc !important;
    border-bottom: 1px solid #2a2a2a !important;
    font-size: 15px !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    padding: 11px 16px !important;
    display: block !important;
    text-align: center !important;
  }
  .navbar-inverse .nav-collapse .nav > li > a:hover {
    color: #daa520 !important;
    background: rgba(218,165,32,0.08) !important;
  }

  /* ────────────────────────────────────────────────
     GOLD AVAILABLE WORK BAR
     Full viewport width regardless of parent padding.
     position relative + left/transform = full-bleed.
  ──────────────────────────────────────────────── */
  a#mobile-available-work {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: static !important;
    left: auto !important;
    transform: none !important;
    width: auto !important;
    height: 38px !important;
    background: linear-gradient(135deg, #b8860b 0%, #daa520 50%, #b8860b 100%) !important;
    padding: 0 32px !important;
    margin: 0 auto !important;
    color: #fff !important;
    font-size: 0 !important;
    text-decoration: none !important;
    border-radius: 40px !important;
    box-shadow: 0 2px 10px rgba(218,165,32,0.35) !important;
    box-sizing: border-box !important;
  }
  a#mobile-available-work::before {
    content: 'View Available Work  →' !important;
    font-size: 13px !important;
    font-family: 'Josefin Sans', 'Helvetica Neue', Arial, sans-serif !important;
    font-weight: 400 !important;
    letter-spacing: 0.22em !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
    color: #fff !important;
    margin-top: 2px !important;
  }


}

/* ══════════════════════════════════════════════════════════════════════
   ARTWORK DETAIL PAGE — full design system
   Applies at all screen widths; mobile overrides below.
══════════════════════════════════════════════════════════════════════ */

/* ── Space between prev/next nav and the painting ── */
#artwork-nav {
  margin-bottom: 18px !important;
}
/* Breathing room between artwork content and footer */
#artwork-nav ~ .container-fluid {
  padding-bottom: 56px !important;
}

/* ── SOLD banner on artwork detail page ──
   Anchor to the <a> (direct image wrapper) so the banner sits
   at the bottom of the image itself, not the outer div. */
.featured-img-wrap.sold > a {
  position: relative !important;
  display: block !important;
  overflow: hidden !important;
}
.featured-img-wrap.sold > a::after {
  content: 'SOLD' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  background: rgba(160,30,30,0.78) !important;
  color: rgba(255,255,255,0.92) !important;
  font-family: 'Josefin Sans', 'Helvetica Neue', Arial, sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: 0.32em !important;
  text-align: center !important;
  padding: 12px 0 11px !important;
  text-transform: uppercase !important;
  pointer-events: none !important;
}

/* ── Image container: strip card box, shadow on image only ── */
#borderedspan {
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  background-color: transparent !important;
  background: none !important;
  box-shadow: none !important;
}
#borderedspan img,
#borderedspan .lightbox-img img,
.featured-img-wrap img {
  display: block !important;
  max-width: 100% !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 auto !important;
  box-shadow: 0 3px 12px rgba(0,0,0,0.18) !important;
}
/* Artwork detail only — constrain tall images to avoid forced scroll */
#borderedspan .featured-img-wrap img {
  max-height: 550px !important;
  width: auto !important;
}

/* Remove top spacer <br> so left + right column images align at the same height */
.span7 > br:first-child { display: none !important; }

/* ── Homepage image sizing is handled in PHP (Batchelder.CustomHome.php).
      pb_scaled_thumbnail() wraps each image in a div whose max-width equals
      the proportionally-calculated width for a 520px max height.
      The global width:100%/height:auto below fills that wrapper correctly —
      no CSS override needed here. ── */

/* ── Desktop: two homepage images centred as a pair with 40px gap.
      PHP (pb_scaled_thumbnail) sets an explicit inline width!important on each
      img so the column is exactly as wide as the image — no surplus space.
      justify-content:center then has real room to centre the pair. ── */
@media (min-width: 768px) {
  #pb-home-duo {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: flex-start !important;
    gap: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
  }
  /* Columns shrink to their content (= image width) — no extra space */
  #pb-home-duo > .span7,
  #pb-home-duo > .span5 {
    float: none !important;
    width: auto !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 !important;
    min-width: 0 !important;
  }
  /* borderedspan fills column; no custom flex needed — img width is explicit */
  #pb-home-duo > .span7 > #borderedspan,
  #pb-home-duo > .span5 > #borderedspan {
    width: auto !important;
  }
  /* Left image title right-aligned (faces centre gap) */
  #pb-home-duo > .span7 > #borderedspan h3 {
    text-align: right !important;
  }
  /* Right image title left-aligned */
  #pb-home-duo > .span5 > #borderedspan h3 {
    text-align: left !important;
  }
  /* Hide the empty row-fluid in span5 */
  #pb-home-duo > .span5 > .row-fluid {
    display: none !important;
  }
}

/* ── Details column padding ── */
.span5 {
  text-align: left !important;
  padding: 28px 28px 0 28px !important;
  box-sizing: border-box !important;
}

/* Homepage: right column top-aligned with left — zero the top push */
.row > .span5 {
  padding-top: 0 !important;
}
/* Kill <br> spacer and empty row-fluid placeholder above right-column image */
.row > .span5 > br { display: none !important; }
.row > .span5 > .row-fluid { margin: 0 !important; padding: 0 !important; min-height: 0 !important; }

/* ── Painting title ── */
#arttitledetail {
  font-family: 'Josefin Sans', 'Helvetica Neue', Arial, sans-serif !important;
  font-weight: 300 !important;
  font-size: 28px !important;
  letter-spacing: 0.12em !important;
  color: #f0ece4 !important;
  text-align: left !important;
  margin: 0 0 14px 0 !important;
  line-height: 1.2 !important;
  text-transform: uppercase !important;
}

/* ── Gold rule under title ── */
#arttitledetail::after {
  content: '' !important;
  display: block !important;
  width: 40px !important;
  height: 1px !important;
  background: #daa520 !important;
  margin-top: 12px !important;
}

/* ── Details row: text left, SIYR button right ── */
.artwork-details-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 20px !important;
  margin: 20px 0 0 0 !important;
}
.artwork-details-text {
  flex: 1 1 auto !important;
  text-align: left !important;
  font-family: 'Josefin Sans', 'Helvetica Neue', Arial, sans-serif !important;
  font-weight: 300 !important;
  font-size: 15px !important;
  letter-spacing: 0.08em !important;
  color: #ddd !important;
  line-height: 2.1 !important;
}
.artwork-details-text b {
  color: #f0ece4 !important;
  font-weight: 400 !important;
}
.artwork-details-text .reddot {
  display: inline !important;
  color: #a88 !important;
  font-size: 14px !important;
  letter-spacing: 0.05em !important;
  vertical-align: baseline !important;
}
.artwork-details-text .reddot img {
  width: 10px !important;
  height: 10px !important;
  vertical-align: middle !important;
  margin-right: 4px !important;
}
.artwork-details-text b {
  vertical-align: baseline !important;
}

/* ── 50/50 split between painting data and SIYR column ── */
.artwork-details-text {
  flex: 0 0 calc(50% - 10px) !important;
  min-width: 0 !important;
}

/* ── SIYR button column ── */
.artwork-details-siyr {
  flex: 0 0 calc(50% - 10px) !important;
  width: calc(50% - 10px) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  padding-top: 4px !important;
  gap: 9px !important;
}
.siyr-caption {
  font-family: 'Josefin Sans', 'Helvetica Neue', Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 300 !important;
  letter-spacing: 0.07em !important;
  color: rgba(220,200,160,0.88) !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.5 !important;
  font-style: italic !important;
  text-align: left !important;
}
/* NOTE: all trigger rules prefixed with html body to beat the plugin's
   body-injected <style> block which comes later in cascade order and wins
   at equal specificity even with !important. */
html body .artwork-details-siyr .siyr-trigger,
html body button.siyr-trigger {
  font-family: 'Josefin Sans', 'Helvetica Neue', Arial, sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.19em !important;
  text-transform: uppercase !important;
  color: #daa520 !important;
  background: rgba(16,12,4,0.82) !important;
  border: 1.5px solid rgba(218,165,32,0.7) !important;
  border-radius: 3px !important;
  padding: 0 14px !important;
  height: 46px !important;
  width: 100% !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;
  margin: 0 !important;
  transition: background 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, transform 0.15s !important;
  box-shadow: 0 2px 14px rgba(218,165,32,0.18), inset 0 1px 0 rgba(218,165,32,0.08) !important;
  text-shadow: none !important;
}
/* hide the plugin's built-in SVG */
html body .artwork-details-siyr .siyr-trigger svg,
html body button.siyr-trigger svg {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* eye icon via ::before */
html body .artwork-details-siyr .siyr-trigger::before,
html body button.siyr-trigger::before {
  content: '' !important;
  display: block !important;
  width: 17px !important;
  height: 17px !important;
  flex-shrink: 0 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23daa520' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}
html body .artwork-details-siyr .siyr-trigger:hover,
html body button.siyr-trigger:hover {
  background: rgba(218,165,32,0.12) !important;
  border-color: #daa520 !important;
  color: #f0d060 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 5px 22px rgba(218,165,32,0.32) !important;
}
html body .artwork-details-siyr .siyr-trigger:hover::before,
html body button.siyr-trigger:hover::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f0d060' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") !important;
}

/* ── Inquiry section divider ── */
.span5 h4 {
  font-family: 'Josefin Sans', 'Helvetica Neue', Arial, sans-serif !important;
  font-weight: 300 !important;
  font-size: 13px !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: #ddd !important;
  margin: 40px 0 20px 0 !important;
  padding-top: 24px !important;
  border-top: 1px solid rgba(255,255,255,0.18) !important;
}

/* ── Gravity Forms ── */
.span5 .gform_wrapper {
  margin: 0 !important;
  padding: 0 !important;
}
.span5 .gform_wrapper ul,
.span5 .gform_wrapper .gform_fields {
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}
.span5 .gform_wrapper .gfield {
  margin-bottom: 16px !important;
  padding: 0 !important;
}
.span5 .gform_wrapper .gfield_label,
.span5 .gform_wrapper label {
  font-family: 'Josefin Sans', 'Helvetica Neue', Arial, sans-serif !important;
  font-weight: 300 !important;
  font-size: 12px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: #ccc !important;
  margin-bottom: 5px !important;
  display: block !important;
}
.span5 .gform_wrapper input[type="text"],
.span5 .gform_wrapper input[type="email"],
.span5 .gform_wrapper textarea {
  width: 100% !important;
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.28) !important;
  border-radius: 2px !important;
  color: #f0ece4 !important;
  font-family: 'Josefin Sans', 'Helvetica Neue', Arial, sans-serif !important;
  font-size: 15px !important;
  font-weight: 300 !important;
  padding: 9px 12px !important;
  box-sizing: border-box !important;
  transition: border-color 0.15s !important;
  outline: none !important;
  box-shadow: none !important;
}
.span5 .gform_wrapper input[type="text"]:focus,
.span5 .gform_wrapper input[type="email"]:focus,
.span5 .gform_wrapper textarea:focus {
  border-color: rgba(218,165,32,0.5) !important;
  background: rgba(255,255,255,0.07) !important;
}
.span5 .gform_wrapper textarea {
  max-height: 60px !important;
  min-height: 60px !important;
  height: 60px !important;
  resize: vertical !important;
}
.span5 .gform_wrapper .gform_footer,
.span5 .gform_wrapper .gform_page_footer {
  margin-top: 8px !important;
  padding: 0 !important;
}
.span5 .gform_wrapper input[type="submit"],
.span5 .gform_wrapper button[type="submit"] {
  font-family: 'Josefin Sans', 'Helvetica Neue', Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: #fff !important;
  background: linear-gradient(135deg, #b8860b 0%, #daa520 100%) !important;
  border: none !important;
  border-radius: 2px !important;
  padding: 11px 28px !important;
  cursor: pointer !important;
  transition: opacity 0.15s !important;
}
.span5 .gform_wrapper input[type="submit"]:hover {
  opacity: 0.85 !important;
}

/* ── Hide Constant Contact widget ── */
[class*="ctct-"],
[id^="ctct"],
#ctct-popup-wrapper { display: none !important; }

/* ══════════════════════════════════════════════════════════════════════
   SEE IN YOUR ROOM MODAL — match site button styles
   NOTE: selectors prefixed html body to beat the plugin's footer-injected
   !important rules (later in DOM = wins at equal specificity, so we need
   higher specificity to override).
══════════════════════════════════════════════════════════════════════ */

/* Shared font/tracking for all modal buttons */
html body #siyr-modal .siyr-btn,
html body #siyr-modal .siyr-btn--primary,
html body #siyr-modal .siyr-btn--outline,
html body #siyr-modal .siyr-btn--text,
html body #siyr-modal .siyr-btn--inquire,
html body #siyr-modal .siyr-upload-btn,
html body #siyr-modal .siyr-offscale-snap {
  font-family: 'Josefin Sans', 'Helvetica Neue', Arial, sans-serif !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
}

/* ── Upload / "Choose a room photo" CTA button ── */
html body #siyr-modal .siyr-upload-btn {
  background: linear-gradient(135deg, #daa520 0%, #c8910a 100%) !important;
  color: #1a1a1a !important;
  border: none !important;
  border-radius: 4px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em !important;
  box-shadow: 0 3px 14px rgba(218,165,32,0.4) !important;
}
html body #siyr-modal .siyr-upload-btn:hover {
  opacity: 0.88 !important;
  box-shadow: 0 5px 20px rgba(218,165,32,0.5) !important;
}

/* ── Inquire button (green → gold) ── */
html body #siyr-modal .siyr-btn--inquire {
  background: linear-gradient(135deg, #daa520 0%, #c8910a 100%) !important;
  color: #1a1a1a !important;
  border: none !important;
  border-radius: 4px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em !important;
  box-shadow: 0 2px 10px rgba(218,165,32,0.35) !important;
}
html body #siyr-modal .siyr-btn--inquire:hover {
  opacity: 0.88 !important;
}

/* ── Toolbar primary buttons ── */
html body #siyr-modal .siyr-btn--primary {
  font-size: 12px !important;
  font-weight: 400 !important;
  border-radius: 3px !important;
}

/* ── Outline buttons → match site nav outline style ── */
html body #siyr-modal .siyr-btn--outline {
  background: transparent !important;
  color: #ddd !important;
  border: 1px solid rgba(218,165,32,0.4) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  border-radius: 3px !important;
}
html body #siyr-modal .siyr-btn--outline:hover {
  border-color: #daa520 !important;
  color: #daa520 !important;
}

/* ── Text buttons ── */
html body #siyr-modal .siyr-btn--text {
  font-size: 12px !important;
  font-weight: 400 !important;
}

/* ── Off-scale snap button ── */
html body #siyr-modal .siyr-offscale-snap {
  background: rgba(218,165,32,0.2) !important;
  border-color: rgba(218,165,32,0.6) !important;
  color: #daa520 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  border-radius: 3px !important;
}

/* ══════════════════════════════════════════════════════════════════════
   MOBILE OVERRIDES (≤ 767px)
══════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* Image column: full-width + uniform 16px padding on all four sides */
  .row-fluid .span7,
  .row > .span7 {
    width: 100% !important;
    margin-left: 0 !important;
    padding: 16px 16px 0 16px !important;
    box-sizing: border-box !important;
  }

  /* Nav bottom margin collapsed — total gap above image = 16px (padding-top only) */
  #artwork-nav {
    margin-bottom: 0 !important;
  }

  /* Span5 full-width, keep padding */
  .span5 {
    width: 100% !important;
    margin-left: 0 !important;
    padding: 22px 20px 0 20px !important;
  }

  /* Title slightly smaller on narrow screens */
  #arttitledetail {
    font-size: 23px !important;
  }

  /* Keep details + SIYR on one line, 50/50 split */
  .artwork-details-row {
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    gap: 14px !important;
  }
  .artwork-details-text {
    flex: 0 0 calc(50% - 7px) !important;
    min-width: 0 !important;
    font-size: 14px !important;
  }
  .artwork-details-siyr {
    flex: 0 0 calc(50% - 7px) !important;
    width: calc(50% - 7px) !important;
    align-self: flex-start !important;
  }
  html body .artwork-details-siyr .siyr-trigger,
  html body button.siyr-trigger {
    font-size: 11px !important;
    padding: 0 10px !important;
    height: 44px !important;
    width: 100% !important;
    letter-spacing: 0.14em !important;
    color: #daa520 !important;
    background: rgba(16,12,4,0.82) !important;
    border: 1.5px solid rgba(218,165,32,0.7) !important;
  }

}

/* ═══════════════════════════════════════════════════════════
   DESKTOP HEADER — single-line title bar  (≥ 768 px)
   ═══════════════════════════════════════════════════════════ */
@media (min-width: 768px) {

  /* kill the blank spacer */
  #header-spacer { display: none !important; }

  /* ── Center desktop navigation ── */
  .navbar-static .navbar-inner,
  #header-nav-container .navbar-inner {
    display: flex !important;
    justify-content: center !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  #header-nav-container .navbar-inner .nav {
    float: none !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    margin: 0 !important;
  }

  /* container sits flush */
  #header-title-container {
    padding-top: 30px !important;
    padding-bottom: 0 !important;
  }

  /* collapse the Bootstrap 3-column row into one flex line */
  #header-title-container .row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0 !important;
    padding: 13px 0 12px !important;
    margin: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,0.07) !important;
    flex-wrap: nowrap !important;
  }

  /* all three span4 cols: kill Bootstrap float/width, become flex items */
  #header-title-container .row > .span4,
  #header-title-container .row > [class*="span"] {
    float: none !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 auto !important;
  }

  /* title column expands to fill leftover space and centres content */
  #header-socials-col {
    flex: 1 1 auto !important;
    display: flex !important;
    align-items: center !important;
  }
  #header-socials-col > a {
    display: flex !important;
    align-items: center !important;
  }

  /* ── Site title ── */
  #pblogo {
    font-family: 'Josefin Sans', 'Helvetica Neue', Arial, sans-serif !important;
    font-weight: 300 !important;
    font-size: 24px !important;
    letter-spacing: 0.30em !important;
    text-transform: uppercase !important;
    color: #f0ece4 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  #header-socials-col a,
  #header-socials-col a:hover { text-decoration: none !important; }

  /* ── Instagram column: pull tight to the right cluster ── */
  #header-join-col {
    display: flex !important;
    align-items: center !important;
    padding-right: 18px !important;
  }
  #socials { margin: 0 !important; }
  /* scale icon down, keep original colours (header bg is light) */
  #socials a img {
    display: block !important;
    width: 32px !important;
    height: 32px !important;
    opacity: 0.72 !important;
    transition: opacity 0.18s !important;
    filter: none !important;
  }
  #socials a:hover img { opacity: 1 !important; }

  /* ── Right cluster: search + join — clean ID, zero theme conflicts ── */
  #pb-right-cluster {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Kill browser default form margin */
  #pb-right-cluster form {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    height: 28px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid rgba(218,165,32,0.28) !important;
    border-radius: 2px !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
    align-self: center !important;
    box-sizing: border-box !important;
    background: rgba(255,255,255,0.05) !important;
    transition: border-color 0.15s !important;
  }
  #pb-right-cluster form:focus-within {
    border-color: rgba(218,165,32,0.55) !important;
  }

  /* Label inside WP search form */
  #pb-right-cluster form label {
    display: flex !important;
    align-items: stretch !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  #pb-right-cluster form .screen-reader-text {
    display: none !important;
  }

  /* Search text input */
  #pb-right-cluster input[type="search"],
  #pb-right-cluster input[name="s"] {
    display: block !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    color: rgba(240,236,228,0.85) !important;
    font-family: 'Josefin Sans', 'Helvetica Neue', Arial, sans-serif !important;
    font-weight: 300 !important;
    font-size: 12px !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    width: 110px !important;
    height: 28px !important;
    padding: 0 8px !important;
    margin: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    -webkit-appearance: none !important;
    box-sizing: border-box !important;
  }
  #pb-right-cluster input[type="search"]::placeholder,
  #pb-right-cluster input[name="s"]::placeholder {
    color: rgba(210,205,198,0.4) !important;
    font-style: normal !important;
    text-transform: uppercase !important;
    letter-spacing: 0.12em !important;
    font-size: 12px !important;
  }
  #pb-right-cluster input[type="search"]:focus,
  #pb-right-cluster input[name="s"]:focus {
    background: transparent !important;
    outline: none !important;
  }

  /* Submit button — gold-tinted, consistent with nav palette */
  #pb-right-cluster input[type="submit"] {
    display: block !important;
    height: 28px !important;
    margin: 0 !important;
    padding: 0 10px !important;
    background: rgba(218,165,32,0.18) !important;
    border: none !important;
    border-left: 1px solid rgba(218,165,32,0.28) !important;
    border-radius: 0 !important;
    color: rgba(218,165,32,0.9) !important;
    font-family: 'Josefin Sans', 'Helvetica Neue', Arial, sans-serif !important;
    font-size: 11px !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    -webkit-appearance: none !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    transition: background 0.15s, color 0.15s !important;
    flex-shrink: 0 !important;
    align-self: stretch !important;
  }
  #pb-right-cluster input[type="submit"]:hover {
    background: rgba(218,165,32,0.30) !important;
    color: #ffe066 !important;
  }

  /* Join link wrapper */
  #pb-right-cluster > a,
  #pb-right-cluster a[href*="constantcontact"] {
    display: flex !important;
    align-items: center !important;
    align-self: center !important;
    height: 28px !important;
    margin: 0 !important;
    text-decoration: none !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
  }

  /* Gold join button */
  #pb-right-cluster .btn,
  #pb-right-cluster > a .btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 28px !important;
    margin: 0 !important;
    padding: 0 16px !important;
    background: linear-gradient(135deg, #daa520 0%, #c8910a 100%) !important;
    border: none !important;
    border-radius: 2px !important;
    color: #fff !important;
    font-family: 'Josefin Sans', 'Helvetica Neue', Arial, sans-serif !important;
    font-weight: 300 !important;
    font-size: 12px !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    line-height: 1 !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.15) !important;
    text-shadow: none !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
    -webkit-appearance: none !important;
    cursor: pointer !important;
    transition: opacity 0.15s !important;
  }
  #pb-right-cluster .btn:hover,
  #pb-right-cluster > a:hover .btn { opacity: 0.88 !important; }

}
/* ══════════════════════════════════════════════════════════════════════
   GLOBAL TYPOGRAPHY SYSTEM — site-wide Josefin Sans + gold
   Overrides every Ek Mukta / Oswald / system-font remnant across all
   page templates: home, page, galleries, pastels, installations,
   prints, artwork detail, blog posts, and any custom page template.
══════════════════════════════════════════════════════════════════════ */

/* ── 1. Body base ─────────────────────────────────────────────────── */
body {
  font-family: 'Josefin Sans', 'Helvetica Neue', Arial, sans-serif !important;
  font-weight: 300 !important;
  font-size: 16px !important;
  letter-spacing: 0.04em !important;
  color: #d8d4ce !important;
  line-height: 1.8 !important;
}

/* ── 2. Headings ──────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Josefin Sans', 'Helvetica Neue', Arial, sans-serif !important;
  font-weight: 300 !important;
  color: #f0ece4 !important;
  line-height: 1.3 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
}
h1 { font-size: 29px !important; margin-bottom: 20px !important; text-align: center !important; }
h2 { font-size: 24px !important; margin-bottom: 16px !important; text-align: center !important; }
h3 { font-size: 17px !important; margin-bottom: 12px !important; }
h4 { font-size: 14px !important; letter-spacing: 0.20em !important; }
h5 { font-size: 13px !important; letter-spacing: 0.22em !important; }
h6 { font-size: 12px !important; letter-spacing: 0.22em !important; }

/* Blog post title links inherit heading treatment */
h2 a, h1 a {
  color: #f0ece4 !important;
  text-decoration: none !important;
}
h2 a:hover, h1 a:hover {
  color: #daa520 !important;
  text-decoration: none !important;
}

/* ── 3. Links ─────────────────────────────────────────────────────── */
a {
  color: rgba(218,165,32,0.75) !important;
  text-decoration: none !important;
}
a:hover {
  color: #daa520 !important;
  text-decoration: none !important;
}
/* Body prose links: subtle underline */
.cell a,
.cellhead a,
#borderedspan a,
.entry-content a,
.page-content a,
.post-content a {
  color: rgba(218,165,32,0.75) !important;
  border-bottom: 1px solid rgba(218,165,32,0.25) !important;
  padding-bottom: 1px !important;
}
.cell a:hover,
.cellhead a:hover,
#borderedspan a:hover {
  color: #daa520 !important;
  border-bottom-color: rgba(218,165,32,0.65) !important;
}

/* ── 4. Active / current nav — bright gold text, richer background ── */
.navbar-inverse .nav .active > a,
.navbar-inverse .nav .active > a:hover,
.navbar-inverse .nav .active > a:focus,
.navbar-inverse .navbar-nav .active > a,
.navbar-inverse .nav > .current-menu-item > a,
.navbar-inverse .nav > .current_page_item > a,
.navbar-inverse .nav > .current-menu-ancestor > a {
  background-color: rgba(218,165,32,0.22) !important;
  color: #ffe066 !important;
  border-radius: 3px !important;
}
/* Hover: lighter wash */
.navbar-inverse .nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:hover {
  background-color: rgba(218,165,32,0.10) !important;
  color: #daa520 !important;
}

/* ── 5. Gallery cells (Galleries page — #gallerycell) ─────────────── */
/* Parent: CSS grid so cells span edge-to-edge with gutters between them,
   not at the outer edges. h1 title + .clear span all 4 columns. */
.span12:has(#gallerycell) {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 40px 28px !important;
  float: none !important;
  width: 100% !important;
}
.span12:has(#gallerycell) > h1,
.span12:has(#gallerycell) > .clear {
  grid-column: 1 / -1 !important;
}
/* 2 columns on tablet */
@media (max-width: 900px) {
  .span12:has(#gallerycell) {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
/* 1 column on mobile */
@media (max-width: 567px) {
  .span12:has(#gallerycell) {
    grid-template-columns: 1fr !important;
  }
}
#gallerycell {
  font-family: 'Josefin Sans', 'Helvetica Neue', Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 300 !important;
  letter-spacing: 0.06em !important;
  color: #c8c4be !important;
  line-height: 1.7 !important;
  /* Reset style.css float/fixed-width/height values */
  float: none !important;
  width: auto !important;
  max-width: none !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}
#gallerycell img {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  margin-bottom: 14px !important;
}
#gallerycell #printtitle,
#gallerycell .gallery-title {
  font-family: 'Josefin Sans', 'Helvetica Neue', Arial, sans-serif !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: #f0ece4 !important;
  margin-bottom: 6px !important;
}

/* ── 6. Installation cells ────────────────────────────────────────── */
#installationcell {
  font-family: 'Josefin Sans', 'Helvetica Neue', Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 300 !important;
  letter-spacing: 0.06em !important;
  color: #c8c4be !important;
  line-height: 1.7 !important;
  background: transparent !important;
  background-color: transparent !important;
  margin-bottom: 48px !important;
}
#installationcell img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  margin-bottom: 12px !important;
}
/* Installation location title — gold, Josefin Sans */
#installationtitle {
  font-family: 'Josefin Sans', 'Helvetica Neue', Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: #daa520 !important;
  margin: 10px 0 6px !important;
  line-height: 1.4 !important;
}
#installationcell p {
  font-family: 'Josefin Sans', 'Helvetica Neue', Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 300 !important;
  color: #c8c4be !important;
  line-height: 1.75 !important;
  letter-spacing: 0.04em !important;
  margin-top: 4px !important;
}
#installationcell b,
#installationcell strong {
  font-weight: 400 !important;
  color: #f0ece4 !important;
  letter-spacing: 0.08em !important;
}

/* ── 7. Print / sale cells ────────────────────────────────────────── */
#printcell,
#saleartcell,
#printsale {
  font-family: 'Josefin Sans', 'Helvetica Neue', Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 300 !important;
  letter-spacing: 0.06em !important;
  color: #c8c4be !important;
  line-height: 1.7 !important;
  background-color: rgba(68,73,78,0.6) !important;
}
#printcell b, #saleartcell b, #printsale b,
#printcell strong, #saleartcell strong, #printsale strong {
  font-weight: 400 !important;
  color: #f0ece4 !important;
}

/* ── 8. Artwork detail panel (#artdetail) ─────────────────────────── */
#artdetail {
  font-family: 'Josefin Sans', 'Helvetica Neue', Arial, sans-serif !important;
  font-size: 15px !important;
  font-weight: 300 !important;
  letter-spacing: 0.07em !important;
  color: #c8c4be !important;
  line-height: 2 !important;
  background-color: rgba(68,73,78,0.5) !important;
}

/* ── 9. Artwork titles in grid ────────────────────────────────────── */
#arttitle {
  font-family: 'Josefin Sans', 'Helvetica Neue', Arial, sans-serif !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  color: #f0ece4 !important;
}
#printtitle {
  font-family: 'Josefin Sans', 'Helvetica Neue', Arial, sans-serif !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  color: #f0ece4 !important;
}

/* ── 10. "SOLD" label ─────────────────────────────────────────────── */
#sold {
  font-family: 'Josefin Sans', 'Helvetica Neue', Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: #daa520 !important;
}

/* ── 11. Framed dimensions list ───────────────────────────────────── */
li.artwork-framedimensions {
  font-family: 'Josefin Sans', 'Helvetica Neue', Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 300 !important;
  letter-spacing: 0.08em !important;
  color: #aaa !important;
  list-style: none !important;
  padding-left: 0 !important;
}

/* ── 12. Search results pagination ───────────────────────────────── */
.gs-navigation a.gs-page-numbers,
.gs-navigation a.gs-next,
.gs-navigation a.gs-prev,
.gs-navigation span.gs-page-numbers,
.gs-navigation span.gs-next,
.gs-navigation span.gs-prev,
.gs-navigation span {
  font-family: 'Josefin Sans', 'Helvetica Neue', Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 300 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}
.gs-navigation a.gs-page-numbers,
.gs-navigation a.gs-next,
.gs-navigation a.gs-prev {
  background: rgba(68,73,78,0.7) !important;
  color: #ccc !important;
  border-radius: 2px !important;
}
.gs-navigation span {
  background: linear-gradient(135deg, #daa520 0%, #c8910a 100%) !important;
  color: #1a1a1a !important;
  border-radius: 2px !important;
}

/* ── 13. Blog home page ───────────────────────────────────────────── */
#timestamp {
  font-family: 'Josefin Sans', 'Helvetica Neue', Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: 300 !important;
  letter-spacing: 0.20em !important;
  text-transform: uppercase !important;
  color: rgba(218,165,32,0.55) !important;
  margin-bottom: 6px !important;
}
/* Blog post excerpt / content */
#borderedspan {
  font-family: 'Josefin Sans', 'Helvetica Neue', Arial, sans-serif !important;
  font-size: 16px !important;
  font-weight: 300 !important;
  letter-spacing: 0.04em !important;
  line-height: 1.85 !important;
  color: #c8c4be !important;
}
/* "Studio Updates" h1 on home page */
.cellhead h1 {
  font-size: 13px !important;
  letter-spacing: 0.30em !important;
  color: rgba(240,236,228,0.45) !important;
  border-bottom: 1px solid rgba(218,165,32,0.18) !important;
  padding-bottom: 14px !important;
  margin-bottom: 24px !important;
}

/* ── 14. Generic page content (page.php) ─────────────────────────── */
.cell h1:first-child,
.cellhead h1.page-title {
  font-size: 17px !important;
  letter-spacing: 0.26em !important;
  color: rgba(240,236,228,0.55) !important;
  border-bottom: 1px solid rgba(218,165,32,0.18) !important;
  padding-bottom: 14px !important;
  margin-bottom: 24px !important;
}
.cell p,
.cellhead p {
  font-family: 'Josefin Sans', 'Helvetica Neue', Arial, sans-serif !important;
  font-size: 16px !important;
  font-weight: 300 !important;
  color: #c8c4be !important;
  line-height: 1.85 !important;
}

/* ── 15. Biocell and contact back ─────────────────────────────────── */
#biocell {
  font-family: 'Josefin Sans', 'Helvetica Neue', Arial, sans-serif !important;
  font-size: 15px !important;
  font-weight: 300 !important;
  letter-spacing: 0.04em !important;
  line-height: 1.8 !important;
  color: #c8c4be !important;
  background-color: rgba(68,73,78,0.5) !important;
}
#contactback {
  background: rgba(68,73,78,0.5) !important;
  border-radius: 2px !important;
}

/* ── 16. Global Gravity Forms (outside artwork detail page) ───────── */
.gform_wrapper label,
.gform_wrapper .gfield_label {
  font-family: 'Josefin Sans', 'Helvetica Neue', Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: 300 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: #ccc !important;
}
.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper textarea,
.gform_wrapper select {
  font-family: 'Josefin Sans', 'Helvetica Neue', Arial, sans-serif !important;
  font-size: 15px !important;
  font-weight: 300 !important;
  letter-spacing: 0.04em !important;
  color: #f0ece4 !important;
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.22) !important;
  border-radius: 2px !important;
}
.gform_wrapper input[type="text"]:focus,
.gform_wrapper input[type="email"]:focus,
.gform_wrapper textarea:focus {
  border-color: rgba(218,165,32,0.45) !important;
  outline: none !important;
}
.gform_wrapper input[type="submit"],
.gform_wrapper button[type="submit"] {
  font-family: 'Josefin Sans', 'Helvetica Neue', Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  background: linear-gradient(135deg, #b8860b 0%, #daa520 100%) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 2px !important;
  padding: 10px 24px !important;
  cursor: pointer !important;
  transition: opacity 0.15s !important;
}
.gform_wrapper input[type="submit"]:hover {
  opacity: 0.85 !important;
}
/* Gravity forms confirmation message */
#gforms_confirmation_message {
  font-family: 'Josefin Sans', 'Helvetica Neue', Arial, sans-serif !important;
  letter-spacing: 0.08em !important;
  background: rgba(218,165,32,0.18) !important;
  color: #f0ece4 !important;
  border-radius: 2px !important;
}

/* ── 17. Global input/textarea reset ─────────────────────────────── */
input,
textarea,
select,
.uneditable-input {
  font-family: 'Josefin Sans', 'Helvetica Neue', Arial, sans-serif !important;
  font-size: 15px !important;
  font-weight: 300 !important;
}

/* ── 18. Shopify product title ────────────────────────────────────── */
.shopify-buy__product__title {
  font-family: 'Josefin Sans', 'Helvetica Neue', Arial, sans-serif !important;
  font-weight: 300 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: #f0ece4 !important;
}

/* ── 19. Prev / next on artwork pages ────────────────────────────── */
#postright,
#postleft {
  font-family: 'Josefin Sans', 'Helvetica Neue', Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 300 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: rgba(218,165,32,0.70) !important;
}
#postright:hover, #postleft:hover { color: #daa520 !important; }

/* ── 20. Return to gallery link ───────────────────────────────────── */
#returntogallery {
  font-family: 'Josefin Sans', 'Helvetica Neue', Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 300 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
}
#returntogallery a {
  color: rgba(218,165,32,0.65) !important;
  border-bottom: 1px solid rgba(218,165,32,0.22) !important;
}
#returntogallery a:hover { color: #daa520 !important; }

/* ── 21. span.title (large standalone title) ─────────────────────── */
span.title {
  font-family: 'Josefin Sans', 'Helvetica Neue', Arial, sans-serif !important;
  font-weight: 300 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
}

/* ── 22. Separator rule: more refined ────────────────────────────── */
hr {
  border: 0 !important;
  height: 1px !important;
  background: rgba(218,165,32,0.18) !important;
  background-image: none !important;
  margin: 28px 0 !important;
}

/* ── 23. Sidebar ─────────────────────────────────────────────────── */
.sidebar-nav,
#sidebar {
  font-family: 'Josefin Sans', 'Helvetica Neue', Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 300 !important;
  letter-spacing: 0.06em !important;
  color: #c0bcb6 !important;
}
.sidebar-nav h3,
.sidebar-nav h4,
#sidebar h3,
#sidebar h4 {
  font-size: 12px !important;
  letter-spacing: 0.24em !important;
  color: rgba(240,236,228,0.45) !important;
  border-bottom: 1px solid rgba(218,165,32,0.15) !important;
  padding-bottom: 8px !important;
  margin-bottom: 10px !important;
}

/* ── 24. Misc utility classes  ────────────────────────────────────── */
.formlabel {
  font-family: 'Josefin Sans', 'Helvetica Neue', Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: 300 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: #aaa !important;
}
/* "Available" / "In studio" text in cells */
#artcell b,
.artcell b {
  text-transform: none !important;
}
/* Inquiry ">>"-style links across templates */
a[href$=">>"],
i > a {
  font-style: normal !important;
}


/* ══════════════════════════════════════════════════════════════════════
   STUDIO SHOP DROPDOWN NAV
══════════════════════════════════════════════════════════════════════ */

/* Desktop: Bootstrap-2 dropdown — display is controlled by .open class */

/* ── Desktop nav: force overflow visible so dropdown isn't clipped ── */
@media (min-width: 980px) {
  .navbar,
  .navbar-inner,
  .nav-collapse,
  .nav-collapse.collapse,
  #header-nav-container .row,
  #header-nav-container .span12,
  #menu-main-menu {
    overflow: visible !important;
  }
}

/* ── Studio Shop dropdown ── */
.studio-shop-item {
  position: relative !important;
  pointer-events: auto !important;
}
.studio-shop-toggle {
  pointer-events: auto !important;
}
.studio-shop-toggle {
  cursor: pointer !important;
  white-space: nowrap !important;
}
.studio-shop-toggle::after {
  content: '' !important;
  display: inline-block !important;
  width: 0 !important;
  height: 0 !important;
  border-left: 4px solid transparent !important;
  border-right: 4px solid transparent !important;
  border-top: 5px solid rgba(210,205,198,0.75) !important;
  margin-left: 7px !important;
  vertical-align: middle !important;
}
.studio-shop-item.ss-open .studio-shop-toggle::after {
  border-top-color: #daa520 !important;
}

/* Hidden by default (all sizes) */
.studio-shop-sub {
  display: none !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
}

/* Desktop (>=980px): absolute dropdown shown on hover OR ss-open click */
@media (min-width: 980px) {
  .studio-shop-sub {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    z-index: 9999 !important;
    background: #1c1c1c !important;
    border: 1px solid rgba(218,165,32,0.28) !important;
    border-radius: 2px !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.45) !important;
    min-width: 150px !important;
    padding: 6px 0 !important;
  }
  .studio-shop-item:hover > .studio-shop-sub,
  .studio-shop-item.ss-open > .studio-shop-sub {
    display: block !important;
  }
}

/* Mobile/tablet (<980px): click opens inline below toggle */
.studio-shop-item.ss-open > .studio-shop-sub {
  display: block !important;
  border-left: 2px solid rgba(218,165,32,0.3) !important;
  padding: 2px 0 6px 12px !important;
}

/* Sub-menu link styles (all sizes) */
.studio-shop-sub > li > a,
.studio-shop-sub > li > a:link,
.studio-shop-sub > li > a:visited {
  display: block !important;
  padding: 9px 20px !important;
  font-family: 'Josefin Sans', 'Helvetica Neue', Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 300 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: rgba(210,205,198,0.85) !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  background: transparent !important;
  border: none !important;
}
.studio-shop-sub > li > a:hover {
  color: #daa520 !important;
  background: rgba(218,165,32,0.06) !important;
}

/* Mobile padding tweak */
@media (max-width: 979px) {
  .studio-shop-sub > li > a {
    padding: 8px 0 !important;
  }
}

/* ═══════════════════════════════════════════════════════
   HOMEPAGE DUO: fluid image scaling on desktop / tablet
   Replaces Bootstrap 2's fixed-pixel float grid with
   flexbox so the 7:5 column pair scales proportionally.
   Container gets max-width:940px so it caps at desktop
   width but shrinks fluidly on narrower tablet/iPad sizes.
   No effect below 768px (mobile layout unchanged).
   ═══════════════════════════════════════════════════════ */
@media (min-width: 768px) {
  /* Make the content container fluid — matches Bootstrap's 1170px large-screen
     cap on wide screens, but shrinks proportionally as viewport narrows.
     Scoped to :has(#pb-home-duo) so it only fires on the homepage. */
  .container:has(#pb-home-duo) {
    width: 100% !important;
    max-width: 1170px !important;
    box-sizing: border-box !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  /* Flex row — replaces Bootstrap float gutters */
  #pb-home-duo {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 20px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  #pb-home-duo > .span7 {
    flex: 7 1 0% !important;
    float: none !important;
    width: auto !important;
    min-width: 0 !important;
    margin-left: 0 !important;
  }
  #pb-home-duo > .span5 {
    flex: 5 1 0% !important;
    float: none !important;
    width: auto !important;
    min-width: 0 !important;
    margin-left: 0 !important;
  }
  /* Images fill their flex column and scale with it */
  #pb-home-duo .wp-post-image {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
  }
}