/**
 * Product Impost Concept — specifikime teknike.
 * Rrjetë kutish responsive, tekst justified, ikona diskrete.
 */

.pic-specifikime {
	--pic-spec-border:      rgba(0, 0, 0, 0.08);
	--pic-spec-body:        #494949;
	--pic-spec-text-strong: #1a1a1a;
	--pic-spec-gap:         clamp(0.65rem, 2vw, 1rem);

	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
	gap: var(--pic-spec-gap);
	justify-items: stretch;
	align-items: stretch;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	color: var(--pic-spec-body);
	font-size: 0.92rem;
	line-height: 1.45;
	font-weight: 500;
}

.pic-specifikime > * {
	min-width: 0;
}

/* ── Kutia ───────────────────────────────────────────────────── */
.pic-specifikime .pic-spec-item {
	--pic-icon-col: 1.1rem;
	--pic-icon-gap: 0.55rem;
	margin:   0 !important;
	padding:  0.85rem 1rem !important;
	border:        1px solid #e8e8e8;
	border-left:   3px solid #c8c8c8;
	border-radius: 6px;
	background:    #fafafa;
	box-sizing:    border-box;

	/* Grid i brendshëm: ikonë | titull (r1), teksti (r2) */
	display:              grid     !important;
	grid-template-columns: var(--pic-icon-col) 1fr !important;
	grid-template-rows:   auto auto !important;
	column-gap:           var(--pic-icon-gap) !important;
	row-gap:              0 !important;
	align-items:          start !important;

	transition: border-left-color 0.18s ease, background 0.18s ease;
}

.pic-specifikime .pic-spec-item:hover {
	border-left-color: #888;
	background: #f4f4f4;
}

/* ── Ikona (::before) ───────────────────────────────────────── */
.pic-specifikime .pic-spec-item::before {
	content: "";
	grid-column: 1 !important;
	grid-row:    1 / -1 !important;
	align-self:  start !important;
	justify-self: center !important;
	width:  var(--pic-icon-col);
	height: var(--pic-icon-col);
	background-color:    transparent;
	background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Ccircle cx='6' cy='6' r='5.5' stroke='%23aaaaaa' stroke-width='1'/%3E%3Cpath stroke='%23aaaaaa' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round' d='M3.5 6l1.8 1.8L8.5 4.5'/%3E%3C/svg%3E");
	background-repeat:   no-repeat;
	background-position: top 0.1rem left;
	background-size:     1rem;
}

/* ── Titulli ────────────────────────────────────────────────── */
.pic-specifikime .pic-spec-title,
.pic-specifikime h4.pic-spec-title,
.pic-specifikime .pic-spec-item > h4 {
	grid-column: 2 !important;
	grid-row:    1 !important;
	align-self:  start !important;
	margin:  0 !important;
	padding: 0 !important;
	font-size:   0.93em;
	font-weight: 700;
	line-height: 1.25;
	color:       var(--pic-spec-text-strong);
}

/* ── Teksti ─────────────────────────────────────────────────── */
.pic-specifikime .pic-spec-desc,
.pic-specifikime .pic-spec-item > p {
	grid-column: 2 !important;
	grid-row:    2 !important;
	align-self:  start !important;
	margin:  0 !important;
	padding: 0 !important;
	font-size:   0.88em;
	line-height: 1.5;
	color:       var(--pic-spec-body);
	text-align:  justify;
	text-justify: inter-word;
	hyphens:      auto;
	overflow-wrap: break-word;
}

.pic-specifikime .pic-spec-item > p + p {
	grid-row: 3 !important;
	margin-top: 0.3rem !important;
}

/* ── Tabela ─────────────────────────────────────────────────── */
.pic-specifikime > table.pic-spec-table,
.pic-specifikime > table {
	grid-column: 1 / -1;
	width: 100%;
	border-collapse: collapse;
	font-size: 0.88em;
	margin: 0;
}

.pic-specifikime table th,
.pic-specifikime table td {
	padding: 0.4rem 0.5rem;
	border: 1px solid var(--pic-spec-border);
	text-align: start;
	vertical-align: top;
}

.pic-specifikime table td {
	color: var(--pic-spec-body);
}

.pic-specifikime table th {
	color:       var(--pic-spec-text-strong);
	font-weight: 600;
}

.pic-specifikime table thead th {
	background:  rgba(0,0,0,0.05);
	font-weight: 700;
}

/* ── Lista ──────────────────────────────────────────────────── */
.pic-specifikime ul.pic-spec-list,
.pic-specifikime ol.pic-spec-list {
	grid-column: 1 / -1;
	margin: 0;
	padding-left: 1.2rem;
}

.pic-specifikime ul.pic-spec-list li,
.pic-specifikime ol.pic-spec-list li {
	margin: 0.2rem 0;
	color: var(--pic-spec-body);
	text-align: justify;
}

/* ── DL ─────────────────────────────────────────────────────── */
.pic-specifikime dl.pic-spec-dl {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
	gap: 0.5rem 1rem;
	margin: 0;
}

.pic-specifikime dl.pic-spec-dl dt {
	font-weight: 700;
	color: var(--pic-spec-text-strong);
}

.pic-specifikime dl.pic-spec-dl dd {
	margin: 0;
	color: var(--pic-spec-body);
	text-align: justify;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 782px) {
	.pic-specifikime {
		grid-template-columns: 1fr;
	}
}

@media (min-width: 783px) and (max-width: 1024px) {
	.pic-specifikime {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1200px) {
	.pic-specifikime {
		grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
	}
}