/**
 * ARTING – Single Product Template
 * -------------------------------------------------------------------------
 * Vsi selektorji so v imenskem prostoru .arting-product-*.
 * Edini "globalni" selektor je :root, ki pa nastavlja izključno lastne
 * spremenljivke s predpono --arting-, zato ne more povoziti ničesar drugega.
 *
 * Primarna zelena se povzame iz WoodMart teme (--wd-primary-color).
 * Rezervna vrednost je vzeta iz priloženih ARTING ikon (#4fa01c).
 * Tipografija se podeduje od teme – nikjer ne določamo font-family.
 */

:root {
	--arting-green: var(--wd-primary-color, #4fa01c);
	--arting-green-dark: #2c4620;
	--arting-green-soft: #f1f8ec;
	--arting-green-line: #cfe5bf;
	--arting-border: #e3e8de;
	--arting-surface: #ffffff;
	--arting-ink: #1e2a17;
	--arting-muted: #66735f;
	--arting-radius: 6px;
	--arting-gap: 20px;
	/* Razmik med glavnimi sklopi: 44 px namizje, 28 px telefon. */
	--arting-section-gap: 44px;
}

/* Ne zanašamo se na globalni box-sizing teme – kartice morajo imeti
   predvidljivo širino tudi, ce ga tema ne nastavi. */
.arting-product-block,
.arting-product-area,
.arting-product-benefit,
.arting-product-doc__link,
.arting-product-table-scroll,
.arting-product-cta,
.arting-product-cta__btn,
.arting-product-placeholder {
	box-sizing: border-box;
}

/* -------------------------------------------------------------------------
   Drobtinice
   ---------------------------------------------------------------------- */

/* Drobtinice izriše WoodMart s svojo predlogo in svojimi ločili –
   mi dodamo samo ovoj, da jih ne prepišemo. */
.arting-product-breadcrumbs {
	word-break: break-word;
}

/* -------------------------------------------------------------------------
   Naslov stolpca v informacijskem sklopu
   (uporabi se na Elementor Heading widgetu prek razreda arting-product-heading)
   ---------------------------------------------------------------------- */

.arting-product-heading,
.arting-product-heading .elementor-heading-title {
	margin: 0;
	color: var(--arting-ink);
	font-size: 17px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	line-height: 1.3;
}

.arting-product-heading {
	padding-bottom: 12px;
	border-bottom: 2px solid var(--arting-green);
	margin-bottom: 20px;
}

/* -------------------------------------------------------------------------
   Hero – galerija in besedilo
   ---------------------------------------------------------------------- */

.arting-product-gallery {
	max-width: 100%;
}

.arting-product-gallery img {
	max-width: 100%;
	height: auto;
}

.arting-product-gallery__fallback-img {
	display: block;
	border: 1px solid var(--arting-border);
	border-radius: var(--arting-radius);
}

/* WoodMart izriše naslov in kratek opis s svojima widgetoma; velikosti
   uskladimo samo znotraj ARTING hero stolpca. */
.arting-product-col--intro .product_title,
.arting-product-col--intro .entry-title {
	margin: 0 0 8px;
	color: var(--arting-ink);
	font-size: clamp(28px, 2.9vw, 38px);
	line-height: 1.18;
}

.arting-product-col--intro .woocommerce-product-details__short-description,
.arting-product-col--intro .wd-single-short-desc {
	font-size: 16px;
	line-height: 1.7;
	color: var(--arting-muted);
}

.arting-product-col--intro .woocommerce-product-details__short-description p:last-child,
.arting-product-col--intro .wd-single-short-desc p:last-child {
	margin-bottom: 0;
}

.arting-product-title {
	margin: 0 0 8px;
	color: var(--arting-ink);
	/* 28–30 px na telefonu, 36–38 px na namizju. */
	font-size: clamp(28px, 2.9vw, 38px);
	line-height: 1.18;
}

.arting-product-type {
	margin: 0 0 18px;
	color: var(--arting-green);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.arting-product-desc {
	margin: 0 0 24px;
	color: var(--arting-muted);
	font-size: 16px;
	line-height: 1.7;
}

.arting-product-desc > *:last-child {
	margin-bottom: 0;
}

/* -------------------------------------------------------------------------
   Pomembno pri uporabi (neobvezen napotek)
   ---------------------------------------------------------------------- */

.arting-product-note {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 20px 0 0;
	padding: 14px 16px;
	background: var(--arting-green-soft);
	border: 1px solid var(--arting-green-line);
	border-left: 3px solid var(--arting-green);
	border-radius: var(--arting-radius);
	box-sizing: border-box;
}

.arting-product-note__icon {
	display: flex;
	flex: 0 0 22px;
	width: 22px;
	height: 22px;
	margin-top: 1px;
	align-items: center;
	justify-content: center;
	color: var(--arting-green);
}

.arting-product-note__icon svg {
	width: 100%;
	height: 100%;
}

.arting-product-note__text {
	margin: 0;
	color: var(--arting-ink);
	font-size: 15px;
	line-height: 1.55;
}

/* -------------------------------------------------------------------------
   Področja uporabe
   ---------------------------------------------------------------------- */

.arting-product-areas {
	margin: 0;
}

.arting-product-areas__heading {
	margin: 0 0 14px;
	color: var(--arting-ink);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.arting-product-areas__list {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Tema doda vsakemu <li> spodnjo margino; v naših seznamih ni potrebna. */
.arting-product-areas__list > li,
.arting-product-benefits > li,
.arting-product-docs > li {
	margin: 0;
}

.arting-product-area {
	/* Enakomerne kartice; ena sama se ne raztegne čez cel stolpec. */
	flex: 1 1 112px;
	max-width: 200px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 18px 10px 15px;
	background: var(--arting-surface);
	border: 1px solid var(--arting-green-line);
	border-radius: var(--arting-radius);
	text-align: center;
}

.arting-product-area__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	color: var(--arting-green);
}

.arting-product-area__icon svg,
.arting-product-area__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.arting-product-area__label {
	color: var(--arting-ink);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	line-height: 1.2;
}

/* -------------------------------------------------------------------------
   Informacijski sklop – prilagodljiva postavitev
   -------------------------------------------------------------------------
   Razmik do naslednjega sklopa nosi ta element, ne Elementor container:
   če ni vsebine, se ne izriše nič in za sabo ne pusti praznega prostora.
   ---------------------------------------------------------------------- */

/* Vrstni red je vedno enak: tehnični podatki + pomoč, nato pakiranje,
   nato dokumentacija. Razmik med sklopi nosi ta ovoj, zato prazen sklop
   ne pusti praznega prostora. */
.arting-product-info {
	display: block;
	margin-bottom: var(--arting-section-gap);
}

.arting-product-info > .arting-product-block,
.arting-product-info > .arting-product-row {
	margin-bottom: var(--arting-section-gap);
}

.arting-product-info > *:last-child {
	margin-bottom: 0;
}

/* Tehnični podatki ~65 % / pomoč pri izbiri ~35 %. */
.arting-product-row--specs {
	display: grid;
	grid-template-columns: minmax(0, 65fr) minmax(0, 35fr);
	gap: 28px;
	/* Kontaktni blok se ne razteguje na višino tabele – njegova višina
	   sledi vsebini, vrh pa je poravnan z vrhom tehničnih podatkov. */
	align-items: start;
}

/* Brez tehničnih podatkov kontaktni blok ni ozek stolpec ob praznini. */
.arting-product-row--help-only {
	display: block;
}

.arting-product-row__main,
.arting-product-row__aside {
	min-width: 0;
}

@media (max-width: 900px) {
	.arting-product-row--specs {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
	}
}

/* -------------------------------------------------------------------------
   Tehnične specifikacije
   ---------------------------------------------------------------------- */

.arting-product-spectable {
	width: 100%;
	margin: 0;
	border: 1px solid var(--arting-border);
	border-collapse: collapse;
	background: var(--arting-surface);
	font-size: 15px;
	line-height: 1.45;
	table-layout: fixed;
}

.arting-product-spectable__label,
.arting-product-spectable__value {
	padding: 11px 14px;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--arting-border);
	word-break: break-word;
	white-space: normal;
}

.arting-product-spectable__label {
	width: 56%;
	color: var(--arting-muted);
	font-weight: 500;
}

.arting-product-spectable__value {
	color: var(--arting-ink);
	font-weight: 700;
	border-left: 1px solid var(--arting-border);
}

.arting-product-spectable__unit {
	color: var(--arting-muted);
	font-size: 13px;
	font-weight: 600;
}

.arting-product-spectable tbody tr:nth-child(even) .arting-product-spectable__label,
.arting-product-spectable tbody tr:nth-child(even) .arting-product-spectable__value {
	background: rgba(30, 42, 23, 0.02);
}

.arting-product-spectable tbody tr:last-child .arting-product-spectable__label,
.arting-product-spectable tbody tr:last-child .arting-product-spectable__value {
	border-bottom: 0;
}

/* -------------------------------------------------------------------------
   Dokumentacija
   ---------------------------------------------------------------------- */

.arting-product-docs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.arting-product-doc {
	margin: 0;
}

.arting-product-doc__link {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	text-align: center;
	height: 100%;
	gap: 10px;
	padding: 22px 16px 18px;
	background: var(--arting-surface);
	border: 1px solid var(--arting-border);
	border-radius: var(--arting-radius);
	color: var(--arting-ink);
	text-decoration: none;
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.arting-product-doc__link:hover,
.arting-product-doc__link:focus-visible {
	border-color: var(--arting-green);
	box-shadow: 0 2px 10px rgba(31, 42, 23, 0.07);
	color: var(--arting-ink);
	text-decoration: none;
}

.arting-product-doc__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	color: var(--arting-green);
	background: var(--arting-green-soft);
	border-radius: 50%;
}

.arting-product-doc__icon svg {
	width: 24px;
	height: 24px;
}

.arting-product-doc__body {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	min-width: 0;
}

.arting-product-doc__title {
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
	word-break: break-word;
}

.arting-product-doc__subtitle {
	font-size: 13px;
	color: var(--arting-muted);
	line-height: 1.35;
}

.arting-product-doc__meta {
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--arting-muted);
}

.arting-product-doc__action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin-top: auto;
	padding-top: 8px;
	color: var(--arting-green);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.arting-product-doc__action svg {
	width: 16px;
	height: 16px;
}

/* -------------------------------------------------------------------------
   Pakiranje
   ---------------------------------------------------------------------- */

.arting-product-packaging__intro {
	margin: 0 0 16px;
	color: var(--arting-muted);
	font-size: 15px;
	line-height: 1.6;
}

.arting-product-packaging__intro > *:last-child {
	margin-bottom: 0;
}

.arting-product-table-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid var(--arting-border);
	border-radius: var(--arting-radius);
	max-width: 100%;
	/* Sence ob robovih se pojavijo samo, kadar je kaj skritega –
	   trik z background-attachment: local, brez JavaScripta. */
	background-color: var(--arting-surface);
	background-image:
		linear-gradient(to right, var(--arting-surface) 40%, rgba(255, 255, 255, 0)),
		linear-gradient(to left, var(--arting-surface) 40%, rgba(255, 255, 255, 0)),
		linear-gradient(to right, rgba(30, 42, 23, 0.20), rgba(30, 42, 23, 0)),
		linear-gradient(to left, rgba(30, 42, 23, 0.20), rgba(30, 42, 23, 0));
	background-position: left center, right center, left center, right center;
	background-repeat: no-repeat;
	background-size: 36px 100%, 36px 100%, 16px 100%, 16px 100%;
	background-attachment: local, local, scroll, scroll;
}

.arting-product-table-scroll::-webkit-scrollbar {
	height: 8px;
}

.arting-product-table-scroll::-webkit-scrollbar-track {
	background: var(--arting-green-soft);
}

.arting-product-table-scroll::-webkit-scrollbar-thumb {
	background: var(--arting-green);
	border-radius: 4px;
}

.arting-product-table-scroll:focus-visible {
	outline: 2px solid var(--arting-green);
	outline-offset: 2px;
}

.arting-product-table {
	width: 100%;
	min-width: 640px;
	/* WooCommerce/WoodMart dajeta tabelam spodnjo margino – tu bi pustila
	   ~35 px praznega prostora pod zadnjo vrstico. */
	margin: 0;
	border-collapse: collapse;
	background: transparent;
	font-size: 13px;
	line-height: 1.4;
}

.arting-product-table__caption {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.arting-product-table th,
.arting-product-table td {
	padding: 10px 12px;
	text-align: left;
	border-bottom: 1px solid var(--arting-border);
	white-space: nowrap;
}

.arting-product-table thead th {
	background: var(--arting-green-soft);
	color: var(--arting-ink);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	white-space: nowrap;
}

.arting-product-table tbody tr:last-child th,
.arting-product-table tbody tr:last-child td {
	border-bottom: 0;
}

.arting-product-table tbody tr:nth-child(even) td {
	/* Polprosojno, da so sence ob robovih tabele še vidne. */
	background: rgba(30, 42, 23, 0.02);
}

.arting-product-table__empty {
	color: var(--arting-muted);
}

/* -------------------------------------------------------------------------
   CTA
   ---------------------------------------------------------------------- */

.arting-product-cta {
	padding: 34px 28px;
	background: var(--arting-green-soft);
	border: 1px solid var(--arting-green-line);
	border-radius: var(--arting-radius);
	text-align: center;
}

/* Pomoč pri izbiri ob tehničnih podatkih: enaka višina kot tabela,
   besedilo levo, gumba drug pod drugim. */
.arting-product-cta--aside {
	padding: 28px 24px;
	background: var(--arting-green-dark);
	border-color: var(--arting-green-dark);
	text-align: left;
}

.arting-product-cta--aside .arting-product-cta__heading {
	color: #ffffff;
	font-size: clamp(19px, 1.6vw, 23px);
	letter-spacing: 0.02em;
}

.arting-product-cta--aside .arting-product-cta__text {
	max-width: none;
	margin: 0 0 20px;
	color: rgba(255, 255, 255, 0.82);
	font-size: 15px;
}

.arting-product-cta--aside .arting-product-cta__actions {
	flex-direction: column;
	align-items: stretch;
	justify-content: flex-start;
}

.arting-product-cta--aside .arting-product-cta__btn {
	justify-content: center;
}

.arting-product-cta--aside .arting-product-cta__btn--ghost {
	color: #ffffff;
	border-color: rgba(255, 255, 255, 0.55);
}

.arting-product-cta--aside .arting-product-cta__btn--ghost:hover,
.arting-product-cta--aside .arting-product-cta__btn--ghost:focus-visible {
	background: #ffffff;
	border-color: #ffffff;
	color: var(--arting-green-dark);
}

.arting-product-cta--aside .arting-product-cta__btn--primary:hover,
.arting-product-cta--aside .arting-product-cta__btn--primary:focus-visible {
	background: #ffffff;
	border-color: #ffffff;
	color: var(--arting-green-dark);
}

/* Samostojna vrstica (brez tehničnih podatkov): širši blok, gumba v vrsti. */
.arting-product-row--help-only .arting-product-cta--aside {
	text-align: center;
}

.arting-product-row--help-only .arting-product-cta__text {
	max-width: 620px;
	margin-left: auto;
	margin-right: auto;
}

@media (min-width: 601px) {
	.arting-product-row--help-only .arting-product-cta__actions {
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}
}

.arting-product-cta__heading {
	margin: 0 0 10px;
	color: var(--arting-ink);
	font-size: clamp(20px, 2.4vw, 26px);
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.25;
}

.arting-product-cta__text {
	max-width: 640px;
	margin: 0 auto 22px;
	color: var(--arting-muted);
	font-size: 16px;
	line-height: 1.6;
}

.arting-product-cta__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 14px;
}

.arting-product-cta__btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 13px 26px;
	border: 2px solid var(--arting-green);
	border-radius: 4px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	line-height: 1;
	transition: background-color 0.18s ease, color 0.18s ease;
}

.arting-product-cta__btn-icon {
	display: inline-flex;
	width: 18px;
	height: 18px;
}

.arting-product-cta__btn-icon svg {
	width: 100%;
	height: 100%;
}

.arting-product-cta__btn--primary {
	background: var(--arting-green);
	color: #ffffff;
}

.arting-product-cta__btn--primary:hover,
.arting-product-cta__btn--primary:focus-visible {
	background: transparent;
	color: var(--arting-green);
}

.arting-product-cta__btn--ghost {
	background: transparent;
	color: var(--arting-green);
}

.arting-product-cta__btn--ghost:hover,
.arting-product-cta__btn--ghost:focus-visible {
	background: var(--arting-green);
	color: #ffffff;
}

.arting-product-cta .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* -------------------------------------------------------------------------
   Nadomestni napis – viden samo v Elementor urejevalniku
   ---------------------------------------------------------------------- */

.arting-product-placeholder {
	padding: 14px 16px;
	border: 1px dashed var(--arting-green-line);
	border-radius: var(--arting-radius);
	background: var(--arting-green-soft);
	color: var(--arting-muted);
	font-size: 13px;
	line-height: 1.4;
	text-align: center;
}

/* -------------------------------------------------------------------------
   Odzivnost
   ---------------------------------------------------------------------- */

@media (max-width: 1024px) {
	:root {
		--arting-section-gap: 34px;
	}
}

@media (max-width: 767px) {
	:root {
		--arting-section-gap: 28px;
	}

	.arting-product-heading,
	.arting-product-heading .elementor-heading-title {
		font-size: 16px;
	}

	.arting-product-spectable {
		font-size: 14px;
	}

	.arting-product-spectable__label,
	.arting-product-spectable__value {
		padding: 10px 12px;
	}

	.arting-product-spectable__label {
		width: 52%;
	}

	.arting-product-cta--aside {
		padding: 22px 18px;
	}

	/* Kartice si enakomerno razdelijo vrstico in se ne prelomijo: `min-width: 0`
	   dovoli, da se skrčijo pod svojo najmanjšo vsebinsko širino (prej je ena
	   kartica zaradi ~1 px preširoke vsebine padla v drugo, napol prazno vrstico). */
	.arting-product-areas__list {
		flex-wrap: nowrap;
		gap: 8px;
	}

	.arting-product-area {
		flex: 1 1 0;
		min-width: 0;
		max-width: none;
		padding: 14px 6px 12px;
	}

	.arting-product-area__icon {
		width: 38px;
		height: 38px;
	}

	.arting-product-area__label {
		font-size: 12px;
		letter-spacing: 0.03em;
	}

	.arting-product-cta {
		padding: 26px 18px;
	}

	.arting-product-cta__actions {
		flex-direction: column;
		align-items: stretch;
	}

	.arting-product-cta__btn {
		justify-content: center;
	}

}

/* Zelo ozki zasloni: kartice ena pod drugo, sicer se besedilo lomi po črkah. */
@media (max-width: 359px) {
	.arting-product-benefits,
	.arting-product-docs {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (prefers-reduced-motion: reduce) {
	.arting-product-doc__link,
	.arting-product-cta__btn {
		transition: none;
	}
}

/* -------------------------------------------------------------------------
   Zložljivi sklopi (Pakiranje, Dokumentacija) – <details>/<summary>
   ---------------------------------------------------------------------- */

.arting-product-block--collapsible {
	border-top: 2px solid var(--arting-green);
}

.arting-product-block--collapsible > .arting-product-block__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 0;
	cursor: pointer;
	list-style: none;
}

.arting-product-block--collapsible > .arting-product-block__summary::-webkit-details-marker {
	display: none;
}

.arting-product-block--collapsible > .arting-product-block__summary .arting-product-heading {
	margin: 0;
	padding: 0;
	border: 0;
}

.arting-product-block--collapsible > .arting-product-block__summary:focus-visible {
	outline: 2px solid var(--arting-green);
	outline-offset: 3px;
}

.arting-product-block__chevron {
	display: inline-flex;
	width: 26px;
	height: 26px;
	flex: 0 0 26px;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--arting-green-line);
	border-radius: 50%;
	color: var(--arting-green);
	transition: transform 0.18s ease;
}

.arting-product-block__chevron svg {
	width: 16px;
	height: 16px;
}

.arting-product-block--collapsible[open] > .arting-product-block__summary .arting-product-block__chevron {
	transform: rotate(180deg);
}

.arting-product-block__body {
	padding: 4px 0 8px;
}

/* -------------------------------------------------------------------------
   Prednosti materiala („Zakaj ta material?")
   ---------------------------------------------------------------------- */

.arting-product-benefits-section {
	margin-bottom: var(--arting-section-gap);
}

.arting-product-benefits {
	display: grid;
	/* Namizje: praviloma štiri kartice v vrstici (minmax poskrbi, da se pri
	   ožjih zaslonih zmanjša na tri, dve ali eno). Pri manj prednostih kartice
	   ne zrastejo čez mero – omejene so navzgor in poravnane na sredino. */
	grid-template-columns: repeat(auto-fit, minmax(230px, 285px));
	justify-content: center;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.arting-product-benefit {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	width: 100%;
	max-width: 320px;
	justify-self: center;
	padding: 24px 18px 20px;
	background: var(--arting-surface);
	border: 1px solid var(--arting-green-line);
	border-radius: var(--arting-radius);
	text-align: center;
}

.arting-product-benefit__icon {
	display: flex;
	flex: 0 0 64px;
	width: 64px;
	height: 64px;
	align-items: center;
	justify-content: center;
	background: var(--arting-green-soft);
	border: 1px solid var(--arting-green-line);
	border-radius: 50%;
	color: var(--arting-green);
}

.arting-product-benefit__icon svg,
.arting-product-benefit__img {
	width: 32px;
	height: 32px;
	display: block;
	object-fit: contain;
}

.arting-product-benefit__body {
	display: flex;
	flex-direction: column;
	gap: 7px;
	min-width: 0;
}

.arting-product-benefit__title {
	color: var(--arting-ink);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	line-height: 1.25;
}

.arting-product-benefit__text {
	color: var(--arting-muted);
	font-size: 14px;
	line-height: 1.55;
}

/* -------------------------------------------------------------------------
   Enoten okvir fotografije: cel izdelek, brez rezanja, nevtralna podlaga
   ---------------------------------------------------------------------- */

/* Fotografije v katalogu so kvadratne datoteke, izdelek pa je v njih ploščat
   pas na sredini (izmerjeno: 31–50 % višine datoteke, 20–34 % prazno zgoraj in
   spodaj). Kvadratni okvir zato prikaže predvsem prazen prostor.

   Nižji okvir (4:3) dobi SAMO glavna fotografija; odrezan je le prazni pas nad
   in pod izdelkom. Sličice galerije in sloj povečave ostanejo nedotaknjeni,
   izvorna datoteka pa nespremenjena – klik odpre celotno fotografijo.
   Pogoj za takšne fotografije: izdelek naj ima nad in pod sabo vsaj ~15 %
   praznega roba (obe fotografiji v katalogu ga imata 20 % ali več). */
.arting-product-col--gallery .wd-gallery-images .wd-carousel-item,
.arting-product-col--gallery .wd-gallery-images .woocommerce-product-gallery__image {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border: 1px solid var(--arting-border);
	border-radius: var(--arting-radius);
	background: #fafaf8;
}

.arting-product-col--gallery .wd-gallery-images .wd-carousel-item > a,
.arting-product-col--gallery .wd-gallery-images .woocommerce-product-gallery__image > a {
	display: block;
	height: 100%;
}

.arting-product-col--gallery .wd-gallery-images .wd-carousel-item img,
.arting-product-col--gallery .wd-gallery-images .woocommerce-product-gallery__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	background: #fafaf8;
}

/* Sličice galerije in sloj povečave: brez naših omejitev. */
.arting-product-col--gallery .wd-gallery-thumb .wd-carousel-item,
.arting-product-col--gallery .wd-gallery-thumb .woocommerce-product-gallery__image {
	aspect-ratio: auto;
	overflow: visible;
	border: 0;
	border-radius: 0;
}

.arting-product-col--gallery .wd-gallery-thumb img {
	width: auto;
	height: auto;
	max-width: 100%;
	object-fit: contain;
}

.arting-product-col--gallery img.zoomImg {
	width: auto;
	height: auto;
	object-fit: contain;
}

/* -------------------------------------------------------------------------
   Prazen shortcode ne sme pustiti razmika
   -------------------------------------------------------------------------
   Elementor stolpec ima razmik med elementi (row-gap). Widget, katerega
   shortcode ne izriše ničesar, ostane prazen element in razmik ostane.
   Skrijemo ga – samo znotraj ARTING stolpcev, zato drugod ni učinka.
   (Brskalniki brez :has() se obnašajo kot doslej: razmik ostane, vsebine ni.)
   ---------------------------------------------------------------------- */

.arting-product-col .elementor-widget-shortcode:has(> .elementor-shortcode:empty) {
	display: none;
}


/* -------------------------------------------------------------------------
   Mreže kartic po širinah – pravila so NAMENOMA na koncu datoteke, da pridejo
   za osnovnim pravilom (.arting-product-benefits z minmax(230px, 285px)).
   Namizje 4 kartice, tablica 3, telefon 2, zelo ozek zaslon 1.
   ---------------------------------------------------------------------- */

@media (min-width: 768px) and (max-width: 1024px) {
	.arting-product-benefits {
		grid-template-columns: repeat(auto-fit, minmax(200px, 250px));
	}
}

@media (max-width: 767px) {
	.arting-product-benefits,
	.arting-product-docs {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}

	.arting-product-benefit {
		max-width: none;
		gap: 10px;
		padding: 18px 10px 16px;
	}

	.arting-product-benefit__icon {
		flex: 0 0 50px;
		width: 50px;
		height: 50px;
	}

	.arting-product-benefit__icon svg {
		width: 25px;
		height: 25px;
	}

	.arting-product-benefit__title {
		font-size: 13.5px;
	}

	.arting-product-benefit__text {
		font-size: 13px;
	}

	.arting-product-doc__link {
		padding: 18px 10px 16px;
	}

	.arting-product-doc__icon {
		width: 42px;
		height: 42px;
	}
}

/* Zelo ozki zasloni: ena kartica, da se besedilo ne lomi po črkah. */
@media (max-width: 359px) {
	.arting-product-benefits,
	.arting-product-docs {
		grid-template-columns: minmax(0, 1fr);
	}
}


/* -------------------------------------------------------------------------
   Dodatni tehnični zapisi (surove vrstice iz starega zavihka) in navodila
   ---------------------------------------------------------------------- */

.arting-product-specnotes {
	margin: 14px 0 0;
	padding: 0 0 0 18px;
	color: var(--arting-muted);
	font-size: 14px;
	line-height: 1.55;
}

.arting-product-specnotes > li {
	margin: 0 0 4px;
}

.arting-product-install p {
	margin: 0 0 10px;
	color: var(--arting-ink);
	font-size: 15px;
	line-height: 1.65;
}

.arting-product-install__list {
	margin: 0 0 10px;
	padding-left: 20px;
	color: var(--arting-ink);
	font-size: 15px;
	line-height: 1.65;
}

.arting-product-install__list > li {
	margin: 0 0 6px;
}

.arting-product-install > *:last-child {
	margin-bottom: 0;
}