/* ------------------------- */
/* Global styles and resets */
/* ------------------------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Arial', sans-serif;
  line-height: 1.6;
  color: #333;
  background-color: #f8f8f8;
}

/* ------------------------- */
/* Hero Section Styles */
/* ------------------------- */
.hero-bg {
  background-image: url('/images/hero_background.png');
  background-size: cover;
  background-position: center;
  min-height: 100vh;
  position: relative;
}

.art-image{
  background-image: url("/images/hand_paintbrush.webp");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.screen-overlay {
  background: rgba(9, 10, 24, 0.55);
}

.glass {
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}



/* ------------------------- */
/* Header / Navigation Styles */
/* ------------------------- */


header {
  transition: background-color 0.3s, box-shadow 0.3s;
}

header.scrolled {
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 6px 18px rgba(2, 6, 23, 0.08);
}

header.scrolled a,
header.scrolled span,
header.scrolled .logo-text,
header.scrolled #navToggle {
  color: #303e7a !important;
}


header * {
  transition: color 0.3s ease;
}


ul {
  list-style-type: none;
}

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

/* -------------------------------------- */
/* Smooth Shrinking Header on Scroll      */
/* -------------------------------------- */

#siteHeader {
  height: 96px;               /* default height */
  transition: height 0.35s ease, background-color 0.35s ease, box-shadow 0.35s ease;
}

#siteHeader.scrolled {
  height: 70px;               /* shrink height */
}

/* Logo shrink */
#siteHeader .logo-container {
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

#siteHeader.scrolled .logo-container {
  transform: scale(0.78);
}

/* Logo image shrink */
#siteHeader .logo-img {
  transition: width 0.35s ease, height 0.35s ease, filter 0.35s ease;
}

#siteHeader.scrolled .logo-img {
  width: 52px;
  height: 52px;
  filter: brightness(0.9);
}

/* Nav text scaling */
#siteHeader nav a,
#siteHeader nav span {
  transition: font-size 0.35s ease, color 0.35s ease, opacity 0.35s ease;
}

#siteHeader.scrolled nav a,
#siteHeader.scrolled nav span {
  font-size: 0.95rem;
}






 /* Glowing Glass Effect */
@keyframes glowAnimation {
  0% {
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5), 0 0 20px rgba(255, 255, 255, 0.4), 0 0 30px rgba(255, 255, 255, 0.3);
  }
  50% {
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.7), 0 0 30px rgba(255, 255, 255, 0.5), 0 0 40px rgba(255, 255, 255, 0.4);
  }
  100% {
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5), 0 0 20px rgba(255, 255, 255, 0.4), 0 0 30px rgba(255, 255, 255, 0.3);
  }
}

/* Logo and Text Glow Effect */
.logo-container:hover .logo-img,
.logo-container:hover .logo-text {
  animation: glowAnimation 2s infinite ease-in-out;
}

/* Custom Glow Shadow */
.shadow-glow {
  box-shadow: 0 0 10px rgba(48, 62, 122, 0.8), 0 0 30px rgba(48, 62, 122, 0.6), 0 0 50px rgba(48, 62, 122, 0.4);
}

/* Text Hover Glow */
.logo-text:hover {
  color: #fff;
  text-shadow: 0 0 10px #6a4fff, 0 0 20px #6a4fff, 0 0 30px #6a4fff;
}

/* Hover effect for the logo */
.logo-img:hover {
  transform: scale(1.2);
  transition: transform 0.3s ease-in-out;
}




.logo-img {
  filter: drop-shadow(0 0 12px #303e7a);
}



/* ------------------------- */
/* Section Styles */
/* ------------------------- */
section {
  padding: 3rem 0;
}

.bg-white {
  background-color: white;
}

.bg-slate-50 {
  background-color: #f8fafc;
}

.text-slate-600 {
  color: #4b5563;
}

.text-slate-500 {
  color: #6b7280;
}

.text-slate-700 {
  color: #374151;
}

.text-indigo-600 {
  color: #4c51bf;
}

.text-indigo-700 {
  color: #3b82f6;
}

/* ------------------------- */
/* Footer Styles */
/* ------------------------- */
footer {
  padding: 3rem 0;
  background-color: white;
  border-top: 1px solid #e5e7eb;
}

footer .text-slate-700 {
  color: #374151;
}

footer .text-indigo-700 {
  color: #3b82f6;
}

footer .text-slate-500 {
  color: #6b7280;
}

footer .flex {
  display: flex;
}

footer .gap-4 {
  gap: 1rem;
}

footer .items-center {
  align-items: center;
}

footer .justify-between {
  justify-content: space-between;
}




/* ===== footer layout: left (social+copyright) | right (dev credit bottom) ===== */
.site-footer {
  display: flex;
  justify-content: space-between;
  align-items: stretch;   /* make children fill footer height */
  gap: 20px;
  width: 100%;
  padding: 28px 40px;
  background: #111;
  color: #fff;
  box-sizing: border-box;
  min-height: 84px;       /* ensures there's height to align to bottom */
}

/* make left & right full height columns */
.site-footer > .footer-left,
.site-footer > .footer-right {
  display: flex;
  flex-direction: column;
  height: 100%;           /* crucial: take full height from parent */
  box-sizing: border-box;
}

/* LEFT COLUMN: stack social icons on top, copyright at bottom */
.footer-left {
  justify-content: space-between; /* social at top, copy at bottom */
  gap: 12px;
}

/* social row stays at the top */
.footer-social {
  display: flex;
  gap: 14px;
  align-items: center;    /* icon vertical centering inside its row */
}

/* copyright sits at bottom because of space-between */
.footer-copy {
  margin: 0;
  font-size: 14px;
  opacity: 0.85;
}

/* RIGHT COLUMN: push dev credit to bottom */
.footer-right {
  display: flex;
    flex-direction: column;
  justify-content: flex-end !important; /* force content to the bottom */
  align-items: flex-end !important;     /* right-align the text */
}

/* dev credit element */
.footer-dev {
  margin: auto;
  font-size: 14px;
  opacity: 0.85;
  padding-bottom: 2px;      /* nudge for pixel-perfect alignment */
}

/* ICON STYLING */
.social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #fff;
  transition: transform .18s ease, color .18s ease;
}
.social-icon:hover {
  transform: scale(1.12);
  color: #303e7a;
}

/* RESPONSIVE: stack vertically on small screens */
@media (max-width: 768px) {
  .site-footer {
    flex-direction: column;
    align-items: center;
    min-height: auto;
    padding: 24px 18px;
    text-align: center;
  }

  .site-footer > .footer-left,
  .site-footer > .footer-right {
    height: auto;
    width: 100%;
    flex-direction: column;
  }

  .footer-left {
    justify-content: center;
    gap: 10px;
    margin-bottom: 8px;
  }

  .footer-right {
    justify-content: center;
    align-items: center;
  }
}




/* =========================================================
   NAVBAR CLEANUP + NAV LINKS
   ========================================================= */

#siteHeader{
  height: 88px;
  transition: height 0.35s ease, background-color 0.35s ease, box-shadow 0.35s ease;
}

#siteHeader.scrolled{ height: 66px; }

#siteHeader nav{ height: 100%; }

#siteHeader .logo-container{
  width: 64px;
  height: 64px;
  border-radius: 999px;
}

#siteHeader .logo-img{
  width: 52px;
  height: 52px;
}

#siteHeader.scrolled .logo-container{ transform: scale(0.86); }

.nav-link{
  position: relative;
  font-weight: 700;
  font-size: 0.88rem;
  letter-spacing: 0.06em;
  opacity: 0.92;
  text-decoration: none;
}

.nav-link:hover{ opacity: 1; }

.nav-link::after{
  content:"";
  position:absolute;
  left: 0;
  right: 0;
  bottom: -10px;
  height: 2px;
  border-radius: 999px;
  background: rgba(255,255,255,0.7);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 200ms ease, background 200ms ease;
}

header.scrolled .nav-link::after{ background: rgba(48, 62, 122, 0.55); }

.nav-link:hover::after{ transform: scaleX(1); }


/* =========================================================
   ORDER FORM VALIDATION (NO MODAL)
   ========================================================= */

.field-error{
  border-color: rgba(220, 38, 38, 0.9) !important;
  box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.15) !important;
}

.field-error:focus{
  outline: none !important;
  border-color: rgba(220, 38, 38, 1) !important;
  box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.18) !important;
}

.field-error-box{
  border: 1px solid rgba(220, 38, 38, 0.65) !important;
  box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.10) !important;
  border-radius: 12px;
  padding: 10px;
}


/* =========================================================
   SHOW MAP EMBED (IFRAME)
   ========================================================= */

.show-image{
  margin-top: 6px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(15,23,42,.08);
  background: #fff;
}
.show-image img{
  width: 100%;
  height: 170px;
  object-fit: cover;
  display: block;
}

.show-map{
  margin-top: 14px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(148,163,184,.22);
  background: rgba(248,250,252,1);
}

.show-map iframe{
  display: block;
}


/* =========================================================
   MOBILE MENU DRAWER
   ========================================================= */

body.mobile-menu-open{ overflow: hidden; }

.mobile-menu.hidden{ display:none; }
.mobile-menu-overlay.hidden{ display:none; }


.mobile-menu-overlay{
  position: fixed;
  inset: 0;
  background: rgba(2, 6, 23, 0.55);
  opacity: 0;
  transition: opacity 200ms ease;
  z-index: 70;
}
.mobile-menu-overlay.is-open{ opacity: 1; }

.mobile-menu{
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: min(360px, 86vw);
  background: rgba(15, 23, 42, 0.98);
  color: #fff;
  transform: translateX(105%);
  transition: transform 200ms ease;
  z-index: 80;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
  display: flex;
  flex-direction: column;
}
.mobile-menu.is-open{ transform: translateX(0); }

.mobile-menu-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 18px 14px;
  border-bottom: 1px solid rgba(148,163,184,.22);
}
.mobile-menu-title{ font-weight: 700; letter-spacing: .02em; }
.mobile-menu-close{
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(148,163,184,.24);
  background: rgba(255,255,255,.06);
  color: #fff;
}
.mobile-menu-close:hover{ background: rgba(255,255,255,.12); }

.mobile-menu-links{
  padding: 12px 10px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mobile-menu-link{
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(148,163,184,.16);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.92);
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .02em;
}
.mobile-menu-link:hover{ background: rgba(255,255,255,.10); }

.mobile-menu-admin{
  margin-top: 10px;
  border-color: rgba(99,102,241,.55);
  background: rgba(99,102,241,.18);
}








/* =========================================================
   PRODUCT GALLERY GRID (6 per row desktop)
   ========================================================= */
.product-grid{
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  align-items: stretch;
}
@media (min-width: 1280px){
  .product-grid{
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

.product-card-qty{
  width: 74px;
}

/* =========================================================
   PRODUCT CARD: THUMB STRIP CAROUSEL
   ========================================================= */
.product-card-media{ background: #f1f5f9; }

.product-card-strip{
  display: flex;
  gap: 10px;
  padding: 10px 12px;
  background: #fff;
  border-top: 1px solid rgba(148,163,184,.25);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

/* hide scrollbar (webkit) */
.product-card-strip::-webkit-scrollbar{ height: 10px; }
.product-card-strip::-webkit-scrollbar-thumb{ background: rgba(148,163,184,.25); border-radius: 999px; }

.product-card-thumb{
  flex: 0 0 auto;
  width: 56px;
  height: 42px;
  padding: 0;
  border-radius: 12px;
  border: 1px solid rgba(148,163,184,.35);
  background: #fff;
  overflow: hidden;
  cursor: pointer;
  opacity: .85;
  scroll-snap-align: start;
  transition: transform .12s ease, opacity .12s ease, border-color .12s ease, box-shadow .12s ease;
}

.product-card-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.product-card-thumb:hover{ opacity: 1; transform: translateY(-1px); }
.product-card-thumb.is-active{
  opacity: 1;
  border-color: rgba(99,102,241,.8);
  box-shadow: 0 0 0 3px rgba(99,102,241,.18);
}

.product-card-thumb:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px rgba(99,102,241,.25);
  border-color: rgba(99,102,241,.9);
}

/* Make main image feel clickable (fullscreen) */
.product-card-mainimg{ cursor: zoom-in; }

/* =========================================================
   ORDER LIST: remove button
   ========================================================= */
.order-item-remove{
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(148,163,184,.35);
  background: rgba(255,255,255,.9);
  color: rgba(30,41,59,.85);
  font-size: 16px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.order-item-remove:hover{
  background: #fff;
  border-color: rgba(99,102,241,.55);
  transform: translateY(-1px);
}

/* =========================================================
   IMAGE LIGHTBOX (fullscreen photo with X to close)
   ========================================================= */
body.lightbox-open{ overflow: hidden; }

.img-lightbox{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
}
.img-lightbox.hidden{ display: none; }

.img-lightbox-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(2,6,23,.82);
}

.img-lightbox-content{
  position: relative;
  z-index: 1;
  max-width: min(1100px, 96vw);
  max-height: min(86vh, 900px);
  display: grid;
  place-items: center;
}

.img-lightbox-img{
  max-width: 100%;
  max-height: 100%;
  border-radius: 18px;
  box-shadow: 0 30px 80px rgba(0,0,0,.55);
  background: rgba(255,255,255,.06);
}

.img-lightbox-close{
  position: absolute;
  top: -12px;
  right: -12px;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,.35);
  background: rgba(15,23,42,.92);
  color: rgba(255,255,255,.92);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
}
.img-lightbox-close:hover{ background: rgba(15,23,42,.98); }


/* =========================================
   PRODUCT GALLERY: CARD SIZE (COLUMNS)
   ========================================= */

/* Card size toggle UI */
.gallery-size-toggle{
  display:flex;
  align-items:center;
  gap:.35rem;
  padding:.45rem .6rem;
  border:1px solid rgba(226,232,240,1);
  background:#fff;
  border-radius:999px;
}
.gallery-size-toggle .label{
  font-size:.875rem;
  color: rgba(71,85,105,1);
  margin-right:.15rem;
  white-space:nowrap;
}
.gallery-size-toggle button{
  appearance:none;
  border:1px solid transparent;
  background:transparent;
  color: rgba(51,65,85,1);
  font-size:.85rem;
  line-height:1;
  padding:.45rem .7rem;
  border-radius:999px;
  cursor:pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.gallery-size-toggle button:hover{
  background: rgba(99,102,241,.08);
}
.gallery-size-toggle button.is-active{
  background: rgba(99,102,241,.14);
  border-color: rgba(99,102,241,.28);
  color: rgba(67,56,202,1);
}

/* Desktop column control via class on #galleryGrid */
@media (min-width: 1024px){
  #galleryGrid.cardsize-large{ grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  #galleryGrid.cardsize-medium{ grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  #galleryGrid.cardsize-small{ grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
}

/* =========================================================
   PRODUCT CARDS: EQUAL HEIGHT + STICKY FOOTER
   ========================================================= */

#galleryGrid{ align-items: stretch; }

.product-card{
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;

  border-radius: 18px;
  border: 1px solid rgba(226,232,240, 1); /* slate-200 */
  background: #ffffff;
  box-shadow: 0 2px 10px rgba(2,6,23,.06);
  text-align: left;
}

.product-card-body{
  padding: 16px;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

.product-card-footer{
  margin-top: auto;
  padding-top: 14px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  border-top: 1px solid rgba(148,163,184,.22);
}

.product-card-mainimg{ cursor: zoom-in; }
.product-card-thumb img{ cursor: zoom-in; }


/* =========================================================
   IMAGE LIGHTBOX: iOS-SAFE FULLSCREEN (prevents clipping)
   ========================================================= */

.img-lightbox{
  height: 100dvh;
  width: 100vw;
}

@supports not (height: 100dvh){
  .img-lightbox{ height: 100vh; }
}

.img-lightbox-content{
  width: min(1100px, 96vw);
  max-height: 92dvh;
}

.img-lightbox-img{
  max-height: 92dvh;
  object-fit: contain;
}

.img-lightbox-close{
  top: 12px;
  right: 12px;
}