/* ================================================================
   ART: the house's visual system. Loaded last, after every other stylesheet.
   Matisse and Pollock read through a 2026 gallery: flat cut colour with crisp edges,
   one thin poured line, cream paper walls, big confident serif, quiet Inter for the UI.
   The art lives in a few singular places (the entrance, the thread, the footer,
   empty states and the order placed); everywhere else the furniture is the hero.
   ================================================================ */

/* ---------------- tokens ---------------- */
:root {
  /* colour: four colours and black ink. No red, no pink. */
  --art-cream: #f7f3ea;          /* the paper wall */
  --art-cream-deep: #efe8d8;     /* a mat, a sheet laid on the wall */
  --art-mat: #fbf9f4;            /* the mat round a work */
  --art-green: #134e3a;          /* dark green: the house */
  --art-cobalt: #1e3fa6;         /* cobalt: the cut-out */
  --art-yellow: #f2c230;         /* yellow: the sun */
  --art-ink: #121212;            /* black ink */
  --art-ink-soft: #4b4843;       /* 8.6:1 on cream */
  --art-hair: rgba(18, 18, 18, .14);
  --art-on-dark: #f7f3ea;

  /* the cut-paper edge: crisp, never torn; a shape is cut with scissors, not ripped */
  --art-cut-radius: 0;
  --art-cut-shadow: none;
  /* the poured line */
  --art-pour-w: 1.6px;
  --art-pour-ink: var(--art-ink);

  /* type: one serif for display, one sans for the interface */
  --art-serif: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --art-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --art-fs-display: clamp(48px, 7.4vw, 120px);
  --art-fs-h1: clamp(40px, 5.2vw, 84px);
  --art-fs-h2: clamp(30px, 3.4vw, 54px);
  --art-fs-h3: clamp(21px, 1.7vw, 26px);
  --art-fs-lede: clamp(17px, 1.3vw, 20px);
  --art-fs-body: 16px;
  --art-fs-label: 11.5px;
  --art-track-display: -.028em;
  --art-track-label: .16em;
  --art-measure: 62ch;

  /* space: an 8 scale, and the breath between sections */
  --art-s1: 8px; --art-s2: 16px; --art-s3: 24px; --art-s4: 32px; --art-s5: 48px; --art-s6: 64px; --art-s7: 96px; --art-s8: 144px;
  --art-section: clamp(64px, 8vw, 128px);

  /* motion: slow and quiet */
  --art-ease: cubic-bezier(.22, .8, .2, 1);
  --art-slow: .9s;
  --art-calm: .35s;

  /* the paper grain: a fine tooth, multiplied into the cream, never over a photograph */
  --art-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .32 0 0 0 0 .27 0 0 0 0 .18 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");

  /* the older names point at the four colours */
  --fv-pink: var(--art-yellow);
  --fv-serif: var(--art-serif);
  --gc-serif: var(--art-serif);
}

/* ---------------- (e) the paper wall ---------------- */
body,
html[data-page="gateway"] .ld,
.site-footer .footer-cols {
  background-color: var(--art-cream);
  background-image: var(--art-grain);
  background-size: 240px 240px;
}
.site-footer .footer-cols { background-color: var(--art-cream) !important; background-image: var(--art-grain) !important; }

/* ---------------- decoration never takes a tap or a reading ---------------- */
.fv-deco, .fv-shape, .gw-cut, .gw-lent, .gw-stage, .ld-cut, .art-thread, .gc-sign-row, .gc-sign-star,
canvas.drip, canvas.drip-scan, canvas.drip-banner, canvas.drip-gate, .gw-pour, .art-empty-art { pointer-events: none; }

/* ================================================================
   Typography and rhythm
   ================================================================ */
body { font-family: var(--art-sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3 { text-wrap: balance; }
.page p, .page li { text-wrap: pretty; }
.page :is(.lede, .ld-lede, .jn-sub, .gc-404-copy > p) { max-width: var(--art-measure); }
/* display headings: tight but legible tracking, never cramped */
.page h1, .ld-h1, .display, .plp-head h1 { letter-spacing: var(--art-track-display); font-kerning: normal; }
.section-title, .ld-head h2, .ld-faq h2, .ld-reviews h2 { letter-spacing: -.022em; line-height: 1.04; }
/* labels: refined small capitals */
.kicker, .ld-kicker, .p-card .meta .p-note, .footer-cols h4, .cm-head .kicker, .gw-pre {
  font-family: var(--art-sans) !important; font-style: normal !important;
  font-size: var(--art-fs-label) !important; font-weight: 500 !important;
  letter-spacing: var(--art-track-label) !important; text-transform: uppercase !important;
  font-feature-settings: "case" 1, "cpsp" 1;
}
.kicker:not([style*="color"]), .ld-kicker { color: var(--art-ink-soft); }
.ld-kicker { color: var(--art-green) !important; }

/* ================================================================
   Buttons: one primary, one secondary, one text link
   Crisp rectangles, no tape, no torn edge, no offset shadow. 48px tall at least.
   ================================================================ */
html body .pill:not(.gw-enter):not(.jn-auth *):not(#art-none):not(#art-nil):not(.sm) { min-height: 48px; }
html body .pill.sm { min-height: 44px; }
html body .pill:not(.gw-enter):not(.jn-auth *):not(#art-none):not(#art-nil) {
  --gc-on: var(--art-on-dark) !important;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 0 26px !important; border-radius: 0 !important;
  font-family: var(--art-sans) !important; font-size: 12px !important; font-weight: 600 !important;
  letter-spacing: .14em !important; text-transform: uppercase !important; line-height: 1.2 !important;
  background: var(--art-green) !important; color: var(--art-on-dark) !important; -webkit-text-fill-color: currentColor !important;
  border: 1px solid var(--art-green) !important; box-shadow: none !important;
  clip-path: none !important; transform: none !important; text-decoration: none !important;
  transition: background-color var(--art-calm) ease, color var(--art-calm) ease, border-color var(--art-calm) ease !important;
}
html body .pill:not(.gw-enter):not(.jn-auth *):not(#art-none):not(#art-nil)::before, html body .pill:not(.gw-enter):not(.jn-auth *):not(#art-none):not(#art-nil)::after { content: none !important; display: none !important; }
html body .pill:not(.gw-enter):not(.jn-auth *):not(#art-none):not(#art-nil):hover {
  --gc-on: var(--art-on-dark) !important; background: var(--art-ink) !important; border-color: var(--art-ink) !important; color: var(--art-on-dark) !important; }
/* secondary: the outline */
html body .pill:is(.outline, .ghost, .line, .secondary):not(.gw-enter):not(.jn-auth *):not(#art-none):not(#art-nil) {
  --gc-on: var(--art-ink) !important;
  background: transparent !important; color: var(--art-ink) !important; border-color: var(--art-ink) !important;
}
html body .pill:is(.outline, .ghost, .line, .secondary):not(.gw-enter):not(.jn-auth *):not(#art-none):not(#art-nil):hover {
  --gc-on: var(--art-on-dark) !important; background: var(--art-ink) !important; color: var(--art-on-dark) !important; }
/* on a dark field the primary turns to paper (".white" is the house's name for it), the
   outline to a paper line; a poured canvas is light, so its button stays green */
html body :is([data-ink="light"]:not(.fv-scan):not([data-field="lemon"]), .edh-craft, .pd-rev-field, .ld-steps-wrap, .footer-news, .pride-hero) .pill:not(.gw-enter):not(.outline):not(.jn-auth *):not(#art-none):not(#art-nil) {
  --gc-on: var(--art-ink) !important;
  background: var(--art-cream) !important; color: var(--art-ink) !important; border-color: var(--art-cream) !important;
}
html body :is([data-ink="light"]:not(.fv-scan):not([data-field="lemon"]), .edh-craft, .pd-rev-field, .pride-hero) .pill.outline:not(.gw-enter):not(.jn-auth *):not(#art-none):not(#art-nil) {
  --gc-on: var(--art-on-dark) !important;
  background: transparent !important; color: var(--art-on-dark) !important; border-color: var(--art-on-dark) !important;
}
html body :is([data-ink="light"]:not(.fv-scan):not([data-field="lemon"]), .edh-craft, .pd-rev-field, .ld-steps-wrap, .footer-news, .pride-hero) .pill:not(.gw-enter):not(.jn-auth *):not(#art-none):not(#art-nil):hover {
  --gc-on: var(--art-ink) !important;
  background: var(--art-yellow) !important; color: var(--art-ink) !important; border-color: var(--art-yellow) !important;
}
/* the add-to-bag and pay buttons are the primary of their page: full width, a touch larger */
html body :is(#addToCart, #ownNow, #coSubmit, #drawerCheckout, .pill.full):not(.jn-auth *):not(#art-none):not(#art-nil) { min-height: 56px !important; font-size: 13px !important; width: 100%; }
/* the text link: an underline that thickens */
.arrow-link, .ld-head a, .ld-more a, .ld-rooms a, .cm-link, .pd-cartel-links a {
  text-decoration: underline !important; text-decoration-thickness: 1px !important; text-underline-offset: 5px !important;
  border-bottom: 0 !important; background: none !important;
  transition: text-decoration-thickness var(--art-calm) ease;
}
.arrow-link:hover, .ld-head a:hover, .ld-more a:hover, .ld-rooms a:hover, .cm-link:hover, .pd-cartel-links a:hover { text-decoration-thickness: 2px !important; }
/* focus: one clear ring everywhere */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--art-cobalt); outline-offset: 3px; }
:is([data-ink="light"], .footer-news, .ld-steps-wrap, .gateway) :where(a, button, input, select, summary):focus-visible { outline-color: var(--art-yellow); }

/* errors: cobalt ink and a mark, never red */
.field .err, html[data-page="checkout"] #coForm .field .err { color: var(--art-cobalt) !important; font-weight: 500; }
.field .err::before { content: "\2022\00a0"; }
.field.invalid input, .field.invalid select { border-color: var(--art-cobalt) !important; }

/* ================================================================
   Modern, not scrapbook: tape, torn sheets and tilts leave the interface
   ================================================================ */
.footer-cols, .gc-more-panel, .world-nav a.active::after, .news-form button::after,
html[data-house] .banner.fv-pour.fv-scan.fv-scan:not(.fv-foot-pour) .copy,
html[data-house] .banner.fv-pour.fv-scan.fv-scan .copy .pill {
  clip-path: none !important; transform: none !important;
}
.gc-more-panel { box-shadow: 0 18px 40px rgba(18, 18, 18, .12) !important; border: 1px solid var(--art-hair); }
.ld-rev:nth-child(n) { transform: none !important; }
.ld-n { border-radius: 50% !important; transform: none !important; font-family: var(--art-serif) !important; font-weight: 400 !important; }

/* ================================================================
   (b) the thread: one thin poured line between sections, drawn by the scroll
   ================================================================ */
.art-thread {
  display: block; position: relative; height: clamp(44px, 5vw, 76px);
  margin: clamp(8px, 1.6vw, 24px) 0; color: var(--art-pour-ink); overflow: visible; contain: layout;
}
.art-thread svg { display: block; width: 100%; height: 100%; overflow: visible; }
.art-thread path {
  fill: none; stroke: currentColor; stroke-width: var(--art-pour-w); stroke-linecap: round; stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .art-thread path {
      stroke-dasharray: 1 1; stroke-dashoffset: 1;
      animation: art-draw linear both; animation-timeline: view(); animation-range: entry 0% cover 52%;
    }
  }
}
@keyframes art-draw { to { stroke-dashoffset: 0; } }

/* ================================================================
   (a) the hero: one piece among cut paper, one pour across the page
   ================================================================ */
html[data-page="gateway"] .ld-hero.art-hero-host { position: relative; isolation: isolate; }
html[data-page="gateway"] .ld-hero.art-hero-host > :not(.art-hero):not(.art-hero-pour) { position: relative; z-index: 3; }
html[data-page="gateway"] .ld-cut-star { display: none !important; }
.art-hero { position: relative; z-index: auto; }
.art-hero .ah, .art-hero .ah-work { position: absolute; display: block; }
.art-hero .ah svg { display: block; width: 100%; height: auto; overflow: visible; }
.art-hero .ah-field { left: -16%; top: 24%; width: 86%; z-index: 0; }
.art-hero .ah-sun { right: -8%; top: -5%; width: 32%; z-index: 1; }
.art-hero .ah-work { left: 10%; top: 3%; width: 72%; aspect-ratio: 1600 / 2339; z-index: 3; overflow: hidden;
  border-radius: 50% 50% 0 0 / 34% 34% 0 0; background: var(--art-mat); }
.art-hero .ah-work img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.art-hero .ah-leaf { left: -12%; bottom: 0; width: 38%; z-index: 4; transform: rotate(-16deg); transform-origin: 50% 90%; }
.art-hero .ah-frond { right: 0; bottom: -2%; width: 15%; z-index: 4; transform: rotate(8deg); }
.art-hero[data-day="1"] .ah-field { left: 4%; top: 30%; width: 92%; }
.art-hero[data-day="1"] .ah-sun { right: auto; left: -10%; top: 6%; width: 28%; }
.art-hero[data-day="1"] .ah-leaf { left: auto; right: -14%; bottom: 8%; transform: rotate(14deg); }
.art-hero[data-day="1"] .ah-frond { right: auto; left: -4%; bottom: -2%; transform: rotate(-10deg); }
.art-hero[data-day="2"] .ah-field { left: -22%; top: 12%; width: 78%; }
.art-hero[data-day="2"] .ah-sun { right: -12%; top: auto; bottom: 30%; width: 30%; }
.art-hero[data-day="2"] .ah-leaf { left: -8%; bottom: -4%; width: 34%; transform: rotate(-26deg); }
/* the pour across the hero: enamel black, a yellow thread riding it */
.art-hero-pour { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; overflow: visible; pointer-events: none; }
.art-hero-pour .ahp { fill: none; stroke: var(--art-ink); stroke-width: 2.4px; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.art-hero-pour .ahp-thread { stroke: var(--art-yellow); stroke-width: 1.2px; }
.art-hero-pour .ahp-narrow { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .art-hero-pour .ahp { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
  .art-hero-poured .art-hero-pour .ahp { stroke-dashoffset: 0; transition: stroke-dashoffset 2.6s cubic-bezier(.3, .1, .2, 1) .2s; }
  .art-hero-poured .art-hero-pour .ahp-thread { transition-delay: .55s; }
  .art-hero .ah { opacity: 0; translate: 0 14px; transition: opacity 1s ease, translate 1.4s var(--art-ease); }
  .art-hero-poured .art-hero .ah { opacity: 1; translate: 0 0; }
  .art-hero-poured .art-hero .ah-sun { transition-delay: .15s; }
  .art-hero-poured .art-hero .ah-leaf { transition-delay: .3s; }
  .art-hero-poured .art-hero .ah-frond { transition-delay: .45s; }
  .art-hero-poured .art-hero .ah svg { animation: art-drift 24s var(--art-ease) 2s infinite alternate; transform-origin: 50% 60%; }
  .art-hero-poured .art-hero .ah-leaf svg { animation-duration: 29s; animation-direction: alternate-reverse; }
}
@media (min-width: 1024px) {
  /* set on the bare hero, before the composition is laid in, so nothing reflows */
  .ld .ld-hero { max-width: 1440px; }
  .ld .ld-hero > :not(.art-hero):not(.art-hero-pour) { max-width: 58%; }
  .ld .ld-hero .ld-h1 { max-width: 13ch; }
  .art-hero { position: absolute; right: max(var(--pad-x, 40px), 4%); top: clamp(64px, 8vw, 120px); width: clamp(300px, 29vw, 430px); aspect-ratio: 5 / 7; }
}
@media (max-width: 1023px) {
  html[data-page="gateway"] .ld-hero.art-hero-host { padding-top: 28px; overflow-x: clip; }
  .art-hero { width: min(100%, 460px); aspect-ratio: 4 / 3; margin: 0 auto clamp(20px, 5vw, 40px); }
  .art-hero .ah-work { left: 31%; width: 36%; top: 0; }
  .art-hero .ah-field { left: 16%; top: 22%; width: 50%; }
  .art-hero .ah-leaf { left: 14%; bottom: -2%; width: 20%; }
  .art-hero .ah-sun { right: 14%; top: 4%; width: 17%; }
  .art-hero .ah-frond { right: 20%; bottom: -2%; width: 10%; }
  .art-hero[data-day] .ah-field { left: 12%; top: 20%; width: 58%; }
  .art-hero[data-day] .ah-sun { left: auto; right: 14%; top: 4%; bottom: auto; width: 17%; }
  .art-hero[data-day] .ah-leaf { left: 14%; right: auto; bottom: -2%; width: 20%; }
  .art-hero[data-day] .ah-frond { left: auto; right: 20%; bottom: -2%; }
  .art-hero-pour .ahp-wide { display: none; }
  .art-hero-pour .ahp-narrow { display: inline; }
  .art-hero-pour { top: 28px; bottom: auto; height: min(75vw, 345px); }
}


/* ================================================================
   (a2) the entrance doors: one composition
   The wall is cut on the golden section: the Italia house takes 61.8%, the hero piece
   in its arch; Editions takes the rest, its window a flat sheet of cobalt. A white frond,
   a yellow leaf and a black star hold the seam; one pour crosses the wall.
   The cut-outs re-arrange once a day and drift so slowly the eye barely notices.
   ================================================================ */
@media (min-width: 821px) {
  html[data-page="gateway"] .gateway.gw { grid-template-columns: 1.618fr 1fr; }
  html[data-page="gateway"] .gateway.gw .gw-italia .art { left: 7%; top: 7%; width: min(44%, 420px); }
  html[data-page="gateway"] .gateway.gw .gw-editions .art { left: 14%; top: 9%; width: min(64%, 380px); }
  html[data-page="gateway"] .gateway.gw .gw-italia .copy { right: 40%; }
  html[data-page="gateway"] .gateway.gw .gw-door .copy .gw-name { font-size: min(19cqi, 196px); }
  html[data-page="gateway"] .gateway.gw .gw-editions .copy .gw-name { font-size: min(24cqi, 150px); }
  /* the seam's cut-outs, placed on the section lines (day 0) */
  html[data-page="gateway"] .gateway.gw .gw-frond { left: -300px; bottom: -10%; width: min(14vw, 210px); --rot: 6deg; }
  html[data-page="gateway"] .gateway.gw .gw-leaf { left: -230px; top: 9%; width: min(8vw, 120px); --rot: 200deg; }
  html[data-page="gateway"] .gateway.gw .gw-star { left: -120px; top: 34%; width: 46px; --rot: 12deg; }
  html[data-page="gateway"] .gw-stage[data-day="1"] .gw-frond { left: -360px; bottom: -14%; width: min(16vw, 240px); --rot: -4deg; }
  html[data-page="gateway"] .gw-stage[data-day="1"] .gw-leaf { left: -170px; top: 22%; --rot: 168deg; }
  html[data-page="gateway"] .gw-stage[data-day="1"] .gw-star { left: -260px; top: 8%; width: 40px; --rot: -8deg; }
  html[data-page="gateway"] .gw-stage[data-day="2"] .gw-frond { left: -250px; bottom: -6%; width: min(12vw, 180px); --rot: 14deg; }
  html[data-page="gateway"] .gw-stage[data-day="2"] .gw-leaf { left: -290px; top: 14%; width: min(9vw, 132px); --rot: 222deg; }
  html[data-page="gateway"] .gw-stage[data-day="2"] .gw-star { left: -96px; top: 18%; width: 52px; --rot: 30deg; }
}
/* the enter buttons: crisp, primary on each field */
html[data-page="gateway"] .gateway.gw .gw-door .copy .pill.gw-enter {
  box-shadow: none !important; min-height: 52px; font-family: var(--art-sans) !important; font-size: 13px !important;
  font-weight: 600 !important; letter-spacing: .16em !important;
  background: var(--art-cream) !important; color: var(--art-ink) !important;
}
html[data-page="gateway"] .gateway.gw .gw-editions .copy .pill.gw-enter { background: var(--art-ink) !important; color: var(--art-cream) !important; }
html[data-page="gateway"] .gateway.gw .gw-door:hover .copy .pill.gw-enter { transform: none; background: var(--art-yellow) !important; color: var(--art-ink) !important; }
html[data-page="gateway"] .gateway.gw .gw-editions:hover .copy .pill.gw-enter { background: var(--art-cobalt) !important; color: var(--art-cream) !important; }
/* a slow drift once the wall has arrived: a breath, not a movement */
@media (prefers-reduced-motion: no-preference) {
  html[data-page="gateway"] .gateway.gw.gw-on .gw-cut svg { animation: art-drift 22s var(--art-ease) 1.6s infinite alternate; transform-origin: 50% 60%; }
  html[data-page="gateway"] .gateway.gw.gw-on .gw-leaf svg { animation-duration: 27s; animation-direction: alternate-reverse; }
  html[data-page="gateway"] .gateway.gw.gw-on .gw-star svg { animation-duration: 31s; }
}
@keyframes art-drift { from { transform: rotate(-1.6deg) translateY(0); } to { transform: rotate(1.8deg) translateY(-6px); } }
/* the landing beneath: one star, nothing else; the steps sit on paper with flat discs */
html[data-page="gateway"] .ld-cut-leaf { display: none; }
html[data-page="gateway"] .ld-hero { padding-block: clamp(80px, 10vw, 152px) clamp(56px, 7vw, 104px); }
html[data-page="gateway"] .ld .ld-ctas .pill.outline { box-shadow: none !important; }

/* ================================================================
   Furniture as art: every piece hangs on the wall with a mat and a label
   ================================================================ */
/* listing and grids: a clean gallery hang, consistent frames */
.p-card .art, .p-card .art.fv-field {
  background: var(--art-mat) !important; box-shadow: inset 0 0 0 1px rgba(18, 18, 18, .05);
}
.p-card .meta { padding-top: 18px !important; position: relative; }
/* the wall label: a short rule, the name in the serif, the facts in small type */
.p-card .meta::before {
  content: ""; display: block; width: 28px; height: 1px; background: var(--art-ink); margin: 0 0 14px; opacity: .55;
}
.p-card .meta h3 { font-family: var(--art-serif) !important; font-weight: 400 !important; letter-spacing: -.01em; }
.p-card .meta .lead { font-size: 12.5px !important; color: var(--art-green) !important; }
.card-grid { row-gap: clamp(48px, 5vw, 80px) !important; }

/* the product: the photograph is the work, the buy box its label on the wall */
html[data-page="product"] .pdp-hero.fv-field {
  background-color: var(--art-cream) !important; background-image: var(--art-grain) !important; background-size: 240px 240px !important;
}
html[data-page="product"] .pdp-hero.fv-field > .fv-deco { display: none !important; }
html[data-page="product"] .pdp-hero.fv-field > .copy > div:first-child :is(h1, .by, .by *, .fv-price, .fv-price *) {
  color: var(--art-ink) !important; -webkit-text-fill-color: var(--art-ink) !important; text-shadow: none !important;
}
html[data-page="product"] .pdp-hero.fv-field > .copy > div:first-child .by { color: var(--art-ink-soft) !important; -webkit-text-fill-color: var(--art-ink-soft) !important; }
html[data-page="product"] .pdp-hero .pd-frame {
  background: var(--art-mat) !important; box-shadow: 0 0 0 1px rgba(18, 18, 18, .06), 0 30px 60px -40px rgba(18, 18, 18, .35) !important;
  padding: clamp(14px, 2.6vw, 44px) !important; box-sizing: border-box;
}
html[data-page="product"] .pdp-hero .pd-frame > img.staging-hero { position: relative !important; inset: auto !important; width: 100% !important; height: 100% !important; object-fit: cover; }
html[data-page="product"] .pdp-hero .pd-cartel { filter: none !important; }
html[data-page="product"] .pdp-hero .pd-cartel::before { background: var(--art-mat) !important; clip-path: none !important; }
html[data-page="product"] .pdp-hero .pd-cartel::after { display: none !important; }
/* the work hangs level with the top of its label and stays in view while the label is read */
@media (min-width: 1024px) {
  html[data-page="product"] .pdp-hero.fv-field .pd-frame { align-self: start; position: sticky; top: calc(var(--header-h, 68px) + 32px); margin-top: clamp(40px, 6vw, 96px); }
}
html[data-page="product"] .pdp-hero .pd-cartel {
  background: var(--art-mat) !important; box-shadow: 0 0 0 1px var(--art-hair) !important; border-radius: 0 !important;
}

/* ================================================================
   (d) empty states and the order placed: small artworks
   ================================================================ */
.empty-note, .pg-empty, .jn-empty, .panel-empty { text-align: center; }
.empty-note::before, .pg-empty::before, .jn-empty::before, .panel-empty::before {
  content: ""; display: block; width: 168px; aspect-ratio: 3 / 2; margin: 0 auto 28px;
  background: url("../art/empty.svg") center / contain no-repeat;
}
.drawer .empty-note::before { width: 140px; margin-top: 24px; }
/* a page that composes its own empty artwork keeps it, alone */
html[data-page="checkout"] .empty-note::before, .gc-404::before, .empty-note:has(svg, img)::before { content: none !important; display: none !important; }
html[data-page="checkout"] .empty-note, .gc-404 { text-align: left; }
.empty-note strong, .pg-empty-t { display: block; font-family: var(--art-serif); font-weight: 400; font-size: clamp(24px, 2.4vw, 32px); letter-spacing: -.015em; line-height: 1.15; margin-bottom: 8px; }
.empty-note p { margin-inline: auto; max-width: 38ch; color: var(--art-ink-soft); }
/* the order placed: the owner's card hangs beside its own small composition */
.owner-card-obj { position: relative; isolation: isolate; }
.owner-card-obj::before {
  content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; width: min(560px, 120%); aspect-ratio: 8 / 5;
  transform: translate(-50%, -54%); background: url("../art/placed.svg") center / contain no-repeat; pointer-events: none;
}
.cx-advisor-done:not([hidden])::before {
  content: ""; display: block; width: 180px; aspect-ratio: 8 / 5; margin: 0 0 16px;
  background: url("../art/placed.svg") center / contain no-repeat;
}

/* ================================================================
   (c) the footer: the house's signature canvas
   A green field for the invitation, the cream wall for the index, then the poured
   canvas in the house colours with the name cut in flat cobalt across its edge.
   ================================================================ */
.site-footer .footer-news { background: var(--art-green) !important; --gc-ink: var(--art-on-dark) !important; }
.site-footer .footer-news .news-form button::after { content: none !important; }
.site-footer .footer-news .news-form { display: flex !important; align-items: stretch; gap: 12px; min-width: 0; max-width: 100%; }
.site-footer .footer-news .news-form input { flex: 1 1 auto; min-width: 0; min-height: 48px; }
.site-footer .footer-news .news-form button {
  flex: none; min-height: 48px !important; height: auto !important; align-self: center; padding: 0 22px !important; background: var(--art-cream) !important; color: var(--art-ink) !important;
  font: 600 12px/1 var(--art-sans) !important; letter-spacing: .14em !important; text-transform: uppercase;
}
.site-footer .footer-news .news-form button:hover { background: var(--art-yellow) !important; color: var(--art-ink) !important; }
.site-footer .footer-news .news-form { border-bottom-width: 1px; }
.site-footer .footer-news h3 { font-family: var(--art-serif) !important; font-weight: 400 !important; letter-spacing: -.02em; }
.site-footer .footer-cols { margin-top: 0 !important; }
.site-footer .footer-cols li a { padding: 6px 0 !important; display: inline-block; min-height: 32px; }
.site-footer > .fv-foot-pour { background: var(--art-cream-deep) !important; }
.gc-sign-row .gc-sign, html[data-house] .gc-sign-row .gc-sign {
  background: none !important; color: var(--art-cobalt) !important; -webkit-text-fill-color: var(--art-cobalt) !important;
  font-family: var(--art-serif) !important; font-weight: 400 !important; letter-spacing: -.035em !important;
}
.gc-sign-row { transform: translate(-50%, -52%) !important; }
.gc-sign-row .gc-sign-star path, html[data-house] .gc-sign-row .gc-sign-star path { fill: var(--art-yellow) !important; }
.site-footer .footer-base { background: var(--art-ink) !important; }
.site-footer .footer-base .hallmark { display: block !important; height: 26px !important; width: auto !important; min-width: 49px; opacity: 1 !important; filter: none !important; }
/* a phone: the field and its button stack inside the 20px gutter */
@media (max-width: 560px) {
  .site-footer .footer-news .wrap, .site-footer .footer-news .inner { padding-inline: 20px !important; max-width: 100%; box-sizing: border-box; }
  .site-footer .footer-news .news-form { flex-direction: column; border-bottom: 0 !important; gap: 10px; }
  .site-footer .footer-news .news-form input { border-bottom: 1px solid var(--art-on-dark) !important; }
  .site-footer .footer-news .news-form button { width: 100%; align-self: stretch; }
}
.site-footer .footer-base, .gc-legal a { color: rgba(247, 243, 234, .82) !important; }

/* ================================================================
   Tap targets: 44px at least
   ================================================================ */
.site-footer .back-top { min-height: 44px; display: inline-flex; align-items: center; }
.p-card .wish { width: 44px !important; height: 44px !important; }
.chip, .filter-toggle, .ls-more { min-height: 44px; }

/* ================================================================
   Stillness
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .art-thread path { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
}

/* ---------------- the hero as a canvas: poured on arrival, then by the visitor ---------------- */
.pp-host { cursor: crosshair; }
.pp-host a, .pp-host button, .pp-host input, .pp-host label { cursor: pointer; }
html[data-page] .ld-hero.art-hero-host.pp-host > canvas.pp-canvas { position: absolute !important; left: 0; top: 0; z-index: 2 !important; pointer-events: none; max-width: none !important; margin: 0 !important; }
.pp-host .art-hero-pour { display: none; }  /* the canvas pours instead */
html[data-page] .ld-hero.art-hero-host.pp-host > .pp-hint { position: absolute !important; z-index: 4 !important; max-width: none !important; right: max(var(--pad-x, 24px), 4%); bottom: 18px; margin: 0; display: flex; gap: 16px; align-items: center;
  font: 500 11px/1 var(--art-sans, Inter, sans-serif); letter-spacing: .14em; text-transform: uppercase; color: rgba(18, 18, 18, .6); transition: opacity .6s ease; }
.pp-host .pp-hint .pp-clear { background: none; border: 0; padding: 8px 0; font: inherit; letter-spacing: inherit; text-transform: inherit; color: #121212; text-decoration: underline; text-underline-offset: 4px; }
.pp-host .pp-hint.pp-hint-gone span { opacity: 0; transition: opacity .6s ease; }
@media (pointer: coarse) { .pp-host { cursor: auto; } }