/* ============================================
   LAINEY JONES — Artist Portfolio & Shop
   Mobile-first responsive stylesheet
   ============================================ */

/* --- Reset & Base --- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.6;
    color: #333;
    background: #fff;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

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

a {
    color: inherit;
    text-decoration: none;
}

ul, ol {
    list-style: none;
}

button, input, select, textarea {
    font: inherit;
    color: inherit;
}

/* --- Utility Classes --- */
.container {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
}

.text-center {
    text-align: center;
}

.btn {
    display: inline-block;
    padding: 12px 28px;
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    text-align: center;
    border: 1px solid #333;
    background: transparent;
    color: #333;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.btn:hover {
    background: #333;
    color: #fff;
}

.btn-primary {
    background: #333;
    color: #fff;
    border-color: #333;
}

.btn-primary:hover {
    background: #555;
    border-color: #555;
}

.btn-outline {
    background: transparent;
    color: #333;
    border: 1px solid #333;
}

.btn-outline:hover {
    background: #333;
    color: #fff;
}

.btn-secondary {
    background-color: #f5f5f5;
    color: #333;
    border: 1px solid #ddd;
}

.btn-secondary:hover {
    background-color: #e8e8e8;
}

.btn-small {
    padding: 6px 16px;
    font-size: 0.7rem;
}

.btn-danger {
    border-color: #c0392b;
    color: #c0392b;
}

.btn-danger:hover {
    background: #c0392b;
    color: #fff;
}

/* --- Header --- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: #fff;
    border-bottom: 1px solid #eee;
}

.header-inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
}

.site-title {
    font-size: 1.4rem;
    font-weight: 300;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #333;
    text-decoration: none;
    white-space: nowrap;
}

.site-nav {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 60px;
    left: 0;
    right: 0;
    background: #fff;
    border-bottom: 1px solid #eee;
    padding: 20px 0;
    z-index: 99;
}

.site-nav.menu-open {
    display: flex;
}

.site-nav a {
    display: block;
    padding: 10px 20px;
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #666;
    transition: color 0.2s;
}

.site-nav a:hover {
    color: #333;
}

/* Hamburger */
.hamburger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 28px;
    height: 28px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    order: 1;
}

.hamburger span {
    display: block;
    width: 100%;
    height: 1.5px;
    background: #333;
    transition: transform 0.3s, opacity 0.3s;
}

.hamburger.active span:nth-child(1) {
    transform: translateY(6.5px) rotate(45deg);
}

.hamburger.active span:nth-child(2) {
    opacity: 0;
}

.hamburger.active span:nth-child(3) {
    transform: translateY(-6.5px) rotate(-45deg);
}

/* Cart Icon */
.cart-icon {
    position: relative;
    display: flex;
    align-items: center;
    color: #333;
    order: 2;
}

.cart-icon svg {
    display: block;
}

.cart-count {
    position: absolute;
    top: -6px;
    right: -8px;
    background: #333;
    color: #fff;
    font-size: 0.6rem;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* --- Announcement Banner --- */
.announcement-banner {
    background: #f8f8f8;
    text-align: center;
    padding: 10px 0;
}

.announcement-banner p {
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    color: #555;
    margin: 0;
}

/* --- Flash Messages --- */
.flash {
    padding: 12px 0;
    text-align: center;
}

.flash p {
    margin: 0;
    font-size: 0.85rem;
}

.flash-success {
    background: #eafaf1;
    color: #27ae60;
}

.flash-error {
    background: #fdedec;
    color: #c0392b;
}

.flash-info {
    background: #eaf2fa;
    color: #2c7be5;
}

/* --- Main Content --- */
main {
    flex: 1;
}

/* --- Gallery Grid (Homepage) --- */
.gallery-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px;
}

.gallery-grid a,
.gallery-grid .gallery-item {
    display: block;
    overflow: hidden;
}

.gallery-grid img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
    transition: opacity 0.3s;
}

.gallery-grid a:hover img,
.gallery-grid .gallery-item:hover img {
    opacity: 0.85;
}

/* --- Shop Grid (Originals / Prints) --- */
.shop-grid {
    display: grid;
    grid-template-columns: 1fr;
    align-items: start;
    gap: 24px;
    padding: 40px 0;
}

.artwork-card {
    position: relative;
}

.artwork-card a {
    display: block;
}

.artwork-card-image {
    position: relative;
    overflow: hidden;
}

/* Each card renders at the artwork's own ratio. The card emits an inline
   `aspect-ratio: W / H` from the stored image dimensions, which overrides the
   1:1 below and reserves the right box before the image loads. The square is
   only a fallback for an image whose dimensions could not be read — with
   `contain` it letterboxes rather than cropping into the painting. */
.artwork-card-image img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    display: block;
    transition: transform 0.4s ease, opacity 0.3s;
}

.artwork-card:hover .artwork-card-image img {
    transform: scale(1.03);
}

/* Sold-out overlay */
.artwork-card-image .sold-out-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
}

.sold-out-overlay span {
    font-size: 0.8rem;
    font-weight: 400;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #333;
}

.artwork-card-info {
    padding: 12px 0 0;
}

.artwork-card-title {
    font-size: 0.85rem;
    font-weight: 400;
    letter-spacing: 0.05em;
    color: #333;
}

.artwork-card-price {
    font-size: 0.8rem;
    color: #666;
    margin-top: 2px;
}

/* --- Product Detail --- */
.product-detail {
    padding: 40px 0;
}

.product-detail-inner {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.product-image {
    width: 100%;
}

.product-image img {
    width: 100%;
    max-width: 100%;
    display: block;
}

.product-info {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.product-title {
    font-size: 1.5rem;
    font-weight: 300;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.product-price {
    font-size: 1.2rem;
    color: #333;
}

.product-description {
    font-size: 0.9rem;
    line-height: 1.8;
    color: #555;
}

.product-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 8px;
}

.back-link {
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #999;
    transition: color 0.2s;
}

.back-link:hover {
    color: #333;
}

/* --- Forms (Contact, Checkout) --- */
.form-container {
    max-width: 500px;
    margin: 0 auto;
    padding: 40px 0;
}

.form-group {
    margin-bottom: 24px;
}

.form-group label {
    display: block;
    font-size: 0.7rem;
    font-weight: 400;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #666;
    margin-bottom: 8px;
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 10px 0;
    font-size: 0.95rem;
    border: none;
    border-bottom: 1px solid #ddd;
    background: transparent;
    outline: none;
    transition: border-color 0.2s;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    border-bottom-color: #333;
}

.form-group textarea {
    resize: vertical;
    min-height: 100px;
    line-height: 1.6;
}

.form-submit {
    margin-top: 32px;
}

.form-error {
    font-size: 0.75rem;
    color: #c0392b;
    margin-top: 4px;
}

/* --- Cart --- */
.cart-page {
    padding: 40px 0;
}

.cart-page h1 {
    font-size: 1.2rem;
    font-weight: 300;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin-bottom: 32px;
}

.cart-table {
    width: 100%;
    border-collapse: collapse;
}

.cart-table th {
    font-size: 0.7rem;
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #999;
    text-align: left;
    padding: 8px 0;
    border-bottom: 1px solid #eee;
}

.cart-table td {
    padding: 16px 0;
    border-bottom: 1px solid #f5f5f5;
    vertical-align: middle;
}

.cart-table img {
    width: 60px;
    height: 60px;
    object-fit: cover;
}

.cart-item-title {
    font-size: 0.85rem;
}

.cart-quantity-input {
    width: 50px;
    text-align: center;
    padding: 6px;
    border: 1px solid #ddd;
    border-radius: 0;
}

.cart-remove {
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #999;
    background: none;
    border: none;
    cursor: pointer;
    transition: color 0.2s;
}

.cart-remove:hover {
    color: #c0392b;
}

.cart-total {
    text-align: right;
    padding: 24px 0;
    font-size: 1.1rem;
}

.cart-total strong {
    font-weight: 400;
    letter-spacing: 0.05em;
}

.cart-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding-top: 16px;
}

.cart-empty {
    text-align: center;
    padding: 80px 0;
    color: #999;
    font-size: 0.9rem;
}

/* --- Page Headers --- */
.page-header {
    text-align: center;
    padding: 48px 0 24px;
}

.page-header h1 {
    font-size: 1.2rem;
    font-weight: 300;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.page-header p {
    font-size: 0.85rem;
    color: #666;
    margin-top: 8px;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

/* --- About Page --- */
.about-content {
    max-width: 600px;
    margin: 0 auto;
    padding: 40px 0;
}

.about-content img {
    width: 100%;
    margin-bottom: 32px;
}

.about-content p {
    font-size: 0.9rem;
    line-height: 1.8;
    color: #555;
    margin-bottom: 16px;
}

/* --- Footer --- */
.site-footer {
    padding: 48px 0;
    margin-top: auto;
}

.footer-instagram {
    display: inline-block;
    color: #999;
    transition: opacity 0.2s;
    margin-bottom: 12px;
}

.footer-instagram:hover {
    opacity: 0.6;
}

.footer-instagram svg {
    display: block;
}

.copyright {
    font-size: 0.75rem;
    color: #999;
    letter-spacing: 0.05em;
}

/* --- Admin Panel --- */
.admin-layout {
    display: flex;
    min-height: 100vh;
}

.admin-sidebar {
    width: 200px;
    background: #fafafa;
    border-right: 1px solid #eee;
    padding: 24px 0;
    flex-shrink: 0;
}

.admin-sidebar h2 {
    font-size: 0.8rem;
    font-weight: 400;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    padding: 0 20px;
    margin-bottom: 24px;
    color: #333;
}

.admin-sidebar nav a {
    display: block;
    padding: 8px 20px;
    font-size: 0.8rem;
    color: #666;
    transition: color 0.2s, background 0.2s;
}

.admin-sidebar nav a:hover,
.admin-sidebar nav a.active {
    color: #333;
    background: #f0f0f0;
}

.admin-content {
    flex: 1;
    padding: 32px 40px;
    overflow-x: auto;
}

.admin-content h1 {
    font-size: 1.2rem;
    font-weight: 300;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 24px;
}

/* Admin tables */
.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.admin-table th {
    text-align: left;
    font-size: 0.7rem;
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #999;
    padding: 10px 12px;
    border-bottom: 2px solid #eee;
}

.admin-table td {
    padding: 12px;
    border-bottom: 1px solid #f5f5f5;
    vertical-align: middle;
}

.admin-table tr:hover {
    background: #fafafa;
}

.admin-table img {
    width: 50px;
    height: 50px;
    object-fit: cover;
}

/* Admin dashboard stats */
.admin-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 20px;
    margin-bottom: 32px;
}

.stat-card {
    background: #fafafa;
    border: 1px solid #eee;
    padding: 20px;
    text-align: center;
}

.stat-card .stat-value {
    font-size: 1.8rem;
    font-weight: 300;
    color: #333;
}

.stat-card .stat-label {
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #999;
    margin-top: 4px;
}

/* Admin forms */
.admin-form {
    max-width: 600px;
}

.admin-form .form-group input,
.admin-form .form-group textarea,
.admin-form .form-group select {
    border: 1px solid #ddd;
    padding: 10px 12px;
    border-radius: 0;
}

.admin-form .form-group input:focus,
.admin-form .form-group textarea:focus,
.admin-form .form-group select:focus {
    border-color: #333;
}

.admin-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* --- Responsive: Tablet (600px+) --- */
@media (min-width: 600px) {
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .shop-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .cart-table img {
        width: 80px;
        height: 80px;
    }
}

/* --- Responsive: Tablet landscape (768px+) --- */
@media (min-width: 768px) {
    .shop-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .product-detail-inner {
        flex-direction: row;
    }

    .product-image {
        width: 60%;
        flex-shrink: 0;
    }

    .product-info {
        width: 40%;
    }
}

/* --- Responsive: Desktop (1024px+) --- */
@media (min-width: 1024px) {
    /* Title centred with the menu stacked beneath it, as on the original site.
       The cart icon is lifted out of the flow so it can sit hard right without
       pulling the title off centre — there is no matching element on the left
       to balance it. */
    .header-inner {
        flex-direction: column;
        justify-content: center;
        height: auto;
        padding: 18px 0 16px;
        gap: 28px;
    }

    .hamburger {
        display: none;
    }

    .site-nav {
        display: flex;
        flex-direction: row;
        justify-content: center;
        position: static;
        border: none;
        padding: 0;
        gap: 24px;
    }

    .site-nav a {
        padding: 0;
    }

    .cart-icon {
        position: absolute;
        right: 20px;
        top: 50%;
        transform: translateY(-50%);
    }

    .gallery-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .shop-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .product-title {
        font-size: 1.8rem;
    }
}

/* --- Lightbox --- */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.lightbox img {
    max-width: 90vw;
    max-height: 90vh;
    object-fit: contain;
    display: block;
}

.lightbox-close {
    position: absolute;
    top: 16px;
    right: 20px;
    background: none;
    border: none;
    color: #fff;
    font-size: 2rem;
    cursor: pointer;
    line-height: 1;
    padding: 4px 8px;
    z-index: 1001;
    transition: opacity 0.2s;
}

.lightbox-close:hover {
    opacity: 0.7;
}

/* --- Product Thumbnails --- */
.product-thumbnails {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

.product-thumbnail {
    width: 60px;
    height: 60px;
    object-fit: cover;
    cursor: pointer;
    opacity: 0.6;
    border: 2px solid transparent;
    transition: opacity 0.2s, border-color 0.2s;
}

.product-thumbnail:hover {
    opacity: 0.9;
}

.product-thumbnail.active {
    opacity: 1;
    border-color: #333;
}

/* --- Sold Out Badge (product detail) --- */
.sold-out-badge {
    display: inline-block;
    padding: 8px 20px;
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #999;
    border: 1px solid #ddd;
}

/* --- Flash Transition --- */
.flash {
    transition: opacity 0.5s ease;
}

.flash-fade {
    opacity: 0;
}

/* --- Drag & Drop --- */
.dragging {
    opacity: 0.4;
}

.drag-over {
    outline: 2px dashed #333;
    outline-offset: -2px;
}

[draggable="true"] {
    user-select: none;
}

/* --- Admin Layout (wrapper-based) --- */
.admin-body {
    display: block;
}

.admin-wrapper {
    display: flex;
    min-height: 100vh;
}

.admin-sidebar-header {
    padding: 0 20px 20px;
    border-bottom: 1px solid #eee;
    margin-bottom: 16px;
}

.admin-logo {
    display: block;
    font-size: 0.8rem;
    font-weight: 400;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #333;
    margin-bottom: 4px;
}

.admin-user {
    font-size: 0.7rem;
    color: #999;
}

.admin-nav-link {
    display: block;
    padding: 8px 20px;
    font-size: 0.8rem;
    color: #666;
    transition: color 0.2s, background 0.2s;
}

.admin-nav-link:hover,
.admin-nav-link.active {
    color: #333;
    background: #f0f0f0;
}

.admin-sidebar-footer {
    margin-top: auto;
    padding: 16px 20px 0;
    border-top: 1px solid #eee;
}

.admin-sidebar-footer a {
    font-size: 0.75rem;
    color: #999;
    transition: color 0.2s;
}

.admin-sidebar-footer a:hover {
    color: #333;
}

/* --- Admin Toolbar --- */
.admin-toolbar {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.filter-form {
    display: flex;
    align-items: center;
    gap: 8px;
}

.filter-form select {
    padding: 6px 12px;
    border: 1px solid #ddd;
    font-size: 0.8rem;
}

/* --- Admin Gallery Grid --- */
.admin-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 16px;
}

.admin-gallery-card {
    position: relative;
    border: 1px solid #eee;
    padding: 8px;
    text-align: center;
}

.admin-gallery-card img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
    margin-bottom: 8px;
}

/* --- Inline Form --- */
.inline-form {
    display: inline;
}

/* --- Image Grid (artwork form) --- */
.image-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 12px;
    margin-top: 8px;
}

.image-card {
    border: 1px solid #eee;
    padding: 8px;
    text-align: center;
}

.image-card img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
    margin-bottom: 8px;
}

.image-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: center;
}

/* --- Form Actions --- */
.form-actions {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-top: 24px;
}

/* --- Upload Preview --- */
.upload-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.upload-preview-thumb {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border: 1px solid #eee;
}

/* --- Badges --- */
.badge {
    display: inline-block;
    padding: 3px 10px;
    font-size: 0.65rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-radius: 2px;
}

/* Badge colours: pale background, saturated text. Selectors are grouped where
   the meaning shares a colour, so each colour stays a single decision rather
   than drifting apart as variants get added. */

.badge-original {
    background: #f5eef8;
    color: #7d3c98;
}

/* good / settled */
.badge-available,
.badge-paid,
.badge-sent {
    background: #eafaf1;
    color: #27ae60;
}

/* wrong / unavailable */
.badge-sold-out,
.badge-failed {
    background: #fdedec;
    color: #c0392b;
}

/* in flight */
.badge-print,
.badge-shipped {
    background: #eaf2f8;
    color: #2e86c1;
}

/* needs attention */
.badge-pending {
    background: #fef5e7;
    color: #b9770e;
}

/* done, archived */
.badge-completed,
.badge-expired {
    background: #f2f3f4;
    color: #566573;
}

/* --- Thumb Small (admin table) --- */
.thumb-small {
    width: 50px;
    height: 50px;
    object-fit: cover;
    display: block;
}

.thumb-placeholder {
    display: inline-block;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    background: #f5f5f5;
    color: #ccc;
    font-size: 0.6rem;
}

/* --- Required Field Marker --- */
.required {
    color: #c0392b;
}