/* Stay Detail page recipes (.dtl-*), linked from Pages/Stays/Detail.cshtml's Styles
   section. Token-consuming only: every normal declaration value resolves through a
   --dvc-* custom property or is a keyword / unitless / percentage value; raw px/length/
   color literals appear ONLY in the --dvc-dtl-* component-local token block below (this
   file's tokenization point). Values ported from the prototype's ProtoDetail +
   ReviewsSection + GalleryModal. */

:root {
  /* --- header --- */
  --dvc-dtl-back-gap: 8px;
  --dvc-dtl-head-gap: 16px;
  --dvc-dtl-title-size: 32px;
  --dvc-dtl-meta-gap: 14px;
  --dvc-dtl-meta-size: 14px;
  --dvc-dtl-meta-loc-gap: 5px;
  --dvc-dtl-actions-gap: 8px;

  /* --- photo mosaic --- */
  --dvc-dtl-mosaic-margin: 18px;
  --dvc-dtl-mosaic-row: 152px;
  --dvc-dtl-mosaic-gap: 10px;
  --dvc-dtl-more-inset: 12px;
  --dvc-dtl-more-pad-block: 7px;
  --dvc-dtl-more-pad-inline: 12px;
  --dvc-dtl-more-size: 13px;
  --dvc-dtl-more-radius: 10px;

  /* --- columns --- */
  --dvc-dtl-rail: 380px;
  --dvc-dtl-side-gap: 40px;
  --dvc-dtl-layout-margin: 30px;

  /* --- room + owner + description --- */
  --dvc-dtl-section-pad: 22px;
  --dvc-dtl-room-title-size: 19px;
  --dvc-dtl-room-meta-size: 14.5px;
  --dvc-dtl-room-meta-gap: 14px;
  --dvc-dtl-room-meta-item-gap: 6px;
  --dvc-dtl-kind-badge-pad-block: 7px;
  --dvc-dtl-kind-badge-pad-inline: 12px;
  --dvc-dtl-owner-gap: 14px;
  --dvc-dtl-owner-name-size: 15.5px;
  --dvc-dtl-owner-name-gap: 8px;
  --dvc-dtl-owner-meta-size: 13.5px;
  --dvc-dtl-owner-meta-gap: 2px;
  --dvc-dtl-desc-size: 15.5px;
  --dvc-dtl-desc-margin: 22px;

  /* --- what's included --- */
  --dvc-dtl-included-title-size: 16px;
  --dvc-dtl-included-title-margin-block-start: 26px;
  --dvc-dtl-included-title-margin-block-end: 14px;
  --dvc-dtl-included-gap-row: 14px;
  --dvc-dtl-included-gap-col: 24px;
  --dvc-dtl-amenity-size: 14.5px;
  --dvc-dtl-amenity-gap: 11px;

  /* --- protection card --- */
  --dvc-dtl-protect-margin: 26px;
  --dvc-dtl-protect-line: #cfe6e4;
  --dvc-dtl-protect-title-size: 15px;
  --dvc-dtl-protect-title-gap: 9px;
  --dvc-dtl-protect-gap: 18px;
  --dvc-dtl-protect-grid-margin: 16px;
  --dvc-dtl-protect-item-title-size: 13.5px;
  --dvc-dtl-protect-item-title-margin: 8px;
  --dvc-dtl-protect-item-body-size: 12.5px;
  --dvc-dtl-protect-item-body-margin: 4px;

  /* --- reviews --- */
  --dvc-dtl-reviews-margin: 30px;
  --dvc-dtl-reviews-pad: 28px;
  --dvc-dtl-reviews-head-gap: 10px;
  --dvc-dtl-reviews-head-margin: 20px;
  --dvc-dtl-reviews-title-size: 19px;
  --dvc-dtl-cats-gap-row: 10px;
  --dvc-dtl-cats-gap-col: 32px;
  --dvc-dtl-cats-margin: 28px;
  --dvc-dtl-cat-gap: 12px;
  --dvc-dtl-cat-name-size: 13.5px;
  --dvc-dtl-cat-name-width: 104px;
  --dvc-dtl-cat-bar-size: 4px;
  --dvc-dtl-cat-score-size: 13px;
  --dvc-dtl-cat-score-width: 28px;
  --dvc-dtl-review-gap-row: 24px;
  --dvc-dtl-review-gap-col: 32px;
  --dvc-dtl-review-head-gap: 11px;
  --dvc-dtl-review-head-margin: 9px;
  --dvc-dtl-review-name-size: 14.5px;
  --dvc-dtl-review-name-gap: 7px;
  --dvc-dtl-review-badge-size: 10.5px;
  --dvc-dtl-review-badge-pad-block: 2px;
  --dvc-dtl-review-badge-pad-inline: 7px;
  --dvc-dtl-review-date-size: 12.5px;
  --dvc-dtl-review-text-size: 14px;
  --dvc-dtl-reviews-all-margin: 24px;

  /* --- booking widget --- */
  --dvc-dtl-widget-pad: 22px;
  --dvc-dtl-price-size: 26px;
  --dvc-dtl-price-note-size: 13px;
  --dvc-dtl-points-gap: 8px;
  --dvc-dtl-points-margin: 10px;
  --dvc-dtl-ppp-size: 12px;
  --dvc-dtl-savings-margin: 12px;
  --dvc-dtl-savings-pad-block: 9px;
  --dvc-dtl-savings-pad-inline: 12px;
  --dvc-dtl-savings-radius: 10px;
  --dvc-dtl-savings-gap: 8px;
  --dvc-dtl-savings-size: 13px;
  --dvc-dtl-savings-note-size: 12.5px;
  --dvc-dtl-form-margin: 16px;
  --dvc-dtl-picker-radius: 12px;
  --dvc-dtl-cell-pad-block: 11px;
  --dvc-dtl-cell-pad-inline: 14px;
  --dvc-dtl-parts-margin: 18px;
  --dvc-dtl-parts-title-size: 12.5px;
  --dvc-dtl-parts-title-gap: 6px;
  --dvc-dtl-parts-title-margin: 12px;
  --dvc-dtl-part-gap: 13px;
  --dvc-dtl-part-dot-size: 9px;
  --dvc-dtl-part-label-size: 14px;
  --dvc-dtl-part-note-size: 12.5px;
  --dvc-dtl-part-value-size: 15px;
  --dvc-dtl-part-share-size: 11.5px;
  --dvc-dtl-reserve-margin: 20px;
  --dvc-dtl-fineprint-size: 12.5px;
  --dvc-dtl-fineprint-margin: 10px;
  --dvc-dtl-notify-margin: 10px;

  /* --- gallery lightbox --- */
  --dvc-dtl-gallery-layer: 320;
  --dvc-dtl-gallery-front-layer: 321;
  --dvc-dtl-gallery-size: 940px;
  --dvc-dtl-gallery-max-inline: 94vw;
  --dvc-dtl-gallery-scrim: rgba(16, 12, 10, 0.62);
  --dvc-dtl-gallery-blur: 3px;
  --dvc-dtl-gallery-fg: #fff;
  --dvc-dtl-gallery-head-margin: 12px;
  --dvc-dtl-gallery-title-size: 17px;
  --dvc-dtl-gallery-caption-size: 13px;
  --dvc-dtl-gallery-stage-block: min(56vh, 520px);
  --dvc-dtl-gallery-nav-size: 42px;
  --dvc-dtl-gallery-nav-bg: rgba(255, 255, 255, 0.92);
  --dvc-dtl-gallery-nav-inset: 14px;
  --dvc-dtl-gallery-close-size: 38px;
  --dvc-dtl-gallery-close-bg: rgba(255, 255, 255, 0.16);
  --dvc-dtl-gallery-thumbs-gap: 8px;
  --dvc-dtl-gallery-thumbs-margin: 12px;
  --dvc-dtl-gallery-thumbs-pad: 2px;
  --dvc-dtl-gallery-thumb-inline: 96px;
  --dvc-dtl-gallery-thumb-block: 64px;
  --dvc-dtl-gallery-thumb-radius: 10px;
  --dvc-dtl-gallery-thumb-ring: 3px;
}

/* ---------- header ---------- */
.dtl-back {
  margin-block-end: var(--dvc-dtl-back-gap);
}

.dtl-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--dvc-dtl-head-gap);
  flex-wrap: wrap;
}

.dtl-title {
  font-size: var(--dvc-dtl-title-size);
  font-weight: 500;
}

.dtl-meta {
  display: flex;
  align-items: center;
  gap: var(--dvc-dtl-meta-gap);
  flex-wrap: wrap;
  margin-block-start: var(--dvc-dtl-back-gap);
  font-size: var(--dvc-dtl-meta-size);
}

.dtl-meta-muted {
  color: var(--dvc-muted);
}

.dtl-meta-loc {
  display: inline-flex;
  align-items: center;
  gap: var(--dvc-dtl-meta-loc-gap);
}

.dtl-actions {
  display: flex;
  gap: var(--dvc-dtl-actions-gap);
}

.dtl-actions form {
  display: contents;
}

.dtl-save[data-saved="true"] {
  color: var(--dvc-coral-ink);
}

.dtl-save[data-saved="true"] .dvc-icon {
  fill: var(--dvc-coral);
}

/* ---------- photo mosaic ---------- */
.dtl-mosaic {
  position: relative;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: var(--dvc-dtl-mosaic-row) var(--dvc-dtl-mosaic-row);
  gap: var(--dvc-dtl-mosaic-gap);
  margin-block-start: var(--dvc-dtl-mosaic-margin);
  border-radius: var(--dvc-radius-lg);
  overflow: hidden;
}

.dtl-mosaic-tile {
  position: relative;
  display: block;
}

.dtl-mosaic-tile:first-child {
  grid-row: 1 / 3;
}

.dtl-mosaic-tile .dvc-photo {
  position: absolute;
  inset: 0;
  border-radius: 0;
}

.dtl-mosaic-more {
  position: absolute;
  inset-inline-end: var(--dvc-dtl-more-inset);
  inset-block-end: var(--dvc-dtl-more-inset);
  padding-block: var(--dvc-dtl-more-pad-block);
  padding-inline: var(--dvc-dtl-more-pad-inline);
  border-radius: var(--dvc-dtl-more-radius);
  background: var(--dvc-surface);
  box-shadow: var(--dvc-shadow-md);
  font-size: var(--dvc-dtl-more-size);
  font-weight: 600;
  color: var(--dvc-ink);
  text-decoration: none;
}

/* ---------- columns ---------- */
.dtl-layout {
  --app-rail-size: var(--dvc-dtl-rail);
  --app-side-gap: var(--dvc-dtl-side-gap);

  margin-block-start: var(--dvc-dtl-layout-margin);
}

/* ---------- room header ---------- */
.dtl-room {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--dvc-dtl-head-gap);
  padding-block-end: var(--dvc-dtl-section-pad);
  border-block-end: var(--dvc-border-width-hairline) solid var(--dvc-line);
}

.dtl-room-title {
  font-size: var(--dvc-dtl-room-title-size);
  font-weight: 800;
}

.dtl-room-meta {
  display: flex;
  gap: var(--dvc-dtl-room-meta-gap);
  flex-wrap: wrap;
  margin-block-start: var(--dvc-dtl-meta-loc-gap);
  font-size: var(--dvc-dtl-room-meta-size);
  color: var(--dvc-muted);
}

.dtl-room-meta > span {
  display: inline-flex;
  align-items: center;
  gap: var(--dvc-dtl-room-meta-item-gap);
}

.dtl-kind-badge {
  padding-block: var(--dvc-dtl-kind-badge-pad-block);
  padding-inline: var(--dvc-dtl-kind-badge-pad-inline);
  flex: none;
}

/* ---------- owner row ---------- */
.dtl-owner {
  display: flex;
  align-items: center;
  gap: var(--dvc-dtl-owner-gap);
  padding-block: var(--dvc-dtl-section-pad);
  border-block-end: var(--dvc-border-width-hairline) solid var(--dvc-line);
}

.dtl-owner-avatar {
  background: var(--dvc-coral);
}

.dtl-owner-body {
  flex: 1;
}

.dtl-owner-name {
  display: flex;
  align-items: center;
  gap: var(--dvc-dtl-owner-name-gap);
  flex-wrap: wrap;
  font-size: var(--dvc-dtl-owner-name-size);
  font-weight: 700;
}

.dtl-owner-meta {
  margin-block-start: var(--dvc-dtl-owner-meta-gap);
  font-size: var(--dvc-dtl-owner-meta-size);
  color: var(--dvc-muted);
}

/* ---------- description + amenities ---------- */
.dtl-desc {
  margin-block-start: var(--dvc-dtl-desc-margin);
  font-size: var(--dvc-dtl-desc-size);
  line-height: 1.6;
  color: var(--dvc-ink-2);
}

.dtl-included-title {
  margin-block-start: var(--dvc-dtl-included-title-margin-block-start);
  margin-block-end: var(--dvc-dtl-included-title-margin-block-end);
  font-size: var(--dvc-dtl-included-title-size);
  font-weight: 800;
}

.dtl-included {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--dvc-dtl-included-gap-row) var(--dvc-dtl-included-gap-col);
}

.dtl-amenity {
  display: flex;
  align-items: center;
  gap: var(--dvc-dtl-amenity-gap);
  font-size: var(--dvc-dtl-amenity-size);
  color: var(--dvc-ink-2);
}

.dtl-amenity .dvc-icon {
  color: var(--dvc-muted);
  flex: none;
}

/* ---------- protection card ---------- */
.dtl-protect {
  margin-block-start: var(--dvc-dtl-protect-margin);
  background: var(--dvc-ocean-soft);
  border-color: var(--dvc-dtl-protect-line);
}

.dtl-protect-title {
  display: flex;
  align-items: center;
  gap: var(--dvc-dtl-protect-title-gap);
  font-size: var(--dvc-dtl-protect-title-size);
  font-weight: 800;
  color: var(--dvc-ocean-ink);
}

.dtl-protect-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--dvc-dtl-protect-gap);
  margin-block-start: var(--dvc-dtl-protect-grid-margin);
}

.dtl-protect-item > .dvc-icon {
  color: var(--dvc-ocean);
}

.dtl-protect-item-title {
  margin-block-start: var(--dvc-dtl-protect-item-title-margin);
  font-size: var(--dvc-dtl-protect-item-title-size);
  font-weight: 700;
}

.dtl-protect-item-body {
  margin-block-start: var(--dvc-dtl-protect-item-body-margin);
  font-size: var(--dvc-dtl-protect-item-body-size);
  line-height: 1.45;
  color: var(--dvc-ink-2);
}

/* ---------- reviews ---------- */
.dtl-reviews {
  margin-block-start: var(--dvc-dtl-reviews-margin);
  padding-block-start: var(--dvc-dtl-reviews-pad);
  border-block-start: var(--dvc-border-width-hairline) solid var(--dvc-line);
}

.dtl-reviews-head {
  display: flex;
  align-items: center;
  gap: var(--dvc-dtl-reviews-head-gap);
  margin-block-end: var(--dvc-dtl-reviews-head-margin);
}

.dtl-reviews-star {
  color: var(--dvc-ink);
  fill: var(--dvc-ink);
  flex: none;
}

.dtl-reviews-title {
  font-size: var(--dvc-dtl-reviews-title-size);
  font-weight: 800;
}

.dtl-cats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--dvc-dtl-cats-gap-row) var(--dvc-dtl-cats-gap-col);
  margin-block-end: var(--dvc-dtl-cats-margin);
}

.dtl-cat {
  display: flex;
  align-items: center;
  gap: var(--dvc-dtl-cat-gap);
}

.dtl-cat-name {
  flex: 0 0 var(--dvc-dtl-cat-name-width);
  font-size: var(--dvc-dtl-cat-name-size);
  color: var(--dvc-ink-2);
}

.dtl-cat .dvc-prog {
  flex: 1;
  block-size: var(--dvc-dtl-cat-bar-size);
  background: var(--dvc-sand-2);
}

.dtl-cat .dvc-prog-fill {
  background: var(--dvc-ink);
}

.dtl-cat-score {
  flex: 0 0 var(--dvc-dtl-cat-score-width);
  font-size: var(--dvc-dtl-cat-score-size);
  font-weight: 700;
  text-align: end;
}

.dtl-review-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--dvc-dtl-review-gap-row) var(--dvc-dtl-review-gap-col);
}

.dtl-review-head {
  display: flex;
  align-items: center;
  gap: var(--dvc-dtl-review-head-gap);
  margin-block-end: var(--dvc-dtl-review-head-margin);
}

.dtl-review .dvc-avatar[data-tone="coral"] {
  background: var(--dvc-coral);
}

.dtl-review .dvc-avatar[data-tone="ocean"] {
  background: var(--dvc-ocean);
}

.dtl-review .dvc-avatar[data-tone="gold"] {
  background: var(--dvc-gold);
}

.dtl-review .dvc-avatar[data-tone="green"] {
  background: var(--dvc-green);
}

.dtl-review-name {
  display: flex;
  align-items: center;
  gap: var(--dvc-dtl-review-name-gap);
  flex-wrap: wrap;
  font-size: var(--dvc-dtl-review-name-size);
  font-weight: 700;
}

.dtl-review-badge {
  padding-block: var(--dvc-dtl-review-badge-pad-block);
  padding-inline: var(--dvc-dtl-review-badge-pad-inline);
  font-size: var(--dvc-dtl-review-badge-size);
}

.dtl-review-date {
  font-size: var(--dvc-dtl-review-date-size);
  color: var(--dvc-muted);
}

.dtl-review-text {
  font-size: var(--dvc-dtl-review-text-size);
  line-height: 1.6;
  color: var(--dvc-ink-2);
}

.dtl-reviews-all {
  margin-block-start: var(--dvc-dtl-reviews-all-margin);
}

/* ---------- booking widget ---------- */
.dtl-widget {
  padding: var(--dvc-dtl-widget-pad);
  box-shadow: var(--dvc-shadow-lg);
}

.dtl-widget-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.dtl-price {
  font-size: var(--dvc-dtl-price-size);
  font-weight: 800;
}

.dtl-price-note {
  font-size: var(--dvc-dtl-price-note-size);
  font-weight: 600;
  color: var(--dvc-muted);
}

.dtl-widget-points {
  display: flex;
  align-items: center;
  gap: var(--dvc-dtl-points-gap);
  margin-block-start: var(--dvc-dtl-points-margin);
}

.dtl-ppp {
  font-size: var(--dvc-dtl-ppp-size);
}

.dtl-savings {
  display: flex;
  align-items: center;
  gap: var(--dvc-dtl-savings-gap);
  margin-block-start: var(--dvc-dtl-savings-margin);
  padding-block: var(--dvc-dtl-savings-pad-block);
  padding-inline: var(--dvc-dtl-savings-pad-inline);
  border-radius: var(--dvc-dtl-savings-radius);
  background: var(--dvc-green-soft);
}

.dtl-savings .dvc-icon {
  color: var(--dvc-green);
  flex: none;
}

.dtl-savings strong {
  font-size: var(--dvc-dtl-savings-size);
  font-weight: 700;
  color: var(--dvc-green);
}

.dtl-savings span {
  font-size: var(--dvc-dtl-savings-note-size);
  color: var(--dvc-ink-2);
}

/* ---------- pickers (shared partials composed into the widget box) ---------- */
.dtl-stay-form {
  margin-block-start: var(--dvc-dtl-form-margin);
}

.dtl-picker-box {
  position: relative;
  border: var(--dvc-border-width-hairline) solid var(--dvc-line-2);
  border-radius: var(--dvc-dtl-picker-radius);
}

.dtl-picker-box .sp-picker {
  position: static;
}

.dtl-picker-box .sp-picker > summary {
  display: flex;
  inline-size: 100%;
  padding-block: var(--dvc-dtl-cell-pad-block);
  padding-inline: var(--dvc-dtl-cell-pad-inline);
}

.dtl-picker-box .sp-picker-panel {
  inset-inline-start: auto;
  inset-inline-end: 0;
}

.dtl-picker-dates {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.dtl-picker-dates > .sp-picker + .sp-picker {
  border-inline-start: var(--dvc-border-width-hairline) solid var(--dvc-line-2);
}

.dtl-picker-guests {
  display: flex;
  align-items: center;
  border-block-start: var(--dvc-border-width-hairline) solid var(--dvc-line-2);
  padding-inline-end: var(--dvc-dtl-cell-pad-inline);
}

.dtl-picker-guests > .sp-picker {
  flex: 1;
}

.dtl-picker-chev {
  color: var(--dvc-muted);
  flex: none;
}

/* ---------- payment schedule ---------- */
.dtl-parts {
  margin-block-start: var(--dvc-dtl-parts-margin);
}

.dtl-parts-title {
  display: flex;
  align-items: center;
  gap: var(--dvc-dtl-parts-title-gap);
  margin-block-end: var(--dvc-dtl-parts-title-margin);
  font-size: var(--dvc-dtl-parts-title-size);
  font-weight: 700;
  color: var(--dvc-ink-2);
}

.dtl-parts-title .dvc-icon {
  color: var(--dvc-ocean);
  flex: none;
}

.dtl-parts-rows {
  display: flex;
  flex-direction: column;
  gap: var(--dvc-dtl-part-gap);
}

.dtl-part {
  display: flex;
  align-items: center;
  gap: var(--dvc-dtl-part-gap);
}

.dtl-part .dvc-dot {
  inline-size: var(--dvc-dtl-part-dot-size);
  block-size: var(--dvc-dtl-part-dot-size);
  color: var(--dvc-ocean);
  flex: none;
}

.dtl-part[data-later="true"] .dvc-dot {
  color: var(--dvc-line-2);
}

.dtl-part-copy {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.dtl-part-label {
  font-size: var(--dvc-dtl-part-label-size);
  font-weight: 600;
}

.dtl-part-note {
  font-size: var(--dvc-dtl-part-note-size);
  color: var(--dvc-faint);
}

.dtl-part-amount {
  display: flex;
  flex-direction: column;
  text-align: end;
}

.dtl-part-value {
  font-size: var(--dvc-dtl-part-value-size);
  font-weight: 700;
}

.dtl-part-share {
  font-size: var(--dvc-dtl-part-share-size);
  color: var(--dvc-faint);
}

/* ---------- calls to action ---------- */
.dtl-reserve {
  margin-block-start: var(--dvc-dtl-reserve-margin);
}

.dtl-fineprint {
  margin-block-start: var(--dvc-dtl-fineprint-margin);
  font-size: var(--dvc-dtl-fineprint-size);
  color: var(--dvc-muted);
  text-align: center;
}

.dtl-notify {
  margin-block-start: var(--dvc-dtl-notify-margin);
  color: var(--dvc-ocean-ink);
}

/* ---------- gallery lightbox (?photo=n) ---------- */
.dtl-gallery-scrim {
  position: fixed;
  inset: 0;
  z-index: var(--dvc-dtl-gallery-layer);
  background: var(--dvc-dtl-gallery-scrim);
  backdrop-filter: blur(var(--dvc-dtl-gallery-blur));
}

.dtl-gallery {
  z-index: var(--dvc-dtl-gallery-front-layer);
  inline-size: var(--dvc-dtl-gallery-size);
  max-inline-size: var(--dvc-dtl-gallery-max-inline);
  padding: 0;
  border: none;
  background: none;
  box-shadow: none;
  color: var(--dvc-dtl-gallery-fg);
}

.dtl-gallery-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-block-end: var(--dvc-dtl-gallery-head-margin);
}

.dtl-gallery-title {
  font-size: var(--dvc-dtl-gallery-title-size);
  font-weight: 800;
}

.dtl-gallery-caption {
  font-size: var(--dvc-dtl-gallery-caption-size);
  opacity: 0.7;
}

.dtl-gallery-close {
  display: grid;
  place-items: center;
  inline-size: var(--dvc-dtl-gallery-close-size);
  block-size: var(--dvc-dtl-gallery-close-size);
  border-radius: var(--dvc-radius-pill);
  background: var(--dvc-dtl-gallery-close-bg);
  color: var(--dvc-dtl-gallery-fg);
}

.dtl-gallery-stage {
  position: relative;
  block-size: var(--dvc-dtl-gallery-stage-block);
  border-radius: var(--dvc-radius-lg);
  overflow: hidden;
}

.dtl-gallery-stage .dvc-photo {
  position: absolute;
  inset: 0;
  border-radius: 0;
}

.dtl-gallery-nav {
  position: absolute;
  inset-block-start: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  inline-size: var(--dvc-dtl-gallery-nav-size);
  block-size: var(--dvc-dtl-gallery-nav-size);
  border-radius: var(--dvc-radius-pill);
  background: var(--dvc-dtl-gallery-nav-bg);
  box-shadow: var(--dvc-shadow-md);
  color: var(--dvc-ink);
}

.dtl-gallery-nav[data-dir="prev"] {
  inset-inline-start: var(--dvc-dtl-gallery-nav-inset);
}

.dtl-gallery-nav[data-dir="next"] {
  inset-inline-end: var(--dvc-dtl-gallery-nav-inset);
}

.dtl-gallery-thumbs {
  display: flex;
  gap: var(--dvc-dtl-gallery-thumbs-gap);
  margin-block-start: var(--dvc-dtl-gallery-thumbs-margin);
  padding-block-end: var(--dvc-dtl-gallery-thumbs-pad);
  overflow-x: auto;
}

.dtl-gallery-thumb {
  position: relative;
  flex: 0 0 var(--dvc-dtl-gallery-thumb-inline);
  block-size: var(--dvc-dtl-gallery-thumb-block);
  border-radius: var(--dvc-dtl-gallery-thumb-radius);
  overflow: hidden;
  opacity: 0.72;
}

.dtl-gallery-thumb[data-active="true"] {
  opacity: 1;
  box-shadow: 0 0 0 var(--dvc-dtl-gallery-thumb-ring) var(--dvc-coral);
}

.dtl-gallery-thumb .dvc-photo {
  position: absolute;
  inset: 0;
  border-radius: 0;
}

/* ---------- responsive (640px in em) ---------- */
@media (max-width: 40em) {
  .dtl-mosaic {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: none;
    grid-auto-rows: var(--dvc-dtl-mosaic-row);
  }

  .dtl-mosaic-tile:first-child {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .dtl-included,
  .dtl-protect-grid,
  .dtl-cats,
  .dtl-review-grid {
    grid-template-columns: 1fr;
  }

  .dtl-room {
    flex-direction: column;
    align-items: flex-start;
  }
}