/* ==========================================================================
   Twins Supply — product display
   Tuned to the live page: background #101a08, gold #c49c5c, headings #fcfcfc.
   Product tiles sit one step lighter than the page so the black packaging
   keeps its edges.

   Every colour and most sizes read a --ts-* variable. The Elementor widget
   sets those variables from its panel (per widget, or per product for the
   image ones); the shortcode uses the fallbacks below.
   ========================================================================== */

.ts-shop {
	--ts-gold: #c49c5c;
	--ts-gold-bright: #d3ad6d;
	--ts-paper: #fcfcfc;
	--ts-muted: #a3a694;
	--ts-ink: #101a08;
	--ts-hairline: rgba(196, 156, 92, 0.16);
	--ts-tile-top: #1b2a10;
	--ts-tile-mid: #14200a;
	--ts-tile-btm: #0c1406;

	font-weight: 300;
	line-height: 1.65;
	color: var(--ts-paper);
}

.ts-shop *,
.ts-shop *::before,
.ts-shop *::after {
	box-sizing: border-box;
}

/* ---------- text zones ----------
   Text area, "above the image" and "below the image" are flex rows that
   wrap: each element takes its own line unless set to "Share line". */

.ts-shop__flow {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: var(--ts-align-items, flex-start);
	column-gap: var(--ts-inline-gap, 14px);
	text-align: var(--ts-text-align, start);
}

.ts-shop__flow > * {
	flex: 0 0 100%;
	min-width: 0;
}

.ts-shop__flow--below {
	margin-top: 18px;
}

/* ---------- text area with a side column ----------
   Only when an element is placed in "Text area — side column".
   The widget's "Arrangement" control swaps --ts-copy-cols / --ts-copy-areas
   to stack the side column under the text on small screens. */

.ts-shop__copy--split {
	--ts-copy-cols-beside: minmax(0, 1fr) auto;
	--ts-copy-areas-beside: "main side" "after after";

	display: grid;
	grid-template-columns: var(--ts-copy-cols, var(--ts-copy-cols-beside));
	grid-template-areas: var(--ts-copy-areas, var(--ts-copy-areas-beside));
	align-items: start;
	column-gap: 28px;
}

.ts-shop__copy--side-left {
	--ts-copy-cols-beside: auto minmax(0, 1fr);
	--ts-copy-areas-beside: "side main" "after after";
}

.ts-shop__main {
	grid-area: main;
}

.ts-shop__after {
	grid-area: after;
}

/* A plain column (not a wrapping row) so its width hugs the widest element. */
.ts-shop__side {
	grid-area: side;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	min-width: 0;
	text-align: right;
}

.ts-shop__copy--side-left .ts-shop__side {
	align-items: flex-start;
	text-align: left;
}

.ts-shop__side > :last-child {
	margin-bottom: 0;
}

/* Natural order — the widget's "Order" controls override these. */
.ts-shop__name    { order: 1; }
.ts-shop__tagline { order: 2; }
.ts-shop__size    { order: 3; }
.ts-shop__desc    { order: 4; }
.ts-shop__price   { order: 5; }
.ts-shop__action  { order: 6; }

/* ---------- image tile ---------- */

.ts-shop__shot {
	position: relative;
	display: grid;
	grid-template: minmax(0, 1fr) / minmax(0, 1fr);
	min-height: 0;
	overflow: hidden;
	background: var(--ts-tile-bg, radial-gradient(120% 95% at 50% 20%, var(--ts-tile-top) 0%, var(--ts-tile-mid) 58%, var(--ts-tile-btm) 100%));
	aspect-ratio: var(--ts-ratio, 1 / 1);
}

.ts-shop__img-link {
	grid-area: 1 / 1;
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	min-height: 0;
	text-decoration: none;
}

/* Size / zoom / move / fit / focus can all be set per product. */
.ts-shop__shot .ts-shop__img,
.ts-shop__shot img {
	display: block;
	width: var(--ts-img-fill, 88%);
	height: var(--ts-img-fill, 88%);
	max-width: none;
	object-fit: var(--ts-img-fit, contain);
	object-position: var(--ts-img-pos, 50% 50%);
	transform: translate(var(--ts-img-x, 0px), var(--ts-img-y, 0px)) scale(var(--ts-img-scale, 1));
	transition: transform 0.4s ease;
}

.ts-shop__item:hover .ts-shop__shot img {
	transform: translate(var(--ts-img-x, 0px), var(--ts-img-y, 0px)) scale(calc(var(--ts-img-scale, 1) * var(--ts-img-zoom, 1.04)));
}

/* ---------- text on the image ---------- */

.ts-shop__overlay {
	--ts-inset: var(--ts-overlay-inset, 20px);

	grid-area: 1 / 1;
	position: relative;
	z-index: 1;
	pointer-events: none;
	transition: opacity 0.25s ease;
}

.ts-shop__spot {
	position: absolute;
	display: flex;
	flex-direction: column;
	width: max-content;
	max-width: calc(100% - 2 * var(--ts-inset));
	pointer-events: auto;
}

.ts-shop__spot > :last-child {
	margin-bottom: 0;
}

/* vertical */
.ts-shop__spot--top-left,
.ts-shop__spot--top-center,
.ts-shop__spot--top-right {
	top: var(--ts-inset);
}

.ts-shop__spot--middle-left,
.ts-shop__spot--center,
.ts-shop__spot--middle-right {
	top: 50%;
	transform: translateY(-50%);
}

.ts-shop__spot--bottom-left,
.ts-shop__spot--bottom-center,
.ts-shop__spot--bottom-right {
	bottom: var(--ts-inset);
}

/* horizontal */
.ts-shop__spot--top-left,
.ts-shop__spot--middle-left,
.ts-shop__spot--bottom-left {
	left: var(--ts-inset);
	align-items: flex-start;
	text-align: left;
}

.ts-shop__spot--top-center,
.ts-shop__spot--center,
.ts-shop__spot--bottom-center {
	left: 50%;
	align-items: center;
	text-align: center;
	transform: translateX(-50%);
}

.ts-shop__spot--center {
	transform: translate(-50%, -50%);
}

.ts-shop__spot--top-right,
.ts-shop__spot--middle-right,
.ts-shop__spot--bottom-right {
	right: var(--ts-inset);
	align-items: flex-end;
	text-align: right;
}

/* Widget option "Show only on hover" (skipped on touch screens) */
@media (hover: hover) {

	.ts-overlay-hover-yes .ts-shop__overlay {
		opacity: 0;
	}

	.ts-overlay-hover-yes .ts-shop__item:hover .ts-shop__overlay,
	.ts-overlay-hover-yes .ts-shop__item:focus-within .ts-shop__overlay {
		opacity: 1;
	}
}

/* ---------- text elements ---------- */

.ts-shop .ts-shop__name {
	margin: 0 0 9px;
	color: var(--ts-title-color, var(--ts-paper));
	font-weight: 400;
	letter-spacing: 0.12em;
	line-height: 1.25;
}

.ts-shop .ts-shop__name a {
	color: inherit;
	text-decoration: none;
	transition: color 0.18s ease;
}

.ts-shop .ts-shop__name a:hover,
.ts-shop .ts-shop__name a:focus-visible {
	color: var(--ts-title-hover, var(--ts-gold-bright));
}

.ts-shop__tagline {
	margin: 0 0 10px;
	color: var(--ts-tagline-color, var(--ts-gold-bright));
	font-size: 13px;
	letter-spacing: 0.1em;
}

.ts-shop__size {
	margin: 0 0 12px;
	color: var(--ts-size-color, rgba(163, 166, 148, 0.7));
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.ts-shop__desc {
	margin: 0 0 20px;
	color: var(--ts-desc-color, var(--ts-muted));
	font-size: 14.5px;
}

.ts-shop__desc p {
	margin: 0;
}

.ts-shop__desc p + p {
	margin-top: 0.8em;
}

.ts-shop__price {
	margin: 0 0 20px;
	color: var(--ts-price-color, var(--ts-paper));
	font-weight: 200;
	letter-spacing: 0.05em;
}

.ts-shop__price del {
	margin-right: 8px;
	color: var(--ts-price-old-color, inherit);
	font-size: 0.6em;
	opacity: 0.55;
}

.ts-shop__price ins {
	text-decoration: none;
}

.ts-shop__action {
	margin: 0;
}

/* ---------- button ----------
   Deliberately specific so the theme's / WooCommerce's .button styles
   don't win. Colours come from variables so Normal and Hover never fight. */

.ts-shop .ts-shop__btn,
.ts-shop a.ts-shop__btn.button {
	display: inline-block;
	padding: 13px 34px;
	border: 1px solid var(--ts-btn-border, var(--ts-gold));
	border-radius: 0;
	background: var(--ts-btn-bg, transparent);
	color: var(--ts-btn-color, var(--ts-gold-bright));
	font-family: inherit;
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 0.18em;
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.ts-shop a.ts-shop__btn:hover,
.ts-shop a.ts-shop__btn:focus-visible,
.ts-shop a.ts-shop__btn.button:hover,
.ts-shop a.ts-shop__btn.button:focus-visible {
	border-color: var(--ts-btn-hover-border, var(--ts-gold));
	background: var(--ts-btn-hover-bg, var(--ts-gold));
	color: var(--ts-btn-hover-color, var(--ts-ink));
}

.ts-shop .ts-shop__btn.ts-shop__btn--out {
	border-color: var(--ts-out-border, rgba(188, 148, 80, 0.35));
	background: transparent;
	color: var(--ts-out-color, var(--ts-muted));
	cursor: default;
}

/* Woo's "View basket" link that appears after an AJAX add */
.ts-shop a.added_to_cart {
	display: inline-block;
	margin-left: 14px;
	color: var(--ts-added-color, var(--ts-muted));
	font-size: 12.5px;
	letter-spacing: 0.1em;
	text-decoration: underline;
}

/* ==========================================================================
   Layout A — editorial rows (default)
   --ts-cols / --ts-cols-flip / --ts-flip-order are switched by the
   widget's "Arrangement" control (side by side vs. stacked).
   ========================================================================== */

.ts-shop--rows .ts-shop__item {
	display: grid;
	grid-template-columns: var(--ts-cols, 1fr 1fr);
	align-items: center;
	gap: 56px;
	padding: 54px 0;
	border-bottom: 1px solid var(--ts-divider-color, var(--ts-hairline));
}

.ts-shop--rows .ts-shop__item:last-child,
.ts-shop--rows.ts-shop--no-divider .ts-shop__item {
	border-bottom: none;
}

.ts-shop--rows .ts-shop__item.is-flipped {
	grid-template-columns: var(--ts-cols-flip, 1fr 1fr);
}

.ts-shop--rows .ts-shop__item.is-flipped .ts-shop__media {
	order: var(--ts-flip-order, 2);
}

.ts-shop--rows .ts-shop__item.ts-shop__item--no-image,
.ts-shop--rows .ts-shop__item.ts-shop__item--no-copy {
	grid-template-columns: 1fr;
}

.ts-shop--rows .ts-shop__copy {
	justify-self: var(--ts-align-items, stretch);
	max-width: 30em;
}

.ts-shop--rows .ts-shop__name {
	font-size: 30px;
}

.ts-shop--rows .ts-shop__desc {
	font-size: 15.5px;
}

.ts-shop--rows .ts-shop__price {
	font-size: 30px;
}

/* ==========================================================================
   Layout B — grid of cards (2 columns by default)
   ========================================================================== */

.ts-shop--grid {
	display: grid;
	grid-template-columns: repeat(var(--ts-columns, 2), minmax(0, 1fr));
	gap: 70px 60px;
}

.ts-shop--grid .ts-shop__item,
.ts-shop--row4 .ts-shop__item {
	display: flex;
	flex-direction: column;
}

.ts-shop--grid .ts-shop__flow,
.ts-shop--row4 .ts-shop__flow {
	justify-content: var(--ts-align-items, center);
	text-align: var(--ts-text-align, center);
}

.ts-shop--grid .ts-shop__media {
	margin-bottom: 24px;
}

.ts-shop--grid .ts-shop__item--no-copy .ts-shop__media {
	margin-bottom: 0;
}

.ts-shop--grid .ts-shop__name {
	font-size: 22px;
}

.ts-shop--grid .ts-shop__desc {
	max-width: 32em;
}

.ts-shop--grid .ts-shop__price {
	font-size: 32px;
}

/* ==========================================================================
   Layout C — single row of four (shortcode only: layout="row4")
   ========================================================================== */

.ts-shop--row4 {
	--ts-ratio: 3 / 4;

	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 26px;
}

.ts-shop--row4 .ts-shop__media {
	margin-bottom: 18px;
}

.ts-shop--row4 .ts-shop__name {
	font-size: 17px;
}

.ts-shop--row4 .ts-shop__tagline {
	font-size: 11.5px;
	letter-spacing: 0.07em;
}

.ts-shop--row4 .ts-shop__desc {
	display: none;
}

.ts-shop--row4 .ts-shop__price {
	font-size: 23px;
	margin-bottom: 14px;
}

.ts-shop--row4 .ts-shop__btn,
.ts-shop--row4 a.ts-shop__btn.button {
	padding: 11px 18px;
	font-size: 11.5px;
	letter-spacing: 0.12em;
}

/* ==========================================================================
   Responsive (fallbacks — the Elementor widget's responsive controls
   override these per breakpoint)
   ========================================================================== */

@media (max-width: 900px) {

	.ts-shop--rows {
		--ts-cols: 1fr;
		--ts-cols-flip: 1fr;
		--ts-flip-order: 0;
	}

	.ts-shop--rows .ts-shop__item {
		gap: 26px;
		padding: 40px 0;
	}

	.ts-shop--rows .ts-shop__name {
		font-size: 25px;
	}

	.ts-shop--rows .ts-shop__price {
		font-size: 26px;
	}

	.ts-shop--row4 {
		grid-template-columns: repeat(2, 1fr);
		gap: 34px 22px;
	}
}

@media (max-width: 560px) {

	.ts-shop--grid {
		--ts-columns: 1;
		gap: 54px;
	}
}

@media (prefers-reduced-motion: reduce) {

	.ts-shop *,
	.ts-shop *::before,
	.ts-shop *::after {
		transition: none !important;
	}
}

/* Editor-only notice when the widget has nothing to show */
.ts-shop-empty {
	padding: 28px;
	border: 1px dashed rgba(196, 156, 92, 0.5);
	color: #a3a694;
	text-align: center;
}