/* Scope everything to store page */
body.saifi-store .woocommerce-breadcrumb,
body.saifi-store .woocommerce-result-count,
body.saifi-store .woocommerce-ordering,
body.saifi-store .star-rating {
	display: none !important; /* remove stars + ordering */
}
.saifi-store-wrap{
	max-width: 1200px;
	margin: 0 auto;
	padding: 20px 16px 40px;
}

.saifi-upsell-card__price {
    font-size: 14px;
    font-weight: 600;
    margin: 4px 0 0;
}

/* 1) Popup image 50% size */
.saifi-qv__media{
  width: 50%;
  margin: 0 auto 12px;
}

/* keep portrait */
.saifi-qv__media img{
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* 3) Stack buttons */
.saifi-qv__cart .single_add_to_cart_button,
.saifi-qv__cart .saifi-btn--buy{
  width: 100%;
  display: flex !important;
  justify-content: center;
  margin-top: 10px;
}

/* Orange + Blue (your theme button class is kept) */
.saifi-btn--cart{
  background: #f59e0b !important; /* orange */
  border-color: #f59e0b !important;
  color: #fff !important;
}

.saifi-btn--buy:hover{
  background: #ffb236 !important; /* blue */
  border-color: #ffb236 !important;
  color: #fff !important;
}

.saifi-btn--buy{
  background: #003b5c !important; /* blue */
  border-color: #003b5c !important;
  color: #fff !important;
}
/* 4) Format boxes */
.saifi-format{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 10px 0 12px;
}
.saifi-format__box{
  border: 1px solid rgba(0,0,0,.12);
  background: #fff;
  border-radius: 10px;
  padding: 10px 10px;
  cursor: pointer;
  text-align: left;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.saifi-format__box.is-active{
  border-color: rgba(37,99,235,.55);
  box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}

/* Styles for when the box is NOT active AND being hovered */
.saifi-format__box:not(.is-active):hover {
  border: 1px solid #ffb236;
}
.saifi-format__name{
  font-weight: 700;
}
.saifi-format__price{
  font-weight: 600;
  opacity: .9;
}




/* Lightbox */
.saifi-lightbox{
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
}
.saifi-lightbox.is-open{
  display: block;
}
.saifi-lightbox__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.55);
}
.saifi-lightbox__content{
  position: relative;
  max-width: 820px;
  margin: 40px auto;
  background: #fff;
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 10px 40px rgba(0,0,0,.35);
  max-height: calc(100vh - 80px);
  overflow: auto;
}
.saifi-lightbox__close{
  position: absolute;
  right: 12px;
  top: 8px;
  border: 0;
  background: transparent;
  font-size: 28px;
  cursor: pointer;
}
.saifi-lightbox__notice{
  margin: 6px 0 14px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(0,0,0,.05);
}
.saifi-lightbox__gallery{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
}
.saifi-lightbox__img{
  width: 100%;
  height: auto;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.08);
}

/* HERO */
.saifi-hero{
	margin-bottom: 18px;
}
.saifi-hero__grid{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}
.saifi-hero__panel{
	min-height: 240px;
	background: #0b0b0b;
	background-size: cover;
	background-position: center;
	border-radius: 10px;
	position: relative;
	overflow: hidden;
}
.saifi-hero__overlay{
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 26px;
	background: linear-gradient(90deg, rgba(0,0,0,.55), rgba(0,0,0,.15));
	color: #fff;
}
.saifi-hero__title{
	margin: 0 0 8px;
	font-size: 34px;
	line-height: 1.1;
	font-weight: 700;
}
.saifi-hero__sub{
	margin: 0;
	font-size: 14px;
	max-width: 420px;
}

/* PRODUCT GRID */
.saifi-grid{
  display: grid;
  gap: 18px 14px;
  grid-template-columns: repeat(5, minmax(0, 1fr)); /* was 4 */
}

/* responsive fallbacks */
@media (max-width: 1100px){
  .saifi-grid{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 900px){
  .saifi-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 600px){
  .saifi-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.saifi-card{
	margin: 0;
}
.saifi-card__link{
	display: block;
	text-decoration: none !important;
}
.saifi-card__img-wrap{
	/* Portrait cover */
	aspect-ratio: 2 / 3;
	width: 100%;
	border-radius: 10px;
	overflow: hidden;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(0,0,0,.06);
}
.saifi-card__img-wrap img{
	width: 100%;
	height: 100%;
	object-fit: contain; /* full cover, not cropped */
}
.saifi-card__title{
	margin: 10px 0 0;
	font-size: 14px;
	line-height: 1.25;
	color: #111;
}
.saifi-card__subtitle{
	margin: 2px 0 0;
	font-size: 14px;
	font-style: italic;
	line-height: 1.25;
	color: #777;
}

/* Remove any theme hover “view details/quick view” elements (common selectors) */
.saifi-card .button,
.saifi-card .added_to_cart,
.saifi-card .product_type_simple,
.saifi-card .product_type_variable,
.saifi-card [class*="quick"],
.saifi-card [class*="view"]{
	display: none !important;
}

/* UPSELLS SECTION */
.saifi-upsells{
	margin-top: 40px;
	padding-top: 22px;
	border-top: 1px solid rgba(0,0,0,.08);
}
.saifi-upsells__title{
	margin: 0 0 6px;
	font-size: 22px;
}
.saifi-upsells__sub{
	margin: 0 0 16px;
	opacity: .75;
}

.saifi-upsell-row{
	display: grid;
	gap: 14px;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}
.saifi-upsell-card__link{
	text-decoration: none !important;
	display: block;
}
.saifi-upsell-card__img-wrap{
	aspect-ratio: 2 / 3;
	border-radius: 10px;
	overflow: hidden;
	background: #fff;
	border: 1px solid rgba(0,0,0,.06);
	display:flex; align-items:center; justify-content:center;
}
.saifi-upsell-card__img-wrap img{
	width:100%;
	height:100%;
	object-fit: contain;
}
.saifi-upsell-card__title{
	margin-top: 8px;
	font-size: 13px;
	color: #111;
}
.saifi-upsell-card__subtitle{
	margin: 2px 0 0;
	font-size: 14px;
	font-style: italic;
	color: #888;
}

/* LEFT SIDEBAR (Quick View) */
.saifi-qv-overlay{
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,.35);
	opacity: 0;
	pointer-events: none;
	transition: opacity .2s ease;
	z-index: 9998;
}

.saifi-qv{
	position: fixed;
	left: 0;
	top: 0;
	height: 100%;
	width: 380px;
	max-width: 92vw;
	background: #fff;
	transform: translateX(-105%);
	transition: transform .25s ease;
	z-index: 9999;
	box-shadow: 0 10px 40px rgba(0,0,0,.25);
	display: flex;
	flex-direction: column;
}

.saifi-qv__top{
	padding: 10px 12px;
	border-bottom: 1px solid rgba(0,0,0,.08);
	display: flex;
	justify-content: flex-end;
}
.saifi-qv__close{
	border: 0;
	background: transparent;
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
}

.saifi-qv__content{
	padding: 14px 16px 18px;
	overflow: auto;
}
.saifi-qv__media{
	aspect-ratio: 2 / 3;
	border: 1px solid rgba(0,0,0,.06);
	border-radius: 10px;
	overflow: hidden;
	background: #fff;
	display:flex; align-items:center; justify-content:center;
}
.saifi-qv__media img{
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.saifi-qv__title{
	margin: 12px 0 0;
	font-size: 18px;
	line-height: 1.25;
}
.saifi-qv__subtitle{
	margin: 2px 0 6px;
	font-size: 14px;
	font-style: italic;
	line-height: 1.3;
	color: #777;
}
.saifi-qv__price{
	margin: 0 0 10px;
	font-weight: 600;
}
.saifi-qv__desc-wrap{
	margin: 0 0 12px;
}
.saifi-qv__desc{
	opacity: .9;
}
.saifi-qv__desc ul{
	padding-left: 20px;
	margin-bottom: 1em;
}
.saifi-qv__desc li{
	list-style: disc !important;
	margin-bottom: 4px;
}
.saifi-qv__desc li::marker{
	color: #003B5C;
}
.saifi-qv__desc.is-clamped{
	max-height: 300px;
	overflow: hidden;
	position: relative;
}
.saifi-qv__desc.is-clamped::after{
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 40px;
	background: linear-gradient(rgba(255,255,255,0), #fff);
	pointer-events: none;
}
.saifi-qv__readmore{
	display: inline-block;
	margin-top: 6px;
	font-size: 13px;
	font-weight: 600;
	text-decoration: underline;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	color: inherit;
}
.saifi-qv__cart .button{
	width: 100%;
	margin-top: 10px;
	display: block;
	text-align: center;
}
.saifi-buy-now{
	width: 100%;
}

.saifi-store-header{
  margin: 0 0 18px;
}
.saifi-store-title{
  margin: 0;
  font-size: 26px;
  line-height: 1.2;
  font-weight: 700;
}

.saifi-card__price{
  margin-top: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #111;
}

/* Ensure lightbox is always on top */
.saifi-lightbox{
  position: fixed;
  inset: 0;
  z-index: 20000 !important;  /* higher than sidebar + hardcopy panel */
  display: none;
}

.saifi-lightbox.is-open{
  display: block;
}

.saifi-lightbox__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.60);
}

.saifi-lightbox__content{
  position: relative;
  z-index: 20001;
}

/* Make sure hardcopy panel stays below lightbox */
.saifi-hardcopy-panel{
  z-index: 10010;
}
/* Hover indicator "Click to enlarge" */
.saifi-hardcopy-panel__item{
  position: relative;
}
/*
.saifi-hardcopy-panel__item::after{
  content: "Click to enlarge";
  position: absolute;
  left: 12px;
  bottom: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  background: rgba(0,0,0,.60);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .15s ease, transform .15s ease;
  pointer-events: none;
}*/

.saifi-hardcopy-panel__item:hover::after{
  opacity: 1;
  transform: translateY(0);
}

/* Optional: zoom cursor */
.saifi-hardcopy-panel__item{ cursor: zoom-in; }

/* Hardcopy panel that covers the left sidebar */


.saifi-hardcopy-panel{
  position: fixed;
  left: 0;
  top: 0;
  height: 100%;
  width: 380px;
  max-width: 92vw;
  background: #fff;
  z-index: 10010; /* above the sidebar */
  transform: translateX(-105%);
  transition: transform .25s ease;
  box-shadow: 0 10px 40px rgba(0,0,0,.25);
  display: flex;
  flex-direction: column;
}

body.saifi-hardcopy-open .saifi-hardcopy-panel{
  transform: translateX(0);
}

.saifi-hardcopy-panel__top{
  padding: 10px 12px;
  border-bottom: 1px solid rgba(0,0,0,.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.saifi-hardcopy-panel__back{
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
}

.saifi-hardcopy-panel__close{
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 26px;
  line-height: 1;
}

.saifi-hardcopy-panel__content{
  padding: 14px 16px 18px;
  overflow: auto;
}

.saifi-hardcopy-panel__notice{
  margin: 0 0 14px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(0,0,0,.05);
}

/* 1 image per row */
.saifi-hardcopy-panel__gallery{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

/* Keep portrait look, clickable */
/*.saifi-hardcopy-panel__item{
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  cursor: zoom-in;
}

.saifi-hardcopy-panel__item img{
  width: 100%;
  height: auto;
  display: block;
}
*/


/* Store success message (match your screenshot) */



#saifi-store-notice.saifi-store-notice{
  display: none;              /* JS will show it */
  margin: 0 0 18px;
  padding: 16px 18px;

  background: #dff0e8;        /* light green */
  border: 0;
  border-top: 4px solid #2ecc71; /* green top line */
  border-radius: 0;           /* squared edges like screenshot */

  color: #111;
  font-size: 15px;
  line-height: 1.4;
}

/* Link style */
#saifi-store-notice.saifi-store-notice a{
  color: #16a34a;
  font-weight: 600;
  text-decoration: none;
}

#saifi-store-notice.saifi-store-notice a:hover{
  text-decoration: underline;
}

/* Open state */
body.saifi-qv-open .saifi-qv{
	transform: translateX(0);
}
body.saifi-qv-open .saifi-qv-overlay{
	opacity: 1;
	pointer-events: auto;
}

/* Responsive hero */
@media (max-width: 900px){
	.saifi-hero__grid{ grid-template-columns: 1fr; }
	.saifi-hero__panel{ min-height: 200px; }
}

/* --- FIX invalid rgba + ensure overlays work --- */

/* Force hardcopy panel close icon to never show (even if old HTML exists) */
.saifi-hardcopy-panel__close{ display:none !important; }

/* Hover indicator (works if images are wrapped in .saifi-hardcopy-panel__item) */
.saifi-hardcopy-panel__item{ position: relative; cursor: zoom-in; }

/*.saifi-hardcopy-panel__item::after{
  content: "Click to enlarge";
  position: absolute;
  left: 12px;
  bottom: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  background: rgba(0,0,0,0.60); /* ✅ fixed */
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .15s ease, transform .15s ease;
  pointer-events: none;
}*/

.saifi-hardcopy-panel__item:hover::after{
  opacity: 1;
  transform: translateY(0);
}

/* Fix shadow + borders that currently use invalid rgba(...) */
.saifi-hardcopy-panel{
  box-shadow: 0 10px 40px rgba(0,0,0,0.25) !important; /* ✅ fixed */
}
.saifi-qv{
  box-shadow: 0 10px 40px rgba(0,0,0,0.25) !important; /* ✅ fixed */
}
.saifi-lightbox__backdrop{
  background: rgba(0,0,0,0.60) !important; /* ✅ fixed */
}

/* --- LIGHTBOX ALWAYS ABOVE EVERYTHING (mobile included) --- */
.saifi-lightbox{
  position: fixed !important;
  inset: 0 !important;
  z-index: 999999 !important;
}
.saifi-lightbox__content{
  position: relative !important;
  z-index: 1000000 !important;
}

/* Remove the lightbox X (user requested no X) */
.saifi-lightbox__close{
  display:none !important;
}

/* ================================
   FINAL OVERRIDES (keep at bottom)
   ================================ */

/* Make sure hardcopy panel has NO X even if old markup exists */
.saifi-hardcopy-panel__close { display: none !important; }

/* Hardcopy gallery: 1 per row */
.saifi-hardcopy-panel__gallery{
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 12px !important;
}

/* Hover indicator */
.saifi-hardcopy-panel__item{
  position: relative !important;
  cursor: zoom-in !important;
}
/*.saifi-hardcopy-panel__item::after{
  content: "Click to enlarge";
  position: absolute;
  left: 12px;
  bottom: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  background: rgba(0,0,0,0.60);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .15s ease, transform .15s ease;
  pointer-events: none;
}
.saifi-hardcopy-panel__item:hover::after{
  opacity: 1;
  transform: translateY(0);
} */

/* Lightbox ALWAYS above everything (sidebar + hardcopy panel + overlays) */
.saifi-lightbox{
  position: fixed !important;
  inset: 0 !important;
  z-index: 999999 !important;
}
.saifi-lightbox__content{
  position: relative !important;
  z-index: 1000000 !important;
}
.saifi-lightbox__backdrop{
  background: rgba(0,0,0,0.60) !important;
}

/* Remove lightbox X (you requested no X) */
.saifi-lightbox__close{ display: none !important; }

/* ── #books jump anchor ──────────────────────────────────────────────
   A button with href="#books" scrolls here. scroll-margin-top offsets
   the sticky site header so the grid isn't hidden under it on landing. */
body.saifi-store .saifi-store-anchor {
  display: block;
  height: 0;
  scroll-margin-top: 120px;
}
@media (max-width: 768px) {
  body.saifi-store .saifi-store-anchor { scroll-margin-top: 80px; }
}
/* Smooth scroll, scoped to the store page only */
html:has(body.saifi-store) { scroll-behavior: smooth; }

/* Intro copy above the books grid — editorial treatment.
   Typography-led rather than boxed: a gold hairline marks the section, navy
   carries the type, and a hairline divider separates the copy from the grid.
   Runs the full container width by request. Note this puts the body copy well
   past the 65–75 character readability band on wide screens; the measure cap
   that used to hold it there has been removed deliberately.

   Gold (#ffb236) is used ONLY as the decorative rule — it measures 1.80:1 on
   white, so it can never carry text. Navy (11.80:1) and #4d4d4d (8.45:1) do. */
body.saifi-store .saifi-store-intro{
	margin: 0 0 40px;
	padding-bottom: 28px;
	border-bottom: 1px solid #e4e4e7;
}
body.saifi-store .saifi-store-intro__eyebrow{
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 16px;
	color: #003b5c;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
body.saifi-store .saifi-store-intro__eyebrow::before{
	content: "";
	flex: 0 0 auto;
	width: 40px;
	height: 3px;
	background: #ffb236;
}
body.saifi-store .saifi-store-intro__title{
	margin: 0 0 16px;
	color: #003b5c;
	font-size: clamp(1.75rem, 3.2vw, 2.5rem);
	line-height: 1.15;
	letter-spacing: -0.02em;
	font-weight: 700;
}
body.saifi-store .saifi-store-intro__text{
	margin: 0;
	color: #4d4d4d;
	font-size: 1.0625rem;
	font-weight: 300;
	line-height: 1.75;
}
body.saifi-store .saifi-store-intro__text a{
	color: #003b5c;
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 2px;
}
body.saifi-store .saifi-store-intro__text a:hover,
body.saifi-store .saifi-store-intro__text a:focus-visible{
	color: #00293f;
}

@media (max-width: 768px){
	body.saifi-store .saifi-store-intro{
		margin-bottom: 28px;
		padding-bottom: 22px;
	}
	body.saifi-store .saifi-store-intro__eyebrow{ gap: 10px; }
	body.saifi-store .saifi-store-intro__eyebrow::before{ width: 28px; }
	body.saifi-store .saifi-store-intro__text{ font-size: 1rem; }
}