:root{
  --bg: #fbf9f6;
  --muted: #766359;
  --accent: #c97b66;
  --card: #fff;
  --max-width: 1100px;
}
*{box-sizing:border-box}
body{font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; margin:0; background:var(--bg); color:#222}
.container{max-width:var(--max-width); margin:0 auto; padding:1rem}
.site-header{background:transparent; padding:1rem 0}
.header-inner{display:flex; justify-content:space-between; align-items:center}
.logo{font-family:Georgia, serif; margin:0; color:var(--muted)}
.main-nav a{margin-left:1rem; color:var(--muted); text-decoration:none}
.hero{position:relative; padding:0}
.hero-carousel{height:420px; background:transparent; border-radius:0; overflow:hidden; position:relative}
.hero-static{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background-image:url("Example Pics/Acrylic -- Birches.jpg"); background-size:cover; background-position:center right; background-repeat:no-repeat; z-index:1}
.hero-main{width:auto; max-width:480px; max-height:88%; display:block; border-radius:8px; background:transparent; box-shadow:0 12px 36px rgba(0,0,0,0.18); z-index:2}
.hero-inset{position:absolute; right:1rem; bottom:1rem; width:165px; height:105px; object-fit:cover; border-radius:6px; box-shadow:0 6px 18px rgba(0,0,0,0.16); border:5px solid rgba(255,255,255,0.9)}
.hero-slide{min-width:100%; flex:0 0 100%; display:flex; align-items:flex-end; justify-content:flex-start; background-size:cover; background-position:center; padding:1.5rem}
.hero-slide{position:relative}
.hero-slide img{width:100%; height:100%; object-fit:cover; display:block}
.hero-caption-overlay{position:absolute; left:1rem; bottom:1rem; background:linear-gradient(transparent, rgba(0,0,0,0.25)); color:#fff; padding:.6rem .8rem; border-radius:6px}
.hero-caption{margin-top:.75rem; text-align:left}
.hero-caption h2{margin:0; font-size:1.6rem; color:var(--muted)}

.hero-track{width:100%;}
.hero-track, .hero-slide{height:100%}
.hero-dots{display:flex; gap:.5rem; justify-content:center; margin:0; position:absolute; left:50%; transform:translateX(-50%); bottom:10px; z-index:5}
.hero-dot{width:12px; height:12px; border-radius:50%; border:0; background:rgba(255,255,255,0.6); padding:0; cursor:pointer}
.hero-dot.active{background:var(--accent)}

.gallery-section h2{margin-top:0}
.filters{background:rgba(255,255,255,0.7); padding:.75rem; border-radius:8px; margin-bottom:1rem}
.filter-row{display:flex; flex-wrap:wrap; gap:.75rem; align-items:center}
.filter-row label{display:flex; align-items:center; gap:.5rem; background:var(--card); padding:.45rem .6rem; border-radius:8px; border:1px solid rgba(0,0,0,0.04); font-size:.95rem; color:var(--muted)}
.filter-row select, .filter-row input[type=range]{margin-left:0; background:transparent; border:0; font-size:0.95rem; color:var(--muted)}
.filter-row select:focus{outline:none}
.filter-actions{margin-top:.5rem}
.filter-actions button{background:var(--accent); color:#fff; border:0; padding:.5rem 1rem; border-radius:6px}

.gallery-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:1rem; margin-top:1rem}
.gallery-grid{transition:max-height 300ms ease;}
.gallery-controls{margin-top:.75rem; text-align:center}
.gallery-controls button{background:var(--accent); color:#fff; border:0; padding:.5rem 1rem; border-radius:6px; cursor:pointer}
.gallery-controls button + button{margin-left:.5rem}
.card{background:var(--card); border-radius:8px; overflow:hidden; box-shadow:0 4px 12px rgba(0,0,0,0.06)}
.card img{width:100%; height:200px; object-fit:cover; display:block}
.card-body{padding:.6rem}
.card-title{font-weight:600; margin:0 0 .25rem}
.card-meta{font-size:.85rem; color:var(--muted); display:flex; justify-content:space-between}

/* cart icon inside gallery card */
.card { position: relative }
.cart-btn{position:absolute; right:8px; top:8px; width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,0.9); border:0; display:flex; align-items:center; justify-content:center; color:rgba(0,0,0,0.35); cursor:pointer; box-shadow:0 6px 18px rgba(0,0,0,0.08)}
.cart-btn.selected{ background:var(--accent); color:#fff }
.cart-btn svg{width:18px; height:18px}

/* order form styling */
.order-form{background:var(--card); padding:1rem; border-radius:8px; box-shadow:0 8px 24px rgba(0,0,0,0.06); margin-top:1rem}
.order-form h3{margin:0 0 .5rem}
.order-items{min-height:56px; margin-bottom:.75rem; border:1px dashed rgba(0,0,0,0.06); padding:.5rem; border-radius:6px}
.order-item{display:flex; justify-content:space-between; align-items:center; padding:.35rem .4rem; border-radius:6px; background:rgba(0,0,0,0.02); margin-bottom:.35rem}
.order-item .remove{background:transparent; border:0; color:var(--muted); cursor:pointer}
.order-fields{display:grid; grid-template-columns:1fr 1fr; gap:.5rem; margin-bottom:.5rem}
.order-fields label{display:block}
.order-fields input, .order-fields textarea{width:100%; padding:.45rem; border-radius:6px; border:1px solid rgba(0,0,0,0.06)}

/* add space between label text and input/textarea */
.order-fields label input, .order-fields label textarea{margin-top:.45rem}
.order-actions{text-align:right}
.order-actions button{background:var(--accent); color:#fff; border:0; padding:.6rem 1rem; border-radius:6px}

@media (max-width:720px){
  .order-fields{grid-template-columns:1fr}
}

.events-grid{display:grid; grid-template-columns:1fr 300px; gap:1rem; align-items:start}
.events-left .calendar{background:var(--card); padding:1rem; border-radius:8px}
.events-left h2{margin:0 0 .5rem 0}
.upcoming{width:100%;}

.shops-list{list-style:none; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:1rem}
.shops-list li{background:var(--card); padding:.8rem; border-radius:8px}
/* shop photos shown in shop cards */
.shop-photos{display:flex; gap:.5rem; margin-bottom:.5rem}
.shop-photo{width:100px; height:70px; object-fit:cover; border-radius:8px; box-shadow:0 4px 10px rgba(0,0,0,0.06)}

/* display photos shown below the In Person boxes */
.shop-display-photos{display:flex; flex-direction:column; gap:.75rem; margin-top:1rem; align-items:flex-start; margin-left:0; padding-left:0}
.shop-display-row{display:flex; gap:.75rem; justify-content:flex-start; align-items:flex-start}
.shop-display-thumb{border-radius:12px; object-fit:cover; box-shadow:0 8px 28px rgba(0,0,0,0.12); display:block}
.order-total{ text-align:right; padding-top:.5rem }

.payments{display:flex; gap:1rem; margin:1rem 0}
.btn{display:inline-block; padding:.6rem 1rem; border-radius:6px; text-decoration:none; color:#fff}
.venmo{background:#3d95ce}
.paypal{background:#003087}

.site-footer{padding:2rem 0; text-align:center; color:var(--muted)}

/* Lightbox modal */
.lightbox-overlay{position:fixed; inset:0; background:rgba(0,0,0,0.75); display:flex; align-items:center; justify-content:center; z-index:2000; padding:2rem}
.lightbox-container{display:flex; flex-direction:column; gap:12px; align-items:center}
.lightbox-image-panel{background:#fff; border-radius:8px; overflow:hidden; box-shadow:0 12px 40px rgba(0,0,0,0.5)}
.lightbox-image-panel img{display:block; max-width:100%; max-height:70vh}
.lightbox-info-panel{background:#ffffff; background-color:#ffffff !important; border-radius:8px; box-shadow:0 8px 30px rgba(0,0,0,0.12); width:min(900px,90%); box-sizing:border-box; color:inherit; background-clip:padding-box; border:1px solid rgba(0,0,0,0.03); overflow:hidden}
.lightbox-info-panel .card-body{padding:.6rem; background:transparent !important}
.lightbox-info-panel .card-title{font-weight:600; margin:0; color:#222}
.lightbox-info-panel .card-meta{font-size:.85rem; color:var(--muted); display:flex; justify-content:space-between; padding-top:.25rem}
.lightbox-info-panel .card-meta .left{ text-align:left }
.lightbox-info-panel .card-meta .right{ text-align:right; font-weight:700 }
.lightbox-overlay .close-btn{background:#fff; border:0; color:#222; font-size:12px; cursor:pointer; width:20px; height:20px; display:flex; align-items:center; justify-content:center; border-radius:50%; box-shadow:0 8px 20px rgba(0,0,0,0.18); position:fixed}

/* click "pop" animations for buttons and modal elements */
button, .btn, .gallery-controls button, .lightbox-overlay .close-btn{transition:transform 140ms cubic-bezier(.2,.7,.2,1); will-change:transform}
button:active, .btn:active, .gallery-controls button:active, .lightbox-overlay .close-btn:active{transform:scale(0.9)}

/* slight pop for clickable modal elements */
.lightbox-image-panel img, .lightbox-info-panel .card-body, .card{transition:transform 120ms cubic-bezier(.2,.7,.2,1); will-change:transform}
.lightbox-image-panel img:active, .lightbox-info-panel .card-body:active, .card:active{transform:scale(0.98)}

/* responsive tweaks */
@media (max-width:720px){
  .filter-row{flex-direction:column; align-items:stretch}
  .events-layout{flex-direction:column}
  .hero-carousel{height:220px}
  .hero-main{max-width:260px}

  /* Mobile: stack the business-card inset above the main portrait (avoid overlapping behind) */
  .hero-static{display:flex; flex-direction:column; justify-content:flex-start; align-items:center; background-position:center center}
  .hero-inset{position:static; right:auto; bottom:auto; margin:10px 0; width:140px; height:auto; object-fit:cover; border-width:4px}
  .hero-main{z-index:2}

  /* Mobile header: site title on its own line, nav links arranged horizontally beneath */
  .header-inner{flex-direction:column; align-items:flex-start; gap:.25rem}
  .logo{display:block; width:100%; margin:0 0 .25rem 0}
  .main-nav{display:flex; gap:.5rem; align-items:center; overflow-x:auto; flex-wrap:nowrap; white-space:nowrap}
  .main-nav a{display:inline-block; padding:.35rem .45rem; font-size:.95rem; margin-left:0}

  /* Gallery: single column for easier scrolling on mobile */
  .gallery-grid{grid-template-columns:repeat(1,1fr); gap:.375rem}
  /* reduce space around gallery controls so sections sit closer on mobile */
  .gallery-controls{margin-top:.375rem; margin-bottom:.375rem}
  .card img{height:180px; object-fit:cover; object-position:center top}

  /* Larger touch targets for cart buttons on mobile */
  .cart-btn{width:44px; height:44px; right:10px; top:10px}
  .cart-btn svg{width:20px; height:20px}

  /* Shop display thumbnails: wrap into multiple rows and reduce height */
  .shop-display-row{flex-wrap:wrap}
  .shop-display-thumb{height:100px; width:auto}

  /* Mobile-only: center Browse In Person photos, show only 4 pics, and size them */
  .shop-display-photos{align-items:center; justify-content:center}
  .shop-display-row{justify-content:center}
  /* hide the first (Revived 2) image on mobile so only four images remain */
  .shop-display-photos .shop-display-row:first-child img:first-child{display:none}
  /* Force top row two images to share the row on mobile by overriding inline sizing applied by JS */
  .shop-display-photos .shop-display-row:first-child img{width:48% !important; height:auto !important; object-fit:cover}
  /* bottom row: stack the two remaining images full-width (one per line) */
  .shop-display-photos .shop-display-row:last-child{flex-direction:column; gap:.5rem; align-items:center}
  .shop-display-photos .shop-display-row:last-child img{width:100% !important; height:auto !important; object-fit:cover}

  /* Lightbox: stacked, full-width image with info below for mobile */
  .lightbox-overlay{padding:1rem}
  .lightbox-container{align-items:stretch}
  .lightbox-image-panel img{max-height:60vh; width:100%; height:auto; object-fit:contain}
  .lightbox-info-panel{width:100%; box-shadow:none; border-radius:8px; margin-top:.5rem}
  /* Events: make the events section full-bleed and stack columns on mobile only */
  .events-section.container{width:100vw; max-width:100vw; margin:0; left:50%; transform:translateX(-50%); position:relative; padding:1rem}
  .events-grid{grid-template-columns:1fr; gap:.375rem}
  .events-grid > *{width:100%}
  .events-left .calendar, .upcoming{width:100%}
  /* tighten gap between events and the following shops section */
  .events-section.container{margin-bottom:.375rem}
  .shops-section.container{margin-top:.375rem}
  /* Filters layout: Medium + Color on one row, Price below (mobile-only) */
  .filter-row{display:grid; grid-template-columns:1fr 1fr; gap:.5rem; align-items:center}
  .filter-row label:nth-of-type(3){grid-column:1 / -1}
  #filter-price{width:100%}
}

.events-grid h3{margin:0 0 .5rem 0}
.events-left .calendar, .upcoming{display:flex; flex-direction:column}