/*
 * Aftab Gallery - product page (showroom layout)
 * Everything is scoped under .agp (the page) or carries the agp- prefix, so no other page is touched.
 * Side gaps match the other Aftab pages: 90% wide, up to 1668 px.
 */

/* ================= Tokens ================= */
.agp,
.agp-lb,
.agp-pop {
  --agp-ink: #595959;
  --agp-ink-strong: #262626;
  --agp-ink-soft: #666;
  --agp-line: #d8d8d8;
  --agp-line-soft: #e7e7e7;
  --agp-black: #141414;
  --agp-accent: #7a5c37;
  --agp-paper: #fff;
  --agp-serif: agp-cormorant, ag-cormorant, cormorant, "Cormorant", "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --agp-sans: "Jost", "Helvetica Neue", Arial, sans-serif;
  --agp-r: 2px;
}

.agp {
  --agp-pw: 1668px;
  --agp-hd: 64px;
  --agp-vh: 100vh;
  display: block;
  color: var(--agp-ink);
  font-family: var(--agp-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
@supports (height: 100svh) {
  .agp { --agp-vh: 100svh; }
}
.agp.agp--wide { --agp-pw: clamp(1668px, 58vw, 2400px); }

/* Low-specificity resets (:where adds no weight), so the classes below always win. */
:where(.agp) *,
:where(.agp) *::before,
:where(.agp) *::after { box-sizing: border-box; }
:where(.agp) img { display: block; max-width: 100%; height: auto; }
:where(.agp) :is(h1, h2, h3, h4, p, ul, ol, dl, dd, figure, table) { margin: 0; }
:where(.agp) :is(ul, ol) { padding: 0; list-style: none; }
:where(.agp) a { color: inherit; }
:where(.agp) button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; border-radius: 0; }
.agp :focus-visible,
.agp-lb :focus-visible { outline: 2px solid var(--agp-accent); outline-offset: 3px; }
.agp [id^="agp-"] { scroll-margin-top: calc(var(--agp-hd) + 70px); }
.agp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.agp-wrap { width: 90%; max-width: var(--agp-pw); margin-inline: auto; padding-inline: 0; }
.agp-eyebrow { font: 500 11px/1.4 var(--agp-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--agp-ink-soft); }
.agp-prose p { text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
.agp-prose p + p { margin-top: 1em; }
.agp-prose a, .agp-link { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: rgba(0, 0, 0, .35); }
.agp-prose a:hover, .agp-link:hover { text-decoration-color: currentColor; color: var(--agp-ink-strong); }
.agp-link-caps { font: 500 11.5px/1.2 var(--agp-sans); letter-spacing: .16em; text-transform: uppercase; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 3px; color: var(--agp-ink-strong); display: inline-block; cursor: pointer; }
.agp-link-caps:hover { color: var(--agp-accent); }

/* ================= Buttons ================= */
.agp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px; font: 500 12.5px/1 var(--agp-sans); letter-spacing: .16em; text-transform: uppercase; text-decoration: none; border: 1px solid var(--agp-black); border-radius: var(--agp-r); transition: background .2s, color .2s, border-color .2s; cursor: pointer; text-align: center; }
.agp-btn--solid { background: var(--agp-black); color: #fff; }
.agp-btn--solid:hover { background: #3a3a3a; border-color: #3a3a3a; }
.agp-btn--line { background: transparent; color: var(--agp-black); }
.agp-btn--line:hover { background: var(--agp-black); color: #fff; }
.agp-btn--block { display: flex; width: 100%; }
.agp-wish::before { content: ""; width: 17px; height: 17px; flex: none; background: currentColor; -webkit-mask: var(--agp-heart) center/contain no-repeat; mask: var(--agp-heart) center/contain no-repeat; }
.agp-wish { --agp-heart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M12 20s-7-4.4-7-10a4 4 0 017-2.6A4 4 0 0119 10c0 5.6-7 10-7 10z'/%3E%3C/svg%3E"); }
.agp-wish.in-wishlist { --agp-heart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 20s-7-4.4-7-10a4 4 0 017-2.6A4 4 0 0119 10c0 5.6-7 10-7 10z' fill='black' stroke='black' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E"); }

/* ================= Breadcrumb ================= */
.agp-crumbs { padding: 28px 0 30px; }
.agp-crumbs ol { display: flex; flex-wrap: wrap; gap: 2px 0; font-size: 12.5px; color: var(--agp-ink-soft); letter-spacing: .02em; }
.agp-crumbs li + li::before { content: "/"; margin: 0 9px; color: #b3b3b3; }
.agp-crumbs a { text-decoration: none; }
.agp-crumbs a:hover { color: #000; text-decoration: underline; }
.agp-crumbs [aria-current] { color: var(--agp-ink-strong); }

/* ================= Top: photos + product information ================= */
.agp-sh { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 430px); column-gap: clamp(40px, 6vw, 104px); align-items: start; padding-bottom: clamp(72px, 8vw, 128px); }
.agp-sh--solo { grid-template-columns: minmax(0, 640px); justify-content: center; }

/* photos */
.agp-g3 { position: sticky; top: calc(var(--agp-hd) + 24px); }
.agp-g3-stage { position: relative; aspect-ratio: 5/4; background: #e5e5e5; overflow: hidden; }
.agp-car-track { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.agp-car-track::-webkit-scrollbar { display: none; }
.agp-car-slide { flex: 0 0 100%; scroll-snap-align: start; position: relative; cursor: zoom-in; background: #e5e5e5; }
.agp-car-slide img { width: 100%; height: 100%; object-fit: cover; }
.agp-car-slide.agp-fit img { object-fit: contain; }
.agp-car-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--agp-ink-strong); display: grid; place-items: center; box-shadow: 0 2px 10px rgba(0, 0, 0, .12); opacity: 0; transition: opacity .2s, background .2s; z-index: 2; }
.agp-car-btn svg { width: 18px; height: 18px; }
.agp-car-btn:hover { background: #fff; }
.agp-car-prev { left: 14px; }
.agp-car-next { right: 14px; }
.agp-g3-stage:hover .agp-car-btn,
.agp-car-btn:focus-visible { opacity: 1; }
@media (hover: none) { .agp-car-btn { opacity: .9; width: 38px; height: 38px; } }
.agp-car-btn[disabled] { opacity: 0 !important; pointer-events: none; }
/* zoom button: a small round icon; on a computer the word "Enlarge" shows while the mouse is over it */
.agp-gs-zoom { position: absolute; right: 14px; bottom: 14px; z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border-radius: 20px; background: rgba(255, 255, 255, .92); box-shadow: 0 2px 10px rgba(0, 0, 0, .12); font: 500 11px/1 var(--agp-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--agp-ink-strong); cursor: pointer; }
.agp-gs-zoom svg { width: 18px; height: 18px; flex: none; }
.agp-gs-zt { display: none; }
.agp-gs-zoom:hover { background: #fff; }
@media (hover: hover) and (pointer: fine) {
  .agp-gs-zoom:hover, .agp-gs-zoom:focus-visible { width: auto; gap: 8px; padding: 0 16px 0 13px; }
  .agp-gs-zoom:hover .agp-gs-zt, .agp-gs-zoom:focus-visible .agp-gs-zt { display: inline; }
}
@media (max-width: 700px) { .agp-gs-zoom { right: 10px; bottom: 10px; width: 34px; height: 34px; border-radius: 17px; } .agp-gs-zoom svg { width: 16px; height: 16px; } }
.agp-g3-thw { position: relative; margin-top: 12px; }
.agp-g3-th { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; position: relative; }
.agp-g3-th::-webkit-scrollbar { display: none; }
.agp-car-thumb { position: relative; display: block; padding: 0; overflow: hidden; background: #ddd; border: 0; opacity: .62; transition: opacity .2s; flex: 0 0 calc((100% - 36px) / 4); aspect-ratio: 5/4; scroll-snap-align: start; }
.agp-car-thumb img { width: 100%; height: 100%; object-fit: cover; }
.agp-car-thumb:hover { opacity: .9; }
.agp-car-thumb[aria-current="true"] { opacity: 1; }
.agp-car-thumb[aria-current="true"]::after { content: ""; position: absolute; inset: 0; border: 2px solid var(--agp-black); pointer-events: none; }
.agp-g3.agp-many .agp-car-thumb { flex-basis: calc((100% - 48px) / 4.5); }
.agp-g3-ar { display: none; position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 255, 255, .95); box-shadow: 0 2px 10px rgba(0, 0, 0, .18); place-items: center; color: var(--agp-ink-strong); }
.agp-g3-ar svg { width: 16px; height: 16px; }
.agp-g3-ar-p { left: -12px; }
.agp-g3-ar-n { right: -12px; }
.agp-g3-ar[disabled] { opacity: 0; pointer-events: none; }
@media (hover: hover) and (pointer: fine) { .agp-g3.agp-many .agp-g3-ar { display: grid; } }
.agp-g3.agp-one .agp-car-btn { display: none; }
.agp-g3.agp-one .agp-car-slide { cursor: zoom-in; }

/* information column */
.agp-by { font: 500 12px/1.4 var(--agp-sans); letter-spacing: .18em; text-transform: uppercase; color: var(--agp-ink-soft); }
.agp-by a { color: var(--agp-ink-strong); text-decoration: none; border-bottom: 1px solid rgba(0, 0, 0, .3); padding-bottom: 2px; }
.agp-by a:hover { color: var(--agp-accent); border-color: var(--agp-accent); }
.agp-bx h1 { font: 500 clamp(28px, 2.5vw, 36px)/1.12 var(--agp-serif); letter-spacing: -.005em; color: var(--agp-ink-strong); margin-top: 12px; }
.agp-dl { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 14px; font-size: 14.5px; color: var(--agp-ink-strong); font-variant-numeric: tabular-nums; }
.agp-dl b { font-weight: 500; color: var(--agp-ink-soft); font-size: 11px; letter-spacing: .1em; }
.agp-dl i { font-style: normal; color: #aaa; margin: 0 2px; }
.agp-dl-in { color: var(--agp-ink-soft); }
.agp-bx > .agp-cta-top + .agp-dl { margin-top: 16px; }
.agp-price { margin-top: 20px; font: 500 22px/1.2 var(--agp-serif); color: var(--agp-ink-strong); letter-spacing: .02em; }
.agp-story { margin-top: 26px; font-size: 15.5px; line-height: 1.75; }
.agp-cta-top ~ .agp-story { margin-top: 28px; }
.agp-cta { margin-top: 28px; display: grid; gap: 12px; }
.agp-cta-top { margin-top: 22px; }
.agp-cta-q { text-align: center; margin-top: 8px; }
.agp-fin-w { margin-top: 34px; }
.agp-fin { display: flex; flex-wrap: nowrap; align-items: flex-start; gap: 0 clamp(18px, 2.6vw, 28px); margin-top: 16px; }
.agp-fin > div { min-width: 0; }
.agp-fin dt { font-size: 13px; color: var(--agp-ink-soft); white-space: nowrap; }
.agp-fin dd { margin: 10px 0 0; display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; }
/* all selected thumbnails stay on one line; they get a little smaller when there are 4 or 5 */
.agp-fin .agp-sw { --s: 64px; flex: 0 1 var(--s); min-width: 0; }
.agp-fin--n4 .agp-sw { --s: 58px; }
.agp-fin--n5 .agp-sw { --s: 52px; }
.agp-fin-all { margin-top: 18px; font-size: 13.5px; }
.agp-trade { margin-top: 26px; text-align: center; font-size: 13.5px; color: var(--agp-ink-soft); }
.agp-svc { margin-top: 30px; border-top: 1px solid var(--agp-line); }
.agp-svc li { display: flex; gap: 16px; align-items: flex-start; padding: 15px 0; border-bottom: 1px solid var(--agp-line); }
.agp-svc svg { width: 24px; height: 24px; flex: none; color: var(--agp-accent); margin-top: 2px; }
.agp-svc span { font-size: 13.5px; line-height: 1.5; color: var(--agp-ink-soft); }
.agp-svc b { display: block; font-weight: 500; font-size: 14.5px; color: var(--agp-ink-strong); }

/* ================= Swatches + pop-up ================= */
.agp-sw { position: relative; display: block; flex: none; width: var(--s, 56px); aspect-ratio: 1; background: #d9d9d9; overflow: hidden; border: 1px solid rgba(0, 0, 0, .14); cursor: pointer; padding: 0; transition: transform .2s, box-shadow .2s; }
.agp-sw img { width: 100%; height: 100%; object-fit: cover; }
.agp-sw:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(0, 0, 0, .16); }
.agp-pop { position: fixed; z-index: 90; width: 250px; background: #fff; border: 1px solid var(--agp-line); box-shadow: 0 18px 44px rgba(0, 0, 0, .18); opacity: 0; pointer-events: none; visibility: hidden; transform: translateY(5px); transition: opacity .16s, transform .16s, visibility 0s .16s; color: var(--agp-ink); font-family: var(--agp-sans); }
.agp-pop.on { opacity: 1; pointer-events: auto; visibility: visible; transform: none; transition-delay: 0s; }
.agp-pop img { display: block; width: 100%; aspect-ratio: 1.35; object-fit: cover; }
.agp-pop-b { padding: 12px 14px 14px; }
.agp-pop-f { font: 500 10.5px/1.3 var(--agp-sans); letter-spacing: .18em; text-transform: uppercase; color: var(--agp-ink-soft); }
.agp-pop h4 { font: 500 22px/1.15 var(--agp-serif); color: var(--agp-ink-strong); margin: 3px 0 0; }
.agp-pop p { font-size: 12.5px; line-height: 1.6; text-align: justify; hyphens: auto; margin: 8px 0 0; padding-top: 8px; border-top: 1px solid var(--agp-line-soft); font-weight: 400; white-space: pre-line; }

/* ================= Room renders ================= */
.agp-sec { padding-block: clamp(64px, 8vw, 128px); }
.agp-sec--rooms { padding-top: 0; }
.agp-shd { margin-bottom: clamp(28px, 3.6vw, 52px); }
.agp-shd--c { text-align: center; }
.agp-shd h2, .agp-sec-l h2 { font: 400 clamp(26px, 2.4vw, 34px)/1.15 var(--agp-serif); color: var(--agp-ink-strong); margin-top: 10px; }
.agp-shd-sub { margin-top: 14px; font-size: 15px; line-height: 1.7; color: var(--agp-ink-soft); max-width: 60ch; }
.agp-shd--c .agp-shd-sub { margin-inline: auto; }

/* ---- Lifestyle rows: each row has its own layout; rows sit one above the other ---- */
.agp-lrow + .agp-lrow { margin-top: clamp(40px, 5vw, 80px); }
.agp-lrow-h { margin-bottom: clamp(16px, 2vw, 28px); }
.agp-lrow-t { font: 400 clamp(22px, 2vw, 30px)/1.2 var(--agp-serif); color: var(--agp-ink-strong); }
.agp-lrow-d { margin-top: 8px; font-size: 15px; line-height: 1.7; color: var(--agp-ink-soft); max-width: 64ch; }
.agp-lg { display: grid; gap: clamp(10px, 1.4vw, 20px); }
.agp-lc { position: relative; overflow: hidden; background: #e9e7e3; cursor: zoom-in; margin: 0; min-width: 0; }
.agp-lc img { display: block; width: 100%; height: auto; }
.agp-lc--v { cursor: auto; background: #111; }
.agp-vid { position: relative; aspect-ratio: 16/9; }
.agp-vid iframe, .agp-vid video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #111; }
/* every shaped layout fills its frames (the frame decides the shape, the picture is centred in it) */
.agp-lg:not(.agp-lg--full) .agp-lc img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.agp-lg:not(.agp-lg--full) .agp-lc--v .agp-vid { position: absolute; inset: 0; aspect-ratio: auto; }
.agp-lg--full { grid-template-columns: minmax(0, 1fr); }
.agp-lg--grid { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.agp-lg--grid .agp-lc { aspect-ratio: 4/3; }
.agp-lg--tall_wide { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.agp-lg--tall_wide .agp-lc:first-child { aspect-ratio: 3/4; }
.agp-lg--wide_tall { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.agp-lg--wide_tall .agp-lc:last-child { aspect-ratio: 3/4; }
.agp-lg--twin { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.agp-lg--triple { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.agp-lg--quad { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: min(100%, 1000px); margin-inline: auto; }
.agp-lg--twin .agp-lc, .agp-lg--triple .agp-lc, .agp-lg--quad .agp-lc { aspect-ratio: 3/4; }
.agp-lg--tall_stack { grid-template-columns: minmax(0, 8fr) minmax(0, 9fr); }
.agp-lg--tall_stack .agp-lc:first-child { grid-row: 1 / 3; }
.agp-lg--tall_stack .agp-lc:not(:first-child) { aspect-ratio: 3/2; }
.agp-lg--stack_tall { grid-template-columns: minmax(0, 9fr) minmax(0, 8fr); }
.agp-lg--stack_tall .agp-lc:last-child { grid-column: 2; grid-row: 1 / 3; }
.agp-lg--stack_tall .agp-lc:not(:last-child) { grid-column: 1; aspect-ratio: 3/2; }
.agp-lg--stack_tall .agp-lc:nth-child(2) { grid-row: 2; }
/* a row of only videos: wide frames, side by side */
.agp-lg.agp-lg--vids .agp-lc { aspect-ratio: 16/9; }
.agp-lg--lead_pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.agp-lg--lead_pair .agp-lc:first-child { grid-column: 1 / -1; aspect-ratio: 16/9; }
.agp-lg--lead_pair .agp-lc:not(:first-child) { aspect-ratio: 3/2; }

/* slideshow: one picture at a time, arrows on hover, dots, swipe on a phone */
.agp-ls { position: relative; }
.agp-ls-t { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.agp-ls-t::-webkit-scrollbar { display: none; }
.agp-ls-t .agp-lc { flex: 0 0 100%; scroll-snap-align: start; aspect-ratio: 16/9; }
.agp-ls-t .agp-lc img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.agp-ls-t .agp-lc.is-up img { object-fit: contain; }
.agp-ls-t .agp-lc--v .agp-vid { position: absolute; inset: 0; aspect-ratio: auto; }
.agp-ls-p, .agp-ls-n { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .9); color: var(--agp-ink-strong); display: grid; place-items: center; cursor: pointer; opacity: 0; transition: opacity .2s ease; }
.agp-ls-p { left: 14px; }
.agp-ls-n { right: 14px; }
.agp-ls-p svg, .agp-ls-n svg { width: 20px; height: 20px; }
.agp-ls:hover .agp-ls-p, .agp-ls:hover .agp-ls-n, .agp-ls-p:focus-visible, .agp-ls-n:focus-visible { opacity: 1; }
.agp-ls-p:disabled, .agp-ls-n:disabled { opacity: 0 !important; pointer-events: none; }
.agp-ls-d { position: absolute; left: 0; right: 0; bottom: 6px; display: flex; justify-content: center; pointer-events: none; }
.agp-ls-d button { pointer-events: auto; width: 26px; height: 26px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.agp-ls-d button::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .6); box-shadow: 0 0 0 1px rgba(0, 0, 0, .25); }
.agp-ls-d button[aria-current="true"]::before { background: #fff; }
.agp-film-links { margin-top: 16px; text-align: center; font-size: 14px; }

/* ================= Jump bar ================= */
.agp-jump { position: sticky; top: var(--agp-hd); z-index: 45; background: rgba(255, 255, 255, .96); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border-block: 1px solid var(--agp-line); }
.agp-jump-in { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 56px; }
.agp-jump nav { display: flex; gap: clamp(20px, 3vw, 44px); overflow-x: auto; scrollbar-width: none; white-space: nowrap; }
.agp-jump nav::-webkit-scrollbar { display: none; }
.agp-jump nav a { position: relative; padding: 18px 0; font: 500 12px/1 var(--agp-sans); letter-spacing: .16em; text-transform: uppercase; text-decoration: none; color: var(--agp-ink-soft); }
.agp-jump nav a:hover, .agp-jump nav a.on { color: var(--agp-ink-strong); }
.agp-jump nav a.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--agp-black); }
.agp-jump-cta { min-height: 38px; padding: 0 20px; font-size: 11.5px; flex: none; }

/* ================= Size ================= */
.agp-dm-c { max-width: 1120px; margin-inline: auto; }
.agp-dm { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 32px clamp(32px, 5vw, 80px); align-items: start; }
.agp-dm--solo { grid-template-columns: minmax(0, 900px); justify-content: center; }
.agp-unit { display: inline-flex; border: 1px solid var(--agp-line); background: #fff; margin-bottom: 18px; }
.agp-unit button { padding: 9px 18px; font: 500 11.5px/1 var(--agp-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--agp-ink-soft); }
.agp-unit button[aria-pressed="true"] { background: var(--agp-black); color: #fff; }
.agp-dim { width: 100%; border-collapse: collapse; font-size: 15px; }
.agp-dim th, .agp-dim td { padding: 10px 0; border-bottom: 1px solid var(--agp-line-soft); text-align: left; font-weight: 400; }
.agp-dim thead th { font: 500 11px/1 var(--agp-sans); letter-spacing: .18em; text-transform: uppercase; color: var(--agp-ink-soft); padding-top: 0; }
.agp-dim tbody th { color: var(--agp-ink-strong); }
.agp-dim td, .agp-dim thead th:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; width: 30%; }
.agp-dim tr.agp-gap th, .agp-dim tr.agp-gap td { border-top: 1px solid var(--agp-line); }
.agp-note { font-size: 13px; color: var(--agp-ink-soft); margin-top: 12px; }
.agp-dims-text { font-size: 15px; line-height: 1.8; color: var(--agp-ink-strong); }
.agp-dims-text p + p { margin-top: .9em; }

/* size without photos: the main measures big, the others listed under them */
.agp-dm--solo .agp-unit { display: flex; width: max-content; margin: 0 auto 30px; }
.agp-dt { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); border-block: 1px solid var(--agp-line); background: #fff; }
.agp-dt li { text-align: center; padding: clamp(26px, 3.4vw, 44px) 12px; }
.agp-dt li + li { border-left: 1px solid var(--agp-line-soft); }
.agp-dt-l { display: block; font: 500 11px/1.4 var(--agp-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--agp-ink-soft); }
.agp-dt-v { display: block; margin-top: 12px; white-space: nowrap; }
.agp-dt-v b { font: 400 clamp(46px, 5.4vw, 72px)/1 var(--agp-serif); color: var(--agp-ink-strong); font-variant-numeric: lining-nums; letter-spacing: -.01em; }
/* seating measures: a second, smaller row */
.agp-dt--seat { margin-top: 18px; }
.agp-dt--seat li { padding-block: clamp(18px, 2.2vw, 28px); }
.agp-dt--seat .agp-dt-v b { font-size: clamp(34px, 3.8vw, 50px); }
.agp-dt-v i { font: 500 12px/1 var(--agp-sans); font-style: normal; letter-spacing: .14em; text-transform: uppercase; color: var(--agp-ink-soft); margin-left: 8px; }
.agp-dr { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(32px, 6vw, 96px); margin-top: 30px; }
.agp-dr > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--agp-line-soft); }
.agp-dr dt { color: var(--agp-ink-strong); font-size: 15px; }
.agp-dr dd { margin: 0; font-size: 15px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.agp-dr dd b { font-weight: 400; }
.agp-dr dd i { font-style: normal; color: var(--agp-ink-soft); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; margin-left: 4px; }
.agp-dm--solo .agp-note { text-align: center; margin-top: 22px; }
.agp-dr > div:only-child { grid-column: 1 / -1; width: 100%; max-width: 460px; margin-inline: auto; }
.agp-dm--solo .agp-dims-text { text-align: center; max-width: 640px; margin-inline: auto; }
.agp-dg-ph { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
.agp-dg-ph--1 { grid-template-columns: 1fr; }
.agp-dg-ph--3 .agp-dg-f:first-child { grid-column: 1 / -1; }
.agp-dg-f { position: relative; overflow: hidden; background: #fff; cursor: zoom-in; }
.agp-dg-f img { width: 100%; height: auto; }

/* ================= Finishes ================= */
.agp-fin-s { background: #fff; padding-block: clamp(64px, 8vw, 128px); }
.agp-sec-g { display: grid; grid-template-columns: minmax(150px, 3fr) minmax(0, 9fr); gap: 24px clamp(24px, 4vw, 72px); }
.agp-sec-l .agp-shd-sub { max-width: 30ch; }
.agp-ff + .agp-ff { margin-top: clamp(36px, 4.4vw, 60px); }
.agp-ff-h { font: 500 11px/1.3 var(--agp-sans); letter-spacing: .18em; text-transform: uppercase; color: var(--agp-ink-strong); margin-bottom: 20px; }
.agp-ff-h span { color: var(--agp-ink-soft); margin-left: 6px; letter-spacing: .06em; }
.agp-ff-g { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--ffw, 104px), 1fr)); gap: var(--ffg, 26px 18px); }
.agp-ff-g .agp-sw { --s: 100%; }
@media (min-width: 701px) { .agp-ff-g { grid-template-columns: repeat(13, minmax(0, 1fr)); gap: 8px; } }

/* ================= Details (accordion) ================= */
.agp-acc-c .agp-accs { margin-inline: auto; }
.agp-accs { border-top: 1px solid var(--agp-line); max-width: 760px; }
.agp-acc { border-bottom: 1px solid var(--agp-line); }
.agp-acc-hh { font: inherit; }
.agp-acc-h { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 2px; text-align: left; font: 500 12.5px/1.3 var(--agp-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--agp-ink-strong); }
.agp-acc-h:hover { color: #000; }
.agp-acc-i { position: relative; width: 14px; height: 14px; flex: none; }
.agp-acc-i::before, .agp-acc-i::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; margin-top: -.75px; background: currentColor; transition: transform .3s; }
.agp-acc-i::after { transform: rotate(90deg); }
.agp-acc.is-open .agp-acc-i::after { transform: rotate(0); }
.agp-acc-p { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .38s ease; }
.agp-acc-in { overflow: hidden; min-height: 0; visibility: hidden; transition: visibility 0s .38s; }
.agp-acc.is-open .agp-acc-p { grid-template-rows: 1fr; }
.agp-acc.is-open .agp-acc-in { visibility: visible; transition-delay: 0s; }
.agp-acc-body { padding: 2px 2px 26px; font-size: 15px; line-height: 1.7; text-align: justify; hyphens: auto; }
.agp-acc-body p + p { margin-top: .9em; }
.agp-acc-body strong { font-weight: 500; color: var(--agp-ink-strong); }
.agp-acc-body a { text-decoration: underline; text-underline-offset: 3px; }

/* ================= Studio + collection ================= */
.agp-card { display: block; text-decoration: none; color: inherit; }
.agp-card-img { display: block; overflow: hidden; background: #e4e4e4; aspect-ratio: 5/4; }
.agp-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.agp-card:hover .agp-card-img img { transform: scale(1.035); }
.agp-card-t { display: block; margin-top: 14px; font: 500 24px/1.15 var(--agp-serif); color: var(--agp-ink-strong); }
.agp-card-s { display: block; margin-top: 5px; font: 500 11px/1.4 var(--agp-sans); letter-spacing: .18em; text-transform: uppercase; color: var(--agp-ink-soft); }
.agp-card:hover .agp-card-s { color: var(--agp-accent); }
.agp-stb { background: #fff; }
.agp-stb-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 6vw, 96px); align-items: center; padding-block: clamp(64px, 8vw, 128px); }
.agp-stb-in--solo { grid-template-columns: minmax(0, 760px); justify-content: center; }
.agp-stb-i { aspect-ratio: 4/5; max-height: 600px; overflow: hidden; background: #e4e4e4; }
.agp-stb-i img { width: 100%; height: 100%; object-fit: cover; }
.agp-stb-t h2 { font: 400 clamp(28px, 2.8vw, 40px)/1.1 var(--agp-serif); color: var(--agp-ink-strong); margin: 10px 0 0; }
.agp-stb-t .agp-prose-p { margin: 20px 0 28px; max-width: 50ch; }
.agp-stb-t .agp-prose-p p { text-align: justify; hyphens: auto; }
.agp-stb-t .agp-prose-p p + p { margin-top: 1em; }
.agp-stb-th { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 44px; padding-top: 36px; border-top: 1px solid var(--agp-line); }
.agp-stb-th .agp-card-img { aspect-ratio: 1; }
.agp-studio-n { display: block; margin-top: 10px; font-size: 13px; line-height: 1.3; color: var(--agp-ink-strong); }
.agp-fam { padding-block: clamp(64px, 8vw, 128px); }
.agp-sec-h { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin-bottom: 34px; }
.agp-sec-h h2 { font: 400 clamp(26px, 2.4vw, 34px)/1.15 var(--agp-serif); color: var(--agp-ink-strong); }
.agp-fam-g { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.4vw, 36px); }
.agp-pn { display: flex; justify-content: space-between; gap: 20px; margin-top: clamp(48px, 6vw, 88px); padding-top: 30px; border-top: 1px solid var(--agp-line); }
.agp-pn a { text-decoration: none; display: grid; gap: 4px; }
.agp-pn b { font: 500 22px/1.1 var(--agp-serif); color: var(--agp-ink-strong); }
.agp-pn a:hover b { color: var(--agp-accent); }
.agp-pn-n { text-align: right; margin-left: auto; }

/* ================= Phone quote bar ================= */
.agp-mbar { display: none; }
@media (max-width: 860px) {
  .agp-mbar { display: flex; align-items: center; gap: 14px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; background: #fff; border-top: 1px solid var(--agp-line); padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); transform: translateY(112%); transition: transform .3s ease; }
  .agp-mbar.show { transform: none; }
  .agp-mbar b { flex: 1; min-width: 0; font: 500 20px/1.1 var(--agp-serif); color: var(--agp-ink-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .agp-mbar .agp-btn { min-height: 46px; padding: 0 20px; flex: none; }
}

/* ================= Photo viewer ================= */
dialog.agp-lb { border: 0; padding: 0; background: transparent; max-width: none; max-height: none; width: 100vw; height: 100vh; height: 100dvh; color: #fff; }
dialog.agp-lb::backdrop { background: rgba(15, 15, 15, .94); }
.agp-lb-in { position: relative; width: 100%; height: 100%; display: grid; place-items: center; padding: 56px clamp(12px, 6vw, 90px); }
.agp-lb-in img { max-width: 100%; max-height: calc(100vh - 120px); max-height: calc(100dvh - 120px); width: auto; height: auto; object-fit: contain; }
.agp-lb-x, .agp-lb-p, .agp-lb-n { position: absolute; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: rgba(255, 255, 255, .1); border: 0; cursor: pointer; transition: background .2s; }
.agp-lb-x:hover, .agp-lb-p:hover, .agp-lb-n:hover { background: rgba(255, 255, 255, .22); }
.agp-lb-x { top: 14px; right: 14px; }
.agp-lb-p { left: 14px; top: 50%; margin-top: -24px; }
.agp-lb-n { right: 14px; top: 50%; margin-top: -24px; }
.agp-lb svg { width: 20px; height: 20px; }
.agp-lb-c { position: absolute; bottom: 18px; left: 0; right: 0; text-align: center; font: 400 13px/1.4 var(--agp-sans); letter-spacing: .14em; color: #cfcfcf; }

/* ================= Screen sizes ================= */
/* big screens: the photo never gets taller than the screen, so the thumbnails stay in view */
@media (min-width: 1081px) {
  .agp-sh { --gap: clamp(40px, 6vw, 104px); --gw: max(520px, calc(var(--agp-vh) - 100px)); column-gap: var(--gap); grid-template-columns: minmax(0, 1fr) clamp(430px, calc(100% - var(--gap) - var(--gw)), 600px); }
  .agp-sh--solo { grid-template-columns: minmax(0, 640px); }
  .agp-g3 { max-width: var(--gw); }
}
@media (min-width: 1081px) and (max-height: 620px) { .agp-g3 { position: static; } }

@media (max-width: 1080px) {
  .agp-sh { grid-template-columns: 1fr; row-gap: 44px; }
  .agp-g3 { position: static; max-width: max(min(100%, 440px), calc(var(--agp-vh) - 110px)); margin-inline: auto; width: 100%; }
  .agp-sec-g { grid-template-columns: 1fr; }
  .agp-sec-l .agp-shd-sub { max-width: 60ch; }
  .agp-dm { grid-template-columns: 1fr; }
  .agp-stb-in { grid-template-columns: 1fr; }
  .agp-stb-i { aspect-ratio: 4/3; max-height: none; }
}
@media (max-width: 860px) { .agp-jump-cta { display: none; } }
@media (max-width: 700px) {
  .agp-crumbs { padding: 18px 0 20px; }
  .agp-stb-th { grid-template-columns: repeat(2, 1fr); }
  .agp-fam-g { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px; margin-inline: -5.5556%; padding-inline: 5.5556%; scroll-padding-inline: 5%; scrollbar-width: none; }
  .agp-fam-g::-webkit-scrollbar { display: none; }
  .agp-fam-g li { flex: 0 0 74%; scroll-snap-align: start; }
  .agp-jump nav a { padding: 17px 0; }
  .agp-ff-g { --ffw: 52px; --ffg: 10px; }
  /* lifestyle rows: pictures stack one under the other on a phone; twin and quad stay two across; the slideshow swipes */
  .agp-lg--grid, .agp-lg--tall_wide, .agp-lg--wide_tall, .agp-lg--triple, .agp-lg--tall_stack, .agp-lg--stack_tall, .agp-lg--lead_pair { grid-template-columns: minmax(0, 1fr); grid-auto-flow: row; }
  .agp-lg--grid .agp-lc, .agp-lg--tall_stack .agp-lc:not(:first-child), .agp-lg--stack_tall .agp-lc:not(:last-child), .agp-lg--lead_pair .agp-lc:not(:first-child) { aspect-ratio: 4/3; }
  .agp-lg--lead_pair .agp-lc:first-child { aspect-ratio: 4/3; }
  .agp-lg--tall_wide .agp-lc:first-child, .agp-lg--wide_tall .agp-lc:last-child, .agp-lg--triple .agp-lc, .agp-lg--tall_stack .agp-lc:first-child, .agp-lg--stack_tall .agp-lc:last-child { aspect-ratio: 3/4; }
  .agp-lg--tall_wide .agp-lc:nth-child(2), .agp-lg--wide_tall .agp-lc:nth-child(1) { aspect-ratio: 4/3; }
  .agp-lg--tall_stack .agp-lc:first-child, .agp-lg--stack_tall .agp-lc:last-child { grid-row: auto; grid-column: auto; }
  .agp-lg--stack_tall .agp-lc:not(:last-child) { grid-column: auto; grid-row: auto; }
  .agp-lg--vids { grid-template-columns: minmax(0, 1fr); grid-auto-flow: row; }
  .agp-ls-t .agp-lc { aspect-ratio: 4/3; }
  .agp-ls-p, .agp-ls-n { display: none; }
  .agp-dg-ph { grid-template-columns: 1fr; }
  .agp-dr { grid-template-columns: 1fr; }
  .agp-dt { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); }
  .agp-dt--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .agp-dt--4 li:nth-child(odd) { border-left: 0; }
  .agp-dt--4 li:nth-child(n+3) { border-top: 1px solid var(--agp-line-soft); }
  .agp-fin { gap: 0 18px; }
  .agp-fin .agp-sw { --s: 56px; }
  .agp-fin--n4 .agp-sw { --s: 48px; }
  .agp-fin--n5 .agp-sw { --s: 42px; }
  .agp-dt li { padding-inline: 4px; }
  .agp-dt-v i { margin-left: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .agp-acc-p, .agp-acc-i::after, .agp-car-btn, .agp-pop, .agp-mbar { transition: none; }
  .agp-card-img img { transition: none; }
}
@media print { .agp-jump, .agp-mbar { display: none; } }
