.dtg { max-width: 960px; margin: 0 auto; padding: clamp(24px, 5vw, 72px) 24px; padding-top: clamp(16px, 3vw, 40px); }
.dtg [hidden] { display: none !important; }
.dtg-heading { max-width: 720px; margin-bottom: 28px; }
.dtg-heading h1 { margin: 0 0 12px; font-size: clamp(30px, 4vw, 48px); line-height: 1.15; }
.dtg-heading p { color: #525b65; line-height: 1.65; }
.dtg-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; }
.dtg-tabs button { appearance: none; border: 1px solid #c7cdd4; border-radius: 6px; background: #fff; color: #263342; padding: 12px 20px; font: inherit; font-weight: 600; text-shadow: none; box-shadow: none; cursor: pointer; }
.dtg-tabs button[aria-selected="true"] { background: #173c62; color: #fff; border-color: #173c62; }
.dtg-tabs span { margin-left: 5px; font-size: .85em; }
.dtg-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.dtg-shot { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; min-width: 0; padding: 12px; overflow: hidden; border: 1px solid #dde2e8; border-radius: 8px; background: #fff; color: #263342; transition: border-color .18s, box-shadow .18s; }
.dtg-shot img { display: block; width: 100%; height: 100%; object-fit: contain; }
.dtg-shot:hover { border-color: #173c62; box-shadow: 0 4px 16px #173c621a; }
.dtg button:focus-visible, .dtg a:focus-visible, .dtg [role="tabpanel"]:focus-visible { outline: 3px solid #246db4; outline-offset: 4px; }
.dtg-empty { grid-column: 1 / -1; padding: 48px 20px; text-align: center; background: #f4f6f8; border-radius: 8px; }

.btn-custom-lightbox-gallery {
    /* Brand Colors & 3D Effects */
    color: #ffffff !important;
    /*background-color: #ffffff !important;*/
    text-shadow: 0 0.075em 0.075em rgba(0,0,0,0.5) !important;
    /*box-shadow: 0 0.25em 0 0 #ffffff, 0 4px 9px rgba(0,0,0,0.75) !important;*/
    border-radius: 0.25em !important;
    
    /* Reset Button Defaults */
    border: 1px solid hsl(6,100%,9%) !important; /* Added width and style */
    appearance: none;
    cursor: pointer;
    text-decoration: none;
    
    /* Typography & Alignment */
    font-size: 16px !important; /* Adjust if it doesn't exactly match the shortcode font size */
    line-height: 1 !important; /* Kills any weird inherited top spacing */
    
    /* Flexbox for perfect icon + text centering */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important; /* Adds nice spacing between the camera icon and text */
    
    /* Padding (Adjust these specific values to perfectly match the shortcode button's size) */
    padding: 0.75em 1.25em !important;
}
@media (max-width: 900px) { .dtg-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) { .dtg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .dtg { padding-inline: 16px; } }
@media (prefers-reduced-motion: reduce) { .dtg-shot { transition: none; } }