/* Implementation of the web standards in assets/brand/ayalalandusa/README.md. */
#two-shores #px-detail{
  --detail-gutter:32px;
  --detail-ink:#243a32;
  --detail-muted:#46584e;
  --detail-line:#c8d5cd;
  width:min(1080px,calc(100% - 32px));max-height:calc(100dvh - 32px);
  padding:0;border:1px solid var(--detail-line);border-radius:8px;
  background:#fff;color:var(--detail-ink);font:400 18px/1.55 Arial,Helvetica,sans-serif;
  overflow:auto;scrollbar-color:#73867a #fff;scrollbar-width:thin;
}
#two-shores #px-detail :is(p,li,dt,dd,small,summary,button,a,span){font-family:inherit;letter-spacing:normal}
#two-shores #px-detail :is(p,li,dd){font-size:18px;line-height:1.55;color:var(--detail-ink)}
#two-shores #px-detail :is(.px-dialog-inner,.px-detail-heading,.px-gallery,.px-gallery-stage,#px-gallery-photo,.px-detail-story,.px-detail-facts,.px-detail-features li,.px-detail-next,.px-price-unit-list article){background:#fff;background-image:none}
#two-shores #px-detail>.px-dialog-inner{padding:0}
#two-shores #px-detail .px-dialog-close{top:12px;right:12px;margin:12px 12px -56px 0;width:44px;height:44px;border:1px solid #73867a;background:#fff;color:#015a43;backdrop-filter:none;font-size:26px;line-height:1}
#two-shores #px-detail .px-detail-heading{padding:28px 76px 24px var(--detail-gutter);gap:20px;align-items:flex-start}
#two-shores #px-detail .px-detail-heading>div{min-width:0;padding:0}
#two-shores #px-detail h2{font:700 32px/1.25 Arial,Helvetica,sans-serif;letter-spacing:normal;color:#015a43;margin:0 0 12px;overflow-wrap:anywhere}
#two-shores #px-detail h3{font:700 24px/1.35 Arial,Helvetica,sans-serif;letter-spacing:normal;color:#015a43;margin:0 0 16px}
#two-shores #px-detail h4{font:700 18px/1.5 Arial,Helvetica,sans-serif;color:#015a43;margin:0 0 8px}
#two-shores #px-detail :is(dt,small,.px-eyebrow,.px-image-kind,.px-image-category,.px-image-number,.px-detail-badge,.px-gallery-note,.px-detail-footnote,.px-source,.px-detail-accuracy,.px-email-note,.px-price-label,.px-price-qualifier,.px-price-basis,.px-price-starting-note,.px-fx-note,.px-detail-location){font-size:16px;line-height:1.6;color:var(--detail-muted);text-transform:none;letter-spacing:normal}
#two-shores #px-detail .px-eyebrow{font-weight:600;margin:0 0 12px;max-width:none;padding:0}
#two-shores #px-detail .px-eyebrow>span{display:inline;font-size:16px;line-height:1.6}
#two-shores #px-detail :is(button,summary){font-size:16px;line-height:1.5}
#two-shores #px-detail :is(.px-save,.px-secondary){min-height:44px;background:#fff;color:#015a43;border-color:#73867a}
#two-shores #px-detail .px-save[aria-pressed=true]{background:#fff;border:2px solid #015a43}
#two-shores #px-detail .px-primary{min-height:48px;background:#015a43;color:#fff;font-size:16px;line-height:1.5}
#two-shores #px-detail .px-primary span{color:#fff}
#two-shores #px-detail a{color:#015a43;text-underline-offset:3px}
#two-shores #px-detail :is(button,a,summary):focus-visible{outline:3px solid #015a43;outline-offset:3px}

/* Keep the photo controls and captions readable without tinting the gallery. */
#two-shores #px-detail .px-gallery{border-block:1px solid var(--detail-line)}
#two-shores #px-detail .px-gallery-top{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:16px var(--detail-gutter)}
#two-shores #px-detail .px-gallery-top>p{font:600 18px/1.5 Arial,Helvetica,sans-serif;white-space:normal;margin:0}
#two-shores #px-detail .px-gallery-top>p>span:last-child{font:400 16px/1.5 Arial,Helvetica,sans-serif;color:var(--detail-muted)}
#two-shores #px-detail .px-gallery-categories{display:flex;flex-wrap:wrap;gap:8px;width:100%;max-width:100%;overflow:visible}
#two-shores #px-detail .px-gallery-categories button{min-height:44px;padding:9px 14px;background:#fff;color:#015a43;border:1px solid #73867a;border-radius:4px;box-shadow:none}
#two-shores #px-detail .px-gallery-categories button[aria-pressed=true]{border:2px solid #015a43;padding:8px 13px;font-weight:700;text-decoration:underline;text-underline-offset:4px}
#two-shores #px-detail #px-gallery-photo{height:clamp(240px,42vw,420px)}
#two-shores #px-detail .px-gallery-arrow{width:44px;height:44px;border:1px solid #73867a;background:#fff;color:#015a43;font-size:24px}
#two-shores #px-detail .px-gallery-zoom{min-height:44px;gap:8px;background:#015a43;color:#fff;border:1px solid #fff;backdrop-filter:none}
#two-shores #px-detail .px-gallery-zoom span{font-size:16px;color:#fff}
#two-shores #px-detail .px-gallery-caption{padding:20px var(--detail-gutter) 16px;gap:16px;min-height:0}
#two-shores #px-detail .px-gallery-caption>div{min-width:0}
#two-shores #px-detail .px-gallery-caption p{font:600 18px/1.55 Arial,Helvetica,sans-serif;margin:8px 0 0;color:var(--detail-ink)}
#two-shores #px-detail .px-image-kind{display:inline-block}
#two-shores #px-detail .px-image-category{display:inline-block;margin-left:10px;padding-left:10px;border-color:var(--detail-line)}
#two-shores #px-detail .px-image-number{flex:none;white-space:nowrap}
#two-shores #px-detail .px-gallery-thumbnails{padding:0 var(--detail-gutter) 12px;gap:10px}
#two-shores #px-detail .px-gallery-note{margin:8px var(--detail-gutter) 24px;max-width:68ch}

/* Align the reading sections to one gutter and use space, borders and headings. */
#two-shores #px-detail .px-spec-details{margin:24px var(--detail-gutter);padding:20px;border-color:var(--detail-line)}
#two-shores #px-detail .px-spec-details ul{gap:16px}
#two-shores #px-detail .px-spec-details li{font:400 18px/1.55 Arial,Helvetica,sans-serif;padding-top:16px;gap:8px}
#two-shores #px-detail .px-detail-story{padding:0 var(--detail-gutter)}
#two-shores #px-detail .px-detail-overview{display:grid;grid-template-columns:1fr 1fr;gap:28px;padding:24px 0}
#two-shores #px-detail .px-detail-description{font:400 18px/1.6 Arial,Helvetica,sans-serif;max-width:65ch;margin:0}
#two-shores #px-detail .px-detail-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));padding:20px;gap:20px;border:1px solid var(--detail-line);align-content:start}
#two-shores #px-detail .px-detail-facts>div{min-width:0}
#two-shores #px-detail .px-detail-facts dt{font-weight:400;margin:0 0 6px}
#two-shores #px-detail .px-detail-facts dd{font-size:18px;line-height:1.5;margin:0;overflow-wrap:anywhere}
#two-shores #px-detail .px-pricing-detail{margin:0;padding:24px 0;border-top:1px solid var(--detail-line)}
#two-shores #px-detail .px-pricing p{margin:12px 0 0;max-width:68ch}
#two-shores #px-detail .px-pricing .px-price-label{margin:0 0 8px}
#two-shores #px-detail .px-price-amount strong{font:700 24px/1.35 Arial,Helvetica,sans-serif;color:#015a43}
#two-shores #px-detail .px-price-amount small{display:block;font-size:16px;line-height:1.6;margin-top:4px}
#two-shores #px-detail .px-price-range-to{flex-wrap:wrap;font-size:16px;line-height:1.6;gap:8px;margin-top:12px}
#two-shores #px-detail .px-price-samples{margin:20px 0;padding:0;border-color:var(--detail-line)}
#two-shores #px-detail .px-price-samples summary{font:600 16px/1.6 Arial,Helvetica,sans-serif;padding:16px 44px 16px 16px;color:#015a43;min-height:48px}
#two-shores #px-detail .px-price-unit-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;padding:0 16px 16px}
#two-shores #px-detail .px-price-unit-list article{padding:20px;border:1px solid var(--detail-line);background:#fff}
#two-shores #px-detail .px-price-unit-list article>p{font-size:16px;line-height:1.6;margin-top:12px}
#two-shores #px-detail .px-detail-amenities{padding:28px 0;border-color:var(--detail-line)}
#two-shores #px-detail .px-detail-features{grid-template-columns:repeat(2,minmax(0,1fr));margin:16px 0;padding:0;gap:12px}
#two-shores #px-detail .px-detail-features li{padding:16px;border-color:var(--detail-line);font-size:18px;line-height:1.55;overflow-wrap:anywhere}
#two-shores #px-detail .px-detail-location-section{padding:28px 0;gap:24px;border-color:var(--detail-line)}
#two-shores #px-detail .px-detail-location-section h3{font-size:24px;line-height:1.35}
#two-shores #px-detail .px-detail-next{padding:28px 0;margin:0;gap:24px;border-color:var(--detail-line)}
#two-shores #px-detail .px-detail-next>div>p:not(.px-eyebrow){font-size:18px;line-height:1.6;color:var(--detail-ink);margin:0}
#two-shores #px-detail .px-dialog-actions{gap:12px}
#two-shores #px-detail.px-photo-full{width:calc(100% - 24px);height:calc(100dvh - 24px);max-height:calc(100dvh - 24px)}
#two-shores #px-detail.px-photo-full :is(.px-detail-heading,.px-detail-story,.px-gallery-note,.px-spec-details){display:none}
#two-shores #px-detail.px-photo-full .px-gallery-top{padding-right:72px;min-height:0}
#two-shores #px-detail.px-photo-full #px-gallery-photo{height:max(180px,calc(100dvh - 340px))}
#two-shores #px-detail.px-photo-full .px-gallery-caption{min-height:0}
@media(width < 900px){
  #two-shores #px-detail .px-detail-overview{grid-template-columns:1fr;gap:20px}
  #two-shores #px-detail .px-price-unit-list{grid-template-columns:1fr}
  #two-shores #px-detail .px-detail-heading{display:block}
  #two-shores #px-detail .px-detail-heading .px-save{margin-top:16px}
  #two-shores #px-detail .px-detail-location-section,#two-shores #px-detail .px-detail-next{display:grid;grid-template-columns:1fr}
  #two-shores #px-detail .px-detail-next .px-dialog-actions{margin:0}
}
@media(width < 640px){
  #two-shores #px-detail{--detail-gutter:20px;width:calc(100% - 16px);max-height:calc(100dvh - 16px)}
  #two-shores #px-detail h2{font-size:28px;line-height:1.3}
  #two-shores #px-detail h3,#two-shores #px-detail .px-detail-location-section h3{font-size:22px;line-height:1.4}
  #two-shores #px-detail .px-detail-heading{padding-top:24px}
  #two-shores #px-detail .px-detail-heading .px-eyebrow>span{display:block}
  #two-shores #px-detail .px-gallery-caption{display:block}
  #two-shores #px-detail .px-image-number{display:block;margin-top:8px}
  #two-shores #px-detail .px-spec-details,#two-shores #px-detail .px-detail-facts{padding:16px}
  #two-shores #px-detail .px-detail-facts,#two-shores #px-detail .px-detail-features{grid-template-columns:1fr}
  #two-shores #px-detail .px-price-unit-list{padding:0 12px 12px}
  #two-shores #px-detail .px-price-unit-list article{padding:16px}
  #two-shores #px-detail .px-detail-next .px-dialog-actions>*{width:100%}
  #two-shores #px-detail.px-photo-full #px-gallery-photo{height:auto;min-height:0}
  #two-shores #px-detail.px-photo-full .px-gallery-image{height:auto;max-height:calc(100dvh - 300px);object-fit:contain}
}