/*
Theme Name: Outlet Craigslist Theme
Theme URI: https://bixci.com/outlet
Description: Tema ultraligero y de alta densidad estilo Craigslist / Hacker News para outlet de repuestos de bicicletas WooCommerce. Cero adornos pesados, velocidad extrema (<100ms), buscador instantáneo y regateo directo.
Author: Bixci / Agente 2
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: outlet-craigslist-theme
*/

/* ==========================================================================
   1. CSS VARIABLES & SYSTEM RESETS
   ========================================================================== */
:root {
	--bg-body: #ffffff;
	--bg-subtle: #f6f6f6;
	--bg-header: #f0f0f0;
	--bg-highlight: #fff9db;
	--bg-banner-amber: #fff3cd;
	--bg-banner-red: #fce8e6;
	--bg-banner-green: #e6f4ea;
	--text-main: #222222;
	--text-muted: #555555;
	--text-light: #777777;
	--border-light: #cccccc;
	--border-dark: #888888;
	--border-focus: #0000ee;
	--link-default: #0000ee;
	--link-visited: #551a8b;
	--link-hover: #0000aa;
	--status-green: #008000;
	--status-red: #cc0000;
	--status-amber: #b45309;
	--font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
	--radius: 2px;
}

*, *::before, *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	font-size: 14px;
	line-height: 1.4;
	color: var(--text-main);
	background-color: var(--bg-body);
	font-family: var(--font-sans);
	-webkit-text-size-adjust: 100%;
}

body {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	background: var(--bg-body);
}

a {
	color: var(--link-default);
	text-decoration: underline;
}

a:visited {
	color: var(--link-visited);
}

a:hover, a:focus {
	color: var(--link-hover);
	text-decoration: none;
}

img {
	max-width: 100%;
	height: auto;
	vertical-align: middle;
	display: inline-block;
}

button, input, select, textarea {
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	border-radius: var(--radius);
}

/* Monospace Helpers */
.mono {
	font-family: var(--font-mono);
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ==========================================================================
   2. MAIN SITE CONTAINER & UTILITIES
   ========================================================================== */
.outlet-wrapper {
	width: 100%;
	max-width: 1240px;
	margin: 0 auto;
	padding: 8px 12px;
	flex: 1 0 auto;
}

/* Top System Notice Bar / Header */
.outlet-header {
	border-bottom: 1px solid var(--border-light);
	background-color: var(--bg-subtle);
	padding: 6px 12px;
	margin-bottom: 12px;
}

.outlet-top-nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	font-size: 12px;
}

.outlet-site-title {
	font-weight: 700;
	font-family: var(--font-mono);
	font-size: 15px;
	letter-spacing: -0.2px;
	color: var(--text-main);
	text-decoration: none;
}

.outlet-site-title:hover {
	text-decoration: underline;
}

.outlet-header-links {
	display: flex;
	gap: 10px;
	align-items: center;
	list-style: none;
}

.outlet-header-links a {
	color: var(--link-default);
	text-decoration: none;
}

.outlet-header-links a:hover {
	text-decoration: underline;
}

/* ==========================================================================
   3. COUNTDOWN TIMER BANNER (CHECKOUT & GLOBAL NOTICE)
   ========================================================================== */
.outlet-timer-banner {
	background-color: var(--bg-banner-amber);
	border: 1px solid #e0c868;
	color: #634500;
	padding: 8px 14px;
	margin-bottom: 14px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px;
	font-size: 13px;
	border-radius: var(--radius);
}

.outlet-timer-banner.critical {
	background-color: var(--bg-banner-red);
	border-color: #f1aeb5;
	color: var(--status-red);
	animation: pulse-border 1s infinite alternate;
}

@keyframes pulse-border {
	from { border-color: #f1aeb5; }
	to { border-color: var(--status-red); }
}

.outlet-timer-banner-text {
	display: flex;
	align-items: center;
	gap: 8px;
}

.outlet-timer-banner-clock {
	font-family: var(--font-mono);
	font-weight: 700;
	font-size: 16px;
	padding: 2px 6px;
	background: #ffffff;
	border: 1px solid var(--border-dark);
	border-radius: var(--radius);
	color: var(--status-red);
}

/* ==========================================================================
   4. CATALOGUE CONTROLS & INSTANT SEARCH
   ========================================================================== */
.outlet-catalogue-head {
	margin-bottom: 12px;
}

.outlet-catalogue-title {
	font-size: 18px;
	font-weight: 700;
	margin-bottom: 8px;
	font-family: var(--font-mono);
	color: var(--text-main);
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px;
}

.outlet-controls-bar {
	background-color: var(--bg-subtle);
	border: 1px solid var(--border-light);
	padding: 8px 10px;
	margin-bottom: 10px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.outlet-search-box {
	display: flex;
	gap: 6px;
	align-items: center;
}

.outlet-search-input {
	flex: 1;
	padding: 6px 10px;
	border: 1px solid var(--border-dark);
	background: #ffffff;
	font-size: 13px;
	outline: none;
}

.outlet-search-input:focus {
	border-color: var(--border-focus);
	outline: 2px solid rgba(0, 0, 238, 0.2);
}

.outlet-search-clear {
	padding: 5px 10px;
	background: #e5e5e5;
	border: 1px solid var(--border-dark);
	cursor: pointer;
	font-size: 12px;
}

.outlet-search-clear:hover {
	background: #d5d5d5;
}

.outlet-categories-bar {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
	font-size: 12px;
}

.outlet-cat-link {
	color: var(--link-default);
	text-decoration: none;
	padding: 1px 4px;
	border: 1px solid transparent;
}

.outlet-cat-link:hover {
	text-decoration: underline;
}

.outlet-cat-link.active {
	background-color: var(--text-main);
	color: #ffffff;
	font-weight: 700;
	border-radius: var(--radius);
	text-decoration: none;
}

.outlet-meta-stats {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 11px;
	color: var(--text-muted);
	padding: 2px 2px;
}

/* ==========================================================================
   5. HIGH-DENSITY PRODUCTS TABLE
   ========================================================================== */
.outlet-table-container {
	width: 100%;
	overflow-x: auto;
	border: 1px solid var(--border-light);
	background: #ffffff;
	margin-bottom: 20px;
}

.outlet-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 12px;
	text-align: left;
}

.outlet-table th {
	background-color: var(--bg-header);
	color: var(--text-main);
	font-weight: 700;
	padding: 6px 8px;
	border-bottom: 1px solid var(--border-light);
	border-right: 1px solid var(--border-light);
	text-transform: uppercase;
	font-size: 11px;
	letter-spacing: 0.3px;
	white-space: nowrap;
}

.outlet-table th:last-child {
	border-right: none;
}

.outlet-table td {
	padding: 5px 8px;
	border-bottom: 1px solid #e5e5e5;
	border-right: 1px solid #f0f0f0;
	vertical-align: middle;
}

.outlet-table td:last-child {
	border-right: none;
}

.outlet-table tbody tr:nth-child(even) {
	background-color: #fafafa;
}

.outlet-table tbody tr:hover {
	background-color: var(--bg-highlight);
}

.outlet-table .col-sku {
	font-family: var(--font-mono);
	font-weight: 700;
	color: #111111;
	white-space: nowrap;
}

.outlet-table .col-product {
	font-weight: 500;
	min-width: 240px;
}

.outlet-table .col-product-name {
	color: var(--text-main);
	text-decoration: none;
}

.outlet-table .col-product-name:hover {
	text-decoration: underline;
}

.outlet-table .col-category {
	display: inline-block;
	color: var(--text-muted);
	font-size: 11px;
	margin-left: 4px;
}

.outlet-table .col-price {
	font-family: var(--font-mono);
	font-weight: 700;
	color: var(--text-main);
	white-space: nowrap;
}

.outlet-table .col-stock {
	white-space: nowrap;
	font-family: var(--font-mono);
	font-size: 11px;
}

.stock-in {
	color: var(--status-green);
	font-weight: 700;
}

.stock-out {
	color: var(--status-red);
	font-weight: 700;
}

.outlet-table .col-photo {
	white-space: nowrap;
	text-align: center;
	width: 50px;
}

.photo-preview-thumb {
	width: 28px;
	height: 28px;
	object-fit: cover;
	border: 1px solid var(--border-light);
	cursor: pointer;
	vertical-align: middle;
}

.photo-popover-trigger {
	position: relative;
	display: inline-block;
}

.photo-popover {
	display: none;
	position: absolute;
	bottom: 100%;
	left: 50%;
	transform: translateX(-50%);
	z-index: 100;
	background: #ffffff;
	border: 1px solid var(--border-dark);
	padding: 4px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.2);
	width: 140px;
	height: 140px;
}

.photo-popover img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.photo-popover-trigger:hover .photo-popover {
	display: block;
}

.outlet-table .col-action {
	white-space: nowrap;
	text-align: center;
	width: 90px;
}

/* Craigslist Classic Button */
.btn-bargain {
	display: inline-block;
	padding: 3px 8px;
	background: #f0f0f0;
	color: var(--text-main);
	border: 1px solid var(--border-dark);
	font-size: 11px;
	font-weight: 700;
	font-family: var(--font-mono);
	cursor: pointer;
	text-decoration: none;
	text-align: center;
	border-radius: var(--radius);
}

.btn-bargain:hover:not(:disabled) {
	background: var(--link-default);
	color: #ffffff;
	border-color: var(--link-default);
}

.btn-bargain:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	background: #e0e0e0;
	border-color: #cccccc;
	color: #888888;
}

.outlet-no-results {
	padding: 30px 15px;
	text-align: center;
	color: var(--text-muted);
	font-size: 14px;
}

/* ==========================================================================
   6. ULTRA-LIGHTWEIGHT OFFER MODAL
   ========================================================================== */
.outlet-modal-backdrop {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.45);
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 12px;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.15s ease, visibility 0.15s ease;
}

.outlet-modal-backdrop.is-active {
	opacity: 1;
	visibility: visible;
}

.outlet-modal-card {
	background: #ffffff;
	border: 2px solid var(--text-main);
	width: 100%;
	max-width: 440px;
	border-radius: var(--radius);
	padding: 16px;
	box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.15);
}

.outlet-modal-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	border-bottom: 1px solid var(--border-light);
	padding-bottom: 8px;
	margin-bottom: 12px;
}

.outlet-modal-title {
	font-size: 14px;
	font-weight: 700;
	font-family: var(--font-mono);
	color: var(--text-main);
}

.outlet-modal-close {
	background: none;
	border: none;
	font-size: 18px;
	line-height: 1;
	font-weight: 700;
	cursor: pointer;
	color: var(--text-muted);
	padding: 0 4px;
}

.outlet-modal-close:hover {
	color: var(--status-red);
}

.outlet-modal-product-info {
	background-color: var(--bg-subtle);
	border: 1px solid var(--border-light);
	padding: 8px 10px;
	margin-bottom: 14px;
	font-size: 12px;
}

.outlet-modal-product-name {
	font-weight: 700;
	margin-bottom: 4px;
	color: var(--text-main);
}

.outlet-modal-product-meta {
	display: flex;
	justify-content: space-between;
	color: var(--text-muted);
	font-family: var(--font-mono);
	font-size: 11px;
}

.outlet-modal-form {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.outlet-form-group {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.outlet-form-label {
	font-size: 12px;
	font-weight: 700;
}

.outlet-input-price-wrapper {
	display: flex;
	align-items: center;
	border: 1px solid var(--border-dark);
	background: #ffffff;
}

.outlet-currency-prefix {
	padding: 6px 10px;
	background: #e9e9e9;
	font-family: var(--font-mono);
	font-weight: 700;
	font-size: 15px;
	border-right: 1px solid var(--border-dark);
}

.outlet-input-price {
	flex: 1;
	border: none;
	padding: 6px 10px;
	font-size: 18px;
	font-family: var(--font-mono);
	font-weight: 700;
	outline: none;
}

.outlet-input-price:focus {
	background: #ffffe8;
}

.outlet-modal-buttons {
	display: flex;
	gap: 8px;
	margin-top: 4px;
}

.outlet-btn-submit {
	flex: 2;
	padding: 8px 12px;
	background: #222222;
	color: #ffffff;
	border: 1px solid #000000;
	font-weight: 700;
	font-size: 13px;
	cursor: pointer;
	border-radius: var(--radius);
}

.outlet-btn-submit:hover:not(:disabled) {
	background: var(--link-default);
	border-color: var(--link-default);
}

.outlet-btn-submit:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.outlet-btn-cancel {
	flex: 1;
	padding: 8px 12px;
	background: #f0f0f0;
	color: var(--text-main);
	border: 1px solid var(--border-dark);
	font-size: 12px;
	cursor: pointer;
	border-radius: var(--radius);
}

.outlet-btn-cancel:hover {
	background: #e0e0e0;
}

/* Modal Dynamic Feedback Messages & Robin Hood Engine */
.outlet-modal-feedback {
	display: none;
	padding: 10px;
	margin-top: 8px;
	font-size: 12px;
	border-radius: var(--radius);
	border: 1px solid transparent;
}

.outlet-modal-feedback.is-visible {
	display: block;
}

.outlet-modal-feedback.loading {
	background: #f8fafc;
	border-color: #cbd5e1;
	color: #0f172a;
}

.outlet-modal-feedback.rejected {
	background: #fef2f2;
	border-color: #fecaca;
	color: #991b1b;
}

.outlet-modal-feedback.accepted {
	background: #f0fdf4;
	border-color: #bbf7d0;
	color: #166534;
}

/* Robin Hood Live Negotiation Container */
.robin-negotiation-box {
	background: #ffffff;
	border: 1px solid #94a3b8;
	padding: 12px;
	border-radius: 2px;
	margin-top: 4px;
}

.robin-negotiation-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 8px;
}

.robin-badge {
	background: #0f172a;
	color: #ffffff;
	font-size: 10px;
	font-weight: 700;
	padding: 2px 6px;
	border-radius: 2px;
	letter-spacing: 0.5px;
	font-family: var(--font-mono);
}

.robin-timer-clock {
	font-weight: 700;
	font-size: 13px;
	color: #b45309;
	background: #fef3c7;
	padding: 2px 6px;
	border: 1px solid #fde68a;
	border-radius: 2px;
}

.robin-progress-track {
	width: 100%;
	height: 6px;
	background: #e2e8f0;
	border-radius: 3px;
	overflow: hidden;
	margin-bottom: 10px;
}

.robin-progress-fill {
	height: 100%;
	background: #2563eb;
	transition: width 0.8s linear;
}

.robin-stage-text {
	font-size: 12px;
	color: #1e293b;
	line-height: 1.4;
	min-height: 24px;
}

.robin-stage-text.is-typing {
	font-weight: 600;
	color: #0369a1;
}

/* Typing Dots Animation */
.robin-dots span {
	animation: robinBlink 1.4s infinite both;
	font-weight: 700;
	font-size: 14px;
}

.robin-dots span:nth-child(2) {
	animation-delay: 0.2s;
}

.robin-dots span:nth-child(3) {
	animation-delay: 0.4s;
}

@keyframes robinBlink {
	0% { opacity: 0.2; }
	20% { opacity: 1; }
	100% { opacity: 0.2; }
}

.robin-offered-reminder {
	font-size: 11px;
	color: #64748b;
	margin-top: 6px;
	border-top: 1px dashed #cbd5e1;
	padding-top: 4px;
}

/* Robin Decision Cards */
.robin-decision-card {
	padding: 12px;
	border-radius: 2px;
	line-height: 1.4;
}

.robin-decision-card.is-accepted {
	background: #ecfdf5;
	border: 1px solid #a7f3d0;
	color: #065f46;
}

.robin-decision-card.is-counter {
	background: #fffbeb;
	border: 1px solid #fde68a;
	color: #78350f;
}

.robin-decision-header {
	font-size: 13px;
	font-weight: 700;
	margin-bottom: 8px;
	border-bottom: 1px solid rgba(0,0,0,0.1);
	padding-bottom: 4px;
}

.btn-robin-checkout {
	display: block;
	text-align: center;
	background: #059669;
	color: #ffffff !important;
	font-weight: 700;
	padding: 10px 14px;
	font-size: 13px;
	text-decoration: none !important;
	border: 1px solid #047857;
	border-radius: 2px;
	box-shadow: 2px 2px 0px rgba(0,0,0,0.1);
}

.btn-robin-checkout:hover {
	background: #047857;
	color: #ffffff !important;
}

.robin-counter-actions {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-top: 10px;
}

.btn-robin-accept-counter {
	background: #0f172a;
	color: #ffffff;
	border: 1px solid #000000;
	padding: 8px 12px;
	font-weight: 700;
	font-size: 12px;
	cursor: pointer;
	border-radius: 2px;
}

.btn-robin-accept-counter:hover:not(:disabled) {
	background: #2563eb;
	border-color: #1d4ed8;
}

.btn-robin-retry {
	background: #f1f5f9;
	color: #334155;
	border: 1px solid #cbd5e1;
	padding: 6px 10px;
	font-size: 11px;
	cursor: pointer;
	border-radius: 2px;
}

.btn-robin-retry:hover {
	background: #e2e8f0;
}

/* ==========================================================================
   7. COMPACT MINIMALIST CHECKOUT
   ========================================================================== */
.outlet-checkout-container {
	margin: 12px 0 30px;
}

.outlet-checkout-title {
	font-family: var(--font-mono);
	font-size: 16px;
	font-weight: 700;
	margin-bottom: 12px;
	border-bottom: 1px solid var(--border-light);
	padding-bottom: 4px;
}

.outlet-checkout-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	align-items: start;
}

.outlet-checkout-col {
	background: #ffffff;
	border: 1px solid var(--border-light);
	padding: 14px;
}

.outlet-checkout-subtitle {
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	margin-bottom: 10px;
	border-bottom: 1px solid #e0e0e0;
	padding-bottom: 4px;
	font-family: var(--font-mono);
}

/* WooCommerce Minimal Form Overrides */
.woocommerce form .form-row {
	margin-bottom: 8px;
	padding: 0;
}

.woocommerce form .form-row label {
	display: block;
	font-size: 11px;
	font-weight: 700;
	margin-bottom: 2px;
}

.woocommerce form .form-row .required {
	color: var(--status-red);
	text-decoration: none;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select,
.woocommerce form .form-row textarea {
	width: 100%;
	padding: 5px 8px;
	border: 1px solid var(--border-dark);
	background: #ffffff;
	font-size: 12px;
	outline: none;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row select:focus {
	border-color: var(--border-focus);
	outline: 2px solid rgba(0, 0, 238, 0.2);
}

.outlet-doc-type-group {
	display: flex;
	gap: 8px;
}

.outlet-doc-type-group select {
	width: 100px;
}

.outlet-doc-type-group input {
	flex: 1;
}

/* Review Order Table */
.shop_table.woocommerce-checkout-review-order-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 12px;
	margin-bottom: 14px;
}

.shop_table.woocommerce-checkout-review-order-table th,
.shop_table.woocommerce-checkout-review-order-table td {
	padding: 6px 8px;
	border: 1px solid var(--border-light);
}

.shop_table.woocommerce-checkout-review-order-table thead th {
	background: var(--bg-header);
	font-size: 11px;
}

.shop_table.woocommerce-checkout-review-order-table tr.order-total th,
.shop_table.woocommerce-checkout-review-order-table tr.order-total td {
	font-weight: 700;
	font-size: 14px;
	font-family: var(--font-mono);
	background: var(--bg-highlight);
}

/* Payment Gateways Minimal List */
#payment ul.payment_methods {
	list-style: none;
	padding: 0;
	margin: 0 0 12px 0;
	border: 1px solid var(--border-light);
}

#payment ul.payment_methods li {
	padding: 8px 10px;
	border-bottom: 1px solid #eeeeee;
	font-size: 12px;
}

#payment ul.payment_methods li:last-child {
	border-bottom: none;
}

#payment ul.payment_methods label {
	font-weight: 600;
	margin-left: 6px;
	cursor: pointer;
}

#payment div.payment_box {
	background: var(--bg-subtle);
	padding: 8px 10px;
	margin-top: 6px;
	border: 1px solid var(--border-light);
	font-size: 11px;
	color: var(--text-muted);
}

#place_order {
	width: 100%;
	padding: 10px;
	background: var(--status-green);
	color: #ffffff;
	border: 1px solid #005a00;
	font-weight: 700;
	font-size: 14px;
	font-family: var(--font-mono);
	cursor: pointer;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	border-radius: var(--radius);
}

#place_order:hover:not(:disabled) {
	background: #006b00;
}

#place_order:disabled {
	opacity: 0.5;
	background: #888888;
	cursor: not-allowed;
}

/* WooCommerce Notices */
.woocommerce-error, .woocommerce-info, .woocommerce-message {
	padding: 8px 12px;
	margin-bottom: 12px;
	font-size: 12px;
	list-style: none;
	border: 1px solid var(--border-dark);
	border-radius: var(--radius);
}

.woocommerce-error {
	background: var(--bg-banner-red);
	color: var(--status-red);
	border-color: #f1aeb5;
}

.woocommerce-message {
	background: var(--bg-banner-green);
	color: var(--status-green);
	border-color: #a3cfbb;
}

.woocommerce-info {
	background: var(--bg-banner-amber);
	color: var(--status-amber);
	border-color: #ffe69c;
}

/* ==========================================================================
   8. FOOTER & META
   ========================================================================== */
.outlet-footer {
	border-top: 1px solid var(--border-light);
	background-color: var(--bg-subtle);
	padding: 10px 12px;
	margin-top: 20px;
	font-size: 11px;
	color: var(--text-muted);
}

.outlet-footer-content {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
}

.outlet-footer-links {
	display: flex;
	gap: 8px;
	list-style: none;
}

/* ==========================================================================
   9. RESPONSIVE BREAKPOINTS (MOBILE FIRST COMPACT)
   ========================================================================== */
@media (max-width: 768px) {
	html {
		font-size: 13px;
	}

	.outlet-wrapper {
		padding: 4px 6px;
	}

	.outlet-catalogue-title {
		font-size: 15px;
	}

	.outlet-top-nav {
		flex-direction: column;
		align-items: flex-start;
	}

	.outlet-header-links {
		width: 100%;
		justify-content: space-between;
		font-size: 11px;
	}

	.outlet-checkout-grid {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	.outlet-table th, .outlet-table td {
		padding: 4px 6px;
		font-size: 11px;
	}

	.col-category-hide-mobile {
		display: none !important;
	}

	.btn-bargain {
		padding: 3px 6px;
		font-size: 10px;
	}
}

@media (max-width: 480px) {
	.outlet-timer-banner {
		font-size: 11px;
		padding: 6px 8px;
	}

	.outlet-timer-banner-clock {
		font-size: 13px;
	}

	.outlet-modal-card {
		padding: 12px;
	}

	.outlet-input-price {
		font-size: 16px;
	}
}