/* Anca theme — product gallery fix. Paste into
   Appearance > Customize > Additional CSS, then Publish.
   Safe to delete once the updated theme zip is installed. */
body.page{display:block !important}


/* ════════════════════════════════════════════════════════════
   SINGLE PRODUCT — REAL PHOTO GALLERY
   The stage was sized for the generated SVG pins. WooCommerce's
   gallery is different markup, so it gets its own rules.
   ════════════════════════════════════════════════════════════ */

/* With a real photo the stage hugs the image instead of holding a fixed square */
.pstage{
  aspect-ratio:auto;
  padding:18px;
  display:block;
}
.pstage.has-photo::before{opacity:.55}

/* the gallery itself */
.woocommerce div.product div.images,
.woocommerce div.product div.images.woocommerce-product-gallery{
  position:relative; z-index:2; width:100%; margin:0; float:none; opacity:1 !important;
}
.woocommerce div.product div.images .woocommerce-product-gallery__wrapper{margin:0}
.woocommerce div.product div.images img{
  width:100%; height:auto; display:block; border-radius:18px; box-shadow:var(--lift-2);
}
.woocommerce div.product div.images .flex-viewport{border-radius:18px; overflow:hidden}

/* thumbnails: a tidy row, not floated circles */
.woocommerce div.product div.images .flex-control-thumbs{
  display:grid; grid-template-columns:repeat(5,1fr); gap:10px;
  margin:12px 0 0; padding:0; list-style:none; overflow:visible;
}
.woocommerce div.product div.images .flex-control-thumbs li{
  width:auto; margin:0; float:none; list-style:none;
}
.woocommerce div.product div.images .flex-control-thumbs img{
  width:100%; aspect-ratio:1; object-fit:cover; border-radius:12px;
  opacity:.5; cursor:pointer; box-shadow:none;
  border:1px solid var(--edge);
  transition:opacity .3s cubic-bezier(.16,1,.3,1), border-color .3s, transform .3s;
}
.woocommerce div.product div.images .flex-control-thumbs img:hover{
  opacity:.85; transform:translateY(-2px);
}
.woocommerce div.product div.images .flex-control-thumbs img.flex-active{
  opacity:1; border-color:var(--a1); box-shadow:var(--glow-1);
}

/* the zoom trigger, as a glass button in the corner */
.woocommerce div.product div.images .woocommerce-product-gallery__trigger{
  position:absolute; top:16px; right:16px; left:auto; z-index:4;
  width:42px; height:42px; border-radius:50%; margin:0; padding:0;
  background:rgba(255,255,255,.1); border:1px solid var(--edge-2);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  display:grid; place-items:center; text-decoration:none; color:var(--ink);
  font-size:0; line-height:1; text-indent:0;
}
.woocommerce div.product div.images .woocommerce-product-gallery__trigger::after{
  content:"\2315"; font-size:19px; color:var(--ink); line-height:1;
}
.woocommerce div.product div.images .woocommerce-product-gallery__trigger img{display:none}
.woocommerce div.product div.images .woocommerce-product-gallery__trigger:hover{
  background:var(--grad-1); color:var(--on-accent); border-color:transparent; box-shadow:var(--glow-1);
}
.woocommerce div.product div.images .woocommerce-product-gallery__trigger:hover::after{color:var(--on-accent)}

/* sale flash sits with the other badges */
.woocommerce div.product span.onsale{
  position:absolute; top:16px; left:16px; z-index:4; min-height:0; min-width:0;
  padding:6px 13px; border-radius:999px; margin:0; line-height:1.4;
  font-family:"Cascadia Code",ui-monospace,Consolas,monospace;
  font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; font-weight:700;
  background:var(--grad-1); color:var(--on-accent); box-shadow:var(--glow-1);
}

/* title: two-word names were splitting awkwardly at the big size */
.pinfo h1{font-size:clamp(28px,3.4vw,44px); text-wrap:pretty}

/* keep the two columns balanced now the image is a real photo */
@media (min-width:941px){
  .pd{grid-template-columns:1.05fr .95fr; align-items:start}
}

/* the summary column shouldn't inherit Woo's float/width */
.woocommerce div.product .summary{float:none; width:auto; margin:0}