:root {
  --brandco: #0202f7;
  --textco: #2C3E4E;
  --backco: #f0f0f0;
  --whiteco: white;
}

@font-face {
    font-family: 'MSSans';
    src: url('/static/micross.ttf');
}
@font-face {
    font-family: 'HandWrite';
    src: url('/static/thehand.ttf');
}

body {
  margin: 0;
  display: flex;
  flex-direction: column;
  font-family: "MSSans";
  background: var(--backco);
  color: var(--textco);
  font-size: 1rem;
  text-align: center;
  /* background-image: url('/static/gallery wall.png');
  background-size: contain;
  background-position: center top;
  background-repeat: no-repeat; */
  /* overflow: hidden; */
}
* {font-family: "MSSans";}

h1 {color: var(--brandco); font-size: 2rem; font-weight: bold; text-align: center; margin: 1.5rem auto 0.5rem; padding-bottom: 0.5rem; width: fit-content;}
h2 {color: var(--textco); font-size: 1.75rem; font-weight: bold; text-align: center; letter-spacing: 0.02em; margin-bottom: 0.75rem;}
h3 {color: var(--textco); font-size: 1.5rem; text-align: center; margin-top: 0.5rem;}
p {color: var(--textco); font-size: 1.125rem; line-height: 1.2; margin-bottom: 0.5rem; overflow-wrap: break-word; text-align: left; margin-top: 0.25rem; font-family: "MSSans";} 
/* NAV */
.logo-section {display: flex; justify-content: space-between; align-items: center; background: var(--backco); padding: 0.5rem 2rem; margin: 0; flex-shrink: 0;}
.logo-row {display: flex; align-items: center; justify-content: center; gap: 0.5rem;}
.logo-title {color: var(--brandco); font-size: 2rem; font-weight: bold; line-height: 1.1; text-align: left; display: block;}
.logo-tagline {color: var(--textco); font-size: 1.25rem; text-align: left; margin-top: 0.2rem; display: block;}
.logo-img {vertical-align: middle; margin-right: 0.5rem; width: 5rem; height: 5rem;}

/* BUTTONS */
.btn, .btn-rev {
  border-radius: 2rem;
  padding: 0.4rem 0.8rem;
  font-weight: bold;
  font-size: 1rem;
  cursor: pointer;
  margin: 0;
  display: inline-block;
  transition: background 0.2s, color 0.2s, border 0.2s;
  text-align: center;
  text-decoration: none;
  background: var(--brandco);
  color: var(--backco);
  width: fit-content;
}
.btn-rev {background: var(--backco); color: var(--brandco); margin-top: 0.5rem; border: none;}

/* CONTAINERS */
.container {width: 60%; margin: 1rem auto; padding: 1rem; background: var(--backco); border-radius:2rem;}
/* FORM LAYOUTS */
.form-row {display: flex; gap: 1rem; margin-bottom: 1rem; align-items: center;}
.form-field {  display: flex;  align-items: center;  gap: 0.5rem; flex:1;}
.form-field-full {display: flex; align-items: center; gap: 0.5rem; width: 100%; margin-bottom: 1rem;}
.form-field-full input, .form-field input, .form-field select {flex: 1;}
/* FORM INPUTS */
input[type="text"], input[type="password"], input[type="file"], select {
  padding: 0.5rem; border-radius: 1rem; border: 0.0625rem solid var(--brandco); font-size: 1rem; box-sizing: border-box;}
label {font-weight: bold;}

/* TABLES */
.data-table {width: 100%; border-collapse: collapse;}
.data-table thead tr {background: var(--textco); color: var(--whiteco);}
.data-table th, .data-table td {padding: 0.5rem; text-align: left;}
.data-table tbody tr {  border-bottom: 0.0625rem solid #ccc;}
.data-table input, .data-table select {width: 100%;}
/* GALLERY MAIN PAGE */
.gallery-container {
  position: relative;
  width: 100%;
  aspect-ratio: 3300 / 1467;
  background-image: url('/static/gallery wall2.png');
  background-size:cover;
  background-position: center;
}
.welcome-text {
  position: absolute;
  top: 5%;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  align-items: center;
  width: 40%;
  aspect-ratio:2/1;
  /* border: 0.5rem solid var(--brandco); */
  padding: 0.75rem;
  background: rgb(226, 226, 226); /* mid-neutral matte */
  box-shadow:
    inset 0 0 1rem rgba(0, 0, 0, 0.6),
    0 0 0 0.5rem #ffffff,               /* OUTER frame edge */
    0 0.5rem 1rem rgba(0,0,0,0.40),
    0 1rem 2rem rgba(0,0,0,1);
}
.welcome-img-wrapper{ width: 20%; overflow: hidden; align-items: center; justify-content: center; background: var(--whiteco); border-radius:50%; margin: 0 auto;}
.welcome-text .signature {font-family: 'HandWrite'; font-size: 2rem; color: var(--textco); text-align:right; margin-bottom:0;}
.painting-display {
  position: absolute;
  top: 5%;
  left: 50%;
  transform: translateX(-50%);
  width: 45%;
  aspect-ratio: 6/4;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.painting-display.active {display: flex;}

.painting-display img {
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
  padding: 0.75rem;
  background: #d2d2d0;
  box-shadow:
    inset 0 0 1rem rgba(0, 0, 0, 0.6),
    0 0 0 0.5rem #240000,
    0 0.5rem 1rem rgba(0,0,0,0.40),
    0 1rem 2rem rgba(0,0,0,1);
  position: relative;
  z-index: 1;
}

.glass-card {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 2;
  /* background-image: url('/static/glass.png');
  background-size: 100% 100%;  
  background-position: center;
  background-repeat: no-repeat;
  mix-blend-mode: screen;  */
}

.thumbnail-strip {
  position: absolute;
  top: 75%;
  left: 50%;
  transform: translateX(-50%);
  width: 50%;
  display: none;
  gap: 0.5rem;
  overflow-x: auto;
  padding: 0.5rem;
  justify-content: center;
  align-items: center;
  z-index: 10;
}
.thumbnail-strip.active {display: flex;}
.thumbnail { height: 5rem; aspect-ratio: 1; cursor: pointer; border-radius: 0.5rem; flex-shrink: 0;}
.thumbnail img {width: 100%; height: 100%; object-fit: cover; border-radius: 0.5rem; box-shadow: 0 0.5rem 2rem rgba(0,0,0,0.3);}
.thumbnail.active {border: 0.25rem solid var(--brandco); box-shadow: 0 0 1rem var(--brandco);}
/* COLLECTION GLOBS */
.glob {
  position: absolute;
  width: 5%;
  aspect-ratio:1/1;
  border-radius: 50%;
  background: var(--brandco);
  color: var(--whiteco);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
  transition: opacity 0.3s;
  text-align: center;
  padding: 1rem;
  box-shadow: 0 0.5rem 2rem rgba(0,0,0,0.6);
}
.glob.faded {opacity: 0.3;}
.glob-all {background: var(--textco);}
.button-row {display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin: 0 auto; margin-bottom:0rem;}

/* SHOP PAGE STYLES */
.shop-layout {display: flex; gap: 0.5rem; width: 98%; margin: 0 auto;}
.cart-sidebar {
    width: 15%;
    position: sticky;
    top: 1rem;
    height: auto;
    background: rgba(255, 255, 255, 0.5);
    /* background: var(--whiteco); */
    /* border: 0.2rem solid var(--brandco); */
    border-radius: 2rem;
    padding: 1rem;
}
.cart-sidebar h3 {margin-top: 0; border-bottom: 2px solid #ccc; padding-bottom: 0.5rem;}
#cart-items {max-height: 30rem;overflow-y: auto;}
.cart-item {border-bottom: 1px solid #ccc; padding: 0.5rem 0; margin-bottom: 0.5rem;}
.cart-item-row {display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.25rem;}
.delete-form {display: inline; margin: 0;}
.delete-btn {background: none; border: none; cursor: pointer; font-size: 2rem; padding: 0; color: #000;}
.cart-total {
    border-top: 2px solid var(--brandco);
    padding-top: 0.5rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
    display: flex;
    justify-content: space-between;
    font-weight: bold;
}
.content-container {
  width: 85%;
  background: rgba(255, 255, 255, 0.5);

  /* background: var(--whiteco); */
  /* border: 0.2rem solid var(--brandco); */
  border-radius: 2rem;
  margin: 0 auto;
  padding: 1.25rem 1.25rem;
  box-sizing: border-box;
  justify-content: flex-start;
  min-height: auto;
  text-align: center;
}
.card {
  /* background:linear-gradient(rgba(255, 255, 255, 0.7), rgba(5,31,64,0.1)); */
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(176, 182, 189, 0.5));
  border-radius: 2rem;
  border-bottom: 0.5rem solid var(--brandco);
  padding: 1rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  box-sizing: border-box;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  cursor: pointer;
}
.card a {text-decoration:none;}
.card:hover {transform: translateY(-0.4rem); box-shadow: 0 1.5rem 3rem rgba(5,31,64,0.35); }
.card p {
  overflow-wrap: break-word;
  word-break: break-word;
  white-space: normal;
  max-width: 100%;
  font-size:1rem;
  font-family: "MSSans";
  color: var(--brandco);
  text-align: left;
  margin-bottom:0;
}
.close-btn {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--textco);
}
.main-grid { width:70%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 1rem auto; }
.main-card p{color:var(--textco);}
.main-card h3{margin-bottom:0;}
.main-card-img-wrapper { width: 25%; margin: 0 auto; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--whiteco); border-radius:2rem;}

.hero-card {
    width: 70%; /* Or whatever width you decide for the main-card */
    margin: 0 auto 2rem auto;
    border-radius: 2rem;
    overflow: hidden; 
    background-image: url('/static/OG-IMAGESHOP.png');
    background-size: cover;
    background-position: center;
    background-size: 100% 100%;  
    background-position: center;
    background-repeat: no-repeat;
    aspect-ratio: 1200 / 630; 
    display: flex;
    flex-direction: column;
    justify-content: space-between; 
    padding: 3rem; 
    box-sizing: border-box;
}
.hero-text-top {text-align: left; color:black;}
.hero-text-bottom {text-align: right; align-self: flex-end;}

/* For browsers that don't support aspect-ratio yet, 
   a height of 'auto' and a min-height can be a fallback */
.shop-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 0.1rem; margin-top: 1rem; }
.shop-card { align-items: flex-start; height: 100%; }
.shop-card h3 {text-align: center; margin:0 auto; font-size:0.8rem;}
.shop-card-img-wrapper { width: 100%; height: 5rem; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--whiteco); border-radius:1rem;}
.shop-card-img { width: 100%; height: 100%; object-fit: contain; object-position: center;}
.shop-card-body {padding: 0.1rem; display: flex; flex-direction: column; width: 100%; flex: 1; align-items: center;}
.shop-btn-row { display: inline-block; gap: 1rem; margin-top: auto; border-top: none; border-bottom: none; }
.shop-btn-row .btn, .shop-btn-row .btn-rev{font-size:0.7rem;}

.painting-detail-layout {display: flex; gap: 2rem; margin: 2rem 0;}
.painting-detail-image {flex: 1; width: 70%; }
/* .painting-detail-image img {width: 100%; height:auto; object-fit: contain; box-shadow: 0 0.5rem 2rem rgba(0,0,0,0.3);} */
.painting-detail-image img {
    width: auto;
    max-width: 100%;
    height: auto;
    object-fit: contain;
    box-shadow: 0 0.5rem 2rem rgba(0,0,0,0.3);
}
.painting-detail-info {
    width: 30%;
    height:auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.price {font-size: 1.25rem; color: var(--brandco); font-weight: bold;}
.purchase-row {display: flex; align-items: center; gap: 1rem; margin: 0 auto; margin-bottom:1rem;}
.purchase-row p {margin: 0;font-size: 1rem; text-align:left;}
.purchase-row form {margin: 0;}

.footer-container{width:100%; background:var(--backco);}
.form-container {
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  margin:2rem auto;
  text-align: center;
}
.form-container p {
  font-size: 0.75rem;
  margin: 0.25rem 0;
  color: var(--textco);
  align-self: center;
  cursor: pointer;
  user-select: none;
}
.social-buttons {
  display: inline-flex;
  align-items: center;
  background-color: var(--whiteco);  /* white background pill */
  border-radius: 2rem;             /* large pill shape */
  padding: 0.5rem 1rem;            /* padding inside pill */
  gap: 1.5rem;                    /* space between icons */
  justify-content: center;
  width: fit-content;
  align-self: center;
  margin: 0 auto;
}
.icon-small {
  width: 1.5rem;
  height: 1.5rem;
  font-size: 1.5rem;
  margin: 0; /* no margin needed since icon centered */
  display: block; /* better control */
}
.header-container-main {
  display:flex; 
  align-items:center; 
  justify-content:center; 
  gap: 1rem; 
  width: 50%; 
  text-align: center; 
  margin: 1rem auto;
}
.header-container-main > * {flex-shrink: 0; margin: 0; vertical-align: middle;}
.header-container-main a {display: flex;align-items: center;gap: 1rem;text-decoration: none;color: inherit;}










/* STORE PREVIEW ON INDEX PAGE (vertical screens only) */
html { font-size: 16px; }
#store-preview {display: none; padding: 2rem; background: var(--whiteco);}
@media (max-aspect-ratio: 1/1) {
  #store-preview {display: block;}
}
/* MOBILE RESPONSIVENESS */
@media (max-width: 1365px) {
  html { font-size: 14px; }
}
@media (max-width: 1000px) {
  html { font-size: 10px; }
  .logo-section {flex-direction: column; align-items: center; padding: 0.25rem 0.25rem; gap: 0.25rem;}
  .logo-row { flex-wrap: wrap; justify-content: center; }
  .shop-grid { grid-template-columns: repeat(3, 1fr);}
  .shop-card-img-wrapper { height: 10rem;}

  .painting-detail-layout {flex-direction: column;}
  .painting-detail-image, .painting-detail-info {max-width: 100%;}
  .hero-card {width: 100%;padding: 1.5rem;}
}