/* My Art Gallery - front-end styles. Created by TR interactive - Powered by Firefly */
.mag-front *{box-sizing: border-box; margin: 0; padding: 0;}
.mag-front.mag-main{background-color: #E7E4E4;
            font-family: 'Open Sans', sans-serif;
            color: #111111;}
.mag-front .mag-header-section{background-color: #FFFFFF;
            width: 100%;
            padding: 90px 40px 24px;
            text-align: center;}
.mag-front .mag-tabs-section{background-color: #F0EEEE; /* a step darker than the white logo block above, and lighter than the gallery area */
            width: 100%;
            padding: 0 20px 30px;
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            border-bottom: 1px solid #DEDADA;}
.mag-front .mag-tab-btn{font-family: 'Barlow', sans-serif;
            font-weight: 500;
            font-size: 14px;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            color: #AAAAAA;
            background-color: transparent;
            border: none;
            padding: 15px 25px;
            cursor: pointer;
            position: relative;
            transition: color 0.3s ease;}
.mag-front .mag-tab-btn:hover{color: #111111;}
.mag-front .mag-tab-btn.active{color: #111111; font-weight: 600;}
.mag-front .mag-tab-btn.active::after{content: '';
            position: absolute;
            bottom: 0; left: 25px; right: 25px;
            height: 3px;
            background-color: #111111;}
.mag-front .mag-gallery-section{background-color: #E7E4E4;
            width: 100%;
            padding: 60px 20px 90px;
            display: flex;
            justify-content: center;}
.mag-front .mag-gallery-container{width: 100%;
            max-width: 1080px;}
.mag-front .mag-cards-grid{display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 28px;}
.mag-front .mag-tab-content{display: none;
            animation: magFadeInContent 0.4s ease;}
.mag-front .mag-tab-content.active{display: block;}
@keyframes magFadeInContent{from { opacity: 0; transform: translateY(8px); }
            to { opacity: 1; transform: translateY(0); }}
.mag-front .mag-art-card{background-color: #FFFFFF;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
            transition: transform 0.2s ease, box-shadow 0.2s ease;}
.mag-front .mag-art-card:hover{transform: translateY(-4px);
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);}
.mag-front .mag-art-image-container{width: 100%;
            aspect-ratio: 1.18 / 1;
            overflow: hidden;}
.mag-front .mag-art-image{width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            transition: transform 0.4s ease;
            cursor: pointer;}
.mag-front .mag-art-card:hover .mag-art-image{transform: scale(1.05);}
.mag-front .mag-art-content{padding: 22px;
            display: flex;
            flex-direction: column;
            flex-grow: 1;}
.mag-front .mag-art-title{font-family: 'Barlow', sans-serif;
            font-weight: 600;
            font-size: 18px;
            text-transform: uppercase;
            margin-bottom: 6px;}
.mag-front .mag-art-specs{font-size: 13px;
            color: #888888;
            line-height: 1.4;
            margin-bottom: 22px;}
.mag-front .mag-art-footer{display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: auto;}
.mag-front .mag-art-price{font-family: 'Barlow', sans-serif;
            font-weight: 600;
            font-size: 20px;}
.mag-front .mag-send-btn{font-family: 'Barlow', sans-serif;
            font-weight: 500;
            font-size: 13px;
            letter-spacing: 0.8px;
            color: #888888;
            background-color: #FFFFFF;
            border: 1px solid #C8C8C8;
            border-radius: 4px;
            padding: 8px 18px;
            cursor: pointer;
            text-transform: uppercase;
            transition: all 0.2s ease;}
.mag-front .mag-send-btn:hover{border-color: #111111;
            color: #111111;}
.mag-front .mag-lightbox{display: none;
            position: fixed;
            z-index: 9999;
            top: 0; left: 0;
            width: 100%; height: 100%;
            background-color: #FFFFFF;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            padding: 40px;
            cursor: pointer;
            animation: magFadeIn 0.3s ease;}
@keyframes magFadeIn{from { opacity: 0; } to { opacity: 1; }}
.mag-front .mag-lightbox.active{display: flex;}
.mag-front .mag-lightbox-title{font-family: 'Barlow', sans-serif;
            font-weight: 600;
            font-size: 24px;
            text-transform: uppercase;
            margin-bottom: 30px;
            text-align: center;}
.mag-front .mag-lightbox img{max-width: 80%;
            max-height: 65vh;
            object-fit: contain;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
            cursor: default;}
.mag-front .mag-lightbox-close{font-family: 'Barlow', sans-serif;
            font-weight: 500;
            font-size: 14px;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: #888888;
            margin-top: 30px;
            cursor: pointer;
            padding: 8px 20px;
            border-bottom: 1px solid transparent;
            transition: all 0.2s ease;}
.mag-front .mag-lightbox-close:hover{color: #111111;
            border-bottom: 1px solid #111111;}
.mag-front .mag-modal-overlay{display: none;
            position: fixed;
            z-index: 10000;
            top: 0; left: 0;
            width: 100%; height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            justify-content: center;
            align-items: center;
            padding: 20px;
            animation: magFadeIn 0.3s ease;}
.mag-front .mag-modal-overlay.active{display: flex;}
.mag-front .mag-modal{background-color: #FFFFFF;
            width: 100%;
            max-width: 480px;
            padding: 40px 35px 35px;
            position: relative;
            border-radius: 4px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
            animation: magSlideUp 0.3s ease;}
@keyframes magSlideUp{from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }}
.mag-front .mag-modal-close{position: absolute;
            top: 15px; right: 20px;
            font-size: 28px;
            color: #AAAAAA;
            cursor: pointer;
            line-height: 1;
            font-family: 'Barlow', sans-serif;
            transition: color 0.2s ease;}
.mag-front .mag-modal-close:hover{color: #111111;}
.mag-front .mag-modal-title{font-family: 'Barlow', sans-serif;
            font-weight: 600;
            font-size: 22px;
            text-transform: uppercase;
            color: #111111;
            margin-bottom: 8px;
            letter-spacing: 0.5px;}
.mag-front .mag-modal-subtitle{font-family: 'Open Sans', sans-serif;
            font-size: 13px;
            color: #888888;
            margin-bottom: 25px;
            line-height: 1.5;}
.mag-front .mag-modal-artwork{font-family: 'Barlow', sans-serif;
            font-weight: 600;
            font-size: 15px;
            text-transform: uppercase;
            color: #111111;
            background-color: #F5F5F5;
            padding: 12px 16px;
            border-left: 3px solid #111111;
            margin-bottom: 20px;
            letter-spacing: 0.5px;}
.mag-front .mag-modal-label{display: block;
            font-family: 'Barlow', sans-serif;
            font-weight: 500;
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: #888888;
            margin-bottom: 8px;}
.mag-front .mag-modal-textarea{width: 100%;
            min-height: 110px;
            padding: 14px;
            font-family: 'Open Sans', sans-serif;
            font-size: 14px;
            color: #111111;
            background-color: #FAFAFA;
            border: 1px solid #D8D8D8;
            border-radius: 4px;
            resize: vertical;
            outline: none;
            transition: border-color 0.2s ease;
            line-height: 1.5;}
.mag-front .mag-modal-textarea:focus{border-color: #111111;
            background-color: #FFFFFF;}
.mag-front .mag-modal-actions{display: flex;
            gap: 12px;
            margin-top: 25px;}
.mag-front .mag-modal-btn{flex: 1;
            font-family: 'Barlow', sans-serif;
            font-weight: 500;
            font-size: 13px;
            letter-spacing: 1px;
            text-transform: uppercase;
            padding: 13px 20px;
            border-radius: 4px;
            cursor: pointer;
            border: 1px solid transparent;
            transition: all 0.2s ease;}
.mag-front .mag-modal-btn-send{background-color: #111111;
            color: #FFFFFF;
            border-color: #111111;}
.mag-front .mag-modal-btn-send:hover{background-color: #000000;}
.mag-front .mag-modal-btn-cancel{background-color: #FFFFFF;
            color: #888888;
            border-color: #C8C8C8;}
.mag-front .mag-modal-btn-cancel:hover{border-color: #111111;
            color: #111111;}
@media (max-width: 1024px){.mag-front .mag-cards-grid{grid-template-columns: repeat(2, 1fr);}}
@media (max-width: 650px){.mag-front .mag-cards-grid{grid-template-columns: 1fr; max-width: 420px; margin: 0 auto;}
.mag-front .mag-tab-btn{padding: 12px 15px; font-size: 12px; letter-spacing: 1px;}
.mag-front .mag-tab-btn.active::after{left: 15px; right: 15px;}
.mag-front .mag-lightbox{padding: 30px 20px;}
.mag-front .mag-lightbox-title{font-size: 18px; margin-bottom: 20px;}
.mag-front .mag-lightbox img{max-width: 95%; max-height: 55vh;}
.mag-front .mag-modal{padding: 35px 25px 25px;}
.mag-front .mag-modal-actions{flex-direction: column;}
}
/* ---- WordPress / theme integration ---- */
.mag-front.mag-main{width:100%;max-width:100%;}
.mag-front h2,.mag-front p{border:0;padding:0;}
.mag-front .mag-art-image-container img{width:100%;height:100%;object-fit:cover;display:block;}
.mag-front a.mag-send-btn{text-decoration:none;display:inline-block;}
.mag-front .mag-empty-notice{background:#fff;padding:60px 20px;text-align:center;font-family:'Barlow',sans-serif;font-weight:500;font-size:16px;letter-spacing:1px;text-transform:uppercase;color:#888;}
.mag-front .mag-gallery-section{background:#E7E4E4;}
.mag-front .mag-tab-btn{box-shadow:none;border-radius:0;}
.mag-front.mag-overlays[hidden]{display:block;}
.mag-front.mag-overlays{background:none;padding:0;margin:0;}
.mag-front .mag-modal-textarea{box-shadow:none;}


/* ---- v1.1: stacked, equal-size buttons; price aligned with the bottom button ---- */
.mag-front .mag-art-footer{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;margin-top:auto;}
.mag-front .mag-art-price{display:flex;align-items:center;min-height:38px;line-height:1.1;}
.mag-front .mag-art-buttons{display:flex;flex-direction:column;gap:8px;width:170px;max-width:60%;flex-shrink:0;}
.mag-front .mag-art-buttons .mag-send-btn{display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:100%;height:38px;margin:0;padding:0 12px;line-height:1;text-align:center;white-space:nowrap;font-size:13px;}


/* ---- v1.2: artwork description (max. 3 lines) ---- */
.mag-front .mag-art-specs.mag-has-desc{margin-bottom:10px;}
.mag-front .mag-art-desc{font-size:13px;color:#666;line-height:1.5;margin:0 0 22px;white-space:pre-line;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden;}


/* ---- v1.4: slightly rounded artwork cards ---- */
.mag-front .mag-art-card{border-radius:6px;}



/* ============================================================
   v1.7 / v2.0 - Designs. They follow the design chosen in My Website
   (My Website Parts uses the same one). Design 1 is the original
   look; designs 2 (Renaissance), 3 (Modern dark) and 4 (Vintage) add
   the .mag-themed class and use the same palettes and type as the site.
   ============================================================ */
.mag-front.mag-d2 {
  --mag-bg: #e9dfcd; --mag-section: #e9dfcd; --mag-surface: #faf5ea; --mag-card: #faf5ea;
  --mag-text: #2b1d1a; --mag-head-c: #3a1218; --mag-muted: #5c4a42; --mag-soft: #8a7a6c; --mag-line: rgba(168, 132, 63, 0.45);
  --mag-accent: #7a1f2b; --mag-on-accent: #faf5ea; --mag-input: #ffffff; --mag-backdrop: rgba(42, 18, 21, 0.6);
  --mag-shadow: 0 1px 3px rgba(60, 30, 20, 0.08); --mag-shadow-hover: 0 8px 18px rgba(60, 30, 20, 0.14);
  --mag-head: 'Cormorant Garamond', serif; --mag-body: 'EB Garamond', serif;
  --mag-hw: 600; --mag-ht: uppercase; --mag-hls: 0.06em; --mag-title-size: 19px; --mag-body-size: 16px;
  --mag-r: 0; --mag-br: 0; --mag-img-filter: none;
  --mag-tabs: #f1e9d9; --mag-tabs-line: rgba(168, 132, 63, 0.35); /* same tone as the logo block (#faf5ea), a bit darker */
}
.mag-front.mag-d3 {
  --mag-bg: #1b1e27; --mag-section: #1b1e27; --mag-surface: #12141a; --mag-card: #12141a;
  --mag-text: #e6e8ee; --mag-head-c: #ffffff; --mag-muted: #a4a9b6; --mag-soft: #7a8089; --mag-line: rgba(255, 255, 255, 0.1);
  --mag-accent: #5eead4; --mag-on-accent: #0b0c10; --mag-input: #1b1e27; --mag-backdrop: rgba(5, 6, 9, 0.74);
  --mag-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); --mag-shadow-hover: 0 8px 22px rgba(0, 0, 0, 0.55);
  --mag-head: 'Space Grotesk', sans-serif; --mag-body: 'Inter', sans-serif;
  --mag-hw: 600; --mag-ht: none; --mag-hls: -0.01em; --mag-title-size: 19px; --mag-body-size: 14px;
  --mag-r: 4px; --mag-br: 2px; --mag-img-filter: none;
  --mag-tabs: #1f232d; --mag-tabs-line: rgba(255, 255, 255, 0.08); /* same tone as the logo block (#12141a), a bit lighter */
}
.mag-front.mag-d4 {
  --mag-bg: #e0d2b2; --mag-section: #e0d2b2; --mag-surface: #f2e8d2; --mag-card: #f2e8d2;
  --mag-text: #3b2a1e; --mag-head-c: #3b2a1e; --mag-muted: #5a4636; --mag-soft: #8f7d66; --mag-line: rgba(59, 42, 30, 0.35);
  --mag-accent: #c2612c; --mag-on-accent: #fff8e8; --mag-input: #fbf5e6; --mag-backdrop: rgba(40, 26, 14, 0.7);
  --mag-shadow: 0 1px 3px rgba(59, 42, 30, 0.12); --mag-shadow-hover: 0 8px 18px rgba(59, 42, 30, 0.2);
  --mag-head: 'Abril Fatface', serif; --mag-body: 'Courier Prime', monospace;
  --mag-hw: 400; --mag-ht: none; --mag-hls: 0.01em; --mag-title-size: 19px; --mag-body-size: 13px;
  --mag-r: 0; --mag-br: 0; --mag-img-filter: sepia(0.28) contrast(1.02);
  --mag-tabs: #e9dcc0; --mag-tabs-line: rgba(59, 42, 30, 0.25); /* same tone as the logo block (#f2e8d2), a bit darker */
}

.mag-front.mag-main.mag-themed { background-color: var(--mag-bg); font-family: var(--mag-body); color: var(--mag-text); }
.mag-front.mag-themed .mag-tabs-section { background-color: var(--mag-tabs); border-bottom: 1px solid var(--mag-tabs-line); }
.mag-front.mag-themed .mag-tab-btn { font-family: var(--mag-body); font-weight: 500; color: var(--mag-soft); }
.mag-front.mag-themed .mag-tab-btn:hover,
.mag-front.mag-themed .mag-tab-btn.active { color: var(--mag-text); }
.mag-front.mag-themed .mag-tab-btn.active { font-weight: 700; }
.mag-front.mag-themed .mag-tab-btn.active::after { background-color: var(--mag-accent); }
.mag-front.mag-themed .mag-gallery-section { background: var(--mag-section); }
.mag-front.mag-themed .mag-art-card { background-color: var(--mag-card); border: 1px solid var(--mag-line); border-radius: var(--mag-r); box-shadow: var(--mag-shadow); }
.mag-front.mag-themed .mag-art-card:hover { box-shadow: var(--mag-shadow-hover); }
.mag-front.mag-themed .mag-art-image { filter: var(--mag-img-filter); }
.mag-front.mag-themed .mag-art-title { font-family: var(--mag-head); font-weight: var(--mag-hw); font-size: var(--mag-title-size); letter-spacing: var(--mag-hls); text-transform: var(--mag-ht); color: var(--mag-head-c); }
.mag-front.mag-themed .mag-art-specs { font-family: var(--mag-body); font-size: var(--mag-body-size); color: var(--mag-muted); }
.mag-front.mag-themed .mag-art-desc { font-family: var(--mag-body); font-size: var(--mag-body-size); color: var(--mag-muted); }
.mag-front.mag-themed .mag-art-price { font-family: var(--mag-head); font-weight: var(--mag-hw); letter-spacing: var(--mag-hls); color: var(--mag-accent); }
.mag-front.mag-themed .mag-send-btn { font-family: var(--mag-body); font-weight: 600; background-color: transparent; color: var(--mag-muted); border-color: var(--mag-line); border-radius: var(--mag-br); }
.mag-front.mag-themed .mag-send-btn:hover { border-color: var(--mag-accent); color: var(--mag-accent); }
.mag-front.mag-themed .mag-empty-notice { background: var(--mag-surface); color: var(--mag-muted); font-family: var(--mag-body); }

.mag-front.mag-themed .mag-lightbox { background-color: var(--mag-surface); }
.mag-front.mag-themed .mag-lightbox-title { font-family: var(--mag-head); font-weight: var(--mag-hw); letter-spacing: var(--mag-hls); text-transform: var(--mag-ht); color: var(--mag-head-c); }
.mag-front.mag-themed .mag-lightbox img { filter: var(--mag-img-filter); box-shadow: none; border: 1px solid var(--mag-line); }
.mag-front.mag-themed .mag-lightbox-close { font-family: var(--mag-body); color: var(--mag-muted); }
.mag-front.mag-themed .mag-lightbox-close:hover { color: var(--mag-text); border-bottom-color: var(--mag-accent); }

.mag-front.mag-themed .mag-modal-overlay { background-color: var(--mag-backdrop); }
.mag-front.mag-themed .mag-modal { background-color: var(--mag-surface); border: 1px solid var(--mag-line); border-radius: var(--mag-r); }
.mag-front.mag-themed .mag-modal-close { color: var(--mag-soft); }
.mag-front.mag-themed .mag-modal-close:hover { color: var(--mag-text); }
.mag-front.mag-themed .mag-modal-title { font-family: var(--mag-head); font-weight: var(--mag-hw); letter-spacing: var(--mag-hls); text-transform: var(--mag-ht); color: var(--mag-head-c); }
.mag-front.mag-themed .mag-modal-subtitle { font-family: var(--mag-body); color: var(--mag-muted); }
.mag-front.mag-themed .mag-modal-artwork { font-family: var(--mag-head); font-weight: var(--mag-hw); letter-spacing: var(--mag-hls); text-transform: var(--mag-ht); color: var(--mag-head-c); background-color: var(--mag-card); border-left-color: var(--mag-accent); }
.mag-front.mag-themed .mag-modal-label { font-family: var(--mag-body); color: var(--mag-muted); }
.mag-front.mag-themed .mag-modal-textarea { font-family: var(--mag-body); color: var(--mag-text); background-color: var(--mag-input); border-color: var(--mag-line); border-radius: var(--mag-br); }
.mag-front.mag-themed .mag-modal-textarea:focus { border-color: var(--mag-accent); background-color: var(--mag-input); }
.mag-front.mag-themed .mag-modal-btn { font-family: var(--mag-body); font-weight: 600; border-radius: var(--mag-br); }
.mag-front.mag-themed .mag-modal-btn-send { background-color: var(--mag-accent); color: var(--mag-on-accent); border-color: var(--mag-accent); }
.mag-front.mag-themed .mag-modal-btn-send:hover { background-color: transparent; color: var(--mag-accent); }
.mag-front.mag-themed .mag-modal-btn-cancel { background-color: transparent; color: var(--mag-muted); border-color: var(--mag-line); }
.mag-front.mag-themed .mag-modal-btn-cancel:hover { border-color: var(--mag-accent); color: var(--mag-text); }

/* ============================================================
   v1.8 / v2.0 - Per-gallery description. (The "ART GALLERY" page title was removed in v2.0:
   the tabs bar now starts the page. Its tone is a visible step away from the logo block above, in the same colour family.)
   ============================================================ */
.mag-front .mag-tabs-section { padding-top: 26px; }
.mag-front .mag-gallery-desc { max-width: 760px; margin: 0 auto 40px; text-align: center; font-size: 15px; line-height: 1.8; color: #666; }
@media (max-width: 768px) { .mag-front .mag-gallery-desc { margin-bottom: 30px; } }

.mag-front.mag-themed .mag-gallery-desc { font-family: var(--mag-body); font-size: 15.5px; line-height: 1.85; color: var(--mag-muted); }
.mag-front.mag-themed .mag-modal-btn { padding-left: 12px; padding-right: 12px; white-space: nowrap; }
.mag-front.mag-d3 .mag-modal-btn { font-size: 12px; letter-spacing: 0.5px; }
@media (max-width: 650px) { .mag-front.mag-themed .mag-modal-btn { white-space: normal; } }