/* ============================================================================
   artwork-v2.css
   Reusable decorative-artwork utility classes for the 175-asset PNG library
   at /assets/img/artwork/{accents,borders,dividers,florals}/.
   See /assets/img/artwork/CATALOG.md for curated picks per bucket.

   Brand palette (the ONLY colors used in this file, besides transparent/
   white/black): Deep navy #170C79, Cream #EFE3CA, Teal #56B6C6,
   Light teal #8ACBD0, Red/coral #FF0052, Pink #FF97D0.

   IMPORTANT: All artwork here is placed as native <img> elements (never as
   a CSS background-image) so PNG alpha transparency is preserved exactly
   as authored — no flattening onto a solid box. Do not add a background-
   color to any of these classes.
   ============================================================================ */


/* ----------------------------------------------------------------------------
   1. .deco-divider
   Horizontal section-break divider. Apply directly to an <img>.

   Markup:
     <img src="/assets/img/artwork/dividers/hand-drawn-ornament-divider-collection__2221095__part1.png"
          class="deco-divider deco-divider--md" alt="">

   Size modifiers: --sm / --md (default-equivalent) / --lg.
   Do NOT recolor the asset (no filter/tint) — use its own line-art color.
   ---------------------------------------------------------------------------- */
.deco-divider {
  display: block;
  width: 100%;
  height: auto;
  max-width: 600px;
  margin: 2.5rem auto;
}

.deco-divider--sm {
  max-width: 380px;
  margin: 1.75rem auto;
}

.deco-divider--md {
  max-width: 600px;
  margin: 2.5rem auto;
}

.deco-divider--lg {
  max-width: 760px;
  margin: 3rem auto;
}

@media (max-width: 500px) {
  .deco-divider,
  .deco-divider--lg,
  .deco-divider--md {
    max-width: 260px;
    margin: 1.5rem auto;
  }

  .deco-divider--sm {
    max-width: 200px;
    margin: 1.25rem auto;
  }
}


/* ----------------------------------------------------------------------------
   2. .deco-corner
   Absolutely-positioned corner/accent flourish. The containing element MUST
   have `position: relative` (and its content should have z-index: 1+ so the
   flourish sits behind real content).

   Markup:
     <section class="section" style="position:relative;">
       <img src="/assets/img/artwork/accents/hand-drawn-chalk-illustration__9342560__part5.png"
            class="deco-corner deco-corner--top-right deco-corner--md" alt="" aria-hidden="true">
       <div style="position:relative; z-index:1;"> ...real content... </div>
     </section>

   Placement modifiers: --top-left / --top-right / --bottom-left / --bottom-right.
   Size modifiers: --sm (60px) / --md (100px) / --lg (140px).
   ---------------------------------------------------------------------------- */
.deco-corner {
  position: absolute;
  height: auto;
  width: 100px;
  opacity: 0.5;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}

.deco-corner--sm { width: 60px; }
.deco-corner--md { width: 100px; }
.deco-corner--lg { width: 140px; }

.deco-corner--top-left {
  top: -16px;
  left: -16px;
}

.deco-corner--top-right {
  top: -16px;
  right: -16px;
}

.deco-corner--bottom-left {
  bottom: -16px;
  left: -16px;
}

.deco-corner--bottom-right {
  bottom: -16px;
  right: -16px;
}

@media (max-width: 700px) {
  .deco-corner {
    display: none;
  }
}


/* ----------------------------------------------------------------------------
   3. .photo-frame-asset
   Decorative photo frame built from ONE compact corner ornament, mirrored
   (not rotated) into all 4 corners. Chosen because none of the 175 assets
   form a matched 4-piece corner set, and the wide border strips don't wrap
   a rectangle cleanly — a single asset mirrored via scaleX/scaleY keeps the
   art "upright" in every corner while still radiating outward correctly.

   REQUIRED MARKUP — copy exactly, only the <img class="photo-frame-asset__photo">
   src/alt should change per page:

     <div class="photo-frame-asset">
       <img src="/path/to/real-photo.jpg" alt="Description of photo" class="photo-frame-asset__photo">
       <img src="/assets/img/artwork/accents/henna-tattoo-studio-hand-drawn-style (1)__62582-OAIH8Q-641__part6.png"
            class="photo-frame-asset__corner photo-frame-asset__corner--tl" alt="" aria-hidden="true">
       <img src="/assets/img/artwork/accents/henna-tattoo-studio-hand-drawn-style (1)__62582-OAIH8Q-641__part6.png"
            class="photo-frame-asset__corner photo-frame-asset__corner--tr" alt="" aria-hidden="true">
       <img src="/assets/img/artwork/accents/henna-tattoo-studio-hand-drawn-style (1)__62582-OAIH8Q-641__part6.png"
            class="photo-frame-asset__corner photo-frame-asset__corner--bl" alt="" aria-hidden="true">
       <img src="/assets/img/artwork/accents/henna-tattoo-studio-hand-drawn-style (1)__62582-OAIH8Q-641__part6.png"
            class="photo-frame-asset__corner photo-frame-asset__corner--br" alt="" aria-hidden="true">
     </div>

   Swap all 4 corner srcs together for an alternate flavor (see CATALOG.md
   bucket 3 for the alternate picks) — keep all 4 using the SAME source file
   so the mirrored corners visually match.
   ---------------------------------------------------------------------------- */
.photo-frame-asset {
  position: relative;
  display: inline-block;
  padding: 20px;
  max-width: 100%;
}

.photo-frame-asset__photo {
  display: block;
  width: 100%;
  height: auto;
  position: relative;
  z-index: 1;
}

.photo-frame-asset__corner {
  position: absolute;
  width: 64px;
  height: auto;
  z-index: 2;
  pointer-events: none;
  user-select: none;
}

.photo-frame-asset__corner--tl {
  top: 0;
  left: 0;
}

.photo-frame-asset__corner--tr {
  top: 0;
  right: 0;
  transform: scaleX(-1);
}

.photo-frame-asset__corner--bl {
  bottom: 0;
  left: 0;
  transform: scaleY(-1);
}

.photo-frame-asset__corner--br {
  bottom: 0;
  right: 0;
  transform: scaleX(-1) scaleY(-1);
}

@media (max-width: 700px) {
  .photo-frame-asset {
    padding: 14px;
  }

  .photo-frame-asset__corner {
    width: 44px;
  }
}

@media (max-width: 500px) {
  .photo-frame-asset {
    padding: 10px;
  }

  .photo-frame-asset__corner {
    width: 32px;
  }
}


/* ============================================================================
   PASS 2 ADDITIONS — colorful layering, tiled/multiplied dividers, and a
   larger mandala-showcase treatment. See /assets/img/artwork/CATALOG.md
   "## Pass 2 — Colorful & Mandala Picks" for the asset picks that pair with
   these classes. Same brand-palette-only rule as above.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   4. .deco-corner-layered
   Layering pattern for black/brown line-art accents (from accents/) so a
   monochrome flourish doesn't read as flat/colorless — pairs it with a soft
   colored blurred-circle shape sitting behind it. Reuses depth-v2.css's
   .depth-bg-blob + .depth-bg-blob--<color> classes for the color layer
   (do NOT duplicate those rules here — depth-v2.css must be loaded on any
   page using this pattern).

   REQUIRED MARKUP — wrapper div + background blob element + line-art img on
   top, copied exactly (only the blob color modifier and img src/size/
   placement modifiers change per instance):

     <section class="section" style="position:relative; overflow:hidden;">
       <div class="deco-corner-layered deco-corner-layered--top-right">
         <div class="depth-bg-blob depth-bg-blob--pink"></div>
         <img src="/assets/img/artwork/accents/henna-tattoo-studio-hand-drawn-style (1)__62582-OAIH8K-638__part1.png"
              class="deco-corner-layered__art deco-corner-layered__art--md" alt="" aria-hidden="true">
       </div>
       <div style="position:relative; z-index:1;"> ...real content... </div>
     </section>

   The outer section needs `position: relative` (same requirement as
   .deco-corner) and `overflow: hidden` so the blurred blob doesn't spill
   past the section edge. Placement modifiers: --top-left / --top-right /
   --bottom-left / --bottom-right. Art size modifiers: --sm (70px) / --md
   (110px) / --lg (150px). Pick any depth-bg-blob color: --navy / --teal /
   --sky / --red / --pink.
   ---------------------------------------------------------------------------- */
.deco-corner-layered {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  width: 180px;
  height: 180px;
}

.deco-corner-layered--top-left     { top: -24px; left: -24px; }
.deco-corner-layered--top-right    { top: -24px; right: -24px; }
.deco-corner-layered--bottom-left  { bottom: -24px; left: -24px; }
.deco-corner-layered--bottom-right { bottom: -24px; right: -24px; }

/* Override depth-bg-blob's own clamp()-based size/placement when nested in
   this wrapper — here it should fill+center the 180px box, not pin to a
   page edge the way depth-v2.css's --top-left etc. modifiers do. */
.deco-corner-layered > .depth-bg-blob {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0.4;
}

.deco-corner-layered__art {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 110px;
  height: auto;
  opacity: 0.8;
}

.deco-corner-layered__art--sm { width: 70px; }
.deco-corner-layered__art--md { width: 110px; }
.deco-corner-layered__art--lg { width: 150px; }

@media (max-width: 700px) {
  .deco-corner-layered {
    display: none;
  }
}


/* ----------------------------------------------------------------------------
   5. .deco-divider--tiled
   Full-width "ribbon" divider that repeats a divider PNG horizontally via
   background-image instead of stretching one <img>, so the motif appears to
   travel across the entire content width (per Cara's feedback: "some of the
   dividers can be multiplied so they appear to go across the screen").
   Apply to an empty <div> (NOT an <img>) at the full width of its container.
   A CSS mask gradient fades the tiling out at the left/right edges so the
   repeat doesn't look choppy where it gets cut off mid-motif.

   This is the one deliberate exception to the "never use background-image"
   rule stated at the top of this file — native <img> tiling isn't possible,
   and the repeat effect requires background-repeat.

   REQUIRED MARKUP:
     <div class="deco-divider--tiled deco-divider--tiled-h-md"
          style="background-image: url('/assets/img/artwork/dividers/hand-drawn-ornament-divider-collection__2221095__part1.png');"
          role="presentation" aria-hidden="true"></div>

   Height modifiers (controls both element height and background-size):
   --tiled-h-sm (36px) / --tiled-h-md (56px) / --tiled-h-lg (80px).
   Do NOT put alt text or real content in this div — it's decorative only,
   hence role="presentation" aria-hidden="true".
   ---------------------------------------------------------------------------- */
.deco-divider--tiled {
  width: 100%;
  background-repeat: repeat-x;
  background-position: center;
  margin: 2.5rem 0;
  -webkit-mask-image: linear-gradient(to right, transparent 0, black 8%, black 92%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, black 8%, black 92%, transparent 100%);
}

.deco-divider--tiled-h-sm { height: 36px; background-size: auto 36px; }
.deco-divider--tiled-h-md { height: 56px; background-size: auto 56px; }
.deco-divider--tiled-h-lg { height: 80px; background-size: auto 80px; }

@media (max-width: 500px) {
  .deco-divider--tiled-h-lg { height: 56px; background-size: auto 56px; }
  .deco-divider--tiled-h-md { height: 40px; background-size: auto 40px; }
  .deco-divider--tiled-h-sm { height: 28px; background-size: auto 28px; }
}


/* ----------------------------------------------------------------------------
   6. .deco-mandala-feature
   Larger, more prominent placement style for mandala accents — bigger than
   .deco-corner--lg's 140px ceiling (per Cara's feedback: "I want the
   mandalas used too, not just dividers"). Two use modes:

     (a) Corner/edge statement piece — same positioning model as .deco-corner
         (absolute; ancestor needs position: relative).
     (b) Centered section-background watermark — add --watermark to center
         it behind content, typically at --faint opacity.

   Markup (corner statement piece):
     <section class="section" style="position:relative;">
       <img src="/assets/img/artwork/florals/hand-drawn-mandala-lotus-flower-drawing__7063866.png"
            class="deco-mandala-feature deco-mandala-feature--top-right deco-mandala-feature--lg deco-mandala-feature--bold"
            alt="" aria-hidden="true">
       <div style="position:relative; z-index:1;">...content...</div>
     </section>

   Markup (centered watermark):
     <section class="section" style="position:relative; overflow:hidden;">
       <img src="/assets/img/artwork/accents/circular-pattern-form-mandala-with-lotus-flower-henna-mehndi-tattoo-decoration-decorative-ornament-e__6c02b166-eabc-4052-82d7-6c52079c6d93.png"
            class="deco-mandala-feature deco-mandala-feature--watermark deco-mandala-feature--xl deco-mandala-feature--faint"
            alt="" aria-hidden="true">
       <div style="position:relative; z-index:1;">...content...</div>
     </section>

   Size modifiers: --md (200px) / --lg (230px, default-equivalent) / --xl (260px).
   Opacity modifiers: --faint (0.12, use for --watermark mode) / --soft
   (0.35, default) / --bold (0.6, use sparingly for a real statement piece).
   Placement modifiers (corner mode only): --top-left / --top-right /
   --bottom-left / --bottom-right. --watermark overrides placement and
   centers absolutely; pair it with overflow:hidden on the section.
   ---------------------------------------------------------------------------- */
.deco-mandala-feature {
  position: absolute;
  height: auto;
  width: 230px;
  opacity: 0.35;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}

.deco-mandala-feature--md { width: 200px; }
.deco-mandala-feature--lg { width: 230px; }
.deco-mandala-feature--xl { width: 260px; }

.deco-mandala-feature--faint { opacity: 0.12; }
.deco-mandala-feature--soft  { opacity: 0.35; }
.deco-mandala-feature--bold  { opacity: 0.6; }

.deco-mandala-feature--top-left     { top: -30px; left: -30px; }
.deco-mandala-feature--top-right    { top: -30px; right: -30px; }
.deco-mandala-feature--bottom-left  { bottom: -30px; left: -30px; }
.deco-mandala-feature--bottom-right { bottom: -30px; right: -30px; }

.deco-mandala-feature--watermark {
  top: 50%;
  left: 50%;
  right: auto;
  bottom: auto;
  transform: translate(-50%, -50%);
}

@media (max-width: 700px) {
  .deco-mandala-feature:not(.deco-mandala-feature--watermark) {
    display: none;
  }

  .deco-mandala-feature--watermark {
    width: 160px !important;
  }
}


/* ============================================================================
   PASS 3 ADDITIONS — big, immersive treatments per Cara's direct feedback:
   "The decorative assets are being placed too timidly... I want them treated
   as real design elements, not afterthought decorations." Three new tools:
   .deco-bg-layer (full-section background art, layered behind content),
   .deco-divider--full (an actual full-viewport-width divider ribbon), and
   .deco-floral-showcase (a floral treated with the same visual weight as a
   real photo). Same brand-palette-only rule as above. All three are meant to
   be used GENEROUSLY — several per page, not one token instance.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   7. .deco-bg-layer
   A large decorative image (or several, layered) sitting BEHIND a section's
   real content, sized to span most/all of the section width, at low opacity,
   so it reads as part of the page's structure rather than a sticker. This is
   the primary tool for satisfying "backgrounds, not corner stickers."

   REQUIRED MARKUP — the section needs `position: relative; overflow: hidden;`
   (overflow:hidden is what clips the oversized layer to the section — do NOT
   drop it, but see the .deco-divider--full note below about what that means
   for full-width dividers nested in the same section). The art layer itself
   is position:absolute and must come BEFORE the real content in source order
   so its z-index:0 sits under the content wrapper's z-index:1:

     <section class="section section--cream" style="position:relative; overflow:hidden;">
       <img src="/assets/img/artwork/florals/watercolor-floral-leaves-elements-collection__482__part1.png"
            class="deco-bg-layer deco-bg-layer--soft deco-bg-layer--behind-section" alt="" aria-hidden="true">
       <div class="container" style="position:relative; z-index:1;">
         ...real content...
       </div>
     </section>

   Multiple layers can be stacked in one section (e.g. one --top-band + one
   --bottom-band) — just repeat the <img class="deco-bg-layer ..."> tag with
   different modifiers before the content wrapper.

   Opacity modifiers (pick one): --subtle (0.08) / --soft (0.15) / --visible
   (0.25). Vertical placement modifiers (pick one): --behind-hero (huge,
   fills the section, meant for hero-style sections with a strong focal
   image/heading), --behind-section (large, vertically centered watermark
   across the whole section), --top-band (pinned to the top portion of the
   section), --bottom-band (pinned to the bottom portion). Horizontal
   placement (optional, default is centered): --align-left / --align-right
   for a partial/off-center background (e.g. flowers spilling from one side
   behind a text column on the other) instead of a fully centered watermark.
   ---------------------------------------------------------------------------- */
.deco-bg-layer {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  height: auto;
  width: clamp(320px, 42vw, 620px);
  max-width: 55%;
  max-height: 70%;
  object-fit: contain;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Opacity tiers */
.deco-bg-layer--subtle  { opacity: 0.08; }
.deco-bg-layer--soft    { opacity: 0.15; }
.deco-bg-layer--visible { opacity: 0.25; }

/* Vertical placement */
.deco-bg-layer--behind-hero {
  width: clamp(70vw, 95vw, 1400px);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.deco-bg-layer--behind-section {
  width: clamp(60vw, 78vw, 1100px);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.deco-bg-layer--top-band {
  width: clamp(55vw, 70vw, 900px);
  top: -8%;
  left: 50%;
  bottom: auto;
  transform: translate(-50%, 0);
}

.deco-bg-layer--bottom-band {
  width: clamp(55vw, 70vw, 900px);
  top: auto;
  bottom: -8%;
  left: 50%;
  transform: translate(-50%, 0);
}

/* Horizontal offset — use instead of the default centered position for a
   partial/asymmetric layer (pairs well with --behind-section) */
.deco-bg-layer--align-left {
  left: -8%;
  transform: translate(0, -50%);
}
.deco-bg-layer--top-band.deco-bg-layer--align-left,
.deco-bg-layer--bottom-band.deco-bg-layer--align-left {
  transform: translate(0, 0);
}

.deco-bg-layer--align-right {
  left: auto;
  right: -8%;
  transform: translate(0, -50%);
}
.deco-bg-layer--top-band.deco-bg-layer--align-right,
.deco-bg-layer--bottom-band.deco-bg-layer--align-right {
  right: -8%;
  left: auto;
  transform: translate(0, 0);
}

@media (max-width: 700px) {
  .deco-bg-layer {
    width: clamp(85vw, 95vw, 700px);
  }
  .deco-bg-layer--behind-hero {
    width: clamp(95vw, 110vw, 900px);
  }
}


/* ----------------------------------------------------------------------------
   8. .deco-divider--full
   An actual full-width section-break ribbon — breaks out of the `.container`
   (and out of the viewport-width column entirely) using the same tiled
   background-image repeat technique as .deco-divider--tiled, but sized to
   truly span 100vw as a genuine divider between sections, not a small
   centered ornament. Apply to an empty <div> (NOT an <img>), same as
   .deco-divider--tiled.

   REQUIRED MARKUP:
     <div class="deco-divider--full deco-divider--full-md"
          style="background-image: url('/assets/img/artwork/borders/indian-ethnic-borders-set__7552__part2.png');"
          role="presentation" aria-hidden="true"></div>

   IMPORTANT — placement gotcha: this class breaks out to 100vw using a
   negative-margin technique (`left: 50%; margin-left: -50vw;`). If you place
   it INSIDE a `<section style="overflow:hidden">` (the pattern required by
   .deco-bg-layer and .deco-corner-layered above), the section's own
   overflow:hidden will clip the breakout back down to the section's width
   and defeat the point. Two correct uses:
     (a) Preferred — place it as a standalone element BETWEEN two <section>
         tags (not nested inside either one), where nothing clips it.
     (b) If it must live inside a section, that section must use
         `overflow: visible` (not `overflow: hidden`) — only acceptable if
         that section has no .deco-bg-layer / .deco-corner-layered of its own
         needing the clip.

   Height modifiers (controls element height + background-size, per Cara's
   spec): --full-sm (48px) / --full-md (72px) / --full-lg (100px).
   ---------------------------------------------------------------------------- */
.deco-divider--full {
  position: relative;
  left: 50%;
  right: 50%;
  width: 100vw;
  margin-left: -50vw;
  margin-right: -50vw;
  margin-top: 3rem;
  margin-bottom: 3rem;
  background-repeat: repeat-x;
  background-position: center;
  -webkit-mask-image: linear-gradient(to right, transparent 0, black 3%, black 97%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, black 3%, black 97%, transparent 100%);
}

.deco-divider--full-sm { height: 48px; background-size: auto 48px; }
.deco-divider--full-md { height: 72px; background-size: auto 72px; }
.deco-divider--full-lg { height: 100px; background-size: auto 100px; }

@media (max-width: 700px) {
  .deco-divider--full-lg { height: 72px; background-size: auto 72px; }
  .deco-divider--full-md { height: 52px; background-size: auto 52px; }
  .deco-divider--full-sm { height: 36px; background-size: auto 36px; }
}


/* ----------------------------------------------------------------------------
   9. .deco-floral-showcase
   Treats a floral asset with the SAME visual weight as a real photo — large,
   high-opacity, a genuine layout anchor (not a background layer, not a tiny
   accent). Per Cara: "I want flowers to be just as prominent as photos."

   Use mode (a) — paired 50/50 with a text block, exactly like a photo would
   be used in a two-column layout:

     <div class="deco-floral-showcase-pair">
       <img src="/assets/img/artwork/florals/floral-butterfly-illustration__2692061f-8f18-41e3-b376-d2b8b3fa5246__part1.png"
            class="deco-floral-showcase deco-floral-showcase--lg" alt="" aria-hidden="true">
       <div class="deco-floral-showcase-pair__text">
         ...heading + copy, same as you'd write next to a real photo...
       </div>
     </div>

   Use mode (b) — large corner-to-edge statement piece, bleeding off the
   section edge (ancestor needs `position: relative; overflow: hidden;`):

     <section class="section" style="position:relative; overflow:hidden;">
       <img src="/assets/img/artwork/accents/vector-set-colorful-henna-floral-elements-based-traditional-asian-ornaments-paisley-mehndi-tattoo-do__meh_flowers_7.png"
            class="deco-floral-showcase deco-floral-showcase--xl deco-floral-showcase--bleed deco-floral-showcase--bleed-right"
            alt="" aria-hidden="true">
       <div class="container" style="position:relative; z-index:1;">...content...</div>
     </section>

   Size modifiers: --md (300px) / --lg (360px) / --xl (440px) — all comfortably
   inside the 280-400px+ range Cara asked for; --xl intentionally exceeds it
   for the boldest statement placements. Opacity modifiers: --muted (0.65) /
   --vivid (0.85, default) / --solid (1.0). Add --bleed (absolute, positioned
   at a section edge, partially overflowing it for a true "statement piece"
   feel) plus a corner: --bleed-top-left / --bleed-top-right /
   --bleed-bottom-left / --bleed-bottom-right. Omit --bleed for mode (a),
   the paired 50/50 layout, where the image should sit in normal flow.
   ---------------------------------------------------------------------------- */
.deco-floral-showcase-pair {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) 1.2fr;
  gap: 40px;
  align-items: center;
}

@media (max-width: 780px) {
  .deco-floral-showcase-pair {
    grid-template-columns: 1fr;
    text-align: center;
  }
}

.deco-floral-showcase {
  display: block;
  height: auto;
  width: 100%;
  opacity: 0.85;
  margin: 0 auto;
}

.deco-floral-showcase--md { max-width: 300px; }
.deco-floral-showcase--lg { max-width: 360px; }
.deco-floral-showcase--xl { max-width: 440px; }

.deco-floral-showcase--muted { opacity: 0.65; }
.deco-floral-showcase--vivid { opacity: 0.85; }
.deco-floral-showcase--solid { opacity: 1; }

.deco-floral-showcase--bleed {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  margin: 0;
}

.deco-floral-showcase--bleed-top-left     { top: -8%;  left: -6%; }
.deco-floral-showcase--bleed-top-right    { top: -8%;  right: -6%; }
.deco-floral-showcase--bleed-bottom-left  { bottom: -8%; left: -6%; }
.deco-floral-showcase--bleed-bottom-right { bottom: -8%; right: -6%; }

@media (max-width: 700px) {
  .deco-floral-showcase--bleed {
    width: 55vw !important;
    max-width: 55vw !important;
  }
}

/* ============================================================================
   PASS 4 ADDITIONS - restrained transparent homepage flourishes
   Keep these sparse: one hero accent, no wallpaper fields, no opaque art cards.
   ============================================================================ */

.art-hero-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 2;
}

.hero-content { z-index: 3; }
.hero-dots { z-index: 3; }

.art-hero-layer__piece {
  position: absolute;
  height: auto;
  pointer-events: none;
  filter: drop-shadow(0 12px 20px rgba(15,8,80,.18));
}

.art-hero-layer__piece--home-paisley {
  right: clamp(-82px, -4vw, -36px);
  bottom: clamp(64px, 11vh, 122px);
  width: clamp(180px, 22vw, 340px);
  opacity: .22;
  transform: rotate(-10deg);
}

.art-hero-layer__piece--home-floral {
  display: none;
}

.photo-bloom {
  position: relative;
  isolation: isolate;
  overflow: visible !important;
}

.photo-bloom::before,
.photo-bloom::after {
  content: '';
  position: absolute;
  z-index: -1;
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  filter: drop-shadow(0 10px 16px rgba(23,12,121,.12));
}

.photo-bloom::before {
  width: clamp(88px, 10vw, 150px);
  aspect-ratio: 1;
  right: -38px;
  top: -34px;
  opacity: .38;
  transform: rotate(10deg);
  background-image: var(--bloom-a);
}

.photo-bloom::after {
  display: none;
}

.photo-bloom--quiet::before { opacity: .28; }
.photo-bloom--right::after,
.photo-bloom--left::before { display: none; }

@media (max-width: 760px) {
  .art-hero-layer__piece--home-paisley {
    right: -96px;
    bottom: 78px;
    width: 220px;
    opacity: .16;
  }
}