/* Second Set InkSoft Connector -- styled to match Alchemy Print Co.'s live
   theme (Figtree/Outfit type, blue-to-plum brand gradient, Elementor-style
   rounded cards). Pulled directly from the live site's computed styles, not
   guessed, so this should look native on first load rather than "plugin
   default." Still plain CSS -- easy to open and adjust by hand, or override
   from the theme's own Additional CSS if a different treatment is wanted. */

:root {
	--ss-inksoft-font: "Figtree", -apple-system, "Segoe UI", Roboto, sans-serif;
	--ss-inksoft-heading-font: "Outfit", "Figtree", sans-serif;
	--ss-inksoft-gradient: linear-gradient(90deg, #3669b3 0%, #842f50 100%);
	--ss-inksoft-text: #333333;
	--ss-inksoft-muted: #777777;
	--ss-inksoft-border: rgba(0, 0, 0, 0.08);
	--ss-inksoft-card-radius: 14px;
}

.ss-inksoft-categories,
.ss-inksoft-products {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 1.5rem;
	margin: 2rem 0;
	font-family: var(--ss-inksoft-font);
}

.ss-inksoft-category-card,
.ss-inksoft-product-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	text-decoration: none;
	color: var(--ss-inksoft-text);
	background: #fff;
	border: 1px solid var(--ss-inksoft-border);
	border-radius: var(--ss-inksoft-card-radius);
	padding: 1.5rem 1.25rem 1.25rem;
	position: relative;
	overflow: hidden;
	transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

/* A thin brand-gradient accent along the top edge of every card -- the one
   deliberate "branding" touch, subtle enough not to fight product photos. */
.ss-inksoft-category-card::before,
.ss-inksoft-product-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: var(--ss-inksoft-gradient);
	opacity: 0;
	transition: opacity 0.2s ease;
}

.ss-inksoft-category-card:hover,
.ss-inksoft-product-card:hover {
	box-shadow: 0 10px 24px rgba(54, 105, 179, 0.14);
	transform: translateY(-3px);
	border-color: rgba(54, 105, 179, 0.25);
}

.ss-inksoft-category-card:hover::before,
.ss-inksoft-product-card:hover::before {
	opacity: 1;
}

.ss-inksoft-category-card img,
.ss-inksoft-product-card img {
	max-width: 100%;
	height: 140px;
	object-fit: contain;
	margin-bottom: 1rem;
}

.ss-inksoft-category-name,
.ss-inksoft-product-name {
	font-family: var(--ss-inksoft-heading-font);
	font-weight: 600;
	font-size: 0.98rem;
	line-height: 1.35;
	color: var(--ss-inksoft-text);
}

/* InkSoft sometimes has no display name for a product row, only a SKU
   (e.g. "A4N2306"). Give those a visibly different, quieter treatment so
   it reads as "needs a real name," not as this grid's normal style. */
.ss-inksoft-sku-name {
	font-family: "SFMono-Regular", Consolas, monospace;
	font-weight: 500;
	font-size: 0.82rem;
	color: var(--ss-inksoft-muted);
	letter-spacing: 0.02em;
}

.ss-inksoft-empty {
	font-family: var(--ss-inksoft-font);
	color: var(--ss-inksoft-muted);
	opacity: 0.9;
	font-style: italic;
	padding: 2rem 0;
	text-align: center;
}

/* Cart / checkout embed */
.ss-inksoft-cart-wrap {
	position: relative;
	min-height: 200px;
	border-radius: var(--ss-inksoft-card-radius);
	overflow: hidden;
}

.ss-inksoft-cart-loading {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 200px;
	font-family: var(--ss-inksoft-font);
	color: var(--ss-inksoft-muted);
	opacity: 0.9;
	font-style: italic;
}

.ss-inksoft-cart-iframe {
	min-height: 400px;
	border-radius: var(--ss-inksoft-card-radius);
}

/* Product pages pick up Alchemy's brand blue for swatches and buttons. */
.ss-pd {
	--ss-accent: #3669b3;
	font-family: var(--ss-inksoft-font);
}
.ss-pd .ss-pd-title {
	font-family: var(--ss-inksoft-heading-font);
}
.ss-pd .ss-pd-btn {
	background: var(--ss-inksoft-gradient);
	border-radius: 999px;
}

/* v0.5.5: [ss_inksoft_products design="yes"] -- a "Design now" button under
   each card that opens InkSoft's designer with the product already loaded. */
.ss-inksoft-product-item {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}
.ss-inksoft-product-item .ss-inksoft-product-card {
	flex: 1;
}
.ss-inksoft-design-btn,
.ss-inksoft-design-btn:visited {
	display: block;
	text-align: center;
	padding: 0.75rem 1rem;
	border-radius: 999px;
	background: var(--ss-inksoft-gradient);
	color: #fff !important;
	font-family: var(--ss-inksoft-font);
	font-weight: 700;
	font-size: 15px;
	line-height: 1.2;
	text-decoration: none;
	transition: filter 0.2s ease, transform 0.2s ease;
}
.ss-inksoft-design-btn:hover,
.ss-inksoft-design-btn:focus-visible {
	filter: brightness(1.08);
	transform: translateY(-1px);
	color: #fff;
}

/* v0.5.6: names always reserve two lines so "Design now" buttons line up
   across a row even when one product name is shorter. */
.ss-inksoft-product-item .ss-inksoft-product-name {
	display: block;
	min-height: 2.6em;
	line-height: 1.3em;
}