/* ---- Shared design tokens, sampled directly from the Figma exports ---- */
:root {
	--dk-bg: #f1ffa1;
	--dk-green: #98cb6a;
	--dk-green-dark: #82b85a;
	--dk-blue: #00acf5;
	--dk-black: #000000;
	--dk-font: 'Baloo 2', ui-sans-serif, system-ui, sans-serif;
}

/* Applied to every element our plugin renders outside of Tailwind's reach
   (the cart page never loads Tailwind at all, so this is the only way
   the cart grouping and the shop-page modal pick up the correct font). */
.dk-modal-card,
.dk-group-header,
.dk-group-summary,
.dk-loop-actions,
.dk-tray-item,
#dk-workstation-root {
	font-family: var( --dk-font );
}

/* Hide the tray strip's scrollbar (Tailwind's arbitrary properties can't
   target ::-webkit-scrollbar, so this lives here instead). */
#dk-tray-strip::-webkit-scrollbar {
	display: none;
}

.dk-tray-item,
#dk-canvas-frame {
	user-select: none;
	-webkit-user-select: none;
	touch-action: none; /* prevents the browser from intercepting drag gestures as page scroll */
}

/* ---- Shop archive loop buttons (Charms / Links / Clasps grids) ---- */
.dk-loop-actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-top: 6px;
}

.dk-info-icon {
	background: none;
	border: none;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	color: var( --dk-black );
}

.dk-add-to-tray-btn {
	background: var( --dk-green );
	border: none;
	border-radius: 999px;
	padding: 7px 16px;
	font-family: var( --dk-font );
	font-weight: 700;
	font-size: 14px;
	color: var( --dk-black );
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.dk-add-to-tray-btn:hover:not(:disabled) {
	background: var( --dk-green-dark );
}

.dk-add-to-tray-btn:disabled {
	background: #eee;
	color: #999;
	cursor: not-allowed;
}

/* ---- Product spec modal (info icon popup) ---- */
.dk-modal-backdrop {
	position: fixed;
	inset: 0;
	background: rgba( 0, 0, 0, 0.35 );
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9999;
	padding: 24px;
}

.dk-modal-backdrop.hidden {
	display: none;
}

.dk-modal-card {
	background: #fff;
	border: 3px solid var( --dk-black );
	border-radius: 24px;
	padding: 22px;
	max-width: 320px;
	width: 100%;
	position: relative;
	text-align: center;
}

.dk-modal-close {
	position: absolute;
	top: 12px;
	right: 16px;
	background: none;
	border: none;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	color: var( --dk-black );
}

.dk-modal-image {
	max-width: 60%;
	max-height: 160px;
	object-fit: contain;
	margin: 4px auto 14px;
	display: block;
}

/* The divider line under the image in the Figma modal */
.dk-modal-card hr {
	border: none;
	border-top: 2px solid var( --dk-black );
	margin: 0 0 14px;
}

.dk-modal-title {
	font-size: 20px;
	font-weight: 700;
	margin-bottom: 4px;
}

.dk-modal-description {
	font-size: 13px;
	color: #666;
	margin-bottom: 12px;
}

.dk-modal-specs {
	list-style: none;
	padding: 0;
	margin: 0 0 16px;
	font-size: 13px;
	color: #444;
	text-align: left;
}

.dk-modal-add-btn {
	background: var( --dk-green );
	border: none;
	border-radius: 999px;
	padding: 10px 18px;
	font-family: var( --dk-font );
	font-weight: 700;
	color: var( --dk-black );
	cursor: pointer;
	width: 100%;
	transition: background-color 0.15s ease;
}

.dk-modal-add-btn:hover:not(:disabled) {
	background: var( --dk-green-dark );
}

.dk-modal-add-btn:disabled {
	background: #eee;
	color: #999;
	cursor: not-allowed;
}

/* ---- Cart page grouping (Phase 3) ---- */
.dk-group-header td {
	border-top: 3px solid var( --dk-black );
	padding-top: 16px !important;
}

.dk-group-header-inner {
	display: flex;
	align-items: center;
	gap: 12px;
}

.dk-group-thumb img {
	width: 48px;
	height: 48px;
	object-fit: contain;
	border: 2px solid var( --dk-black );
	border-radius: 10px;
}

.dk-group-title {
	font-size: 16px;
	font-weight: 700;
}

.dk-group-row .dk-hidden-thumb {
	visibility: hidden;
	width: 1px;
	padding: 0 !important;
}

.dk-group-row td.product-name {
	padding-left: 24px !important;
	font-size: 13px;
	color: #555;
}

.dk-group-summary td {
	color: #888;
	font-size: 13px;
	font-style: italic;
	border-bottom: 1px solid #eee;
}

.dk-hidden-meta-row {
	display: none !important;
}

/* ---- Shop grid cards (Charms / Links / Clasps archives) ----
   Targets WooCommerce's standard product loop markup, which is
   consistent across virtually all WooCommerce themes. If your theme
   uses a heavily customized product loop template these may need
   adjusting - tell me what markup it outputs and I'll refine the
   selectors. */
.woocommerce ul.products li.product {
	background: #fff;
	border: 3px solid var( --dk-black );
	border-radius: 20px;
	padding: 14px 14px 10px;
	box-shadow: none;
	font-family: var( --dk-font );
}

.woocommerce ul.products li.product img {
	border-radius: 12px;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var( --dk-font );
	font-weight: 600;
	font-size: 14px;
}