/* ══════════════════════════════════════════════════════════════════════
   Shop, produktkategorier og varesider i sitets design (14/9-2026)
   Indlæses kun dér (dds-shop.php → dds_er_shopside()) og er scopet til
   body.dds-shop / body.dds-vare, så kursusproduktsiderne (ps-*) er urørte.
   WooCommerce' standardopmærkning bevares — kun udseendet ændres, så
   kurv-knapper, AJAX og varianter virker som før.
   ══════════════════════════════════════════════════════════════════════ */

body.dds-shop #primary.content-area {
	color: var(--dds-color-text);
	font-family: var(--dds-font);
}
@media (min-width: 768px) {
	body.dds-shop #primary.content-area { padding-top: var(--dds-space-6); padding-bottom: var(--dds-space-8); }
}

/* ── Brødkrumme + sidehoved ──────────────────────────────────────────── */
body.dds-shop .woocommerce-breadcrumb {
	font-size: var(--dds-fs-small);
	color: var(--dds-color-muted);
	margin: 0 0 var(--dds-space-4);
}
body.dds-shop .woocommerce-breadcrumb a { color: var(--dds-color-muted); text-decoration: none; }
body.dds-shop .woocommerce-breadcrumb a:hover { color: var(--dds-color-primary); }
body.dds-shop .woocommerce-products-header { margin: 0 0 var(--dds-space-6); }
body.dds-shop .woocommerce-products-header__title {
	font-size: clamp(32px, 5vw, 44px);
	font-weight: 700;
	line-height: 1.15;
	color: var(--dds-color-text);
	margin: 0;
}
body.dds-shop .term-description,
body.dds-shop .page-description { color: var(--dds-color-muted); font-size: var(--dds-fs-lead); margin-top: var(--dds-space-3); }

/* ── Produktgrid: samme kort som kursusoversigten ────────────────────── */
body.dds-shop ul.products {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: var(--dds-space-5);
	margin: 0 0 var(--dds-space-7) !important;
	padding: 0 !important;
}
body.dds-shop ul.products::before,
body.dds-shop ul.products::after { display: none !important; } /* Woo's clearfix ville blive grid-celler */
body.dds-shop ul.products li.product {
	position: relative;
	display: flex;
	flex-direction: column;
	width: auto !important;
	float: none !important;
	margin: 0 !important;
	padding: 0 !important;
	background: var(--dds-color-bg);
	border: 1px solid var(--dds-color-border);
	border-radius: var(--dds-radius);
	overflow: hidden;
	text-align: left;
	transition: transform var(--dds-tr), box-shadow var(--dds-tr);
}
body.dds-shop ul.products li.product:hover { transform: translateY(-2px); box-shadow: var(--dds-shadow-lg); }
body.dds-shop ul.products li.product a.woocommerce-LoopProduct-link {
	display: flex;
	flex-direction: column;
	flex: 1;
	color: inherit;
	text-decoration: none;
}
body.dds-shop ul.products li.product img {
	width: 100% !important;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	margin: 0 !important;
	border-radius: 0 !important;
	background: var(--dds-color-bg-subtle);
	box-shadow: none !important;
}
/* Vare uden billede: WooCommerce' pladsholder, dæmpet på lys baggrund */
body.dds-shop ul.products li.product img[src*="woocommerce-placeholder"] { object-fit: contain; padding: 18%; opacity: .45; mix-blend-mode: multiply; } /* pladsholderens hvide felt forsvinder i baggrunden */
body.dds-shop ul.products li.product .woocommerce-loop-product__title {
	font-size: 18px !important;
	font-weight: 700;
	line-height: 1.3;
	color: var(--dds-color-text);
	margin: 0 !important;
	padding: var(--dds-space-5) var(--dds-space-5) var(--dds-space-2) !important;
}
body.dds-shop ul.products li.product .price {
	display: block;
	margin: 0 0 var(--dds-space-4) !important;
	padding: 0 var(--dds-space-5);
	font-size: 16px !important;
	font-weight: 600;
	color: var(--dds-color-text) !important;
}
body.dds-shop ul.products li.product .price del { color: var(--dds-color-muted); font-weight: 400; }
body.dds-shop ul.products li.product .price ins { text-decoration: none; color: var(--dds-color-primary); }

/* ── Knapper: samme blå pille som "Gå til betaling" i kurven ─────────── */
body.dds-shop ul.products li.product .button,
body.dds-vare div.product form.cart .single_add_to_cart_button {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	font-family: var(--dds-font) !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	color: #fff !important;
	background: var(--dds-color-primary) !important;
	border: none !important;
	border-radius: var(--dds-radius-pill) !important;
	padding: 13px 24px !important;
	text-decoration: none !important;
	transition: background var(--dds-tr) !important;
}
body.dds-shop ul.products li.product .button:hover,
body.dds-vare div.product form.cart .single_add_to_cart_button:hover { background: var(--dds-color-primary-dark) !important; }
body.dds-shop ul.products li.product .button { margin: auto var(--dds-space-5) var(--dds-space-5) !important; }
/* Efter AJAX-tilføjelse: WooCommerce indsætter et "Se kurv"-link */
body.dds-shop ul.products li.product .added_to_cart {
	margin: calc(var(--dds-space-3) * -1) var(--dds-space-5) var(--dds-space-4);
	font-size: 14px;
	font-weight: 600;
	color: var(--dds-color-primary);
	text-decoration: none;
}
body.dds-shop span.onsale {
	top: 12px !important;
	left: 12px !important;
	right: auto !important;
	min-width: 0 !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 4px 12px !important;
	border-radius: var(--dds-radius-pill) !important;
	background: var(--dds-color-primary) !important;
	font-size: 12px !important;
	line-height: 1.4 !important;
}

/* ── Vareside: billede til venstre, købekort til højre ───────────────── */
body.dds-vare div.product {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--dds-space-7);
	align-items: start;
}
body.dds-vare div.product > * { grid-column: 1 / -1; }
body.dds-vare div.product > .woocommerce-product-gallery { grid-column: 1; }
body.dds-vare div.product > .summary { grid-column: 2; }
body.dds-vare div.product > span.onsale { grid-column: 1; grid-row: 1; justify-self: start; position: relative; z-index: 2; }
body.dds-vare div.product .woocommerce-product-gallery,
body.dds-vare div.product .summary {
	width: auto !important;
	float: none !important;
	margin: 0 !important;
}
body.dds-vare div.product .woocommerce-product-gallery {
	background: var(--dds-color-bg-subtle);
	border: 1px solid var(--dds-color-border-soft);
	border-radius: var(--dds-radius-lg);
	overflow: hidden;
}
body.dds-vare div.product .woocommerce-product-gallery img { border-radius: 0; }
body.dds-vare .woocommerce-product-gallery__image--placeholder img {
	aspect-ratio: 4 / 3;
	object-fit: contain;
	padding: 18%;
	opacity: .45;
	mix-blend-mode: multiply;
	border: 0 !important;
}
body.dds-vare div.product .flex-control-thumbs { padding: var(--dds-space-3) !important; display: flex; gap: var(--dds-space-2); }
body.dds-vare div.product .flex-control-thumbs li { width: 64px !important; float: none !important; }
body.dds-vare div.product .flex-control-thumbs img { border-radius: var(--dds-radius-sm); }

body.dds-vare div.product .summary {
	background: var(--dds-color-bg);
	border: 1px solid rgba(218, 224, 231, 0.6);
	border-radius: var(--dds-radius-lg);
	box-shadow: 0 2px 12px rgba(31, 38, 46, 0.06);
	padding: var(--dds-space-6);
	/* Ikke sticky: en sticky grid-celle er kun begrænset af hele div.product,
	   som også rummer beskrivelsen — kortet gled ned over teksten (14/9-2026). */
}
body.dds-vare div.product .product_title {
	font-size: clamp(28px, 3.4vw, 40px);
	font-weight: 700;
	line-height: 1.15;
	color: var(--dds-color-text);
	margin: 0 0 var(--dds-space-3);
}
body.dds-vare div.product .summary .price {
	font-size: 28px !important;
	font-weight: 700;
	color: var(--dds-color-text) !important;
	margin: 0 0 var(--dds-space-5);
}
body.dds-vare div.product .summary .price del { color: var(--dds-color-muted); font-size: 18px; font-weight: 400; }
body.dds-vare div.product .summary .price ins { text-decoration: none; color: var(--dds-color-primary); }
body.dds-vare div.product .woocommerce-product-details__short-description {
	color: var(--dds-color-muted);
	font-size: var(--dds-fs-body);
	line-height: 1.7;
	margin: 0 0 var(--dds-space-5);
}
body.dds-vare div.product .stock { font-size: 14px; font-weight: 600; color: var(--dds-success-icon); margin: 0 0 var(--dds-space-3); }
body.dds-vare div.product .stock.out-of-stock { color: var(--dds-danger-icon); }
body.dds-vare div.product form.cart {
	display: flex;
	align-items: stretch;
	gap: var(--dds-space-3);
	margin: 0 !important;
}
body.dds-vare div.product form.cart::before,
body.dds-vare div.product form.cart::after { display: none !important; }
body.dds-vare div.product form.cart .quantity { float: none !important; margin: 0 !important; }
body.dds-vare div.product form.cart .quantity .qty {
	width: 76px;
	height: 100%;
	min-height: 48px;
	padding: 0 8px;
	font-family: var(--dds-font);
	font-size: 16px;
	font-weight: 600;
	color: var(--dds-color-text);
	text-align: center;
	border: 1px solid var(--dds-color-border);
	border-radius: var(--dds-radius-pill);
	background: var(--dds-color-bg);
}
body.dds-vare div.product form.cart .single_add_to_cart_button { flex: 1; float: none !important; min-height: 48px; }
body.dds-vare div.product form.variations_form table.variations { margin-bottom: var(--dds-space-4); }
body.dds-vare div.product form.variations_form select {
	width: 100%;
	min-height: 44px;
	padding: 0 12px;
	border: 1px solid var(--dds-color-border);
	border-radius: var(--dds-radius-sm);
	font-family: var(--dds-font);
}

/* ── Beskrivelse (faner) ─────────────────────────────────────────────── */
body.dds-vare div.product .woocommerce-tabs {
	margin-top: var(--dds-space-7);
	padding-top: var(--dds-space-6);
	border-top: 1px solid var(--dds-color-border-soft);
}
/* Kun én fane (Beskrivelse) → ingen fanebjælke, bare afsnittet */
body.dds-vare div.product .woocommerce-tabs ul.tabs:not(:has(li + li)) { display: none !important; }
body.dds-vare div.product .woocommerce-tabs ul.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--dds-space-2);
	margin: 0 0 var(--dds-space-5) !important;
	padding: 0 !important;
	border: 0 !important;
	overflow: visible !important;
}
body.dds-vare div.product .woocommerce-tabs ul.tabs::before,
body.dds-vare div.product .woocommerce-tabs ul.tabs li::before,
body.dds-vare div.product .woocommerce-tabs ul.tabs li::after { display: none !important; }
body.dds-vare div.product .woocommerce-tabs ul.tabs li {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: var(--dds-radius-pill) !important;
	background: var(--dds-color-bg-subtle) !important;
}
body.dds-vare div.product .woocommerce-tabs ul.tabs li a {
	display: block;
	padding: 8px 18px !important;
	font-size: 14px;
	font-weight: 600;
	color: var(--dds-color-muted) !important;
}
body.dds-vare div.product .woocommerce-tabs ul.tabs li.active { background: var(--dds-color-primary) !important; }
body.dds-vare div.product .woocommerce-tabs ul.tabs li.active a { color: #fff !important; }
body.dds-vare div.product .woocommerce-Tabs-panel {
	max-width: 760px;
	margin: 0 !important;
	font-size: var(--dds-fs-body);
	line-height: 1.75;
	color: var(--dds-color-text);
}
body.dds-vare div.product .woocommerce-Tabs-panel h2 {
	font-size: var(--dds-fs-h3);
	font-weight: 700;
	color: var(--dds-color-text);
	margin: 0 0 var(--dds-space-4);
}
body.dds-vare div.product .woocommerce-Tabs-panel a { color: var(--dds-color-primary); }
body.dds-vare div.product table.shop_attributes { border-color: var(--dds-color-border-soft); }
body.dds-vare div.product table.shop_attributes th,
body.dds-vare div.product table.shop_attributes td { font-style: normal; padding: 10px 12px; border-color: var(--dds-color-border-soft); }

/* Relaterede varer / mersalg bruger kortgriddet ovenfor */
body.dds-vare div.product .related > h2,
body.dds-vare div.product .upsells > h2 {
	font-size: var(--dds-fs-h3);
	font-weight: 700;
	color: var(--dds-color-text);
	margin: var(--dds-space-7) 0 var(--dds-space-5);
}

/* ── Beskeder ("… er lagt i kurven") ─────────────────────────────────── */
/* WooCommerce scroller/fokuserer beskeden efter "Tilføj til kurv" — uden
   scroll-margin endte den bag den faste header (desktop 90px, mobil 64px). */
body.dds-shop .woocommerce-notices-wrapper,
body.dds-shop .woocommerce-message,
body.dds-shop .woocommerce-info,
body.dds-shop .woocommerce-error { scroll-margin-top: 120px; }
@media (max-width: 767px) {
	body.dds-shop .woocommerce-notices-wrapper,
	body.dds-shop .woocommerce-message,
	body.dds-shop .woocommerce-info,
	body.dds-shop .woocommerce-error { scroll-margin-top: calc(var(--dds-mobil-header-h, 64px) + 16px); }
}
body.dds-shop .woocommerce-message,
body.dds-shop .woocommerce-info,
body.dds-shop .woocommerce-error {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--dds-space-3);
	margin: 0 0 var(--dds-space-5) !important;
	padding: 14px 18px 14px 48px !important;
	font-size: 15px;
	color: var(--dds-color-text) !important;
	background: var(--dds-info-bg) !important;
	border: 1px solid var(--dds-info-border) !important;
	border-radius: var(--dds-radius) !important;
}
body.dds-shop .woocommerce-message::before,
body.dds-shop .woocommerce-info::before { color: var(--dds-color-primary) !important; top: 50% !important; transform: translateY(-50%); }
body.dds-shop .woocommerce-error { background: var(--dds-danger-bg) !important; border-color: var(--dds-danger-border) !important; }
body.dds-shop .woocommerce-message::after,
body.dds-shop .woocommerce-info::after { display: none !important; }
body.dds-shop .woocommerce-message .button,
body.dds-shop .woocommerce-info .button {
	order: 2;
	float: none !important;
	padding: 8px 18px !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	color: #fff !important;
	background: var(--dds-color-primary) !important;
	border-radius: var(--dds-radius-pill) !important;
	text-decoration: none !important;
}

/* ── Mobil ───────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
	body.dds-shop ul.products {
		grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr));
		gap: var(--dds-space-3);
	}
	body.dds-shop ul.products li.product .woocommerce-loop-product__title { font-size: 15px !important; padding: var(--dds-space-4) var(--dds-space-4) var(--dds-space-1) !important; }
	body.dds-shop ul.products li.product .price { padding: 0 var(--dds-space-4); font-size: 15px !important; margin-bottom: var(--dds-space-3) !important; }
	body.dds-shop ul.products li.product .button { margin: auto var(--dds-space-4) var(--dds-space-4) !important; padding: 11px 12px !important; font-size: 14px !important; }
	body.dds-shop ul.products li.product .added_to_cart { margin: calc(var(--dds-space-2) * -1) var(--dds-space-4) var(--dds-space-3); }

	body.dds-vare div.product { grid-template-columns: minmax(0, 1fr); gap: var(--dds-space-5); }
	body.dds-vare div.product > .woocommerce-product-gallery,
	body.dds-vare div.product > .summary { grid-column: 1; }
	body.dds-vare div.product .summary { padding: var(--dds-space-5); }
	body.dds-vare div.product .summary .price { font-size: 24px !important; }
	body.dds-vare div.product .woocommerce-tabs { margin-top: var(--dds-space-5); padding-top: var(--dds-space-5); }
}