/* shell layer: loaded after atelier.css */

/* the footer opens straight onto the newsletter: the poured band above it renders as an
   empty cream gap on most pages, so it goes */
.site-footer::before { display: none !important; content: none !important; }
/* the last block of a page leaves one even breath before the footer, never two */
#page > .page > .wrap:last-child { padding-bottom: clamp(56px, 6vw, 88px) !important; margin-bottom: 0 !important; }

/* newsletter: the field reads clearly on the dark band; checkboxes in the house's hand */
.footer-news input[type="email"]::placeholder { color: rgba(255, 255, 255, .78) !important; opacity: 1; font-family: Inter, system-ui, sans-serif; font-size: 15px; }
.footer-news .news-check input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; width: 16px; height: 16px; margin: 0 10px 0 0; flex: none;
  border: 1.5px solid rgba(255, 255, 255, .8); border-radius: 2px; background: transparent; vertical-align: -3px; cursor: pointer; position: relative;
}
.footer-news .news-check input[type="checkbox"]:checked { background: #f2c230; border-color: #f2c230; }
.footer-news .news-check input[type="checkbox"]:checked::after {
  content: ""; position: absolute; left: 4px; top: 0; width: 5px; height: 10px; border: solid #111; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.footer-news .news-check input[type="checkbox"]:focus-visible { outline: 2px solid #f2c230; outline-offset: 2px; }

/* search: rooms and services as quiet chips; the keyboard's choice is marked */
.search-pages { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 18px; }
.search-page { font: 500 13px/1 Inter, system-ui, sans-serif; letter-spacing: .02em; padding: 10px 14px; border: 1px solid rgba(0,0,0,.18); border-radius: 999px; color: #111; text-decoration: none; background: #fff; }
.search-page:hover, .search-page.kb { border-color: #134e3a; background: #134e3a; color: #fff; }
.search-hit.kb { outline: 2px solid #1e3fa6; outline-offset: 2px; }
.search-hint { text-transform: none !important; }

/* lead time on every card: a quiet line under the price, always visible */
.p-card .meta .lead { font: 400 13px/1.4 Inter, system-ui, sans-serif !important; color: #134e3a !important; margin: 4px 0 6px !important; letter-spacing: .01em; text-transform: none !important; display: block !important; }
.p-card .meta .lead::before { content: none !important; display: none !important; }

/* verified reviews: on the home page and under a piece's name, only when real ones exist */
.home-reviews { padding: clamp(56px, 7vw, 96px) 0 !important; }
.home-reviews h2 { font-family: var(--serif, Georgia, serif); font-size: clamp(28px, 3.4vw, 44px); font-weight: 400; margin: 10px 0 8px; text-transform: none; }
.home-reviews .hr-note { color: #333; font-size: 15px; margin: 0 0 32px; }
.home-reviews .hr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.home-reviews .hr-card { background: #fff; border: 1px solid rgba(0,0,0,.1); padding: 24px; }
.home-reviews .hr-card h3 { font-size: 18px; margin: 10px 0 8px; text-transform: none; }
.home-reviews .hr-card p { font-size: 15px; line-height: 1.55; color: #222; }
.home-reviews .hr-by { color: #134e3a !important; font-size: 13px !important; margin-top: 12px; }
.pd-rev-stars-ro { color: #e3a90f; letter-spacing: 2px; }
.pd-rev-stars-ro span { color: rgba(0,0,0,.18); }
.pd-rev-badge { display: inline-flex; gap: 8px; align-items: center; font: 400 13px/1 Inter, system-ui, sans-serif; color: #111; text-decoration: none; margin: 6px 0 10px; }
.pd-rev-badge span:last-child { text-decoration: underline; text-underline-offset: 3px; }

/* home: the promises a buyer needs, in plain sight under the hero */
.ld-promise { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 28px; padding: 18px 0 0; margin: 18px 0 0; border-top: 1px solid rgba(0,0,0,.14); font: 400 14px/1.4 Inter, system-ui, sans-serif; color: #222; }
.ld-promise li { margin: 0; padding: 0; }
.ld-promise li::before { content: none !important; }
.ld-promise b { font-weight: 600; color: #134e3a; }
@media (max-width: 600px) { .ld-promise { flex-direction: column; gap: 8px; } }

/* ================================================================
   Restraint: the art frames the house, never the furniture.
   One Fauve or Pollock gesture at a time, and never on a photograph or a line of text.
   Outside the gateway every photograph is a clean rectangle; cut-outs, torn edges and
   painted underlays leave the heroes, plates and grids. The gateway, the poured section
   bands, the footer and empty states keep the hand.
   ================================================================ */
html:not([data-page="gateway"]) .fv-win,
html:not([data-page="gateway"]) .fv-win img,
html:not([data-page="gateway"]) .media img,
html:not([data-page="gateway"]) .p-card .art,
html:not([data-page="gateway"]) .p-card .staging,
html:not([data-page="gateway"]) .p-card img {
  -webkit-mask-image: none !important; mask-image: none !important;
  -webkit-clip-path: none !important; clip-path: none !important;
  border-radius: 0 !important;
}
/* the mask used to do the clipping; the window now clips its own photograph */
html:not([data-page="gateway"]) .fv-win { transform: none !important; rotate: none !important; overflow: hidden !important; }
html:not([data-page="gateway"]) #page .tile .art, html:not([data-page="gateway"]) #page .tile:hover .art { transform: none !important; }

/* cut shapes, fronds, starbursts and brush underlays around photographs and copy */
html:not([data-page="gateway"]) #page .fv-deco,
html:not([data-page="gateway"]) #page .ih-cut,
html:not([data-page="gateway"]) #page .ih-plate-cut,
html:not([data-page="gateway"]) #page .edh-layer,
html:not([data-page="gateway"]) #page .edh-cut,
html:not([data-page="gateway"]) #page .ls-reveal,
html:not([data-page="gateway"]) #page .st-cuts { display: none !important; }

/* the text panels on a poured band are plain cards, squared, not torn paper */
html:not([data-page="gateway"]) #page .banner.fv-pour .copy {
  -webkit-clip-path: none !important; clip-path: none !important; transform: none !important;
}

/* photo tiles and plates hang straight, on the page colour, with no coloured paper behind */
html:not([data-page="gateway"]) #page .tile.fv-field,
html:not([data-page="gateway"]) #page .ih-plate-art { background: transparent !important; transform: none !important; }
html:not([data-page="gateway"]) #page .tile.fv-field::before,
html:not([data-page="gateway"]) #page .tile.fv-field::after { content: none !important; display: none !important; }

/* ================================================================
   Product cards: photograph, note, name, price, lead time
   ================================================================ */
.p-card .art,
.p-card .art.fv-field { background: #efebe3 !important; overflow: hidden; }
.p-card .art.fv-field .staging,
.p-card .art.fv-field .staging.fv-win {
  inset: 0 !important; left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important;
  object-fit: cover; transform: none !important;
}
.p-card .art .flag, .p-card .art .edh-torn-tag, .p-card .discover, .p-card .edh-cover { display: none !important; }
.p-card .meta .p-note {
  font: 500 11px/1.2 Inter, system-ui, sans-serif !important; letter-spacing: .14em !important; text-transform: uppercase !important;
  color: #134e3a !important; margin: 0 0 6px !important; padding: 0 !important; background: none !important;
}
.p-card .meta .p-note::before, .p-card .meta .p-note::after { content: none !important; }
.p-card .meta .from { text-transform: none !important; }
/* the heart: quiet, on hover or focus; always there on touch */
.p-card .wish {
  background: rgba(255, 255, 255, .92) !important; border: 0 !important; box-shadow: none !important;
  width: 36px !important; height: 36px !important; opacity: 0 !important; transition: opacity .2s ease;
}
.p-card:hover .wish, .p-card:focus-within .wish, .p-card .wish.on, .p-card .wish:focus-visible { opacity: 1 !important; }
@media (hover: none) { .p-card .wish { opacity: 1 !important; } }

/* compare: one switch in the toolbar; the per-card boxes appear only while it is on */
.cm-cmp-ready:not(.cm-cmp-on) .cm-cmp-toggle { display: none !important; }
.cm-cmp-switch {
  font: 500 12px/1 Inter, system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase;
  height: 36px; padding: 0 16px; margin-right: 20px; border: 1px solid #111; background: transparent; color: #111; cursor: pointer;
}
.cm-cmp-switch[aria-pressed="true"] { background: #134e3a; border-color: #134e3a; color: #fff; }
.cm-cmp-switch:focus-visible { outline: 2px solid #1e3fa6; outline-offset: 2px; }
.ls-end { display: flex; align-items: center; }

/* ================================================================
   One casing system: every call to act in small capitals; headings in sentence case
   ================================================================ */
.pill, a.pill, button.pill, .pill.gc-lower, .arrow-link, .arrow-link.gc-lower,
.ih-flag-go, .ih-proj-go, .ih-plate-go, .ls-note-a, .cm-btn, .cm-tile-a, .fv-viewing,
.news-form button, .back-top, .filter-toggle, .ls-more, .cm-link, .gc-more-btn, .announce a {
  text-transform: uppercase !important; letter-spacing: .14em !important; font-size: 12px !important; font-weight: 500 !important;
}
.pill::first-letter, .arrow-link::first-letter, .back-top::first-letter { text-transform: uppercase; }

/* every card keeps the note's line, so names and prices align across a row */
.p-card .meta .p-note:empty::before { content: "\00a0"; }
.p-card .meta .p-note + h3 { margin-top: 0 !important; }
/* the studio plate's small portrait: a plain square, no torn edge, no tilt */
html:not([data-page="gateway"]) #page .ih-plate-art,
html:not([data-page="gateway"]) #page .ih-plate-art img {
  -webkit-clip-path: none !important; clip-path: none !important; -webkit-mask-image: none !important; mask-image: none !important;
  transform: none !important; border-radius: 0 !important;
}
/* the product photograph stands alone: no frond, star or backing sheet around it */
html[data-page="product"] #page .pd-cut,
html[data-page="product"] #page .pd-backsheet { display: none !important; }

/* the sort and filter rail sits above the product cards, so an open menu is never covered
   by the card art and its choices can be clicked */
.ls-rail { z-index: 60 !important; }
.ds.open { z-index: 80 !important; }
.ds.open .ds-list { z-index: 81 !important; }
/* the sort label's cut-paper clip also clipped its open menu, so the choices could not be
   clicked: the sort is never clipped */
html[data-page="listing"] .ls-rail .ls-sort { -webkit-clip-path: none !important; clip-path: none !important; }

/* store locator: each city's own photograph, credited quietly on the plate */
.st-plate.st-city { position: relative; }
.st-plate.st-city img { width: 100%; height: 100%; object-fit: cover; display: block; }
.st-plate .st-credit { position: absolute; right: 6px; bottom: 6px; max-width: calc(100% - 12px); font: 400 10px/1.3 Inter, system-ui, sans-serif; color: #fff; background: rgba(0, 0, 0, .55); padding: 3px 6px; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-plate .st-credit:hover { text-decoration: underline; }
/* the credit sits at the top of the plate, clear of its cut edge */
html[data-page="stores"] .st-plate .st-credit { top: 6px; bottom: auto; left: 6px; right: auto; }
/* the map card sits on white paper: its outline button reads in ink, and the two actions wrap */
html[data-page="stores"] #mapCard .pill.outline { background: transparent !important; color: #111 !important; -webkit-text-fill-color: #111 !important; border-color: #111 !important; }
html[data-page="stores"] #mapCard .pill.outline:hover { background: #111 !important; color: #fff !important; -webkit-text-fill-color: #fff !important; }
html[data-page="stores"] #mapCard > div[style*="display:flex"] { flex-wrap: wrap; }
/* map controls sit top left, never under the city card */
html[data-page="stores"] .st-ctrl { top: 20px !important; bottom: auto !important; left: 20px !important; right: auto !important; }

/* configuration cards: the Quick Ship tag sits on its own line above the title, never over it */
html[data-page="product"] #configList .config-card .qs { position: static !important; display: inline-block !important; margin: 0 0 8px !important; top: auto !important; left: auto !important; transform: none !important; }
/* the city photo's credit: a whisper in the corner, full credits live on the Image credits page */
html[data-page="stores"] .st-plate .st-credit { top: auto !important; bottom: 4px !important; right: 6px !important; left: auto !important; background: none !important; padding: 0 !important; font-size: 9px !important; color: rgba(255, 255, 255, .55) !important; text-shadow: 0 0 3px rgba(0, 0, 0, .5); letter-spacing: .02em; }
html[data-page="stores"] .st-plate .st-credit:hover { color: #fff !important; }
/* image credits page */
.legal-credits { max-width: 860px; padding-top: clamp(48px, 6vw, 88px) !important; padding-bottom: clamp(56px, 7vw, 96px) !important; }
.legal-credits h1 { font-size: clamp(36px, 4vw, 56px); margin: 10px 0 16px; text-transform: none; }
.legal-credits .lede { max-width: 60ch; color: #333; margin-bottom: 36px; }
.lc-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid rgba(0, 0, 0, .14); }
.lc-list li { display: grid; grid-template-columns: 180px 1fr; gap: 4px 24px; padding: 14px 0; border-bottom: 1px solid rgba(0, 0, 0, .1); font-size: 14px; line-height: 1.5; color: #333; }
.lc-list li::before { content: none !important; }
.lc-list li b { grid-row: span 2; font-weight: 600; color: #111; }
.lc-list a { color: #134e3a; }
@media (max-width: 600px) { .lc-list li { grid-template-columns: 1fr; } .lc-list li b { grid-row: auto; } }
