.dio-storefront {
	--dio-ink: #1a1a1a;
	--dio-muted: #6b6b6b;
	--dio-border: #e4e2dd;
	--dio-bg: #faf9f7;
	--dio-accent: #8a6d3b;
	--dio-accent-dark: #6b5329;
	max-width: 1280px;
	margin: 0 auto;
	padding: 24px 16px 60px;
	color: var(--dio-ink);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

/* Filters */
.dio-sf-filters { background: var(--dio-bg); border: 1px solid var(--dio-border); border-radius: 8px; padding: 16px; margin-bottom: 12px; position: sticky; top: var(--dio-sticky-offset, 0px); z-index: 40; }
.dio-sf-filter-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 10px; }
.dio-sf-filter-row:last-child { margin-bottom: 0; }
.dio-storefront input[type=text], .dio-storefront input[type=number], .dio-storefront select {
	padding: 9px 12px; border: 1px solid var(--dio-border); border-radius: 6px; font-size: 14px; background: #fff; color: var(--dio-ink);
}
.dio-storefront input[type=text] { min-width: 160px; }
.dio-storefront input[type=number] { width: 90px; }
.dio-sf-dash { color: var(--dio-muted); }

.dio-sf-view-toggle { display: flex; gap: 4px; }
.dio-view-btn { border: 1px solid var(--dio-border); background: #fff; padding: 7px 12px; border-radius: 6px; cursor: pointer; font-size: 15px; touch-action: manipulation; }
.dio-view-btn.active { background: var(--dio-ink); color: #fff; border-color: var(--dio-ink); }

.dio-sf-density-toggle { display: flex; gap: 4px; margin-left: auto; }
.dio-density-btn { border: 1px solid var(--dio-border); background: #fff; padding: 7px 12px; border-radius: 6px; cursor: pointer; font-size: 13px; min-width: 34px; touch-action: manipulation; }
.dio-density-btn.active { background: var(--dio-accent); color: #fff; border-color: var(--dio-accent); }

.dio-sf-chip-group { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.dio-sf-chip-label { font-size: 12px; color: var(--dio-muted); margin-right: 4px; text-transform: uppercase; letter-spacing: .04em; }
.dio-chip { border: 1px solid var(--dio-border); background: #fff; padding: 5px 11px; border-radius: 20px; font-size: 13px; cursor: pointer; color: var(--dio-ink); touch-action: manipulation; }
.dio-chip.active { background: var(--dio-accent); border-color: var(--dio-accent); color: #fff; }
.dio-sf-clear { margin-left: auto; background: none; border: none; color: var(--dio-muted); text-decoration: underline; cursor: pointer; font-size: 13px; }

/* Meta bar */
.dio-sf-meta { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; position: sticky; top: calc(var(--dio-sticky-offset, 0px) + 90px); z-index: 39; background: #fff; padding: 8px 2px; }
#dio-sf-count { color: var(--dio-muted); font-size: 14px; }
.dio-sf-cart-btn { background: var(--dio-ink); color: #fff; border: none; padding: 10px 18px; border-radius: 6px; cursor: pointer; font-size: 14px; touch-action: manipulation; }
.dio-sf-cart-btn:hover { background: #333; }

/* Grid */
.dio-sf-grid { display: grid; grid-template-columns: repeat(var(--dio-grid-cols, 4), 1fr); gap: 16px; }
@media (max-width: 900px) { .dio-sf-grid { grid-template-columns: repeat(min(2, var(--dio-grid-cols, 4)), 1fr); } }
.dio-sf-card { border: 1px solid var(--dio-border); border-radius: 10px; overflow: hidden; background: #fff; transition: box-shadow .15s ease, transform .15s ease; }
.dio-sf-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.08); transform: translateY(-2px); }
.dio-sf-card.dio-in-cart { border-color: var(--dio-accent); }
.dio-sf-card-media { aspect-ratio: 1 / 1; background: #f3f2ef; cursor: pointer; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.dio-sf-card-media img { width: 100%; height: 100%; object-fit: cover; }
.dio-sf-no-image { color: var(--dio-muted); font-size: 12px; text-align: center; padding: 20px; }
.dio-sf-card-body { padding: 12px 14px 14px; }
.dio-sf-card-title { font-weight: 600; font-size: 15px; }
.dio-sf-card-sub { color: var(--dio-muted); font-size: 13px; margin-top: 2px; }
.dio-sf-card-stock { color: #999; font-size: 11px; margin-top: 4px; letter-spacing: .02em; }
.dio-add-btn { margin-top: 10px; width: 100%; padding: 8px 10px; border: 1px solid var(--dio-ink); background: #fff; color: var(--dio-ink); border-radius: 6px; cursor: pointer; font-size: 13px; }
.dio-add-btn:hover { background: var(--dio-ink); color: #fff; }
.dio-in-cart .dio-add-btn { background: var(--dio-accent); color: #fff; border-color: var(--dio-accent); }

/* Table */
.dio-sf-table-wrap { overflow-x: auto; border: 1px solid var(--dio-border); border-radius: 8px; }
.dio-sf-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.dio-sf-table th, .dio-sf-table td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--dio-border); white-space: nowrap; }
.dio-sf-table th { background: var(--dio-bg); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; color: var(--dio-muted); }
.dio-sf-table tr:last-child td { border-bottom: none; }
.dio-sf-table .dio-add-btn { width: auto; margin: 0; padding: 6px 12px; }
.dio-sf-table a { color: var(--dio-ink); font-weight: 600; text-decoration: none; }
.dio-sf-table a:hover { text-decoration: underline; }

.dio-sf-empty { text-align: center; padding: 60px 20px; color: var(--dio-muted); }

.dio-sf-pagination { display: flex; justify-content: center; align-items: center; gap: 16px; margin-top: 28px; }
.dio-sf-pagination button { padding: 8px 16px; border: 1px solid var(--dio-border); background: #fff; border-radius: 6px; cursor: pointer; }
.dio-sf-pagination button:disabled { opacity: .4; cursor: default; }
.dio-sf-page-info { font-size: 13px; color: var(--dio-muted); }

/* Drawer */
.dio-sf-drawer-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.4); opacity: 0; pointer-events: none; transition: opacity .2s ease; z-index: 9998; }
.dio-sf-drawer-backdrop.open { opacity: 1; pointer-events: auto; }
.dio-sf-drawer { position: fixed; top: 0; right: -420px; width: 400px; max-width: 92vw; height: 100%; background: #fff; z-index: 9999; box-shadow: -6px 0 30px rgba(0,0,0,0.15); transition: right .25s ease; display: flex; flex-direction: column; }
.dio-sf-drawer.open { right: 0; }
.dio-sf-drawer-inner { display: flex; flex-direction: column; height: 100%; padding: 20px; overflow-y: auto; }
.dio-sf-drawer-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.dio-sf-drawer-close { background: none; border: none; font-size: 26px; line-height: 1; cursor: pointer; color: var(--dio-muted); }
.dio-sf-drawer-items { flex: 0 0 auto; max-height: 280px; overflow-y: auto; margin-bottom: 16px; }
.dio-sf-drawer-item { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--dio-border); font-size: 13px; }
.dio-sf-drawer-remove { background: none; border: none; color: #b91c1c; cursor: pointer; font-size: 12px; text-decoration: underline; flex-shrink: 0; }
.dio-sf-drawer-empty { color: var(--dio-muted); font-size: 13px; }

.dio-sf-inquiry-form { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--dio-border); padding-top: 16px; }
.dio-sf-inquiry-form input, .dio-sf-inquiry-form textarea { padding: 10px 12px; border: 1px solid var(--dio-border); border-radius: 6px; font-size: 14px; font-family: inherit; }
.dio-sf-honeypot { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.dio-sf-submit-btn { background: var(--dio-accent); color: #fff; border: none; padding: 12px; border-radius: 6px; cursor: pointer; font-size: 14px; font-weight: 600; }
.dio-sf-submit-btn:hover { background: var(--dio-accent-dark); }
.dio-sf-submit-btn:disabled { opacity: .6; cursor: default; }
.dio-sf-form-status { font-size: 13px; min-height: 18px; }
.dio-sf-form-status.success { color: #166534; }
.dio-sf-form-status.error { color: #b91c1c; }

/* Lightbox */
.dio-sf-lightbox { position: fixed; inset: 0; background: rgba(0,0,0,0.6); display: none; align-items: center; justify-content: center; z-index: 9999; padding: 20px; }
.dio-sf-lightbox.open { display: flex; }
.dio-sf-lightbox-inner { background: #fff; border-radius: 10px; max-width: 800px; width: 100%; max-height: 90vh; overflow-y: auto; position: relative; padding: 24px; }
.dio-sf-lightbox #dio-sf-lightbox-content { display: flex; gap: 24px; flex-wrap: wrap; }
.dio-sf-lb-media { flex: 1 1 280px; }
.dio-sf-lb-media img { width: 100%; border-radius: 8px; }
.dio-sf-lb-video { display: block; text-align: center; margin-top: 10px; padding: 10px; background: var(--dio-ink); color: #fff; border-radius: 6px; text-decoration: none; font-size: 13px; }
.dio-sf-lb-details { flex: 1 1 280px; }
.dio-sf-lb-table { width: 100%; border-collapse: collapse; margin: 12px 0; }
.dio-sf-lb-table th { text-align: left; color: var(--dio-muted); font-weight: 500; padding: 5px 10px 5px 0; vertical-align: top; width: 150px; font-size: 13px; }
.dio-sf-lb-table td { padding: 5px 0; font-size: 13px; }
.dio-sf-lb-add { margin-top: 6px; }

.dio-sf-noscroll { overflow: hidden; }

@media (max-width: 640px) {
	.dio-sf-drawer { width: 100%; max-width: 100%; }
	.dio-sf-view-toggle { margin-left: 0; }
}

/* Account bar + dealer login */
.dio-sf-account-bar { display: flex; justify-content: flex-end; align-items: center; gap: 12px; margin-bottom: 12px; font-size: 13px; }
.dio-sf-account-status { color: var(--dio-muted); }
.dio-sf-account-link { background: none; border: none; color: var(--dio-accent); text-decoration: underline; cursor: pointer; font-size: 13px; padding: 0; }
.dio-sf-card-price { font-weight: 700; color: var(--dio-accent-dark); font-size: 14px; margin-top: 4px; }

.dio-sf-login-modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.96); background: #fff; border-radius: 10px; padding: 28px; width: 380px; max-width: 90vw; z-index: 9999; opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; box-shadow: 0 20px 60px rgba(0,0,0,0.2); }
.dio-sf-login-modal.open { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); }
.dio-sf-login-modal h3 { margin-top: 0; }
.dio-sf-login-modal-inner { position: relative; }
.dio-sf-login-modal p.dio-sub { font-size: 13px; margin-top: 4px; }
#dio-dealer-login-form p { margin: 10px 0; }
#dio-dealer-login-form label { display: block; font-size: 13px; margin-bottom: 4px; color: var(--dio-muted); }
#dio-dealer-login-form input[type=text], #dio-dealer-login-form input[type=password] { width: 100%; padding: 10px 12px; border: 1px solid var(--dio-border); border-radius: 6px; font-size: 14px; box-sizing: border-box; }
#dio-dealer-login-form input[type=submit] { background: var(--dio-accent); color: #fff; border: none; padding: 12px; border-radius: 6px; cursor: pointer; font-size: 14px; font-weight: 600; width: 100%; margin-top: 6px; }
#dio-dealer-login-form input[type=submit]:hover { background: var(--dio-accent-dark); }
#dio-dealer-login-form .forgetmenot { display: flex; align-items: center; gap: 6px; }
#dio-dealer-login-form .forgetmenot label { display: inline; margin: 0; }