/* Product gallery styles are loaded by the product and quick-view templates. */

/* Product zoom: clean gallery surface and custom controls without white icon tiles. */
.page-product .product-images-modal .modal-content{border:1px solid color-mix(in srgb,var(--awake-border-color,#e5e7eb) 80%,transparent);border-radius:18px;background:var(--awake-content-bg,#f6f7f8);box-shadow:0 30px 90px color-mix(in srgb,var(--awake-card-shadow-color,#0f172a) 30%,transparent)}
.page-product .product-images-modal__body{padding:22px 72px;background:var(--awake-content-bg,#fff)!important}
.page-product .product-images-modal .carousel-item picture{overflow:hidden;border-radius:12px;background:white}.page-product .product-images-modal .carousel-item img{border-radius:12px}
.page-product .product__zoom{display:grid!important;box-sizing:border-box!important;width:46px!important;min-width:46px!important;max-width:46px!important;height:46px!important;min-height:46px!important;max-height:46px!important;padding:0!important;border-radius:50%!important;place-items:center}
.page-product .product__zoom .material-icons{display:block;margin:0;font-size:20px;line-height:1}
.page-product .product-images-modal .carousel-control-prev,.page-product .product-images-modal .carousel-control-next{display:grid!important;box-sizing:border-box!important;width:46px!important;min-width:46px!important;max-width:46px!important;height:46px!important;min-height:46px!important;max-height:46px!important;padding:0!important;border:0!important;border-radius:50%!important;background:var(--awake-primary-button-bg,#2563eb)!important;color:var(--awake-primary-button-text,#fff)!important;box-shadow:0 8px 22px rgba(15,23,42,.2);opacity:1;place-items:center;transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease}
.page-product .product-images-modal .carousel-control-prev{left:14px}.page-product .product-images-modal .carousel-control-next{right:14px}
.page-product .product-images-modal .carousel-control-prev:hover,.page-product .product-images-modal .carousel-control-next:hover{background:var(--awake-primary-button-interaction-bg,#1d4ed8)!important;box-shadow:0 10px 28px rgba(15,23,42,.28);transform:translateY(-50%) scale(1.05)}
.page-product .product-images-modal .carousel-control-prev-icon,.page-product .product-images-modal .carousel-control-next-icon{display:none!important}
.page-product .product-images-modal .carousel-control-prev::before,.page-product .product-images-modal .carousel-control-next::before{display:block;width:13px;height:18px;background:currentColor;content:""}
.page-product .product-images-modal .carousel-control-prev::before{clip-path:polygon(100% 0,0 50%,100% 100%,100% 72%,45% 50%,100% 28%)}.page-product .product-images-modal .carousel-control-next::before{clip-path:polygon(0 0,100% 50%,0 100%,0 72%,55% 50%,0 28%)}
.page-product .product-images-modal .btn-close{display:grid;box-sizing:border-box!important;top:12px;right:12px;width:44px!important;min-width:44px!important;max-width:44px!important;height:44px!important;min-height:44px!important;max-height:44px!important;padding:0!important;border-radius:50%!important;background-color:var(--awake-field-bg,#fff);background-position:center;background-size:11px;box-shadow:0 6px 20px color-mix(in srgb,var(--awake-card-shadow-color,#0f172a) 14%,transparent);opacity:.75;place-items:center}.page-product .product-images-modal .btn-close:hover{opacity:1}
@media(max-width:575.98px){.page-product .product-images-modal__body{padding:58px 10px 12px}.page-product .product-images-modal .carousel-control-prev,.page-product .product-images-modal .carousel-control-next{width:40px;height:40px}.page-product .product-images-modal .carousel-control-prev{left:8px}.page-product .product-images-modal .carousel-control-next{right:8px}}
.page-product .product__images>.product__carousel .carousel-control-prev,.page-product .product__images>.product__carousel .carousel-control-next{top:50%;bottom:auto;display:grid!important;box-sizing:border-box;width:44px!important;min-width:44px!important;max-width:44px!important;height:44px!important;min-height:44px!important;max-height:44px!important;padding:0!important;border:0!important;border-radius:50%!important;background:color-mix(in srgb,var(--awake-primary-button-bg,#2563eb) 88%,transparent)!important;color:var(--awake-primary-button-text,#fff)!important;box-shadow:0 7px 20px rgba(15,23,42,.18);opacity:1;place-items:center;transform:translateY(-50%)}
.page-product .product__images>.product__carousel .carousel-control-prev{left:14px}.page-product .product__images>.product__carousel .carousel-control-next{right:14px}.page-product .product__images>.product__carousel :where(.carousel-control-prev-icon,.carousel-control-next-icon){width:16px;height:16px;background-size:16px 16px}.page-product .product__images>.product__carousel :where(.carousel-control-prev,.carousel-control-next):hover{background:var(--awake-primary-button-interaction-bg,#1d4ed8)!important;box-shadow:0 9px 24px rgba(15,23,42,.24)}

/* Product gallery controls: identical circles with optically centered CSS icons. */
.page-product .product__zoom{position:absolute;color:var(--awake-field-text,#111827)}.page-product .product__zoom .material-icons{display:none!important}.page-product .product__zoom::before,.page-product .product__zoom::after{grid-area:1/1;display:block;box-sizing:border-box;content:""}.page-product .product__zoom::before{width:14px;height:14px;border:2px solid currentColor;border-radius:50%;transform:translate(-2px,-2px)}.page-product .product__zoom::after{width:8px;height:2px;border-radius:2px;background:currentColor;transform:translate(5px,5px) rotate(45deg);transform-origin:center}.page-product .product__images>.product__carousel :where(.carousel-control-prev-icon,.carousel-control-next-icon),.page-product .product-images-modal :where(.carousel-control-prev-icon,.carousel-control-next-icon){display:block!important;width:12px!important;height:12px!important;border:0;border-top:2px solid currentColor;border-right:2px solid currentColor;background:none!important}.page-product .product__images>.product__carousel .carousel-control-prev-icon,.page-product .product-images-modal .carousel-control-prev-icon{transform:translateX(2px) rotate(-135deg)}.page-product .product__images>.product__carousel .carousel-control-next-icon,.page-product .product-images-modal .carousel-control-next-icon{transform:translateX(-2px) rotate(45deg)}.page-product .product-images-modal :where(.carousel-control-prev,.carousel-control-next)::before{display:none!important}

/* Keep Bootstrap's native carousel chevrons inside Awake's circular controls. */
.page-product :where(.product__images>.product__carousel,.product-images-modal) :where(.carousel-control-prev,.carousel-control-next)::before{display:none!important}.page-product :where(.product__images>.product__carousel,.product-images-modal) :where(.carousel-control-prev-icon,.carousel-control-next-icon){display:grid!important;width:28px!important;height:28px!important;border:0!important;background:none!important;transform:none!important;place-items:center}.page-product :where(.product__images>.product__carousel,.product-images-modal) :where(.carousel-control-prev-icon,.carousel-control-next-icon)::before{display:block;color:currentColor;font-family:"Material Icons";font-size:28px;font-style:normal;font-weight:400;line-height:1;letter-spacing:normal;text-transform:none;white-space:nowrap}.page-product :where(.product__images>.product__carousel,.product-images-modal) .carousel-control-prev-icon::before{content:"\e5cb"}.page-product :where(.product__images>.product__carousel,.product-images-modal) .carousel-control-next-icon::before{content:"\e5cc"}
.page-product .product__images>.product__carousel :where(.carousel-control-prev-icon,.carousel-control-next-icon),.page-product .product-images-modal :where(.carousel-control-prev-icon,.carousel-control-next-icon){width:28px!important;height:28px!important}
.page-product .product-images-modal .carousel-control-prev-icon,.page-product .product-images-modal .carousel-control-next-icon{display:grid!important;width:28px!important;height:28px!important}

/* Keep the product gallery and its backdrop above every header layer. */
body.page-product .product-images-modal{z-index:2500!important}body.page-product:has(.product-images-modal.show)>.modal-backdrop{z-index:2490!important}

@media (prefers-reduced-motion: no-preference) {
  body.page-product .product-images-modal.fade { transition: opacity .25s ease; }
  body.page-product .product-images-modal.fade .modal-dialog { opacity: 1; transform: none; transition: none; }
  body.page-product .product-images-modal.show .modal-dialog { opacity: 1; transform: none; }
  body.page-product:has(.product-images-modal[style*="display: block"]) > .modal-backdrop.fade { transition-duration: .28s; }
}
@media (prefers-reduced-motion: reduce) {
  body.page-product .product-images-modal.fade,
  body.page-product .product-images-modal.fade .modal-dialog,
  body.page-product:has(.product-images-modal[style*="display: block"]) > .modal-backdrop.fade { transition: none; }
}

/* Awake lightbox: a full viewport stage with a compact, readable toolbar. */
.page-product .awake-product-zoom { padding: 0 !important; overscroll-behavior: contain; }
.page-product .awake-product-zoom .modal-dialog { width: 100%; max-width: none; min-height: 100dvh; margin: 0; }
.page-product .awake-product-zoom .modal-content { display: flex; height: 100dvh; min-height: 100dvh; overflow: hidden; border: 0; border-radius: 0; background: #f5f6f3; box-shadow: none; }
.page-product .awake-product-zoom__header { position: relative !important; inset: auto !important; z-index: 2; flex: 0 0 auto; width: 100%; min-height: 64px; align-items: center; justify-content: space-between !important; padding: 10px 20px !important; border-bottom: 1px solid #e5e7e2; color: #22272a; background: #fff; }
.page-product .awake-product-zoom__title { min-width: 0; overflow: hidden; font-size: 16px; font-weight: 650; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.page-product .awake-product-zoom__close { position: static; flex: 0 0 40px; width: 40px !important; min-width: 40px !important; max-width: 40px !important; height: 40px !important; min-height: 40px !important; max-height: 40px !important; margin: 0 0 0 auto !important; background-color: #f5f6f3; box-shadow: none; }
.page-product .awake-product-zoom__stage { display: flex; flex: 1 1 auto; min-height: 0; align-items: center; justify-content: center; padding: 16px 64px !important; background: #f5f6f3 !important; }
.page-product .awake-product-zoom__stage .carousel, .page-product .awake-product-zoom__stage .carousel-inner, .page-product .awake-product-zoom__stage .carousel-item { width: 100%; height: 100%; }
.page-product .awake-product-zoom__stage .carousel-item picture { display: flex; width: fit-content; max-width: 100%; height: 100%; max-height: 100%; align-items: center; justify-content: center; margin: auto; border-radius: 0; background: transparent; }
.page-product .awake-product-zoom__stage .carousel-item img { display: block; width: auto; max-width: 100%; height: auto; max-height: calc(100dvh - 96px); border-radius: 8px; object-fit: contain; }
.page-product .awake-product-zoom__stage :where(.carousel-control-prev,.carousel-control-next) { top: 50%; bottom: auto; z-index: 2; transform: translateY(-50%); }
@media (max-width: 575.98px) {
  .page-product .awake-product-zoom__header { min-height: 56px; padding: 8px 12px 8px 16px !important; }
  .page-product .awake-product-zoom__title { font-size: 14px; }
  .page-product .awake-product-zoom__stage { padding: 12px !important; }
  .page-product .awake-product-zoom__stage .carousel-item img { max-height: calc(100dvh - 80px); }
  .page-product .awake-product-zoom__stage .carousel-control-prev { left: 8px; }
  .page-product .awake-product-zoom__stage .carousel-control-next { right: 8px; }
}
@media (prefers-reduced-motion: no-preference) {
  body.page-product .awake-product-zoom.fade { opacity: 1; transition: none; }
  body.page-product .awake-product-zoom.fade .carousel-item img { opacity: 0; transition: opacity .28s ease; }
  body.page-product .awake-product-zoom.fade.show .carousel-item.active img { opacity: 1; }
}
