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

*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{

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

font-size:15px;

line-height:1.6;

background:#f7f7f7;

color:#333;

}

img{

max-width:100%;

height:auto;

display:block;

}

a{

text-decoration:none;

color:#333;

}

ul{

list-style:none;

}


/* ===========================
CONTAINER
=========================== */

.container{

width:95%;

max-width:1400px;

margin:auto;

}


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

.site-header{

background:#ffffff;

box-shadow:0 2px 10px rgba(0,0,0,.08);

position:sticky;

top:0;

z-index:999;

}

.site-header .container{

display:flex;

justify-content:space-between;

align-items:center;

padding:12px 0;

}


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

.logo img{

height:65px;

}


/* ===========================
MENU
=========================== */

.main-menu ul{

display:flex;

gap:30px;

}

.main-menu a{

font-size:16px;

font-weight:bold;

padding:10px;

}

.main-menu a:hover,

.main-menu a.active{

color:#b8860b;

}


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

.header-right{

display:flex;

align-items:center;

gap:15px;

}


/* ===========================
SEARCH
=========================== */

.search-form{

display:flex;

}

.search-form input{

width:220px;

padding:10px;

border:1px solid #cccccc;

border-right:none;

outline:none;

}

.search-form button{

padding:10px 18px;

border:1px solid #cccccc;

background:#444;

color:#fff;

cursor:pointer;

}


/* ===========================
BUTTONS
=========================== */

.login-btn,

.signup-btn{

padding:10px 18px;

border-radius:5px;

font-weight:bold;

}

.login-btn{

background:#eeeeee;

}

.signup-btn{

background:#0d6efd;

color:white;

}


/* ===========================
HEADINGS
=========================== */

h1{

font-size:34px;

margin:25px 0;

}

h2{

font-size:28px;

margin:20px 0;

}

h3{

font-size:22px;

margin:15px 0;

}


/* ===========================
CARD GRID
=========================== */

.grid{

display:grid;

grid-template-columns:repeat(auto-fill,minmax(260px,1fr));

gap:25px;

}


/* ===========================
ARTWORK CARD
=========================== */

.art-card{

background:white;

border-radius:8px;

overflow:hidden;

box-shadow:0 2px 10px rgba(0,0,0,.10);

transition:.25s;

}

.art-card:hover{

transform:translateY(-4px);

}

.art-card img{

width:100%;

height:260px;

object-fit:cover;

}

.art-content{

padding:15px;

}

.art-title{

font-size:18px;

font-weight:bold;

margin-bottom:8px;

}

.artist-name{

color:#666;

margin-bottom:8px;

}

.price{

font-size:20px;

font-weight:bold;

color:#c0392b;

margin:10px 0;

}

.view-btn{

display:inline-block;

padding:10px 18px;

background:#0d6efd;

color:white;

border-radius:5px;

}


/* ===========================
CATEGORY BUTTONS
=========================== */

.category-list{

display:flex;

flex-wrap:wrap;

gap:12px;

}

.category-list a{

padding:10px 18px;

background:white;

border:1px solid #ddd;

border-radius:5px;

}


/* ===========================
ARTIST CARD
=========================== */

.artist-card{

background:white;

padding:20px;

text-align:center;

border-radius:8px;

box-shadow:0 2px 10px rgba(0,0,0,.08);

}

.artist-card img{

width:170px;

height:170px;

margin:auto;

border-radius:50%;

object-fit:cover;

}


/* ===========================
TABLE
=========================== */

table{

width:100%;

border-collapse:collapse;

}

table td,

table th{

padding:10px;

border:1px solid #ddd;

}


/* ===========================
FORMS
=========================== */

input,

textarea,

select{

width:100%;

padding:10px;

border:1px solid #cccccc;

border-radius:4px;

}

textarea{

resize:vertical;

min-height:120px;

}

button{

padding:10px 20px;

cursor:pointer;

}


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

.footer{

margin-top:60px;

background:#222;

color:white;

padding:50px 0;

}

.footer-row{

display:grid;

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

gap:30px;

}

.footer a{

color:white;

}

.copyright{

margin-top:25px;

text-align:center;

}


/* ===========================
RESPONSIVE
=========================== */

@media(max-width:992px){

.site-header .container{

flex-direction:column;

}

.main-menu ul{

flex-wrap:wrap;

justify-content:center;

}

.header-right{

margin-top:15px;

flex-wrap:wrap;

justify-content:center;

}

.footer-row{

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

}

}

@media(max-width:768px){

.footer-row{

grid-template-columns:1fr;

}

.grid{

grid-template-columns:1fr;

}

.search-form input{

width:170px;

}

h1{

font-size:28px;

}

h2{

font-size:24px;

}

.alert-success{

background:#d4edda;

color:#155724;

padding:15px;

margin-bottom:20px;

border-radius:5px;

border:1px solid #c3e6cb;

}

.alert-error{

background:#f8d7da;

color:#721c24;

padding:15px;

margin-bottom:20px;

border-radius:5px;

border:1px solid #f5c6cb;

}



}