/* Bloki iz opisov kategorij (gs-intro, before-after, FAQ, ikone) - prej samo v occategory_platisca_landing.tpl */
	/*BLOKI ZGORAJ*/
	:root {
		--gs-orange: #ff8a00;
		/* Gumishop accent */
		--gs-black: #111;
		--gs-grey: #6a6a6a;
		--gs-line: #ababab;
		--gs-bg: #fff;
	}

	.gs-intro {
		background: var(--gs-bg);
		border-bottom: 1px solid var(--gs-line);
		padding-bottom: 70px;
		padding-top: 50px;
	}

	.gs-intro__inner {
		max-width: 1200px;
		margin: 0 auto;
		padding: 0 20px;
		display: grid;
		grid-template-columns: 1.2fr 1fr;
		/* text left, icons right */
		gap: clamp(20px, 4vw, 48px);
		align-items: center;
	}

	.gs-intro__text h3 {
		margin: 0 0 8px;
		font-size: clamp(18px, 2.2vw, 24px);
		line-height: 1.35;
		color: var(--gs-black);
		font-weight: 700;
	}

	.gs-intro__text p {
		margin: 0;
		color: var(--gs-grey);
		font-size: clamp(15px, 1.6vw, 16px);
	}

	.gs-intro__features {
		list-style: none;
		margin: 0;
		padding: 0;
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 18px 24px;
	}

	.gs-intro__features li {
		display: grid;
		grid-template-columns: 40px 1fr;
		align-items: center;
		gap: 10px;
	}

	.gs-intro__features svg {
		width: 36px;
		height: 36px;
		stroke: var(--gs-black);
		fill: none;
		stroke-width: 2;
	}

	/* Icons that need fill instead of stroke */
	.gs-intro__features li:nth-child(2) svg path,
	.gs-intro__features li:nth-child(4) svg path {
		fill: none;
		stroke: var(--gs-black);
	}

	.gs-intro__features li:nth-child(3) svg path {
		fill: none;
		stroke: var(--gs-black);
	}

	.gs-intro__features span {
		font-size: 14px;
		color: var(--gs-black);
		line-height: 1.3;
		white-space: nowrap;
	}

	/* subtle accent dot on hover for a touch of brand */
	.gs-intro__features li:hover span {
		text-decoration: underline;
		text-decoration-color: var(--gs-orange);
		text-decoration-thickness: 2px;
		text-underline-offset: 3px;
	}

	/* Responsive */
	@media (max-width: 900px) {
		.gs-intro__inner {
			grid-template-columns: 1fr;
		}

		.gs-intro__features {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}
	}

	@media (max-width: 520px) {
		.gs-intro__features {
			grid-template-columns: 1fr;
		}
	}


/* BEFORE / AFTER */
.before-after {
  margin: 70px auto;
  position: relative;
  font-family: sans-serif;
}

.before-after .image-container {
  position: relative;
  width: 100%;
  aspect-ratio: 30/9;
  overflow: hidden;
  background-color: rgb(254, 151, 67);
  margin: 100px 0;
}

.before-after .image {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
}

.before-after .image.before {
  background-image: url('/image/catalog/landing-page/tyre_2.jpg'); /* replace with your before image */
	clip-path: polygon(0 0, calc(60% - 5px) 0, calc(40% - 5px) 100%, 0% 100%);
  z-index: 2;
}

.before-after .image.after {
  	background-image: url('/image/catalog/landing-page/tyre_2.jpg'); /* replace with your after image */
  	clip-path: polygon(calc(60% + 5px) 0, 100% 0, 100% 100%, calc(40% + 5px) 100%);
	z-index: 2;
}

.before-after .image.before .label {
  position: absolute;
  top: 15px;
  left: 15px;
  background: rgb(44, 44, 44);
  color: #fff;
  padding: 6px 12px;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-radius: 4px;
}
.before-after .image.after .label {
  position: absolute;
  bottom: 15px;
  right: 15px;
  background: rgb(44, 44, 44);
  color: #fff;
  padding: 6px 12px;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-radius: 4px;
}

@media (max-width: 600px) {
  /* On mobile, stack them */
  .before-after .image.before, .before-after .image.after {
    clip-path: none;
    position: relative;
    height: 50%;
  }
  .before-after .image-container {
    display: flex;
    flex-direction: column;
    aspect-ratio: auto;
    height: auto;
  }
}


/*FAQ*/
.qa-block {
  margin: 40px auto;
  padding: 0 20px;
  font-family: sans-serif;
}
.qa-block h2 {
  font-size: 26px;
  margin-bottom: 20px;
}
.qa-item {
  border-bottom: 1px solid #ddd;
}
.qa-question {
  width: 100%;
  background: none;
  border: none;
  outline: none;
  font-size: 18px;
  padding: 15px 0;
  text-align: left;
  color: #000;
  cursor: pointer;
  position: relative;
}
.qa-question::after {
  content: '+';
  position: absolute;
  right: 0;
  font-size: 20px;
  transition: transform 0.3s;
}
.qa-item.active .qa-question::after {
  transform: rotate(45deg);
}
.qa-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
  color: #555;
}
.qa-item.active .qa-answer {
  padding: 0 0 15px;
  max-height: 200px;
}



/*IKONE*/
:root{
  --gs-orange:#ff8a00;
  --gs-black:#111;
  --gs-grey:#555;
  --gs-line:#eee;
}

.why-block{
  background:#fff;
  padding:clamp(24px,4vw,48px) 0;
}

.why-inner{
  max-width:1200px;
  margin:0 auto;
  padding:0 20px;
  text-align:center;
}

.why-inner h2{
  font-size:clamp(20px,3vw,28px);
  margin:0 0 10px;
  color:var(--gs-black);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.5px;
}

.why-inner p{
  max-width:820px;
  margin:0 auto 26px;
  color:var(--gs-grey);
  line-height:1.6;
  font-size:16px;
}

.why-icons{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:22px 32px;
  grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:start;
}

.why-icons li{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}

.why-icons svg{
  width:54px;
  height:54px;
  stroke:var(--gs-black);
  fill:none;
  stroke-width:2;
}

.why-icons span{
  font-size:15px;
  color:var(--gs-black);
}

.why-icons li:hover span{
  text-decoration:underline;
  text-decoration-color:var(--gs-orange);
  text-underline-offset:3px;
  text-decoration-thickness:2px;
}

@media (max-width:768px){
  .why-icons{ grid-template-columns:1fr 1fr; }
}
@media (max-width:520px){
  .why-icons{ grid-template-columns:1fr; }
}



/* Prazen okvir iskalnika na /pnevmatike (vsebina v category_parent.tpl je zakomentirana) */
body.product-category-128 #category-filter { display: none; }

/* Kompleti: vsi okvirji v vrsti enako visoki (prej razlicno visoki in zamaknjeni) */
@media (min-width: 992px) {
  .result_html { display: flex; flex-wrap: wrap; }
  .result_html > .pbListing-box { float: none; }
}