/* ============================================================
   UI components
   ============================================================ */

/* --- Tabs --- */
.tab-strip .tab {
	flex-shrink: 0;
	font-family: var(--tab-font);
	font-size: var(--tab-font-size);
	color: var(--tab-color);
	background: var(--tab-bg-inactive);
	border: none;
	border-radius: var(--tab-radius);
	padding: var(--tab-pad);
	cursor: pointer;
	white-space: nowrap;
	transition: background var(--tr-fast);
}
.tab-strip .tab.active {
	background: var(--tab-bg-active);
}

/* --- Search box --- */
.search-box {
	display: flex;
	align-items: center;
	height: var(--search-h);
	background: var(--search-bg);
	border-radius: var(--search-radius);
	padding: var(--search-pad);
}
.search-box img {
	width: var(--search-icon-size);
	height: var(--search-icon-size);
	margin-right: var(--sp-sm);
	opacity: var(--search-icon-opacity);
}
.search-box input {
	border: none;
	background: transparent;
	font-family: var(--search-font);
	font-size: var(--search-font-size);
	color: var(--search-color);
	outline: none;
	width: 100%;
}
.search-box input::placeholder {
	color: var(--search-placeholder);
}

/* Desktop search: floats in the tab row to the right of the tabs
   and sits above the window box with a gap matching the mobile
   search's padding, so it reads as a standalone pill rather than
   a tab attached to the pane. */
.desktop-search {
	flex-shrink: 0;
	width: var(--search-w);
	margin-left: var(--sp-md);
	margin-bottom: var(--desktop-search-gap);
	align-self: flex-end;
}
/* Mobile search (below window) */
.mobile-search .search-box {
	width: 100%;
	border-radius: var(--search-radius);
	padding: var(--search-pad);
	background: var(--search-bg);
}

/* --- Main menu --- */
.main-menu-wrap {
	position: absolute;
	top: var(--menu-top);
	left: var(--menu-left);
	z-index: var(--z-menu);
	display: none;
}
.main-menu-wrap.open { display: block; }
.main-menu {
	background: var(--menu-bg);
	border-radius: var(--menu-radius);
	padding: var(--menu-pad);
	position: relative;
	min-width: var(--menu-min-w);
}
.main-menu a {
	display: block;
	font-family: var(--menu-font);
	font-size: var(--menu-font-size);
	color: var(--menu-text);
	text-decoration: none;
	line-height: var(--menu-line-height);
	font-weight: bold;
}
.main-menu a:hover { opacity: var(--close-opacity); }
.main-menu .close-btn {
	position: absolute;
	top: var(--close-pad);
	right: var(--close-pad);
	cursor: pointer;
	width: var(--close-size);
	height: var(--close-size);
	opacity: var(--close-opacity);
}
.main-menu .close-btn:hover { opacity: var(--close-opacity-hover); }

/* --- Globe menu --- */
.globe-menu-wrap {
	position: absolute;
	top: var(--globe-menu-top);
	right: var(--globe-menu-right);
	z-index: var(--z-menu);
	display: none;
}
.globe-menu-wrap.open { display: block; }
.globe-menu {
	background: var(--globe-menu-bg);
	border-radius: var(--globe-menu-radius);
	padding: var(--globe-menu-pad);
	position: relative;
	min-width: var(--globe-menu-min-w);
}
.globe-menu select {
	display: block;
	width: 100%;
	height: var(--globe-select-h);
	font-family: var(--globe-menu-font);
	font-size: var(--globe-menu-font-size);
	color: var(--globe-menu-color);
	background: var(--globe-select-bg);
	border: none;
	border-radius: var(--globe-select-radius);
	padding: var(--globe-select-pad);
	padding-right: 32px;
	margin-bottom: var(--globe-select-gap);
	cursor: pointer;
	outline: none;
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%234c1a57' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 10px center;
}
.globe-menu select:last-of-type {
	margin-bottom: 0;
}
.globe-menu .close-btn {
	position: absolute;
	top: var(--close-pad);
	right: var(--close-pad);
	cursor: pointer;
	width: var(--close-size);
	height: var(--close-size);
	opacity: var(--close-opacity);
}
.globe-menu .close-btn:hover { opacity: var(--close-opacity-hover); }

/* --- Tab panels --- */
.tab-panel {
	display: none;
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	padding: var(--panel-pad);
}
.tab-panel.active { display: block; }

/* --- Item grid --- */
.item-grid {
	display: flex;
	flex-wrap: wrap;
	gap: var(--grid-gap);
}
.item-card {
	cursor: pointer;
	transition: transform var(--card-hover-transition);
	flex-shrink: 0;
}
.item-card:hover { transform: scale(var(--card-hover-scale)); }
.item-card img {
	height: var(--card-cover-h);
	object-fit: cover;
	border-radius: var(--card-radius);
	box-shadow: var(--card-shadow);
}

/* --- Item detail overlay --- */
.item-detail {
	display: none;
	position: absolute;
	inset: 0;
	background: var(--detail-bg);
	z-index: var(--z-detail);
	flex-direction: column;
	overflow: hidden;
}
.item-detail.open { display: flex; }
.detail-close-bar {
	flex-shrink: 0;
	height: var(--detail-close-bar-h);
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding: var(--close-pad);
	background: var(--detail-bg);
}
.detail-close-bar .detail-close {
	cursor: pointer;
	width: var(--close-size);
	height: var(--close-size);
	opacity: var(--close-opacity);
}
.detail-close-bar .detail-close:hover { opacity: var(--close-opacity-hover); }
.detail-scroll {
	flex: 1;
	overflow-y: auto;
	padding: 0 var(--detail-pad) var(--detail-pad);
}
.detail-header {
	display: flex;
	gap: var(--detail-header-gap);
	margin-bottom: var(--sp-lg);
}
.detail-header img {
	flex-shrink: 0;
	height: var(--detail-cover-h);
	width: auto;
	max-width: none;
	border-radius: var(--detail-cover-radius);
	box-shadow: var(--detail-cover-shadow);
}
.detail-meta h2 {
	font-family: var(--detail-title-font);
	font-size: var(--detail-title-size);
	font-weight: var(--detail-title-weight);
	color: var(--detail-title-color);
	margin-bottom: var(--sp-xs);
	line-height: var(--detail-title-lh);
}
.detail-meta .metadata {
	font-style: italic;
	font-size: var(--detail-meta-size);
	color: var(--detail-meta-color);
	margin-bottom: var(--sp-sm);
}
.detail-meta .price-row {
	display: none;
	align-items: center;
	gap: var(--sp-md);
	margin-bottom: var(--sp-sm);
	width: fit-content;
}
.detail-meta .price-row.visible {
	display: flex;
}
.detail-meta .price {
	font-size: var(--detail-price-size);
}
.detail-meta .send-btn {
	background: var(--send-btn-bg);
	color: var(--send-btn-color);
	font-family: var(--send-btn-font);
	font-size: var(--send-btn-font-size);
	border: none;
	border-radius: var(--send-btn-radius);
	padding: var(--send-btn-pad);
	cursor: pointer;
	opacity: 0;
	transition: opacity var(--tr-fast);
	pointer-events: none;
}
.detail-meta .price-row:hover .send-btn,
.detail-meta .send-btn:focus-visible {
	opacity: 1;
	pointer-events: auto;
}
.detail-meta .send-btn:hover {
	opacity: var(--send-btn-hover-opacity);
}
/* Touch devices have no hover, so keep the button visible. */
@media (hover: none) {
	.detail-meta .send-btn {
		opacity: 1;
		pointer-events: auto;
	}
}
.detail-body {
	font-family: var(--detail-body-font);
	font-size: var(--detail-body-size);
	line-height: var(--detail-body-lh);
	color: var(--detail-body-color);
}
.detail-body p { margin-bottom: 10px; }

/* --- Cart panel --- */
.cart-panel {
	display: none;
	position: absolute;
	inset: 0;
	background: var(--window-bg);
	z-index: var(--z-panel);
	overflow-y: auto;
	padding: var(--panel-pad);
	flex-direction: column;
}
.cart-panel.open {
	display: flex;
}
.cart-panel h2 {
	font-family: var(--font-ui);
	font-size: 22px;
	color: var(--col-pink);
	margin-bottom: var(--sp-lg);
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.cart-panel h2 img {
	width: var(--close-size);
	height: var(--close-size);
	cursor: pointer;
	opacity: var(--close-opacity);
}
.cart-panel h2 img:hover { opacity: var(--close-opacity-hover); }
.cart-items {
	flex: 1;
	overflow-y: auto;
}
.cart-row {
	display: flex;
	align-items: center;
	gap: var(--sp-md);
	padding: var(--sp-md) 0;
	border-bottom: 1px solid var(--col-pink-light);
}
.cart-row img {
	height: 72px;
	width: auto;
	border-radius: var(--radius-xs);
	flex-shrink: 0;
}
.cart-row-info {
	flex: 1;
	min-width: 0;
}
.cart-row-title {
	font-family: var(--font-body);
	font-size: 16px;
	font-weight: bold;
	color: var(--col-purple);
	margin-bottom: 2px;
}
.cart-row-price {
	font-size: 18px;
	color: var(--col-purple);
}
.cart-row-qty {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
}
.cart-row-qty button {
	width: 28px;
	height: 28px;
	border: 1px solid var(--col-pink-light);
	border-radius: var(--radius-sm);
	background: var(--col-pink-bg);
	color: var(--col-purple);
	font-size: 16px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}
.cart-row-qty button:hover { background: var(--col-pink-light); }
.cart-row-qty span {
	font-size: 16px;
	min-width: 20px;
	text-align: center;
	color: var(--col-purple);
}
.cart-row-remove {
	background: none;
	border: none;
	cursor: pointer;
	opacity: 0.6;
	flex-shrink: 0;
}
.cart-row-remove img {
	width: 14px;
	height: 14px;
}
.cart-row-remove:hover { opacity: 1; }
.cart-footer {
	padding-top: var(--sp-lg);
	border-top: 2px solid var(--col-pink-light);
	display: none;
}
.cart-panel.has-items .cart-footer { display: block; }
.cart-total {
	display: flex;
	justify-content: space-between;
	font-family: var(--font-ui);
	font-size: 20px;
	color: var(--col-purple);
	margin-bottom: var(--sp-lg);
}
.cart-footer .send-btn {
	display: block;
	width: 100%;
	background: var(--send-btn-bg);
	color: var(--send-btn-color);
	font-family: var(--send-btn-font);
	font-size: var(--send-btn-font-size);
	border: none;
	border-radius: var(--send-btn-radius);
	padding: var(--send-btn-pad);
	cursor: pointer;
	transition: opacity var(--tr-fast);
}
.cart-footer .send-btn:hover { opacity: var(--send-btn-hover-opacity); }
.cart-empty {
	display: none;
	color: var(--placeholder-color);
	font-family: var(--font-ui);
	text-align: center;
	padding-top: 40px;
}
.cart-panel:not(.has-items) .cart-empty { display: block; }

/* --- About panel --- */
.about-panel {
	display: none;
	position: absolute;
	inset: 0;
	background: var(--window-bg);
	z-index: var(--z-panel);
	overflow-y: auto;
	padding: var(--panel-pad);
}
.about-panel.open { display: block; }
.about-panel h2 {
	font-family: var(--about-heading-font);
	font-size: var(--about-heading-size);
	color: var(--about-heading-color);
	margin-bottom: var(--sp-lg);
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.about-panel h2 img {
	width: var(--close-size);
	height: var(--close-size);
	cursor: pointer;
	opacity: var(--close-opacity);
}
.about-panel h2 img:hover { opacity: var(--close-opacity-hover); }
.about-panel p {
	line-height: var(--about-body-lh);
	color: var(--about-body-color);
	margin-bottom: var(--sp-md);
}

/* --- Contact panel --- */
.contact-panel {
	display: none;
	position: absolute;
	inset: 0;
	background: var(--window-bg);
	z-index: var(--z-panel);
	overflow-y: auto;
	padding: var(--panel-pad);
}
.contact-panel.open { display: block; }
.contact-panel h2 {
	font-family: var(--contact-heading-font);
	font-size: var(--contact-heading-size);
	color: var(--contact-heading-color);
	margin-bottom: var(--sp-lg);
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.contact-panel h2 img {
	width: var(--close-size);
	height: var(--close-size);
	cursor: pointer;
	opacity: var(--close-opacity);
}
.contact-panel h2 img:hover { opacity: var(--close-opacity-hover); }
.contact-panel .email-line {
	color: var(--contact-text-color);
	margin-bottom: var(--sp-lg);
}
.contact-panel form {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.contact-panel input,
.contact-panel textarea {
	width: var(--input-w);
	max-width: 100%;
	border: none;
	background: var(--input-bg);
	border-radius: var(--input-radius);
	padding: var(--input-pad);
	font-family: var(--input-font);
	font-size: var(--input-font-size);
	color: var(--input-color);
	outline: none;
	margin-bottom: var(--sp-md);
	resize: vertical;
}
.contact-panel input::placeholder,
.contact-panel textarea::placeholder {
	color: var(--input-placeholder);
}
.contact-panel textarea {
	min-height: var(--textarea-min-h);
}
.contact-panel .send-btn {
	display: block;
	background: var(--send-btn-bg);
	color: var(--send-btn-color);
	font-family: var(--send-btn-font);
	font-size: var(--send-btn-font-size);
	border: none;
	border-radius: var(--send-btn-radius);
	padding: var(--send-btn-pad);
	cursor: pointer;
	transition: opacity var(--tr-fast);
}
.contact-panel .send-btn:hover {
	opacity: var(--send-btn-hover-opacity);
}

/* --- Newsletter --- */
.newsletter {
	margin-top: var(--newsletter-mt);
}
.newsletter .newsletter-text {
	color: var(--contact-text-color);
	margin-bottom: var(--sp-md);
}
.newsletter form {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.newsletter input {
	width: var(--input-w);
	max-width: 100%;
	border: none;
	background: var(--input-bg);
	border-radius: var(--input-radius);
	padding: var(--input-pad);
	font-family: var(--input-font);
	font-size: var(--input-font-size);
	color: var(--input-color);
	outline: none;
	margin-bottom: var(--sp-md);
}
.newsletter input::placeholder {
	color: var(--input-placeholder);
}

/* --- Oxeverse login/join ---
   Styles are injected by the Oxeverse module loaded from oxegen. */

/* --- Placeholder text (empty tabs) --- */
.placeholder-text {
	color: var(--placeholder-color);
	font-family: var(--placeholder-font);
}