/* =========================================================
   Mobile / tablet layout (shared by the he and en themes).
   Named zz-* so ASP.NET Themes load it after the other theme files.
   Keep App_Themes/he/zz-responsive.css and App_Themes/en/zz-responsive.css identical.
   ========================================================= */

/* Font files are only downloaded where the mobile rules below actually use the font.
   Heebo (body/UI, Hebrew+Latin) stays; Frank Ruhl Libre is added for headings only —
   both are Google-hosted and fully support Hebrew, so he/en stay visually identical. */
@import url("https://fonts.googleapis.com/css2?family=Heebo:wght@400;500;700;800&family=Frank+Ruhl+Libre:wght@500;700;900&display=swap");

.mobile-menu-toggle {
    display: none;
}

@media screen and (max-width: 980px) {

    html, body {
        overflow-x: hidden;
    }

    body {
        -webkit-text-size-adjust: 100%;
    }

    img {
        max-width: 100%;
        height: auto;
    }

    #content {
        min-width: 0;
        min-height: 0;
    }

    .content-width {
        width: auto;
        max-width: 100%;
        padding-left: 12px;
        padding-right: 12px;
        box-sizing: border-box;
    }

    /* ---------- top bar ---------- */

    #top-header {
        position: relative;
        min-height: 42px;
        height: auto;
        line-height: 1.4;
        padding: 5px 0;
        background-color: #241f1a;
    }

        #top-header .content-width {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
            gap: 4px 16px;
            padding-left: 50px; /* reserve room for the English + phone corner badge */
        }

        #top-header .nav,
        #top-header .phone,
        #top-header .account {
            float: none;
            margin: 0;
            padding-top: 0;
            padding-bottom: 0;
        }

        /* English + phone icon: pinned together in the top-left corner, out
           of the row's own flow so they stay put even when the account info
           wraps to a 2nd line. (flex "order" was tried first but with
           justify-content:space-between and a long, non-shrinking account
           text, the browser's gap distribution didn't keep the two grouped
           predictably — absolute positioning is the reliable fix here.)
           The phone icon sits right below "English", not beside it. */
        #top-header .nav {
            position: absolute;
            top: 4px;
            left: 12px;
            margin: 0;
        }

        /* phone number: a small icon only (no space for the full digits on
           mobile), stacked under English in the same corner group.
           Note: the label isn't a link in the markup today, so the icon is
           cosmetic only and won't dial on tap — see the note sent with this
           file for the small HTML change that makes it a real tel: link. */
        #top-header .phone {
            position: absolute;
            top: 23px;
            left: 12px;
            width: 13px;
            height: 13px;
            padding: 0;
            font-size: 0;
            background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E") center / contain no-repeat;
        }

        #top-header .account {
            padding-left: 0;
            padding-right: 0;
        }

            #top-header .account .item {
                margin: 0 6px;
            }

        #top-header .clr {
            display: none;
        }

    /* ---------- logo row ---------- */

    #main-header {
        height: auto;
        background-color: #322b24;
    }

        #main-header .content-width {
            display: flex;
            align-items: center;
            gap: 10px;
            min-height: 60px;
        }

        #main-header .logo-wrp {
            float: none;
            height: auto;
            padding: 8px 0;
            flex: 1 1 auto;
            display: flex;
            align-items: center;
            gap: 12px;
            min-width: 0;
        }

            #main-header .logo-wrp .logo {
                flex: 0 0 auto;
            }

            #main-header .logo-wrp .counter {
                margin: 0;
                font-size: 12px;
                line-height: 1.3;
            }

        #main-header .login {
            float: none;
            padding: 0;
            flex: 0 0 auto;
            white-space: nowrap;
        }

            #main-header .login a {
                margin: 0 2px;
            }

    .mobile-menu-toggle {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        flex: 0 0 auto;
        width: 44px;
        height: 44px;
        padding: 0 10px;
        border: 0;
        border-radius: 6px;
        background: #0a6b7a;
        cursor: pointer;
    }

        .mobile-menu-toggle span {
            display: block;
            height: 3px;
            border-radius: 2px;
            background: #fff;
            transition: transform .2s, opacity .2s;
        }

    .mobile-menu-toggle[aria-expanded="true"] span:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    .mobile-menu-toggle[aria-expanded="true"] span:nth-child(2) {
        opacity: 0;
    }

    .mobile-menu-toggle[aria-expanded="true"] span:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }

    /* ---------- search + collapsible navigation ---------- */

    #head-nav {
        height: auto;
        background: #efe7d8;
        border-bottom: 1px solid #ded3c2;
        font-size: 16px;
    }

        #head-nav .content-width {
            display: flex;
            flex-direction: column;
        }

        #head-nav .clr {
            display: none;
        }

        #head-nav .search {
            order: 1;
            float: none;
            margin: 0;
            padding: 10px 0;
        }

            #head-nav .search > div {
                display: flex;
                gap: 6px;
            }

            #head-nav .search .selectmenu-wrp,
            #head-nav .search .ui-selectmenu,
            #head-nav .search select {
                display: none !important;
            }

            #head-nav .search input[type="text"] {
                order: 1;
                flex: 1 1 auto;
                float: none;
                width: auto;
                min-width: 0;
                height: 44px;
                padding: 0 10px;
                border: 1px solid #b3a996;
                border-radius: 4px;
                box-sizing: border-box;
                font-size: 16px;
                background: #fff;
            }

            #head-nav .search input[type="submit"] {
                order: 2;
                flex: 0 0 auto;
                float: none;
                width: 80px;
                height: 44px;
                margin: 0;
                border-radius: 4px;
                background: #0a6b7a;
                font-size: 16px;
            }

        #head-nav .nav {
            order: 2;
            display: block;
            float: none;
            line-height: normal;
            padding-bottom: 0;
            max-height: 0;
            overflow: hidden;
            opacity: 0;
            transition: max-height .32s ease, opacity .22s ease, padding-bottom .32s ease;
        }

        #head-nav.mobile-open .nav {
            max-height: 600px;
            opacity: 1;
            padding-bottom: 8px;
        }

            #head-nav .nav ul li {
                display: block;
                border-top: 1px solid #ded3c2;
            }

                #head-nav .nav ul li a {
                    display: block;
                    margin: 0;
                    padding: 13px 4px;
                }

                    #head-nav .nav ul li a.home {
                        width: auto;
                        height: auto;
                        background: none;
                    }

                        #head-nav .nav ul li a.home:hover {
                            background: none;
                        }

                        #head-nav .nav ul li a.home:before {
                            content: "\2302";
                            font-size: 20px;
                        }

    /* ---------- page skeleton: aside goes under the main content ---------- */

    #content #main-content > .content-width,
    #content #full-width-content {
        display: flex;
        flex-direction: column;
    }

    #content #main-content #main-content-with-aside,
    #content #full-width-content #fluid-main-content-with-aside {
        order: 1;
        margin: 0;
    }

    #content #main-content #aside-content,
    #content #full-width-content #fluid-aside-content {
        order: 2;
        float: none;
        width: auto;
        margin: 30px 0 0 0;
    }

    #content #full-width-content #fluid-top {
        margin: 0;
        padding: 0 12px;
    }

    #content #full-width-content #fluid-aside-content,
    #content #full-width-content #fluid-main-content-with-aside {
        padding: 0 12px;
    }

    #content ul.breadcrumbs {
        padding-top: 14px;
        padding-bottom: 14px;
    }

    /* ---------- forms ---------- */

    #content input[type="text"],
    #content input[type="password"],
    #content input[type="email"],
    #content input[type="tel"],
    #content textarea,
    #content select {
        max-width: 100%;
        box-sizing: border-box;
        font-size: 16px; /* prevents iOS zoom on focus */
    }

    #content table {
        max-width: 100%;
    }

    /* ---------- home page ---------- */

    .page-default .gallery-bg {
        padding-top: 0;
        padding-bottom: 12px;
        background: #faf6ef;
    }

        .page-default .gallery-bg .gallery {
            height: auto;
            overflow: hidden;
            padding-left: 0;
            padding-right: 0;
        }

            .page-default .gallery-bg .gallery .search-box-wrp {
                position: static;
                padding-top: 12px;
            }

                .page-default .gallery-bg .gallery .search-box-wrp .search-box {
                    width: auto;
                }

            .page-default .gallery-bg .gallery .search-box img.title {
                margin: 0 auto 8px;
            }

            /* The old field background image is only 315px wide; a plain fill avoids a grey strip on wider fields */
            .page-default .gallery-bg .gallery .search-box input[type="text"] {
                width: 68%;
                height: 48px;
                box-sizing: border-box;
                border-width: 3px;
                background: #fff;
                font-size: 16px;
            }

            .page-default .gallery-bg .gallery .search-box input[type="submit"] {
                width: 32%;
                height: 48px;
                box-sizing: border-box;
                border-width: 3px;
                font-size: 18px;
            }

            /* Revealed by jquery.app.js on focus; hidden with display so it takes no space until then */
            .page-default .gallery-bg .gallery .search-box .classification {
                display: none;
                min-width: 0;
                width: 100%;
                box-sizing: border-box;
            }

    .page-default .banners-bg .banners .packages-banner-top {
        font-size: 17px;
        line-height: 1.5;
        padding: 10px 12px;
    }

    .page-default .banners-bg .banners .four-banners {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 14px;
        padding-top: 20px;
    }

        .page-default .banners-bg .banners .four-banners .banner,
        .page-default .banners-bg .banners .four-banners .banner.last {
            float: none;
            margin: 0;
        }

        .page-default .banners-bg .banners .four-banners .clr {
            display: none;
        }

    .page-default .columns {
        margin-top: 20px;
    }

    .page-default .column,
    .page-default .column.first {
        float: none;
        width: auto;
        margin: 0 0 30px 0;
        padding: 0;
    }

        .page-default .column.first .free-photo {
            width: auto;
            height: auto;
            padding-bottom: 12px;
            margin-top: 16px;
        }

            .page-default .column.first .free-photo input[type="submit"] {
                width: auto;
                min-width: 61px;
                padding: 0 12px;
                background: #7d7465;
                border-radius: 4px;
            }

        .page-default .column .banner.photographers {
            width: 100%;
        }

    .popup-player object,
    .popup-player embed,
    .popup-player iframe {
        max-width: 100%;
    }

    /* ---------- category landing (featured content) ---------- */

    .page-classification .featured-content {
        float: none;
        width: auto;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px 12px;
    }

        .page-classification .featured-content .content-item {
            float: none;
            width: auto;
            height: auto;
            margin: 0;
        }

            .page-classification .featured-content .content-item a .image-wrapper {
                width: 100%;
            }

            .page-classification .featured-content .content-item a img.thumbnail {
                width: 100%;
                height: 140px;
                max-width: none;
                max-height: none;
                object-fit: cover;
                border-radius: 4px;
            }

            .page-classification .featured-content .content-item a .title {
                padding-top: 6px;
                text-align: center;
            }

        .page-classification .featured-content .clr {
            display: none;
        }

    .page-classification .tags {
        float: none;
        width: auto;
    }

    /* The categories page shares PicjewGallery.master with the home page; its promo banners are noise on a phone */
    .page-default:has(.page-classification) .banners-bg {
        display: none;
    }

    .page-classification #searchBoxClassification .authors,
    .page-classification #searchBoxClassification .licenses {
        float: none;
        margin: 0 0 10px 0;
    }

    /* ---------- photo results grid: the controls bar wraps on narrow screens;
       the grid itself (columns, card look, hover, save icon) is unscoped —
       see "results grid: a real card grid" further down in this file ---------- */

    #fluid-main-content-with-aside .page-photos .controls .count,
    #fluid-main-content-with-aside .page-photos .controls .sort-by,
    #fluid-main-content-with-aside .page-photos .controls .items-per-page {
        float: none;
        margin: 0 0 8px 0;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    #fluid-main-content-with-aside .page-photos .paging .pager {
        float: none;
        margin-top: 6px;
    }

    #fluid-main-content-with-aside .page-photos .header-photographer .photographer-searchbox input[type="text"] {
        width: 100%;
    }

    /* ---------- single photo ---------- */

    #main-content-with-aside .page-photo .photo-and-info .photo,
    #main-content-with-aside .page-photo .photo-and-info .info {
        float: none;
        width: auto;
        height: auto;
    }

    #main-content-with-aside .page-photo .photo-and-info .info {
        margin-top: 20px;
    }

    /* On a single photo the search filter goes above the photo, not after it */
    #content #main-content > .content-width:has(.page-photo) #aside-content {
        order: 0;
        margin: 0 0 20px 0;
    }

    #main-content-with-aside .page-photo .related-photos-and-tags .photos,
    #main-content-with-aside .page-photo .related-photos-and-tags .tags {
        float: none;
        width: auto;
    }

    #main-content-with-aside .page-photo .related-photos-and-tags .photos .related {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        margin-bottom: 24px;
    }

        #main-content-with-aside .page-photo .related-photos-and-tags .photos .related .image-wrapper,
        #main-content-with-aside .page-photo .related-photos-and-tags .photos .related .image-wrapper .tr,
        #main-content-with-aside .page-photo .related-photos-and-tags .photos .related .image-wrapper .td {
            display: block;
            float: none;
            width: auto;
            height: auto;
            margin: 0;
        }

            #main-content-with-aside .page-photo .related-photos-and-tags .photos .related .image-wrapper img {
                width: 100%;
                height: 140px;
                object-fit: cover;
                border-radius: 4px;
            }

        #main-content-with-aside .page-photo .related-photos-and-tags .photos .related .clr {
            display: none;
        }

    .related-photos-and-tags .tags {
        padding-bottom: 30px;
    }

    /* ---------- simple forms (register, contact, profile, password recovery) ---------- */

    .page-register input[type="text"],
    .page-register input[type="password"],
    .page-contactus input[type="text"],
    .page-contactus textarea,
    .page-profile-edit input[type="text"],
    .page-profile-edit input[type="password"],
    .page-password-recovery input[type="text"] {
        width: 100%;
        height: 40px;
    }

    .page-contactus textarea {
        height: 140px;
    }

    /* ---------- discount packages ---------- */

    #content .monthly-parentdiv,
    #content .downloadfile-parentdiv {
        float: none;
        width: auto;
        max-width: 420px;
        margin: 0 auto 24px;
    }

    #content .monthly-whitecontentdiv {
        height: auto;
        padding: 20px;
    }

    #content .monthly-grayimgdiv {
        margin: 16px 0;
    }

    #content .downloadfile-grayimgdiv {
        padding: 18px 16px;
        overflow: hidden; /* contains the floated count / price */
        line-height: 1.4;
    }

    #main-content .page-packages .packages .package {
        float: none;
        width: 100%;
        max-width: 320px;
        margin: 0 auto 30px;
    }

    /* ---------- cart / order ----------
       superseded by the full "my account area" redesign further down
       this file (same float-reset + payment-method grid, plus the rest
       of the cart/checkout mobile treatment) — kept as a single source
       of truth there instead of duplicating it here. */

    /* ---------- login / account popups ---------- */

    #loginOrRegisterPopup {
        position: fixed !important;
        top: 10px !important;
        left: 10px !important;
        right: 10px;
        max-height: calc(100vh - 20px);
        overflow-y: auto;
        box-sizing: border-box;
        border-width: 6px;
    }

        #loginOrRegisterPopup .wrp {
            padding: 0 16px 16px;
        }

        #loginOrRegisterPopup div.table,
        #loginOrRegisterPopup div.table div.tr,
        #loginOrRegisterPopup div.table div.tr div.td {
            display: block;
        }

        #loginOrRegisterPopup .register,
        #loginOrRegisterPopup .login {
            border: 0;
            padding: 0 0 20px 0;
        }

        #loginOrRegisterPopup .register {
            border-bottom: 1px solid #d8cdb9;
            margin-bottom: 20px;
        }

            #loginOrRegisterPopup .register .header,
            #loginOrRegisterPopup .login .header {
                font-size: 20px;
                margin-bottom: 16px;
            }

            #loginOrRegisterPopup .login .fields .field label {
                display: block;
                width: auto;
                margin-bottom: 4px;
            }

            #loginOrRegisterPopup .login .fields .field input {
                display: block;
                width: 100%;
                height: 40px;
                box-sizing: border-box;
            }

            #loginOrRegisterPopup .login .fields .sub {
                margin: 0;
            }

            #loginOrRegisterPopup .login .submit {
                margin: 0;
            }

    #loginPopupDiv {
        left: 10px !important;
        right: 10px;
        width: auto;
        height: auto;
        padding: 20px;
        background: #fff;
        border: 1px solid #d8cdb9;
        box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
    }

        #loginPopupDiv .field input {
            width: 100%;
            box-sizing: border-box;
        }

    #myAccountPopupDiv {
        max-width: calc(100vw - 20px);
        box-sizing: border-box;
    }

        #myAccountPopupDiv ul li a {
            display: block;
            padding: 6px 0;
        }

    /* ---------- footer ---------- */

    #footer-content {
        margin-top: 30px;
    }

        #footer-content .content-width {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 0 16px;
        }

        #footer-content .column {
            float: none;
            margin: 24px 0 0 0;
        }

            #footer-content .column ul li {
                margin-bottom: 8px;
            }

        #footer-content .side-column {
            float: none;
            grid-column: 1 / -1;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 10px;
            margin-top: 24px;
        }

            #footer-content .side-column a {
                margin: 0;
            }

        #footer-content .clr {
            display: none;
        }

    #footer {
        line-height: 1.5;
        padding: 8px 0;
    }

        #footer .content-width .credits {
            position: static;
            text-align: center;
        }
}

/* ---------- footer: payment & social links as compact icon pills ----------
   These 3 anchors (<a class="paypal">/<a class="paycard">/<a class="facebook">,
   in Picjew.master) are empty in the HTML — their look always came from old
   background-image badges (paypal.jpg/paycard.jpg/facebook.jpg) fixed at
   137x53 / 137x56 / 137x40px in the base CSS. That's both visually out of
   place next to the new design and, together with the new flex footer
   layout on mobile, is what reads as a big blank gap when those old images
   aren't the thing drawing your eye. Replaced with small, consistently
   sized icon pills — no HTML change, unscoped so it's the same on every
   width. */

#footer-content .side-column a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 8px;
    padding: 7px 14px;
    border: 1px solid #e9e1d2;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    color: #7a7268;
    text-decoration: none;
    transition: border-color .15s, color .15s;
}

    #footer-content .side-column a:hover {
        border-color: #0a6b7a;
        color: #0a6b7a;
    }

    #footer-content .side-column a:before {
        content: "";
        width: 15px;
        height: 15px;
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
    }

#footer-content .side-column a.paypal,
#footer-content .side-column a.paycard {
    width: auto;
    height: auto;
    background: #fff;
}

    #footer-content .side-column a.paypal:before,
    #footer-content .side-column a.paycard:before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a7268' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='5' width='20' height='14' rx='2'/%3E%3Cpath d='M2 10h20'/%3E%3C/svg%3E");
    }

#footer-content .side-column a.facebook {
    width: auto;
    height: auto;
    background: #fff;
}

    #footer-content .side-column a.facebook:before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a7268' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M13.5 21v-6.5H16l.5-3h-3V9.5c0-.9.3-1.5 1.6-1.5H16.5V5.3c-.3 0-1.2-.1-2.3-.1-2.3 0-3.9 1.4-3.9 4v2.3H8v3h2.3V21'/%3E%3C/svg%3E");
    }

    .he #footer-content .side-column a.paypal:after { content: "PayPal"; }
    .en #footer-content .side-column a.paypal:after { content: "PayPal"; }
    .he #footer-content .side-column a.paycard:after { content: "PayCard"; }
    .en #footer-content .side-column a.paycard:after { content: "PayCard"; }
    .he #footer-content .side-column a.facebook:after { content: "פייסבוק"; }
    .en #footer-content .side-column a.facebook:after { content: "Facebook"; }

/* Wider phones / tablets: more grid columns so the 150px thumbnails are not stretched */
@media screen and (min-width: 560px) and (max-width: 980px) {

    .page-classification .featured-content,
    #main-content-with-aside .page-photo .related-photos-and-tags .photos .related {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media screen and (min-width: 740px) and (max-width: 980px) {

    .page-classification .featured-content {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media screen and (max-width: 420px) {

    #main-header .logo-wrp .counter {
        display: none;
    }

    .page-default .banners-bg .banners .packages-banner-top {
        font-size: 15px;
    }
}

/* =========================================================
   Look & feel at every width: font, colours, cards, filter, banners, buy button
   ========================================================= */

body,
input,
button,
select,
textarea {
    font-family: "Heebo", Arial, Helvetica, sans-serif;
}

body {
    color: #4a433a;
    background-color: #fff;
}

#content {
    background-color: #fff;
}

/* top bar: "About" and "Contact us" already live in the main nav / footer,
   so they're redundant clutter up here (site-wide, every page). The base
   markup writes them as plain "|"-separated text next to the English link
   (<a>About</a> | <a>ContactUs</a> | <a>English</a>), so a bare display:none
   on the two links would leave their "|" separators behind as stray
   floating characters. Collapsing the whole row to font-size:0 and only
   restoring it on the <a> tags hides those stray characters too. */
#top-header .nav {
    font-size: 0;
}

#top-header .nav a {
    font-size: 12px;
}

#top-header .nav a:not(:last-child) {
    display: none;
}

#main-header {
    background: linear-gradient(135deg, #241f1a 0%, #3a322a 100%);
}

.mobile-menu-toggle,
#head-nav .search input[type="submit"] {
    background: linear-gradient(135deg, #0a6b7a 0%, #12a0b5 100%);
    box-shadow: 0 3px 10px rgba(10, 107, 122, .3);
}

#head-nav {
    background: #fff;
    box-shadow: 0 2px 10px rgba(43, 31, 20, .06);
}

/* ---------- search filter: collapsible card ---------- */

#content .filter {
    background: #fff;
    border: 1px solid #e9e1d2;
    border-radius: 14px;
    box-shadow: 0 6px 20px rgba(43, 31, 20, .07);
    overflow: hidden;
}

    #content .filter .header {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 14px 16px;
        line-height: 1.3;
        font-size: 16px;
        font-weight: 700;
        text-align: start;
        color: #fff;
        border-radius: 0;
        background: linear-gradient(135deg, #0a6b7a 0%, #12a0b5 100%);
    }

        #content .filter .header:before {
            content: "";
            flex: 0 0 20px;
            height: 20px;
            background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h18l-7 8v6l-4 2v-8z'/%3E%3C/svg%3E") center / contain no-repeat;
        }

    #content .filter.is-collapsible .header {
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

        #content .filter.is-collapsible .header:after {
            content: "";
            margin-inline-start: auto;
            flex: 0 0 22px;
            height: 22px;
            background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
            transition: transform .25s;
        }

    #content .filter.is-collapsed .header:after {
        transform: rotate(-90deg);
    }

    .he #content .filter.is-collapsed .header:after {
        transform: rotate(90deg);
    }

    #content .filter .body {
        padding: 16px;
        max-height: 2000px;
        opacity: 1;
        overflow: hidden;
        transition: max-height .36s ease, opacity .28s ease, padding .36s ease;
    }

    #content .filter.is-collapsed .body {
        max-height: 0;
        opacity: 0;
        padding-top: 0;
        padding-bottom: 0;
    }

        #content .filter .body .filed {
            margin-bottom: 14px;
        }

            #content .filter .body .filed > label {
                font-size: 13px;
                font-weight: 700;
                color: #7a7268;
                margin-bottom: 6px;
            }

#content .ui-dropdownchecklist-selector-wrapper {
    display: block !important;
    width: 100%;
}

#content .filter .ui-dropdownchecklist-selector,
#content #searchBoxClassification .ui-dropdownchecklist-selector {
    display: flex !important;
    align-items: center;
    width: 100% !important;
    height: 46px;
    padding: 0 14px !important;
    box-sizing: border-box;
    border: 1px solid #e3dac8;
    border-radius: 10px;
    background: #faf6ef;
    color: #2c2620;
    font-size: 15px;
}

    #content .filter .ui-dropdownchecklist-selector .ui-icon,
    #content #searchBoxClassification .ui-dropdownchecklist-selector .ui-icon {
        display: none;
    }

    #content .filter .ui-dropdownchecklist-selector .ui-dropdownchecklist-text,
    #content #searchBoxClassification .ui-dropdownchecklist-selector .ui-dropdownchecklist-text {
        flex: 1 1 auto;
        width: auto !important;
        text-overflow: ellipsis;
    }

    #content .filter .ui-dropdownchecklist-selector:after,
    #content #searchBoxClassification .ui-dropdownchecklist-selector:after {
        content: "";
        flex: 0 0 18px;
        height: 18px;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23007384' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
    }

.ui-dropdownchecklist-dropcontainer-wrapper .ui-dropdownchecklist-dropcontainer {
    border: 1px solid #e3dac8;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(43, 31, 20, .18);
    background: #fff;
}

.ui-dropdownchecklist-dropcontainer .ui-dropdownchecklist-item {
    padding: 8px 10px;
    border: 0;
    background: #fff;
    font-size: 15px;
}

#content .filter .button-wrp {
    margin-top: 6px;
}

    #content .filter .button-wrp .filter-show-results {
        display: block;
        margin: 0;
        border: 0;
        border-radius: 10px;
        background: linear-gradient(135deg, #0a6b7a 0%, #12a0b5 100%);
        box-shadow: 0 4px 12px rgba(10, 107, 122, .3);
        color: #fff;
        text-align: center;
    }

        #content .filter .button-wrp .filter-show-results .ui-button-text {
            padding: 0;
            line-height: 48px;
            font-size: 16px;
            font-weight: 700;
            color: #fff;
        }

/* ---------- home banners as cards ---------- */

#content .page-default .banners-bg {
    background: #faf6ef;
    padding-bottom: 10px;
}

#content .page-default .packages-banner-top {
    margin-top: 14px;
    padding: 18px 16px;
    border-radius: 16px;
    background: linear-gradient(135deg, #241f1a 0%, #0a6b7a 100%);
    box-shadow: 0 8px 22px rgba(36, 31, 26, .25);
    font-size: 17px;
    font-weight: 500;
    line-height: 1.5;
}

    #content .page-default .packages-banner-top .link {
        display: inline-block;
        margin-top: 10px;
        padding: 7px 20px;
        border-radius: 999px;
        background: #f2b632;
        color: #2b2100;
        font-weight: 700;
        font-size: 15px;
    }

        .he #content .page-default .packages-banner-top .link:after {
            content: " \2190";
        }

        .en #content .page-default .packages-banner-top .link:after {
            content: " \2192";
        }

#content .page-default .four-banners {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    padding-top: 14px;
}

    #content .page-default .four-banners .banner,
    #content .page-default .four-banners .banner:hover {
        position: relative;
        display: flex;
        flex-direction: column;
        float: none;
        margin: 0;
        width: auto;
        height: auto;
        min-height: 150px;
        padding: 16px 14px;
        box-sizing: border-box;
        border-radius: 16px;
        background: #fff;
        box-shadow: 0 6px 18px rgba(43, 31, 20, .08);
        overflow: hidden;
    }

        #content .page-default .four-banners .banner:before {
            content: "";
            width: 44px;
            height: 44px;
            border-radius: 12px;
            background-position: center;
            background-repeat: no-repeat;
            background-size: 24px;
        }

        #content .page-default .four-banners .banner.register:before {
            background-color: #12a0b5;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='4'/%3E%3Cpath d='M2 21c0-4 3-6 7-6s7 2 7 6M19 8v6M16 11h6'/%3E%3C/svg%3E");
        }

        #content .page-default .four-banners .banner.packages:before {
            background-color: #c9932f;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12V4h8l10 10-8 8z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1.5'/%3E%3C/svg%3E");
        }

        #content .page-default .four-banners .banner.upload:before {
            background-color: #8b5fb0;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 16V4M7 9l5-5 5 5M4 20h16'/%3E%3C/svg%3E");
        }

        #content .page-default .four-banners .banner .title {
            margin: 12px 0 4px;
            font-size: 17px;
            font-weight: 800;
            color: #241f1a;
            text-align: start;
        }

        #content .page-default .four-banners .banner .content,
        #content .page-default .four-banners .banner.last .content {
            padding: 0;
            font-size: 13px;
            line-height: 1.45;
            color: #7a7268;
        }

    #content .page-default .four-banners .banner.youtube,
    #content .page-default .four-banners .banner.youtube:hover {
        padding: 0;
        background: #1a1512;
    }

        #content .page-default .four-banners .banner.youtube:before {
            display: none;
        }

        #content .page-default .four-banners .banner.youtube img {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            max-width: none;
            max-height: none;
            object-fit: cover;
            opacity: .85;
        }

        #content .page-default .four-banners .banner.youtube .play {
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

/* ---------- home: free photo, side banners, category chips ---------- */

#content .page-default .column.first .free-photo {
    width: auto;
    height: auto;
    border: 0;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(43, 31, 20, .08);
    padding: 16px;
    box-sizing: border-box;
}

    #content .page-default .column.first .free-photo img {
        max-height: 140px;
        max-width: 100%;
        border-radius: 10px;
        margin: 6px 0 10px;
    }

    #content .page-default .column.first .free-photo input[type="submit"] {
        width: auto;
        height: 40px;
        padding: 0 28px;
        border-radius: 999px;
        background: linear-gradient(135deg, #0a6b7a 0%, #12a0b5 100%);
        font-weight: 700;
    }

/* Sits under the free photo in the first column */
#content .page-default .column .banner.photographers {
    display: flex;
    align-items: center;
    gap: 14px;
    width: auto;
    max-width: none;
    height: auto;
    margin: 20px 0 0;
    padding: 16px;
    box-sizing: border-box;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(43, 31, 20, .08);
}

    #content .page-default .column .banner.photographers:before {
        content: "";
        flex: 0 0 52px;
        height: 52px;
        border-radius: 14px;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 28px;
    }

    #content .page-default .column .banner.photographers:before {
        background-color: #8b5fb0;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h3l2-3h6l2 3h3v11H4z'/%3E%3Ccircle cx='12' cy='13' r='3.5'/%3E%3C/svg%3E");
    }

    #content .page-default .column .banner .content {
        width: auto;
        padding: 0;
        text-align: start;
    }

        #content .page-default .column .banner .content .title {
            padding: 0 0 4px;
            font-size: 17px;
            font-weight: 800;
            color: #241f1a;
        }

        #content .page-default .column .banner .content .text {
            font-size: 13px;
            line-height: 1.45;
            color: #7a7268;
        }

#content .page-default .column .links .header {
    font-size: 18px;
    font-weight: 800;
    color: #241f1a;
    border-bottom: 0;
    padding-bottom: 0;
}

/* DataList renders a table; flatten it into wrapping chips */
#content .page-default .column .links > table {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

    #content .page-default .column .links > table tbody,
    #content .page-default .column .links > table tr,
    #content .page-default .column .links > table td {
        display: contents;
    }

#content .page-default .column .links a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid #e6ddcc;
    color: #2c2620;
    font-size: 14px;
    transition: border-color .15s, background .15s;
}

    #content .page-default .column .links a:before {
        content: "";
        flex: 0 0 14px;
        width: 14px;
        height: 14px;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a6b7a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.35-4.35'/%3E%3C/svg%3E") center / contain no-repeat;
    }

    #content .page-default .column .links a:hover {
        border-color: #0a6b7a;
        background: #eef1e4;
    }

    #content .page-default .column .links a:active {
        background: #eef1e4;
        border-color: #12a0b5;
    }

/* ---------- image grids: soft cards (the Photos.aspx results grid has its
   own fuller card treatment further down — "results grid: a real card grid") ---------- */

.page-classification .featured-content .content-item a img.thumbnail,
#main-content-with-aside .page-photo .related-photos-and-tags .photos .related .image-wrapper img {
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(43, 31, 20, .12);
}

.page-classification .featured-content .content-item a .title {
    font-weight: 700;
    color: #2c2620;
}

#fluid-main-content-with-aside .page-photos .controls,
#fluid-main-content-with-aside .page-photos .paging {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 4px 14px rgba(43, 31, 20, .06);
    padding: 12px 14px;
}

/* ---------- results-grid controls bar: the count, "sort by" and
   "items per page" jQuery UI buttons, and the pager's page-number box —
   these never had their own look before and fell back to the browser's
   bare link/input styling, which is what looked broken ---------- */

#fluid-main-content-with-aside .page-photos .controls .count {
    font-size: 14px;
    color: #7a7268;
}

    #fluid-main-content-with-aside .page-photos .controls .count strong {
        font-family: "Frank Ruhl Libre", Georgia, serif;
        font-size: 20px;
        font-weight: 700;
        color: #241f1a;
        margin-inline-end: 4px;
    }

#fluid-main-content-with-aside .page-photos .controls .sort-by,
#fluid-main-content-with-aside .page-photos .controls .items-per-page {
    font-size: 13px;
    color: #7a7268;
}

#fluid-main-content-with-aside .page-photos .controls .sort-by .ui-button,
#fluid-main-content-with-aside .page-photos .controls .items-per-page .ui-button {
    display: inline-block;
    margin-inline-start: 4px;
    padding: 0;
    border: 1px solid #e9e1d2;
    border-radius: 999px;
    background: #faf6ef;
    text-decoration: none;
    vertical-align: middle;
    transition: border-color .15s, background .15s;
}

    #fluid-main-content-with-aside .page-photos .controls .sort-by .ui-button .ui-button-text,
    #fluid-main-content-with-aside .page-photos .controls .items-per-page .ui-button .ui-button-text {
        display: block;
        padding: 5px 14px;
        font-size: 13px;
        font-weight: 700;
        color: #4a433a;
    }

    #fluid-main-content-with-aside .page-photos .controls .sort-by .ui-button:hover,
    #fluid-main-content-with-aside .page-photos .controls .items-per-page .ui-button:hover {
        border-color: #0a6b7a;
    }

    #fluid-main-content-with-aside .page-photos .controls .sort-by .ui-button.ui-state-active,
    #fluid-main-content-with-aside .page-photos .controls .items-per-page .ui-button.ui-state-active {
        border-color: #0a6b7a;
        background: #0a6b7a;
    }

        #fluid-main-content-with-aside .page-photos .controls .sort-by .ui-button.ui-state-active .ui-button-text,
        #fluid-main-content-with-aside .page-photos .controls .items-per-page .ui-button.ui-state-active .ui-button-text {
            color: #fff;
        }

/* the pager itself: previous/next pills + a real page-number box instead
   of a bare <input type="text"> */
#fluid-main-content-with-aside .page-photos .paging .pager-control {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 14px;
    color: #7a7268;
}

    #fluid-main-content-with-aside .page-photos .paging .pager-control label {
        color: #7a7268;
    }

    #fluid-main-content-with-aside .page-photos .paging .pager-control .previous,
    #fluid-main-content-with-aside .page-photos .paging .pager-control .next {
        display: inline-flex;
        align-items: center;
        padding: 7px 16px;
        border: 1px solid #e9e1d2;
        border-radius: 999px;
        background: #faf6ef;
        color: #241f1a;
        font-weight: 700;
        font-size: 13px;
        text-decoration: none;
        transition: border-color .15s, background .15s, color .15s;
    }

        #fluid-main-content-with-aside .page-photos .paging .pager-control .previous:hover,
        #fluid-main-content-with-aside .page-photos .paging .pager-control .next:hover {
            border-color: #0a6b7a;
            background: #e7efe9;
            color: #0a6b7a;
        }

    #fluid-main-content-with-aside .page-photos .paging .pager-control .input {
        width: 44px;
        height: 32px;
        padding: 0;
        border: 1px solid #e9e1d2;
        border-radius: 8px;
        background: #fff;
        text-align: center;
        font-size: 14px;
        font-weight: 700;
        color: #241f1a;
        box-sizing: border-box;
    }

        #fluid-main-content-with-aside .page-photos .paging .pager-control .input:focus {
            outline: none;
            border-color: #0a6b7a;
            box-shadow: 0 0 0 3px rgba(10, 107, 122, .12);
        }


/* ---------- dropdown checklist: open full width under its field ----------
   The plugin parks the closed list at -33000px, so only the open one is matched here */
#content .filter .filed,
#content #searchBoxClassification .authors,
#content #searchBoxClassification .licenses {
    position: relative;
}

#content .filter .filed .ui-dropdownchecklist-dropcontainer-wrapper:not([style*="-33000"]),
#content #searchBoxClassification .ui-dropdownchecklist-dropcontainer-wrapper:not([style*="-33000"]) {
    left: 0 !important;
    right: 0 !important;
    top: 100% !important;
    width: auto !important;
    margin-top: 4px;
    z-index: 50;
}

    #content .filter .filed .ui-dropdownchecklist-dropcontainer-wrapper:not([style*="-33000"]) .ui-dropdownchecklist-dropcontainer {
        max-height: 260px;
        height: auto !important;
    }

.ui-dropdownchecklist-dropcontainer .ui-dropdownchecklist-item input {
    margin: 0 6px;
    accent-color: #0a6b7a;
}

/* ---------- single photo: details, price and buy button ---------- */

#main-content-with-aside .page-photo .photo-and-info .info {
    padding: 16px;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(43, 31, 20, .07);
    box-sizing: border-box;
}

#main-content-with-aside .page-photo .photo-and-info .info .section,
#main-content-with-aside .page-photo .photo-and-info .info .section:last-child {
    overflow: hidden; /* contains the floated value */
    margin-bottom: 0;
    padding: 9px 0;
    border-top: 0;
    border-bottom: 1px solid #ede4d4;
}

    #main-content-with-aside .page-photo .photo-and-info .info .section .tab {
        width: auto;
    }

    #main-content-with-aside .page-photo .photo-and-info .info .section .header {
        color: #948c7e;
        font-weight: 500;
    }

    #main-content-with-aside .page-photo .photo-and-info .info .section h2,
    #main-content-with-aside .page-photo .photo-and-info .info .section .tab {
        color: #241f1a;
        font-weight: 700;
    }

#main-content-with-aside .page-photo .photo-and-info .info .price {
    margin: 16px 0 12px;
    padding: 12px;
    border: 0;
    border-radius: 12px;
    background: #e7efe9;
    color: #064a54;
    font-size: 22px;
    font-weight: 800;
    text-align: center;
}

#main-content-with-aside .page-photo .photo-and-info .info .buy-button {
    margin: 0 0 16px;
    text-align: center;
}

    #main-content-with-aside .page-photo .photo-and-info .info .buy-button a {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        height: 54px;
        border-radius: 12px;
        background: linear-gradient(135deg, #c75d3f 0%, #e3a73c 100%);
        box-shadow: 0 6px 16px rgba(199, 93, 63, .35);
        color: #fff;
        font-size: 20px;
        font-weight: 800;
        text-decoration: none;
    }

        /* Only one of the two buy/download controls is ever rendered server-side
           (depends on whether this visitor has a package) — lnkBuyPhoto is a
           plain text link ("Buy now"), lnkDownloadPhoto wraps an <asp:Image>
           ("Download now" baked into a bitmap). :has(img) singles out the
           image one, so the text-only "Buy now" link keeps its own real text
           instead of getting a second, wrong label appended after it. */
        #main-content-with-aside .page-photo .photo-and-info .info .buy-button a:has(img) img {
            display: none;
        }

        #main-content-with-aside .page-photo .photo-and-info .info .buy-button a:before {
            content: "";
            width: 22px;
            height: 22px;
            background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11M7 10l5 5 5-5M5 20h14'/%3E%3C/svg%3E") center / contain no-repeat;
        }

/* text of the replaced buy-btn.jpg image (escaped so the file stays charset-safe) — only on the image variant, see the :has(img) note above */
.he #main-content-with-aside .page-photo .photo-and-info .info .buy-button a:has(img):after {
    content: "\5D4\5D5\5E8\5D3\20\5E2\5DB\5E9\5D9\5D5";
}

.en #main-content-with-aside .page-photo .photo-and-info .info .buy-button a:has(img):after {
    content: "Download now";
}

#main-content-with-aside .page-photo .photo-and-info .info .action-links {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 8px;
    margin-top: 16px;
    padding: 0;
}

    #main-content-with-aside .page-photo .photo-and-info .info .action-links .link {
        display: flex;
        align-items: center;
        gap: 8px;
        margin: 0;
        padding: 10px;
        border: 1px solid #e9e1d2;
        border-radius: 10px;
        background: #faf8f3;
        font-size: 13px;
        line-height: 1.3;
    }

        #main-content-with-aside .page-photo .photo-and-info .info .action-links .link img {
            flex: 0 0 auto;
            width: 18px;
            mix-blend-mode: multiply;
        }

        #main-content-with-aside .page-photo .photo-and-info .info .action-links .link a {
            position: static;
            color: #2c2620;
            text-decoration: none;
            font-weight: 500;
        }

/* author and keyword boxes under the related photos */
#main-content-with-aside .page-photo .related-photos-and-tags .tags .author,
#main-content-with-aside .page-photo .related-photos-and-tags .tags .related-tags {
    border: 0;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 4px 14px rgba(43, 31, 20, .06);
    margin-bottom: 16px;
}

/* photographer link ("<name> - all photos"): a quiet pill-button instead of
   a plain inherited-color text link — nicer, not louder */
#main-content-with-aside .page-photo .related-photos-and-tags .tags .author a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding: 7px 14px;
    border: 1px solid #e9e1d2;
    border-radius: 999px;
    background: #faf8f3;
    color: #0a6b7a;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: border-color .15s ease, background .15s ease;
}

#main-content-with-aside .page-photo .related-photos-and-tags .tags .author a:after {
    content: "";
    width: 12px;
    height: 12px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a6b7a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M12 19l-7-7 7-7'/%3E%3C/svg%3E") center / contain no-repeat;
}

#main-content-with-aside .page-photo .related-photos-and-tags .tags .author a:hover {
    border-color: #0a6b7a;
    background: #eef1e4;
}

/* "search by these tags" button: the same quiet secondary style */
#main-content-with-aside .page-photo .related-photos-and-tags .tags .related-tags .button a {
    display: inline-flex;
    align-items: center;
    padding: 9px 18px;
    border-radius: 999px;
    background: #0a6b7a;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: background .15s ease;
}

#main-content-with-aside .page-photo .related-photos-and-tags .tags .related-tags .button a:hover {
    background: #085560;
}

/* related tags: checkbox + tag chips, instead of a plain checkbox list.
   The DataList (RepeatColumns="2") renders a <table>; each <td> holds an
   <input type="checkbox"> followed by a *sibling* <label><a>tag</a></label>
   (ASP.NET's AssociatedControlID links them by for/id, it doesn't nest the
   checkbox inside the label) — so the <td> itself, not the label, is what
   becomes the chip; the label is unwrapped with display:contents so its
   link sits directly in that flex row. */
#main-content-with-aside .page-photo .related-photos-and-tags .tags .related-tags .tag-checkboxes table {
    width: 100%;
    border-spacing: 8px;
    border-collapse: separate;
    margin: -4px;
}

#main-content-with-aside .page-photo .related-photos-and-tags .tags .related-tags .tag-checkboxes td {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 12px;
    border: 1px solid #e9e1d2;
    border-radius: 999px;
    background: #faf8f3;
    font-size: 13px;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}

#main-content-with-aside .page-photo .related-photos-and-tags .tags .related-tags .tag-checkboxes td:hover {
    border-color: #0a6b7a;
    background: #eef1e4;
}

#main-content-with-aside .page-photo .related-photos-and-tags .tags .related-tags .tag-checkboxes input[type="checkbox"] {
    margin: 0;
    flex: 0 0 auto;
    accent-color: #0a6b7a;
}

#main-content-with-aside .page-photo .related-photos-and-tags .tags .related-tags .tag-checkboxes label {
    display: contents;
}

#main-content-with-aside .page-photo .related-photos-and-tags .tags .related-tags .tag-checkboxes label a {
    color: #2c2620;
    text-decoration: none;
    font-weight: 500;
}

/* related ("similar") photos: the same real card grid used on the results
   page and the home page's popular photos, instead of the old 150px float
   tiles. Mobile already has its own 2-column version further down, which
   wins the cascade there — this is the desktop/default sizing. */
#main-content-with-aside .page-photo .related-photos-and-tags .photos .related {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 14px;
}

    #main-content-with-aside .page-photo .related-photos-and-tags .photos .related .image-wrapper,
    #main-content-with-aside .page-photo .related-photos-and-tags .photos .related .image-wrapper .tr,
    #main-content-with-aside .page-photo .related-photos-and-tags .photos .related .image-wrapper .td {
        display: block;
        float: none;
        width: auto;
        height: auto;
        margin: 0;
    }

    #main-content-with-aside .page-photo .related-photos-and-tags .photos .related .image-wrapper {
        position: relative;
        aspect-ratio: 1 / 1;
        border-radius: 12px;
        box-shadow: 0 3px 10px rgba(43, 31, 20, .08);
    }

        #main-content-with-aside .page-photo .related-photos-and-tags .photos .related .image-wrapper .td {
            position: absolute;
            inset: 0;
        }

        #main-content-with-aside .page-photo .related-photos-and-tags .photos .related .image-wrapper img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 0;
        }

/* ---------- single photo (desktop): a real layout instead of the old
   500x500 float + 220px sidebar. The 3 action links (album / cart / preview)
   move to their own row below the photo — sized to the photo's own column,
   not spilling under the sidebar too — which needs .info (and the ASP.NET
   UpdatePanel's wrapper around it) "flattened" with display:contents so
   each of its sub-blocks becomes its own grid item — see the
   zz-responsive.css header note on this same technique used for the
   mobile filter re-order. Desktop-only: mobile keeps its own stacked order,
   already tuned in an earlier round. ---------- */
@media screen and (min-width: 981px) {

    #main-content-with-aside .page-photo .photo-and-info {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 320px;
        column-gap: 28px;
        row-gap: 16px;
        grid-template-areas:
            "photo   section"
            "photo   price"
            "photo   buy"
            "actions .";
        align-items: stretch; /* lets the photo stretch to match the sidebar's
                                  height (see .photo below), so the action
                                  buttons sit flush under it either way,
                                  instead of leaving a gap when the details
                                  + price + buy-button stack is the taller
                                  of the two */
    }

    #main-content-with-aside .page-photo .photo-and-info .info,
    #main-content-with-aside .page-photo .photo-and-info .info > * {
        display: contents;
    }

    #main-content-with-aside .page-photo .photo-and-info .info .section-group,
    #main-content-with-aside .page-photo .photo-and-info .info .price,
    #main-content-with-aside .page-photo .photo-and-info .info .buy-button {
        align-self: start;
    }

    #main-content-with-aside .page-photo .photo-and-info .photo {
        grid-area: photo;
        float: none;
        width: auto;
        height: auto;
    }

        #main-content-with-aside .page-photo .photo-and-info .photo img {
            display: block;
            width: 100%;
            height: 100%;
            min-height: 320px;
            object-fit: cover;
            border-radius: 16px;
            box-shadow: 0 10px 28px rgba(43, 31, 20, .14);
        }

    #main-content-with-aside .page-photo .photo-and-info .info .section-group {
        grid-area: section;
        padding: 16px;
        border-radius: 16px;
        background: #fff;
        box-shadow: 0 6px 18px rgba(43, 31, 20, .07);
        box-sizing: border-box;
    }

    #main-content-with-aside .page-photo .photo-and-info .info .price {
        grid-area: price;
        margin: 0;
    }

    #main-content-with-aside .page-photo .photo-and-info .info .buy-button {
        grid-area: buy;
        margin: 0;
    }

    #main-content-with-aside .page-photo .photo-and-info .info .action-links {
        grid-area: actions;
        margin-top: 0;
    }

    #main-content-with-aside .page-photo .related-photos-and-tags {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 320px;
        column-gap: 28px;
        align-items: start;
    }

        #main-content-with-aside .page-photo .related-photos-and-tags .photos,
        #main-content-with-aside .page-photo .related-photos-and-tags .tags {
            float: none;
            width: auto;
        }
}

/* item-count badge: this project only redesigns the mobile bottom bar for
   #sideTabs (desktop keeps the original, untouched side-tab widget from
   layout.css, which has no idea about a <span class="count">) — hide the
   badge by default so it never shows as bare unstyled text there, and turn
   it back on inside the mobile media query below, where it belongs. */
#content #sideTabs .tabs .tab .count {
    display: none;
}

/* Phones and tablets only */
@media screen and (max-width: 980px) {

    #head-nav .search input[type="text"] {
        border-color: #e3dac8;
        border-radius: 10px;
        background: #faf6ef;
    }

    #head-nav .search input[type="submit"] {
        border-radius: 10px;
        font-weight: 700;
    }

    /* Home and category pages already have a big search under the slider; keep only that one */
    body:has(.page-default .gallery .search-box) #head-nav .search {
        display: none;
    }

    body:has(.page-default .gallery .search-box) #head-nav {
        border-bottom: 0;
        box-shadow: none;
    }

    /* List page: lift only the filter above the results; the tag cloud stays after them */
    #content #full-width-content #fluid-aside-content,
    #content #full-width-content #fluid-aside-content > .page-photos {
        display: contents;
    }

    #content #full-width-content #fluid-aside-content .filter {
        order: 0;
        margin: 4px 12px 20px;
    }

    #content #full-width-content #fluid-aside-content .related-tags {
        order: 2;
        margin: 30px 12px 0;
    }

    #main-content-with-aside .page-photo .photo-and-info .info .action-links {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 739px) {

    #content .page-default .four-banners {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media screen and (max-width: 980px) {

    /* photo grids: card look is unscoped now (see "results grid: a real
       card grid" further down). The mobile-only tweak to the save icon
       (always visible, no hover on a touch screen) is placed later in
       this file, right after that section is defined, so it wins the
       cascade regardless of where the media query sits. */

    /* ---------- album / cart: bottom bar with a slide-up panel (logged-in users) ---------- */

    body:has(#sideTabs) {
        padding-bottom: 66px;
    }

    #content #sideTabs,
    #content #sideTabs.folded,
    #content #sideTabs.folded.tab-hover {
        position: fixed;
        top: auto !important;
        right: 0 !important;
        bottom: 0;
        left: 0;
        width: auto;
        height: auto !important;
        z-index: 900;
        display: flex;
        flex-direction: column-reverse;
    }

        #content #sideTabs .tabs {
            float: none;
            width: auto;
            height: auto;
            padding: 8px 12px;
            background: #fff;
            box-shadow: 0 -4px 16px rgba(43, 31, 20, .12);
        }

            #content #sideTabs .tabs .btn-wrp {
                position: static;
                display: flex;
                gap: 10px;
            }

            #content #sideTabs .tabs .tab,
            #content #sideTabs .tabs .tab.selected {
                position: relative;
                flex: 1 1 0;
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 8px;
                width: auto;
                height: 44px;
                margin: 0;
                border: 1px solid #e3dac8;
                border-radius: 10px;
                background: #faf6ef;
                color: #2c2620;
                font-size: 15px;
                font-weight: 700;
                text-decoration: none;
            }

                /* item-count badge: NOT in the markup today (the tab is an
                   empty <a>, the icon/label above are pure CSS content, but
                   a live count has to come from the server) — styled and
                   ready for a <span class="count"> added inside each .tab,
                   see the note sent with this file for the exact HTML */
                #content #sideTabs .tabs .tab .count {
                    display: inline-block;
                    position: absolute;
                    top: -6px;
                    inset-inline-end: 8px;
                    min-width: 18px;
                    height: 18px;
                    padding: 0 4px;
                    border-radius: 999px;
                    background: #f2b632;
                    color: #2b2100;
                    font-size: 11px;
                    font-weight: 800;
                    line-height: 18px;
                    text-align: center;
                    box-sizing: border-box;
                }

                    #content #sideTabs .tabs .tab .count:empty {
                        display: none;
                    }

                #content #sideTabs .tabs .tab:before {
                    content: "";
                    width: 20px;
                    height: 20px;
                    background-position: center;
                    background-repeat: no-repeat;
                    background-size: contain;
                }

                #content #sideTabs .tabs .tab.album:before {
                    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23007384' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Ccircle cx='9' cy='10' r='2'/%3E%3Cpath d='M21 17l-5-5-9 8'/%3E%3C/svg%3E");
                }

                #content #sideTabs .tabs .tab.cart:before {
                    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23007384' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1.5'/%3E%3Ccircle cx='18' cy='20' r='1.5'/%3E%3Cpath d='M2 3h3l3 12h11l2-8H6.5'/%3E%3C/svg%3E");
                }

                /* tab labels (escaped so the file stays charset-safe) */
                .he #content #sideTabs .tabs .tab.album:after {
                    content: "\5D4\5D0\5DC\5D1\5D5\5DD\20\5E9\5DC\5D9";
                }

                .he #content #sideTabs .tabs .tab.cart:after {
                    content: "\5E1\5DC\20\5E7\5E0\5D9\5D5\5EA";
                }

                .en #content #sideTabs .tabs .tab.album:after {
                    content: "My album";
                }

                .en #content #sideTabs .tabs .tab.cart:after {
                    content: "Cart";
                }

        #content #sideTabs:not(.folded) .tabs .tab.selected {
            border-color: #0a6b7a;
            background: linear-gradient(135deg, #0a6b7a 0%, #12a0b5 100%);
            color: #fff;
        }

            #content #sideTabs:not(.folded) .tabs .tab.selected:before {
                filter: brightness(0) invert(1);
            }

        #content #sideTabs .content {
            float: none;
            width: auto;
            height: auto;
            max-height: 55vh;
            overflow-y: auto;
            padding: 16px;
            border-radius: 18px 18px 0 0;
            background: #fff;
            color: #2c2620;
            box-shadow: 0 -10px 30px rgba(43, 31, 20, .2);
            transform: translateY(0);
            opacity: 1;
            transition: transform .32s cubic-bezier(.22, .9, .32, 1), opacity .24s ease, max-height .32s ease, padding .32s ease;
        }

        #content #sideTabs.folded .content {
            max-height: 0;
            padding-top: 0;
            padding-bottom: 0;
            opacity: 0;
            transform: translateY(16px);
            overflow: hidden;
            box-shadow: none;
        }

            #content #sideTabs .content .header {
                color: #241f1a;
                font-size: 17px;
                font-weight: 800;
                text-align: start;
            }

            #content #sideTabs .content .photos {
                display: grid;
                grid-template-columns: repeat(4, 1fr);
                gap: 10px;
                height: auto !important;
                overflow: visible !important;
                margin-top: 12px;
            }

                #content #sideTabs .content .photos > div {
                    display: contents;
                }

                #content #sideTabs .content .photos .table.photo {
                    position: relative;
                    display: block;
                    width: auto;
                    height: auto;
                    margin: 0;
                    background: none;
                }

                    #content #sideTabs .content .photos .table.photo .tr,
                    #content #sideTabs .content .photos .table.photo .td {
                        display: block;
                    }

                    #content #sideTabs .content .photos .table.photo .td.del {
                        position: absolute;
                        top: -6px;
                        left: -6px;
                        height: auto;
                        padding: 0;
                        z-index: 1;
                    }

                    #content #sideTabs .content .photos .table.photo .td.thumbnail img {
                        display: block;
                        width: 100%;
                        height: 70px;
                        max-width: none;
                        max-height: none;
                        object-fit: cover;
                        border-radius: 8px;
                    }

            #content #sideTabs .content .footer {
                display: flex;
                gap: 10px;
                margin-top: 16px;
            }

                #content #sideTabs .content .footer a,
                #content #sideTabs .content .footer a:last-child {
                    flex: 1 1 0;
                    margin: 0;
                    border: 0;
                    border-radius: 10px;
                    background: linear-gradient(135deg, #0a6b7a 0%, #12a0b5 100%);
                    color: #fff;
                    text-align: center;
                }

                    #content #sideTabs .content .footer a .ui-button-text {
                        padding: 0;
                        line-height: 44px;
                        font-weight: 700;
                    }
}

/* =========================================================
   Added in this revision (see change notes delivered alongside
   this file). Three things, in order:
   1. Packages page: full redesign, desktop + mobile (previously
      unstyled by zz-responsive.css; still used the 2012 look).
   2. Categories (Classification.aspx): desktop card treatment
      (previously only had a mobile grid; desktop was untouched).
   3. A few "go further than the draft" touches: rounded/elevated
      home hero, hover zoom on photo grids, bolder headings.
   ========================================================= */

/* ---------- discount packages (Packages.aspx / Package.ascx) ----------
   Packages.aspx still has its own old inline <style> block (lines ~15-69)
   and Package.ascx has 3 inline style="" attributes (font-size, a stray
   negative margin-top, color). Recommended cleanup for both is in the
   change-notes doc, but every selector below is deliberately written
   with #main-content + .page-packages so it wins by specificity over
   that inline <style> block and over pages.css's .graybannerdiv rule
   even if neither file is touched. The one inline attribute that truly
   fights the new layout (packagePrice-packageGrayDiv's margin-top:-18px)
   is neutralized with !important as a safety net either way. */

html body:has(.page-packages) {
    background-color: #fff;
}

#main-content .page-packages {
    padding-top: 6px;
}

    #main-content .page-packages .packages {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: center;
        gap: 24px;
        max-width: 960px;
        margin: 0 auto;
        color: #4a433a;
        line-height: 1.5;
    }

    #main-content .page-packages .monthly-parentdiv,
    #main-content .page-packages .downloadfile-parentdiv {
        float: none;
        width: 320px;
        max-width: 100%;
        margin: 0;
        text-align: center;
    }

        #main-content .page-packages .downloadfile-parentdiv {
            width: 420px;
        }

    #main-content .page-packages .graybannerdiv {
        background: linear-gradient(135deg, #241f1a 0%, #0a6b7a 100%) !important;
        border-radius: 16px 16px 0 0;
        color: #fff;
        font-size: 16px;
        font-weight: 700;
        line-height: 1.4;
        padding: 16px 18px;
    }

    #main-content .page-packages .monthly-whitecontentdiv,
    #main-content .page-packages .downloadfile-whitecontentdiv {
        height: auto;
        padding: 26px 22px 24px;
        border-radius: 0 0 16px 16px;
        background: #fff;
        box-shadow: 0 8px 24px rgba(43, 31, 20, .1);
        font-size: 15px;
        text-align: center;
    }

    /* The gray price boxes are each wrapped in a plain <a> (must-login) with
       no class of its own — a browser's default link blue + underline is
       drawn by that <a> itself, and child text setting its own
       text-decoration:none does NOT cancel a line already established by
       an ancestor, so the fix has to target the <a> directly. */
    #main-content .page-packages .monthly-whitecontentdiv > a,
    #main-content .page-packages .downloadfile-whitecontentdiv > a {
        display: block;
        color: inherit;
        text-decoration: none;
    }

    /* monthly subscription tile */

    #main-content .page-packages .monthly-grayimgdiv {
        margin: 18px 0;
        padding: 22px 16px 26px;
        border-radius: 14px;
        background: linear-gradient(135deg, #faf6ef 0%, #e7efe9 100%);
        border: 1px solid #efe5d2;
        font-size: 15px;
        line-height: 1.6;
        cursor: pointer;
        transition: transform .15s, box-shadow .15s;
    }

        #main-content .page-packages .monthly-grayimgdiv:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 24px rgba(10, 107, 122, .18);
            background: linear-gradient(135deg, #faf6ef 0%, #e7efe9 100%);
            opacity: 1;
            color: inherit;
        }

    #main-content .page-packages p {
        margin: 12px 0 18px !important;
        font-size: 13px;
        color: #948c7e;
    }

    #main-content .page-packages .lnkInsideMonthly {
        display: inline-block;
        padding: 10px 26px;
        border-radius: 999px;
        background: linear-gradient(135deg, #0a6b7a 0%, #12a0b5 100%);
        color: #fff !important;
        font-weight: 700;
        font-size: 14px;
        text-decoration: none !important;
        transition: box-shadow .15s;
    }

        #main-content .page-packages .lnkInsideMonthly:hover {
            box-shadow: 0 8px 18px rgba(10, 107, 122, .3);
        }

    /* per-photo download packages: one row per tier */

    #main-content .page-packages .downloadfile-whitecontentdiv {
        text-align: center !important;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    #main-content .page-packages .downloadfile-grayimgdiv {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        margin: 0 !important;
        padding: 18px 20px;
        border-radius: 12px;
        background: #faf6ef;
        border: 1px solid #e9e1d2;
        text-align: start;
        transition: transform .15s, box-shadow .15s, border-color .15s;
        overflow: visible; /* an older mobile rule (#content .downloadfile-grayimgdiv) sets
                               overflow:hidden to contain floats from the pre-redesign layout;
                               this element no longer has floated children, and hiding overflow
                               here would clip the "best value" badge below, which intentionally
                               pokes up above the card's top edge */
    }

        #main-content .page-packages .downloadfile-grayimgdiv:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(43, 31, 20, .12);
            border-color: #12a0b5;
            background: #faf6ef;
            opacity: 1;
            color: inherit;
        }

        #main-content .page-packages .downloadfile-grayimgdiv .numberOfPhoto-packageGrayDiv {
            float: none;
            font-size: 16px !important;
            font-weight: 700;
            color: #241f1a;
        }

        #main-content .page-packages .downloadfile-grayimgdiv .packagePrice-packageGrayDiv {
            float: none;
            margin-top: 0 !important;
            text-align: end;
            color: #0a6b7a;
            font-weight: 700;
            line-height: 1.4;
        }

    /* best-value badge on the 3rd tier (11 photos) - pure CSS, no markup change */

    #main-content .page-packages .downloadfile-whitecontentdiv > a:nth-of-type(3) .downloadfile-grayimgdiv {
        position: relative;
        border-color: #f2b632;
        background: #fff8ea;
    }

        #main-content .page-packages .downloadfile-whitecontentdiv > a:nth-of-type(3) .downloadfile-grayimgdiv:before {
            content: "\5D4\5DB\5D9\20\5DE\5E9\5EA\5DC\5DD";
            position: absolute;
            top: -11px;
            inset-inline-start: 16px;
            padding: 3px 12px;
            border-radius: 999px;
            background: #f2b632;
            color: #2b2100;
            font-size: 11px;
            font-weight: 800;
        }

        .en #main-content .page-packages .downloadfile-whitecontentdiv > a:nth-of-type(3) .downloadfile-grayimgdiv:before {
            content: "Best value";
        }

@media screen and (max-width: 980px) {

    #main-content .page-packages .packages {
        gap: 20px;
    }

    #main-content .page-packages .monthly-parentdiv,
    #main-content .page-packages .downloadfile-parentdiv {
        width: 100%;
        max-width: 420px;
    }

    #main-content .page-packages .graybannerdiv {
        font-size: 15px;
        padding: 14px 16px;
    }

    #main-content .page-packages .monthly-whitecontentdiv,
    #main-content .page-packages .downloadfile-whitecontentdiv {
        padding: 20px 18px;
    }

    /* mobile only: the per-photo packages are the main offer, so they come
       first; the monthly subscription follows after and is deliberately
       played down (flat banner, no shadow, outline button) so it reads as
       a secondary option rather than competing with the packages above it */
    #main-content .page-packages .downloadfile-parentdiv {
        order: 1;
    }

    #main-content .page-packages .monthly-parentdiv {
        order: 2;
    }

        #main-content .page-packages .monthly-parentdiv .graybannerdiv {
            background: #efebe1 !important;
            color: #6b6354;
            font-size: 13px;
            font-weight: 600;
        }

        #main-content .page-packages .monthly-parentdiv .monthly-whitecontentdiv {
            padding: 16px 18px;
            box-shadow: none;
            border: 1px solid #ece6d8;
            border-top: 0;
            font-size: 13px;
            color: #776f60;
        }

        #main-content .page-packages .monthly-parentdiv .monthly-grayimgdiv {
            margin: 10px 0 12px;
            padding: 14px 12px 16px;
            background: #faf8f3;
            border-color: #ece6d8;
            font-size: 13px;
        }

            #main-content .page-packages .monthly-parentdiv .monthly-grayimgdiv > span:first-child {
                font-size: 19px !important;
                font-weight: 700;
                color: #4a433a;
            }

        #main-content .page-packages .monthly-parentdiv .lnkInsideMonthly {
            background: transparent;
            color: #8a8373 !important;
            border: 1px solid #d8d0bd;
            box-shadow: none;
            font-size: 13px;
            padding: 8px 20px;
        }

            #main-content .page-packages .monthly-parentdiv .lnkInsideMonthly:hover {
                box-shadow: none;
                border-color: #0a6b7a;
                color: #0a6b7a !important;
            }
}

/* ---------- categories (Classification.aspx): desktop cards ----------
   Mobile already had a grid treatment above; desktop previously fell
   through to pages.css's plain floated icon list. */

#content .page-classification .header {
    border-bottom: 0;
    font-size: 22px;
    font-weight: 800;
    color: #241f1a;
}

#content .page-classification .featured-content {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

    #content .page-classification .featured-content .content-item {
        float: none;
        width: auto;
        height: auto;
        margin: 0;
    }

        #content .page-classification .featured-content .content-item a {
            display: block;
            padding: 14px 10px 16px;
            border-radius: 14px;
            background: #fff;
            box-shadow: 0 4px 14px rgba(43, 31, 20, .07);
            transition: transform .15s, box-shadow .15s;
        }

            #content .page-classification .featured-content .content-item a:hover {
                transform: translateY(-3px);
                box-shadow: 0 10px 24px rgba(43, 31, 20, .14);
            }

        #content .page-classification .featured-content .content-item a .image-wrapper {
            width: auto;
            overflow: hidden;
            border-radius: 10px;
        }

            #content .page-classification .featured-content .content-item a img.thumbnail {
                display: block;
                width: 100%;
                height: 110px;
                max-width: none;
                max-height: none;
                object-fit: cover;
                border-radius: 10px;
                margin: 0;
                transition: transform .25s ease;
            }

            #content .page-classification .featured-content .content-item a:hover img.thumbnail {
                transform: scale(1.06);
            }

        #content .page-classification .featured-content .content-item a .title {
            display: block;
            margin-top: 10px;
            padding: 0;
            font-weight: 700;
            font-size: 14px;
            color: #2c2620;
            text-align: center;
        }

/* ---------- a few "further than the draft" touches ---------- */

/* Home hero: frame the fixed-size slider instead of leaving it full-bleed */
.page-default .gallery-bg .gallery #slider {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 18px 40px rgba(43, 31, 20, .2);
}

/* ---------- home page: "popular photos" grid, below the subject columns.
   NEW SECTION — not in Default.aspx today. See the note sent with this
   file for the exact HTML to add (a heading + a Repeater); the card look
   itself reuses the same classes/markup pattern as the Photos.aspx
   results grid (.table.photo > .image-wrapper > img.thumbnail), so it's
   visually consistent with the rest of the site for free. */

#content .page-default .popular-photos {
    margin-top: 36px;
}

    /* same size as the "photos / illustrations" subject headings above it */
    #content .page-default .popular-photos > .header {
        font-size: 18px;
        font-weight: 800;
        color: #241f1a;
    }

    #content .page-default .popular-photos .photos {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 18px;
        margin-top: 14px;
    }

    #content .page-default .popular-photos .photos .photo {
        display: block;
        float: none;
        width: 100%;
        height: auto;
        margin: 0;
        border-radius: 14px;
        overflow: hidden;
        background: #fff;
        box-shadow: 0 4px 14px rgba(43, 31, 20, .1);
        transition: transform .22s ease, box-shadow .22s ease;
    }

        #content .page-default .popular-photos .photos .photo:hover {
            transform: translateY(-4px);
            box-shadow: 0 14px 30px rgba(43, 31, 20, .18);
        }

        #content .page-default .popular-photos .photos .photo > .tr,
        #content .page-default .popular-photos .photos .photo > .tr > .td {
            display: block;
            width: 100%;
            margin: 0;
            padding: 0;
        }

        #content .page-default .popular-photos .photos .photo .image-wrapper {
            display: block;
            width: 100%;
            position: relative;
            aspect-ratio: 3 / 2;
            overflow: hidden;
            margin: 0;
        }

            #content .page-default .popular-photos .photos .photo .image-wrapper .tr,
            #content .page-default .popular-photos .photos .photo .image-wrapper .td {
                display: block;
                width: 100%;
                height: 100%;
            }

            #content .page-default .popular-photos .photos .photo .image-wrapper a {
                display: block;
                width: 100%;
                height: 100%;
            }

            #content .page-default .popular-photos .photos .photo img.thumbnail {
                display: block;
                width: 100%;
                height: 100%;
                max-width: none;
                max-height: none;
                object-fit: cover;
                transition: transform .3s ease;
            }

            #content .page-default .popular-photos .photos .photo:hover img.thumbnail {
                transform: scale(1.07);
            }

@media screen and (max-width: 980px) {
    #content .page-default .popular-photos {
        margin-top: 24px;
    }
}

/* Bolder page headings across the priority pages — now in the heading serif, see the
   typography section below for the full h1/h2/h3 + .header/.title scale */
#main-content-with-aside .page-photo > .header,
#fluid-main-content-with-aside .page-photos .header-subject .header,
#fluid-main-content-with-aside .page-photos .header-photographer .photographer-name {
    font-family: "Frank Ruhl Libre", Georgia, serif;
    font-size: 30px;
    font-weight: 700;
    color: #241f1a;
    letter-spacing: 0;
}

/* Related-photos grid (Photo.aspx): lift + zoom on hover. The Photos.aspx
   results grid has its own fuller treatment, see "results grid: a real
   card grid" below, which already includes this same interaction. */
#main-content-with-aside .page-photo .related-photos-and-tags .photos .related .image-wrapper {
    overflow: hidden;
}

#main-content-with-aside .page-photo .related-photos-and-tags .photos .related .image-wrapper img {
    transition: transform .25s ease, box-shadow .15s ease;
}

    #main-content-with-aside .page-photo .related-photos-and-tags .photos .related a:hover img {
        transform: scale(1.06);
    }

/* ---------- results grid: a real card grid instead of 150px float tiles.
   Uniform 3:2 ratio per card — matches the real fixed-size (150x100) server
   thumbnail, so nothing is upscaled past its native resolution — with a
   quiet hover lift, image zoom and an icon-only save button that reuses
   the existing "add to album" control (<asp:LinkButton class="album-toggle">,
   already in Photos.aspx). No new markup anywhere in this section. That
   control only renders server-side for logged-in users (Visible="<%#
   Page.User.Identity.IsAuthenticated %>"), so guests simply see the plain
   card — nothing to click yet, nothing shown. */

#fluid-main-content-with-aside .page-photos .photos > div {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 18px;
}

#fluid-main-content-with-aside .page-photos .photos .photo {
    display: block;
    float: none;
    width: 100%;
    height: auto;
    margin: 0;
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 4px 14px rgba(43, 31, 20, .1);
    transition: transform .22s ease, box-shadow .22s ease;
}

    #fluid-main-content-with-aside .page-photos .photos .photo:hover {
        transform: translateY(-4px);
        box-shadow: 0 14px 30px rgba(43, 31, 20, .18);
    }

    #fluid-main-content-with-aside .page-photos .photos .photo > .tr,
    #fluid-main-content-with-aside .page-photos .photos .photo > .tr > .td {
        display: block;
        width: 100%;
        margin: 0;
        padding: 0;
        text-align: inherit;
    }

    #fluid-main-content-with-aside .page-photos .photos .photo .image-wrapper {
        display: block;
        width: 100%;
        position: relative;
        aspect-ratio: 3 / 2;
        overflow: hidden;
        margin: 0;
    }

        #fluid-main-content-with-aside .page-photos .photos .photo .image-wrapper > .tr {
            position: absolute;
            inset: 0;
            display: block;
        }

            #fluid-main-content-with-aside .page-photos .photos .photo .image-wrapper > .tr > .td {
                display: block;
                width: 100%;
                height: 100%;
                text-align: inherit;
            }

        /* 2nd row of the image-wrapper (the album-toggle's own table row) sits on
           top of the image but is see-through to clicks except the round button */
        #fluid-main-content-with-aside .page-photos .photos .photo .image-wrapper > .tr:last-child {
            pointer-events: none;
        }

        #fluid-main-content-with-aside .page-photos .photos .photo .image-wrapper a:has(img.thumbnail) {
            display: block;
            width: 100%;
            height: 100%;
        }

        #fluid-main-content-with-aside .page-photos .photos .photo img.thumbnail {
            display: block;
            width: 100%;
            height: 100%;
            max-width: none;
            max-height: none;
            object-fit: cover;
            border-radius: 0;
            transition: transform .3s ease;
        }

        #fluid-main-content-with-aside .page-photos .photos .photo:hover img.thumbnail {
            transform: scale(1.07);
        }

    #fluid-main-content-with-aside .page-photos .photos .photo .album-toggle {
        position: absolute;
        top: 10px;
        inset-inline-end: 10px;
        width: 34px;
        height: 34px;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: rgba(255, 255, 255, .92);
        box-shadow: 0 2px 8px rgba(43, 31, 20, .25);
        font-size: 0;
        line-height: 0;
        color: transparent;
        opacity: 0;
        transform: scale(.8);
        pointer-events: auto;
        transition: opacity .18s ease, transform .18s ease, background .18s ease;
    }

        #fluid-main-content-with-aside .page-photos .photos .photo:hover .album-toggle,
        #fluid-main-content-with-aside .page-photos .photos .photo .album-toggle.in-album {
            opacity: 1;
            transform: scale(1);
        }

        /* Shopping-cart glyph. Note: this still runs through the existing
           "add to album" control (<asp:LinkButton class="album-toggle">,
           CommandName="AddToAlbum"/"RemoveFromAlbum") — only the icon
           changed, not the action. A real "add to cart" needs a new
           control + command in Photos.aspx / Photos.aspx.cs, which is
           outside the CSS files provided — see the note sent with this. */
        #fluid-main-content-with-aside .page-photos .photos .photo .album-toggle:before {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            width: 17px;
            height: 17px;
            transform: translate(-50%, -50%);
            background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232c2620' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E") center / contain no-repeat;
        }

        #fluid-main-content-with-aside .page-photos .photos .photo .album-toggle.in-album {
            background: #0a6b7a;
            box-shadow: 0 2px 10px rgba(10, 107, 122, .45);
        }

            #fluid-main-content-with-aside .page-photos .photos .photo .album-toggle.in-album:before {
                background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E") center / contain no-repeat;
            }

/* there is no mouse hover on a touch screen, so on mobile the save icon
   stays visible at all times instead of only appearing on hover — it
   already has two tones (plain white circle vs. filled teal/"in-album"),
   this just makes the default (not-yet-saved) tone show without a hover */
@media screen and (max-width: 980px) {
    #fluid-main-content-with-aside .page-photos .photos .photo .album-toggle {
        opacity: 1;
        transform: scale(1);
    }
}

/* =========================================================
   Full redesign layer — typography, motion & accessibility.
   Everything below is additive on top of the sections above:
   same selectors, same markup, only the look-and-feel moves to
   a warmer, livelier "modern gallery" language as requested.
   ========================================================= */

/* ---------- typography: a serif display face for real headings only.
   Deliberately scoped to h1 (actual page titles on Photo/Photos/
   Classification) and h2.header / h3.header (true section headings) —
   NOT bare h2 (that tag also wraps the photo caption on Photo.aspx and
   a card label on Classification.aspx, which must stay body text) and
   NOT .title (card/banner labels, which stay in Heebo for contrast). */

h1,
h2.header,
h3.header {
    font-family: "Frank Ruhl Libre", Georgia, serif;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.2;
}

#fluid-main-content-with-aside .page-photos .photographer-name {
    font-family: "Frank Ruhl Libre", Georgia, serif;
    font-weight: 700;
}

/* ---------- entrance choreography: grids and hero fade/lift in on load.
   Pure CSS, no JS hook — animation-fill-mode keeps the end state at
   opacity:1 / translateY(0), so nothing can get stuck half-visible. */

@keyframes picjewFadeUp {
    from {
        opacity: 0;
        transform: translateY(16px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes picjewFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.page-default .gallery-bg .gallery #slider,
#fluid-main-content-with-aside .page-photos .photos .photo,
.page-classification .featured-content .content-item,
#content .page-default .four-banners .banner,
#main-content-with-aside .page-photo .related-photos-and-tags .photos .related .image-wrapper {
    animation: picjewFadeUp .5s ease both;
}

.page-default .gallery-bg .gallery #slider {
    animation-duration: .7s;
}

/* Stagger the grid/list items so they settle in one after another
   instead of all popping at once (capped at 8 — later items just
   inherit the last delay, which still reads as "settled by then"). */
#fluid-main-content-with-aside .page-photos .photos .photo:nth-child(1),
.page-classification .featured-content .content-item:nth-child(1),
#content .page-default .four-banners .banner:nth-child(1),
#main-content-with-aside .page-photo .related-photos-and-tags .photos .related .image-wrapper:nth-child(1) { animation-delay: .02s; }
#fluid-main-content-with-aside .page-photos .photos .photo:nth-child(2),
.page-classification .featured-content .content-item:nth-child(2),
#content .page-default .four-banners .banner:nth-child(2),
#main-content-with-aside .page-photo .related-photos-and-tags .photos .related .image-wrapper:nth-child(2) { animation-delay: .07s; }
#fluid-main-content-with-aside .page-photos .photos .photo:nth-child(3),
.page-classification .featured-content .content-item:nth-child(3),
#content .page-default .four-banners .banner:nth-child(3),
#main-content-with-aside .page-photo .related-photos-and-tags .photos .related .image-wrapper:nth-child(3) { animation-delay: .12s; }
#fluid-main-content-with-aside .page-photos .photos .photo:nth-child(4),
.page-classification .featured-content .content-item:nth-child(4),
#content .page-default .four-banners .banner:nth-child(4),
#main-content-with-aside .page-photo .related-photos-and-tags .photos .related .image-wrapper:nth-child(4) { animation-delay: .17s; }
#fluid-main-content-with-aside .page-photos .photos .photo:nth-child(5),
.page-classification .featured-content .content-item:nth-child(5),
#content .page-default .four-banners .banner:nth-child(5) { animation-delay: .22s; }
#fluid-main-content-with-aside .page-photos .photos .photo:nth-child(6),
.page-classification .featured-content .content-item:nth-child(6) { animation-delay: .27s; }
#fluid-main-content-with-aside .page-photos .photos .photo:nth-child(7),
.page-classification .featured-content .content-item:nth-child(7) { animation-delay: .32s; }
#fluid-main-content-with-aside .page-photos .photos .photo:nth-child(n+8),
.page-classification .featured-content .content-item:nth-child(n+8) { animation-delay: .36s; }

.page-default .gallery-bg .gallery .search-box-wrp .search-box {
    animation: picjewFadeIn .6s ease .1s both;
}

/* ---------- gentle gradient motion on the two big brand surfaces.
   Slow and subtle on purpose — this is ambient texture, not a flashy loop. */

@keyframes picjewGradientDrift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

#main-header {
    background: linear-gradient(135deg, #241f1a 0%, #3a322a 50%, #241f1a 100%);
    background-size: 220% 220%;
    animation: picjewGradientDrift 14s ease-in-out infinite;
}

#content .page-default .packages-banner-top {
    background-size: 220% 220%;
    animation: picjewGradientDrift 16s ease-in-out infinite;
}

/* ---------- buy-button: a soft pulsing glow draws the eye without being loud ---------- */

@keyframes picjewPulseGlow {
    0%, 100% {
        box-shadow: 0 6px 16px rgba(199, 93, 63, .35);
    }

    50% {
        box-shadow: 0 8px 26px rgba(199, 93, 63, .6), 0 0 0 6px rgba(227, 167, 60, .14);
    }
}

#main-content-with-aside .page-photo .photo-and-info .info .buy-button a {
    animation: picjewPulseGlow 2.6s ease-in-out infinite;
}

    #main-content-with-aside .page-photo .photo-and-info .info .buy-button a:hover {
        animation-play-state: paused;
        transform: translateY(-1px);
        box-shadow: 0 10px 24px rgba(199, 93, 63, .5);
    }

/* best-value package card gets the same quiet pulse on its gold border */
@keyframes picjewPulseGold {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(242, 182, 50, 0);
    }

    50% {
        box-shadow: 0 0 0 5px rgba(242, 182, 50, .18);
    }
}

#main-content .page-packages .downloadfile-whitecontentdiv > a:nth-of-type(3) .downloadfile-grayimgdiv {
    animation: picjewPulseGold 3.2s ease-in-out infinite;
}

/* =========================================================
   My account area (Secure.master): Cart, Checkout (Order.aspx),
   My Album, Purchased Photos, My Packages, Profile Edit.
   Order.aspx is the one exception — it uses Picjew.master
   directly (no #secure-aside sidebar), so its selectors are
   scoped with "#main-content .page-order" instead of "#secure-*".
   ========================================================= */

#secure-top .my-account-header {
    margin: 4px 0 22px;
    font-size: 26px;
    font-weight: 800;
    color: #241f1a;
}

#secure-main {
    color: #4a433a;
}

    #secure-main .page-header,
    #main-content .page-order .page-header {
        margin: 0 0 20px;
        padding-bottom: 12px;
        border-bottom: 1px solid #ede4d4;
        font-size: 19px;
        font-weight: 700;
        color: #241f1a;
    }

/* account nav card */
#secure-aside {
    padding: 10px;
    border: 1px solid #e9e1d2;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 6px 20px rgba(43, 31, 20, .07);
    box-sizing: border-box;
}

    #secure-aside ul.navigation > li {
        width: auto;
        border: 0;
    }

    #secure-aside ul.navigation > li > a {
        display: block;
        width: auto;
        height: auto;
        margin-bottom: 4px;
        padding: 11px 14px;
        border-radius: 10px;
        line-height: 1.3;
        color: #4a433a;
        font-weight: 600;
        font-size: 14px;
        transition: background .15s, color .15s;
    }

        #secure-aside ul.navigation > li > a:hover {
            background: #faf6ef;
        }

        #secure-aside ul.navigation > li > a.nav-current {
            background: linear-gradient(135deg, #0a6b7a 0%, #12a0b5 100%);
            color: #fff;
        }

    #secure-aside ul.navigation > li > .ul-title {
        margin: 14px 0 4px;
        padding: 0 14px;
        line-height: 1.3;
        font-size: 12px;
        font-weight: 700;
        color: #948c7e;
        text-transform: uppercase;
        letter-spacing: .02em;
    }

    #secure-aside ul.navigation > li > ul {
        padding: 0;
    }

        #secure-aside ul.navigation > li > ul > li {
            border-top: 0;
        }

            #secure-aside ul.navigation > li > ul > li > a {
                height: auto;
                padding: 6px 14px;
                line-height: 1.4;
                border-radius: 10px;
                font-size: 13px;
                color: #4a433a;
            }

                #secure-aside ul.navigation > li > ul > li > a:hover {
                    background: #faf6ef;
                }

/* ---------- cart (Cart.aspx) & checkout (Order.aspx): shared
   "line item" card-row look for their item tables ---------- */

#main-content-with-aside .page-cart .cart,
#main-content .page-order .cart {
    float: none;
    width: auto;
    max-width: 720px;
}

#main-content-with-aside .page-cart .cart table.photosInCart,
#main-content .page-order .cart table.itemsInCart {
    width: 100%;
    min-width: 0;
    max-width: none;
    margin-bottom: 20px;
    border-collapse: separate;
    border-spacing: 0 10px;
}

    #main-content-with-aside .page-cart .cart table.photosInCart tr,
    #main-content .page-order .cart table.itemsInCart tr {
        display: flex;
        align-items: center;
        gap: 4px;
    }

    #main-content-with-aside .page-cart .cart table.photosInCart tr td,
    #main-content .page-order .cart table.itemsInCart tr td {
        display: block;
        background: #faf8f3;
        border-bottom: 0;
        padding: 10px 12px;
        vertical-align: middle;
        box-sizing: border-box;
    }

    /* row-as-card corners: logical radius so it flips correctly between
       the Hebrew (RTL) and English (LTR) builds instead of hard-coding a
       physical left/right side */
    #main-content-with-aside .page-cart .cart table.photosInCart tr:not(.footer) td:first-child,
    #main-content .page-order .cart table.itemsInCart tr.coupon td:first-child,
    #main-content .page-order .cart table.itemsInCart tr.footer td:first-child,
    #main-content-with-aside .page-cart .cart table.photosInCart tr.footer td:first-child,
    #main-content .page-order .cart table.itemsInCart tr:not(.footer):not(.coupon) td:nth-child(2) {
        border-start-start-radius: 12px;
        border-end-start-radius: 12px;
    }

    #main-content-with-aside .page-cart .cart table.photosInCart tr td:last-child,
    #main-content .page-order .cart table.itemsInCart tr td:last-child {
        border-start-end-radius: 12px;
        border-end-end-radius: 12px;
    }

    /* Cart.aspx columns: photo, title, id, price, remove */
    #main-content-with-aside .page-cart .cart table.photosInCart tr:not(.footer) td:first-child {
        flex: 0 0 auto;
    }

        #main-content-with-aside .page-cart .cart table.photosInCart tr:not(.footer) td:first-child a.photo img {
            display: block;
            width: 56px;
            height: 56px;
            max-width: none;
            max-height: none;
            object-fit: cover;
            border-radius: 8px;
        }

    #main-content-with-aside .page-cart .cart table.photosInCart tr:not(.footer) td.title {
        flex: 1 1 auto;
        min-width: 0;
        text-align: start;
        font-weight: 600;
        color: #241f1a;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    #main-content-with-aside .page-cart .cart table.photosInCart tr:not(.footer) td:nth-child(3) {
        flex: 0 0 auto;
        color: #948c7e;
        font-size: 13px;
    }

    #main-content-with-aside .page-cart .cart table.photosInCart tr:not(.footer) td:nth-child(4) {
        flex: 0 0 auto;
        color: #0a6b7a;
        font-weight: 700;
    }

    #main-content-with-aside .page-cart .cart table.photosInCart tr:not(.footer) td:nth-child(5) input[type="image"] {
        display: block;
        padding: 5px;
        border-radius: 999px;
        background: rgba(255, 255, 255, .9);
        box-shadow: 0 2px 6px rgba(43, 31, 20, .15);
        cursor: pointer;
        transition: box-shadow .15s;
    }

        #main-content-with-aside .page-cart .cart table.photosInCart tr:not(.footer) td:nth-child(5) input[type="image"]:hover {
            box-shadow: 0 4px 10px rgba(43, 31, 20, .25);
        }

    /* Order.aspx columns: (empty), photo, title, id, price */
    #main-content .page-order .cart table.itemsInCart tr:not(.footer):not(.coupon) td:first-child {
        display: none;
    }

    #main-content .page-order .cart table.itemsInCart tr:not(.footer):not(.coupon) td:nth-child(2) img.photo {
        display: block;
        flex: 0 0 auto;
        width: 56px;
        height: 56px;
        max-width: none;
        max-height: none;
        object-fit: cover;
        border-radius: 8px;
    }

    #main-content .page-order .cart table.itemsInCart tr:not(.footer):not(.coupon) td.title {
        flex: 1 1 auto;
        min-width: 0;
        text-align: start;
        font-weight: 600;
        color: #241f1a;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    #main-content .page-order .cart table.itemsInCart tr:not(.footer):not(.coupon) td:nth-child(4) {
        flex: 0 0 auto;
        color: #948c7e;
        font-size: 13px;
    }

    #main-content .page-order .cart table.itemsInCart tr:not(.footer):not(.coupon) td:nth-child(5) {
        flex: 0 0 auto;
        color: #0a6b7a;
        font-weight: 700;
    }

    /* Order.aspx applied coupon row */
    #main-content .page-order .cart table.itemsInCart tr.coupon td {
        background: #fff8ea;
    }

    #main-content .page-order .cart table.itemsInCart tr.coupon td.remove {
        flex: 0 0 auto;
        width: auto;
    }

    #main-content .page-order .cart table.itemsInCart tr.coupon td:nth-child(2) {
        flex: 1 1 auto;
        text-align: start;
        font-weight: 600;
        color: #8a6d16;
    }

    #main-content .page-order .cart table.itemsInCart tr.coupon td:last-child {
        flex: 0 0 auto;
        color: #c0392b;
        font-weight: 700;
    }

    /* shared total row */
    #main-content-with-aside .page-cart .cart table.photosInCart tr.footer td,
    #main-content .page-order .cart table.itemsInCart tr.footer td {
        background: #e7efe9;
        color: #064a54;
        font-weight: 700;
    }

    #main-content-with-aside .page-cart .cart table.photosInCart tr.footer td.total-price-label,
    #main-content .page-order .cart table.itemsInCart tr.footer td.total-price-label {
        flex: 1 1 auto;
        text-align: start;
    }

    #main-content-with-aside .page-cart .cart table.photosInCart tr.footer td:last-child,
    #main-content .page-order .cart table.itemsInCart tr.footer td.total-price {
        flex: 0 0 auto;
        font-size: 18px;
        font-weight: 800;
    }

#main-content-with-aside .page-cart .cart a.button-pay {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 4px 0 0;
    padding: 0 28px;
    width: auto;
    height: 50px;
    border-radius: 999px;
    background: linear-gradient(135deg, #0a6b7a 0%, #12a0b5 100%);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 6px 16px rgba(10, 107, 122, .3);
    transition: box-shadow .15s;
}

    #main-content-with-aside .page-cart .cart a.button-pay:hover {
        box-shadow: 0 8px 20px rgba(10, 107, 122, .4);
    }

#main-content-with-aside .page-cart .promo {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(43, 31, 20, .1);
}

/* checkout: coupon box */
#main-content .page-order .coupons {
    margin: 20px 0 10px;
}

    #main-content .page-order .coupons a.new-coupon {
        color: #0a6b7a;
        font-weight: 600;
        text-decoration: none;
    }

        #main-content .page-order .coupons a.new-coupon:hover {
            text-decoration: underline;
        }

#pnlAddNewCoupon {
    margin-top: 10px;
}

    #pnlAddNewCoupon label {
        display: block;
        margin-bottom: 6px;
        font-weight: 600;
        color: #4a433a;
        font-size: 13px;
    }

    #pnlAddNewCoupon input[type="text"] {
        width: 220px;
        max-width: 100%;
        height: 40px;
        padding: 0 12px;
        border: 1px solid #e9e1d2;
        border-radius: 10px;
        box-sizing: border-box;
        font-size: 14px;
    }

    #pnlAddNewCoupon .jqui-button {
        display: inline-block;
        margin-inline-start: 8px;
        padding: 0 20px;
        height: 40px;
        line-height: 40px;
        border-radius: 10px;
        background: linear-gradient(135deg, #0a6b7a 0%, #12a0b5 100%);
        color: #fff;
        font-weight: 700;
        border: 0;
        cursor: pointer;
    }

#main-content .page-order .coupons .existing-coupons .title {
    margin-bottom: 6px;
    font-weight: 600;
    font-size: 13px;
    color: #4a433a;
}

#main-content .page-order #ddlExinsingCoupons {
    height: 40px;
    padding: 0 10px;
    border: 1px solid #e9e1d2;
    border-radius: 10px;
}

/* checkout: payment method cards */
#main-content .page-order .payment-methods {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    max-width: 960px;
    margin-top: 32px;
}

    #main-content .page-order .payment-methods .method {
        float: none;
        width: auto;
        padding: 20px 16px;
        border: 1px solid #e9e1d2;
        border-radius: 14px;
        background: #faf8f3;
        text-align: center;
        box-sizing: border-box;
    }

        #main-content .page-order .payment-methods .method .border {
            display: none;
        }

        #main-content .page-order .payment-methods .method.package {
            border-color: #f2b632;
            background: #fff8ea;
        }

        #main-content .page-order .payment-methods .method .title {
            font-weight: 700;
            color: #241f1a;
            margin-bottom: 6px;
        }

        #main-content .page-order .payment-methods .method .description {
            display: block;
            width: auto;
            color: #776f60;
            font-size: 13px;
            line-height: 1.5;
        }

            #main-content .page-order .payment-methods .method .description .positive {
                color: #1a7a3c;
            }

            #main-content .page-order .payment-methods .method .description .negative {
                color: #c0392b;
            }

        #main-content .page-order .payment-methods .method .button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            margin-top: 14px;
            width: auto;
            min-width: 140px;
            height: 46px;
            padding: 0 20px;
            border-radius: 999px;
            background: linear-gradient(135deg, #0a6b7a 0%, #12a0b5 100%);
            color: #fff;
            font-weight: 700;
            font-size: 14px;
            text-decoration: none;
            box-sizing: border-box;
            transition: box-shadow .15s;
        }

            #main-content .page-order .payment-methods .method .button:hover {
                box-shadow: 0 8px 18px rgba(10, 107, 122, .3);
            }

        #main-content .page-order .payment-methods .method.package .button,
        #main-content .page-order .payment-methods .method.free .button {
            background: linear-gradient(135deg, #c75d3f 0%, #e3a73c 100%);
        }

        #main-content .page-order .payment-methods .method .disabled {
            display: block;
            margin-top: 12px;
            padding: 10px 12px;
            border: 1px solid #e9e1d2;
            border-radius: 10px;
            background: #fff;
            text-align: start;
            font-size: 12px;
            color: #948c7e;
        }

/* checkout: legacy phone-payment popup — no existing styling at all for
   this (it relies on a background image + bare tables), so this is a
   light mobile safety net rather than a full redesign */
@media screen and (max-width: 980px) {
    .MicroPanel {
        width: 94vw !important;
        max-width: 420px;
        left: 3vw !important;
        margin: 0 !important;
    }

        .MicroPanel table {
            width: 100% !important;
        }

        .MicroPanel img {
            max-width: 100%;
            height: auto;
        }
}

/* ---------- my album: photo grid with inline remove + select ---------- */

.page-myalbum .album .controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
    padding: 14px 16px;
    margin-bottom: 20px;
    border-radius: 12px;
    background: #faf6ef;
    border: 1px solid #e9e1d2;
}

    .page-myalbum .album .controls strong {
        color: #241f1a;
    }

    .page-myalbum .album .controls a {
        padding: 0;
        color: #0a6b7a;
        font-weight: 600;
        text-decoration: none;
    }

        .page-myalbum .album .controls a:hover {
            text-decoration: underline;
        }

    .page-myalbum .album .controls .side {
        float: none;
        margin-inline-start: auto;
        display: flex;
        gap: 14px;
    }

.page-myalbum .album .items {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 14px;
}

    /* the Repeater sits inside an UpdatePanel, which (no RenderMode="Block")
       renders as an inline <span> — flatten it so the photo cards become
       direct grid children instead of one single grid cell */
    .page-myalbum .album .items > span {
        display: contents;
    }

    .page-myalbum .album .items .clr {
        display: none;
    }

    .page-myalbum .album .table.photo {
        position: relative;
        display: block;
        float: none;
        width: auto;
        margin: 0;
        border: 0;
        overflow: visible;
        background: #fff;
        border-radius: 14px;
        box-shadow: 0 6px 16px rgba(43, 31, 20, .08);
        transition: transform .15s, box-shadow .15s;
    }

        .page-myalbum .album .table.photo:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 22px rgba(43, 31, 20, .14);
        }

        .page-myalbum .album .table.photo .tr,
        .page-myalbum .album .table.photo .td {
            display: block;
        }

        .page-myalbum .album .table.photo .tr:first-child {
            position: absolute;
            top: 8px;
            inset-inline-end: 8px;
            z-index: 2;
        }

        .page-myalbum .album .table.photo .td.del {
            padding: 0;
        }

            .page-myalbum .album .table.photo .td.del input[type="image"] {
                display: block;
                width: 22px;
                height: 22px;
                padding: 5px;
                border-radius: 999px;
                background: rgba(255, 255, 255, .92);
                box-shadow: 0 2px 6px rgba(43, 31, 20, .18);
            }

        .page-myalbum .album .table.photo .td.thumbnail {
            width: auto;
            height: auto;
            padding: 0;
            aspect-ratio: 1 / 1;
            overflow: hidden;
            border-radius: 14px 14px 0 0;
            text-align: initial;
        }

            .page-myalbum .album .table.photo .td.thumbnail a {
                display: block;
                width: 100%;
                height: 100%;
            }

            .page-myalbum .album .table.photo .td.thumbnail img {
                display: block;
                width: 100%;
                height: 100%;
                object-fit: cover;
            }

        .page-myalbum .album .table.photo .td.select {
            padding: 8px 10px;
            text-align: center;
        }

            .page-myalbum .album .table.photo .td.select input[type="checkbox"] {
                width: 16px;
                height: 16px;
                accent-color: #0a6b7a;
            }

/* ---------- purchased photos: list of owned downloads ---------- */

.page-purchasedphotos .photos table.items {
    display: block;
    width: 100%;
}

    .page-purchasedphotos .photos table.items > tbody {
        display: flex;
        flex-direction: column;
        gap: 14px;
    }

        .page-purchasedphotos .photos table.items > tbody > tr {
            display: flex;
            align-items: center;
            gap: 18px;
            padding: 14px 16px;
            border: 1px solid #e9e1d2;
            border-radius: 14px;
            background: #fff;
            box-shadow: 0 4px 14px rgba(43, 31, 20, .06);
        }

            .page-purchasedphotos .photos table.items > tbody > tr > td {
                display: block;
                border-bottom: 0;
                padding: 0;
                vertical-align: middle;
            }

            .page-purchasedphotos .photos table.items > tbody > tr > td.photo {
                flex: 0 0 auto;
                text-align: center;
            }

                .page-purchasedphotos .photos table.items > tbody > tr > td.photo img {
                    display: block;
                    max-width: 96px;
                    max-height: 96px;
                    border-radius: 10px;
                }

                .page-purchasedphotos .photos table.items > tbody > tr > td.photo .download-link {
                    margin-top: 8px;
                }

                    .page-purchasedphotos .photos table.items > tbody > tr > td.photo .download-link a {
                        display: inline-block;
                        padding: 6px 14px;
                        border-radius: 999px;
                        background: #0a6b7a;
                        color: #fff;
                        font-size: 12px;
                        font-weight: 700;
                        text-decoration: none;
                    }

                        .page-purchasedphotos .photos table.items > tbody > tr > td.photo .download-link a:hover {
                            background: #085560;
                        }

            .page-purchasedphotos .photos table.items > tbody > tr > td.info {
                flex: 1 1 auto;
                min-width: 0;
            }

                .page-purchasedphotos .photos table.items > tbody > tr > td.info .title {
                    margin-bottom: 8px;
                    text-align: start;
                    font-weight: 700;
                    color: #241f1a;
                }

                .page-purchasedphotos .photos table.items table.details {
                    color: #948c7e;
                }

                    .page-purchasedphotos .photos table.items table.details tr td {
                        padding: 3px 0;
                        text-align: start;
                        font-size: 13px;
                    }

                    .page-purchasedphotos .photos table.items table.details tr td.label {
                        padding-inline-end: 10px;
                        font-weight: 600;
                        color: #4a433a;
                        white-space: nowrap;
                    }

.page-purchasedphotos .paging {
    margin-top: 24px;
    padding: 10px;
    border-radius: 12px;
    background: #faf6ef;
    border: 1px solid #e9e1d2;
}

    .page-purchasedphotos .paging .pager {
        float: none;
        display: flex;
        justify-content: center;
        gap: 6px;
    }

        .page-purchasedphotos .paging .pager a,
        .page-purchasedphotos .paging .pager span {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 32px;
            height: 32px;
            padding: 0 8px;
            border-radius: 8px;
            color: #4a433a;
            text-decoration: none;
            font-weight: 600;
        }

            .page-purchasedphotos .paging .pager a:hover {
                background: #fff;
            }

            .page-purchasedphotos .paging .pager span {
                background: #0a6b7a;
                color: #fff;
            }

/* ---------- my packages: discount balance + subscription status ---------- */

.page-mypackages .page-header-controls {
    position: static;
    margin: -8px 0 16px;
    text-align: end;
}

.page-mypackages .buy-new {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: 42px;
    padding: 0 22px;
    border-radius: 999px;
    background: linear-gradient(135deg, #0a6b7a 0%, #12a0b5 100%);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: box-shadow .15s;
}

    .page-mypackages .buy-new:hover {
        box-shadow: 0 6px 16px rgba(10, 107, 122, .3);
    }

.page-mypackages .active-packages {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
}

    .page-mypackages .active-packages .package {
        padding: 18px 20px;
        border: 1px solid #e9e1d2;
        border-radius: 14px;
        background: #faf8f3;
        box-sizing: border-box;
    }

        .page-mypackages .active-packages .package.disscount {
            background: #e7efe9;
            border-color: #cfe0d4;
        }

        .page-mypackages .active-packages .package .title {
            margin-bottom: 10px;
            font-size: 15px;
            font-weight: 800;
            color: #241f1a;
        }

        /* two cells in this table have inline style="padding-top:...;width:..."
           (see the change-notes doc) which would otherwise override the flex
           row layout below */
        .page-mypackages .active-packages .package table td {
            display: block;
            padding: 0 !important;
            width: auto !important;
        }

        .page-mypackages .active-packages .package table tr {
            display: flex;
            justify-content: space-between;
            gap: 10px;
            padding: 6px 0;
            border-bottom: 1px solid #ede4d4;
        }

            .page-mypackages .active-packages .package table tr:last-child {
                border-bottom: 0;
            }

        .page-mypackages .active-packages .package .table-header {
            font-weight: 600;
            color: #4a433a;
        }

        .page-mypackages .active-packages .package .positive {
            color: #1a7a3c;
            font-weight: 700;
        }

        .page-mypackages .active-packages .package .none {
            color: #c0392b;
        }

.page-mypackages .active-packages #divNoNews24,
.page-mypackages .active-packages #divNoMonthly {
    padding: 14px 16px;
    border: 1px dashed #e9e1d2;
    border-radius: 14px;
    color: #948c7e;
    font-size: 13px;
    text-align: center;
}

/* ---------- profile edit: account details form ---------- */

.page-profile-edit .form {
    display: block;
    max-width: 640px;
    padding: 24px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid #e9e1d2;
    box-shadow: 0 6px 20px rgba(43, 31, 20, .07);
    box-sizing: border-box;
}

    .page-profile-edit .form .form-table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0 14px;
    }

        .page-profile-edit .form .form-table tr {
            display: flex;
            flex-wrap: wrap;
            gap: 16px;
        }

        .page-profile-edit .form .form-table td {
            display: block;
            flex: 1 1 220px;
            min-width: 0;
            padding: 0;
        }

            .page-profile-edit .form .form-table td[colspan] {
                flex-basis: 100%;
            }

            .page-profile-edit .form .form-table td label {
                display: block;
                margin-bottom: 6px;
                font-size: 13px;
                font-weight: 600;
                color: #4a433a;
            }

            .page-profile-edit .form .form-table td input[type="text"],
            .page-profile-edit .form .form-table td input[type="password"] {
                display: block;
                width: 100%;
                height: 44px;
                padding: 0 12px;
                border: 1px solid #e9e1d2;
                border-radius: 10px;
                box-sizing: border-box;
                background: #faf8f3;
                font-size: 14px;
                transition: border-color .15s, background .15s;
            }

                .page-profile-edit .form .form-table td input[type="text"]:focus,
                .page-profile-edit .form .form-table td input[type="password"]:focus {
                    outline: none;
                    border-color: #0a6b7a;
                    background: #fff;
                }

            .page-profile-edit .form .form-table td input[type="checkbox"] {
                width: 16px;
                height: 16px;
                accent-color: #0a6b7a;
                vertical-align: middle;
            }

            .page-profile-edit .form .form-table td textarea {
                display: block;
                width: 100%;
                height: 90px;
                padding: 10px 12px;
                border: 1px solid #e9e1d2;
                border-radius: 10px;
                box-sizing: border-box;
                background: #faf8f3;
                font-size: 14px;
                font-family: inherit;
                resize: vertical;
            }

                .page-profile-edit .form .form-table td textarea:focus {
                    outline: none;
                    border-color: #0a6b7a;
                    background: #fff;
                }

    .page-profile-edit .form .photographer-header {
        margin: 10px 0 14px;
        padding-top: 18px;
        padding-right: 0;
        border-top: 1px solid #ede4d4;
        font-size: 15px;
        font-weight: 700;
        color: #241f1a;
    }

    .page-profile-edit .form .validation-error {
        display: block;
        margin-top: 4px;
        color: #c0392b;
        font-weight: 600;
        font-size: 12px;
    }

    .page-profile-edit .form .submit-wrp {
        margin-top: 10px;
        padding: 0;
        text-align: end;
    }

        .page-profile-edit .form .submit-wrp a {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: auto;
            height: 46px;
            padding: 0 28px;
            border-radius: 999px;
            background: linear-gradient(135deg, #0a6b7a 0%, #12a0b5 100%);
            color: #fff;
            font-weight: 700;
            font-size: 14px;
            text-decoration: none;
            transition: box-shadow .15s;
        }

            .page-profile-edit .form .submit-wrp a:hover {
                box-shadow: 0 6px 16px rgba(10, 107, 122, .3);
            }

/* ---------- my-account area: mobile ---------- */

@media screen and (max-width: 980px) {

    /* the account nav is primary navigation, not a filter — put it above
       the page content, same treatment given to the photo filter earlier */
    #content #main-content > .content-width:has(#secure-aside) #aside-content {
        order: 0;
        margin: 0 0 18px 0;
    }

    #secure-aside {
        padding: 10px;
    }

        #secure-aside ul.navigation {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }

        #secure-aside ul.navigation > li {
            margin-bottom: 0;
        }

        #secure-aside ul.navigation > li > a {
            margin-bottom: 0;
            padding: 9px 16px;
            font-size: 13px;
            white-space: nowrap;
        }

        /* the photographer-tools group (title + sub-list) is always the
           last <li> in the master page markup — give it its own full row */
        #secure-aside ul.navigation > li:last-child {
            flex-basis: 100%;
        }

            #secure-aside ul.navigation > li:last-child > ul {
                display: flex;
                flex-wrap: wrap;
                gap: 6px;
            }

            #secure-aside ul.navigation > li:last-child > ul > li {
                flex: 0 0 auto;
            }

    /* cart / checkout: float reset + trim to the essentials at phone width */
    .page-cart .cart,
    .page-order .cart {
        float: none;
        width: auto;
        max-width: 100%;
    }

    .page-cart .clr {
        display: none;
    }

    .page-cart .promo {
        float: none;
        width: auto;
        max-width: 320px;
        height: 110px;
        margin: 16px auto 0;
    }

    #main-content-with-aside .page-cart .cart a.button-pay {
        display: flex;
        width: 100%;
    }

    #main-content-with-aside .page-cart .cart table.photosInCart tr:not(.footer) td:nth-child(3),
    #main-content .page-order .cart table.itemsInCart tr:not(.footer):not(.coupon) td:nth-child(4) {
        display: none;
    }

    #main-content-with-aside .page-cart .cart table.photosInCart tr td,
    #main-content .page-order .cart table.itemsInCart tr td {
        padding: 8px 10px;
    }

    #main-content .page-order .payment-methods {
        grid-template-columns: 1fr;
    }

    /* my album grid: a predictable 2 columns, matching the related-photos
       grid treatment used elsewhere on mobile */
    .page-myalbum .album .items {
        grid-template-columns: repeat(2, 1fr);
    }

    /* purchased photos: stack thumbnail above details on narrow screens */
    .page-purchasedphotos .photos table.items > tbody > tr {
        flex-direction: column;
        align-items: stretch;
    }

        .page-purchasedphotos .photos table.items > tbody > tr > td.photo {
            text-align: center;
        }

    /* profile edit form: tighter padding, full-width save button */
    .page-profile-edit .form {
        padding: 18px 16px;
    }

    .page-profile-edit .form .submit-wrp {
        text-align: center;
    }

        .page-profile-edit .form .submit-wrp a {
            width: 100%;
        }
}

/* ---------- accessibility: respect "reduce motion" system setting.
   Collapses every animation/transition above (and the mobile-nav,
   filter and sticky-panel toggle transitions earlier in this file)
   to near-instant — the UI still opens/closes/fades correctly, it
   simply stops moving decoratively. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/* Top-bar phone is now a tel: link (Picjew.master). On phones the .phone box is a
   13px icon, so stretch the link over a finger-sized area around it. */
#top-header .phone a {
    color: inherit;
    text-decoration: none;
}

@media screen and (max-width: 980px) {
    #top-header .phone a {
        position: absolute;
        top: -12px;
        right: -12px;
        bottom: -12px;
        left: -12px;
    }
}

/* =========================================================
   Round 2 fixes (2026-11-03): user review on phone + desktop
   ========================================================= */

/* ---------- home: intro text gets the free-photo's space ---------- */

#content .page-default .column.first {
    font-size: 15px;
    line-height: 1.75;
    color: #3d362e;
}

    #content .page-default .column.first h1 {
        margin-bottom: 10px;
        font-size: 22px;
        line-height: 1.3;
    }

    #content .page-default .column.first p {
        margin-bottom: 14px;
    }

/* ---------- home: "popular pictures" as a real section heading ---------- */

#content .page-default .popular-photos > .header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 6px;
    font-size: 30px;
    font-weight: 800;
    line-height: 1.2;
    color: #241f1a;
}

    #content .page-default .popular-photos > .header:before {
        content: "";
        flex: 0 0 6px;
        height: 30px;
        border-radius: 3px;
        background: linear-gradient(180deg, #f2b632 0%, #e39a12 100%);
    }

    #content .page-default .popular-photos > .header:after {
        content: "";
        flex: 1 1 auto;
        height: 1px;
        background: #e9e1d2;
    }

@media screen and (max-width: 980px) {
    #content .page-default .popular-photos > .header {
        font-size: 24px;
    }

        #content .page-default .popular-photos > .header:before {
            height: 24px;
        }
}

/* ---------- footer: payment / social pills removed (icons to come) ---------- */

#footer-content .side-column a.paypal,
#footer-content .side-column a.paycard,
#footer-content .side-column a.facebook {
    display: none;
}

/* ---------- top bar "my account" dropdown ---------- */

#myAccountPopupDiv {
    min-width: 210px;
    padding: 6px;
    border: 0;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 14px 34px rgba(43, 31, 20, .22);
}

    #myAccountPopupDiv ul li {
        margin: 0;
    }

        #myAccountPopupDiv ul li a {
            display: block;
            padding: 10px 14px;
            border-radius: 9px;
            color: #241f1a;
            font-size: 14px;
            font-weight: 500;
            text-decoration: none;
        }

            #myAccountPopupDiv ul li a:hover {
                background: #faf6ef;
                color: #0a6b7a;
            }

        #myAccountPopupDiv ul li:last-child {
            margin-top: 4px;
            padding-top: 4px;
            border-top: 1px solid #efe8db;
        }

/* ---------- results pager: arrows on the previous / next pills ---------- */

#fluid-main-content-with-aside .page-photos .paging .pager-control .previous,
#fluid-main-content-with-aside .page-photos .paging .pager-control .next {
    justify-content: center;
    width: 42px;
    height: 38px;
    padding: 0;
}

    #fluid-main-content-with-aside .page-photos .paging .pager-control .previous:before,
    #fluid-main-content-with-aside .page-photos .paging .pager-control .next:before {
        content: "";
        width: 18px;
        height: 18px;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a6b7a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 18l-6-6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
    }

/* the chevron above points left: "next" in Hebrew, "previous" in English */
.he #fluid-main-content-with-aside .page-photos .paging .pager-control .previous:before,
.en #fluid-main-content-with-aside .page-photos .paging .pager-control .next:before {
    transform: scaleX(-1);
}

/* ---------- gallery: the save icon is "add to album", so use the album icon ---------- */

#fluid-main-content-with-aside .page-photos .photos .photo .album-toggle:before {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23007384' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Ccircle cx='9' cy='10' r='2'/%3E%3Cpath d='M21 17l-5-5-9 8'/%3E%3C/svg%3E") center / contain no-repeat;
}

#fluid-main-content-with-aside .page-photos .photos .photo .album-toggle.in-album:before {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Ccircle cx='9' cy='10' r='2'/%3E%3Cpath d='M21 17l-5-5-9 8'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- gallery (desktop): bigger cards; mobile-nav.js serves the 500px
   preview image in them, so they stay sharp ---------- */

@media screen and (min-width: 981px) {
    #fluid-main-content-with-aside .page-photos .photos > div {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        gap: 20px;
    }
}

/* ---------- my packages: "buy a new package" sits under the title ---------- */

/* #secure-main in the selector: pages.css pins "#secure-main .page-header-controls"
   to the top-left corner with position:absolute */
#secure-main .page-mypackages .page-header-controls {
    float: none;
    position: static;
    min-height: 0;
    margin: 0 0 18px;
    padding: 0;
    background: none;
    text-align: start;
}

@media screen and (max-width: 980px) {
    .page-mypackages .buy-new {
        display: flex;
        width: 100%;
        box-sizing: border-box;
    }
}

/* ---------- my album: tidy action bar + a real grid ---------- */

/* the UpdatePanel around the Repeater renders a block <div>, so flatten it
   too (v10 only flattened the <span> variant) or the grid has one cell */
.page-myalbum .album .items > div {
    display: contents;
}

.page-myalbum .album .controls {
    gap: 10px;
    padding: 14px;
}

    .page-myalbum .album .controls strong {
        flex: 1 1 100%;
        font-size: 14px;
    }

    .page-myalbum .album .controls > a {
        display: inline-flex;
        align-items: center;
        height: 38px;
        padding: 0 16px;
        border-radius: 999px;
        font-size: 14px;
        text-decoration: none;
    }

        .page-myalbum .album .controls > a:hover {
            text-decoration: none;
        }

    /* first action = remove, second = add to cart */
    .page-myalbum .album .controls > a:first-of-type {
        border: 1px solid #e0b4ac;
        background: #fff;
        color: #b5382b;
    }

    .page-myalbum .album .controls > a:nth-of-type(2) {
        background: linear-gradient(135deg, #0a6b7a 0%, #12a0b5 100%);
        color: #fff;
    }

    .page-myalbum .album .controls .side {
        flex: 1 1 100%;
        margin: 0;
        padding-top: 8px;
        border-top: 1px solid #e9e1d2;
        font-size: 13px;
    }

@media screen and (max-width: 980px) {
    .page-myalbum .album .items {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
}

/* ---------- cart: the package promo as a card instead of a picture ---------- */

#main-content-with-aside .page-cart .promo,
.page-cart .promo {
    display: flex;
    align-items: center;
    gap: 14px;
    float: none;
    width: auto;
    max-width: 520px;
    height: auto;
    margin: 20px auto 0;
    padding: 16px 18px;
    box-sizing: border-box;
    border: 1px solid #f0d58e;
    border-radius: 16px;
    background: linear-gradient(135deg, #fff8e6 0%, #fdecc0 100%);
    box-shadow: 0 6px 18px rgba(43, 31, 20, .08);
    color: #4a3410;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
    text-decoration: none;
}

    .page-cart .promo:before {
        content: "";
        flex: 0 0 44px;
        height: 44px;
        border-radius: 12px;
        background: #e39a12 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12V4h8l10 10-8 8z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1.5'/%3E%3C/svg%3E") center / 24px no-repeat;
    }

    .page-cart .promo:hover {
        box-shadow: 0 10px 24px rgba(43, 31, 20, .14);
    }

/* ---------- phones: bigger phone icon, account menu grid, search in the hero ---------- */

@media screen and (max-width: 980px) {

    /* phone icon 3x bigger; "English" moves beside it */
    #top-header .content-width {
        padding-left: 104px;
    }

    #top-header .phone {
        top: 2px;
        left: 10px;
        width: 38px;
        height: 38px;
        background-size: 26px;
    }

    #top-header .nav {
        top: 11px;
        left: 56px;
    }

    #top-header .phone a {
        top: -4px;
        right: -4px;
        bottom: -4px;
        left: -4px;
    }

    /* my-account navigation: equal buttons, photographer tools in their own box */
    #secure-aside ul.navigation {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

        #secure-aside ul.navigation > li > a {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 44px;
            padding: 0 10px;
            border: 1px solid #e9e1d2;
            border-radius: 12px;
            background: #faf6ef;
            text-align: center;
            white-space: normal;
            line-height: 1.2;
        }

        #secure-aside ul.navigation > li:last-child {
            grid-column: 1 / -1;
            margin-top: 6px;
            padding: 12px;
            border: 1px dashed #e0d6c4;
            border-radius: 12px;
        }

            #secure-aside ul.navigation > li:last-child > .ul-title {
                margin: 0 0 10px;
                text-align: start;
            }

            #secure-aside ul.navigation > li:last-child > ul {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                gap: 6px;
            }

                #secure-aside ul.navigation > li:last-child > ul > li > a {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    height: 38px;
                    padding: 0 6px;
                    border-radius: 10px;
                    background: #fff;
                    border: 1px solid #e9e1d2;
                    font-size: 13px;
                    text-align: center;
                    line-height: 1.2;
                }

    /* the slider's entrance animation keeps a transform on it, which overrode the
       scale() mobile-nav.js uses to fit the 960px slider to the phone */
    .page-default .gallery-bg .gallery #slider {
        animation: none;
    }

    /* the field and button are floats: contain them, or the gallery's
       overflow:hidden clips them off */
    .page-default .gallery-bg .gallery .search-box-wrp .search-box {
        display: flow-root;
    }

    /* home hero: the search sits inside the bottom of the photo, not under it */
    .page-default .gallery-bg .gallery .search-box-wrp {
        position: relative;
        top: 0; /* pages.css still has top:165px from the desktop overlay */
        left: 0;
        z-index: 2;
        margin-top: -104px;
        padding: 0 12px;
    }
}

/* desktop gallery: keep the outer column of cards (and their shadow) off the window edge */
@media screen and (min-width: 981px) {
    #content #full-width-content #fluid-main-content-with-aside {
        padding-inline-end: 24px;
    }
}