:root {
    --detail-bg: #fbf6ed;
    --detail-surface: rgba(255, 252, 246, .94);
    --detail-primary: #075160;
    --detail-primary-dark: #043d48;
    --detail-gold: #c89b53;
    --detail-border: #e7cfa8;
    --detail-text: #093f4c;
    --detail-muted: #62717a;
    --detail-radius: 22px;
}

.detail-page { position: relative; overflow: hidden; color: var(--detail-text); background: radial-gradient(circle at 50% 0, #fffdf9, var(--detail-bg) 68%); }
.detail-page::before { content: ''; position: absolute; inset: 0; opacity: .3; pointer-events: none; background-image: linear-gradient(45deg, rgba(200,155,83,.06) 25%, transparent 25%), linear-gradient(-45deg, rgba(200,155,83,.06) 25%, transparent 25%); background-size: 28px 28px; }
.detail-side { position: absolute; z-index: 1; top: 0; bottom: 0; width: 120px; object-fit: cover; object-position: top center; pointer-events: none; }
.detail-side--left { left: 0; object-position: right top; }
.detail-side--right { right: 0; object-position: left top; }
.detail-container { position: relative; z-index: 2; width: min(1400px, calc(100% - 180px)); margin: 0 auto; padding: 18px 0 32px; }
.detail-back { display: inline-flex; align-items: center; gap: 9px; min-height: 40px; margin-bottom: 12px; padding: 0 16px; color: var(--detail-primary); border: 1px solid var(--detail-border); border-radius: 999px; background: rgba(255,253,248,.9); font: 800 12px/1 'Manrope', sans-serif; text-decoration: none; transition: .18s ease; }
.detail-back:hover { color: #fff; background: var(--detail-primary); transform: translateY(-1px); }
.detail-hero { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(390px, 1fr); gap: 24px; padding: 18px; border: 1px solid var(--detail-border); border-radius: 28px; background: var(--detail-surface); box-shadow: 0 14px 32px rgba(79,52,22,.08); }
.detail-gallery { min-width: 0; }
.detail-gallery__main { position: relative; aspect-ratio: 16 / 8.4; overflow: hidden; border: 1px solid var(--detail-border); border-radius: 18px; background: #e9e4db; }
.detail-gallery__main img { width: 100%; height: 100%; object-fit: cover; transition: opacity .2s ease, transform .45s ease; }
.detail-gallery__main:hover img { transform: scale(1.015); }
.detail-gallery__arrow { position: absolute; z-index: 1; top: 50%; width: 42px; height: 42px; display: grid; place-items: center; padding: 0; color: #fff; border: 1px solid rgba(232,201,145,.8); border-radius: 50%; background: rgba(4,61,72,.88); font-size: 28px; transform: translateY(-50%); cursor: pointer; }
.detail-gallery__arrow--prev { left: 14px; }.detail-gallery__arrow--next { right: 14px; }
.detail-gallery__count { position: absolute; left: 14px; bottom: 13px; padding: 7px 12px; color: #fff; border-radius: 999px; background: rgba(4,61,72,.9); font: 800 12px/1 'Manrope', sans-serif; }
.detail-gallery__thumbs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin-top: 9px; }
.detail-gallery__thumb { height: 66px; padding: 0; overflow: hidden; border: 2px solid transparent; border-radius: 10px; background: #eee; cursor: pointer; }.detail-gallery__thumb.is-active { border-color: var(--detail-primary); box-shadow: 0 0 0 2px rgba(7,81,96,.12); }.detail-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.detail-placeholder { height: 100%; display: grid; place-items: center; color: var(--detail-muted); font: 700 16px 'Manrope', sans-serif; }
.detail-info { min-width: 0; padding: 1px 0; }.detail-badges { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 9px; margin-bottom: 18px; }
.detail-badge { display: inline-flex; align-items: center; min-height: 33px; padding: 0 14px; border: 1px solid var(--detail-border); border-radius: 999px; font: 800 12px/1 'Manrope', sans-serif; }.detail-badge--girls { color: #bd4160; background: #fff0f4; border-color: #f2b7c8; }.detail-badge--boys { color: var(--detail-primary); background: #e8f3f5; border-color: #a9d0d6; }.detail-badge--all { color: #895b1b; background: #fff3d8; border-color: #e9c77f; }.detail-badge--price { color: #fff; background: var(--detail-primary); border-color: var(--detail-primary); }
.detail-kicker { display: inline-flex; padding: 5px 11px; border: 1px solid var(--detail-border); border-radius: 999px; color: var(--detail-primary); font: 800 10px/1 'Manrope', sans-serif; letter-spacing: 1.2px; text-transform: uppercase; }.detail-info h1 { margin: 8px 0; font: 700 clamp(37px, 3vw, 56px)/.98 'Cormorant Garamond', Georgia, serif; color: var(--detail-primary); }.detail-description { margin: 0 0 18px; color: #355b62; font: 500 13px/1.65 'Manrope', sans-serif; }
.detail-stats { display: grid; grid-template-columns: 1.25fr 1fr .8fr .8fr; gap: 9px; }.detail-stat, .detail-contact, .detail-contract { min-width: 0; border: 1px solid var(--detail-border); border-radius: 14px; background: rgba(255,253,248,.86); }.detail-stat { min-height: 86px; padding: 13px; }.detail-stat small, .detail-contact small, .detail-contract small { display: block; margin-bottom: 5px; color: #7b766b; font: 800 9px/1.1 'Manrope', sans-serif; letter-spacing: .55px; text-transform: uppercase; }.detail-stat strong { display: block; color: var(--detail-primary); font: 800 13px/1.35 'Manrope', sans-serif; overflow-wrap: anywhere; }
.detail-contacts { display: grid; grid-template-columns: .85fr 1.35fr; gap: 9px; margin-top: 9px; }.detail-contact { min-height: 65px; padding: 12px 14px; color: var(--detail-primary); text-decoration: none; }.detail-contact strong { font: 700 12px/1.45 'Manrope', sans-serif; }.detail-contract { display: block; margin-top: 9px; padding: 12px 14px; color: var(--detail-primary); text-decoration: none; transition: .18s ease; }.detail-contract:hover { border-color: var(--detail-gold); transform: translateY(-1px); }.detail-contract strong { font: 700 12px/1.4 'Manrope', sans-serif; }
.detail-secondary { display: grid; grid-template-columns: .9fr 1.05fr 1.15fr; gap: 14px; margin-top: 16px; }.detail-panel { min-width: 0; padding: 16px; border: 1px solid var(--detail-border); border-radius: 18px; background: var(--detail-surface); box-shadow: 0 8px 22px rgba(81,57,28,.04); }.detail-section-title { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }.detail-section-title img { width: 28px; height: 28px; object-fit: contain; }.detail-section-title h2 { margin: 0; color: var(--detail-primary); font: 700 17px/1 'Cormorant Garamond', Georgia, serif; text-transform: uppercase; }
.detail-facts { display: grid; grid-template-columns: repeat(2, 1fr); }.detail-fact { min-height: 57px; padding: 10px; border-bottom: 1px solid #ecdfca; }.detail-fact:nth-child(odd) { border-right: 1px solid #ecdfca; }.detail-fact:nth-last-child(-n+2) { border-bottom: 0; }.detail-fact small { display: block; color: #777369; font: 800 8px/1.2 'Manrope', sans-serif; text-transform: uppercase; }.detail-fact strong { display: block; margin-top: 4px; color: var(--detail-primary); font: 800 12px/1.25 'Manrope', sans-serif; }
.detail-amenities { display: flex; flex-wrap: wrap; gap: 8px; }.detail-amenity { display: inline-flex; align-items: center; gap: 7px; min-height: 31px; padding: 0 12px; color: var(--detail-primary); border: 1px solid var(--detail-border); border-radius: 999px; background: #fffaf2; font: 700 11px/1 'Manrope', sans-serif; }.detail-amenity::before { content: '✦'; color: var(--detail-gold); }.detail-map-address { min-height: 37px; margin: 0 0 9px; color: var(--detail-primary); font: 700 11px/1.4 'Manrope', sans-serif; }.detail-map { height: 116px; overflow: hidden; border: 1px solid var(--detail-border); border-radius: 12px; background: #eae6dc; }.detail-map iframe { width: 100%; height: 100%; border: 0; }.detail-map--empty { display: grid; place-items: center; padding: 12px; color: var(--detail-muted); text-align: center; font: 600 11px/1.4 'Manrope', sans-serif; }
.detail-related { margin-top: 18px; }.detail-related__head { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin-bottom: 10px; }.detail-related__head .detail-section-title { margin-bottom: 0; }.detail-related__head > a { color: var(--detail-primary); font: 800 11px/1 'Manrope', sans-serif; text-decoration: none; }.detail-related__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }.detail-related-card { display: grid; grid-template-columns: 46% 54%; min-height: 155px; overflow: hidden; border: 1px solid var(--detail-border); border-radius: 16px; background: var(--detail-surface); }.detail-related-card__image img { width: 100%; height: 100%; object-fit: cover; }.detail-related-card__content { display: flex; min-width: 0; flex-direction: column; padding: 12px; }.detail-related-card h3 { margin: 0 0 8px; color: var(--detail-primary); font: 700 16px/1.15 'Cormorant Garamond', Georgia, serif; }.detail-related-card p { display: grid; gap: 5px; margin: 0; color: #315861; font: 700 10px/1.3 'Manrope', sans-serif; }.detail-related-card__button { display: flex; justify-content: space-between; align-items: center; min-height: 32px; margin-top: auto; padding: 0 11px; color: #fff; border-radius: 999px; background: var(--detail-primary); font: 800 10px/1 'Manrope', sans-serif; text-decoration: none; }
@media (max-width:1280px){.detail-side{width:72px;opacity:.35}.detail-container{width:min(1180px,calc(100% - 48px))}}@media(max-width:1200px){.detail-hero{grid-template-columns:1fr}.detail-badges{justify-content:flex-start}.detail-secondary{grid-template-columns:repeat(2,1fr)}.detail-panel--location{grid-column:1/-1}}@media(max-width:820px){.detail-side{display:none}.detail-container{width:calc(100% - 24px);padding-top:14px}.detail-hero{padding:13px;border-radius:20px}.detail-stats{grid-template-columns:repeat(2,1fr)}.detail-contacts,.detail-secondary,.detail-related__grid{grid-template-columns:1fr}.detail-panel--location{grid-column:auto}}@media(max-width:560px){.detail-gallery__main{aspect-ratio:4/3}.detail-gallery__thumbs{display:flex;overflow-x:auto}.detail-gallery__thumb{flex:0 0 82px;height:60px}.detail-gallery__arrow{width:36px;height:36px;font-size:24px}.detail-info h1{font-size:36px}.detail-stat{min-height:78px;padding:11px}.detail-related-card{grid-template-columns:1fr}.detail-related-card__image{height:170px}.detail-badge{font-size:10px;padding:0 11px}}

/* blank_2: prepared visual elements used in the same positions as the reference. */
.detail-side { width: clamp(110px, 8vw, 154px); height: 100%; object-fit: fill; }
.detail-back--asset { min-height: 0; padding: 0; overflow: hidden; border: 0; border-radius: 0; background: transparent; }
.detail-back--asset img { display: block; width: clamp(140px, 13vw, 190px); height: auto; }
.detail-back--asset:hover { background: transparent; transform: translateY(-1px) scale(1.01); }
.detail-badge--price { min-height: 0; padding: 0; overflow: hidden; border: 0; border-radius: 0; background: transparent; }
.detail-badge--price img { display: block; width: clamp(150px, 15vw, 215px); height: auto; }
.detail-related-card__button { display: block; align-self: stretch; width: 100%; margin-top: auto; padding: 0; overflow: visible; border: 0; border-radius: 0; background: transparent; line-height: 0; text-decoration: none; }
.detail-related-card__button img { display: block; width: 100%; height: auto; }
@media (max-width: 1280px) and (min-width: 821px) { .detail-side { width: clamp(92px, 8vw, 120px); opacity: .92; } }

/* Kept as separate, masked visual elements so their source canvas never overlaps content. */
.detail-back--asset { width: clamp(140px, 13vw, 190px); min-height: 0; padding: 0; overflow: visible; border: 0; border-radius: 0; background: transparent; }
.detail-back--asset img { display: block; width: 100%; max-width: 100%; height: auto; transform: none; }
.detail-back--asset:hover { background: transparent; transform: translateY(-1px) scale(1.01); }
.detail-badge--price { width: clamp(132px, 12vw, 182px); min-height: 0; padding: 0; overflow: hidden; border: 0; border-radius: 999px; background: transparent; }
.detail-badge--price img { display: block; width: 108%; max-width: none; height: auto; transform: translateX(-4%); }

/* Narx is dynamic text; naqsh remains the only image decoration within panels. */
.detail-badge--price { width: auto; min-height: 33px; padding: 0 14px; overflow: visible; border: 1px solid var(--detail-primary); border-radius: 999px; color: #fff; background: var(--detail-primary); }

/* Fixed viewport frame: the arches stay at the screen edges, outside all content containers. */
html:has(.culture-frame) { overflow-x: clip; }
body.detail-body { --culture-frame-width: clamp(120px, 7.5vw, 145px); margin: 0; min-height: 100%; padding-right: var(--culture-frame-width); padding-left: var(--culture-frame-width); background: #f8f4ec; }
body.detail-body .public-page { position: relative; z-index: 20; width: 100%; max-width: 1450px; min-height: 100vh; margin: 0 auto; }
.culture-frame { position: fixed; z-index: 10; top: 0; bottom: 0; width: var(--culture-frame-width); height: 100dvh; overflow: hidden; pointer-events: none; user-select: none; }
.culture-frame--left { left: 0; }.culture-frame--right { right: 0; }
.culture-frame img { display: block; width: 100%; height: 100%; object-fit: fill; object-position: center top; }
.culture-frame--right img { transform: scaleX(-1); }
body.detail-body .detail-page { overflow: visible; }
body.detail-body .detail-container { width: min(1400px, calc(100% - 32px)); }
@media (max-width: 1199px) { body.detail-body { padding-right: 20px; padding-left: 20px; } .culture-frame { display: none; } body.detail-body .public-page { max-width: 100%; } }
@media (max-width: 767px) { body.detail-body { padding-right: 12px; padding-left: 12px; } }
@media (max-width: 1199px) and (min-width: 768px) { body.detail-body { --culture-frame-width: 104px; padding-right: var(--culture-frame-width); padding-left: var(--culture-frame-width); } .culture-frame { display: block; width: var(--culture-frame-width); } }
.detail-badge--gender-asset { display: block; width: clamp(180px, 15vw, 240px); max-width: 100%; min-height: 0; padding: 0; overflow: visible; border: 0; border-radius: 0; background: transparent; line-height: 0; }
.detail-badge--gender-asset img { display: block; width: 100%; max-width: 100%; height: auto; object-fit: contain; }

/* Detail page: keep the two compact information blocks on the left and give the map a full-height right column. */
.detail-secondary { grid-template-columns: minmax(0, .9fr) minmax(0, 1.35fr); grid-template-rows: auto auto; }
.detail-panel--location { display: flex; grid-column: 2; grid-row: 1 / span 2; flex-direction: column; }
.detail-map { height: 232px; position: relative; }
.detail-panel--location .detail-map { flex: 1 0 232px; }
/* The embedded map's service bar is shifted below the clipped map viewport. */
.detail-map iframe { height: calc(100% + 28px); }

@media (max-width: 1200px) {
    .detail-secondary { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto; }
    .detail-panel--location { display: block; grid-column: 1 / -1; grid-row: auto; }
}

@media (max-width: 820px) {
    .detail-secondary { grid-template-columns: 1fr; }
    .detail-panel--location { grid-column: auto; }
    .detail-map { height: 190px; }
    .detail-panel--location .detail-map { flex-basis: 190px; }
}

/* Clear visual hierarchy for the compact information cards. */
.detail-secondary > .detail-panel:not(.detail-panel--location) {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(255, 253, 248, .98), rgba(247, 240, 226, .84));
}
.detail-secondary > .detail-panel:not(.detail-panel--location)::after {
    content: '';
    position: absolute;
    top: -34px;
    right: -26px;
    width: 96px;
    height: 96px;
    border: 1px solid rgba(200, 155, 83, .22);
    border-radius: 50%;
    box-shadow: 0 0 0 13px rgba(200, 155, 83, .06), 0 0 0 26px rgba(200, 155, 83, .035);
    pointer-events: none;
}
.detail-secondary > .detail-panel:not(.detail-panel--location) .detail-section-title {
    position: relative;
    z-index: 1;
    margin: -2px -2px 13px;
    padding: 0 2px 10px;
    border-bottom: 1px solid rgba(231, 207, 168, .8);
}
.detail-facts { gap: 8px; }
.detail-fact {
    display: grid;
    grid-template-columns: 31px minmax(0, 1fr);
    align-content: center;
    column-gap: 8px;
    min-height: 65px;
    padding: 9px 8px;
    border: 1px solid rgba(231, 207, 168, .8) !important;
    border-radius: 12px;
    background: rgba(255, 255, 255, .58);
    transition: transform .18s ease, box-shadow .18s ease;
}
.detail-fact:hover { box-shadow: 0 6px 14px rgba(74, 56, 26, .08); transform: translateY(-2px); }
.detail-fact::before {
    display: grid;
    grid-row: 1 / span 2;
    grid-column: 1;
    width: 30px;
    height: 30px;
    place-items: center;
    color: var(--detail-primary);
    border-radius: 10px;
    background: #e7f2f1;
    font: 800 14px/1 'Manrope', sans-serif;
}
.detail-fact:nth-child(1)::before { content: '⌂'; }
.detail-fact:nth-child(2)::before { content: 'S'; color: #996d2d; background: #fff1d8; }
.detail-fact:nth-child(3)::before { content: '👥'; color: #596b88; background: #edf1fa; font-size: 13px; }
.detail-fact:nth-child(4)::before { content: '✓'; color: #2f806d; background: #e6f5ed; }
.detail-fact small, .detail-fact strong { grid-column: 2; }
.detail-fact small { letter-spacing: .45px; }
.detail-fact strong { margin-top: 3px; }
.detail-amenities { position: relative; z-index: 1; gap: 8px; }
.detail-amenity {
    min-height: 37px;
    padding: 4px 12px 4px 5px;
    border-color: rgba(231, 207, 168, .9);
    box-shadow: 0 3px 8px rgba(79, 52, 22, .045);
    transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.detail-amenity::before { content: none; }
.detail-amenity:hover { border-color: var(--detail-gold); background: #fffdf8; transform: translateY(-2px); }
.detail-amenity__icon {
    display: grid;
    width: 27px;
    height: 27px;
    place-items: center;
    color: var(--detail-primary);
    border-radius: 9px;
    background: #e7f2f1;
    font: 800 15px/1 'Manrope', sans-serif;
}
.detail-amenity:nth-child(3n + 2) .detail-amenity__icon { color: #a16f2b; background: #fff0d3; }
.detail-amenity:nth-child(3n) .detail-amenity__icon { color: #6c628e; background: #eeeafb; }

.detail-contact--address, .detail-map-address--link { transition: border-color .18s ease, color .18s ease, background .18s ease; }
.detail-contact--address:hover { color: var(--detail-primary-dark); border-color: var(--detail-gold); background: #fffaf1; }
.detail-map-address--link { display: block; text-decoration: none; }
.detail-map-address--link span { display: inline-block; margin-left: 3px; color: var(--detail-gold); transition: transform .18s ease; }
.detail-map-address--link:hover { color: var(--detail-primary-dark); text-decoration: underline; text-decoration-color: rgba(200, 155, 83, .65); text-underline-offset: 3px; }
.detail-map-address--link:hover span { transform: translate(2px, -2px); }