/* ============================================================
   Adi Goldstein Photography — 2026 refresh
   Hover captions/polish · scroll reveal · dark theme · type + mobile
   Designed to preserve the minimal black-and-white aesthetic.
   ============================================================ */

/* ---------- 1. GRID POLISH + HOVER ---------- */
#slideshow{column-gap:18px !important;}
#slideshow .slide{
  margin-bottom:18px !important;
  box-shadow:0 1px 3px rgba(0,0,0,.07);
  transition:box-shadow .4s ease, transform .4s cubic-bezier(.2,.7,.2,1) !important;
}
#slideshow .slide:hover{box-shadow:0 16px 40px rgba(0,0,0,.20); transform:translateY(-4px) !important;}
#slideshow .slide::after{ /* soft gradient + zoom hint on hover */
  content:"⤢"; position:absolute; right:12px; bottom:10px;
  color:#fff; font-size:18px; line-height:1; opacity:0; z-index:2;
  text-shadow:0 1px 6px rgba(0,0,0,.6); transition:opacity .35s ease; pointer-events:none;
}
#slideshow .slide::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(to top, rgba(0,0,0,.40), rgba(0,0,0,0) 42%);
  opacity:0; transition:opacity .4s ease;
}
#slideshow .slide:hover::after,#slideshow .slide:hover::before{opacity:1;}

/* shop product cards: gentle lift on hover */
.ProductList-item,.product-list .grid-item,.summary-item,a.grid-item{transition:transform .35s ease;}
.ProductList-item:hover,.product-list .grid-item:hover,.summary-item:hover,a.grid-item:hover{transform:translateY(-4px);}

/* Buy Prints thumbnails: force a sharp, centered cover-crop independent of
   Squarespace's image-loader JS (which mis-sizes/crops them on some screens). */
.product-image,.product-image .intrinsic{position:relative !important;overflow:hidden !important;}
/* Square box with a REAL height from pure CSS so thumbnails appear on first
   paint (no Squarespace layout JS, no refresh needed). */
.product-image .intrinsic{aspect-ratio:1/1 !important;padding-bottom:0 !important;height:auto !important;width:100% !important;display:block !important;}
.product-image .intrinsic > *{position:absolute !important;inset:0 !important;width:100% !important;height:100% !important;margin:0 !important;}
.product-image img{
  position:absolute !important;inset:0 !important;left:0 !important;top:0 !important;
  width:100% !important;height:100% !important;max-width:none !important;min-height:0 !important;
  margin:0 !important;object-fit:cover !important;object-position:center !important;
  image-rendering:auto !important;
}

/* Product DETAIL main image is now a single clean <img> (the fragile
   slideshow is removed at build time): always the whole photo, natural
   aspect, on first paint — no JS, no zoom, no refresh. */
/* Keep the template's two-column proportions: #productGallery is width:48.5%;
   float:left. Don't override its width — only make the image fill it. */
.agp-clean-gallery{line-height:0 !important;}
.agp-main-photo{
  display:block !important;width:100% !important;height:auto !important;
  max-width:100% !important;margin:0 !important;object-fit:contain !important;cursor:zoom-in;
}

/* Legacy slideshow fallback (only if a page wasn't simplified). */
body.view-item.collection-type-products .intrinsic{padding-bottom:0 !important;height:auto !important;}
body.view-item.collection-type-products .intrinsic .wrapper,
body.view-item.collection-type-products .intrinsic .wrapper > div,
body.view-item.collection-type-products .intrinsic .wrapper .slide{
  position:relative !important;height:auto !important;width:100% !important;display:block !important;
  inset:auto !important;top:auto !important;left:auto !important;transform:none !important;
}
body.view-item.collection-type-products .intrinsic .wrapper .slide img{
  position:relative !important;top:auto !important;left:auto !important;inset:auto !important;
  width:100% !important;height:auto !important;max-width:100% !important;max-height:none !important;
  margin:0 !important;object-fit:contain !important;object-position:center !important;
}

/* Add to Cart: ALWAYS visible & prominent. Squarespace's commerce JS hides it
   for "unavailable"/unselected variants — irrelevant here (it opens the Contact
   Me form), so force it to stay on every product. */
.sqs-add-to-cart-button-wrapper,
.product-form .sqs-add-to-cart-button-wrapper,
.ProductItem-details .sqs-add-to-cart-button-wrapper{
  display:block !important;visibility:visible !important;opacity:1 !important;
  height:auto !important;margin-top:8px !important;
}
.sqs-add-to-cart-button{
  display:block !important;visibility:visible !important;opacity:1 !important;pointer-events:auto !important;
  box-sizing:border-box !important;width:100% !important;max-width:360px !important;
  height:auto !important;min-height:0 !important;line-height:1.2 !important;
  padding:15px 26px !important;font-size:13px !important;letter-spacing:.14em !important;
  text-transform:uppercase;border-radius:3px;text-align:center;cursor:pointer;
}
.sqs-add-to-cart-button-inner{line-height:1.2 !important;}
html.agp-dark .sqs-add-to-cart-button{background:#fff !important;color:#111 !important;}
html:not(.agp-dark) .sqs-add-to-cart-button{background:#111 !important;color:#fff !important;}
/* hide "sold out / unavailable" markers that replace the button */
.product-mark.sold-out,.product-form .sold-out,.sqs-money-native + .sold-out{display:none !important;}

/* Blog post galleries: lay images out as a clean grid (the gallery JS that
   positions them doesn't run offline, so they overlap/crop otherwise). */
.collection-type-blog .sqs-gallery{
  display:block !important;position:static !important;height:auto !important;min-height:0 !important;
  column-width:300px;column-gap:12px;overflow:visible !important;
}
.collection-type-blog .sqs-gallery .slide{
  position:relative !important;display:block !important;float:none !important;
  width:100% !important;height:auto !important;left:auto !important;top:auto !important;
  margin:0 0 12px !important;opacity:1 !important;break-inside:avoid;-webkit-column-break-inside:avoid;
}
.collection-type-blog .sqs-gallery .slide .margin-wrapper,
.collection-type-blog .sqs-gallery .slide a,
.collection-type-blog .sqs-gallery .slide .intrinsic{
  position:static !important;width:100% !important;height:auto !important;padding:0 !important;display:block !important;
}
.collection-type-blog .sqs-gallery .slide img,
.collection-type-blog .sqs-gallery .thumb-image{
  position:relative !important;display:block !important;width:100% !important;height:auto !important;
  max-width:100% !important;margin:0 !important;object-fit:contain !important;opacity:1 !important;
}
@media (max-width:767px){ .collection-type-blog .sqs-block:not(.instagram-block) .sqs-gallery{column-width:auto !important;column-count:1 !important;} }

/* Instagram feed block: keep it a compact square grid, not a tall stacked column */
.collection-type-blog .instagram-block .sqs-gallery{
  column-width:auto !important;column-count:auto !important;height:auto !important;
  display:grid !important;grid-template-columns:repeat(3,1fr) !important;gap:4px !important;
}
.collection-type-blog .instagram-block .sqs-gallery .slide{
  margin:0 !important;aspect-ratio:1/1;overflow:hidden;width:auto !important;
}
.collection-type-blog .instagram-block .sqs-gallery .slide img,
.collection-type-blog .instagram-block .sqs-gallery .thumb-image{
  width:100% !important;height:100% !important;object-fit:cover !important;
}

/* ---------- 2. SCROLL REVEAL (JS-gated so it never hides content without JS) ---------- */
html.agp-js .agp-reveal{opacity:0; transform:translateY(26px);
  transition:opacity .7s ease, transform .8s cubic-bezier(.2,.7,.2,1);}
html.agp-js .agp-reveal.agp-in{opacity:1; transform:none;}
@media (prefers-reduced-motion:reduce){
  html.agp-js .agp-reveal{opacity:1 !important; transform:none !important; transition:none !important;}
}

/* ---------- 3. DARK THEME ---------- */
html.agp-dark{background:#0e0e0e;}
html.agp-dark body{background:#0e0e0e !important; color:#b3b3b3 !important;}
html.agp-dark #page,html.agp-dark .main-content,html.agp-dark #content,
html.agp-dark .sqs-block,html.agp-dark .content{background:transparent !important;}
html.agp-dark a{color:#dcdcdc !important;}
html.agp-dark a:hover{color:#fff !important;}
html.agp-dark h1,html.agp-dark h2,html.agp-dark h3,html.agp-dark h4,
html.agp-dark .logo,html.agp-dark #logoWrapper a,html.agp-dark .nav-title,
html.agp-dark .product-title,html.agp-dark .sqs-money-native{color:#fff !important;}
html.agp-dark .main-nav a{color:#e6e6e6 !important;}
html.agp-dark .main-nav .nav-title{color:#8c8c8c !important;}
html.agp-dark #slideshow .slide{background:#1b1b1b; box-shadow:0 1px 3px rgba(0,0,0,.4);}
html.agp-dark #slideshow .slide:hover{box-shadow:0 16px 44px rgba(0,0,0,.6);}
/* social icons -> light. Recolor ONLY the glyph (.sqs-use--icon) and keep the
   mask transparent, so each icon keeps its real shape instead of a solid disc. */
html.agp-dark .sqs-use--icon{fill:#d2d2d2 !important;}
html.agp-dark .sqs-use--mask{fill:transparent !important;}
/* primary buttons invert so they stay visible */
html.agp-dark .sqs-add-to-cart-button,html.agp-dark .sqs-editable-button{
  background:#fff !important; color:#111 !important;}
html.agp-dark input,html.agp-dark select,html.agp-dark textarea{
  background:#1b1b1b !important; color:#eee !important; border-color:#333 !important;}
html.agp-dark hr{border-color:#2a2a2a !important;}

/* ---------- theme toggle button ---------- */
#agp-theme-toggle{
  position:fixed; left:18px; bottom:18px; z-index:99990;
  width:42px; height:42px; border-radius:50%; border:1px solid rgba(0,0,0,.12);
  background:#fff; color:#111; cursor:pointer; font-size:18px; line-height:1;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 20px rgba(0,0,0,.18); transition:transform .25s ease, background .3s, color .3s;
}
#agp-theme-toggle:hover{transform:scale(1.08) rotate(-8deg);}
html.agp-dark #agp-theme-toggle{background:#1d1d1d; color:#ffd76a; border-color:rgba(255,255,255,.14);}

/* ---------- 5. SMOOTH PAGE TRANSITIONS (fade only the content; sidebar stays put) ---------- */
@media (prefers-reduced-motion:no-preference){
  html.agp-js #pageWrapper{animation:agp-page-in .45s ease both;}   /* fade in the content column */
}
@keyframes agp-page-in{from{opacity:0} to{opacity:1}}
html.agp-js .agp-leaving{opacity:0 !important; animation:none !important;
  transition:opacity .26s ease !important;}

/* ---------- 4. TYPOGRAPHY + MOBILE ---------- */
.logo,#logoWrapper a{letter-spacing:.005em;}
.main-nav a{transition:color .2s ease, opacity .2s ease;}
.main-nav a:hover{opacity:.62;}

/* remove the dotted focus box around the active/clicked category (keep a
   subtle ring for keyboard users only) */
.main-nav a:focus,.main-nav a:active,.main-nav .active-link a,
.main-nav a:focus-within{outline:none !important;box-shadow:none !important;}
a:focus{outline:none;}
a:focus-visible,.main-nav a:focus-visible{outline:2px solid rgba(150,150,150,.55);outline-offset:2px;}

/* ---------- MOBILE ---------- */
@media (max-width:767px){
  /* single-column gallery */
  #slideshow{column-width:auto !important; column-count:1 !important; padding:4px 0 30px !important;}

  /* Menu: hidden until "Menu" tapped, then a clean centered vertical list */
  body.agp-mobile .main-nav{display:none !important;}
  body.agp-mobile.agp-nav-open .main-nav{
    display:block !important; width:100% !important; padding:4px 16px 24px !important; text-align:center !important;
  }
  body.agp-mobile .main-nav ul{list-style:none !important; margin:0 !important; padding:0 !important; width:100% !important;}
  body.agp-mobile .main-nav li{
    display:block !important; float:none !important; width:100% !important; margin:0 !important; text-align:center !important;
  }
  body.agp-mobile .main-nav a{
    display:block !important; width:100% !important; text-align:center !important;
    padding:12px 0 !important; margin:0 !important; font-size:19px !important; line-height:1.3 !important;
  }
  body.agp-mobile .main-nav > ul > li > a,
  body.agp-mobile .main-nav .mobile-folder > a{font-weight:700 !important;}
  /* Portfolio sub-categories: a touch smaller/softer */
  body.agp-mobile .main-nav ul ul{margin:2px 0 12px !important;}
  body.agp-mobile .main-nav ul ul a{font-size:16px !important; opacity:.82 !important; padding:9px 0 !important; font-weight:400 !important;}

  /* Theme toggle: hide the floating button; use the in-menu item instead */
  #agp-theme-toggle{display:none !important;}
  .agp-theme-menu-item{margin-top:16px !important; padding-top:8px !important; border-top:1px solid rgba(128,128,128,.2) !important;}
  .agp-theme-menu-item a{cursor:pointer; letter-spacing:.03em; opacity:.85 !important; font-size:16px !important;}
}
@media (min-width:768px){
  .agp-theme-menu-item{display:none !important;}
}