/* CSSSPLIT 003, 003_singleart.css, 276-485, All pagination styles --/--/-- */
/* Version 01.1.1 */

/* v2025.11.01-single — Single artwork polish */
/* Centre the hero image */
.single-artwork .single-figure.art-hero-center{
  text-align:center;
  margin: 0 auto 1rem;
}
.single-artwork .single-figure.art-hero-center img{
  display:inline-block;
  border-radius:12px;
  max-width:100%;
  height:auto;
}

/* Status pill (reuse archive look) */
.single-artwork .art-status-pill{
  display:inline-block;
  margin:.2rem 0 .8rem;
  padding:.42rem .75rem;
  font-size:.92rem;
  line-height:1.1;
  border-radius:999px;
  border:1px solid #9bc9b7;
  background:#e6f6f0;
  color:#145c3a;
  white-space:nowrap;
}

/* Notes/description: EB Garamond, comfy read */
.single-artwork .art-notes{
  font-family:"EB Garamond", Garamond, serif;
  font-size:1.02rem;
  line-height:1.45;
  color:#1e1f1e;
  margin:.4rem 0 1.2rem;
}

/* Meta tidy */
.single-artwork .single-meta dl > div{
  display:flex; gap:.5rem; margin:.25rem 0;
}
.single-artwork .single-meta dt{ font-weight:600; }
.single-artwork .single-meta dd{ marg-in:0; }

/* Buy box spacing (doesn’t alter your Shopify CSS) */
.single-artwork .art-buybox{ display:inline-block; }


/* spacing harmony in CTA row */
.single-artwork .cta-row .btn--buy{ margin:.25rem 0 0; }

/* v2025.11.02-single-polish */

/* Hero frame: subtle sea-glass panel around the image */
.art-hero{
  position: relative;
  max-width: 760px;           /* adjust if you want it wider/narrower */
  margin: 0 auto 1.25rem;
  padding: 12px;
  border: 1px solid #cfe5df;  /* thin sea-glass border */
  background: rgba(30,106,95,.05);
  border-radius: 12px;
}
.art-hero .single-figure.art-hero-center{ margin: 0; text-align: center; }
.art-hero .single-figure img{ display: inline-block; border-radius: 10px; }

/* Status pill overlay: bottom-right of the image area */
.art-status-row--overlay{
  position: absolute;
  right: 12px;
  bottom: 12px;
  margin: 0;
  transition: all .15s ease;
}
.art-status-row--overlay .art-status-pill{
  box-shadow: 0 1px 0 rgba(0,0,0,.04);
}

/* Hide pill on hover over the hero panel (reappears when mouse leaves) */
.art-hero:hover .art-status-row--overlay{
  opacity: 0;
  transform: translateY(4px);
}

/* Centre the Buy Now / Enquire button row */
/*.single-artwork .cta-row{ text-align: center; } */

/* Small-screen tweak so the panel breathes */
@media (max-width: 520px){
  .art-hero{ padding: 10px; }
}

/* v2025.11.02-center-cta */
.single-artwork .cta-row{
  display: flex;                 /* center anything placed inside */
  justify-content: center;
  align-items: center;
  gap: 12px;
  text-align: center;            /* fallback for inline elements */
  margin-top: .5rem;
}

/* If it's the Shopify embed, center its container too */
.single-artwork .cta-row .art-buybox{
  display: flex;
  justify-content: center;
  width: 100%;
}

/* If it’s just a plain link (btn--buy), this keeps it tidy */
.single-artwork .cta-row .btn--buy{ margin: .25rem auto 0; }


/* v2025.11.02-center-fix------------------------------------------  */
.single-artwork .single-meta .cta-row{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:12px;
  width:100%;
  margin:.75rem 0 0;
}
.single-artwork .single-meta .art-buybox{
  display:flex;            /* centers Shopify embed */
  justify-content:center;
  width:100%;
}
.single-artwork .single-meta .btn--buy{
  margin:.25rem auto 0;    /* centers plain <a> button */
  display:inline-flex;
}

/* v2025.11.02-arrows-single ------------------------------------- */
.art-single-nav .page-numbers.prev::before,
.art-single-nav .page-numbers.next::after{
  content:none !important;
}

/* v2025.11.02-dropcap ---------------------------------------------- */

/* Progressive enhancement: modern drop cap */
.single-artwork .art-notes p:first-of-type::first-letter{
  -webkit-initial-letter: 2;   /* Safari */
  initial-letter: 2;           /* Modern browsers */
  font-family: "EB Garamond", Garamond, serif;
  font-weight: 600;
  color: #145c3a;
}

/* Fallback for browsers without `initial-letter` */
@supports not (initial-letter: 2) {
  .single-artwork .art-notes p:first-of-type::first-letter{
    float: left;
    font-size: 3.1em;
    line-height: .8;
    padding-right: .08em;
    padding-top: .06em;
    font-family: "EB Garamond", Garamond, serif;
    font-weight: 600;
    color: #145c3a;
  }
  .single-artwork .art-notes p:first-of-type{
    overflow: hidden; /* contain the floated first letter */
  }
}

/* Optional: disable on small screens */
@media (max-width: 520px){
  .single-artwork .art-notes p:first-of-type::first-letter{
    -webkit-initial-letter: 1 !important;
    initial-letter: 1 !important;
    float: none;
    font-size: inherit;
    padding: 0;
  }
}

/* Utility: add .no-dropcap to art-notes to opt out per page */
.single-artwork .art-notes.no-dropcap p:first-of-type::first-letter{
  -webkit-initial-letter: 1 !important;
  initial-letter: 1 !important;
  float: none !important;
  font-size: inherit !important;
  padding: 0 !important;
}

/* ------------------------------------------------------------- */


/* Artwork single – layout */
.artwork-actions { margin: 1rem 0 0; display: grid; gap: .6rem; }
.artwork-pills { display: flex; flex-wrap: wrap; gap: .35rem .4rem; align-items: center; }
.artwork-buttons { display: flex; flex-wrap: wrap; gap: .5rem; }

/* Pills (subtle, accessible) */
.pill {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .2rem .5rem; border: 1px solid #e5e7eb; border-radius: 9999px;
  font-size: 12px; line-height: 1; color: #374151; background: #fff;
}
.pill .dot { width: 6px; height: 6px; border-radius: 9999px; background: #10b981; display: inline-block; }
.pill--available { background: #e6f6f0; border-color: #9bc9b7; color: #145c3a; }
.pill--sold { background: #f1f2f4; border-color: #d1d5db; color: #6b7280; }

/* Type flavour – make Digital’s dot blue for quick recognition */
.pill--digital .dot { background: #3b82f6; }

/* Buy buttons (neutral, inherit your theme button styles) */
.btn--buy { display:inline-block; }
.btn--buy.btn-disabled { opacity: .45; pointer-events: none; }