/* The reusable product tile — .associe + .row-preview / .row-addrow / .row-addsplit — now lives
   globally in css/components.css.php (so product_tile8() works on any page). Only the product-page
   grid CONTAINERS (#associescontent / #variantescontent) stay here. */

.productmain {display:grid; grid-template-columns: 45fr 55fr; grid-gap:20px;}

/* Adaptive lower sections: 2 populated → side by side, 1 → full width, 0 → nothing.
   Self-rendering partials drop in/out and the grid reflows automatically. */
.product-sections {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
  align-items: start;
}
.product-section { background: #fff; }
#associescontent, #variantescontent { display: grid; grid-template-columns: repeat(auto-fit, minmax(156px, 1fr)); gap: 10px; justify-items: center; }

/* Tabbed lower sections (downloads / associated products). Server-rendered; produit.js flips
   the active tab. Active tab = brand gradient (matches the .h2.gradient section language);
   panel = white fill + shadow (house rule: no border on panels). Square, no radius. */
.ptabs { margin-top: var(--space-3); }
.ptabs__bar { display: flex; flex-wrap: wrap; gap: 2px; }
.ptabs__tab {
	appearance: none; cursor: pointer; border: 0; margin: 0;
	padding: var(--space-2) var(--space-3);
	background: #eceef2; color: #475467;
	font-size: 14px; font-weight: 700; line-height: 1;
}
.ptabs__tab:hover { background: #e0e3e9; }
.ptabs__tab.is-active { background: var(--brand-gradient); color: #fff; }
.ptabs__panels { background: #fff; box-shadow: var(--shadow-panel); }
.ptabs__panel { display: none; }
.ptabs__panel.is-active { display: block; }

.infoassocie {padding:20px; font-size:15px; font-weight:bold;
/*
	background-image : url("/css8/static/images/infobackground.png");
*/
/*
	background-position: -50%;
*/
color:#fff;
background: #2A7B9B;
background: linear-gradient(145deg,rgba(42, 123, 155, 1) 0%, rgba(87, 199, 133, 1) 50%, rgba(237, 221, 83, 1) 100%);
border-radius: 20px 4px 20px 4px
}

.buttonflat {
	font-size:1rem;
	background-color:#4BA921;
	line-height: 40px;
	padding: 10px;
	color: #fff;
	box-shadow: 0px 5px 5px #DEDEDE;
	transition: box-shadow .1s ease-in-out;
}

.buttonflat:hover {
	color:#fff;	
	cursor:pointer;
	box-shadow: 0px 5px 5px #777;
	margin-top:3px;
	transition: box-shadow .1s ease-in-out, line-height .1s ease-in-out;

}


/* The quantity stepper, stock indicator, and the whole add-to-cart cross-sell
   modal now live in css/components.css.php (global) — the modal is triggered
   from the category listing too, so its styles can't be product-page-scoped. */


/* ── Buy box: stock status · quantity · actions on one row, with the variable-length
   stock detail on its OWN full-width row so it can never shift the stepper ── */
.buybox {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 18px;
  padding: 12px 16px 16px;
}
.buybox__stock   { flex: 0 0 auto; font-weight: 700; }
/* Availability sits left; the buy UNIT (quantity + actions) groups together on the right —
   margin-left:auto eats the slack so the stepper sits next to its button, not across a void. */
.buybox__qty     { flex: 0 0 auto; margin-left: auto; }
.buybox__actions { flex: 0 0 auto; display: flex; }
.buybox > .qty-stockinfo { flex: 0 0 100%; }    /* own line; length stays clear of the controls */


@media only screen and (max-width : 960px) {
	.buybox__qty { margin-left: 0; }   /* stacked layout: let qty + actions flow left, no right-push */
	.productmain {display:grid; grid-template-columns:1fr; grid-gap:0;}
	.product-sections {grid-template-columns:1fr;}
	
	#associescontent, #variantescontent {
		grid-template-columns:50fr 50fr;
		justify-items: center;
	}
	
	#contenutelechargement {
		flex-wrap: wrap;
	}
}