/* Art Print Otaku - Gallery & Fine Arts Styles */

/* Variables Art Print */
:root {
    --art-primary: #2c3e50;
    --art-secondary: #e74c3c;
    --art-accent: #f39c12;
    --gallery-white: #ffffff;
    --frame-gold: #ffd700;
    --canvas-cream: #fdf6e3;
    --paint-blue: #3498db;
    --paint-purple: #9b59b6;
    --charcoal-black: #2c2c2c;
    --museum-gray: #95a5a6;
    --signature-red: #e53e3e;
    --limited-gold: #d4af37;
    --dark-bg: #1a1a1a;
    --darker-bg: #0f0f0f;
    --gallery-bg: #f8f9fa;
    --frame-brown: #8b4513;
    --text-light: #ffffff;
    --text-dark: #2c3e50;
    --text-gray: #7f8c8d;
    
    --font-art: 'Playfair Display', serif;
    --font-gallery: 'Lato', sans-serif;
}

/* Body Art Print */
body {
    background: var(--gallery-bg);
    color: var(--text-dark);
    overflow-x: hidden;
}

/* Main Container */
.artprint-main {
    min-height: 100vh;
    padding-top: 70px;
}

/* Art Print Hero Section */
.artprint-hero {
    position: relative;
    height: 75vh;
    min-height: 650px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: linear-gradient(135deg, var(--canvas-cream) 0%, var(--gallery-white) 50%, var(--art-primary) 100%);
}

.artprint-hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.canvas-texture {
    position: absolute;
    width: 100%;
    height: 100%;
    background: 
        repeating-linear-gradient(
            45deg,
            transparent,
            transparent 2px,
            rgba(44, 62, 80, 0.03) 2px,
            rgba(44, 62, 80, 0.03) 4px
       ),
       repeating-linear-gradient(
           -45deg,
           transparent,
           transparent 2px,
           rgba(44, 62, 80, 0.03) 2px,
           rgba(44, 62, 80, 0.03) 4px
       );
   opacity: 0.7;
   animation: canvasTexture 15s ease-in-out infinite alternate;
}

@keyframes canvasTexture {
   0% { 
       background-position: 0% 0%, 0% 0%;
       opacity: 0.7;
   }
   100% { 
       background-position: 100% 100%, -100% -100%;
       opacity: 0.9;
   }
}

.paint-splashes {
   position: absolute;
   width: 100%;
   height: 100%;
   background: 
       radial-gradient(ellipse at 20% 30%, var(--art-secondary) 0%, transparent 40%),
       radial-gradient(ellipse at 80% 70%, var(--paint-blue) 0%, transparent 40%),
       radial-gradient(ellipse at 60% 20%, var(--art-accent) 0%, transparent 35%),
       radial-gradient(ellipse at 30% 80%, var(--paint-purple) 0%, transparent 45%);
   background-size: 300px 200px, 250px 180px, 200px 150px, 280px 220px;
   opacity: 0.15;
   animation: paintSplashes 12s ease-in-out infinite alternate;
}

@keyframes paintSplashes {
   0% { 
       transform: scale(1) rotate(0deg);
       opacity: 0.15;
   }
   50% { 
       transform: scale(1.1) rotate(2deg);
       opacity: 0.25;
   }
   100% { 
       transform: scale(1.05) rotate(-1deg);
       opacity: 0.2;
   }
}

.gallery-lights {
   position: absolute;
   width: 100%;
   height: 100%;
   background: 
       linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, transparent 30%),
       radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.6) 0%, transparent 50%);
   animation: galleryLights 8s ease-in-out infinite alternate;
}

@keyframes galleryLights {
   0% { opacity: 0.6; }
   100% { opacity: 0.9; }
}

.artprint-hero-content {
   position: relative;
   z-index: 2;
   text-align: center;
   max-width: 900px;
   margin: 0 auto;
   padding: 0 20px;
}

.artprint-title {
   font-size: clamp(2.5rem, 8vw, 5.5rem);
   font-weight: 700;
   margin: 0 0 20px 0;
   line-height: 1.1;
   text-transform: uppercase;
   letter-spacing: 3px;
   font-family: var(--font-art);
}

.art-text {
   position: relative;
   display: block;
   color: var(--art-primary);
   text-shadow: 
       0 0 20px var(--art-secondary),
       3px 3px 0 var(--frame-gold),
       6px 6px 0 var(--art-accent);
   animation: artGlow 4s ease-in-out infinite alternate;
}

@keyframes artGlow {
   0% { 
       text-shadow: 
           0 0 20px var(--art-secondary),
           3px 3px 0 var(--frame-gold),
           6px 6px 0 var(--art-accent);
   }
   100% { 
       text-shadow: 
           0 0 35px var(--art-secondary),
           3px 3px 0 var(--frame-gold),
           6px 6px 0 var(--art-accent),
           0 0 50px var(--art-secondary);
   }
}

.print-text {
   display: block;
   color: var(--art-secondary);
   text-shadow: 
       0 0 30px var(--art-secondary),
       0 0 60px var(--art-secondary);
   animation: printPulse 5s ease-in-out infinite alternate;
}

@keyframes printPulse {
   0% { 
       text-shadow: 
           0 0 30px var(--art-secondary),
           0 0 60px var(--art-secondary);
   }
   100% { 
       text-shadow: 
           0 0 20px var(--art-secondary),
           0 0 40px var(--art-secondary),
           0 0 80px var(--art-secondary);
   }
}

.collection-text {
   display: block;
   color: var(--art-accent);
   font-size: 0.6em;
   font-weight: 400;
   letter-spacing: 5px;
   margin-top: 10px;
   font-style: italic;
}

.artprint-subtitle {
   font-size: 1.8rem;
   font-weight: 300;
   color: var(--text-gray);
   margin: 0 0 40px 0;
   letter-spacing: 2px;
   font-style: italic;
   font-family: var(--font-art);
}

.artprint-stats {
   display: flex;
   justify-content: center;
   gap: 60px;
   margin-top: 50px;
}

.stat-item {
   text-align: center;
   position: relative;
}

.stat-value {
   display: block;
   font-size: 3.2rem;
   font-weight: 700;
   color: var(--art-secondary);
   text-shadow: 
       0 0 15px var(--art-secondary),
       2px 2px 0 var(--frame-gold);
   line-height: 1;
   font-family: var(--font-art);
}

.stat-label {
   display: block;
   font-size: 1rem;
   color: var(--text-gray);
   text-transform: uppercase;
   letter-spacing: 1px;
   margin-top: 8px;
   font-family: var(--font-gallery);
}

.quality-badges {
   display: flex;
   justify-content: center;
   gap: 30px;
   margin-top: 40px;
}

.badge {
   display: flex;
   align-items: center;
   gap: 8px;
   background: rgba(255, 255, 255, 0.9);
   padding: 10px 20px;
   border-radius: 25px;
   border: 2px solid var(--art-accent);
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
   transition: all 0.3s ease;
}

.badge:hover {
   transform: translateY(-3px);
   box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.badge-icon {
   font-size: 1.2rem;
}

.badge-text {
   color: var(--art-primary);
   font-weight: 600;
   font-size: 0.9rem;
   font-family: var(--font-gallery);
}

/* Art Print Filters */
.artprint-filters {
   padding: 80px 0;
   background: var(--gallery-white);
   border-top: 3px solid var(--art-secondary);
   border-bottom: 3px solid var(--art-accent);
   position: relative;
}

.artprint-filters::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: 
       repeating-linear-gradient(
           90deg,
           var(--art-secondary) 0px,
           var(--art-secondary) 2px,
           transparent 2px,
           transparent 40px
       );
   opacity: 0.05;
   pointer-events: none;
}

.filters-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 40px;
   position: relative;
   z-index: 2;
}

.filters-header h2 {
   font-size: 2.8rem;
   color: var(--art-primary);
   margin: 0;
   text-shadow: 
       0 0 15px var(--art-secondary),
       2px 2px 0 var(--art-accent);
   font-family: var(--font-art);
   text-transform: uppercase;
   letter-spacing: 2px;
}

.filter-counter {
   background: var(--art-secondary);
   color: var(--gallery-white);
   padding: 12px 20px;
   border-radius: 20px;
   font-weight: 700;
   font-size: 1rem;
   font-family: var(--font-gallery);
   box-shadow: 
       0 0 15px rgba(231, 76, 60, 0.4),
       0 4px 0 var(--art-primary);
   border: 2px solid var(--art-accent);
}

.filters-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
   gap: 30px;
   margin-bottom: 40px;
   position: relative;
   z-index: 2;
}

.filter-group {
   background: var(--canvas-cream);
   padding: 30px;
   border-radius: 15px;
   border: 3px solid var(--art-accent);
   position: relative;
   overflow: hidden;
   box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

.filter-group::before {
   content: '';
   position: absolute;
   top: -50%;
   left: -50%;
   width: 200%;
   height: 200%;
   background: conic-gradient(from 0deg, var(--art-secondary), var(--art-accent), var(--paint-blue), var(--art-secondary));
   animation: artisticRotate 15s linear infinite;
   opacity: 0.1;
}

@keyframes artisticRotate {
   0% { transform: rotate(0deg); }
   100% { transform: rotate(360deg); }
}

.filter-label {
   display: block;
   font-size: 1.3rem;
   font-weight: 700;
   color: var(--art-primary);
   margin-bottom: 20px;
   text-transform: uppercase;
   letter-spacing: 1px;
   font-family: var(--font-art);
   position: relative;
   z-index: 2;
}

.filter-options {
   display: flex;
   flex-wrap: wrap;
   gap: 12px;
   position: relative;
   z-index: 2;
}

.filter-btn {
   background: var(--gallery-white);
   border: 2px solid var(--art-primary);
   color: var(--art-primary);
   padding: 10px 16px;
   border-radius: 20px;
   font-weight: 600;
   cursor: pointer;
   transition: all 0.3s ease;
   font-size: 0.9rem;
   font-family: var(--font-gallery);
   position: relative;
   overflow: hidden;
   box-shadow: 0 3px 0 var(--museum-gray);
}

.filter-btn::before {
   content: '';
   position: absolute;
   top: 0;
   left: -100%;
   width: 100%;
   height: 100%;
   transition: left 0.3s ease;
   z-index: -1;
}

.filter-btn.limited {
   border-color: var(--limited-gold);
   color: var(--limited-gold);
}

.filter-btn.limited::before {
   background: var(--limited-gold);
}

.filter-btn.artist {
   border-color: var(--paint-purple);
   color: var(--paint-purple);
}

.filter-btn.artist::before {
   background: var(--paint-purple);
}

.filter-btn.signed {
   border-color: var(--signature-red);
   color: var(--signature-red);
}

.filter-btn.signed::before {
   background: var(--signature-red);
}

.filter-btn:hover {
   color: var(--gallery-white);
   transform: translateY(-1px);
   box-shadow: 0 5px 0 var(--museum-gray);
}

.filter-btn:hover::before {
   left: 0;
}

.filter-btn:active {
   transform: translateY(1px);
   box-shadow: 0 1px 0 var(--museum-gray);
}

.filter-btn.active {
   background: var(--art-secondary);
   color: var(--gallery-white);
   border-color: var(--art-secondary);
   box-shadow: 0 3px 0 var(--art-primary);
}

.clear-filters {
   background: var(--art-accent);
   border: 3px solid var(--art-primary);
   color: var(--gallery-white);
   padding: 15px 35px;
   border-radius: 25px;
   font-weight: 700;
   cursor: pointer;
   transition: all 0.3s ease;
   text-transform: uppercase;
   letter-spacing: 2px;
   display: block;
   margin: 0 auto;
   font-family: var(--font-gallery);
   font-size: 1.1rem;
   position: relative;
   z-index: 2;
   box-shadow: 0 5px 0 var(--art-primary);
}

.clear-filters:hover {
   background: var(--art-secondary);
   transform: translateY(-2px);
   box-shadow: 0 7px 0 var(--art-primary);
}

.clear-filters:active {
   transform: translateY(2px);
   box-shadow: 0 3px 0 var(--art-primary);
}

/* Art Print Gallery */
.artprint-gallery {
   padding: 100px 0;
   background: var(--gallery-bg);
   position: relative;
}

.artprint-gallery::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: 
       radial-gradient(circle at 25% 25%, var(--art-secondary) 0%, transparent 50%),
       radial-gradient(circle at 75% 75%, var(--art-accent) 0%, transparent 50%);
   opacity: 0.03;
   pointer-events: none;
}

.gallery-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 60px;
   position: relative;
   z-index: 2;
}

.gallery-header h2 {
   font-size: 3.5rem;
   color: var(--art-primary);
   margin: 0;
   text-shadow: 
       0 0 20px var(--art-secondary),
       3px 3px 0 var(--art-accent);
   text-transform: uppercase;
   letter-spacing: 3px;
   font-family: var(--font-art);
}

.view-options {
   display: flex;
   gap: 10px;
}

.view-btn {
   background: var(--gallery-white);
   border: 2px solid var(--art-primary);
   color: var(--art-primary);
   padding: 10px 15px;
   border-radius: 10px;
   cursor: pointer;
   transition: all 0.3s ease;
   font-family: var(--font-gallery);
   font-weight: 600;
   display: flex;
   align-items: center;
   gap: 5px;
}

.view-btn:hover,
.view-btn.active {
   background: var(--art-primary);
   color: var(--gallery-white);
}

.view-icon {
   font-size: 1.1rem;
}

.artworks-container {
   position: relative;
   z-index: 2;
}

.artworks-container.grid-view {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
   gap: 40px;
}

.artwork-card {
   background: var(--gallery-white);
   border-radius: 15px;
   overflow: hidden;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
   transition: all 0.4s ease;
   position: relative;
}

.artwork-card:hover {
   transform: translateY(-10px);
   box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
}

.artwork-frame {
   position: relative;
   margin: 20px;
   border: 8px solid var(--frame-brown);
   border-radius: 8px;
   overflow: hidden;
   background: var(--gallery-white);
   box-shadow: 
       inset 0 0 0 3px var(--frame-gold),
       0 5px 15px rgba(0, 0, 0, 0.2);
}

.frame-inner {
   position: relative;
   aspect-ratio: 4/3;
   overflow: hidden;
}

.artwork-image {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: all 0.6s ease;
}

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

.limited-badge {
   position: absolute;
   top: 15px;
   left: 15px;
   background: var(--limited-gold);
   color: var(--gallery-white);
   padding: 6px 12px;
   border-radius: 12px;
   font-weight: 800;
   font-size: 0.7rem;
   text-transform: uppercase;
   letter-spacing: 1px;
   font-family: var(--font-gallery);
   box-shadow: 0 0 15px rgba(212, 175, 55, 0.6);
   animation: limitedGlow 3s ease-in-out infinite alternate;
}

@keyframes limitedGlow {
   0% { box-shadow: 0 0 15px rgba(212, 175, 55, 0.6); }
   100% { box-shadow: 0 0 25px rgba(212, 175, 55, 0.9); }
}

.artwork-overlay {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: linear-gradient(135deg, rgba(44, 62, 80, 0.9) 0%, rgba(231, 76, 60, 0.9) 100%);
   opacity: 0;
   transition: all 0.4s ease;
   display: flex;
   align-items: center;
   justify-content: center;
}

.artwork-card:hover .artwork-overlay {
   opacity: 1;
}

.overlay-content {
   text-align: center;
   color: var(--gallery-white);
   transform: translateY(20px);
   transition: all 0.4s ease;
}

.artwork-card:hover .overlay-content {
   transform: translateY(0);
}

.artwork-info {
   margin-bottom: 20px;
}

.artwork-style,
.artwork-format {
   display: inline-block;
   background: rgba(255, 255, 255, 0.2);
   padding: 4px 8px;
   border-radius: 8px;
   margin: 0 5px;
   font-size: 0.8rem;
   font-weight: 600;
}

.artwork-actions {
   display: flex;
   gap: 10px;
   justify-content: center;
}

.action-btn {
   background: var(--gallery-white);
   color: var(--art-primary);
   border: none;
   padding: 8px 15px;
   border-radius: 15px;
   cursor: pointer;
   font-weight: 600;
   font-size: 0.8rem;
   transition: all 0.3s ease;
   font-family: var(--font-gallery);
}

.action-btn:hover {
   background: var(--art-accent);
   color: var(--gallery-white);
   transform: scale(1.05);
}

.frame-shadow {
   position: absolute;
   bottom: -5px;
   right: -5px;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.2);
   border-radius: 8px;
   z-index: -1;
}

.artwork-details {
   padding: 25px;
}

.artwork-meta {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 15px;
}

.style-tag,
.format-tag {
   background: var(--art-secondary);
   color: var(--gallery-white);
   padding: 4px 8px;
   border-radius: 8px;
   font-size: 0.7rem;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 1px;
   font-family: var(--font-gallery);
}

.format-tag {
   background: var(--art-accent);
}

.artwork-title {
   margin: 0 0 15px 0;
   font-size: 1.4rem;
   font-weight: 700;
   line-height: 1.3;
   font-family: var(--font-art);
}

.title-link {
   color: var(--art-primary);
   text-decoration: none;
   transition: all 0.3s ease;
}

.title-link:hover {
   color: var(--art-secondary);
   text-shadow: 0 0 10px rgba(231, 76, 60, 0.5);
}

.artwork-description {
   color: var(--text-gray);
   line-height: 1.6;
   margin: 0 0 20px 0;
   font-size: 0.95rem;
}

.artwork-pricing {
   display: flex;
   align-items: baseline;
   gap: 8px;
   margin-bottom: 20px;
}

.price-main {
   font-size: 2rem;
   font-weight: 700;
   color: var(--art-secondary);
   font-family: var(--font-art);
}

.price-info {
   color: var(--text-gray);
   font-size: 0.8rem;
   font-style: italic;
}

.artwork-actions-bottom {
   display: flex;
   gap: 12px;
   margin-bottom: 20px;
}

.btn-artprint {
   padding: 12px 20px;
   border-radius: 20px;
   border: 2px solid var(--art-primary);
   font-weight: 700;
   font-size: 0.9rem;
   text-transform: uppercase;
   letter-spacing: 1px;
   cursor: pointer;
   transition: all 0.3s ease;
   text-decoration: none;
   display: inline-block;
   text-align: center;
   position: relative;
   overflow: hidden;
   font-family: var(--font-gallery);
}

.btn-artprint::before {
   content: '';
   position: absolute;
   top: 0;
   left: -100%;
   width: 100%;
   height: 100%;
   transition: left 0.3s ease;
   z-index: -1;
}

.btn-artprint.primary {
   background: var(--art-primary);
   color: var(--gallery-white);
}

.btn-artprint.primary::before {
   background: var(--art-secondary);
}

.btn-artprint.primary:hover::before {
   left: 0;
}

.btn-artprint.secondary {
   background: transparent;
   color: var(--art-accent);
   border-color: var(--art-accent);
}

.btn-artprint.secondary::before {
   background: var(--art-accent);
}

.btn-artprint.secondary:hover {
   color: var(--gallery-white);
}

.btn-artprint.secondary:hover::before {
   left: 0;
}

.quality-indicators {
   display: flex;
   justify-content: space-between;
   padding-top: 15px;
   border-top: 1px solid #eee;
}

.quality-item {
   display: flex;
   align-items: center;
   gap: 5px;
}

.quality-icon {
   font-size: 0.9rem;
}

.quality-text {
   color: var(--text-gray);
   font-size: 0.8rem;
   font-weight: 600;
}

/* No Artworks */
.no-artworks {
   grid-column: 1 / -1;
   text-align: center;
   padding: 80px 20px;
   color: var(--text-gray);
}

.no-artworks-icon {
   font-size: 5rem;
   margin-bottom: 25px;
   opacity: 0.6;
   animation: artFloat 3s ease-in-out infinite alternate;
}

@keyframes artFloat {
   0% { transform: translateY(0) rotate(0deg); }
   100% { transform: translateY(-10px) rotate(2deg); }
}

.no-artworks h3 {
   font-size: 2.2rem;
   color: var(--art-primary);
   margin: 0 0 15px 0;
   font-family: var(--font-art);
}

.no-artworks p {
   font-size: 1.1rem;
   margin: 0;
   font-style: italic;
}

/* Customization Section */
.customization-section {
   padding: 100px 0;
   background: var(--gallery-white);
   position: relative;
}

.customization-content {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 60px;
   align-items: center;
}

.customization-text h2 {
   font-size: 3rem;
   color: var(--art-primary);
   margin: 0 0 20px 0;
   font-family: var(--font-art);
}

.customization-text p {
   color: var(--text-gray);
   font-size: 1.2rem;
   margin: 0 0 30px 0;
   line-height: 1.6;
}

.customization-features {
   list-style: none;
   padding: 0;
   margin: 0 0 40px 0;
}

.customization-features li {
   color: var(--art-primary);
   font-size: 1.1rem;
   margin-bottom: 15px;
   font-weight: 500;
}

.btn-customization {
   background: var(--art-secondary);
   color: var(--gallery-white);
   border: none;
   padding: 15px 30px;
   border-radius: 25px;
   font-weight: 700;
   font-size: 1.1rem;
   cursor: pointer;
   transition: all 0.3s ease;
   font-family: var(--font-gallery);
   text-transform: uppercase;
   letter-spacing: 1px;
}

.btn-customization:hover {
   background: var(--art-primary);
   transform: translateY(-3px);
   box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.customization-visual {
   position: relative;
}

.sample-frame {
   background: var(--frame-brown);
   padding: 20px;
   border-radius: 10px;
   box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
}

.sample-artwork {
   background: var(--gallery-white);
   padding: 15px;
   border-radius: 5px;
   position: relative;
}

.sample-image {
   width: 100%;
   height: 250px;
   background: linear-gradient(45deg, var(--art-secondary), var(--art-accent));
   border-radius: 5px;
   margin-bottom: 20px;
}

.customization-options {
   space-y: 10px;
}

.option-item {
   display: flex;
   justify-content: space-between;
   padding: 8px 0;
   border-bottom: 1px solid #eee;
}

.option-label {
   font-weight: 600;
   color: var(--art-primary);
}

.option-value {
   color: var(--text-gray);
}

/* Creation Process */
.creation-process {
   padding: 100px 0;
   background: var(--canvas-cream);
}

.creation-process h2 {
   text-align: center;
   font-size: 3rem;
   color: var(--art-primary);
   margin: 0 0 60px 0;
   font-family: var(--font-art);
}

.process-steps {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
   gap: 40px;
}

.step-item {
   text-align: center;
   position: relative;
   background: var(--gallery-white);
   padding: 40px 30px;
   border-radius: 15px;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
   transition: all 0.3s ease;
}

.step-item:hover {
   transform: translateY(-10px);
   box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
}

.step-number {
   position: absolute;
   top: -20px;
   left: 50%;
   transform: translateX(-50%);
   background: var(--art-secondary);
   color: var(--gallery-white);
   width: 40px;
   height: 40px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-center;
   font-weight: 700;
   font-size: 1.2rem;
   font-family: var(--font-gallery);
   border: 3px solid var(--gallery-white);
   box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.step-content h3 {
   color: var(--art-primary);
   font-size: 1.5rem;
   margin: 0 0 15px 0;
   font-family: var(--font-art);
}

.step-content p {
   color: var(--text-gray);
   line-height: 1.6;
   margin: 0;
}

.step-icon {
   font-size: 3rem;
   margin: 20px 0;
   opacity: 0.7;
}

/* Testimonials */
.testimonials-section {
   padding: 100px 0;
   background: var(--gallery-white);
}

.testimonials-section h2 {
   text-align: center;
   font-size: 3rem;
   color: var(--art-primary);
   margin: 0 0 60px 0;
   font-family: var(--font-art);
}

.testimonials-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
   gap: 40px;
}

.testimonial-item {
   background: var(--canvas-cream);
   padding: 30px;
   border-radius: 15px;
   border: 3px solid var(--art-accent);
   position: relative;
   transition: all 0.3s ease;
}

.testimonial-item:hover {
   transform: translateY(-5px);
   box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
}

.testimonial-content {
   margin-bottom: 25px;
}

.testimonial-content p {
   color: var(--art-primary);
   font-size: 1.1rem;
   line-height: 1.6;
   margin: 0;
   font-style: italic;
   font-family: var(--font-art);
}

.testimonial-author {
   display: flex;
   align-items: center;
   gap: 15px;
   margin-bottom: 15px;
}

.author-avatar {
   width: 50px;
   height: 50px;
   border-radius: 50%;
   background: var(--art-secondary);
   color: var(--gallery-white);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1.5rem;
}

.author-name {
   font-weight: 700;
   color: var(--art-primary);
   font-size: 1.1rem;
   display: block;
}

.author-title {
   color: var(--text-gray);
   font-size: 0.9rem;
   display: block;
}

.testimonial-rating {
   display: flex;
   gap: 3px;
}

.star {
   color: var(--art-accent);
   font-size: 1.2rem;
}

/* FAQ Section */
.faq-section {
   padding: 100px 0;
   background: var(--gallery-bg);
}

.faq-section h2 {
   text-align: center;
   font-size: 3rem;
   color: var(--art-primary);
   margin: 0 0 60px 0;
   font-family: var(--font-art);
}

.faq-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
   gap: 30px;
}

.faq-item {
   background: var(--gallery-white);
   padding: 30px;
   border-radius: 15px;
   border: 2px solid var(--art-accent);
   transition: all 0.3s ease;
}

.faq-item:hover {
   border-color: var(--art-secondary);
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.faq-item h3 {
   color: var(--art-primary);
   font-size: 1.3rem;
   margin: 0 0 15px 0;
   font-family: var(--font-art);
}

.faq-item p {
   color: var(--text-gray);
   line-height: 1.6;
   margin: 0;
}

/* Responsive Design */
@media (max-width: 768px) {
   .artprint-hero {
       height: 60vh;
       min-height: 500px;
   }
   
   .artprint-title {
       font-size: 2.5rem;
   }
   
   .artprint-stats {
       flex-direction: column;
       gap: 25px;
   }
   
   .quality-badges {
       flex-direction: column;
       gap: 15px;
   }
   
   .artworks-container.grid-view {
       grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
       gap: 25px;
   }
   
   .filters-grid {
       grid-template-columns: 1fr;
   }
   
   .customization-content {
       grid-template-columns: 1fr;
       gap: 40px;
   }
   
   .process-steps {
       grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
       gap: 30px;
   }
   
   .testimonials-grid {
       grid-template-columns: 1fr;
       gap: 30px;
   }
   
   .faq-grid {
       grid-template-columns: 1fr;
       gap: 25px;
   }
   
   .gallery-header {
       flex-direction: column;
       gap: 20px;
       text-align: center;
   }
   
   .view-options {
       justify-content: center;
   }
   
   .artwork-frame {
       margin: 15px;
       border-width: 6px;
   }
   
   .artwork-details {
       padding: 20px;
   }
}

@media (max-width: 480px) {
   .artprint-main {
       padding-top: 60px;
   }
   
   .artprint-hero {
       height: 50vh;
       min-height: 700px;
   }
   
   .artprint-title {
       font-size: 2rem;
       letter-spacing: 2px;
   }
   
   .artprint-subtitle {
       font-size: 1.2rem;
   }
   
   .artworks-container.grid-view {
       grid-template-columns: 1fr;
       gap: 20px;
   }
   
   .filter-group {
       padding: 25px;
   }
   
   .artwork-details {
       padding: 15px;
   }
   
   .artwork-title {
       font-size: 1.2rem;
   }
   
   .btn-artprint {
       padding: 10px 16px;
       font-size: 0.8rem;
   }
   
   .customization-text h2 {
       font-size: 2.2rem;
   }
   
   .creation-process h2,
   .testimonials-section h2,
   .faq-section h2 {
       font-size: 2.2rem;
   }
   
   .step-item {
       padding: 30px 20px;
   }
   
   .testimonial-item {
       padding: 25px;
   }
   
   .faq-item {
       padding: 25px;
   }
   
   .artwork-frame {
       margin: 10px;
       border-width: 4px;
   }
   
   .quality-badges {
       flex-wrap: wrap;
       justify-content: center;
   }
   
   .badge {
       padding: 8px 15px;
   }
   
   .badge-text {
       font-size: 0.8rem;
   }
}

/* Animations et effets supplémentaires */
.artwork-card.filtered-out {
   opacity: 0.3;
   transform: scale(0.95);
   transition: all 0.4s ease;
}

.wishlist-btn.active {
   background: var(--signature-red) !important;
   border-color: var(--signature-red) !important;
   color: var(--gallery-white) !important;
}

/* Loading states */
.loading {
   opacity: 0.6;
   pointer-events: none;
   position: relative;
}

.loading::after {
   content: '';
   position: absolute;
   top: 50%;
   left: 50%;
   width: 25px;
   height: 25px;
   margin: -12px 0 0 -12px;
   border: 3px solid var(--art-secondary);
   border-right-color: transparent;
   border-radius: 50%;
   animation: artSpin 0.8s linear infinite;
   z-index: 10;
}

@keyframes artSpin {
   to {
       transform: rotate(360deg);
   }
}

/* Masonry view styles */
.artworks-container.masonry-view {
   columns: 3;
   column-gap: 30px;
}

.artworks-container.masonry-view .artwork-card {
   break-inside: avoid;
   margin-bottom: 30px;
}

/* List view styles */
.artworks-container.list-view {
   display: flex;
   flex-direction: column;
   gap: 20px;
}

.artworks-container.list-view .artwork-card {
   display: flex;
   align-items: center;
   padding: 20px;
}

.artworks-container.list-view .artwork-frame {
   width: 200px;
   margin: 0 20px 0 0;
   flex-shrink: 0;
}

.artworks-container.list-view .artwork-details {
   flex: 1;
   padding: 0;
}

/* Gallery modal */
.gallery-modal {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: rgba(0, 0, 0, 0.9);
   z-index: 1000;
   display: flex;
   align-items: center;
   justify-content: center;
   opacity: 0;
   visibility: hidden;
   transition: all 0.3s ease;
}

.gallery-modal.active {
   opacity: 1;
   visibility: visible;
}

.modal-content {
   max-width: 90%;
   max-height: 90%;
   position: relative;
}

.modal-image {
   width: 100%;
   height: auto;
   border-radius: 10px;
   box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
}

.modal-close {
   position: absolute;
   top: -40px;
   right: 0;
   background: var(--gallery-white);
   color: var(--art-primary);
   border: none;
   width: 40px;
   height: 40px;
   border-radius: 50%;
   cursor: pointer;
   font-size: 1.5rem;
   font-weight: 700;
   transition: all 0.3s ease;
}

.modal-close:hover {
   background: var(--art-secondary);
   color: var(--gallery-white);
   transform: scale(1.1);
}

/* Print size calculator */
.size-calculator {
   background: var(--canvas-cream);
   padding: 30px;
   border-radius: 15px;
   margin-top: 30px;
   border: 2px solid var(--art-accent);
}

.calculator-header {
   color: var(--art-primary);
   font-size: 1.5rem;
   margin-bottom: 20px;
   font-family: var(--font-art);
}

.calculator-inputs {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
   gap: 15px;
   margin-bottom: 20px;
}

.calculator-input {
   display: flex;
   flex-direction: column;
   gap: 5px;
}

.calculator-input label {
   font-weight: 600;
   color: var(--art-primary);
   font-size: 0.9rem;
}

.calculator-input select,
.calculator-input input {
   padding: 10px;
   border: 2px solid var(--art-accent);
   border-radius: 8px;
   background: var(--gallery-white);
   color: var(--art-primary);
   font-family: var(--font-gallery);
}

.calculator-result {
   background: var(--gallery-white);
   padding: 20px;
   border-radius: 10px;
   border: 2px solid var(--art-secondary);
   text-align: center;
}

.result-price {
   font-size: 2rem;
   font-weight: 700;
   color: var(--art-secondary);
   font-family: var(--font-art);
}

.result-details {
   color: var(--text-gray);
   margin-top: 10px;
   font-size: 0.9rem;
}

/* Artist signature effect */
.artist-signature {
   position: absolute;
   bottom: 10px;
   right: 15px;
   color: var(--signature-red);
   font-family: 'Dancing Script', cursive;
   font-size: 1.2rem;
   opacity: 0.7;
   transform: rotate(-5deg);
}

/* Frame textures */
.frame-texture-wood {
   background: 
       repeating-linear-gradient(
           90deg,
           var(--frame-brown) 0px,
           var(--frame-brown) 2px,
           rgba(139, 69, 19, 0.8) 2px,
           rgba(139, 69, 19, 0.8) 4px
       );
}

.frame-texture-metal {
   background: linear-gradient(45deg, #c0c0c0, #808080, #c0c0c0);
   border: 2px solid #606060;
}

.frame-texture-ornate {
   background: var(--frame-gold);
   border: 4px solid var(--limited-gold);
   box-shadow: 
       inset 0 0 0 2px rgba(255, 255, 255, 0.5),
       0 0 20px rgba(212, 175, 55, 0.4);
}

/* Quality indicators animations */
.quality-item:hover .quality-icon {
   animation: qualityBounce 0.6s ease;
}

@keyframes qualityBounce {
   0%, 100% { transform: scale(1); }
   50% { transform: scale(1.2); }
}

/* Paper texture overlay */
.paper-texture {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: 
       radial-gradient(circle at 30% 40%, rgba(0, 0, 0, 0.02) 0%, transparent 50%),
       radial-gradient(circle at 70% 80%, rgba(0, 0, 0, 0.02) 0%, transparent 50%);
   pointer-events: none;
   opacity: 0.5;
}

/* Success animations */
.artwork-added {
   animation: artworkSuccess 0.8s ease-out;
}

@keyframes artworkSuccess {
   0% { transform: scale(1); }
   50% { transform: scale(1.05); }
   100% { transform: scale(1); }
}

/* Hover effects for frames */
.artwork-frame:hover {
   box-shadow: 
       inset 0 0 0 3px var(--frame-gold),
       0 5px 15px rgba(0, 0, 0, 0.2),
       0 0 30px rgba(212, 175, 55, 0.3);
}

/* Print quality badges */
.print-quality {
   position: absolute;
   top: 10px;
   right: 10px;
   background: var(--museum-gray);
   color: var(--gallery-white);
   padding: 4px 8px;
   border-radius: 8px;
   font-size: 0.7rem;
   font-weight: 700;
   text-transform: uppercase;
}

.print-quality.museum {
   background: var(--limited-gold);
}

.print-quality.premium {
   background: var(--art-secondary);
}

.print-quality.standard {
   background: var(--art-accent);
}