/* Single Foto Page — Foto 2023 nav + PSD Replica wrapper */
/* Loaded only on is_singular('foto') */

/* Foto 2023 */

.prev1 img {
    border-radius: 10px !important;
    margin-top: 20px;
}

.prev1div p {
    font-family: 'Raleway optimized' !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    color: #69817e !important;
    line-height: 16px !important;
}

.next1 img {
    border-radius: 10px !important;
    margin-top: 20px;
}

.next1div p {
    font-family: 'Raleway optimized' !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    color: #69817e !important;
    line-height: 16px !important;
}


.prev3 img {
    height: 90px !important;
    width: auto !important;
    float: right;
    padding: 5px;
    border-radius: 12px !important;
}

.next3 img {
    height: 90px !important;
    width: auto !important;
    float: left;
    padding: 5px;
    border-radius: 12px !important;
}

.curimg img {
    height: 90px !important;
    border-radius: 12px !important;
    width: auto !important;
    margin: 5px;
    font-weight: 600;
    font-size: 14px;
    color: #69817e;
    line-height: 16px;
}

.curimgmob img {
    border-radius: 5px !important;
    display: block;
    width: 100%;
    height: auto;
}

.next1mob img {
    border-radius: 5px !important;
    margin-bottom: 5px;
    display: block;
    width: 100%;
    height: auto;
}

.prev1mob img {
    border-radius: 5px !important;
    margin-bottom: 5px;
    display: block;
    width: 100%;
    height: auto;
}

.prev1mob p {
    margin-bottom: 0px !important;
    font-size: 14px !important;
}

.next1mob p {
    margin-bottom: 0px !important;
    font-size: 14px !important;
}

.prev0 {
    font-family: 'Raleway optimized' !important;
    font-weight: 700;
    font-size: 18px;
    color: #69817e;
}

.next0 {
    font-family: 'Raleway optimized' !important;
    font-weight: 700;
    font-size: 18px;
    color: #69817e;
}

.psdnavmob a {
    font-size: 16px !important;
    font-weight: 600;
}

.psdnavmob p {
    font-size: 16px !important;
}

@media screen and (max-width: 767px) {
    .prev0 {
        font-weight: 600;
        font-size: 14px;
        color: #69817e;
    }

    .next0 {
        font-weight: 600;
        font-size: 14px;
        color: #69817e;
    }
}

.pswp__caption a {
    font-weight: bold;
    color: #fff;
}

.fotonummer p {
    color: #555 !important;
    font-size: 14px !important;
    line-height: 14px !important;
}

.fotomobcrumb p {
    line-height: 20px !important;
    font-size: 14px !important;
}

.fotomobcrumb a {
    line-height: 20px !important;
    font-size: 14px !important;
}

.fotoalbumuitgelicht p {
    font-weight: bold;
    font-size: 12px !important;
    color: #2C3F5B;
    line-height: 12px !important;
}

.fotoalbumcount h6 {
    font-size: 12px !important;
}

@media screen and (min-width: 767px) {
    .fotoalbumuitgelicht p {
        font-size: 14px !important;
        line-height: 14px !important;
    }

    .fotoalbumcount h6 {
        font-size: 14px !important;
    }
}

@media screen and (min-width: 1024px) {
    .fotoalbumuitgelicht p {
        font-size: 14px !important;
        line-height: 14px !important;
    }

    .fotoalbumcount h6 {
        font-size: 14px !important;
    }
}

/* Technische gegevens inline slider */

.spectekst p {
    margin-top: 5px;
    margin-bottom: 5px;
    font-family: 'Raleway optimized' !important;
}

.specbutton span {
    padding-bottom: 2px;
    line-height: 80% !important;
    font-family: 'Raleway optimized' !important;
}

@media screen and (max-width: 767px) {
    .spectekst p {
        text-align: center !important;
        font-size: 14px !important;
    }

    .specbutton span {
        font-size: 14px !important;
    }
}

/* Anekdotes */
.publicatiedatum p {
    font-size: 16px !important;
    color: #666 !important;
    font-family: 'Raleway optimized' !important;
}

.intro-auteur p {
    color: #444749 !important;
}

.intro-link a {
    color: #2C3F5B !important;
}

/* PSD tags fotopaginas */
.psd-posttags {
    display: inline;
    padding: 0px;
    margin: 0px;
}

.psd-tag {
    float: left;
    background: #fff;
    border-radius: 25px;
    padding-top: 2px;
    padding-bottom: 5px;
    padding-left: 15px;
    padding-right: 15px;
    margin-right: 10px;
    margin-bottom: 10px;
    line-height: 25px;
    font-size: 12px;
}

@media screen and (min-width: 767px) {
    .psd-tag {
        float: left;
        background: #fff;
        border-radius: 25px;
        padding-top: 0px;
        padding-bottom: 5px;
        padding-left: 15px;
        padding-right: 15px;
        margin-right: 10px;
        margin-bottom: 10px;
        font-size: 16px;
    }
}

.psd-opsomming {
    padding-bottom: 15px;
}

.psd-opsomming li::marker {
    color: #e6c37d;
}

.psd-opsomming ul {
    list-style-type: square;
    padding-left: 20px;
}

/* Bericht grid */

.e-filter-item {
    border: none;
}

.psdcrop {
    height: auto;
    width: 100%;
    overflow: hidden;
}

.berichtimg {
    width: 100%;
    height: auto;
}


@media screen and (min-width: 767px) {
    .psdcrop {
        height: 93px;
        width: 100%;
        overflow: hidden;
    }
}

.psd-btn {
    font-family: 'Raleway optimized' !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    color: #333 !important;
    line-height: 14px !important;
}

.psd-btn:hover {
    color: #333 !important;
}

/* Button Foto terug naar album */
.psd-album-onder .psd-album-btn {
    display: flex;
    /* Flexbox makes centering easy */
    justify-content: center;
    /* Center text horizontally */
    align-items: center;
    /* Center text vertically */
    width: 100%;
    /* Fill the entire column width */
    min-height: 80px;
    /* Force it to match the height of neighbor buttons */

    background-color: #e0e0e0;
    /* Grey color to match your grid (change to #fff if you prefer white) */
    color: #383838;
    /* Dark grey text */

    border-radius: 10px;
    /* Rounded corners */
    text-decoration: none;
    /* Remove standard link underline */
    font-weight: 700;
    /* Bold text */
    font-size: 16px;
    /* Readable font size */

    transition: all 0.3s ease;
    /* Smooth hover animation */
}

/* Hover Effect */
.psd-album-onder .psd-album-btn:hover {
    background-color: #e6c37d;
    color: #000;
    /* Black text on hover */
    transform: translateY(-2px);
    /* Subtle lift effect */
}

/* Force Headers to have NO bottom space — gescopet op de replica-wrapper.
   Stond hier eerst ongescopet als `h1,h2,...,h6`, waardoor elke kop op de
   pagina (ook in de header en footer) zijn ondermarge kwijtraakte. */
.psd-replica-wrapper h1,
.psd-replica-wrapper h2,
.psd-replica-wrapper h3,
.psd-replica-wrapper h4,
.psd-replica-wrapper h5,
.psd-replica-wrapper h6 {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* ==========================================================================
   PSD REPLICA STYLES V6 (Final Layout - Scoped)
   ========================================================================== */

/* 1. Global Wrapper & Reset (Scoped) */
.psd-replica-wrapper {
    width: 100%;
    background-color: #eeeeee;
    /* Global grey */
    /* font-family: 'Open Sans', ... Removed to inherit global site font */
    color: #444;
}

.psd-replica-wrapper * {
    box-sizing: border-box;
}

/* 2. Layout Sections */
.psd-replica-wrapper .psd-container {
    max-width: 100%;
    /* Default to full width for "stick to sides" behavior */
    margin: 0 auto;
    padding: 0 20px;
}

/* Responsive: Larger screens constraint? 
   Actually user wants sidebar to stick to sides always? 
   "Make the thumbs... stick to the sides of the screen also at lower resolution... and make the main image therefore bigger."
   So strict 1200px limit was the problem.
   We can keep limits for very large screens if we want to avoid absurdly wide images, 
   or just let it flow. The user's existing rules for 1400/1800 seemed to imply they WANTED width.
   Let's keep the explicitly large overrides just in case, or refine them.
*/
@media (min-width: 1800px) {
    .psd-replica-wrapper .psd-container {
        max-width: 1800px;
        /* Cap width on giant screens */
    }
}

/* Constrain text content so it doesn't get too wide */
.psd-replica-wrapper .psd-content-block {
    max-width: 1100px;
    margin: 0 auto;
}

/* Top White Banner (Headers, Photo, Filmstrip) -> NOW REMOVED in favor of White Strip only */
/* No specific style needed for top section as it falls back to wrapper grey */

/* Middle White Strip */
.psd-replica-wrapper .psd-white-strip {
    background-color: #ffffff;
    width: 100%;
    padding: 19px 0 15px 0;
    /* Adjusted: +4px from original 15px (User said +9px was too much) */
    margin-bottom: 0;
    border-top: 1px solid #e0e0e0;
    /* Optional separator */
    border-bottom: 1px solid #e0e0e0;
}

/* Bottom Content Section (Description, Tags, Nav) */
.psd-replica-wrapper .psd-content-section {
    background-color: #eeeeee !important;
    padding-top: 20px;
    /* Increased to 20px (+5px) */
    /* Reduced by 20px (30->10) to move description up */
    padding-bottom: 32px;
    /* Reduced from 50px to match top visual spacing */
    width: 100%;
}

@media screen and (max-width: 900px) {
    .psd-replica-wrapper .psd-content-section {
        padding-top: 17px;
        /* Increased to 17px (+5px) */
    }
}

.psd-replica-wrapper .psd-content-section .psd-container {
    max-width: 1100px;
    margin: 0 auto;
}

/* 3. Headers & Breadcrumbs (Inside Stage Center) */
.psd-replica-wrapper .psd-custom-header {
    /* Minimal padding */
    padding: 6px 0;
    margin-bottom: 25px;
    font-size: 15px;
    color: #444;
    border-bottom: 1px solid #eee;

    /* Full width of the center stage */
    width: 100%;

    /* Indentation: Pull slightly left as requested */
    margin-left: -15px !important;
    padding-left: 0 !important;

    /* Flex content alignment */
    text-align: left;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    /* min-height removed for compact minimal look */
}

/* Unified Link Styling for ALL breadcrumb links including 'Fotopagina' */
.psd-replica-wrapper .psd-custom-header a,
.psd-replica-wrapper .psd-custom-header .header-link-combined {
    font-weight: 700;
    color: #222 !important;
    /* Force consistent color - black to match other breadcrumbs */
    text-decoration: none;
    margin-right: 0;
    /* Let separator handle spacing */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.psd-replica-wrapper .psd-custom-header a:hover,
.psd-replica-wrapper .psd-custom-header .header-link-combined:hover {
    text-decoration: underline;
}

/* Mobile Touch Targets for Replica Wrapper Breadcrumbs */
@media (max-width: 768px) {
    .psd-replica-wrapper .psd-custom-header a,
    .psd-replica-wrapper .psd-custom-header .header-link-combined {
        display: inline-block;
        min-height: 44px;
        padding: 12px 8px;
        line-height: 20px;
    }
    .psd-replica-wrapper .psd-custom-header .header-sep {
        padding: 12px 4px;
        min-height: 44px;
        display: inline-block;
        line-height: 20px;
    }
}

/* Fix for 'Fotopagina' bold/color issue: inherit from parent link */
.psd-replica-wrapper .psd-custom-header strong {
    font-weight: inherit;
    color: inherit;
}

.psd-replica-wrapper .psd-custom-header .header-sep {
    margin: 0 5px;
    /* Reduced from 0 10px */
    color: #666;
}

.psd-replica-wrapper .psd-custom-header .header-title-simple {
    color: #555;
    font-weight: 400;
}

/* 4. Main Stage (Photo & Sidebars) */
/* 4. Main Stage (Photo & Sidebars) - GRID LAYOUT */
.psd-replica-wrapper .psd-stage-container {
    display: grid;
    grid-template-columns: 150px 1fr 150px;
    grid-template-rows: auto auto;
    /* Row 1: Breadcrumb, Row 2: Content */
    gap: 0 30px;
    /* Removed Row Gap completely to pull image up. Was 15px. */
    margin-bottom: 30px;
    align-items: start;
    /* Align items to top of their cells */
}

.psd-replica-wrapper .psd-stage-center {
    grid-column: 2;
    grid-row: 2;
    margin-top: 0;
}

/* Breadcrumb: Spans all 3 cols or just center? 
   User request: "start -15px from where the left side of the large image begins".
   So it should be distinct.
   Actually, if breadcrumb is IN center div, it pushes image down.
   We need to move breadcrumb OUT of center div in PHP, or handle it here.
   If we keep PHP as is (Breadcrumb IN Center), we can't align sidebars to image top easily without 'subgrid' (not well supported) or splitting.
   
   PLAN: Center div contains Breadcrumb + Image.
   Sidebars are separate.
   We want Top of Sidebars to align with Top of Image.
   
   Since Breadcrumb is known height approx? No dynamic.
   
   CSS Hack correction: 
   If Breadcrumb is in Center, Sidebars must have 'margin-top' equal to Breadcrumb height.
   OR:
   We move Breadcrumb to be a sibling in PHP.
   I will ASSUME I will move Breadcrumb to be a sibling in PHP in next step.
   
   So Grid Areas:
   Area 1: Breadcrumb (Row 1, Col 2 start - but left aligned? Ref says "Boxed alignment to match Navbar").
   Actually, let's span Col 2 (Center).
*/

.psd-replica-wrapper .left-nav {
    grid-column: 1;
    grid-row: 2;
}

.psd-replica-wrapper .right-nav {
    grid-column: 3;
    grid-row: 2;
}

/* Breadcrumb styling: Direct child of stage grid */
/* Breadcrumb styling: Direct child of stage grid - RESTRUCTURED */
.psd-replica-wrapper .psd-stage-container .psd-custom-header {
    grid-column: 2;
    grid-row: 1;
    width: 100%;

    /* Structural Reset for Vertical Centering */
    height: 50px;
    /* Explicit height for the bar */
    display: flex;
    /* Flexbox */
    align-items: center;
    /* Vertically center content */
    justify-content: flex-start;

    padding: 0;
    /* Remove padding, rely on flex centering */
    margin: 0 0 0 -20px;
    /* Reset margins: -20px left align, 0px bottom space */

    border-bottom: 0;
    box-sizing: border-box;
}

/* Ensure text line-height doesn't break alignment */
.psd-replica-wrapper .psd-custom-header span,
.psd-replica-wrapper .psd-custom-header a {
    line-height: normal;
    /* Reset line-height */
    display: inline-block;
}

.psd-replica-wrapper .psd-stage-center img {
    width: 100%;
    height: auto;
    display: block;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.psd-replica-wrapper .psd-stage-side {
    width: 100%;
    /* Fill grid cell */
    /* flex-shrink removed vs flexbox */
}

/* Sidebars */
/* Sidebars */
/* .nav-thumb-wrapper styles handled via inner content */

/* Target the divs output by [prev1] / [next1] shortcodes */
.psd-replica-wrapper .prev1div,
.psd-replica-wrapper .next1div {
    background-color: #fff;
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    /* Card look */
    /* text-align: center; -> Removed shared alignment */
    margin-bottom: 20px;
}

.psd-replica-wrapper .prev1div {
    text-align: left;
}

.psd-replica-wrapper .next1div {
    text-align: right;
}

.psd-replica-wrapper .nav-thumb-wrapper img {
    width: 100%;
    height: auto;
    border-radius: 4px;
    /* border: 1px solid #eee; -> Remove border as card has bg */
    margin-bottom: 0;
}

.psd-replica-wrapper .prev1div p,
.psd-replica-wrapper .next1div p {
    margin: 3px 0 0 0;
    font-size: 14px !important;
    /* Increased size as requested */
    font-weight: 700;
    color: #333 !important;
    line-height: normal;
}

.psd-replica-wrapper .sidebar-buttons-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 15px;
}

/* Sidebar Buttons: Deep rounded shape (Pill) */
.psd-replica-wrapper .sidebar-buttons-stack a {
    display: block;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 20px;
    padding: 6px 15px;
    /* Slightly tighter padding for smaller text */
    text-align: left;
    text-decoration: none;
    color: #444;
    font-size: 12px !important;
    /* Slightly bigger as requested */
    font-weight: 600;
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.psd-replica-wrapper .sidebar-buttons-stack a:hover {
    background-color: #edbd57;
    color: #000;
    border-color: #edbd57;
    transform: translateY(-1px);
}

/* Sidebar navigation links - High contrast for accessibility */
.psd-replica-wrapper .prev1div a,
.psd-replica-wrapper .next1div a {
    color: #333;
    text-decoration: none;
}

.psd-replica-wrapper .prev1div a:hover,
.psd-replica-wrapper .next1div a:hover {
    color: #000;
    text-decoration: underline;
}

/* 5. Filmstrip */
/* ... (omitted for brevity if unchanged, but I need to chunk correctly) ... */
/* Actually I will make two chunks or one huge chunk. The targets are far apart (1881 and 2086). Separate chunks preferred. */

/* 5. Filmstrip */
.psd-replica-wrapper .psd-filmstrip-images {
    display: flex;
    justify-content: center;
    align-items: center;
    /* Vertically center images */
    gap: 10px;
    margin-bottom: 0;
    padding-bottom: 0;
    /* Remove padding to simple flex align */
    width: 100%;
    flex-wrap: nowrap;
    /* Keep on one line */
    overflow-x: auto;
    /* Scroll if absolutely necessary, but we try to shrink first */
    overflow-y: hidden;
    /* overflow-x:auto alone zou overflow-y op auto laten berekenen; dan komt
       er een verticale scrollbalk zodra de inhoud 1px hoger uitvalt dan de
       strip. Overgenomen uit het PSDnet.nl-thema. */
}

/* EWWW wikkelt elke img in een <picture>; die wrapper moet zich net zo
   gedragen als de kale img, anders lopen de items over de 80px heen. */
.psd-replica-wrapper .psd-filmstrip-images picture,
.psd-replica-wrapper .current-strip-item picture {
    display: inline-flex;
    align-items: center;
    min-width: 0;
}

.psd-replica-wrapper .psd-filmstrip-images img,
.psd-replica-wrapper .current-strip-item img {
    display: block;
    /* Geen inline-baseline-gat binnen de <picture>-wrapper */
}

/* Anchor tags in filmstrip - ensure consistent height alignment */
.psd-replica-wrapper .psd-filmstrip-images a {
    display: inline-flex;
    align-items: center;
    height: 80px;
    flex-shrink: 1;
}

/* Base style for all images in strip */
.psd-replica-wrapper .psd-filmstrip-images img,
.psd-replica-wrapper .current-strip-item img {
    height: 80px;
    /* Target height */
    width: auto;
    /* Maintain aspect ratio */
    max-width: 100%;
    /* Don't overflow */
    border-radius: 4px;
    transition: transform 0.2s;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    flex-shrink: 1;
    /* Allow shrinking */
}

.psd-replica-wrapper .current-strip-item img {
    border: 3px solid #E6C37D;
    box-sizing: border-box;
}

.psd-replica-wrapper .current-strip-item {
    flex-shrink: 0;
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 80px;
    /* For the triangle accent */
}

/* Gold Triangle Accent */
.psd-replica-wrapper .current-strip-item::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #E6C37D;
    /* Triangle pointing down */
    z-index: 5;
}

.psd-replica-wrapper .psd-filmstrip-images img:hover {
    transform: none;
    /* Removed hover effect */
}

/* Dummy placeholder for empty filmstrip slots - match img styling exactly */
.psd-replica-wrapper .psd-filmstrip-images .fs-dummy {
    height: 80px;
    width: 120px;
    background-color: #e0e0e0;
    border-radius: 4px;
    flex-shrink: 1;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    vertical-align: middle;
    gap: 4px;
    color: #afafaf;
}
.psd-replica-wrapper .psd-filmstrip-images .fs-dummy svg {
    width: 24px;
    height: 24px;
}
.psd-replica-wrapper .psd-filmstrip-images .fs-dummy-text {
    font-family: 'Raleway', 'Raleway optimized', sans-serif;
    font-size: 10px;
    font-weight: 500;
    text-align: center;
    line-height: 1.3;
    padding: 0 8px;
    color: #555;
}

/* Responsive Filmstrip: On small screens, use percentage width to ensure fit and aspect ratio */
@media screen and (max-width: 900px) {
    .psd-replica-wrapper .psd-white-strip {
        padding: 15px 0;
        /* Balanced padding for mobile/tablet */
    }

    .psd-replica-wrapper .psd-filmstrip-images {
        gap: 4px;
    }

    .psd-replica-wrapper .psd-filmstrip-images a,
    .psd-replica-wrapper .psd-filmstrip-images .fs-dummy,
    .psd-replica-wrapper .current-strip-item {
        flex: 1 1 0;
        /* Distribute space evenly */
        min-width: 0;
        text-align: center;
        /* Define a container height if we want strict height alignment */
        height: 75px;
        overflow: hidden;
        /* Hide overflow if any, though object-fit handles it on img */
        border-radius: 3px;
        width: auto;
    }

    .psd-replica-wrapper .psd-filmstrip-images .fs-dummy svg {
        width: 20px;
        height: 20px;
    }

    .psd-replica-wrapper .psd-filmstrip-images .fs-dummy-text {
        display: none;
    }

    .psd-replica-wrapper .psd-filmstrip-images img,
    .psd-replica-wrapper .current-strip-item img {
        width: 100%;
        height: 100%;
        /* Fill the container height */
        object-fit: cover;
        /* Crop to fill */
        object-position: center center;
        /* Center the crop */
        box-shadow: none;
        /* Shadow on container might be better */
    }

    /* Current item border handling on small screens: apply to container or keep on img?
       If on img, it's inside the crop. Let's keep on img but ensure sizing box-model.
     */
}

/* Explicit Mobile Override */
@media screen and (max-width: 600px) {

    .psd-replica-wrapper .psd-filmstrip-images a,
    .psd-replica-wrapper .psd-filmstrip-images .fs-dummy,
    .psd-replica-wrapper .current-strip-item {
        height: 40px;
        /* Slightly smaller */
    }

    .psd-replica-wrapper .psd-filmstrip-images .fs-dummy svg {
        width: 14px;
        height: 14px;
    }

    /* "Prev2/Next2" Simulation: Hide distance-3 items on mobile to show 5 items max */
    .psd-replica-wrapper .psd-filmstrip-images .fs-dist-3 {
        display: none;
    }
}

.psd-replica-wrapper .psd-filmstrip-images img:hover {
    transform: none;
}

/* 6. Body Text & Tags */
.psd-replica-wrapper .psd-body-text {
    font-size: 16px;
    line-height: 1.6;
    color: #333 !important;
    margin-bottom: 25px;
}

.psd-replica-wrapper .psd-body-text p {
    color: #333 !important;
}

/* Tags */
.psd-replica-wrapper .psd-tags-row {
    margin-bottom: 20px;
}

.psd-replica-wrapper .psd-tags-row .psd-posttags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.psd-replica-wrapper .psd-tags-row .psd-tag {
    display: block;
    /* Reset global .psd-tag styles causing double button */
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    float: none !important;
    box-shadow: none !important;
}

.psd-replica-wrapper .psd-tags-row a {
    display: inline-block;
    background: #fff;
    /* border: 1px solid #ddd; Removed per request */
    border-radius: 20px;
    /* More native pill shape */
    padding: 6px 15px;
    /* Larger pill */
    font-size: 13px;
    font-weight: 600;
    color: #444;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
    /* Soft shadow instead of border */
    transition: all 0.2s ease;
}

.psd-replica-wrapper .psd-tags-row a:hover {
    /* No hover effect requested */
    background-color: #fff;
    color: #444;
    border-color: transparent;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
    /* Keep same shadow */
}

/* 7. Info Box & Navigation */
.psd-replica-wrapper .psd-grey-info-box {
    background-color: #e5e5e5;
    padding: 15px 20px;
    border-radius: 4px;
    font-size: 13px !important;
    /* Increased to 13px as requested */
    color: #555;
    margin-bottom: 30px;
    border: 1px solid #ddd;

    /* Horizontal Layout */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
    /* Space between items */
}

.psd-replica-wrapper .psd-grey-info-box p,
.psd-replica-wrapper .psd-grey-info-box div,
.psd-replica-wrapper .psd-grey-info-box span {
    font-size: 13px !important;
    /* Force children to 13px */
    margin: 0;
    padding: 2px 0;
}

/* Big Bottom Nav: Split into 3 separate blocks */
.psd-replica-wrapper .psd-text-navigation {
    display: flex;
    justify-content: space-between;
    background-color: transparent;
    padding: 0;
    border: 0;
    gap: 20px;
}

/* Common style for the 3 anchors */
.psd-replica-wrapper .psd-text-navigation .nav-item-block {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Spacing for icon/text */
    background-color: #e5e5e5;
    padding: 20px 25px;
    border-radius: 6px;
    border: 1px solid #ddd;
    text-decoration: none;
    color: #444;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.psd-replica-wrapper .psd-text-navigation .nav-item-block:hover {
    background-color: #edbd57;
    color: #000;
    border-color: #edbd57;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Specific alignments */
.psd-replica-wrapper .psd-text-navigation .nav-prev {
    justify-content: flex-start;
    /* Icon left */
}

.psd-replica-wrapper .psd-text-navigation .nav-prev .nav-icon {
    margin-right: 15px;
}

.psd-replica-wrapper .psd-text-navigation .nav-next {
    justify-content: flex-end;
    /* Icon right */
}

.psd-replica-wrapper .psd-text-navigation .nav-next .nav-icon {
    margin-left: 15px;
}

.psd-replica-wrapper .psd-text-navigation .nav-album {
    justify-content: center;
    flex-direction: column;
    /* Stack label and icon for center? Or side by side? Ref shows centered text only? Screenshot shows text. Let's start with single line? No, flex-direction column to stack title/icon slightly or row? Let's use row centered. */
    flex-direction: row;
}

.psd-replica-wrapper .psd-text-navigation .nav-album .nav-sub-icon {
    display: none;
    /* Hide icon for album button unless desired */
}

/* Fonts */
.psd-replica-wrapper .psd-text-navigation .nav-label {
    font-weight: 700;
    font-size: 14px;
    text-transform: none;
    display: block;
}

.psd-replica-wrapper .psd-text-navigation .nav-hint {
    font-size: 11px;
    font-weight: 400;
    color: #555;
    margin-top: 3px;
    display: block;
}

/* Insert text via CSS so it's less prioritized by SEO */
.psd-replica-wrapper .psd-text-navigation .nav-prev .nav-hint::after {
    content: " < Of gebruik de pijltjestoetsen";
}

.psd-replica-wrapper .psd-text-navigation .nav-next .nav-hint::after {
    content: " Of gebruik de pijltjestoetsen >";
}

/* Hover state for hint: Make it blue like the rest */
.psd-replica-wrapper .psd-text-navigation .nav-item-block:hover .nav-hint {
    color: #69817e;
}

/* Align contents for prev/next */
.psd-replica-wrapper .psd-text-navigation .nav-prev .nav-content-wrapper {
    text-align: left;
}

.psd-replica-wrapper .psd-text-navigation .nav-next .nav-content-wrapper {
    text-align: right;
}

/* Hide hint on mobile */
@media screen and (max-width: 900px) {
    .psd-replica-wrapper .psd-text-navigation .nav-hint {
        display: none;
    }
}

/* Icon Styles */
.psd-replica-wrapper .psd-text-navigation .nav-icon i {
    font-size: 16px;
}

/* 8. Footer (Sage) */
.psd-replica-wrapper .psd-section-sage {
    background-color: #bbc2ba;
    padding: 60px 0 120px 0;
    /* Reduced top padding by 60px (120->60) */
    /* increased from 60px */
    border-top: 0;
    /* Removed yellow border */
    margin-top: 0;
}

/* Constrain internal container to match the .psd-content-block width from above */
.psd-replica-wrapper .psd-section-sage .psd-container {
    max-width: 1100px;
    margin: 0 auto;
    /* padding inherited (0 20px) from global .psd-container */
}

.psd-replica-wrapper .psd-h3 {
    font-family: 'Open Sans', sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: #000;
    margin-bottom: 10px;
}

.psd-replica-wrapper .psd-subtext {
    font-size: 16px;
    color: #333 !important;
    margin-bottom: 30px;
}

.psd-replica-wrapper .psd-cards-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.psd-replica-wrapper .psd-cards-grid a {
    background: #fff;
    padding: 10px 10px 15px 10px;
    /* Restored padding + 15px bottom space */
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    width: calc(16.666% - 17px);
    transition: transform 0.2s;
    height: 100%;
    /* Ensure full height usage */
    min-height: 205px;
    /* Make cards higher and more consistent */
}

.psd-replica-wrapper .psd-cards-grid a:hover {
    transform: translateY(-5px);
}

.psd-replica-wrapper .psd-cards-grid img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
    /* Restored radius */
    aspect-ratio: 3/2;
    object-fit: cover;
}

.psd-replica-wrapper .psd-card-title {
    margin: 0;
    padding: 12px 10px;
    /* Give text room */
    font-size: 14px;
    font-weight: 700;
    color: #333 !important;
    line-height: 1.3;
}

/* Mobile Navigation (Top) */
.psd-replica-wrapper .psd-mobile-nav {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    /* Space between buttons */
    margin-bottom: 20px;
}

.psd-replica-wrapper .psd-mobile-nav .mob-nav-btn {
    flex: 1;
    background-color: #e5e5e5;
    border-radius: 4px;
    border: 1px solid #ddd;
    text-align: center;
    padding: 0;
    overflow: hidden;
}

.psd-replica-wrapper .psd-mobile-nav .mob-nav-btn p {
    margin: 0;
}

.psd-replica-wrapper .psd-mobile-nav .mob-nav-btn a {
    text-decoration: none;
    color: #222;
    font-weight: 700;
    font-size: 14px;
    display: block;
    transition: color 0.2s ease;
    padding: 10px;
    background: transparent !important;
    border: none !important;
}

.psd-replica-wrapper .psd-mobile-nav .mob-nav-btn:hover {
    background-color: #edbd57;
    border-color: #edbd57;
    /* Removed transform/shadow to stop movement on mobile */
}

.psd-replica-wrapper .psd-mobile-nav .mob-nav-btn:hover a {
    color: #333 !important;
}

/* Visibility Classes (Scoped) */
.psd-replica-wrapper .mobile-only {
    display: none !important;
}

/* Tablet (max-width: 1024px) */
@media screen and (max-width: 1024px) {
    .psd-replica-wrapper .psd-stage-container .psd-custom-header {
        grid-column: 1 / -1;
        /* Span entire grid width */
        margin-left: 0 !important;
        /* Reset offset */
        padding-left: 0 !important;
        width: 100%;
    }
}

/* Mobile */
@media screen and (max-width: 900px) {
    .psd-replica-wrapper .desktop-only {
        display: none !important;
    }

    .psd-replica-wrapper .mobile-only {
        display: flex !important;
    }

    .psd-replica-wrapper .psd-stage-container {
        display: block;
    }

    /* Mobile Breadcrumb Fixes */
    .psd-replica-wrapper .psd-stage-container .psd-custom-header {
        margin-left: 0 !important;
        /* Respect container padding */
        height: auto;
        /* Allow growth for multiple rows */
        min-height: 50px;
        padding: 10px 0;
        /* Add space for wrapping text */
        flex-wrap: wrap;
        line-height: 1.4;
    }

    /* Mobile Nav Buttons Alignment */
    .psd-replica-wrapper .psd-mobile-nav .mob-nav-btn:first-child {
        text-align: left;
    }

    .psd-replica-wrapper .psd-mobile-nav .mob-nav-btn:last-child {
        text-align: right;
    }

    /* Bottom Text Navigation Alignment (Mobile) */
    /* Bottom Text Navigation Alignment (Mobile) */
    .psd-replica-wrapper .psd-text-navigation .nav-icon {
        display: none;
        /* Hide icons to match top nav */
    }

    .psd-replica-wrapper .psd-text-navigation .nav-prev {
        padding-left: 10px;
        justify-content: flex-start;
    }

    .psd-replica-wrapper .psd-text-navigation .nav-next {
        padding-right: 10px;
        justify-content: flex-end;
    }

    /* Green Section Mobile Spacing Reduction */
    .psd-replica-wrapper .psd-section-sage {
        padding: 40px 0;
        /* Reduced from 120px */
    }

    .psd-replica-wrapper .psd-cards-grid {
        gap: 10px;
        /* Tighter gap for 3-col mobile */
    }

    .psd-replica-wrapper .psd-cards-grid a {
        width: calc(33.333% - 7px);
        /* 3 columns ((100% - 20px) / 3) */
        padding: 0;
        /* No white border (image touches edge) */
        height: 160px;
        /* Fixed height for mobile */
        min-height: 0 !important;
        /* Override desktop min-height */
        overflow: hidden;
        /* Clip content */
    }

    /* Fixed height for image on mobile to preserve space for text */
    .psd-replica-wrapper .psd-cards-grid a img {
        height: 90px !important;
        width: 100%;
        border-radius: 0 !important;
    }

    .psd-replica-wrapper .psd-card-title {
        font-size: 11px;
        /* Smaller text for small cards */
        line-height: 1.2;
        padding: 15px 10px 5px 10px;
        /* Increased top padding (+10px) */
        margin: 0;
    }

    /* Disable moving hover effects on mobile cards */
    .psd-replica-wrapper .psd-cards-grid a:hover {
        transform: none !important;
    }

    /* Disable moving hover effects on bottom navigation buttons on mobile */
    /* Disable moving hover effects on bottom navigation buttons on mobile */
    .psd-replica-wrapper .psd-text-navigation .nav-item-block:hover {
        transform: none !important;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
        /* Restore original shadow */
    }

    /* Mobile Top Title Strip */
    .psd-replica-wrapper .psd-mobile-title-strip {
        padding: 20px 0;
        /* Increased padding for vertical centering */
        margin-bottom: 0;
        /* Remove margin to balance top/bottom space */
        color: #333;
    }

    .psd-replica-wrapper .psd-mobile-title-strip a,
    .psd-replica-wrapper .psd-mobile-title-strip a:visited,
    .psd-replica-wrapper .psd-mobile-title-strip a:hover,
    .psd-replica-wrapper .psd-mobile-title-strip a:active {
        text-decoration: none;
        color: #333 !important;
        font-family: 'Raleway optimized', sans-serif;
        font-weight: 700;
        font-size: 15px;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    .psd-replica-wrapper .psd-mobile-title-strip a strong {
        font-weight: inherit;
        color: #333 !important;
    }

    /* Mobile Bottom Breadcrumb Box (Grey Block) */
    .psd-replica-wrapper .psd-mobile-breadcrumb-bottom {
        background-color: #e5e5e5;
        padding: 15px 20px;
        border-radius: 4px;
        border: 1px solid #ddd;
        margin-bottom: 20px;
        display: block !important;
        font-family: 'Raleway optimized', sans-serif;
        /* Fix font */
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    .psd-replica-wrapper .psd-mobile-breadcrumb-bottom .psd-custom-header {
        margin: 0 !important;
        padding: 0 !important;
        border: 0;
        line-height: 1.4;
        display: flex;
        flex-wrap: wrap;
    }

    /* Grey Info Box Mobile Spacing */
    .psd-replica-wrapper .psd-grey-info-box {
        gap: 5px;
        margin-bottom: 18px;
        /* Adjusted (15+3=18) to move breadcrumb 3px more to bottom */
    }

    /* Reduce font size for album button on mobile to prevent wrapping */
    .psd-replica-wrapper .psd-text-navigation .nav-album .nav-label {
        font-size: 11px !important;
    }
}

/* Custom Site Title (P tag replacing H1) */
.psd-sitetitle p {
    font-size: 35px !important;
    line-height: 1.2 !important;
    margin-bottom: 0 !important;
}

/* Ensure link inside inherits size */
.psd-sitetitle p a {
    font-size: inherit !important;
}

@media (max-width: 767px) {
    .psd-sitetitle p {
        font-size: 24px !important;
    }
}

/* Custom Photo Title in Description Loop */
.psd-body-text .psd-photo-title {
    font-family: 'Raleway optimized', sans-serif !important;
    font-size: 20px !important;
    line-height: 1.4 !important;
    margin-top: 0px !important;
    margin-bottom: 15px !important;
    /* Match top padding (15px) */
    color: #3e4349;
    font-weight: 700;
    text-transform: none;
}

@media screen and (max-width: 767px) {
    .psd-body-text .psd-photo-title {
        font-size: 18px !important;
        margin-bottom: 12px !important;
        /* Match mobile top padding (12px) */
        margin-top: 5px !important;
        /* Give a tiny bit of breath on mobile */
    }
}

/* ------------------------------------------------------------------------- *
 *  Schulpengat Theme Font Fixes
 * ------------------------------------------------------------------------- */

/* Navigation Buttons (Single Foto) */
.nav-item-block,
.nav-item-block .nav-label,
.nav-item-block .nav-hint {
    font-family: 'Raleway optimized', sans-serif !important;
}

/* Recommended Photos Section */
.psd-h3 {
    font-family: 'Raleway optimized', sans-serif !important;
    font-weight: 700;
}

.psd-subtext {
    font-family: 'Raleway optimized', sans-serif !important;
    font-size: 16px;
    line-height: 1.6;
    color: #333 !important;
}

/* Card Titles in Grid */
.psd-card-title {
    font-family: 'Raleway optimized', sans-serif !important;
    font-weight: 700;
}

/* Stond hier als `.psd-cards-grid h4`; de kaarttitels zijn geen koppen meer.
   `.psd-card-title` hierboven dekt het lettertype al af. */
.psd-cards-grid .psd-card-title {
    font-family: 'Raleway optimized', sans-serif !important;
}

/* Tags Font Fix */
.psd-tag a {
    font-family: 'Raleway optimized', sans-serif !important;
}

/* Ensure filmstrip placeholders maintain aspect ratio and size */
.psd-replica-wrapper .psd-filmstrip-images .psd-card-placeholder,
.psd-replica-wrapper .current-strip-item .psd-card-placeholder {
    height: 80px;
    width: auto;
    aspect-ratio: 3 / 2;
    min-height: unset;
    font-size: 1.5rem;
    margin-bottom: 0 !important; /* Override global 15px gap */
}

/* Add gold border to the current item's placeholder */
.psd-replica-wrapper .current-strip-item .psd-card-placeholder {
    border: 3px solid #E6C37D;
    box-sizing: border-box;
}