/* =====================================================
   TINDALL FRAMES
   ===================================================== */


/* =====================================================
   COLOR PALETTE
   ===================================================== */

:root {

    --off-white: #E7E4DE;
    --green: #1F332C;
    --red: #B86363;
    --black: #181818;

    --border: rgba(31, 51, 44, 0.35);

}


/* =====================================================
   RESET
   ===================================================== */

* {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {

    margin: 0;

    background: var(--off-white);

    color: var(--black);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    -webkit-font-smoothing: antialiased;

}


img {

    display: block;

    max-width: 100%;

}


a {

    color: inherit;

    text-decoration: none;

}


/* =====================================================
   TYPOGRAPHY
   ===================================================== */

h1,
h2,
p {

    margin-top: 0;

}


h1,
h2 {

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-weight: 400;

}


/* =====================================================
   HEADER
   ===================================================== */

.site-header {

    position: sticky;

    top: 0;
    left: 0;

    width: 100%;

    z-index: 100;

    display: flex;

    align-items: center;

    justify-content: center;

    min-height: 75px;

    padding: 20px 25px;

    background: var(--off-white);

}


/* =====================================================
   LOGO
   ===================================================== */

.logo-link {

    position: absolute;

    left: 18px;

    top: 50%;

    transform: translateY(-50%);

    display: block;

    width: 50px;
    height: 50px;
}

.logo {

    width: 50px;
    height: 50px;

    object-fit: contain;
}


/* =====================================================
   NAVIGATION
   ===================================================== */

.navigation {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 38px;

    margin-top: 8px;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 11px;

    letter-spacing: 0.14em;

    text-transform: uppercase;

}


.navigation a {

    position: relative;

    padding-bottom: 6px;

    transition:
        color 0.2s ease;

    font-size: 13px;

}


.navigation a::after {

    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 0;
    height: 1px;

    background: var(--red);

    transition:
        width 0.2s ease;

}


.navigation a:hover,
.navigation a.active {

    color: var(--green);

}


.navigation a:hover::after,
.navigation a.active::after {

    width: 100%;

}


/* =====================================================
   HOMEPAGE — HERO
   ===================================================== */

.hero {

    min-height: 76vh;

    display: flex;

    align-items: center;

    justify-content: center;

    padding:
        140px 40px
        90px;

    text-align: center;

    background-image:
        linear-gradient(
            to bottom right,
            var(--off-white) 0%,
            rgba(255, 242, 229, 0.85) 20%,
            rgba(255, 242, 229, 0.55) 40%,
            rgba(255, 242, 229, 0.25) 62%,
            transparent 88%
        ),
        url("../images/BlackSilverCorner.webp");

    background-size: cover;

    background-position: center top;

    background-repeat: no-repeat;

}


.hero h1 {

    margin: 0;

    text-shadow:
        0 4px 20px rgba(255, 242, 229, 0.85);

    color: var(--green);

    font-size:
        clamp(55px, 7.5vw, 125px);

    line-height: 0.86;

    letter-spacing: -0.035em;

}


/* =====================================================
   HOMEPAGE — ENTRY SECTION
   ===================================================== */

.entry-section {

    padding:
        90px 5vw
        110px;

    background: var(--green);

    color: var(--off-white);

}


.entry-grid {

    max-width: 1450px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

}


.entry {

    padding:
        20px 45px;

    text-align: center;

    border-left:
        1px solid
        rgba(231, 228, 222, 0.35);

}


.entry:first-child {

    border-left: none;

}


/* =====================================================
   ENTRY HEADERS
   ===================================================== */

.entry-heading {

    display: inline-block;

    min-width: 175px;

    padding:
        14px 25px;

    margin-bottom: 27px;

    border:
        1px solid var(--off-white);

    background:
        rgba(231, 228, 222, 0.06);

    color: var(--off-white);

    font-size: 30px;

    line-height: 1;

    text-transform: uppercase;

    letter-spacing: 0.025em;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease;

}


.entry-heading:hover {

    background: var(--red);

    border-color: var(--red);

    color: var(--off-white);

}


/* =====================================================
   ENTRY DESCRIPTIONS
   ===================================================== */

.entry p {

    max-width: 320px;

    min-height: 78px;

    margin:
        0 auto 28px;

    font-size: 16px;

    line-height: 1.6;

    color:
        rgba(231, 228, 222, 0.82);

}


/* =====================================================
   ENTRY IMAGES
   ===================================================== */

.entry-image {

    display: flex;

    align-items: center;
    justify-content: center;

    width: 100%;
    height: 270px;

    overflow: hidden;

    border:
        1px solid
        rgba(231, 228, 222, 0.3);

    transition:
        border-color 0.2s ease;

}


.entry-image:hover {

    border-color: var(--red);

}


/* =====================================================
   PLACEHOLDERS
   ===================================================== */

.placeholder {

    position: relative;

    background: #D5D0C8;

}


.placeholder span {

    padding:
        10px 14px;

    border:
        1px solid
        rgba(24, 24, 24, 0.3);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 9px;

    letter-spacing: 0.18em;

    text-transform: uppercase;

    color:
        rgba(24, 24, 24, 0.55);

}


/* =====================================================
   HOMEPAGE — FEATURED IMAGE
   ===================================================== */

.image-section {

    padding:
        120px 5vw
        140px;

    background: var(--off-white);

}


.large-image {

    width: 100%;

    min-height: 68vh;

}


.image-caption {

    display: flex;

    align-items: flex-start;

    gap: 25px;

    max-width: 700px;

    margin-top: 24px;

}


.caption-number {

    color: var(--red);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 10px;

    letter-spacing: 0.12em;

}


.image-caption p {

    max-width: 450px;

    margin: 0;

    color: var(--green);

    font-size: 19px;

    line-height: 1.45;

}


/* =====================================================
   HOMEPAGE — OUR SHOP
   ===================================================== */

.workshop-section {

    display: grid;

    grid-template-columns:
        1fr 1.35fr;

    width: 100%;

    min-height: 700px;

    background: var(--green);

    color: var(--off-white);

}


.workshop-copy {

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding:
        100px 7vw;

    background: var(--red);

    color: var(--black);

}


.workshop-copy h2 {

    margin:
        0 0 28px;

    color: var(--black);

    font-size:
        clamp(60px, 7vw, 100px);

    line-height: 0.88;

    letter-spacing: -0.055em;

}


.workshop-copy p {

    max-width: 360px;

    margin: 0;

    color:
        rgba(24, 24, 24, 0.8);

    font-size: 18px;

    line-height: 1.55;

}


.workshop-image {

    width: 100%;

    min-height: 700px;

    background: var(--green);

}


/* =====================================================
   INTERIOR PAGE TITLES
   ===================================================== */

.page-title {

    min-height: 58vh;

    display: flex;

    align-items: center;
    justify-content: center;

    padding:
        140px 30px
        80px;

    background: var(--off-white);

    text-align: center;

}


.page-title h1 {

    margin: 0;

    color: var(--green);

    font-size:
        clamp(75px, 12vw, 160px);

    line-height: 0.85;

    letter-spacing: -0.065em;

}


/* =====================================================
   FRAMES PAGE
   ===================================================== */

.frame-listings {

    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 90px 55px;

    padding:
        110px 6vw
        140px;

    background: var(--green);

    color: var(--off-white);

}


.frame-card {

    min-width: 0;

}


.frame-photo {

    display: flex;

    align-items: center;
    justify-content: center;

    width: 100%;

    aspect-ratio: 4 / 3;

    overflow: hidden;

    border:
        1px solid
        rgba(231, 228, 222, 0.35);

    transition:
        border-color 0.2s ease;

}


.frame-photo:hover {

    border-color: var(--red);

}


.frame-info {

    padding-top: 22px;

}


.frame-info h2 {

    margin:
        0 0 10px;

    color: var(--off-white);

    font-size: 28px;

    font-weight: 400;

}


.frame-info h2 a {

    transition:
        color 0.2s ease;

}


.frame-info h2 a:hover {

    color: var(--red);

}


.frame-info p {

    margin: 4px 0;

    color:
        rgba(231, 228, 222, 0.75);

    font-size: 15px;

    line-height: 1.5;

}


.frame-info .frame-price {

    margin-top: 14px;

    color: var(--off-white);

    font-size: 18px;

}


/* =====================================================
   PRODUCT PAGE
   ===================================================== */

.product-page {

    display: grid;

    grid-template-columns:
        0.75fr 1.25fr;

    min-height: 100vh;

    padding-top: 100px;

    background: var(--off-white);

}


/* =====================================================
   PRODUCT INFORMATION
   ===================================================== */

.product-information {

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding:
        90px 7vw
        100px;

    color: var(--green);

}


.back-link {

    width: fit-content;

    margin-bottom: 55px;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 10px;

    letter-spacing: 0.12em;

    text-transform: uppercase;

    transition:
        color 0.2s ease;

}


.back-link:hover {

    color: var(--red);

}


.product-information h1 {

    margin:
        0 0 35px;

    font-size:
        clamp(55px, 7vw, 100px);

    line-height: 0.88;

    letter-spacing: -0.06em;

}


.product-details {

    margin-bottom: 28px;

}


.product-details p {

    margin: 5px 0;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 13px;

    letter-spacing: 0.03em;

}


.product-description {

    max-width: 370px;

    margin-bottom: 30px;

    font-size: 17px;

    line-height: 1.55;

}


.product-price {

    margin-bottom: 30px;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 18px;

    letter-spacing: 0.03em;

}


/* =====================================================
   ADD TO CART
   ===================================================== */

.add-to-cart {

    width: fit-content;

    padding:
        16px 32px;

    border:
        1px solid var(--green);

    background: var(--green);

    color: var(--off-white);

    cursor: pointer;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 10px;

    letter-spacing: 0.14em;

    text-transform: uppercase;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease;

}


.add-to-cart:hover {

    background: var(--red);

    border-color: var(--red);

    color: var(--off-white);

}


.add-to-cart:disabled {

    background: transparent;

    border-color: rgba(31, 51, 44, 0.35);

    color: rgba(31, 51, 44, 0.45);

    cursor: not-allowed;

}


.add-to-cart:disabled:hover {

    background: transparent;

    border-color: rgba(31, 51, 44, 0.35);

    color: rgba(31, 51, 44, 0.45);

}


/* =====================================================
   SOLD FRAMES (LISTING GRID)
   ===================================================== */

.frame-card.sold .frame-photo {

    opacity: 0.55;

}


.frame-card.sold .frame-price {

    text-decoration: line-through;

    opacity: 0.6;

}


.sold-badge {

    position: absolute;

    top: 14px;
    left: 14px;

    padding: 6px 12px;

    background: var(--black);

    color: var(--off-white);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 9px;

    letter-spacing: 0.14em;

    text-transform: uppercase;

}


/* =====================================================
   CART TOGGLE (HEADER)
   ===================================================== */

.cart-toggle {

    position: absolute;

    right: 18px;

    top: 50%;

    transform: translateY(-50%);

    padding: 10px 16px;

    border: 1px solid var(--green);

    background: transparent;

    color: var(--green);

    cursor: pointer;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 10px;

    letter-spacing: 0.12em;

    text-transform: uppercase;

    transition:
        background 0.2s ease,
        color 0.2s ease;

}


.cart-toggle:hover {

    background: var(--green);

    color: var(--off-white);

}


.cart-count {

    display: inline-block;

    margin-left: 6px;

}


/* =====================================================
   CART DRAWER
   ===================================================== */

.cart-overlay {

    position: fixed;

    inset: 0;

    background: rgba(24, 24, 24, 0.5);

    opacity: 0;

    pointer-events: none;

    transition: opacity 0.2s ease;

    z-index: 200;

}


.cart-overlay.open {

    opacity: 1;

    pointer-events: auto;

}


.cart-drawer {

    position: fixed;

    top: 0;
    right: 0;

    width: min(400px, 90vw);

    height: 100%;

    display: flex;

    flex-direction: column;

    padding: 30px;

    background: var(--off-white);

    color: var(--green);

    transform: translateX(100%);

    transition: transform 0.25s ease;

    z-index: 201;

    overflow-y: auto;

}


.cart-drawer.open {

    transform: translateX(0);

}


.cart-drawer-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 25px;

}


.cart-drawer-header h2 {

    margin: 0;

    font-size: 26px;

}


.cart-close {

    border: none;

    background: transparent;

    color: var(--green);

    font-size: 22px;

    line-height: 1;

    cursor: pointer;

}


.cart-items {

    flex: 1;

}


.cart-empty {

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 13px;

    opacity: 0.65;

}


.cart-item {

    display: flex;

    gap: 14px;

    padding: 16px 0;

    border-bottom: 1px solid rgba(31, 51, 44, 0.18);

}


.cart-item img {

    width: 70px;
    height: 70px;

    object-fit: cover;

    background: #D5D0C8;

}


.cart-item-info {

    flex: 1;

}


.cart-item-name {

    margin: 0 0 4px;

    font-size: 15px;

}


.cart-item-price {

    margin: 0 0 8px;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 12px;

}


.cart-item-remove {

    padding: 0;

    border: none;

    background: transparent;

    color: var(--red);

    cursor: pointer;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 10px;

    letter-spacing: 0.1em;

    text-transform: uppercase;

}


.cart-footer {

    padding-top: 20px;

    border-top: 1px solid rgba(31, 51, 44, 0.25);

}


.cart-total {

    margin-bottom: 16px;

    font-size: 17px;

}


.cart-checkout {

    width: 100%;

    padding: 16px;

    border: 1px solid var(--green);

    background: var(--green);

    color: var(--off-white);

    cursor: pointer;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 10px;

    letter-spacing: 0.14em;

    text-transform: uppercase;

    transition:
        background 0.2s ease,
        color 0.2s ease;

}


.cart-checkout:hover {

    background: var(--red);

    border-color: var(--red);

}


.cart-checkout:disabled {

    background: transparent;

    border-color: rgba(31, 51, 44, 0.35);

    color: rgba(31, 51, 44, 0.45);

    cursor: not-allowed;

}


.cart-message {

    margin: 12px 0 0;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 11px;

    line-height: 1.5;

    color: var(--red);

}


/* =====================================================
   PRODUCT MOLDING PROFILE
   ===================================================== */

.molding-section {

    margin-top: 80px;

    max-width: 420px;

}


.molding-section h2 {

    margin-bottom: 18px;

    font-size: 18px;

    text-transform: uppercase;

    letter-spacing: 0.04em;

}


.molding-profile {

    display: flex;

    align-items: center;
    justify-content: center;

    width: 100%;

    min-height: 115px;

    padding: 20px;

    border:
        1px solid
        rgba(31, 51, 44, 0.3);

    background:
        rgba(31, 51, 44, 0.035);

}


.molding-profile svg {

    display: block;

    width: 100%;

    max-width: 380px;

    height: auto;

    fill: var(--green);

}


.molding-section > p {

    margin:
        10px 0 0;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 9px;

    letter-spacing: 0.08em;

    text-transform: uppercase;

    opacity: 0.55;

}


/* =====================================================
   PRODUCT GALLERY
   ===================================================== */

.product-gallery {

    display: flex;

    flex-direction: column;

    justify-content: center;

    min-width: 0;

    padding:
        70px 6vw
        90px 4vw;

    background: var(--green);

}


/* =====================================================
   MAIN PRODUCT IMAGE
   ===================================================== */

.product-main-image {

    position: relative;

    width: 100%;

    height: min(70vh, 800px);

    overflow: hidden;

    background: #D5D0C8;

    cursor: crosshair;

}


.product-main-image.placeholder {

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: default;

}


.product-main-image img {

    width: 100%;
    height: 100%;

    object-fit: contain;

    transform:
        scale(1);

    transform-origin:
        center center;

    transition:
        transform 0.08s linear;

}


/* =====================================================
   ZOOM INDICATOR
   ===================================================== */

.zoom-lens {

    position: absolute;

    width: 90px;
    height: 90px;

    transform:
        translate(-50%, -50%);

    border:
        1px solid
        rgba(255, 255, 255, 0.7);

    border-radius: 50%;

    pointer-events: none;

    opacity: 0;

    transition:
        opacity 0.15s ease;

}


.zoom-lens.visible {

    opacity: 1;

}


/* =====================================================
   PRODUCT THUMBNAILS
   ===================================================== */

.product-thumbnails {

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 12px;

    margin-top: 15px;

}


.product-thumbnail {

    display: block;

    width: 100%;

    aspect-ratio: 1 / 1;

    padding: 0;

    overflow: hidden;

    border:
        1px solid
        rgba(231, 228, 222, 0.3);

    background: transparent;

    cursor: pointer;

    opacity: 0.65;

    transition:
        opacity 0.2s ease,
        border-color 0.2s ease;

}


.product-thumbnail:hover,
.product-thumbnail.active {

    opacity: 1;

    border-color: var(--red);

}


.product-thumbnail img {

    width: 100%;
    height: 100%;

    object-fit: cover;

}


/* =====================================================
   CUSTOM PAGE — INTRO
   ===================================================== */

.custom-intro {

    padding:
        150px 6vw
        90px;

    background: var(--off-white);

}


.custom-intro-inner {

    max-width: 850px;

    margin: 0 auto;

    text-align: center;

}


.custom-intro h1 {

    margin:
        0 0 30px;

    color: var(--green);

    font-size:
        clamp(65px, 9vw, 130px);

    line-height: 0.88;

    letter-spacing: -0.06em;

    font-weight: 400;

}


.custom-intro-text {

    max-width: 680px;

    margin:
        0 auto 22px;

    font-size: 20px;

    line-height: 1.55;

}


.custom-contact-text {

    max-width: 620px;

    margin:
        0 auto 35px;

    font-size: 16px;

    line-height: 1.65;

}


.custom-email-link {

    display: inline-flex;

    align-items: center;

    gap: 14px;

    padding:
        14px 22px;

    border:
        1px solid var(--green);

    background: var(--green);

    color: var(--off-white);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 10px;

    letter-spacing: 0.12em;

    text-transform: uppercase;

    transition:
        background 0.2s ease,
        color 0.2s ease;

}


.custom-email-link:hover {

    background: transparent;

    color: var(--green);

}


.custom-email-link span {

    font-size: 17px;

    line-height: 0;

}


.custom-contact-alt {

    margin: 18px 0 0;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 12px;

    letter-spacing: 0.03em;

    opacity: 0.65;

}


.custom-contact-alt a {

    text-decoration: underline;

}


.custom-contact-alt a:hover {

    color: var(--red);

}


/* =====================================================
   CUSTOM PAGE — MOLDING COLLECTION
   ===================================================== */

.custom-moldings-section {

    padding:
        90px 0
        110px;

    background: var(--green);

    color: var(--off-white);

}


.custom-moldings-header {

    padding:
        0 6vw;

    margin-bottom: 70px;

    text-align: center;

}


.custom-moldings-header .eyebrow {

    display: block;

    margin-bottom: 13px;

    color: var(--red);

}


.custom-moldings-header h2 {

    margin: 0;

    color: var(--off-white);

    font-size:
        clamp(35px, 5vw, 60px);

    line-height: 0.95;

    letter-spacing: -0.04em;

}


/* =====================================================
   MOLDING LIST
   ===================================================== */

.custom-moldings-list {

    display: block;

    width: 100%;

}


/* =====================================================
   INDIVIDUAL MOLDING
   ===================================================== */

.custom-molding-card {

    width: 100%;

    padding:
        75px 6vw
        90px;

    background: var(--off-white);

    color: var(--green);

    border-top:
        1px solid
        rgba(31, 51, 44, 0.18);

}


.custom-molding-card:nth-child(even) {

    background: #DDD9D1;

}


.custom-molding-card:first-child {

    border-top: none;

}


/* =====================================================
   MOLDING HEADER
   ===================================================== */

.custom-molding-header {

    display: flex;

    justify-content: space-between;

    align-items: baseline;

    gap: 30px;

    max-width: 1500px;

    margin:
        0 auto 35px;

    padding-bottom: 15px;

    border-bottom:
        1px solid
        rgba(31, 51, 44, 0.25);

}


.custom-molding-header h3 {

    margin: 0;

    color: var(--green);

    font-size:
        clamp(30px, 4vw, 48px);

    line-height: 1;

    font-weight: 400;

}


.custom-molding-header p {

    margin: 0;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 10px;

    letter-spacing: 0.1em;

    text-transform: uppercase;

    opacity: 0.65;

}


/* =====================================================
   MOLDING PHOTOGRAPHS
   ===================================================== */

.custom-molding-images {

    display: grid;

    grid-template-columns:
        1.55fr 0.75fr;

    gap: 30px;

    max-width: 1500px;

    margin: 0 auto;

}


.custom-molding-images figure {

    margin: 0;

}


/* =====================================================
   FINISHED FRAME PHOTO
   ===================================================== */

.custom-molding-finished .custom-molding-photo {

    height:
        min(65vw, 750px);

}


/* =====================================================
   UNFINISHED MOLDING PROFILE
   ===================================================== */

.custom-molding-profile .custom-molding-photo {

    height:
        min(65vw, 750px);

}


.custom-molding-photo {

    position: relative;

    width: 100%;

    overflow: hidden;

    background: #D5D0C8;

}


.custom-molding-photo span {

    position: absolute;

    inset: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    color:
        rgba(31, 51, 44, 0.55);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 9px;

    letter-spacing: 0.12em;

    text-transform: uppercase;

}


.custom-molding-profile .custom-molding-photo {

    background: #D0CBC2;

}


/* =====================================================
   REAL MOLDING PHOTOS
   ===================================================== */

.custom-molding-photo img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

}


.custom-molding-profile .custom-molding-photo img {

    object-fit: contain;

    padding: 35px;

}


/* =====================================================
   PHOTO CAPTIONS
   ===================================================== */

.custom-molding-images figcaption {

    margin-top: 11px;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 9px;

    letter-spacing: 0.08em;

    text-transform: uppercase;

    color: var(--green);

    opacity: 0.65;

}
/* =====================================================
   ABOUT PAGE
   ===================================================== */

.about-intro {
    display: grid;

    grid-template-columns:
        0.7fr 1.2fr 0.7fr;

    gap: 35px;

    align-items: center;

    min-height: 100vh;

    padding:
        130px 5vw
        110px;

    background: var(--off-white);

    color: var(--green);
}


/* =====================================================
   ABOUT — CENTER COPY
   ===================================================== */

.about-copy {
    max-width: 650px;

    margin: 0 auto;
}


.about-copy h1 {
    margin:
        0 0 45px;

    color: var(--green);

    font-size:
        clamp(60px, 8vw, 110px);

    line-height: 0.85;

    letter-spacing: -0.06em;

    font-weight: 400;
}


.about-copy p {
    margin:
        0 0 25px;

    font-size: 18px;

    line-height: 1.7;

    color: var(--green);
}


.about-copy p.about-contact {
    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 14px;

    letter-spacing: 0.02em;

    opacity: 0.75;
}


.about-contact a {
    text-decoration: underline;
}


.about-contact a:hover {
    color: var(--red);
}


/* =====================================================
   ABOUT — SIDE PHOTOS
   ===================================================== */

.about-photo {
    width: 100%;

    aspect-ratio: 3 / 4;

    overflow: hidden;

    background: #D5D0C8;
}


.about-photo img {
    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;
}


.about-photo-left {
    transform:
        translateY(-45px);
}


.about-photo-right {
    transform:
        translateY(45px);
}


/* =====================================================
   ABOUT — FEATURE SECTION
   ===================================================== */

.about-feature {
    display: grid;

    grid-template-columns:
        1.4fr 0.6fr;

    min-height: 650px;

    background: var(--green);

    color: var(--off-white);
}


.about-feature-image {
    min-height: 650px;

    overflow: hidden;

    background: #D5D0C8;
}


.about-feature-image img {
    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;
}


.about-feature-copy {
    display: flex;

    align-items: center;

    padding:
        70px 6vw;
}


.about-feature-copy p {
    max-width: 350px;

    margin: 0;

    color: var(--off-white);

    font-size: 20px;

    line-height: 1.6;
}


/* =====================================================
   ABOUT — MOBILE
   ===================================================== */

@media (max-width: 850px) {

    .about-intro {
        display: block;

        min-height: auto;

        padding:
            120px 25px
            90px;
    }


    .about-photo {
        width: 75%;

        margin-bottom: 35px;
    }


    .about-photo-left {
        margin-left: 0;

        transform: none;
    }


    .about-copy {
        margin:
            60px auto;
    }


    .about-copy h1 {
        margin-bottom: 35px;

        font-size:
            clamp(58px, 15vw, 95px);
    }


    .about-copy p {
        font-size: 17px;
    }


    .about-photo-right {
        margin-left: auto;

        transform: none;

        margin-bottom: 0;
    }


    .about-feature {
        display: block;

        min-height: auto;
    }


    .about-feature-image {
        min-height: 60vh;
    }


    .about-feature-copy {
        padding:
            70px 25px
            90px;
    }


    .about-feature-copy p {
        max-width: 500px;

        font-size: 18px;
    }

}

/* =====================================================
   ADMIN
   ===================================================== */

.admin-section:not([hidden]) {

    display: flex;

    flex-direction: column;

    gap: 40px;

    max-width: 760px;

    margin: 0 auto;

    padding: 0 6vw 120px;

    background: var(--off-white);

}


.admin-panel {

    padding: 35px 40px;

    border: 1px solid rgba(31, 51, 44, 0.25);

    background: rgba(31, 51, 44, 0.02);

}


.admin-panel h2 {

    margin: 0 0 22px;

    color: var(--green);

    font-size: 26px;

}


.admin-panel form {

    display: flex;

    flex-direction: column;

    gap: 16px;

}


.admin-panel label {

    display: flex;

    flex-direction: column;

    gap: 6px;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 11px;

    letter-spacing: 0.06em;

    text-transform: uppercase;

    color: var(--green);

}


.admin-panel input[type="text"],
.admin-panel input[type="password"],
.admin-panel input[type="number"],
.admin-panel textarea,
.admin-panel select {

    padding: 12px 14px;

    border: 1px solid rgba(31, 51, 44, 0.35);

    background: var(--off-white);

    color: var(--black);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 15px;

    text-transform: none;

    letter-spacing: normal;

}


.admin-checkbox {

    flex-direction: row !important;

    align-items: center;

    gap: 8px !important;

}


.admin-photo-fields {

    margin: 6px 0 0;

    padding: 18px;

    border: 1px solid rgba(31, 51, 44, 0.2);

    display: flex;

    flex-direction: column;

    gap: 16px;

}


.admin-photo-fields legend {

    padding: 0 6px;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 11px;

    letter-spacing: 0.06em;

    text-transform: uppercase;

    color: var(--green);

}


.admin-hint {

    margin: 0;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 12px;

    line-height: 1.6;

    color: rgba(31, 51, 44, 0.75);

}


.admin-form-actions {

    display: flex;

    align-items: center;

    gap: 16px;

}


.admin-cancel-edit {

    border: none;

    background: transparent;

    color: var(--red);

    cursor: pointer;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 10px;

    letter-spacing: 0.1em;

    text-transform: uppercase;

}


.admin-error {

    margin: 0;

    color: var(--red);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 12px;

}


.admin-success {

    margin: 0;

    color: var(--green);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 12px;

}


.admin-table-wrap {

    overflow-x: auto;

}


.admin-table {

    width: 100%;

    border-collapse: collapse;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 13px;

}


.admin-table th,
.admin-table td {

    padding: 10px 12px;

    text-align: left;

    border-bottom: 1px solid rgba(31, 51, 44, 0.15);

    white-space: nowrap;

}


.admin-table th {

    font-size: 10px;

    letter-spacing: 0.08em;

    text-transform: uppercase;

    color: rgba(31, 51, 44, 0.6);

}


.admin-link-btn {

    padding: 0;

    border: none;

    background: transparent;

    color: var(--green);

    cursor: pointer;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 11px;

    letter-spacing: 0.06em;

    text-transform: uppercase;

    text-decoration: underline;

}


.admin-link-btn.admin-danger {

    color: var(--red);

}


#logout-button {

    align-self: flex-end;

}


/* =====================================================
   FOOTER
   ===================================================== */

.site-footer {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding:
        30px 35px;

    background: var(--black);

    color: var(--off-white);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 10px;

    letter-spacing: 0.12em;

    text-transform: uppercase;

}


.site-footer a:hover {

    color: var(--red);

}


.footer-contact {

    display: flex;

    align-items: center;

    gap: 10px;

}


.footer-divider {

    opacity: 0.4;

}


/* =====================================================
   MOBILE
   ===================================================== */

@media (max-width: 850px) {


    /* -----------------------------------------
       HEADER
       ----------------------------------------- */

    .site-header {

        padding:
            18px 20px;

    }





    .navigation {

        gap: 17px;

        margin-left: 50px;

        font-size: 9px;

        letter-spacing: 0.08em;

    }


    /* -----------------------------------------
       HOMEPAGE HERO
       ----------------------------------------- */

    .hero {

        min-height: 72vh;

        padding:
            130px 25px
            80px;

    }


    /* -----------------------------------------
       ENTRY SECTION
       ----------------------------------------- */

    .entry-section {

        padding:
            75px 25px
            85px;

    }


    .entry-grid {

        display: block;

    }


    .entry {

        padding:
            40px 0;

        border-left: none;

        border-top:
            1px solid
            rgba(231, 228, 222, 0.35);

    }


    .entry:first-child {

        padding-top: 0;

        border-top: none;

    }


    .entry p {

        min-height: auto;

        margin-bottom: 25px;

    }


    .entry-image {

        height: 250px;

    }


    /* -----------------------------------------
       FEATURED IMAGE
       ----------------------------------------- */

    .image-section {

        padding:
            80px 25px
            100px;

    }


    .large-image {

        min-height: 55vh;

    }


    /* -----------------------------------------
       OUR SHOP
       ----------------------------------------- */

    .workshop-section {

        display: block;

        min-height: 0;

    }


    .workshop-copy {

        min-height: 420px;

        padding:
            80px 25px;

    }


    .workshop-image {

        width: 100%;

        min-height: 55vh;

    }


    /* -----------------------------------------
       PAGE TITLE
       ----------------------------------------- */

    .page-title {

        min-height: 55vh;

        padding:
            130px 25px
            70px;

    }


    /* -----------------------------------------
       FRAMES
       ----------------------------------------- */

    .frame-listings {

        display: block;

        padding:
            70px 25px
            90px;

    }


    .frame-card {

        margin-bottom: 70px;

    }


    .frame-card:last-child {

        margin-bottom: 0;

    }


    /* -----------------------------------------
       PRODUCT PAGE
       ----------------------------------------- */

    .product-page {

        display: flex;

        flex-direction: column;

        padding-top: 90px;

    }


    .product-information {

        order: 2;

        padding:
            70px 25px
            90px;

    }


    .product-information h1 {

        font-size:
            clamp(58px, 15vw, 95px);

    }


    .product-gallery {

        order: 1;

        padding:
            25px 25px
            60px;

    }


    .product-main-image {

        height: 65vh;

    }


    .product-thumbnails {

        gap: 8px;

    }


    .molding-section {

        margin-top: 60px;

    }


    /* -----------------------------------------
       CUSTOM INTRO
       ----------------------------------------- */

    .custom-intro {

        padding:
            120px 25px
            70px;

    }


    .custom-intro h1 {

        font-size:
            clamp(58px, 15vw, 100px);

    }


    .custom-intro-text {

        font-size: 18px;

    }


    .custom-contact-text {

        font-size: 15px;

    }


    /* -----------------------------------------
       CUSTOM MOLDINGS
       ----------------------------------------- */

    .custom-moldings-section {

        padding:
            75px 0
            0;

    }


    .custom-moldings-header {

        padding:
            0 25px;

        margin-bottom: 45px;

    }


    .custom-molding-card {

        padding:
            55px 25px
            65px;

    }


    .custom-molding-header {

        display: block;

        margin-bottom: 25px;

    }


    .custom-molding-header h3 {

        margin-bottom: 10px;

    }


    .custom-molding-images {

        display: block;

    }


    .custom-molding-images figure {

        margin-bottom: 35px;

    }


    .custom-molding-images figure:last-child {

        margin-bottom: 0;

    }


    .custom-molding-finished .custom-molding-photo,
    .custom-molding-profile .custom-molding-photo {

        height: 70vw;

        min-height: 300px;

        max-height: 500px;

    }


    .custom-molding-profile .custom-molding-photo img {

        padding: 25px;

    }


    /* -----------------------------------------
       FOOTER
       ----------------------------------------- */

    .site-footer {

        flex-direction: column;

        align-items: flex-start;

        gap: 12px;

        padding:
            28px 20px;

    }


    .footer-contact {

        flex-wrap: wrap;

    }

}