/* Product destinations and collection browsing. Loaded after the homepage styles. */
#detail-dialog {
  --product-paper: #f2f0e9;
  --product-ink: #282e27;
  --product-line: #d5d6cd;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--product-paper);
  color: var(--product-ink);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
#detail-dialog[open] { animation: product-enter 500ms cubic-bezier(.16,1,.3,1) both; }
#detail-dialog::backdrop { background: #f2f0e9; backdrop-filter: none; }
#detail-dialog > .detail-close { display: none; }
#detail-content { min-width: 0; }
#detail-dialog button:focus-visible { outline: 2px solid #344e37; outline-offset: 5px; }
.product-header {
  position: sticky;
  top: 0;
  z-index: 8;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  min-height: 92px;
  padding: 15px 38px;
  background: var(--product-paper);
  border-bottom: 1px solid var(--product-line);
}
.product-brand { width: max-content; padding: 10px 0; font-size: 29px; letter-spacing: -.085em; line-height: 1; }
.product-breadcrumb { display: flex; gap: 18px; align-items: center; font-size: 11px; letter-spacing: .015em; }
.product-breadcrumb > span { color: #999c92; }
.product-close { justify-self: end; display: flex; align-items: center; gap: 20px; min-height: 48px; padding: 0; border-radius: 999px; font-size: 11px; }
.product-close i { display: grid; place-items: center; width: 47px; height: 47px; border: 1px solid #bdc1b5; border-radius: 50%; font-style: normal; font-size: 29px; line-height: 1; transition: background 180ms, transform 280ms; }
.product-close:hover i { background: #e2e4da; transform: rotate(90deg); }
#detail-dialog .detail-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); align-items: start; min-height: 0; }
#detail-dialog .detail-gallery { min-width: 0; padding: 28px 28px 42px; display: block; background: transparent; border-right: 1px solid var(--product-line); }
#detail-dialog .detail-stage { position: relative; display: block; width: 100%; height: clamp(470px, 42vw, calc(100svh - 165px)); min-height: 470px; max-height: 850px; aspect-ratio: auto; margin: 0; border-radius: 0; background: #e6e7de; overflow: hidden; touch-action: pan-y; }
#detail-dialog .detail-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center; padding: 0; mix-blend-mode: normal; animation: none; }
#detail-dialog .detail-image.is-leaving { pointer-events: none; }
#detail-dialog .detail-gallery.is-object .detail-stage { background: #e9e9e0; }
#detail-dialog .detail-gallery.is-object .detail-image { inset: 0; width: min(70%, 420px); height: 86%; margin: auto; padding: 0; object-fit: contain; mix-blend-mode: multiply; }
#detail-dialog .detail-gallery-bar { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 18px 0 22px; font-size: 11px; }
.detail-gallery-label { line-height: 1.5; }
.detail-gallery-label > span { padding: 0 7px; color: #969b8d; }
.detail-gallery-navigation { display: flex; align-items: center; gap: 26px; flex-shrink: 0; }
#detail-dialog .detail-gallery-count { font-variant-numeric: tabular-nums; letter-spacing: .12em; font-size: 10px; white-space: nowrap; }
#detail-dialog .detail-gallery-arrows { display: flex; gap: 8px; }
#detail-dialog .detail-gallery-arrows button { display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid #b8bdaf; border-radius: 50%; font-size: 22px; padding: 0; transition: background 180ms; }
#detail-dialog .detail-gallery-arrows button:hover { background: #dce1d3; }
#detail-dialog .detail-thumbnails { display: flex; gap: 14px; padding: 5px 2px 12px; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; scrollbar-color: #a4ad97 transparent; }
#detail-dialog .detail-thumbnails button { position: relative; display: block; flex: 0 0 184px; width: 184px; height: 122px; padding: 0; opacity: .6; border: 0; border-radius: 0; outline-offset: 4px; background: #e5e6db; overflow: visible; transition: opacity 180ms; }
#detail-dialog .detail-thumbnails button::after { content: ''; position: absolute; inset: 0; border: 1px solid transparent; pointer-events: none; }
#detail-dialog .detail-thumbnails button[aria-pressed="true"] { opacity: 1; }
#detail-dialog .detail-thumbnails button[aria-pressed="true"]::after { border-color: #344a35; outline: 2px solid var(--product-paper); outline-offset: -4px; }
#detail-dialog .detail-thumbnails button:hover { opacity: 1; }
#detail-dialog .detail-thumbnails img { width: 100%; height: 100%; object-fit: contain; }
#detail-dialog .detail-thumbnails button > span { position: absolute; bottom: 7px; left: 8px; padding: 4px 5px; background: #f2f0e9ed; color: #282e27; font-size: 9px; line-height: 1; }
#detail-dialog .detail-copy { min-width: 0; padding: clamp(42px, 5.2vw, 94px) clamp(25px, 3.3vw, 64px) 54px; align-self: start; }
#detail-dialog .detail-eyebrow { color: #606956; font-size: 10px; text-transform: uppercase; letter-spacing: .14em; line-height: 1.5; }
#detail-dialog .detail-copy h2 { font-size: clamp(68px, 6.2vw, 104px); font-weight: 400; line-height: .93; letter-spacing: -.072em; margin: 27px 0 22px; overflow-wrap: anywhere; }
#detail-dialog .detail-copy h2.is-long-name { font-size: clamp(45px, 4.4vw, 76px); line-height: .98; letter-spacing: -.055em; }
#detail-dialog .detail-kind { margin: 0 0 34px; font-size: 13px; line-height: 1.4; }
#detail-dialog .detail-description { max-width: 340px; margin: 0 0 34px; font-size: 14px; line-height: 1.7; color: #62685c; }
#detail-dialog .detail-enquire { display: flex; align-items: center; justify-content: space-between; gap: 20px; width: 100%; min-height: 62px; padding: 19px 23px; border: 1px solid #344c36; border-radius: 0; background: #344c36; color: #fff; font-size: 12px; line-height: 1.45; text-align: left; transition: background 180ms; }
#detail-dialog .detail-enquire > span { flex-shrink: 0; font-size: 22px; }
#detail-dialog .detail-enquire:hover { background: #233c29; }
#detail-dialog .detail-note { margin: 13px 0 0; font-size: 10px; line-height: 1.5; color: #777e6e; }
.product-specification { margin-top: 48px; }
.product-specification > h3 { font-size: 11px; font-weight: 400; margin: 0 0 17px; }
#detail-dialog .detail-specs { display: block; margin: 0; padding: 0; border-top: 1px solid var(--product-line); }
#detail-dialog .detail-spec { display: grid; grid-template-columns: 1fr 1.35fr; gap: 16px; padding: 17px 0; border-bottom: 1px solid var(--product-line); }
#detail-dialog .detail-spec dt { margin: 0; color: #747b6b; font-size: 10px; line-height: 1.65; }
#detail-dialog .detail-spec dd { margin: 0; font-size: 11px; line-height: 1.65; overflow-wrap: anywhere; }
#detail-dialog .detail-related { padding: 72px 40px 88px; margin: 0; border-top: 1px solid var(--product-line); background: #e6e7dd; }
.detail-related-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; margin-bottom: 38px; }
.detail-related-heading p { font-size: 10px; text-transform: uppercase; letter-spacing: .14em; margin-bottom: 20px; color: #6a7460; }
#detail-dialog .detail-related h3 { font-size: clamp(40px, 4.5vw, 70px); line-height: 1; letter-spacing: -.055em; margin: 0; }
.detail-related-heading > button { display: flex; gap: 30px; align-items: center; flex-shrink: 0; padding: 15px 0; font-size: 11px; border-bottom: 1px solid #7b8770; }
.detail-related-heading > button > span { font-size: 22px; }
#detail-dialog .detail-related-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 25px; overflow: visible; }
#detail-dialog .detail-related-card { width: auto; min-width: 0; margin: 0; padding: 0; }
.detail-related-card > button { width: 100%; display: block; padding: 0; text-align: left; }
#detail-dialog .detail-related-image { display: block; position: relative; width: 100%; aspect-ratio: 1.4; background: #eef0e5; overflow: hidden; }
#detail-dialog .detail-related-card img { width: 100%; height: 100%; margin: 0; border-radius: 0; object-fit: contain; transition: transform 600ms cubic-bezier(.16,1,.3,1); }
#detail-dialog .detail-related-card.is-object img { padding: 7%; mix-blend-mode: multiply; }
.detail-related-card button:hover img { transform: scale(1.025); }
.detail-related-image > i { position: absolute; right: 15px; bottom: 15px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #f4f3ecef; font-size: 20px; font-style: normal; }
#detail-dialog .detail-related-caption { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 20px 0 5px; }
#detail-dialog .detail-related-caption > span { display: block; font-size: 26px; line-height: 1.08; letter-spacing: -.035em; overflow-wrap: anywhere; }
.detail-related-caption > small { flex-shrink: 0; font-size: 10px; line-height: 1.5; }
#detail-dialog .product-footer { display: flex; justify-content: space-between; align-items: center; gap: 30px; padding: 35px 40px; margin: 0; background: var(--product-paper); }
.product-footer > span { font-size: 32px; letter-spacing: -.08em; line-height: 1; }
.product-footer > button { min-height: 44px; font-size: 11px; }
.product-footer > button > span { margin-left: 22px; font-size: 20px; }
#enquiry-dialog { box-shadow: 0 25px 100px #19281930; }
#enquiry-dialog input, #enquiry-dialog textarea { font-size: 16px; }
@keyframes product-enter { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
@media (min-width: 1750px) {
  #detail-dialog .detail-gallery { padding: 40px; }
  #detail-dialog .detail-stage { max-height: 1000px; }
}
@media (max-width: 1100px) {
  .product-header { min-height: 78px; padding: 12px 25px; }
  .product-breadcrumb { gap: 12px; font-size: 10px; }
  .product-close > span { display: none; }
  #detail-dialog .detail-layout { grid-template-columns: minmax(0, 1.65fr) minmax(295px, 1fr); }
  #detail-dialog .detail-gallery { padding: 22px 20px 30px; }
  #detail-dialog .detail-stage { height: 590px; min-height: 420px; max-height: 70svh; }
  #detail-dialog .detail-copy { padding: 46px 26px; }
  #detail-dialog .detail-copy h2 { font-size: 64px; }
  #detail-dialog .detail-copy h2.is-long-name { font-size: 45px; }
  #detail-dialog .detail-gallery-label { max-width: 130px; }
  .detail-gallery-navigation { gap: 15px; }
  #detail-dialog .detail-thumbnails button { flex-basis: 150px; width: 150px; height: 100px; }
  #detail-dialog .detail-related { padding: 60px 25px; }
  #detail-dialog .detail-related-grid { gap: 18px; }
  #detail-dialog .detail-related-caption { display: block; }
  #detail-dialog .detail-related-caption > span { font-size: 25px; }
  .detail-related-caption > small { display: block; margin-top: 8px; }
}
@media (max-width: 900px) {
  #detail-dialog { scrollbar-gutter: auto; }
  .product-header { grid-template-columns: 1fr auto; gap: 12px; min-height: 72px; padding: 10px 20px; }
  .product-brand { font-size: 25px; }
  .product-breadcrumb { display: none; }
  .product-close { min-height: 46px; }
  .product-close i { width: 44px; height: 44px; font-size: 27px; }
  #detail-dialog .detail-layout { display: block; }
  #detail-dialog .detail-gallery { padding: 16px 16px 20px; border-right: 0; border-bottom: 1px solid var(--product-line); }
  #detail-dialog .detail-stage { height: clamp(290px, 83vw, 550px); min-height: 0; max-height: none; aspect-ratio: auto; }
  #detail-dialog .detail-gallery.is-object .detail-stage { height: clamp(340px, 100vw, 600px); }
  #detail-dialog .detail-gallery.is-object .detail-image { width: min(80%, 330px); height: 86%; padding: 0; }
  #detail-dialog .detail-gallery-bar { padding: 14px 0; gap: 10px; }
  #detail-dialog .detail-gallery-label { max-width: none; font-size: 10px; line-height: 1.5; }
  .detail-gallery-label > span { padding: 0 3px; }
  .detail-gallery-navigation { gap: 14px; }
  #detail-dialog .detail-gallery-count { font-size: 9px; letter-spacing: .08em; }
  #detail-dialog .detail-gallery-arrows { gap: 6px; }
  #detail-dialog .detail-gallery-arrows button { width: 42px; height: 42px; font-size: 21px; }
  #detail-dialog .detail-thumbnails { gap: 10px; padding: 5px 2px 6px; }
  #detail-dialog .detail-thumbnails button { flex-basis: 126px; width: 126px; height: 85px; }
  #detail-dialog .detail-copy { padding: 40px 25px 50px; }
  #detail-dialog .detail-eyebrow { font-size: 9px; }
  #detail-dialog .detail-copy h2 { font-size: clamp(54px, 16vw, 90px); margin: 22px 0 17px; letter-spacing: -.065em; }
  #detail-dialog .detail-copy h2.is-long-name { font-size: clamp(45px, 11vw, 67px); line-height: .98; }
  #detail-dialog .detail-kind { margin: 0 0 24px; font-size: 13px; }
  #detail-dialog .detail-description { max-width: 460px; margin-bottom: 30px; font-size: 14px; line-height: 1.65; }
  #detail-dialog .detail-enquire { min-height: 60px; font-size: 12px; }
  .product-specification { margin-top: 36px; }
  #detail-dialog .detail-spec { grid-template-columns: 1fr 1.5fr; padding: 16px 0; }
  #detail-dialog .detail-spec dt { font-size: 11px; }
  #detail-dialog .detail-spec dd { font-size: 12px; }
  #detail-dialog .detail-related { padding: 45px 20px 50px; }
  .detail-related-heading { display: block; margin-bottom: 28px; }
  .detail-related-heading p { font-size: 9px; margin-bottom: 15px; }
  #detail-dialog .detail-related h3 { font-size: 43px; }
  .detail-related-heading > button { margin-top: 20px; font-size: 11px; }
  #detail-dialog .detail-related-grid { display: grid; grid-template-columns: 1fr; gap: 35px; }
  #detail-dialog .detail-related-image { aspect-ratio: 1.42; }
  #detail-dialog .detail-related-caption { display: flex; gap: 18px; padding-top: 17px; }
  #detail-dialog .detail-related-caption > span { font-size: 27px; }
  .detail-related-caption > small { font-size: 10px; margin: 0; }
  #detail-dialog .product-footer { padding: 24px 20px; }
  .product-footer > span { font-size: 27px; }
  .product-footer > button { font-size: 10px; }
}
@media (max-width: 370px) {
  #detail-dialog .detail-gallery-label { max-width: 110px; }
  .detail-gallery-navigation { gap: 9px; }
  #detail-dialog .detail-gallery-arrows { gap: 4px; }
  #detail-dialog .detail-copy { padding-left: 21px; padding-right: 21px; }
  #detail-dialog .detail-related-caption { display: block; }
  .detail-related-caption > small { margin-top: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  body:not([data-motion="full"]) #detail-dialog { animation: none; }
  body:not([data-motion="full"]) #detail-dialog *, body:not([data-motion="full"]) #detail-dialog *::after { animation: none; transition: none; scroll-behavior: auto; }
}
body[data-motion="reduced"] #detail-dialog, body[data-motion="reduced"] #detail-dialog * { animation: none; transition: none; scroll-behavior: auto; }