/* ============================================================================
   Produktdetalje-siden  /shop/<kategori>/<produkt>/
   (app/tasks/produkt.php + include/js/shop-produkt.js)

   - .pg      : billedskifteren (thumbnails, pile, prikker, tæller, swipe)
   - .pg-lb   : fuldskærms-lightbox (bygges af shop-produkt.js)
   - .dr-*    : fragtoverlayet (showDeliveryOverlay())

   Erstatter den gamle ChangePic()/BigProductImage()/ClickHelp('DeliveryRates').
   ========================================================================== */

/* ── Produktpræsentation: billede + tekst ────────────────────────────────── */
/* .shop-article er højst 1200px bred, men den afsluttende streg går i hele
   .pagediv's bredde - derfor sidder border-bottom på wrapperen, ikke på
   .shop-article selv (som ellers har den fra shop.css). */
.produkt-praesentation {
	border-bottom: 1px solid #bfb49e;
	margin-bottom: 12px;
	padding-bottom: 22px;
}
.produkt-praesentation .shop-article {
	max-width: 1200px;
	border-bottom: 0;
	margin-bottom: 0;
	padding-bottom: 0;
}

/* Billedspalten: .shop-image styrer bredden (346px < 750px skærm, 400px
   derover), .pg fylder den. */
.shop-image {
	max-width: 400px;
}

/* ── Billedskifter ───────────────────────────────────────────────────────── */
.pg {
	width: 100%;
	max-width: 100%;
}
.pg-stage {
	position: relative;
	background: #fff;
	border: 1px solid #999;
	box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
}
.pg-viewport {
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	aspect-ratio: 1 / 1;
	background: #fff;
}
.pg-viewport::-webkit-scrollbar { display: none; }
.pg-track {
	display: flex;
	height: 100%;
}
.pg-slide {
	flex: 0 0 100%;
	width: 100%;
	height: 100%;
	margin: 0;
	scroll-snap-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
}
.pg-slide img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	display: block;
	cursor: zoom-in;
}

/* Pile */
.pg-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 30px;
	height: 30px;
	padding: 0;
	border: 1px solid #999;
	border-radius: 50%;
	background-color: #eae7e7;
	background-repeat: no-repeat;
	background-position: center center;
	opacity: .65;
	cursor: pointer;
	z-index: 2;
	transition: opacity .15s;
}
.pg-arrow:hover { opacity: 1; }
.pg-arrow-prev { left: 6px; background-image: url("../images/icon-back.png"); }
.pg-arrow-next { right: 6px; background-image: url("../images/icon-next.png"); }
.pg-arrow[disabled] { opacity: .2; cursor: default; }

/* Forstør-knap */
.pg-expand {
	position: absolute;
	top: 0;
	left: 0;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	cursor: pointer;
	z-index: 2;
	background: url("../images/zoomImage.png") no-repeat 0 0 transparent;
}

/* Billedtæller */
.pg-counter {
	position: absolute;
	right: 6px;
	bottom: 6px;
	z-index: 2;
	padding: 1px 8px;
	border-radius: 10px;
	background: rgba(0, 0, 0, .55);
	color: #fff;
	font-size: 12px;
	line-height: 18px;
}

/* Prikker (mobil) */
.pg-dots {
	display: none;
	justify-content: center;
	gap: 11px;
	padding: 10px 0 2px;
}
.pg-dot {
	width: 9px;
	height: 9px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: #ccc9c9;
	cursor: pointer;
}
.pg-dot.is-active { background-color: #6b6767; }

/* Thumbnails (desktop) */
.pg-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding: 10px 0 2px;
	background: #fff;
}
.pg-thumb {
	width: 64px;
	height: 64px;
	padding: 0;
	border: 1px solid #d4d4d4;
	background: #fff;
	cursor: pointer;
	overflow: hidden;
}
.pg-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.pg-thumb.is-active { border-color: #5c635a; border-width: 2px; }

/* Én-billede-produkter: ingen navigation */
.pg[data-count="1"] .pg-arrow,
.pg[data-count="1"] .pg-dots,
.pg[data-count="1"] .pg-thumbs,
.pg[data-count="1"] .pg-counter,
.pg[data-count="0"] .pg-arrow,
.pg[data-count="0"] .pg-dots,
.pg[data-count="0"] .pg-thumbs,
.pg[data-count="0"] .pg-counter { display: none; }
.pg[data-count="1"] .pg-slide img,
.pg[data-count="0"] .pg-slide img { cursor: zoom-in; }

/* ── Lightbox (bygges af shop-produkt.js, tilføjes <body>) ────────────────── */
.pg-lb {
	position: fixed;
	inset: 0;
	z-index: 9999;
	background: rgba(0, 0, 0, .92);
	display: flex;
	align-items: center;
	justify-content: center;
}
.pg-lb[hidden] { display: none; }
.pg-lb-img {
	max-width: 92vw;
	max-height: 92vh;
	object-fit: contain;
	user-select: none;
	-webkit-user-drag: none;
}
.pg-lb-btn {
	position: absolute;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	cursor: pointer;
	background-repeat: no-repeat;
	background-position: center center;
	background-color: transparent;
}
.pg-lb-close {
	top: 22px;
	right: 22px;
	border: 1px solid #fff;
	border-radius: 50%;
	background-image: url("../images/cancel-image.png");
	background-color: #000;
	width: 34px;
	height: 34px;
}
.pg-lb-prev { left: 14px; background-image: url("../images/arrow-left-white.png"); }
.pg-lb-next { right: 14px; background-image: url("../images/arrow-right-white.png"); }
.pg-lb-prev, .pg-lb-next { top: 50%; transform: translateY(-50%); }
.pg-lb-count {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 20px;
	text-align: center;
	color: #fff;
	font-size: 13px;
}
.pg-lb.is-single .pg-lb-prev,
.pg-lb.is-single .pg-lb-next,
.pg-lb.is-single .pg-lb-count { display: none; }

/* ── Prislinje: "Levering"-link + inaktiv kurv-knap ──────────────────────── */
.shop-delivery-link {
	background: url("../images/shipping.png") no-repeat 0 -2px transparent;
	padding-left: 22px;
	margin-left: 17px;
	font-size: 12px;
	color: #7f867c;
	text-decoration: underline;
	cursor: pointer;
}

/* Del-knappen i prislinjen (vinder over .shop-price span fra shop.css, som
   ellers ville give den grå tekst og bundmargen). */
.shop-price .sharepage {
	margin-bottom: 0;
	color: rgb(51, 51, 51);
	display: inline-block;
}
.shop-buy-disabled { cursor: not-allowed; }
.shop-buy-disabled span {
	opacity: .45;
	pointer-events: none;
}

.shop-desc { margin-bottom: 6px; }
.shop-desc img,
.shop-desc video,
.shop-desc iframe { max-width: 100%; height: auto; }

/* ── "Få besked når varen igen er på lager" (udsolgt) ───────────────────── */
#NotifyDiv {
	overflow: hidden;
	border: 1px solid #999;
	margin-bottom: 15px;
	padding: 14px;
	background-color: beige;
}
#GetNotify {
	font-weight: bold;
	margin-bottom: 12px;
}
#NotifyDiv input[type="email"] {
	width: 220px;
	max-width: 60%;
	border: 1px solid #ccc;
	padding: 3px;
	font-size: 15px;
	float: left;
}
#NotifyDiv button {
	background-color: #5e7a1d;
	color: #fff;
	border: 1px solid #666;
	padding: 4px 10px;
	cursor: pointer;
}
#NotifyDiv.is-confirmed {
	background-color: #d6dcc7;
	color: #000;
}
#NotifyDiv.is-confirmed #GetNotify {
	margin-bottom: 0;
	font-weight: 400;
}

/* ── Fragtoverlay ────────────────────────────────────────────────────────── */
.dr-overlay {
	position: fixed;
	inset: 0;
	z-index: 9998;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 6vh 16px;
}
.dr-overlay[hidden] { display: none; }
.dr-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .6);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
}
.dr-box {
	position: relative;
	width: 100%;
	max-width: 460px;
	max-height: 82vh;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	background: #fff;
	border-radius: 4px;
	padding: 20px 20px 24px;
	box-shadow: 0 8px 30px rgba(0, 0, 0, .35);
}
.dr-close {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 1px solid #e0574c;
	border-radius: 50%;
	background: url("../images/cancel.png") no-repeat center center #fff;
	cursor: pointer;
}
.dr-close:hover { background-color: #f8a29b; }
.dr-title {
	font-size: 19px;
	font-weight: 700;
	color: #333;
	margin: 0 0 12px;
}
.dr-country-name {
	font-weight: 600;
	color: #333;
	margin: 15px 0 4px;
}
.dr-country:first-child .dr-country-name { margin-top: 0; }
.dr-method {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	padding: 8px 0;
	border-bottom: 1px solid #eee;
	font-size: 14px;
}
.dr-method-info { display: flex; flex-direction: column; }
.dr-method-name { color: #5e7a1d; }
.dr-method-time { font-size: 12px; color: #7f867c; }
.dr-method-price { font-weight: 600; white-space: nowrap; padding-top: 4px; }

body.dr-open { overflow: hidden; }

/* ── Responsivt: prikker på mobil, thumbnails på desktop ─────────────────── */
@media (max-width: 749px) {
	.shop-image { max-width: 346px; }
	.pg:not([data-count="0"]):not([data-count="1"]) .pg-dots { display: flex; }
	.pg-thumbs { display: none; }
}
@media (min-width: 750px) {
	.pg-dots { display: none; }
}