/*
 * Isra product page (M8 phase 1). Builds on home.css (tokens, buttons, cards, header, footer,
 * mini cart). Mobile-first; two columns from 1024px.
 */

.ip-main { padding-bottom: 8px; }
.ip-notices:empty, .ip-notices .woocommerce-notices-wrapper:empty { display: none; }
.ip-notices .woocommerce-message, .ip-notices .woocommerce-error, .ip-notices .woocommerce-info {
	margin: 12px 0 0; padding: 12px 14px; border-radius: 12px; list-style: none;
	background: var(--ih-blush); font-size: 14px;
}
.ip-notices .woocommerce-error { color: var(--ih-accent); }

/* ---------- Breadcrumb ---------- */

/* ---------- Layout ---------- */
.ip-top { display: flex; flex-direction: column; gap: 20px; }
.ip-product > .ih-wrap { padding-bottom: 8px; }
@media (min-width: 1024px) {
	.ip-product > .ih-wrap { padding-bottom: 72px; }
	.ip-crumbs { padding: 20px 0 24px; }
	.ip-top { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 56px; align-items: start; }
	.ip-summary { position: sticky; top: calc(var(--ih-sticky-top) + 24px); }
}

/* ---------- Gallery ---------- */
.ip-gallery { position: relative; margin: 0 -16px; }
.ip-gallery__track { display: flex; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; }
.ip-gallery__slide {
	flex: 0 0 100%; padding: 0; border: 0; background: var(--ih-lilac); cursor: zoom-in;
	scroll-snap-align: start; scroll-snap-stop: always;
}
.ip-gallery__img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.ip-gallery__count {
	position: absolute; bottom: 82px; right: 12px; /* above the thumbnail row, clear of the photo's watermark */ padding: 4px 10px; border-radius: 999px;
	background: rgba(28, 18, 22, .55); color: #fff; font-size: 12px; font-weight: 700;
}
.ip-gallery__thumbs { display: flex; gap: 8px; padding: 10px 16px 0; overflow-x: auto; scrollbar-width: none; }
.ip-gallery__thumbs::-webkit-scrollbar { display: none; }
.ip-thumb {
	flex: none; width: 64px; height: 64px; padding: 0; overflow: hidden; cursor: pointer;
	border: 2px solid transparent; border-radius: 12px; background: var(--ih-lilac);
	transition: border-color .2s ease, transform .15s var(--ih-ease);
}
.ip-thumb.is-active { border-color: var(--ih-ink); }
.ip-thumb:active { transform: scale(.94); }
.ip-thumb__img { width: 100%; height: 100%; object-fit: cover; }
.ip-gallery--empty { aspect-ratio: 1 / 1; background: var(--ih-lilac); }
@media (min-width: 1024px) {
	.ip-gallery { margin: 0; }
	.ip-gallery__track { border-radius: 22px; overflow: hidden; }
	.ip-gallery__count { display: none; }
	.ip-gallery__thumbs { padding: 12px 0 0; flex-wrap: wrap; overflow: visible; }
	.ip-thumb { width: 80px; height: 80px; border-radius: 14px; }
	.ip-thumb:hover { border-color: var(--ih-chip); }
	.ip-thumb.is-active:hover { border-color: var(--ih-ink); }
}

/* Large photo view */
.ip-lightbox {
	position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none;
	margin: 0; padding: 0; border: 0; background: rgba(20, 12, 16, .94);
	opacity: 0; transition: opacity .25s ease;
}
.ip-lightbox.is-open { opacity: 1; }
.ip-lightbox { touch-action: pan-y pinch-zoom; } /* sideways swipes go to product.js (next / previous photo); pinch-zoom still works */
.ip-lightbox::backdrop { background: transparent; }
.ip-lightbox__inner { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
/* A square stage the size of the photo, so the arrows sit right beside it (not at the screen
   edges) and nothing moves while the next photo loads. Phones: full width, arrows on the photo. */
.ip-lightbox__frame { position: relative; width: min(100vw, calc(100dvh - 120px)); aspect-ratio: 1 / 1; }
.ip-lightbox__img { display: block; width: 100%; height: 100%; object-fit: contain; }
.isra-home .ip-lightbox__close { position: absolute; top: 10px; right: 10px; z-index: 1; color: #fff; background: rgba(255, 255, 255, .12); border-radius: 50%; }
.ip-lightbox__nav {
	position: absolute; top: 50%; transform: translateY(-50%);
	display: flex; align-items: center; justify-content: center;
	width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
	background: rgba(255, 255, 255, .9); color: var(--ih-ink); cursor: pointer;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
}
.ip-lightbox__nav:hover { background: #fff; }
.ip-lightbox__nav--prev { left: 8px; }
.ip-lightbox__nav--prev .ih-icon { transform: rotate(180deg); }
.ip-lightbox__nav--next { right: 8px; }
@media (min-width: 768px) {
	.ip-lightbox__frame { width: min(calc(100vw - 176px), calc(100dvh - 96px), 1080px); }
	.ip-lightbox__img { border-radius: 16px; }
	.ip-lightbox__nav--prev { left: -64px; } /* just outside the photo */
	.ip-lightbox__nav--next { right: -64px; }
}

/* ---------- Summary ---------- */
.ip-summary { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ip-title { font-family: var(--ih-display); font-weight: 800; font-size: 28px; line-height: 1.1; letter-spacing: -0.01em; }
.ip-code { margin-top: -6px; font-size: 13px; color: var(--ih-muted); letter-spacing: .02em; }
.ip-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ip-chip {
	display: inline-flex; align-items: center; gap: 4px; padding: 5px 12px; border-radius: 999px;
	border: 1.5px solid var(--ih-chip); font-size: 13px; font-weight: 500;
}
.ip-chip--rating .ih-icon { color: var(--ih-ink); }
.ip-price-wrap .ih-price__now { font-size: 30px; }
.ip-price-wrap .ih-price__was { font-size: 15px; }
.ip-price-wrap .ih-pill--save { font-size: 13px; padding: 3px 10px; }
.ip-stock { font-size: 14px; font-weight: 700; color: var(--ih-accent); }
.ip-soldout { font-size: 15px; color: var(--ih-muted); }

.ip-buy { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.ip-buy__row { display: flex; gap: 10px; }
.ip-qty { flex: none; height: 52px; margin: 0; border-radius: 14px; }
.ip-qty .ih-qty__btn { height: 49px; width: 44px; border-radius: 12px; }
.ip-qty .ih-qty__value { min-width: 28px; font-size: 16px; }
.ip-buy__btn.ih-btn--cart, .ip-buy__btn { flex: 1; height: 52px; border-radius: 14px; font-size: 16px; }
.ip-buy__btn:disabled { opacity: .45; cursor: not-allowed; width: 100%; }
.ip-buy__error { font-size: 14px; color: var(--ih-accent); font-weight: 500; }

.ip-packs { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; }
.ip-packs__legend { margin-bottom: 8px; font-size: 14px; font-weight: 700; }
.ip-pack {
	display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 14px;
	border: 1.5px solid var(--ih-chip); border-radius: 14px; background: #fff; cursor: pointer;
	transition: border-color .2s ease, background-color .2s ease;
}
.ip-pack:has(input:checked) { border-color: var(--ih-ink); background: var(--ih-blush); }
.ip-pack input { accent-color: var(--ih-ink); width: 18px; height: 18px; margin: 0; }
.ip-pack__label { flex: 1; font-weight: 700; }
.ip-pack__price { font-weight: 700; }
.ip-pack__price s { margin-left: 4px; font-size: 13px; font-weight: 400; color: var(--ih-was); }

.ip-trust { display: flex; flex-direction: column; gap: 8px; padding: 14px 0 2px; border-top: 1px solid var(--ih-divider); font-size: 14px; }
.ip-trust li { display: flex; align-items: center; gap: 10px; }
.ip-trust__icon {
	flex: none; display: flex; align-items: center; justify-content: center;
	width: 24px; height: 24px; border-radius: 50%; background: var(--ih-blush); color: var(--ih-accent);
}
@media (min-width: 1024px) {
	.ip-title { font-size: 38px; }
	.ip-price-wrap .ih-price__now { font-size: 34px; }
}

/* ---------- Complete your set ---------- */
.ip-complete {
	display: flex; flex-direction: column; gap: 12px; margin-top: 6px; padding: 16px;
	background: #fff; border: 1px solid var(--ih-card-border); border-radius: 20px;
}
.ip-complete__title { font-family: var(--ih-display); font-weight: 800; font-size: 20px; line-height: 1.15; }
.ip-complete__sub { margin-top: 2px; font-size: 13px; color: var(--ih-muted); }
.ip-addons { display: flex; flex-direction: column; }
.ip-addon {
	display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 12px;
	padding: 12px 0; border-top: 1px solid var(--ih-divider);
}
.ip-addon__img { width: 56px; height: 56px; object-fit: cover; border-radius: 12px; background: var(--ih-lilac); }
.ip-addon__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ip-addon__name { font-size: 15px; font-weight: 700; }
.ip-addon__price { font-size: 14px; font-weight: 700; }
.ip-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.ip-seg__opt { position: relative; cursor: pointer; }
.ip-seg__opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.ip-seg__opt span {
	display: inline-flex; align-items: center; min-height: 32px; padding: 0 10px; border-radius: 999px;
	border: 1.5px solid var(--ih-chip); font-size: 12.5px; font-weight: 500; white-space: nowrap;
	transition: border-color .2s ease, background-color .2s ease;
}
.ip-seg__opt input:checked + span { border-color: var(--ih-ink); background: var(--ih-blush); font-weight: 700; }
.ip-seg__opt input:focus-visible + span { outline: 2px solid var(--ih-accent); outline-offset: 2px; }
.ip-addon__add {
	position: relative; min-width: 64px; height: 40px; padding: 0 14px; border-radius: 12px;
	border: 1.5px solid var(--ih-ink); background: #fff; color: var(--ih-ink);
	font-family: var(--ih-body); font-size: 14px; font-weight: 700; cursor: pointer;
	transition: background-color .2s ease, transform .15s var(--ih-ease);
}
.ip-addon__add:hover { background: var(--ih-blush); }
.ip-addon__add:active { transform: scale(.95); }
.ip-addon__add.loading { color: transparent; pointer-events: none; }
.ip-addon__add.loading::after {
	content: ""; position: absolute; inset: 0; margin: auto; width: 16px; height: 16px; border-radius: 50%;
	border: 2px solid rgba(28, 18, 22, .2); border-top-color: var(--ih-ink); animation: ih-spin .7s linear infinite;
}
.isra-home .ip-addon__add.is-added { background: var(--ih-accent); border-color: var(--ih-accent); color: #fff; }
.ip-addon__add .ih-icon { width: 14px; height: 14px; vertical-align: -2px; }
.ip-complete__all { width: 100%; height: 48px; }

/* ---------- Sections below ---------- */
.ip-product > .ih-section:first-of-type { margin-top: 8px; }
.ip-details__inner { display: flex; flex-direction: column; gap: 16px; }
.ip-details__desc { display: flex; flex-direction: column; gap: 10px; font-size: 15px; color: var(--ih-ink); }
.ip-details__desc p { margin: 0; }
.ip-specs { display: flex; flex-direction: column; margin: 0; border-top: 1px solid var(--ih-divider); }
.ip-specs__row { display: grid; grid-template-columns: 96px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--ih-divider); font-size: 14.5px; }
.ip-specs dt { color: var(--ih-muted); }
.ip-specs dd { margin: 0; font-weight: 500; }
@media (min-width: 1024px) {
	.ip-details__inner.ih-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start; }
	.ip-details__text { display: flex; flex-direction: column; gap: 20px; }
	.ip-details__desc { font-size: 16px; }
	.ip-specs { margin-top: 64px; }
	.ip-specs__row { grid-template-columns: 120px 1fr; font-size: 15.5px; }
}
.ih-card--recent .ih-card__img { aspect-ratio: 1 / 1; }

/* ---------- Sticky add-to-cart bar (phones and tablets) ---------- */
.ip-sticky {
	position: fixed; z-index: 50; left: 0; right: 0; bottom: 0;
	display: flex; align-items: center; gap: 10px;
	padding: 10px max(12px, env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
	background: #fff; border-top: 1px solid var(--ih-card-border);
	box-shadow: 0 -8px 24px rgba(28, 18, 22, .1);
	transform: translateY(110%); transition: transform .3s var(--ih-ease);
}
.ip-sticky.is-visible { transform: none; }
.ip-sticky__img { flex: none; width: 40px; height: 40px; object-fit: cover; border-radius: 10px; }
.ip-sticky__info { flex: 0 1 auto; min-width: 0; max-width: 42%; display: flex; flex-direction: column; gap: 1px; }
.ip-sticky__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 700; }
.ip-sticky__price { display: flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.ip-sticky__now { font-size: 15px; font-weight: 700; color: var(--ih-ink); }
.ip-sticky__now.is-sale { color: var(--ih-accent); }
.ip-sticky__was { font-size: 12px; color: var(--ih-was); }
.ip-sticky__btn.ih-btn--cart { flex: 1 1 auto; width: auto; min-width: 0; min-height: 48px; height: 48px; padding: 0 16px; }
/* A floating chat button (if one is ever enabled) moves up so it never sits on the bar. */
.whatsapp-float, [id^="chaty-widget"] { transition: bottom .3s var(--ih-ease), transform .3s var(--ih-ease); }
body.ip-has-sticky .whatsapp-float { bottom: calc(var(--ip-sticky-h, 72px) + 16px) !important; }
body.ip-has-sticky [id^="chaty-widget"] { transform: translateY(calc(-1 * var(--ip-sticky-h, 72px))); }
@media (min-width: 1024px) {
	.ip-sticky { display: none; }
}

/* ---------- Review line by the title ---------- */
.isra-home .ip-rating {
	display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; margin-top: -4px;
	font-size: 14px; font-weight: 700; color: var(--ih-ink); text-decoration: none;
}
.isra-home .ip-rating:hover span { text-decoration: underline; }
.ip-rating .ih-icon { color: var(--ih-ink); }

/* ---------- Reviews section ---------- */
.ip-reviews__inner { display: flex; flex-direction: column; gap: 20px; }
.ip-reviews__summary { display: flex; flex-direction: column; gap: 14px; }
.ip-reviews__avg { display: flex; align-items: center; gap: 12px; }
.ip-reviews__score { font-family: var(--ih-display); font-weight: 800; font-size: 44px; line-height: 1; }
.ip-reviews__count { display: block; margin-top: 2px; font-size: 13px; color: var(--ih-muted); }
.ip-stars { display: inline-flex; gap: 2px; }
.ip-stars__s { display: inline-flex; color: var(--ih-divider); }
.ip-stars__s.is-on { color: var(--ih-ink); }
.ip-dist { display: flex; flex-direction: column; gap: 6px; max-width: 360px; }
.ip-dist__row { display: grid; grid-template-columns: 34px 1fr 32px; align-items: center; gap: 8px; font-size: 13px; }
.ip-dist__label { display: inline-flex; align-items: center; gap: 3px; font-weight: 700; }
.ip-dist__bar { height: 8px; border-radius: 999px; background: var(--ih-blush); overflow: hidden; }
.ip-dist__bar span { display: block; height: 100%; border-radius: 999px; background: var(--ih-ink); }
.ip-dist__n { text-align: right; color: var(--ih-muted); }
.ip-reviews__list { display: flex; flex-direction: column; gap: 12px; }
.ip-review {
	display: flex; flex-direction: column; gap: 8px; padding: 16px;
	background: #fff; border: 1px solid var(--ih-card-border); border-radius: 18px;
}
.ip-review[hidden] { display: none; }
.ip-review.is-new { animation: ih-fade-down .35s var(--ih-ease) both; }
.ip-review__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ip-review__verified { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: var(--ih-accent); }
.ip-review__text { font-size: 15px; line-height: 1.5; }
.ip-review__photos { display: flex; gap: 8px; }
.ip-review__photos img { width: 76px; height: 76px; object-fit: cover; border-radius: 12px; }
.ip-review__who { font-size: 13px; color: var(--ih-muted); }
.ip-reviews__more { width: 100%; }
@media (min-width: 1024px) {
	.ip-reviews__inner.ih-wrap { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 56px; align-items: start; }
	.ip-reviews__summary { position: sticky; top: calc(var(--ih-sticky-top) + 24px); }
	.ip-reviews__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
	.ip-reviews__more { grid-column: 2; width: auto; justify-self: start; }
}

/* ---------- Facts from product data ---------- */
.ip-addon__fact { margin-top: -4px; font-size: 12.5px; line-height: 1.35; color: var(--ih-muted); }
.ip-trust li > span:last-child { min-width: 0; }