/**
 * Ganexa Woo Builder — frontend styles.
 * Prefix: stcwb-
 */

:root {
	--stcwb-primary: #2563eb;
	--stcwb-secondary: #1e293b;
	--stcwb-accent: #f59e0b;
	--stcwb-border: #e2e8f0;
	--stcwb-muted: #64748b;
	--stcwb-radius: 10px;
}

/* -------------------------------------------------------------------------
 * Grid
 * ---------------------------------------------------------------------- */
.stcwb-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}

.stcwb-empty {
	padding: 24px;
	text-align: center;
	color: var(--stcwb-muted);
}

/* -------------------------------------------------------------------------
 * Card base
 * ---------------------------------------------------------------------- */
.stcwb-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--stcwb-border);
	border-radius: var(--stcwb-radius);
	overflow: hidden;
	transition: box-shadow .25s ease, transform .25s ease;
	position: relative;
}

.stcwb-card:hover {
	box-shadow: 0 12px 30px rgba(15, 23, 42, .12);
}

.stcwb-card__media {
	position: relative;
	overflow: hidden;
	background: #f8fafc;
}

.stcwb-card__image,
.stcwb-card__image-link img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
	transition: transform .4s ease;
}

.stcwb-card:hover .stcwb-card__image {
	transform: scale(1.05);
}

.stcwb-card__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 16px;
	flex: 1;
}

.stcwb-card__title {
	margin: 0;
	font-size: 16px;
	line-height: 1.35;
	font-weight: 600;
}

.stcwb-card__title a {
	color: var(--stcwb-secondary);
	text-decoration: none;
}

.stcwb-card__title a:hover {
	color: var(--stcwb-primary);
}

.stcwb-card__sku,
.stcwb-card__brand,
.stcwb-card__category,
.stcwb-card__variant {
	font-size: 12px;
	color: var(--stcwb-muted);
}

.stcwb-card__excerpt {
	font-size: 13px;
	color: #475569;
	line-height: 1.5;
}

.stcwb-card__features {
	margin: 0;
	padding-left: 18px;
	font-size: 12.5px;
	color: #475569;
}

.stcwb-card__price {
	font-size: 18px;
	font-weight: 700;
	color: var(--stcwb-secondary);
}

.stcwb-card__price del {
	color: var(--stcwb-muted);
	font-weight: 400;
	margin-right: 6px;
}

/* -------------------------------------------------------------------------
 * Layout presets
 * ---------------------------------------------------------------------- */

/* Layout 2 — image left / content right */
.stcwb-card--layout-2 { flex-direction: row; }
.stcwb-card--layout-2 .stcwb-card__media { width: 42%; }
.stcwb-card--layout-2 .stcwb-card__body { width: 58%; }

/* Layout 3 — image right / content left */
.stcwb-card--layout-3 { flex-direction: row-reverse; }
.stcwb-card--layout-3 .stcwb-card__media { width: 42%; }
.stcwb-card--layout-3 .stcwb-card__body { width: 58%; }

/* Layout 4 — overlay card */
.stcwb-card--layout-4 { color: #fff; }
.stcwb-card--layout-4 .stcwb-card__media { position: absolute; inset: 0; width: 100%; height: 100%; }
.stcwb-card--layout-4 .stcwb-card__media::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(15,23,42,0) 30%, rgba(15,23,42,.85) 100%);
}
.stcwb-card--layout-4 { min-height: 340px; justify-content: flex-end; }
.stcwb-card--layout-4 .stcwb-card__body { position: relative; z-index: 2; }
.stcwb-card--layout-4 .stcwb-card__title a,
.stcwb-card--layout-4 .stcwb-card__price { color: #fff; }
.stcwb-card--layout-4 .stcwb-card__sku,
.stcwb-card--layout-4 .stcwb-card__brand,
.stcwb-card--layout-4 .stcwb-card__category { color: rgba(255,255,255,.8); }

/* Layout 5 — industrial catalog (dense, bordered rows) */
.stcwb-card--layout-5 { border-width: 2px; border-radius: 4px; }
.stcwb-card--layout-5 .stcwb-card__body { gap: 4px; padding: 14px; }
.stcwb-card--layout-5 .stcwb-card__title { font-size: 15px; text-transform: uppercase; letter-spacing: .02em; }
.stcwb-card--layout-5 .stcwb-card__sku { font-weight: 600; color: var(--stcwb-secondary); }
.stcwb-card--layout-5 .stcwb-card__features { border-top: 1px dashed var(--stcwb-border); padding-top: 8px; margin-top: 4px; }

/* Layout 6 — enterprise card (elevated, generous spacing) */
.stcwb-card--layout-6 { border: none; box-shadow: 0 4px 18px rgba(15,23,42,.08); border-radius: 16px; }
.stcwb-card--layout-6 .stcwb-card__body { padding: 22px; gap: 12px; }
.stcwb-card--layout-6 .stcwb-card__title { font-size: 18px; }

/* Layout 7 — minimal */
.stcwb-card--layout-7 { border: none; background: transparent; }
.stcwb-card--layout-7 .stcwb-card__body { padding: 12px 4px; gap: 4px; }
.stcwb-card--layout-7:hover { box-shadow: none; }

/* Layout 8 — custom builder uses default styling + custom element order */

/* -------------------------------------------------------------------------
 * Rating
 * ---------------------------------------------------------------------- */
.stcwb-rating {
	position: relative;
	display: inline-block;
	font-size: 15px;
	line-height: 1;
	letter-spacing: 2px;
	font-family: Arial, sans-serif;
}
.stcwb-rating__bg { color: #d1d5db; }
.stcwb-rating__fill {
	position: absolute; left: 0; top: 0; overflow: hidden;
	white-space: nowrap; color: var(--stcwb-accent);
}
.stcwb-rating__count { font-size: 12px; color: var(--stcwb-muted); letter-spacing: 0; }

/* -------------------------------------------------------------------------
 * Buttons
 * ---------------------------------------------------------------------- */
.stcwb-enquire-btn,
.stcwb-quickview-btn,
.stcwb-submit-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	cursor: pointer;
	border: none;
	border-radius: 8px;
	padding: 10px 18px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	transition: background-color .2s ease, color .2s ease, opacity .2s ease;
}

.stcwb-enquire-btn,
.stcwb-submit-btn {
	background: var(--stcwb-primary);
	color: #fff;
}
.stcwb-enquire-btn:hover,
.stcwb-submit-btn:hover { background: var(--stcwb-secondary); color: #fff; }

.stcwb-quickview-btn {
	background: #f1f5f9;
	color: var(--stcwb-secondary);
}
.stcwb-quickview-btn:hover { background: var(--stcwb-secondary); color: #fff; }

.stcwb-card__body .stcwb-enquire-btn,
.stcwb-card__body .stcwb-quickview-btn { margin-top: auto; }

/* -------------------------------------------------------------------------
 * Categories widget
 * ---------------------------------------------------------------------- */
.stcwb-cats--grid,
.stcwb-cats--masonry {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}
.stcwb-cats--masonry { grid-auto-rows: 10px; }

.stcwb-cat-card {
	display: block;
	border-radius: var(--stcwb-radius);
	overflow: hidden;
	text-decoration: none;
	border: 1px solid var(--stcwb-border);
	background: #fff;
	transition: box-shadow .2s ease, transform .2s ease;
}
.stcwb-cat-card:hover { box-shadow: 0 10px 24px rgba(15,23,42,.12); transform: translateY(-2px); }
.stcwb-cat-card__img { display: block; width: 100%; height: auto; }
.stcwb-cat-card__name {
	display: block; padding: 12px 14px;
	font-weight: 600; color: var(--stcwb-secondary); text-align: center;
}
.stcwb-cat-card__count { color: var(--stcwb-muted); font-weight: 400; }

/* -------------------------------------------------------------------------
 * Search widget
 * ---------------------------------------------------------------------- */
.stcwb-search { position: relative; max-width: 520px; }
.stcwb-search__form { display: flex; align-items: stretch; }
.stcwb-search__input {
	flex: 1;
	padding: 12px 16px;
	border: 1px solid var(--stcwb-border);
	border-radius: 8px 0 0 8px;
	font-size: 14px;
	outline: none;
}
.stcwb-search__input:focus { border-color: var(--stcwb-primary); }
.stcwb-search__submit {
	border: none; cursor: pointer;
	padding: 0 18px;
	background: var(--stcwb-primary); color: #fff;
	border-radius: 0 8px 8px 0;
}
.stcwb-search__results {
	position: absolute; z-index: 50; left: 0; right: 0; top: calc(100% + 6px);
	background: #fff; border: 1px solid var(--stcwb-border);
	border-radius: 10px; box-shadow: 0 16px 40px rgba(15,23,42,.16);
	max-height: 420px; overflow-y: auto;
}
.stcwb-search__item {
	display: flex; gap: 12px; align-items: center;
	padding: 10px 14px; text-decoration: none; color: var(--stcwb-secondary);
	border-bottom: 1px solid #f1f5f9;
}
.stcwb-search__item:last-child { border-bottom: none; }
.stcwb-search__item:hover { background: #f8fafc; }
.stcwb-search__item img { width: 46px; height: 46px; object-fit: cover; border-radius: 6px; }
.stcwb-search__item-name { font-weight: 600; font-size: 14px; }
.stcwb-search__item-meta { font-size: 12px; color: var(--stcwb-muted); }
.stcwb-search__empty { padding: 16px; text-align: center; color: var(--stcwb-muted); }

/* -------------------------------------------------------------------------
 * Filter widget
 * ---------------------------------------------------------------------- */
.stcwb-filter__group { margin-bottom: 20px; }
.stcwb-filter__title { margin: 0 0 8px; font-size: 14px; font-weight: 700; color: var(--stcwb-secondary); }
.stcwb-filter__list { list-style: none; margin: 0; padding: 0; max-height: 220px; overflow-y: auto; }
.stcwb-filter__list li { margin-bottom: 6px; }
.stcwb-filter__list label { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.stcwb-filter__count { color: var(--stcwb-muted); font-size: 12px; }
.stcwb-filter__price-inputs { display: flex; align-items: center; gap: 8px; }
.stcwb-filter__price-inputs input { width: 90px; padding: 8px; border: 1px solid var(--stcwb-border); border-radius: 6px; }
.stcwb-filter__actions { display: flex; gap: 10px; }
.stcwb-filter__apply {
	background: var(--stcwb-primary); color: #fff; border: none;
	padding: 10px 16px; border-radius: 8px; cursor: pointer; font-weight: 600;
}
.stcwb-filter__reset {
	background: transparent; color: var(--stcwb-muted);
	border: 1px solid var(--stcwb-border); padding: 10px 16px; border-radius: 8px; cursor: pointer;
}

/* -------------------------------------------------------------------------
 * Carousel
 * ---------------------------------------------------------------------- */
.stcwb-carousel { position: relative; padding-bottom: 8px; }
.stcwb-carousel .swiper-slide { height: auto; }
.stcwb-carousel .stcwb-card { height: 100%; }
.stcwb-carousel .swiper-button-prev,
.stcwb-carousel .swiper-button-next { color: var(--stcwb-primary); }
.stcwb-carousel .swiper-pagination-bullet-active { background: var(--stcwb-primary); }

/* -------------------------------------------------------------------------
 * Pagination / load more
 * ---------------------------------------------------------------------- */
.stcwb-loadmore-wrap,
.stcwb-infinite-trigger { text-align: center; margin-top: 28px; }
.stcwb-loadmore-btn {
	background: var(--stcwb-secondary); color: #fff; border: none;
	padding: 12px 28px; border-radius: 8px; cursor: pointer; font-weight: 600;
}
.stcwb-loadmore-btn:hover { background: var(--stcwb-primary); }
.stcwb-pagination ul { display: flex; gap: 6px; list-style: none; padding: 0; justify-content: center; margin-top: 24px; }
.stcwb-pagination a, .stcwb-pagination span {
	display: inline-flex; min-width: 38px; height: 38px; align-items: center; justify-content: center;
	border: 1px solid var(--stcwb-border); border-radius: 8px; text-decoration: none; color: var(--stcwb-secondary);
}
.stcwb-pagination .current { background: var(--stcwb-primary); color: #fff; border-color: var(--stcwb-primary); }

/* Spinner */
.stcwb-spinner {
	display: inline-block; width: 26px; height: 26px;
	border: 3px solid rgba(37,99,235,.2); border-top-color: var(--stcwb-primary);
	border-radius: 50%; animation: stcwb-spin .8s linear infinite;
}
@keyframes stcwb-spin { to { transform: rotate(360deg); } }

/* -------------------------------------------------------------------------
 * Modals (enquiry + quick view)
 * ---------------------------------------------------------------------- */
.stcwb-modal { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; }
.stcwb-modal[hidden] { display: none; }
.stcwb-modal__overlay { position: absolute; inset: 0; background: rgba(15,23,42,.6); backdrop-filter: blur(2px); }
.stcwb-modal__dialog {
	position: relative; z-index: 2; width: 92%; max-width: 460px;
	background: #fff; border-radius: 14px;
	padding: 24px 28px 28px;
	box-shadow: 0 24px 60px rgba(0,0,0,.3);
	max-height: 90vh; overflow-y: auto;
	animation: stcwb-pop .25s ease;
}
.stcwb-modal__dialog--qv { max-width: 860px; padding-top: 52px; }
@keyframes stcwb-pop { from { transform: translateY(12px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }

/* Header row keeps the title and close button apart — no overlap on any theme. */
.stcwb-modal .stcwb-modal__header {
	display: flex; align-items: center; justify-content: space-between;
	gap: 12px; margin: 0 0 16px;
}
.stcwb-modal .stcwb-modal__title {
	margin: 0; padding: 0; font-size: 20px; font-weight: 700; line-height: 1.3;
	color: var(--stcwb-secondary);
}

/* Close button — force shape/size/colour to beat any theme button styles. */
.stcwb-modal button.stcwb-modal__close,
.stcwb-modal .stcwb-modal__close {
	flex: 0 0 auto; box-sizing: border-box;
	display: inline-flex !important; align-items: center; justify-content: center;
	width: 34px !important; height: 34px !important; min-width: 34px !important;
	padding: 0 !important; margin: 0 !important;
	border: none !important; border-radius: 50% !important;
	background: #eef2f7 !important; color: #475569 !important;
	font-size: 22px !important; font-weight: 400 !important; line-height: 1 !important;
	cursor: pointer; box-shadow: none !important; text-shadow: none !important;
	float: none !important; position: static;
	-webkit-appearance: none !important; appearance: none !important;
	transition: background-color .2s ease, color .2s ease, transform .2s ease;
}
.stcwb-modal button.stcwb-modal__close:hover,
.stcwb-modal button.stcwb-modal__close:focus {
	background: var(--stcwb-secondary) !important; color: #fff !important;
	transform: rotate(90deg); outline: none;
}

/* Quick view has no header row, so pin its close button to the corner. */
.stcwb-modal__dialog--qv .stcwb-modal__close {
	position: absolute !important; top: 14px !important; right: 14px !important; left: auto !important; z-index: 5;
}
.stcwb-modal__body { min-height: 120px; display: flex; align-items: center; justify-content: center; }

/* Enquiry product context */
.stcwb-enquiry-product { margin-bottom: 16px; padding: 10px 14px; background: #f8fafc; border-radius: 8px; }
.stcwb-enquiry-product__name { display: block; font-weight: 600; color: var(--stcwb-secondary); }
.stcwb-enquiry-product__sku { display: block; font-size: 12px; color: var(--stcwb-muted); }

/* Enquiry form */
.stcwb-field { margin-bottom: 14px; }
.stcwb-field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--stcwb-secondary); }
.stcwb-req { color: #dc2626; }
.stcwb-optional { color: var(--stcwb-muted); font-weight: 400; font-size: 12px; }
.stcwb-field--consent { margin-top: 4px; }
.stcwb-consent { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; font-weight: 400; color: #475569; cursor: pointer; }
.stcwb-consent input { width: auto; margin-top: 3px; flex: 0 0 auto; }
.stcwb-field input,
.stcwb-field textarea {
	width: 100%; padding: 11px 13px; border: 1px solid var(--stcwb-border);
	border-radius: 8px; font-size: 14px; outline: none; box-sizing: border-box;
}
.stcwb-field input:focus,
.stcwb-field textarea:focus { border-color: var(--stcwb-primary); box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.stcwb-field.stcwb-field--error input,
.stcwb-field.stcwb-field--error textarea { border-color: #dc2626; }
.stcwb-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.stcwb-submit-btn { width: 100%; padding: 13px; font-size: 15px; margin-top: 6px; }
.stcwb-submit-btn[disabled] { opacity: .6; cursor: not-allowed; }
.stcwb-form__feedback { font-size: 13px; margin: 6px 0; min-height: 18px; }
.stcwb-form__feedback.is-error { color: #dc2626; }
.stcwb-form__feedback.is-success { color: #16a34a; font-weight: 600; }

/* Quick view content */
.stcwb-qv { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.stcwb-qv__image { width: 100%; height: auto; border-radius: 10px; }
.stcwb-qv__title { margin: 0 0 8px; font-size: 22px; color: var(--stcwb-secondary); }
.stcwb-qv__sku { font-size: 13px; color: var(--stcwb-muted); margin-bottom: 8px; }
.stcwb-qv__price { font-size: 22px; font-weight: 700; margin: 12px 0; color: var(--stcwb-secondary); }
.stcwb-qv__desc { color: #475569; line-height: 1.6; margin-bottom: 14px; }
.stcwb-qv__features { padding-left: 18px; color: #475569; margin-bottom: 16px; }

/* -------------------------------------------------------------------------
 * Responsive
 * ---------------------------------------------------------------------- */
@media (max-width: 1024px) {
	.stcwb-grid { grid-template-columns: repeat(2, 1fr); }
	.stcwb-cats--grid, .stcwb-cats--masonry { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
	.stcwb-grid { grid-template-columns: 1fr; }
	.stcwb-cats--grid, .stcwb-cats--masonry { grid-template-columns: 1fr; }
	.stcwb-qv { grid-template-columns: 1fr; }
	.stcwb-card--layout-2, .stcwb-card--layout-3 { flex-direction: column; }
	.stcwb-card--layout-2 .stcwb-card__media,
	.stcwb-card--layout-2 .stcwb-card__body,
	.stcwb-card--layout-3 .stcwb-card__media,
	.stcwb-card--layout-3 .stcwb-card__body { width: 100%; }
}