/**
 * OmniCommerce Shop CSS
 * 10 Card Styles + Search + Compare + Wishlist
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
    --omni-primary: #f97316;
    --omni-primary-dark: #ea580c;
    --omni-primary-glow: rgba(249,115,22,.18);
    --omni-card-radius: 14px;
    --omni-shadow-md: 0 4px 20px rgba(0,0,0,.07);
    --omni-shadow-hover: 0 20px 50px rgba(0,0,0,.12);
    --omni-transition: .3s cubic-bezier(.34,1.56,.64,1);
}

/* =========================================================
   SHOP HEADER — Search + Compare Bar
   ========================================================= */

.omni-shop-header { margin-bottom: 30px; }

/* Search */
.omni-search-wrap {
    max-width: 650px;
    margin: 0 auto 30px;
}

.omni-search-inner {
    position: relative;
    display: flex;
    align-items: center;
    background: #fff !important;
    border-radius: 50px !important;
    box-shadow: 0 8px 30px rgba(0,0,0,0.08) !important;
    transition: all 0.3s ease;
    border: none !important;
    outline: none !important;
}

.omni-search-inner:focus-within {
    box-shadow: 0 10px 40px var(--omni-primary-glow) !important;
    transform: translateY(-2px);
}

body .omni-shop-wrap .omni-search-inner .omni-search-input {
    width: 100%;
    min-height: 56px !important;
    padding: 16px 60px 16px 24px !important;
    border: none !important;
    border-radius: 50px !important;
    font-size: 16px !important;
    font-family: 'Inter', sans-serif !important;
    color: #1e293b !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    margin: 0 !important;
}

.omni-shop-wrap .omni-search-input::placeholder { color: #94a3b8 !important; font-weight: 400 !important; }

.omni-search-btn {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: var(--omni-primary);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.3s, transform 0.2s;
}
.omni-search-btn:active { transform: translateY(-50%) scale(0.95); }
.omni-search-btn:hover {
    background: var(--omni-secondary, var(--omni-primary-dark));
}

.omni-search-spinner {
    position: absolute;
    right: 20px;
    width: 20px;
    height: 20px;
    border: 2px solid #e2e8f0;
    border-top-color: var(--omni-primary);
    border-radius: 50%;
    animation: omni-spin .7s linear infinite;
}

@keyframes omni-spin { to { transform: rotate(360deg); } }

/* Compare Bar — global footer bar */
.omni-compare-bar {
    position: fixed;
    bottom: -140px;
    left: 0; right: 0;
    background: #fff;
    border-top: 3px solid var(--omni-primary);
    box-shadow: 0 -8px 40px rgba(0,0,0,.14);
    padding: 12px 24px;
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 99998;
    transition: bottom .4s cubic-bezier(.165,.84,.44,1);
    flex-wrap: nowrap;
    overflow-x: auto;
}
.omni-compare-bar.visible { bottom: 0; }

.omni-compare-bar-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--omni-primary);
    white-space: nowrap;
    flex-shrink: 0;
}

.omni-compare-bar-item {
    display: flex;
    align-items: center;
    gap: 7px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 5px 8px;
    font-size: 12px;
    font-weight: 600;
    color: #1e293b;
    flex-shrink: 0;
    max-width: 160px;
}
.omni-compare-bar-item span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100px;
}
.omni-compare-bar-item img {
    width: 36px; height: 36px;
    object-fit: cover;
    border-radius: 5px;
    flex-shrink: 0;
}
.omni-compare-remove-item {
    background: #ef4444;
    color: #fff;
    border: none;
    width: 16px; height: 16px;
    border-radius: 50%;
    font-size: 11px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 1;
    padding: 0;
}
.omni-compare-now-btn {
    background: linear-gradient(135deg, var(--omni-primary), #fb923c);
    color: #fff !important;
    border: none;
    padding: 9px 18px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    text-decoration: none;
    display: inline-block;
    transition: opacity .2s;
}
.omni-compare-now-btn:hover { opacity: .9; color: #fff !important; text-decoration: none; }
.omni-compare-clear-btn {
    background: none;
    border: 1px solid #e2e8f0;
    padding: 8px 14px;
    border-radius: 8px;
    color: #64748b;
    cursor: pointer;
    font-size: 12px;
    margin-left: auto;
    flex-shrink: 0;
    white-space: nowrap;
    transition: background .2s;
}
.omni-compare-clear-btn:hover { background: #f1f5f9; }

/* =========================================================
   SHARED GRID
   ========================================================= */

.omni-shop-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    font-family: 'Inter', sans-serif;
}

.omni-shop-grid.omni-columns-2 { grid-template-columns: repeat(2,1fr); }
.omni-shop-grid.omni-columns-4 { grid-template-columns: repeat(4,1fr); }
.omni-shop-grid.omni-columns-5 { grid-template-columns: repeat(5,1fr); }

.omni-no-products { text-align:center; color:#64748b; padding:60px 20px; font-size:16px; }
.omni-empty-state { text-align:center; color:#64748b; padding:60px 20px; }
.omni-empty-state a { color:var(--omni-primary); }

/* Shared card elements */
.omni-product-card {
    position: relative;
    background: #fff;
    border-radius: var(--omni-card-radius);
    box-shadow: var(--omni-shadow-md);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: 1px solid #f1f5f9;
    transition: transform var(--omni-transition), box-shadow var(--omni-transition);
}

.omni-product-card a { text-decoration: none !important; }
.omni-product-link { text-decoration:none !important; color:inherit; display:block; flex-grow:1; }

.omni-product-image { width:100%; aspect-ratio:1/1; overflow:hidden; background:#f8fafc; }
.omni-product-image img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease; }
.omni-product-card:hover .omni-product-image img { transform:scale(1.06); }
.omni-product-image.omni-placeholder { display:flex; align-items:center; justify-content:center; }

.omni-product-content { padding:14px 16px 8px; position:relative; }
.omni-product-category { font-size:11px; color:#94a3b8; text-transform:uppercase; letter-spacing:.5px; font-weight:600; margin-bottom:5px; }
.omni-product-title { margin:0 0 8px; font-size:14px; font-weight:600; color:#1e293b; line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.omni-product-price { display:flex; align-items:baseline; gap:6px; flex-wrap: wrap; overflow-wrap: break-word; word-wrap: break-word; white-space: normal; }
.omni-product-price del { font-size:12px; color:#94a3b8; word-wrap: break-word; overflow-wrap: break-word; }
.omni-product-price ins { font-size:18px; font-weight:700; color:var(--omni-primary); text-decoration:none; word-wrap: break-word; overflow-wrap: break-word; }

/* .omni-product-action padding is handled by .omni-product-action-row */

.omni-sale-badge {
    position:absolute; top:12px; left:12px; z-index:3;
    background:linear-gradient(135deg,#ef4444,#dc2626);
    color:#fff; font-size:10px; font-weight:700; letter-spacing:1px;
    padding:3px 9px; border-radius:20px;
    box-shadow:0 4px 10px rgba(239,68,68,.35);
}

/* Wishlist button */
.omni-wishlist-btn {
    position:absolute; top:-17px; right:12px; z-index:3;
    background:#fff; border:none; width:34px; height:34px;
    border-radius:50%; display:flex; align-items:center; justify-content:center;
    font-size:18px; color:#94a3b8; cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,.1);
    transition:all .25s ease;
}
.omni-wishlist-btn:hover, .omni-wishlist-btn.in-wishlist { color:#ef4444; transform:scale(1.1); }

/* Action Row (main button + compare button) */
.omni-product-action-row {
    display: flex;
    align-items: stretch;
    gap: 8px;
    padding: 12px 16px 16px;
    margin-top: auto;
}

.omni-product-action {
    flex: 1;
}

/* Compare Button */
.omni-compare-btn {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border: 2px solid #e2e8f0;
    background: #fff;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #94a3b8;
    transition: all .25s ease;
    padding: 0;
}

.omni-compare-btn:hover {
    border-color: var(--omni-primary);
    color: var(--omni-primary);
    background: var(--omni-primary-glow);
}

.omni-compare-btn.active {
    border-color: var(--omni-primary);
    background: var(--omni-primary);
    color: #fff;
}

.omni-compare-text { display: none; font-size: 13px; font-weight: 500; }

/* Buttons */
.omni-btn { display:inline-block; padding:11px 20px; border-radius:10px; font-size:14px; font-weight:600; text-decoration:none; text-align:center; cursor:pointer; border:none; transition:all .25s ease; font-family:'Inter',sans-serif; }
.omni-btn-primary { background:linear-gradient(135deg,var(--omni-primary),#fb923c); color:#fff !important; width:100%; box-shadow:0 4px 15px var(--omni-primary-glow); display:flex; align-items:center; justify-content:center; }
.omni-btn-primary:hover { background:linear-gradient(135deg,var(--omni-primary-dark),var(--omni-primary)); color:#fff !important; transform:translateY(-2px); box-shadow:0 8px 25px rgba(249,115,22,.35); text-decoration:none; }

/* Cart Icon button */
.omni-cart-icon-wrap { display:flex; align-items:center; justify-content:space-between; }
.omni-price-tag { font-size:16px; font-weight:700; color:var(--omni-primary); }
.omni-cart-icon-btn {
    width:44px; height:44px; border-radius:50%; border:none; cursor:pointer;
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
    background:var(--omni-primary); color:#fff;
    box-shadow:0 4px 15px var(--omni-primary-glow);
    transition:all .25s ease;
}
.omni-cart-icon-btn:hover { background:var(--omni-primary-dark); transform:scale(1.1) translateY(-2px); }
.omni-view-btn { display:block; }

/* Compare table */
.omni-compare-table-wrap { overflow-x:auto; }
.omni-compare-table { width:100%; border-collapse:collapse; font-family:'Inter',sans-serif; }
.omni-compare-table th, .omni-compare-table td { padding:14px 18px; border:1px solid #f1f5f9; text-align:left; font-size:14px; }
.omni-compare-table thead th { background:#f8fafc; font-weight:700; color:#1e293b; }
.omni-compare-table tbody tr:hover { background:#fafafa; }
.omni-compare-img-row img { width:80px; height:80px; object-fit:cover; border-radius:8px; }

/* =========================================================
   STYLE 1: Classic Card (default)
   ========================================================= */
.omni-style-1 .omni-product-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--omni-shadow-hover);
}

/* =========================================================
   STYLE 2: Compact Icon — horizontal layout, cart icon
   ========================================================= */
.omni-style-2 .omni-product-card {
    flex-direction: row;
    align-items: center;
    border-radius: 12px;
    padding: 12px;
    gap: 14px;
}
.omni-style-2 .omni-product-link { display:flex; align-items:center; gap:14px; flex:1; min-width:0; }
.omni-style-2 .omni-product-image { width:80px; height:80px; flex-shrink:0; border-radius:10px; aspect-ratio:auto; }
.omni-style-2 .omni-product-content { padding:0; flex-grow:1; min-width:0; }
.omni-style-2 .omni-product-title { font-size:13px; -webkit-line-clamp:2; }
.omni-style-2 .omni-product-price ins { font-size:15px; }
.omni-style-2 .omni-product-action-row { padding:0; flex-shrink:0; margin-top:0; }
.omni-style-2 .omni-product-action { flex:unset; }
.omni-style-2 .omni-cart-icon-wrap { flex-direction:column; align-items:center; gap:6px; }
.omni-style-2 .omni-price-tag { display:none; }
.omni-style-2 .omni-btn-primary { width:auto; padding:8px 12px; font-size:12px; border-radius:8px; }
.omni-style-2 .omni-view-btn { white-space:nowrap; }
.omni-style-2 .omni-compare-btn { width:36px; height:36px; border-radius:8px; }
.omni-style-2 .omni-sale-badge { top:6px; left:6px; font-size:9px; padding:2px 7px; }
.omni-style-2 .omni-wishlist-btn { top:6px; right:6px; width:28px; height:28px; font-size:14px; }
.omni-shop-grid.omni-style-2 { grid-template-columns:1fr; }

/* =========================================================
   STYLE 3: Category First — minimal padding, category prominent
   ========================================================= */
.omni-style-3 .omni-product-card {
    border-radius:8px;
    border-bottom:3px solid #e2e8f0;
    box-shadow: 0 2px 8px rgba(0,0,0,.05);
}
.omni-style-3 .omni-product-card:hover { transform:translateY(-5px); border-bottom-color:var(--omni-primary); box-shadow:0 10px 30px rgba(0,0,0,.1); }
.omni-style-3 .omni-product-image { aspect-ratio:4/3; }
.omni-style-3 .omni-product-category { font-size:10px; color:var(--omni-primary); margin-bottom:3px; }
.omni-style-3 .omni-product-title { font-size:13px; margin-bottom:5px; color:#3b82f6; font-weight:600; }
.omni-style-3 .omni-product-content { padding:12px 14px 6px; }
.omni-style-3 .omni-product-action-row { padding:8px 14px 14px; }

/* =========================================================
   STYLE 4: Dark Luxury
   ========================================================= */
.omni-style-4 .omni-product-card { background:#0f172a; border-color:#1e293b; }
.omni-style-4 .omni-product-title { color:#f1f5f9; }
.omni-style-4 .omni-product-category { color:#475569; }
.omni-style-4 .omni-product-price del { color:#475569; }
.omni-style-4 .omni-product-price ins { color:#f59e0b; }
.omni-style-4 .omni-product-card:hover { transform:translateY(-8px); box-shadow:0 20px 60px rgba(245,158,11,.2); border-color:#f59e0b; }
.omni-style-4 .omni-wishlist-btn { background:#1e293b; color:#475569; }
.omni-style-4 .omni-btn-primary { background:linear-gradient(135deg,#f59e0b,#d97706); }
.omni-style-4 .omni-cart-icon-btn { background:#f59e0b; }
.omni-style-4 .omni-price-tag { color:#f59e0b; }
.omni-style-4 .omni-compare-btn { background:#1e293b; border-color:#334155; color:#64748b; }
.omni-style-4 .omni-compare-btn:hover { border-color:#f59e0b; color:#f59e0b; background:#0f172a; }
.omni-style-4 .omni-compare-btn.active { background:#f59e0b; border-color:#f59e0b; color:#000; }

/* =========================================================
   STYLE 5: Glassmorphism
   ========================================================= */
.omni-style-5 {
    background: linear-gradient(135deg, #667eea, #764ba2);
    padding: 20px;
    border-radius: 20px;
}
.omni-style-5 .omni-product-card {
    background: rgba(255,255,255,.15);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,.3);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0,0,0,.15);
}
.omni-style-5 .omni-product-card:hover { transform:translateY(-8px) scale(1.02); box-shadow:0 20px 50px rgba(0,0,0,.3); }
.omni-style-5 .omni-product-title { color:#fff; }
.omni-style-5 .omni-product-category { color:rgba(255,255,255,.6); }
.omni-style-5 .omni-product-price del { color:rgba(255,255,255,.4); }
.omni-style-5 .omni-product-price ins { color:#fde68a; }
.omni-style-5 .omni-wishlist-btn { background:rgba(255,255,255,.2); color:#fff; }
.omni-style-5 .omni-sale-badge { background:rgba(239,68,68,.8); }
.omni-style-5 .omni-compare-btn { background:rgba(255,255,255,.15); border-color:rgba(255,255,255,.3); color:#fff; }
.omni-style-5 .omni-compare-btn:hover { background:rgba(255,255,255,.3); border-color:#fff; }
.omni-style-5 .omni-compare-btn.active { background:rgba(255,255,255,.9); color:var(--omni-primary); border-color:#fff; }

/* =========================================================
   STYLE 6: Polaroid
   ========================================================= */
.omni-style-6 .omni-product-card {
    border-radius:4px;
    box-shadow: 0 4px 15px rgba(0,0,0,.1), 5px 5px 0 #e2e8f0;
    transform: rotate(-1deg);
    border: 6px solid #fff;
    border-bottom-width:40px;
    background:#fff;
}
.omni-style-6 .omni-product-card:nth-child(even) { transform:rotate(1deg); }
.omni-style-6 .omni-product-card:hover { transform:rotate(0deg) translateY(-10px) scale(1.04); box-shadow:0 20px 50px rgba(0,0,0,.15); }
.omni-style-6 .omni-product-image { aspect-ratio:1/1; border-radius:2px; }
.omni-style-6 .omni-product-content { padding:8px 6px 4px; text-align:center; }
.omni-style-6 .omni-product-title { font-size:13px; font-family:'Georgia',serif; font-style:italic; }
.omni-style-6 .omni-product-action-row { padding:8px 6px 12px; justify-content:center; }

/* =========================================================
   STYLE 7: Hover Overlay — image fills card, text slides up
   ========================================================= */
.omni-style-7 .omni-product-card { border-radius:14px; overflow:hidden; }
.omni-style-7 .omni-product-link { display:block; position:relative; }
.omni-style-7 .omni-product-image { aspect-ratio:3/4; }
.omni-style-7 .omni-product-content {
    position:absolute; bottom:0; left:0; right:0;
    background:linear-gradient(to top,rgba(0,0,0,.85) 0%,transparent 100%);
    padding:20px 16px 16px;
    transform:translateY(30px); opacity:0;
    transition:transform .35s ease, opacity .35s ease;
}
.omni-style-7 .omni-product-card:hover .omni-product-content { transform:translateY(0); opacity:1; }
.omni-style-7 .omni-product-title { color:#fff; }
.omni-style-7 .omni-product-category { color:rgba(255,255,255,.6); }
.omni-style-7 .omni-product-price del { color:rgba(255,255,255,.5); }
.omni-style-7 .omni-product-price ins { color:#fde68a; }
.omni-style-7 .omni-product-action-row { position:absolute; bottom:0; left:0; right:0; padding:0 16px 16px; opacity:0; transition:opacity .35s ease; background:transparent; margin-top:0; }
.omni-style-7 .omni-product-card:hover .omni-product-action-row { opacity:1; }
.omni-style-7 .omni-compare-btn { background:rgba(255,255,255,.2); border-color:rgba(255,255,255,.4); color:#fff; }
.omni-style-7 .omni-compare-btn.active { background:#fff; color:var(--omni-primary); }

/* =========================================================
   STYLE 8: Magazine — first card is featured/large
   ========================================================= */
.omni-style-8.omni-shop-grid { grid-template-columns:repeat(3,1fr); grid-auto-rows:auto; }
.omni-style-8 .omni-product-card:first-child {
    grid-column: 1 / 3;
    flex-direction: row;
}
.omni-style-8 .omni-product-card:first-child .omni-product-link { display:flex; align-items:stretch; }
.omni-style-8 .omni-product-card:first-child .omni-product-image { width:55%; flex-shrink:0; aspect-ratio:auto; height:100%; }
.omni-style-8 .omni-product-card:first-child .omni-product-content { padding:30px; }
.omni-style-8 .omni-product-card:first-child .omni-product-title { font-size:22px; -webkit-line-clamp:3; }
.omni-style-8 .omni-product-card:first-child .omni-product-price ins { font-size:26px; }
.omni-style-8 .omni-product-card:first-child .omni-product-action-row { padding:20px 30px 30px; }
.omni-style-8 .omni-product-card { border-radius:10px; }
.omni-style-8 .omni-product-card:hover { transform:translateY(-5px); box-shadow:var(--omni-shadow-hover); }

/* =========================================================
   STYLE 9: Minimal List — clean borderless horizontal rows
   ========================================================= */
.omni-style-9.omni-shop-grid { grid-template-columns:1fr; gap:0; }
.omni-style-9 .omni-product-card {
    flex-direction:row; align-items:center;
    border-radius:0; box-shadow:none;
    border:none; border-bottom:1px solid #f1f5f9;
    padding:16px 0; gap:20px; background:transparent;
}
.omni-style-9 .omni-product-card:hover { background:#fafafa; transform:none; box-shadow:none; }
.omni-style-9 .omni-product-link { display:flex; align-items:center; gap:20px; }
.omni-style-9 .omni-product-image { width:72px; height:72px; flex-shrink:0; border-radius:8px; aspect-ratio:auto; }
.omni-style-9 .omni-product-content { padding:0; }
.omni-style-9 .omni-product-title { font-size:15px; font-weight:500; }
.omni-style-9 .omni-product-action-row { margin-left:auto; flex-shrink:0; padding:0; margin-top:0; gap:6px; }
.omni-style-9 .omni-btn-primary { width:auto; padding:9px 18px; border-radius:8px; }
.omni-style-9 .omni-compare-btn { width:36px; height:36px; border-radius:8px; }
.omni-style-9 .omni-sale-badge { top:auto; bottom:6px; left:6px; }

/* =========================================================
   STYLE 10: Neon Glow
   ========================================================= */
.omni-style-10 { background:#0a0a0a; padding:20px; border-radius:20px; }
.omni-style-10 .omni-product-card {
    background:#111;
    border:1px solid #1a1a1a;
    border-radius:12px;
}
.omni-style-10 .omni-product-card:hover {
    transform:translateY(-8px);
    border-color:#00ff88;
    box-shadow:0 0 20px rgba(0,255,136,.25), 0 20px 50px rgba(0,0,0,.5);
}
.omni-style-10 .omni-product-title { color:#e2e8f0; }
.omni-style-10 .omni-product-category { color:#374151; }
.omni-style-10 .omni-product-price del { color:#374151; }
.omni-style-10 .omni-product-price ins { color:#00ff88; text-shadow:0 0 10px rgba(0,255,136,.5); }
.omni-style-10 .omni-wishlist-btn { background:#1a1a1a; color:#374151; }
.omni-style-10 .omni-btn-primary { background:linear-gradient(135deg,#00ff88,#00cc6a); color:#000 !important; box-shadow:0 4px 20px rgba(0,255,136,.3); }
.omni-style-10 .omni-btn-primary:hover { box-shadow:0 8px 30px rgba(0,255,136,.5); color:#000 !important; }
.omni-style-10 .omni-cart-icon-btn { background:#00ff88; color:#000; }
.omni-style-10 .omni-price-tag { color:#00ff88; }
.omni-style-10 .omni-sale-badge { background:linear-gradient(135deg,#ff0080,#ff4040); }
.omni-style-10 .omni-compare-btn { background:#1a1a1a; border-color:#2a2a2a; color:#374151; }
.omni-style-10 .omni-compare-btn:hover { border-color:#00ff88; color:#00ff88; }
.omni-style-10 .omni-compare-btn.active { background:#00ff88; border-color:#00ff88; color:#000; }

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1024px) {
    .omni-shop-grid { grid-template-columns:repeat(2,1fr); }
    .omni-shop-grid.omni-columns-4, .omni-shop-grid.omni-columns-5 { grid-template-columns:repeat(3,1fr); }
    .omni-style-8 .omni-product-card:first-child { grid-column:1/3; }
}

@media (max-width: 640px) {
    .omni-shop-grid,
    .omni-shop-grid.omni-columns-2,
    .omni-shop-grid.omni-columns-3,
    .omni-shop-grid.omni-columns-4,
    .omni-shop-grid.omni-columns-5 { grid-template-columns:repeat(2,1fr); gap:12px; }
    .omni-style-8 .omni-product-card:first-child { grid-column:1/-1; flex-direction:column; }
    .omni-style-8 .omni-product-card:first-child .omni-product-image { width:100%; }
    .omni-compare-bar { padding:10px 16px; gap:8px; }
    .omni-compare-bar-label span:last-child { display:none; }
    
    /* Convert compare button to text link below Add to Cart on mobile */
    .omni-product-action-row { flex-direction: column; gap: 6px; padding: 10px 12px 12px; }
    .omni-compare-btn { width: 100%; height: auto; border: none; background: transparent !important; padding: 4px 0; color: #94a3b8; }
    .omni-compare-icon { display: none; }
    .omni-compare-text { display: inline-block; text-decoration: underline; }
    .omni-compare-btn.active { color: var(--omni-primary); }
    .omni-compare-btn.active .omni-compare-text { color: var(--omni-primary); }
    
    /* Price wrapping fix for long prices */
    .omni-product-price {
        flex-wrap: wrap;
        word-wrap: break-word;
        overflow-wrap: break-word;
        white-space: normal;
        line-height: 1.3;
    }
    .omni-product-price ins, .omni-product-price .amount {
        font-size: 14px !important;
        word-wrap: break-word;
        overflow-wrap: break-word;
        white-space: normal;
    }
}

@media (max-width: 380px) {
    /* Keep 2 columns on very small screens instead of 1 */
    .omni-shop-grid,
    .omni-shop-grid.omni-columns-2 { grid-template-columns:repeat(2,1fr); gap: 8px; }
}