/* ============================================================================
   PHOTO SUITE  -  photosuite.css
   Centralized stylesheet. Loaded after Bootstrap 5 on every page.
   Aesthetic: "golden hour" - warm amber/terracotta/cream, editorial serif
   display type, restrained UI so photography stays the hero.
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600&display=swap');

:root {
    /* Golden hour palette */
    --gh-cream:      #FBF6EE;
    --gh-sand:       #F3E7D3;
    --gh-amber:      #E8A33D;
    --gh-gold:       #D98324;
    --gh-terracotta: #B5552B;
    --gh-rust:       #8C3B1B;
    --gh-charcoal:   #2B2118;
    --gh-ink:        #1A130C;
    --gh-muted:      #7A6A55;
    --gh-line:       #E3D4BD;

    /* Map to Bootstrap-ish roles */
    --bs-body-bg:     var(--gh-cream);
    --bs-body-color:  var(--gh-charcoal);

    --ps-shadow:  0 18px 40px -22px rgba(43,33,24,.45);
    --ps-radius:  4px;
}

/* ---------- Base ---------- */
body {
    background-color: var(--gh-cream);
    color: var(--gh-charcoal);
    font-family: 'DM Sans', system-ui, sans-serif;
    font-weight: 400;
    letter-spacing: .01em;
    /* subtle warm vignette so flat backgrounds feel like dusk light */
    background-image:
        radial-gradient(120% 80% at 80% -10%, rgba(232,163,61,.18), transparent 55%),
        radial-gradient(100% 70% at -10% 110%, rgba(181,85,43,.10), transparent 50%);
    background-attachment: fixed;
    min-height: 100vh;
}

h1, h2, h3, h4, h5, .display-serif {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 500;
    letter-spacing: -.01em;
    color: var(--gh-ink);
}

a { color: var(--gh-terracotta); text-decoration: none; }
a:hover { color: var(--gh-rust); }

.text-muted-warm { color: var(--gh-muted) !important; }
.bg-cream { background-color: var(--gh-cream) !important; }
.bg-sand  { background-color: var(--gh-sand)  !important; }

/* ---------- Top nav ---------- */
.ps-nav {
    background: rgba(251,246,238,.88);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--gh-line);
}
.ps-brand {
    font-family: 'Fraunces', serif;
    font-weight: 600;
    font-size: 1.4rem;
    letter-spacing: .02em;
    color: var(--gh-ink) !important;
}
.ps-brand .dot { color: var(--gh-gold); }
.ps-nav .nav-link {
    color: var(--gh-charcoal);
    font-weight: 500;
    font-size: .95rem;
    position: relative;
}
.ps-nav .nav-link:hover { color: var(--gh-gold); }
.ps-nav .nav-link.active::after {
    content: ""; position: absolute; left: .5rem; right: .5rem; bottom: 2px;
    height: 2px; background: var(--gh-gold);
}

/* ---------- Buttons ---------- */
.btn-gold {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--gh-gold);
    --bs-btn-border-color: var(--gh-gold);
    --bs-btn-hover-bg: var(--gh-terracotta);
    --bs-btn-hover-border-color: var(--gh-terracotta);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--gh-rust);
    --bs-btn-active-border-color: var(--gh-rust);
    font-weight: 600; letter-spacing: .02em;
}
.btn-outline-gold {
    --bs-btn-color: var(--gh-terracotta);
    --bs-btn-border-color: var(--gh-gold);
    --bs-btn-hover-bg: var(--gh-gold);
    --bs-btn-hover-border-color: var(--gh-gold);
    --bs-btn-hover-color: #fff;
    font-weight: 600;
}
.btn { border-radius: var(--ps-radius); }

/* ---------- Cards / panels ---------- */
.card {
    border: 1px solid var(--gh-line);
    border-radius: var(--ps-radius);
    background: #fff;
}
.ps-panel {
    background: #fff;
    border: 1px solid var(--gh-line);
    border-radius: var(--ps-radius);
    box-shadow: var(--ps-shadow);
}

/* ---------- Hero ---------- */
.ps-hero {
    padding: 6rem 0 5rem;
    background:
        linear-gradient(180deg, rgba(251,246,238,.2), rgba(251,246,238,.95)),
        radial-gradient(70% 120% at 70% 0%, rgba(232,163,61,.35), transparent 60%);
    text-align: center;
}
.ps-hero h1 {
    font-size: clamp(2.6rem, 6vw, 4.6rem);
    line-height: 1.02;
}
.ps-hero .lead { color: var(--gh-muted); max-width: 36rem; margin: 1.25rem auto 0; }
.ps-eyebrow {
    text-transform: uppercase; letter-spacing: .28em; font-size: .72rem;
    color: var(--gh-gold); font-weight: 600;
}

/* ---------- Gallery grid ---------- */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1rem;
}
.photo-tile {
    position: relative; overflow: hidden; border-radius: var(--ps-radius);
    background: var(--gh-sand); aspect-ratio: 4/3; cursor: pointer;
    box-shadow: var(--ps-shadow);
}
.photo-tile img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform .6s cubic-bezier(.2,.7,.2,1);
}
.photo-tile:hover img { transform: scale(1.05); }
.photo-tile .tile-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 45%, rgba(26,19,12,.78));
    opacity: 0; transition: opacity .35s ease;
    display: flex; flex-direction: column; justify-content: flex-end;
    padding: .9rem 1rem; color: #fff;
}
.photo-tile:hover .tile-overlay { opacity: 1; }
.photo-tile .tile-price {
    align-self: flex-start; background: var(--gh-gold); color: #fff;
    font-size: .8rem; font-weight: 600; padding: .15rem .55rem; border-radius: 999px;
}

/* protect-the-work helper: block right-click image saving on previews */
.no-save { -webkit-user-drag: none; user-select: none; pointer-events: auto; }

/* ---------- Admin sidebar ---------- */
.admin-shell { display: flex; min-height: calc(100vh - 64px); }
.admin-side {
    width: 240px; flex: 0 0 240px;
    background: var(--gh-charcoal);
    color: var(--gh-sand); padding: 1.5rem 0;
}
.admin-side .side-brand { padding: 0 1.5rem 1.25rem; font-family:'Fraunces',serif; font-size:1.15rem; color:#fff; }
.admin-side a {
    display: flex; align-items: center; gap: .65rem;
    padding: .7rem 1.5rem; color: var(--gh-sand); font-weight: 500; font-size:.93rem;
    border-left: 3px solid transparent;
}
.admin-side a:hover { background: rgba(255,255,255,.06); color:#fff; }
.admin-side a.active { border-left-color: var(--gh-amber); background: rgba(232,163,61,.14); color:#fff; }
.admin-main { flex: 1 1 auto; padding: 2rem; min-width: 0; }
@media (max-width: 768px) {
    .admin-shell { flex-direction: column; }
    .admin-side  { width: 100%; flex-basis: auto; display:flex; flex-wrap:wrap; padding:.5rem; }
    .admin-side .side-brand { width:100%; padding:.5rem 1rem; }
    .admin-side a { border-left:none; border-bottom:3px solid transparent; padding:.5rem .9rem; }
}

/* ---------- Stat cards ---------- */
.stat-card { padding: 1.25rem 1.4rem; }
.stat-card .stat-num { font-family:'Fraunces',serif; font-size: 2.1rem; color: var(--gh-ink); line-height:1; }
.stat-card .stat-label { color: var(--gh-muted); font-size:.82rem; text-transform:uppercase; letter-spacing:.12em; }

/* ---------- Forms ---------- */
.form-control, .form-select {
    border-radius: var(--ps-radius);
    border-color: var(--gh-line);
    background: #fff;
}
.form-control:focus, .form-select:focus {
    border-color: var(--gh-amber);
    box-shadow: 0 0 0 .2rem rgba(232,163,61,.2);
}
.form-label { font-weight: 600; font-size:.9rem; color: var(--gh-charcoal); }

/* ---------- Footer ---------- */
.ps-footer {
    background: var(--gh-ink); color: var(--gh-sand);
    padding: 3rem 0 2rem; margin-top: 4rem;
}
.ps-footer a { color: var(--gh-amber); }
.ps-footer .brand { font-family:'Fraunces',serif; font-size:1.3rem; color:#fff; }

/* ---------- Misc ---------- */
.badge-soft { background: var(--gh-sand); color: var(--gh-rust); font-weight:600; }
.divider-dot::before { content:"·"; margin:0 .5rem; color: var(--gh-muted); }
.fade-up { animation: fadeUp .6s cubic-bezier(.2,.7,.2,1) both; }
@keyframes fadeUp { from { opacity:0; transform: translateY(14px);} to { opacity:1; transform:none; } }

/* =====================================================================
   Supplementary components: public album cards, gallery gate, cart,
   checkout, orders. Appended block — same golden-hour tokens as above.
   ===================================================================== */

.eyebrow { /* alias used by some public pages */
    text-transform: uppercase; letter-spacing: .28em; font-size: .72rem;
    color: var(--gh-gold); font-weight: 600;
}

/* ---------- Public album cards ---------- */
.album-card {
    background: #fff; border-radius: var(--ps-radius);
    overflow: hidden; box-shadow: var(--ps-shadow);
    color: var(--gh-ink); transition: transform .3s ease, box-shadow .3s ease;
    border: 1px solid var(--gh-line);
}
.album-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(43,33,24,.16); color: var(--gh-ink); }
.album-card-cover { position: relative; aspect-ratio: 3/2; background: var(--gh-sand); overflow: hidden; }
.album-card-cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.album-card:hover .album-card-cover img { transform: scale(1.05); }
.album-card-empty { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--gh-muted); font-size: 2.5rem; }
.album-card-count {
    position: absolute; bottom: .7rem; right: .7rem;
    background: rgba(26,19,12,.72); color: #fff; font-size: .72rem;
    padding: .2rem .6rem; border-radius: 999px; backdrop-filter: blur(3px);
}
.album-card-body { padding: 1rem 1.15rem 1.2rem; }
.album-card-studio { color: var(--gh-gold); font-size: .85rem; font-weight: 600; }
.album-card-date { color: var(--gh-muted); font-size: .8rem; }

/* ---------- Access gate (password / invite) ---------- */
.gate-card {
    max-width: 460px; margin: 4rem auto; background: #fff;
    border-radius: var(--ps-radius); box-shadow: var(--ps-shadow);
    padding: 2.5rem 2.25rem; text-align: center; border: 1px solid var(--gh-line);
}
.gate-card .bi { font-size: 2.4rem; color: var(--gh-gold); }

/* ---------- Cart & checkout ---------- */
.cart-line { display: flex; gap: 1rem; align-items: center; padding: 1rem 0; border-bottom: 1px solid var(--gh-line); }
.cart-thumb { width: 96px; height: 72px; flex: 0 0 96px; border-radius: 10px; overflow: hidden; background: var(--gh-sand); }
.cart-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cart-summary {
    background: #fff; border: 1px solid var(--gh-line); border-radius: var(--ps-radius);
    box-shadow: var(--ps-shadow); padding: 1.5rem;
}
.cart-summary .row-line { display: flex; justify-content: space-between; margin-bottom: .55rem; }
.cart-summary .row-total { display: flex; justify-content: space-between; font-weight: 700; font-size: 1.25rem; border-top: 1px solid var(--gh-line); padding-top: .8rem; margin-top: .4rem; }
.pay-card { background:#fff; border:1px solid var(--gh-line); border-radius:var(--ps-radius); box-shadow:var(--ps-shadow); padding:1.75rem; }

/* ---------- Order tables ---------- */
.order-status { font-size:.74rem; font-weight:600; padding:.2rem .6rem; border-radius:999px; text-transform:uppercase; letter-spacing:.04em; }
.order-status.paid    { background:#e7f3e8; color:#2f7d32; }
.order-status.pending { background:#fbf0d9; color:#9a6a16; }
.order-status.failed  { background:#fbe3e0; color:#b5392b; }

/* ---------- Access badges ---------- */
.access-badge { font-size:.72rem; font-weight:600; padding:.18rem .55rem; border-radius:999px; }
.access-badge.public   { background:#e7f3e8; color:#2f7d32; }
.access-badge.password { background:#fbf0d9; color:#9a6a16; }
.access-badge.invite   { background:#eee7fb; color:#6a44ca; }

/* ---------- Studio homepage (client-facing, per tenant) ---------- */
.studio-hero {
    position: relative;
    padding: 7rem 0 6rem;
    text-align: center;
    color: var(--gh-cream);
    background-color: var(--gh-ink);
    background-image:
        radial-gradient(120% 80% at 80% -10%, rgba(232,163,61,.35), transparent 55%),
        radial-gradient(100% 70% at -10% 110%, rgba(181,85,43,.28), transparent 50%);
    background-size: cover;
    background-position: center;
    overflow: hidden;
}
.studio-hero.has-cover::before {
    /* dusk overlay so text stays legible over any photo */
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(26,19,12,.55) 0%, rgba(26,19,12,.72) 100%);
}
.studio-hero-inner { position: relative; z-index: 1; max-width: 46rem; }
.studio-hero h1 { color: #fff; font-size: clamp(2.4rem, 5vw, 3.8rem); line-height: 1.05; }
.studio-hero .lead { color: var(--gh-sand); opacity: .92; max-width: 36rem; margin: 1.25rem auto 0; }
.studio-hero .ps-eyebrow { color: var(--gh-amber); }
.studio-hero .btn-outline-light { border-radius: var(--ps-radius); }

.step-num {
    width: 3rem; height: 3rem; margin: 0 auto;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; background: var(--gh-sand); color: var(--gh-rust);
    font-family: 'Fraunces', serif; font-size: 1.35rem; font-weight: 600;
}
.studio-about p { margin-bottom: 1rem; }
.contact-lines li { margin-bottom: .6rem; }
.contact-lines .bi { color: var(--gh-gold); margin-right: .4rem; }

/* honeypot: visually removed but still in the DOM for bots to fill */
.hp-field { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Platform marketing page ---------- */
.mkt-hero {
    padding: 7rem 0 6rem;
    color: var(--gh-cream);
    background-color: var(--gh-ink);
    background-image:
        radial-gradient(110% 80% at 85% -10%, rgba(232,163,61,.38), transparent 55%),
        radial-gradient(90% 70% at -10% 115%, rgba(181,85,43,.30), transparent 50%);
}
.mkt-hero-inner { max-width: 44rem; }
.mkt-hero h1 { color: #fff; font-size: clamp(2.6rem, 5.5vw, 4.2rem); line-height: 1.04; }
.mkt-hero h1 .accent { color: var(--gh-gold); }
.mkt-hero .lead { color: var(--gh-sand); opacity: .92; max-width: 38rem; margin-top: 1.25rem; }
.mkt-hero code { color: var(--gh-amber); background: rgba(243,231,211,.08); padding: .1em .35em; border-radius: .3em; }
.mkt-hero .ps-eyebrow { color: var(--gh-amber); }

.mkt-price { font-family: 'Fraunces', serif; font-size: 2.6rem; color: var(--gh-rust); margin: .25rem 0 .75rem; }
.mkt-price span { font-size: 1rem; color: var(--gh-brown); opacity: .7; }
.mkt-plan li { padding: .3rem 0 .3rem 1.4rem; position: relative; }
.mkt-plan li::before { content: "\2713"; position: absolute; left: 0; color: var(--gh-gold); font-weight: 700; }
.mkt-featured { border: 2px solid var(--gh-gold); box-shadow: var(--ps-shadow); }
.mkt-tags .badge { font-size: .95rem; font-weight: 500; }

/* ---------- Pricing comparison table ---------- */
.mkt-price-wrap { background: var(--gh-cream); border-radius: var(--ps-radius); box-shadow: var(--ps-shadow); }
.mkt-price-table { min-width: 46rem; }
.mkt-price-table th, .mkt-price-table td { background: transparent; border-color: rgba(90,62,43,.12); padding: .8rem 1rem; }
.mkt-price-table thead th { border-bottom: 2px solid rgba(90,62,43,.2); padding-top: 1.4rem; }
.mkt-plan-name { font-family: 'Fraunces', serif; font-size: 1.2rem; color: var(--gh-brown); }
.mkt-price-table .mkt-price { font-size: 2rem; margin: .1rem 0 .6rem; }
.mkt-col-feature { text-align: left; color: var(--gh-brown); font-weight: 500; min-width: 14rem; }
.mkt-col-featured { background: rgba(232,163,61,.10) !important; }
.mkt-yes { color: var(--gh-gold); font-size: 1.3rem; }
.mkt-no  { color: var(--gh-brown); opacity: .35; }
.mkt-val { color: var(--gh-brown); font-size: .95rem; }

/* ---------- Marketing showcase sections (pure-CSS product mockups) ---------- */
.mkt-show.alt { background: var(--gh-sand); }
.mkt-checks li { padding: .3rem 0 .3rem 1.6rem; position: relative; color: var(--gh-brown); }
.mkt-checks li::before { content: "\2713"; position: absolute; left: 0; color: var(--gh-gold); font-weight: 700; }

.shot-frame { background: #fff; border-radius: var(--ps-radius); box-shadow: var(--ps-shadow); overflow: hidden; border: 1px solid rgba(90,62,43,.12); }
.shot-bar { display: flex; align-items: center; gap: .4rem; padding: .55rem .9rem; background: var(--gh-sand); border-bottom: 1px solid rgba(90,62,43,.12); }
.shot-bar span { width: .65rem; height: .65rem; border-radius: 50%; background: rgba(90,62,43,.25); }
.shot-bar em { font-style: normal; font-size: .75rem; color: var(--gh-brown); opacity: .7; margin-left: .5rem;
    background: #fff; border-radius: 1rem; padding: .15rem .8rem; flex: 1; text-align: center; }
.shot-body { padding: 1.1rem; }

/* fake photos: warm gradient placeholders */
.ph { border-radius: .5rem; background: linear-gradient(135deg, var(--gh-amber), var(--gh-rust)); min-height: 5.5rem; }
.ph.chip { min-height: 2.4rem; width: 2.4rem; flex: 0 0 2.4rem; }
.ph-1 { background: linear-gradient(135deg, #e8a33d, #b5552b); }
.ph-2 { background: linear-gradient(160deg, #f3e7d3, #e8a33d); }
.ph-3 { background: linear-gradient(135deg, #b5552b, #5a3e2b); }
.ph-4 { background: linear-gradient(150deg, #e8a33d 20%, #8a6a3f); }
.ph-5 { background: linear-gradient(145deg, #d9b98a, #b5552b); }
.ph-6 { background: linear-gradient(135deg, #5a3e2b, #e8a33d); }
.ph-7 { background: linear-gradient(160deg, #c98a4b, #7a4a26); }
.ph-8 { background: linear-gradient(140deg, #efd9b8, #c9762f); }

.shot-gallery-head { margin-bottom: .8rem; }
.shot-title { font-family: 'Fraunces', serif; font-size: 1.15rem; color: var(--gh-brown); }
.shot-sub { font-size: .8rem; color: var(--gh-brown); opacity: .6; }
.shot-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; }
.shot-grid .tall { grid-row: span 2; }
.shot-grid .wide { grid-column: span 2; }
.shot-grid.three { grid-template-columns: repeat(3, 1fr); margin-top: .8rem; }

.shot-site-hero { text-align: center; padding: 1.2rem 1rem 1.4rem; background:
    radial-gradient(120% 100% at 80% -20%, rgba(232,163,61,.35), transparent 60%), var(--gh-ink);
    border-radius: .5rem; color: var(--gh-cream); }
.shot-site-name { font-size: .65rem; letter-spacing: .25em; color: var(--gh-amber); margin-bottom: .4rem; }
.shot-site-head { font-family: 'Fraunces', serif; font-size: 1.4rem; }
.shot-btn-row { margin-top: .9rem; display: flex; gap: .5rem; justify-content: center; }
.shot-btn { display: inline-block; font-size: .78rem; padding: .35rem 1rem; border-radius: 2rem; cursor: default; }
.shot-btn.sm { font-size: .8rem; }
.shot-btn.gold { background: var(--gh-gold); color: #2b1d10; font-weight: 600; }
.shot-btn.ghost { border: 1px solid rgba(243,231,211,.6); color: var(--gh-cream); }
.shot-order .shot-btn.ghost { border-color: rgba(90,62,43,.4); color: var(--gh-brown); }

.shot-cal-wrap { display: flex; gap: 1rem; flex-wrap: wrap; }
.shot-cal { flex: 1 1 14rem; }
.shot-cal-head { font-family: 'Fraunces', serif; color: var(--gh-brown); margin-bottom: .5rem; }
.shot-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: .25rem; }
.shot-cal-grid b { font-size: .65rem; text-align: center; color: var(--gh-brown); opacity: .5; font-weight: 600; }
.shot-cal-grid i { font-style: normal; font-size: .75rem; text-align: center; padding: .35rem 0;
    border-radius: .4rem; color: var(--gh-brown); opacity: .45; }
.shot-cal-grid i.ok  { background: var(--gh-sand); opacity: 1; }
.shot-cal-grid i.sel { background: var(--gh-gold); color: #2b1d10; font-weight: 700; opacity: 1; }
.shot-cal-side { flex: 1 1 11rem; border-left: 1px solid rgba(90,62,43,.12); padding-left: 1rem; }
.shot-cal-session { font-family: 'Fraunces', serif; color: var(--gh-brown); }
.shot-cal-line { font-size: .75rem; color: var(--gh-brown); opacity: .6; margin-bottom: .6rem; }
.shot-cal-slot { border: 1px solid rgba(90,62,43,.3); border-radius: .4rem; text-align: center;
    padding: .3rem; font-size: .8rem; color: var(--gh-brown); margin-bottom: .4rem; }
.shot-cal-slot.sel { background: var(--gh-sand); border-color: var(--gh-gold); font-weight: 600; }

.shot-order { display: flex; gap: 1rem; flex-wrap: wrap; }
.shot-order-lines { flex: 2 1 16rem; }
.shot-order-line { display: flex; align-items: center; gap: .6rem; font-size: .85rem; color: var(--gh-brown);
    padding: .45rem 0; border-bottom: 1px solid rgba(90,62,43,.1); }
.shot-order-line span:nth-child(2) { flex: 1; }
.shot-order-total { display: flex; justify-content: space-between; padding-top: .6rem;
    font-family: 'Fraunces', serif; color: var(--gh-brown); }
.shot-order-pay { flex: 1 1 9rem; display: flex; flex-direction: column; gap: .5rem; align-items: stretch; text-align: center; }

@media (max-width: 575px) {
  .shot-grid { grid-template-columns: repeat(3, 1fr); }
  .shot-grid .wide { grid-column: span 1; }
}

/* real marketing photos dropped into the placeholder slots */
.ph.img { object-fit: cover; width: 100%; height: 100%; min-height: 5.5rem; display: block; }
.ph.img.chip { min-height: 2.4rem; height: 2.4rem; width: 2.4rem; }
.shot-grid .ph, .shot-grid .ph.img { aspect-ratio: 4 / 3; min-height: 0; }
.shot-grid .tall { aspect-ratio: auto; height: 100%; }
.shot-grid { grid-auto-rows: 1fr; }
.shot-grid.three .ph, .shot-grid.three .ph.img { aspect-ratio: 1 / 1; }

/* sample gallery panels in the Made-for section */
.mkt-panel { width: 100%; border-radius: var(--ps-radius); box-shadow: var(--ps-shadow);
    border: 1px solid rgba(90,62,43,.12); display: block; }

/* larger 3-col gallery mockup: deterministic layout, no inherited sizing.
   Three squares on the first row, one full-width banner below. */
.shot-grid.big { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: auto; gap: .5rem; }
.shot-grid.big .ph,
.shot-grid.big .ph.img { aspect-ratio: 1 / 1 !important; width: 100%; height: auto !important;
    min-height: 0 !important; object-fit: cover; grid-row: auto; grid-column: auto; }
.shot-grid.big .wide,
.shot-grid.big .ph.img.wide { grid-column: 1 / -1; aspect-ratio: 1.9 / 1 !important; }

/* ---------- Booking (public/book.cfm) ---------- */
.book-type { border: 2px solid transparent; color: inherit; transition: border-color .15s; }
.book-type:hover { border-color: rgba(232,163,61,.5); }
.book-type.sel { border-color: var(--gh-gold); }
.book-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: .3rem; }
.book-cal b { font-size: .7rem; text-align: center; color: var(--gh-brown); opacity: .55; font-weight: 600; padding: .2rem 0; }
.book-cal i, .book-cal a { font-style: normal; text-align: center; padding: .45rem 0; border-radius: .45rem;
    font-size: .9rem; color: var(--gh-brown); }
.book-cal i { opacity: .35; }
.book-cal i.pad { opacity: 0; }
.book-cal a.ok { background: var(--gh-sand); text-decoration: none; font-weight: 600; }
.book-cal a.ok:hover { background: rgba(232,163,61,.35); }
.book-cal a.sel { background: var(--gh-gold); color: #2b1d10; }
.book-slot input { position: absolute; opacity: 0; }
.book-slot span { display: inline-block; border: 1px solid rgba(90,62,43,.35); border-radius: 2rem;
    padding: .35rem 1rem; font-size: .9rem; color: var(--gh-brown); cursor: pointer; }
.book-slot input:checked + span { background: var(--gh-gold); border-color: var(--gh-gold); color: #2b1d10; font-weight: 600; }
.book-slot { position: relative; }

/* product picker on gallery tiles */
.tile-prod { max-width: 11rem; font-size: .78rem; padding: .2rem .4rem; }

/* admin photo manager */
.admin-photo-thumb { display:block; position:relative; aspect-ratio: 4/3; overflow:hidden;
    border-radius: 4px 4px 0 0; background: var(--gh-sand); }
.admin-photo-thumb img { width:100%; height:100%; object-fit:cover; transition: transform .15s; }
.admin-photo-thumb:hover img { transform: scale(1.03); }
.cover-badge { position:absolute; top:.4rem; left:.4rem; background: var(--gh-gold); color:#2b1d10; }

/* client gallery: whole tile opens the lightbox */
.photo-tile .tile-view { display:block; cursor: zoom-in; }

/* photo card: image opens the lightbox, purchase bar sits BELOW the image */
.photo-card { background:#fff; border-radius: var(--ps-radius); overflow:hidden;
    box-shadow: var(--ps-shadow); display:flex; flex-direction:column; }
.photo-card .tile-view { position:relative; display:block; aspect-ratio: 4/3;
    background: var(--gh-sand); cursor: zoom-in; }
.photo-card .tile-view img { width:100%; height:100%; object-fit:cover; display:block;
    transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.photo-card .tile-view:hover img { transform: scale(1.04); }
.photo-card .tile-zoom { position:absolute; right:.5rem; bottom:.5rem;
    background: rgba(26,19,12,.65); color:#fff; border-radius:.4rem;
    padding:.25rem .45rem; font-size:.8rem; opacity:0; transition: opacity .25s; }
.photo-card .tile-view:hover .tile-zoom { opacity:1; }
.photo-card-buy { padding: .6rem .7rem .7rem; }
.photo-card-buy .tile-price { background: var(--gh-gold); color:#2b1d10;
    font-size:.85rem; font-weight:600; padding:.15rem .6rem; border-radius:999px; }

/* ---------- gallery hero: readable on the dark band, always ---------- */
.gallery-hero { background: var(--gh-charcoal); }
.gallery-hero h1, .gallery-hero .display-6 { color: #fdf8f0 !important; }
.gallery-hero p, .gallery-hero .lead { color: rgba(253,248,240,.85) !important; }
.gallery-hero .eyebrow { color: var(--gh-gold) !important; }

/* ---------- uniform photo cards: identical image box, aligned buttons ----------
   The image box is a fixed 4:3 frame via padding-top (works everywhere,
   regardless of the photo's own shape); cards stretch to equal height per row
   and the download row pins to the bottom. */
.gallery-grid { align-items: stretch; }
.photo-card { height: 100%; }
.photo-card .tile-view { position: relative; padding-top: 75%; aspect-ratio: auto; height: auto; }
.photo-card .tile-view img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.photo-card .tile-zoom { z-index: 2; }
.photo-card-buy { display: flex; flex-direction: column; flex: 1 1 auto; gap: .35rem; }
.photo-card-buy .buy-title { min-height: 1.3em; margin-bottom: 0; }
.photo-card-buy form { margin: 0 !important; }
.photo-card-buy > a.btn { margin-top: auto !important; }