/* Storefront conversion styling — spec §6 (Conversion-Oriented Front-End).
   Standardized product cards: fixed-ratio images, prominent price, a single
   high-contrast primary "Add to Cart" CTA, secondary actions as icon buttons. */
:root {
    --ss-primary: #3f51b5;
    --ss-primary-dark: #2c3a94;
    --ss-accent: #ef5417;
}

.ss-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .06);
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: box-shadow .15s ease, transform .15s ease;
}
.ss-card:hover {
    box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
    transform: translateY(-2px);
}

/* Unify mismatched product images (spec §6: width 100%, height 180px, cover). */
.ss-image-container {
    display: block;
    position: relative;
    width: 100%;
    height: 180px;
    overflow: hidden;
    background: #f5f5f5;
}
.ss-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ss-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: var(--ss-accent);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 4px;
}

.ss-card-body {
    padding: 12px 14px 14px;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.ss-title {
    color: #222;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    line-height: 1.3;
    display: block;
    margin-bottom: 4px;
}
.ss-title:hover { color: var(--ss-primary); text-decoration: none; }
.ss-desc {
    color: #777;
    font-size: 12.5px;
    margin: 0 0 10px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Pricing: bold, larger current price; low-opacity red strikethrough old price. */
.ss-pricing { margin-top: auto; margin-bottom: 10px; }
.ss-price { font-size: 20px; font-weight: 700; color: #111; }
.ss-old-price {
    font-size: 13px;
    color: #e53935;
    opacity: .5;
    text-decoration: line-through;
    margin-left: 6px;
}

/* Action hierarchy: one primary CTA, the rest demoted to icon buttons. */
.ss-actions { display: flex; align-items: center; gap: 8px; }
.ss-btn-cart {
    flex: 1;
    background: var(--ss-primary);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 9px 10px;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s ease;
}
.ss-btn-cart:hover { background: var(--ss-primary-dark); color: #fff; text-decoration: none; }
.ss-btn-cart:disabled { opacity: .6; cursor: default; }
.ss-btn-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: #555;
    border: 1px solid #ddd;
    border-radius: 6px;
    cursor: pointer;
    text-decoration: none;
}
.ss-btn-icon:hover { background: #f2f4ff; color: var(--ss-primary); border-color: var(--ss-primary); }

.ss-toast {
    position: fixed;
    left: 50%;
    bottom: 30px;
    transform: translateX(-50%) translateY(20px);
    background: #222;
    color: #fff;
    padding: 12px 20px;
    border-radius: 30px;
    font-size: 14px;
    z-index: 99999;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
}
.ss-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

@media (max-width: 575px) {
    /* One card per row on phones — give the image room + roomy tap targets. */
    .ss-image-container { height: 210px; }
    .ss-price { font-size: 20px; }
    .ss-card-body { padding: 14px 16px 16px; }
    .ss-title { font-size: 16px; }
    .ss-btn-cart { padding: 13px 14px; font-size: 15px; }
    .ss-actions { gap: 10px; }
    .ss-btn-icon { width: 46px; height: 46px; flex-basis: 46px; }
}

/* ============================================================
   Storefront shell — category sidebar + content (redesign)
   ============================================================ */
.ss-shell {
    display: flex;
    gap: 22px;
    align-items: flex-start;
    max-width: 1280px;
    margin: 18px auto 40px;
    padding: 0 16px;
}

.ss-sidebar {
    flex: 0 0 240px;
    width: 240px;
    background: linear-gradient(180deg, #1e2a52 0%, #16213f 100%);
    border-radius: 16px;
    padding: 18px 14px;
    color: #cdd6f4;
    position: sticky;
    top: 16px;
    box-shadow: 0 10px 30px rgba(20, 30, 60, .15);
}
.ss-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    margin-bottom: 12px;
}
.ss-brand-badge {
    width: 38px; height: 38px; flex: 0 0 38px;
    border-radius: 10px;
    background: var(--ss-accent);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 16px;
}
.ss-brand-title { font-size: 15px; font-weight: 700; color: #fff; line-height: 1.2; }
.ss-brand-sub { font-size: 11px; color: #8ea0d0; }

.ss-cat-nav { display: flex; flex-direction: column; gap: 4px; }
.ss-cat-link {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 12px; border-radius: 10px;
    color: #c3cdf0; text-decoration: none;
    font-size: 14px; font-weight: 500; cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.ss-cat-link i, .ss-cat-link > svg {
    width: 34px; height: 34px; flex: 0 0 34px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, .06); border-radius: 9px; font-size: 14px;
}
.ss-cat-link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-cat-link:hover { background: rgba(255, 255, 255, .06); color: #fff; text-decoration: none; }
.ss-cat-link.active { background: var(--ss-primary); color: #fff; box-shadow: 0 6px 16px rgba(63, 81, 181, .35); }
.ss-cat-link.active i, .ss-cat-link.active > svg { background: rgba(255, 255, 255, .18); }

.ss-main { flex: 1 1 auto; min-width: 0; }
.ss-main-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 16px; margin-bottom: 16px; flex-wrap: wrap;
}
.ss-main-title { font-size: 20px; font-weight: 700; color: #1e2a52; margin: 0; }
.ss-main-sub { font-size: 13px; color: #8a93a6; margin-top: 2px; }

.ss-search {
    display: flex; align-items: center;
    background: #fff; border: 1px solid #e6e8ef; border-radius: 30px;
    padding: 4px 4px 4px 16px; min-width: 300px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
}
.ss-search input { border: none; outline: none; background: transparent; font-size: 14px; flex: 1; height: 34px; }
.ss-search button {
    border: none; background: var(--ss-primary); color: #fff;
    border-radius: 30px; height: 36px; padding: 0 20px;
    font-size: 13px; font-weight: 600; cursor: pointer;
}
.ss-search button:hover { background: var(--ss-primary-dark); }

.ss-cat-tabs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 14px; margin-bottom: 4px; }
.ss-cat-tab {
    flex: 0 0 auto; padding: 7px 16px; border-radius: 30px;
    background: #eef0f7; color: #48507a; font-size: 13px; font-weight: 600;
    cursor: pointer; border: none; white-space: nowrap; transition: background .15s ease;
}
.ss-cat-tab:hover { background: #e2e6f5; }
.ss-cat-tab.active { background: var(--ss-primary); color: #fff; }

@media (max-width: 860px) {
    .ss-shell { flex-direction: column; }
    /* Nav not required on mobile — hide the category sidebar; content goes full width. */
    .ss-sidebar { display: none; }
    .ss-main-head { align-items: stretch; }
    .ss-search { min-width: 0; width: 100%; }
}

/* ============================================================
   Modern polish — hero search, micro-interactions, gradients
   ============================================================ */

/* Hero band with a prominent, centered search + category pills. */
.ss-hero {
    background: radial-gradient(1200px 200px at 50% -40px, #e7ecff 0%, #f5f7fc 60%, #f7f8fc 100%);
    border-bottom: 1px solid #eef0f7;
    padding: 28px 16px 10px;
}
.ss-hero-inner { max-width: 1280px; margin: 0 auto; }
.ss-search-lg {
    max-width: 720px;
    margin: 0 auto 18px;
    padding: 6px 6px 6px 20px;
    box-shadow: 0 8px 26px rgba(30, 42, 82, .10);
    border-color: #e2e6f3;
}
.ss-search-lg .ss-search-ico { color: #9aa3bd; font-size: 16px; margin-right: 10px; }
.ss-search-lg input { height: 46px; font-size: 15px; }
.ss-search-lg button { height: 46px; padding: 0 28px; }
.ss-hero .ss-cat-tabs { justify-content: center; flex-wrap: wrap; }

/* Card micro-interactions: image zoom + CTA glow on hover. */
.ss-image-container img { transition: transform .45s ease; }
.ss-card:hover .ss-image-container img { transform: scale(1.06); }
.ss-card:hover .ss-btn-cart { box-shadow: 0 8px 20px rgba(63, 81, 181, .40); }
.ss-btn-cart { transition: background .15s ease, box-shadow .2s ease, transform .1s ease; }
.ss-btn-cart:active { transform: translateY(1px); }

/* Colourful category icon tiles (cycle gradients like the concept). */
.ss-cat-link:nth-of-type(5n+1) i, .ss-cat-link:nth-of-type(5n+1) > svg { background: linear-gradient(135deg, #6a8dff, #3f51b5); color: #fff; }
.ss-cat-link:nth-of-type(5n+2) i, .ss-cat-link:nth-of-type(5n+2) > svg { background: linear-gradient(135deg, #ff9a76, #ef5417); color: #fff; }
.ss-cat-link:nth-of-type(5n+3) i, .ss-cat-link:nth-of-type(5n+3) > svg { background: linear-gradient(135deg, #4dd0e1, #0097a7); color: #fff; }
.ss-cat-link:nth-of-type(5n+4) i, .ss-cat-link:nth-of-type(5n+4) > svg { background: linear-gradient(135deg, #9ccc65, #43a047); color: #fff; }
.ss-cat-link:nth-of-type(5n+5) i, .ss-cat-link:nth-of-type(5n+5) > svg { background: linear-gradient(135deg, #b39ddb, #7e57c2); color: #fff; }
.ss-cat-link.active i, .ss-cat-link.active > svg { background: rgba(255, 255, 255, .22) !important; }

/* Sidebar header + collapse toggle. */
.ss-side-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 2px 8px 10px; color: #aeb9e0; font-size: 12px;
    text-transform: uppercase; letter-spacing: .04em; font-weight: 700;
}
.ss-collapse-btn {
    background: rgba(255, 255, 255, .08); border: none; color: #cdd6f4;
    width: 26px; height: 26px; border-radius: 8px; cursor: pointer; font-size: 12px;
}
.ss-collapse-btn:hover { background: rgba(255, 255, 255, .16); }
.ss-sidebar.collapsed { flex-basis: 74px; width: 74px; }
.ss-sidebar.collapsed .ss-brand > div:not(.ss-brand-badge),
.ss-sidebar.collapsed .ss-side-head-label,
.ss-sidebar.collapsed .ss-cat-link span { display: none; }
.ss-sidebar.collapsed .ss-cat-link { justify-content: center; padding-left: 8px; padding-right: 8px; }
.ss-sidebar.collapsed .ss-brand { justify-content: center; }
@media (max-width: 860px) { .ss-sidebar.collapsed { width: 100%; flex-basis: auto; } }

/* ---- Detail page: recommendations + reviews ---- */
.ss-reco-wrap { max-width: 1280px; margin: 10px auto 40px; padding: 0 16px; }
.ss-reco-title { font-size: 18px; font-weight: 700; color: #1e2a52; margin: 0 0 14px; }
.ss-reco { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 10px; }
.ss-reco > div[class*="col-"] { flex: 0 0 210px; max-width: 210px; padding: 0; margin-bottom: 0 !important; }

.ss-detail-section { max-width: 1280px; margin: 10px auto 24px; padding: 22px 16px; border-top: 1px solid #eef0f7; }
.ss-reviews-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.ss-stars { color: #e0e0e0; font-size: 15px; white-space: nowrap; }
.ss-star { color: #e0e0e0; }
.ss-stars .ss-star.on, .ss-star.on { color: #f5a623; }
.ss-review { padding: 12px 0; border-bottom: 1px solid #f0f2f7; max-width: 720px; }
.ss-review-top { display: flex; align-items: center; gap: 10px; }
.ss-review-body { color: #555; font-size: 14px; margin-top: 4px; }
.ss-review-date { color: #aab; font-size: 12px; margin-top: 3px; }
/* Child selector, not `i`: Font Awesome's JS build replaces <i class="fa …"> with
   <svg>, and an `i` rule then matches nothing — the stars lose their grey/amber
   states and their pointer cursor, which is what "the rating doesn't work" looks
   like before you notice the clicks are dead too. */
.ss-star-picker > * { color: #e0e0e0; font-size: 22px; cursor: pointer; margin-right: 2px; }
.ss-star-picker > *.on { color: #f5a623; }

/* Card rating row */
.ss-card-rating { margin: 2px 0 8px; font-size: 13px; line-height: 1; }
.ss-card-rating .ss-stars { font-size: 13px; }
.ss-rating-count { color: #8a93a6; font-size: 12px; margin-left: 3px; }

/* Detail page: rating shown next to the title (above the fold) */
.ss-rating-top { margin: 6px 0 10px; font-size: 14px; min-height: 18px; }
.ss-rating-top .ss-stars { font-size: 15px; }
.ss-rating-top-link { color: #48507a; text-decoration: none; margin-left: 6px; font-size: 13px; }
.ss-rating-top-link:hover { text-decoration: underline; }

/* ---- Mobile: thumb-friendly floating action button (cart) ---- */
.ss-fab {
    position: fixed; z-index: 9998; display: none;
    align-items: center; justify-content: center;
    width: 56px; height: 56px; border-radius: 50%;
    background: var(--ss-primary); color: #fff;
    box-shadow: 0 8px 20px rgba(63, 81, 181, .4); text-decoration: none;
}
.ss-fab:hover, .ss-fab:focus { background: var(--ss-primary-dark); color: #fff; text-decoration: none; }
.ss-fab-cart { right: 18px; bottom: 18px; font-size: 20px; }
.ss-fab-count {
    position: absolute; top: -4px; right: -4px; background: var(--ss-accent); color: #fff;
    min-width: 20px; height: 20px; border-radius: 10px; font-size: 11px; font-weight: 700;
    display: flex; align-items: center; justify-content: center; padding: 0 5px;
}
/* Thumb-friendly: show the FAB and give larger tap targets on small screens. */
@media (max-width: 860px) {
    .ss-fab { display: flex; }
    .ss-btn-cart { padding: 12px 12px; font-size: 14px; }
    .ss-btn-icon { width: 42px; height: 42px; flex-basis: 42px; }
    .ss-cat-link { padding: 13px 12px; }
}

/* ---- Predictive search dropdown ---- */
.ss-suggest {
    position: absolute; top: calc(100% + 6px); left: 0; right: 0;
    background: #fff; border: 1px solid #e6e8ef; border-radius: 14px;
    box-shadow: 0 12px 30px rgba(30, 42, 82, .14);
    z-index: 9999; overflow: hidden; max-height: 380px; overflow-y: auto;
}
.ss-suggest-item {
    display: flex; align-items: center; gap: 12px; padding: 10px 14px;
    text-decoration: none; color: #333; border-bottom: 1px solid #f4f5fa;
}
.ss-suggest-item:last-child { border-bottom: none; }
.ss-suggest-item:hover { background: #f5f7fc; text-decoration: none; }
.ss-suggest-item img { width: 44px; height: 44px; object-fit: cover; border-radius: 8px; background: #f0f0f0; flex: 0 0 44px; }
.ss-suggest-name { flex: 1; font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-suggest-price { color: #0493b7; font-size: 13px; font-weight: 600; white-space: nowrap; }
.ss-suggest-empty { padding: 14px; color: #8a93a6; font-size: 14px; text-align: center; }

/* ---- Featured / promo banner ---- */
.ss-banner {
    position: relative; border-radius: 16px; overflow: hidden; height: 220px;
    margin-bottom: 20px; box-shadow: 0 8px 24px rgba(30, 42, 82, .12); background: #1e2a52;
}
.ss-banner-slide {
    position: absolute; inset: 0; display: flex; align-items: center; padding: 0 40px;
    background-size: cover; background-position: center; opacity: 0; transition: opacity .6s ease;
}
.ss-banner-slide.on { opacity: 1; }
.ss-banner-slide::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(20, 30, 60, .74) 0%, rgba(20, 30, 60, .30) 60%, rgba(20, 30, 60, 0) 100%);
}
.ss-banner-content { position: relative; z-index: 2; color: #fff; max-width: 60%; }
.ss-banner-badge {
    display: inline-block; background: var(--ss-accent); color: #fff; font-size: 11px;
    font-weight: 700; padding: 3px 10px; border-radius: 20px; margin-bottom: 10px;
    text-transform: uppercase; letter-spacing: .05em;
}
.ss-banner-title { font-size: 26px; font-weight: 800; margin: 0 0 6px; }
.ss-banner-desc { font-size: 14px; opacity: .9; margin-bottom: 16px; }
.ss-banner-btn { background: #fff; color: #1e2a52; padding: 10px 22px; border-radius: 30px; font-weight: 700; font-size: 14px; text-decoration: none; }
.ss-banner-btn:hover { background: #eef1ff; color: #1e2a52; text-decoration: none; }
.ss-banner-dots { position: absolute; bottom: 14px; right: 20px; z-index: 3; display: flex; gap: 6px; }
.ss-banner-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .5); cursor: pointer; }
.ss-banner-dot.on { background: #fff; }
@media (max-width: 575px) {
    .ss-banner { height: 170px; }
    .ss-banner-slide { padding: 0 22px; }
    .ss-banner-content { max-width: 90%; }
    .ss-banner-title { font-size: 20px; }
}

/* Merchant "feature this item" star toggle. */
.ss-btn-icon.js-feature-item.on { color: #f5a623; border-color: #f5a623; background: #fff8e9; }

/* ============================================================
   Cart + multi-step checkout (modern flow)
   ============================================================ */
.co-wrap { max-width: 1080px; margin: 22px auto 60px; padding: 0 16px; }

/* Two-column layout: main panel + sticky order summary. */
.co-grid { display: grid; grid-template-columns: 1fr 340px; gap: 24px; align-items: start; }
@media (max-width: 860px) { .co-grid { grid-template-columns: 1fr; } }

.co-card {
    background: #fff; border: 1px solid #eef0f7; border-radius: 16px;
    box-shadow: 0 6px 22px rgba(30, 42, 82, .06); padding: 22px;
}
.co-card + .co-card { margin-top: 18px; }
.co-h { font-size: 17px; font-weight: 700; color: #1e2a52; margin: 0 0 16px; }
.co-h small { font-weight: 500; color: #8a93a6; font-size: 13px; }

/* ---- Stepper / progress indicator ---- */
.co-steps { display: flex; align-items: center; margin: 4px 0 22px; }
.co-step { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.co-step-dot {
    width: 34px; height: 34px; border-radius: 50%; flex: 0 0 34px;
    display: flex; align-items: center; justify-content: center;
    background: #eef0f7; color: #8a93a6; font-weight: 700; font-size: 14px;
    border: 2px solid #eef0f7; transition: all .2s ease;
}
.co-step-label { font-size: 13.5px; font-weight: 600; color: #8a93a6; white-space: nowrap; }
.co-step-line { flex: 1 1 auto; height: 2px; background: #eef0f7; margin: 0 12px; min-width: 18px; }
.co-step.active .co-step-dot { background: var(--ss-primary); border-color: var(--ss-primary); color: #fff; box-shadow: 0 6px 16px rgba(63, 81, 181, .3); }
.co-step.active .co-step-label { color: #1e2a52; }
.co-step.done .co-step-dot { background: #e8f5e9; border-color: #43a047; color: #43a047; }
.co-step.done .co-step-label { color: #43a047; }
@media (max-width: 575px) { .co-step-label { display: none; } .co-step-line { margin: 0 6px; } }

/* ---- Line items (cart + order summary) ---- */
.co-line { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid #f2f4f9; }
.co-line:last-child { border-bottom: none; }
.co-line-img { width: 60px; height: 60px; flex: 0 0 60px; border-radius: 10px; object-fit: cover; background: #f5f5f5; }
.co-line-info { flex: 1; min-width: 0; }
.co-line-name { font-size: 14px; font-weight: 600; color: #222; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.co-line-price { font-size: 12.5px; color: #8a93a6; margin-top: 2px; }
.co-line-sub { font-weight: 700; color: #111; font-size: 14px; white-space: nowrap; }

/* Quantity stepper. */
.co-qty { display: inline-flex; align-items: center; border: 1px solid #e2e6f0; border-radius: 10px; overflow: hidden; }
.co-qty button {
    width: 34px; height: 34px; border: none; background: #f7f8fc; color: #48507a;
    font-size: 18px; line-height: 1; cursor: pointer; transition: background .12s ease;
}
.co-qty button:hover { background: #eceffb; }
.co-qty input { width: 40px; height: 34px; border: none; text-align: center; font-size: 14px; font-weight: 600; color: #222; -moz-appearance: textfield; }
.co-qty input::-webkit-outer-spin-button, .co-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.co-line-remove { background: none; border: none; color: #b7bdca; font-size: 16px; cursor: pointer; padding: 6px; border-radius: 8px; }
.co-line-remove:hover { color: #e53935; background: #fdecea; }

/* ---- Totals ---- */
.co-totals { margin-top: 8px; }
.co-total-row { display: flex; justify-content: space-between; font-size: 14px; color: #555; padding: 5px 0; }
.co-total-row.grand { border-top: 1px dashed #e2e6f0; margin-top: 8px; padding-top: 12px; font-size: 18px; font-weight: 800; color: #1e2a52; }

/* ---- Form fields ---- */
.co-field { margin-bottom: 14px; }
.co-field label { display: block; font-size: 12.5px; font-weight: 600; color: #48507a; margin-bottom: 6px; }
.co-input, .co-select, .co-textarea {
    width: 100%; border: 1px solid #e2e6f0; border-radius: 10px; padding: 11px 13px;
    font-size: 14px; color: #222; background: #fff; transition: border-color .15s ease, box-shadow .15s ease;
}
.co-input:focus, .co-select:focus, .co-textarea:focus {
    outline: none; border-color: var(--ss-primary); box-shadow: 0 0 0 3px rgba(63, 81, 181, .12);
}
.co-input.err, .co-select.err, .co-textarea.err { border-color: #e53935; box-shadow: 0 0 0 3px rgba(229, 57, 53, .1); }
.co-textarea { min-height: 84px; resize: vertical; }
.co-field-err { color: #e53935; font-size: 12px; margin-top: 5px; min-height: 15px; }
.co-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 480px) { .co-row2 { grid-template-columns: 1fr; } }

/* ---- Payment option tiles ---- */
.co-pay-option {
    display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
    border: 1.5px solid #e2e6f0; border-radius: 12px; padding: 14px 16px; margin-bottom: 12px;
    background: #fff; cursor: pointer; transition: border-color .15s ease, background .15s ease;
}
.co-pay-option:hover { border-color: #c3cbe6; background: #fafbff; }
.co-pay-option.active { border-color: var(--ss-primary); background: #f5f7ff; box-shadow: 0 0 0 3px rgba(63, 81, 181, .1); }
.co-pay-ico {
    width: 42px; height: 42px; flex: 0 0 42px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
    font-size: 18px; color: #fff; background: var(--ss-primary);
}
.co-pay-ico.bank { background: #0097a7; }
.co-pay-ico.wa { background: #25d366; }
.co-pay-t { font-size: 14.5px; font-weight: 700; color: #1e2a52; }
.co-pay-s { font-size: 12.5px; color: #8a93a6; margin-top: 1px; }
.co-pay-check { margin-left: auto; color: var(--ss-primary); font-size: 18px; opacity: 0; }
.co-pay-option.active .co-pay-check { opacity: 1; }

/* ---- Buttons + nav ---- */
.co-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    border: none; border-radius: 10px; padding: 13px 22px; font-size: 15px; font-weight: 700;
    cursor: pointer; text-decoration: none; transition: background .15s ease, box-shadow .2s ease, transform .1s ease;
}
.co-btn-primary { background: var(--ss-primary); color: #fff; }
.co-btn-primary:hover { background: var(--ss-primary-dark); color: #fff; box-shadow: 0 8px 20px rgba(63, 81, 181, .35); text-decoration: none; }
.co-btn-primary:disabled { opacity: .6; cursor: default; box-shadow: none; }
.co-btn-ghost { background: #fff; color: #48507a; border: 1px solid #e2e6f0; }
.co-btn-ghost:hover { background: #f5f7fc; color: #1e2a52; text-decoration: none; }
.co-btn-block { width: 100%; }
.co-btn:active { transform: translateY(1px); }
.co-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 20px; }
.co-alert { background: #fdecea; color: #b71c1c; border-radius: 10px; padding: 11px 14px; font-size: 13.5px; margin-bottom: 14px; display: none; }
.co-alert.show { display: block; }

/* ---- Sticky summary ---- */
.co-summary { position: sticky; top: 16px; }
@media (max-width: 860px) { .co-summary { position: static; } }
.co-review-item { display: flex; justify-content: space-between; font-size: 13.5px; color: #555; padding: 4px 0; }
.co-review-line { border-top: 1px solid #f2f4f9; margin: 10px 0; }

/* ---- Empty cart ---- */
.co-empty { text-align: center; padding: 50px 20px; }
.co-empty-ico { font-size: 90px; color: #e6e9f2; margin-bottom: 10px; }
.co-empty h3 { color: #1e2a52; font-weight: 700; }
.co-empty p { color: #8a93a6; font-size: 14px; max-width: 360px; margin: 6px auto 20px; }

/* Step panels: only the active one shows. */
.co-panel { display: none; }
.co-panel.active { display: block; animation: coFade .25s ease; }
@keyframes coFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Trust row under the summary. */
.co-trust { display: flex; align-items: center; justify-content: center; gap: 6px; color: #8a93a6; font-size: 12px; margin-top: 14px; }
.co-trust i, .co-trust svg { color: #43a047; }

/* ============================================================
   Product detail page (modern)
   ============================================================ */
.pd-wrap { max-width: 1080px; margin: 22px auto 10px; padding: 0 16px; }
.pd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }
@media (max-width: 768px) { .pd-grid { grid-template-columns: 1fr; gap: 20px; } }

/* Gallery */
.pd-gallery { position: sticky; top: 16px; }
@media (max-width: 768px) { .pd-gallery { position: static; } }
.pd-main {
    position: relative; width: 100%; aspect-ratio: 1/1; border-radius: 16px; overflow: hidden;
    background: #f5f6fa; border: 1px solid #eef0f7; box-shadow: 0 6px 22px rgba(30,42,82,.06);
}
.pd-main img { width: 100%; height: 100%; object-fit: contain; display: block; }
.pd-badge {
    position: absolute; top: 14px; left: 14px; z-index: 2;
    background: var(--ss-accent); color: #fff; font-size: 12px; font-weight: 700;
    padding: 5px 11px; border-radius: 20px;
}
.pd-thumbs { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.pd-thumb {
    width: 66px; height: 66px; border-radius: 10px; overflow: hidden; cursor: pointer;
    border: 2px solid #eef0f7; background: #f5f6fa; padding: 0; flex: 0 0 66px;
}
.pd-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pd-thumb.active { border-color: var(--ss-primary); }

/* Info column */
.pd-info { padding-top: 4px; }
.pd-cat-chip {
    display: inline-block; background: #eef0f7; color: #48507a; font-size: 12px; font-weight: 600;
    padding: 4px 12px; border-radius: 20px; margin-bottom: 12px;
}
.pd-title { font-size: 26px; font-weight: 800; color: #1e2a52; margin: 0 0 8px; line-height: 1.25; }
.pd-price-row { display: flex; align-items: baseline; gap: 10px; margin: 14px 0 6px; flex-wrap: wrap; }
.pd-price { font-size: 28px; font-weight: 800; color: #0493b7; }
.pd-old { font-size: 16px; color: #e53935; opacity: .6; text-decoration: line-through; }
.pd-save { font-size: 12px; font-weight: 700; color: #43a047; background: #e8f5e9; padding: 3px 9px; border-radius: 6px; }
.pd-section-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #8a93a6; margin: 20px 0 6px; }
.pd-desc { color: #555; font-size: 14.5px; line-height: 1.6; }
.pd-actions { margin-top: 24px; display: flex; gap: 12px; align-items: center; }
.pd-buy { flex: 1; padding: 15px 22px; font-size: 16px; }
@media (max-width: 768px) {
    .pd-title { font-size: 22px; } .pd-price { font-size: 24px; }
    /* Sticky buy bar on phones for a thumb-friendly CTA. */
    .pd-actions { position: sticky; bottom: 0; background: #fff; padding: 12px 0; margin: 20px -16px 0; box-shadow: 0 -4px 16px rgba(0,0,0,.06); z-index: 20; padding-left: 16px; padding-right: 16px; }
}

/* Added-to-cart confirmation popup */
.cart-pop { text-align: center; padding: 30px 24px 24px; }
.cart-pop-badge {
    width: 66px; height: 66px; border-radius: 50%; margin: 0 auto 14px;
    display: flex; align-items: center; justify-content: center;
    background: #e8f5e9; color: #43a047; font-size: 30px; animation: coPop .35s cubic-bezier(.2,.9,.3,1.4);
}
.cart-pop-title { font-size: 18px; font-weight: 800; color: #1e2a52; margin: 0 0 4px; }
.cart-pop-name { color: #6b7385; font-size: 14px; margin-bottom: 20px; }
.cart-pop-actions { display: flex; gap: 10px; }
.cart-pop-actions .co-btn { flex: 1; }
#add-cart-modal .modal-content { border: none; border-radius: 18px; overflow: hidden; box-shadow: 0 20px 60px rgba(20,30,60,.25); }
#add-cart-modal .modal-dialog { max-width: 400px; }

/* ============================================================
   Publishing (merchant) — choose + item entry
   ============================================================ */
.pub-wrap { max-width: 900px; margin: 26px auto 60px; padding: 0 16px; }
.pub-head { text-align: center; margin-bottom: 26px; }
.pub-head h1 { font-size: 24px; font-weight: 800; color: #1e2a52; margin: 0 0 6px; }
.pub-head p { color: #8a93a6; font-size: 14.5px; margin: 0; }

.pub-choices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 720px) { .pub-choices { grid-template-columns: 1fr; } }
.pub-choice {
    background: #fff; border: 1px solid #eef0f7; border-radius: 16px; padding: 24px 20px;
    text-align: center; cursor: pointer; box-shadow: 0 6px 22px rgba(30,42,82,.06);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.pub-choice:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(30,42,82,.12); border-color: #dfe4f3; }
.pub-choice-ico {
    width: 56px; height: 56px; border-radius: 14px; margin: 0 auto 14px;
    display: flex; align-items: center; justify-content: center; font-size: 22px; color: #fff;
}
.pub-choice:nth-child(1) .pub-choice-ico { background: linear-gradient(135deg, #6a8dff, #3f51b5); }
.pub-choice:nth-child(2) .pub-choice-ico { background: linear-gradient(135deg, #4dd0e1, #0097a7); }
.pub-choice:nth-child(3) .pub-choice-ico { background: linear-gradient(135deg, #ff9a76, #ef5417); }
.pub-choice-t { font-size: 16px; font-weight: 700; color: #1e2a52; margin-bottom: 5px; }
.pub-choice-s { font-size: 13px; color: #8a93a6; line-height: 1.45; }

/* Modernise the entry-form modals + item_entry form using the co-* fields. */
.pub-modal .modal-content { border: none; border-radius: 18px; overflow: hidden; box-shadow: 0 20px 60px rgba(20,30,60,.25); }
.pub-modal .modal-header { background: linear-gradient(135deg, #3f51b5, #2c3a94); border: none; padding: 18px 22px; }
.pub-modal .modal-title { color: #fff; font-weight: 700; }
.pub-modal .modal-body { padding: 22px; }

/* item_entry form card + photo dropzone */
.pub-form-card { background: #fff; border: 1px solid #eef0f7; border-radius: 16px; box-shadow: 0 6px 22px rgba(30,42,82,.06); padding: 24px; }
.pub-photos { display: flex; gap: 12px; flex-wrap: wrap; margin: 6px 0 4px; }
.pub-photo {
    position: relative; width: 100px; height: 100px; border-radius: 12px; overflow: hidden;
    background: #f5f6fa; border: 1px solid #eef0f7;
}
.pub-photo img { width: 100%; height: 100%; object-fit: cover; }
.pub-photo .rm { position: absolute; top: 4px; right: 4px; background: rgba(0,0,0,.55); color: #fff; border: none; width: 22px; height: 22px; border-radius: 50%; cursor: pointer; font-size: 12px; line-height: 1; }
.pub-drop {
    width: 100px; height: 100px; border-radius: 12px; border: 2px dashed #cbd2e6; background: #fafbff;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    color: #7a83a0; font-size: 12px; cursor: pointer; transition: border-color .15s ease, background .15s ease;
}
.pub-drop:hover { border-color: var(--ss-primary); background: #f5f7ff; color: var(--ss-primary); }
.pub-drop i, .pub-drop svg { font-size: 20px; }

/* Bulk publish (item_entry_multiple) — toolbar + table */
.pub-bulk { max-width: 1180px; margin: 22px auto 60px; padding: 0 16px; }
.pub-toolbar {
    display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; justify-content: space-between;
    background: #fff; border: 1px solid #eef0f7; border-radius: 14px; padding: 16px;
    box-shadow: 0 6px 22px rgba(30,42,82,.06); margin-bottom: 16px;
}
.pub-toolbar .co-field { margin-bottom: 0; }
.pub-toolbar .co-select { min-width: 190px; }
.pub-table-card { background: #fff; border: 1px solid #eef0f7; border-radius: 16px; box-shadow: 0 6px 22px rgba(30,42,82,.06); overflow: hidden; }
#itemsTable { margin: 0; }
#itemsTable thead th {
    background: #f7f8fc; color: #48507a; font-size: 11.5px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .03em; border-top: none; border-color: #eef0f7;
    vertical-align: middle; padding: 12px 10px;
}
#itemsTable tbody td { border-color: #f2f4f9; vertical-align: middle; font-size: 13.5px; }
#itemsTable tbody tr:hover { background: #f8f9fe; }
.pub-state { text-align: center; padding: 70px 20px; color: #8a93a6; }
.pub-state i, .pub-state svg { font-size: 40px; color: var(--ss-primary); }
.pub-state .h1, .pub-state h1 { font-size: 20px; color: #1e2a52; font-weight: 700; margin-top: 12px; }

/* ---- Success / thank-you state ---- */
.co-success { max-width: 560px; margin: 0 auto; text-align: center; padding: 40px 26px; }
.co-success-badge {
    width: 84px; height: 84px; border-radius: 50%; margin: 0 auto 20px;
    display: flex; align-items: center; justify-content: center;
    background: #e8f5e9; color: #43a047; font-size: 40px;
    animation: coPop .35s cubic-bezier(.2,.9,.3,1.4);
}
@keyframes coPop { from { transform: scale(.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.co-success h2 { font-size: 22px; font-weight: 800; color: #1e2a52; margin: 0 0 8px; }
.co-success p { color: #6b7385; font-size: 14.5px; margin: 0 auto 8px; max-width: 420px; line-height: 1.5; }
.co-receipt {
    background: #f7f8fc; border: 1px dashed #d9deee; border-radius: 12px;
    padding: 16px 18px; margin: 20px auto; max-width: 380px; text-align: left;
}
.co-receipt-row { display: flex; justify-content: space-between; font-size: 14px; padding: 5px 0; color: #48507a; }
.co-receipt-row b { color: #1e2a52; }
.co-success-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 22px; }

/* ---- Stock availability & back orders (migration 062) ------------------
   Shown only when the merchant turned "Show availability" on in Setup, and
   only for items the POS ledger actually tracks. */
.ss-stock {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12.5px; font-weight: 600; line-height: 1;
    padding: 4px 9px; border-radius: 20px; margin: 2px 0 8px;
}
.ss-stock i, .ss-stock svg { font-size: 11px; }
.ss-stock.in { background: #e8f5e9; color: #2e7d32; }
.ss-stock.low { background: #fff4e5; color: #b26a00; }
.ss-stock.out { background: #fdecea; color: #c62828; }
.ss-stock-qty { font-weight: 700; }

/* Back-order promise — the lead time the merchant quoted when publishing. */
.ss-backorder-note {
    font-size: 12.5px; color: #b26a00; background: #fff8ec;
    border: 1px dashed #f0d3a3; border-radius: 8px;
    padding: 7px 10px; margin: 0 0 10px; line-height: 1.4;
}
.ss-backorder-note i, .ss-backorder-note svg { margin-right: 5px; }
.ss-btn-cart.backorder { background: #b26a00; }
.ss-btn-cart.backorder:hover { background: #965900; }
.ss-btn-cart.sold-out { background: #b9bec9; cursor: not-allowed; }
.ss-btn-cart.sold-out:hover { background: #b9bec9; }

/* Product-detail variants (bigger type than the card chips). */
.pd-stock { font-size: 14px; padding: 6px 12px; margin: 6px 0 12px; }
.pd-backorder-note { font-size: 13.5px; padding: 10px 12px; margin: 4px 0 14px; max-width: 480px; }

/* ============================================================
   MERCHANT CARD ACTIONS — kebab menu, hidden state (migration 070)
   ============================================================ */
/* The card used to clip its own children, which would cut the actions menu in
   half. The image keeps its own clipping (it needs it for the hover zoom), so
   the card itself no longer has to. */
.ss-card { overflow: visible; }
.ss-card > .ss-image-container { border-radius: 10px 10px 0 0; }

.ss-badge-hidden {
    left: auto;
    right: 10px;
    background: #37474f;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
/* A hidden item is still fully usable by the merchant — just visibly off-air. */
.ss-card.is-hidden .ss-image-container img { opacity: .45; filter: grayscale(.55); }
.ss-card.is-hidden .ss-title { color: #6b7285; }

.ss-card-menu { position: relative; }
.ss-card-menu-list {
    display: none;
    position: absolute;
    right: 0;
    bottom: calc(100% + 8px);
    min-width: 215px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 14px 40px rgba(20, 28, 80, .24);
    padding: 6px;
    z-index: 30;
}
.ss-card-menu.open .ss-card-menu-list { display: block; }
.ss-card-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 11px;
    border: none;
    background: none;
    border-radius: 8px;
    color: #35406b;
    font-size: 13.5px;
    font-weight: 500;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}
.ss-card-menu-item i, .ss-card-menu-item > svg { width: 15px; text-align: center; color: #8b95bb; font-size: 13px; }
.ss-card-menu-item i.on { color: #f5a623; }
.ss-card-menu-item:hover { background: #f1f3fd; color: var(--ss-primary); text-decoration: none; }
.ss-card-menu-item:disabled { opacity: .55; cursor: default; }
.ss-card-menu-item.danger { color: #c62828; }
.ss-card-menu-item.danger i, .ss-card-menu-item.danger > svg { color: #e57373; }
.ss-card-menu-item.danger:hover { background: #fdecea; color: #b71c1c; }

/* ============================================================
   LIVE SEARCH (merchant Share Items) — filters as you type
   ============================================================ */
.ss-search-live { position: relative; padding-right: 6px; }
.ss-search-live .ss-search-ico { color: #9aa3bd; font-size: 14px; margin-right: 9px; }
/* The native type="search" clear button duplicates ours, in the wrong place. */
.ss-search-live input::-webkit-search-cancel-button,
.ss-search-live input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.ss-search-live input::-ms-clear { display: none; }
.ss-search-clear {
    display: none;
    border: none;
    background: #e8ebf6;
    color: #6b7490;
    width: 22px;
    height: 22px;
    line-height: 20px;
    border-radius: 50%;
    font-size: 16px;
    padding: 0;
    cursor: pointer;
}
.ss-search-clear.on { display: block; }
.ss-search-clear:hover { background: #d8ddf0; color: #35406b; }

/* Result summary between the tabs and the grid. */
.ss-result-bar {
    display: none;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 13.5px;
    color: #48507a;
    background: #f5f7fd;
    border: 1px solid #e6eaf7;
    border-radius: 10px;
    padding: 9px 14px;
    margin: 0 0 16px;
}
/* Toggled by class, never by jQuery .show(): .show() would write display:block
   and flatten this row. */
.ss-result-bar.show { display: flex; }
.ss-result-of { color: #8a93a6; }
.ss-result-clear {
    margin-left: auto;
    border: none;
    background: none;
    color: var(--ss-primary);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 6px;
}
.ss-result-clear:hover { background: #e7ebfb; }

/* Matched run inside a product title. */
.ss-title mark { background: #fff3c4; color: inherit; padding: 0 1px; border-radius: 3px; }

/* ============================================================
   ORDER MANAGEMENT (merchant) — order_listing.php
   ============================================================ */
.om-wrap { max-width: 1100px; margin: 20px auto 60px; padding: 0 16px; }

/* Counts that are also filters: the merchant's first question is "what needs me?" */
.om-stats { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.om-stat {
    flex: 1 1 150px;
    display: flex; flex-direction: column; gap: 2px;
    padding: 14px 16px;
    background: #fff; border: 1px solid #e6eaf7; border-left-width: 4px;
    border-radius: 12px; cursor: pointer; text-align: left;
    transition: box-shadow .15s ease, transform .1s ease, border-color .15s ease;
}
.om-stat:hover { box-shadow: 0 6px 18px rgba(20, 28, 80, .10); }
.om-stat.on { box-shadow: 0 0 0 2px var(--ss-primary) inset, 0 6px 18px rgba(63, 81, 181, .14); }
.om-stat.new  { border-left-color: #f5a623; }
.om-stat.conf { border-left-color: #2e7d32; }
.om-stat.all  { border-left-color: #8b95bb; }
.om-stat-n { font-size: 24px; font-weight: 800; color: #1e2a52; line-height: 1.1; }
.om-stat-l { font-size: 12.5px; font-weight: 600; color: #8a93a6; }
.om-stat-value {
    flex: 1 1 180px; display: flex; flex-direction: column; gap: 2px; justify-content: center;
    padding: 14px 16px; background: #f5f7fd; border: 1px dashed #dbe1f5; border-radius: 12px;
}
.om-stat-value .om-stat-n { font-size: 19px; }

.om-toolbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.om-search { flex: 1 1 320px; min-width: 240px; }
.om-link { margin-left: auto; font-size: 13.5px; font-weight: 600; color: var(--ss-primary); text-decoration: none; white-space: nowrap; }
.om-link:hover { text-decoration: underline; color: var(--ss-primary-dark); }

/* Rows are links, not a table: the whole row is the tap target. */
.om-head, .om-row {
    display: grid;
    grid-template-columns: 1.1fr 1.4fr 1fr .9fr .8fr 28px;
    gap: 12px; align-items: center;
}
.om-head {
    padding: 0 16px 8px;
    font-size: 11.5px; font-weight: 700; letter-spacing: .6px;
    text-transform: uppercase; color: #98a0bb;
}
.om-row {
    padding: 14px 16px; margin-bottom: 8px;
    background: #fff; border: 1px solid #e9ecf6; border-left: 4px solid #e9ecf6;
    border-radius: 12px; color: #35406b; text-decoration: none;
    transition: box-shadow .15s ease, transform .1s ease;
}
.om-row:hover { box-shadow: 0 8px 22px rgba(20, 28, 80, .10); text-decoration: none; color: #35406b; transform: translateY(-1px); }
.om-row.new  { border-left-color: #f5a623; }
.om-row.conf { border-left-color: #2e7d32; }
.om-cell { min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.om-cell b { font-weight: 700; color: #1e2a52; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.om-sub { font-size: 12px; color: #8a93a6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.om-r { text-align: right; align-items: flex-end; }
.om-go { color: #b7bdca; text-align: right; }
.om-no b { font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; font-size: 13.5px; }
.om-legacy {
    display: inline-block; font-size: 10.5px; color: #98a0bb;
    background: #f2f4fb; border-radius: 5px; padding: 1px 5px; width: fit-content;
}

.om-chip {
    display: inline-block; padding: 4px 11px; border-radius: 30px;
    font-size: 12px; font-weight: 700; white-space: nowrap;
}
.om-chip.new   { background: #fff4e0; color: #b26a00; }
.om-chip.conf  { background: #e8f5e9; color: #2e7d32; }
.om-chip.other { background: #eef0f7; color: #5a6480; }

/* Label shown only once the grid collapses into stacked cards. */
.om-lbl { display: none; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: #a8b0c6; }

.om-empty {
    padding: 60px 20px; text-align: center; color: #8a93a6; font-size: 14.5px;
    background: #fff; border: 1px dashed #e2e6f0; border-radius: 12px;
}
.om-empty i { font-size: 26px; display: block; margin-bottom: 10px; opacity: .6; }
.om-empty.om-error { color: #c62828; border-color: #f3c9c7; background: #fdf7f7; }
.om-retry {
    border: none; background: var(--ss-primary); color: #fff;
    padding: 8px 16px; border-radius: 30px; font-size: 13px; font-weight: 600;
    cursor: pointer; margin-left: 6px;
}
.om-retry:hover { background: var(--ss-primary-dark); }

@media (max-width: 860px) {
    .om-head { display: none; }
    .om-row {
        grid-template-columns: 1fr 1fr;
        row-gap: 12px; padding: 16px;
    }
    .om-lbl { display: block; }
    .om-r, .om-cell.om-r { text-align: left; align-items: flex-start; }
    .om-go { display: none; }
    .om-link { margin-left: 0; }
}

/* ============================================================
   ORDER DETAIL (merchant) — order_detail.php
   ============================================================ */
/* One order is a page of a document, not a dashboard. At 1080px with a sidebar it spread
   across half a desk: a two-line item table sat alone in a wide box while the eye crossed
   empty space to pair "Email" with its address. The column is now the width of the thing
   being read, and the facts sit in one band under the items. */
.od-wrap { max-width: 760px; margin: 14px auto 44px; padding: 0 14px; }
.od-back {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 13px; font-weight: 600; color: #8a93a6;
    text-decoration: none; margin-bottom: 10px;
}
.od-back:hover { color: var(--ss-primary); text-decoration: none; }

/* Number, status and the next action on one line. Three stacked rows of chrome above the
   order was most of what made the page feel long before anything had even been read. */
.od-head-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.od-head-id { min-width: 0; }
.od-no {
    margin: 0; font-size: 19px; font-weight: 800; color: #1e2a52;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.od-meta { font-size: 12.5px; color: #8a93a6; margin-top: 3px; }
.od-meta b { color: #1e2a52; }
.od-chip { font-size: 11px; padding: 3px 10px; }
.om-chip.done { background: #e8f5e9; color: #1b5e20; }

/* The next action, at the top where it is looked for — not buried under the table. */
.od-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 0; }
.od-btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 14px; border-radius: 9px;
    border: 1px solid #dbe1f5; background: #fff; color: #35406b;
    font-size: 13px; font-weight: 600; text-decoration: none; cursor: pointer;
    transition: background .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.od-btn:hover { background: #f1f3fd; color: var(--ss-primary); border-color: var(--ss-primary); text-decoration: none; }
.od-btn.primary { background: var(--ss-primary); border-color: var(--ss-primary); color: #fff; box-shadow: 0 3px 10px rgba(63, 81, 181, .22); }
.od-btn.primary:hover { background: var(--ss-primary-dark); color: #fff; }
.od-btn.ghost { border-color: transparent; background: transparent; color: #8a93a6; }
.od-btn.ghost:hover { background: #f1f3fd; }
.od-btn.sm { padding: 6px 11px; font-size: 12.5px; border-radius: 8px; }
.od-btn.sm.wa { color: #128c7e; border-color: #b9e5de; }
.od-btn.sm.wa:hover { background: #e8f7f4; color: #0b6b60; border-color: #128c7e; }

.od-card { background: #fff; border: 1px solid #e9ecf6; border-radius: 10px; padding: 14px 16px; margin: 12px 0 0; min-width: 0; }
.od-card-h {
    margin: 0 0 10px; font-size: 11px; font-weight: 700;
    letter-spacing: .7px; text-transform: uppercase; color: #98a0bb;
}
.od-items { padding-bottom: 10px; }

.od-table-wrap { overflow-x: auto; }
.od-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.od-table th {
    text-align: left; font-size: 10.5px; font-weight: 700; letter-spacing: .5px;
    text-transform: uppercase; color: #98a0bb; padding: 0 6px 7px; border-bottom: 1px solid #eef0f7;
}
.od-table td { padding: 9px 6px; border-bottom: 1px solid #f4f6fb; vertical-align: top; }
.od-table tr:last-child td { border-bottom: none; }
.od-item-name { font-weight: 600; color: #1e2a52; }
.od-r { text-align: right; white-space: nowrap; }
.od-c { text-align: center; }

.od-bo {
    display: inline-block; background: #fff4e5; color: #b26a00;
    font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 9px;
    margin-left: 6px; white-space: nowrap;
}
.od-bo-note { font-size: 11px; color: #8a93a6; margin-top: 2px; }
.od-bo-note.ok { color: #2e7d32; }

/* Totals hug the right of the table instead of ruling the full width — three lines of
   money stretched across the page shouted louder than the order itself. */
.od-totals { width: 250px; max-width: 100%; margin: 8px 0 0 auto; border-top: 1px solid #eef0f7; padding-top: 8px; }
.od-total-row { display: flex; justify-content: space-between; gap: 16px; font-size: 12.5px; color: #5a6480; padding: 3px 6px; }
.od-total-row.grand {
    border-top: 1px dashed #e2e6f0; margin-top: 4px; padding-top: 8px;
    font-size: 15px; font-weight: 800; color: #1e2a52;
}

/* Customer, delivery and payment side by side in one card. Each used to be its own
   bordered box stacked down a sidebar, and the borders did nothing the headings weren't
   already doing. A grid child defaults to min-width:auto and refuses to shrink below its
   content, so a long email would push the card wider than a phone — hence min-width: 0. */
.od-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px 22px; }
.od-facts > * { min-width: 0; }
.od-group.wide { grid-column: 1 / -1; }
.od-group-h {
    margin: 0 0 4px; font-size: 10.5px; font-weight: 700;
    letter-spacing: .7px; text-transform: uppercase; color: #98a0bb;
}

.od-kv { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; font-size: 12.5px; border-bottom: 1px solid #f4f6fb; }
.od-kv:last-child { border-bottom: none; }
.od-kv span { color: #8a93a6; flex: 0 0 auto; }
.od-kv b { color: #1e2a52; text-align: right; word-break: break-word; }
.od-ref { font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; font-size: 12px; }
.od-reach { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }

.od-paid   { display: flex; align-items: center; gap: 7px; color: #2e7d32; font-weight: 700; font-size: 12.5px; margin-bottom: 4px; }
.od-unpaid { display: flex; align-items: center; gap: 7px; color: #b26a00; font-weight: 700; font-size: 12.5px; margin-bottom: 4px; }
.od-note { margin: 0; font-size: 12.5px; color: #5a6480; line-height: 1.5; white-space: pre-wrap; }

/* Compact order page (migration 142 pass): items as one line each, the totals, then the
   customer/delivery/payment facts as labelled rows — all in one card. */
.od-lines { border-bottom: 1px solid #eef0f7; }
.od-line { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 8px 2px; border-bottom: 1px solid #f4f6fb; font-size: 13px; }
.od-line:last-child { border-bottom: none; }
.od-line-main { min-width: 0; }
.od-line-sub { font-size: 12px; color: #8a93a6; margin-top: 1px; }
.od-line-amt { font-weight: 700; color: #1e2a52; white-space: nowrap; }
.od-save-note { font-size: 11.5px; color: #2e7d32; margin-top: 2px; }
.od-save-note .fa { font-size: 10px; margin-right: 2px; }
.od-totals { width: 340px; }
.od-total-row.save { color: #2e7d32; }
.od-total-row span:first-child { min-width: 0; }
.od-total-row span:last-child { white-space: nowrap; }
.od-save-hint { font-size: 11.5px; color: #b26a00; background: #fff8ec; border-radius: 8px; padding: 6px 8px; margin-top: 6px; }
.od-saved-chip { color: #2e7d32; font-weight: 600; }
.od-facts { display: block; margin-top: 12px; border-top: 1px solid #eef0f7; }
.od-fact { display: flex; gap: 14px; padding: 9px 2px; border-bottom: 1px solid #f4f6fb; font-size: 12.5px; }
.od-fact:last-child { border-bottom: none; padding-bottom: 0; }
.od-fact-l { flex: 0 0 92px; color: #98a0bb; font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; padding-top: 2px; }
.od-fact-v { flex: 1 1 auto; min-width: 0; color: #1e2a52; word-break: break-word; }
.od-fact-sub { color: #5a6480; margin-top: 2px; }
.od-fact .od-reach { margin-top: 6px; }
.od-fact .od-paid, .od-fact .od-unpaid { display: inline-flex; margin: 0; }
.od-ok { color: #2e7d32; font-size: 11px; }

.od-hint {
    display: flex; align-items: flex-start; gap: 9px; margin-top: 12px;
    background: #f5f7fd; border: 1px solid #e6eaf7; border-radius: 10px;
    padding: 10px 12px; font-size: 12.5px; color: #48507a;
}

@media (max-width: 860px) {
    .od-fact { flex-direction: column; gap: 3px; }
    .od-fact-l { flex-basis: auto; padding-top: 0; }
    .od-no { font-size: 18px; }
    .od-actions { width: 100%; }
    .od-actions .od-btn { flex: 1 1 auto; justify-content: center; }
    /* Thumb-sized targets: the contact buttons were 36px and the back link 20px. */
    .od-btn { min-height: 40px; }
    .od-btn.sm { min-height: 40px; padding: 9px 14px; font-size: 13px; }
    .od-back { padding: 8px 4px; font-size: 14px; }
    .od-reach { gap: 8px; }
    .od-reach .od-btn { flex: 1 1 auto; justify-content: center; }
    /* Inline back-order cancel/restore links were 11px tall — impossible to hit accurately. */
    .od-bo-note a { display: inline-block; padding: 8px 4px; font-weight: 600; }
    .od-bo { font-size: 11px; }
    .od-totals { width: 100%; }
}

/* Print an order as a picking/packing slip: drop the chrome, keep the facts. */
@media print {
    .ss-nav, .ss-page-head, .od-back, .od-actions, .ss-fab, footer, .od-hint { display: none !important; }
    .od-wrap { max-width: none; margin: 0; padding: 0; }
    .od-reach { display: none; }
    .od-card { border-color: #ccc; break-inside: avoid; }
}

/* Date range for the converted-orders list. */
.om-range { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.om-range label { font-size: 12.5px; font-weight: 600; color: #8a93a6; margin: 0; }
.om-range input[type="date"] {
    border: 1px solid #e6eaf7; border-radius: 10px; padding: 8px 12px;
    font-size: 13.5px; color: #35406b; background: #fff;
}
.om-range input[type="date"]:focus { outline: none; border-color: var(--ss-primary); box-shadow: 0 0 0 3px rgba(63, 81, 181, .1); }
.om-preset {
    border: 1px solid #e6eaf7; background: #fff; color: #5a6480;
    border-radius: 30px; padding: 7px 14px; font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.om-preset:hover { background: #f1f3fd; color: var(--ss-primary); border-color: var(--ss-primary); }

/* ============================================================
   CONVERT-TO-INVOICE / ADD-PAYMENT-TYPE MODALS — order_detail.php
   Bootstrap's modal shell is kept (the JS calls $().modal), restyled inside.
   ============================================================ */
/* Never taller than the screen. Bootstrap only scrolls its own backdrop, so a dialog
   longer than the viewport had its last choice and Cancel simply unreachable — the head
   stays put and the body scrolls instead. */
#customer-select-modal .modal-dialog,
#payment-type-modal .modal-dialog {
    max-width: 470px;
    margin: 18px auto;
    display: flex;
    align-items: center;
    min-height: calc(100% - 36px);
}
.cv-modal {
    width: 100%;
    border: none; border-radius: 16px; overflow: hidden;
    box-shadow: 0 24px 60px rgba(20, 28, 80, .28);
    display: flex; flex-direction: column;
    max-height: calc(100vh - 36px);
}
.cv-head {
    flex: 0 0 auto;
    display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
    padding: 16px 20px 13px; border-bottom: 1px solid #eef0f7; background: #fff;
}
.cv-title { margin: 0; font-size: 17px; font-weight: 700; color: #1e2a52; }
.cv-sub { margin: 3px 0 0; font-size: 12.5px; color: #8a93a6; }
.cv-close {
    border: none; background: none; color: #b7bdca; font-size: 26px; line-height: 1;
    padding: 0 4px; cursor: pointer;
}
.cv-close:hover { color: #5a6480; }
.cv-body {
    flex: 1 1 auto;
    min-height: 0;              /* without this a flex child refuses to shrink and scroll */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 16px 20px 20px;
}

/* The number the merchant is confirming — read, not typed. */
.cv-amount {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    background: #f5f7fd; border: 1px solid #e6eaf7; border-radius: 12px;
    padding: 11px 14px; margin-bottom: 14px;
}
.cv-amount-l { font-size: 12.5px; font-weight: 600; color: #8a93a6; }
.cv-amount-v { font-size: 20px; font-weight: 800; color: #1e2a52; }

.cv-field { margin-bottom: 13px; }
.cv-field label { display: block; font-size: 12.5px; font-weight: 700; color: #48507a; margin-bottom: 6px; }
.cv-input {
    width: 100%; height: 42px; padding: 0 12px;
    border: 1px solid #dbe1f5; border-radius: 10px;
    font-size: 14px; color: #35406b; background: #fff;
}
.cv-input:focus { outline: none; border-color: var(--ss-primary); box-shadow: 0 0 0 3px rgba(63, 81, 181, .1); }
.cv-input.err { border-color: #e53935; box-shadow: 0 0 0 3px rgba(229, 57, 53, .1); }
.cv-help { display: block; font-size: 11.5px; color: #98a0bb; margin-top: 5px; }
.cv-inline { display: flex; align-items: center; gap: 8px; }
.cv-inline .cv-input { flex: 1; }
.cv-inline.cv-end { justify-content: flex-end; margin-top: 4px; }
.cv-add {
    flex: 0 0 auto; height: 42px; padding: 0 14px;
    border: 1px dashed #c3cbe6; background: #fff; color: var(--ss-primary);
    border-radius: 10px; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.cv-add:hover { background: #f1f3fd; border-style: solid; }

.cv-alert {
    display: flex; align-items: flex-start; gap: 9px;
    border-radius: 12px; padding: 11px 13px; margin: 2px 0 13px;
    font-size: 13px; line-height: 1.4;
}
.cv-alert:empty { display: none; }
.cv-alert.ok  { background: #e8f5e9; color: #1b5e20; }
.cv-alert.ask { background: #fff4e5; color: #8a5200; }
.cv-alert b { font-weight: 700; }

/* Each choice states what it does — the two used to be unlabelled green/blue buttons. */
.cv-choices { display: flex; flex-direction: column; gap: 8px; }
.cv-btn {
    display: flex; flex-direction: column; gap: 2px; width: 100%;
    padding: 11px 15px; text-align: left;
    border: 1px solid #dbe1f5; border-radius: 12px; background: #fff; color: #35406b;
    cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.cv-btn:hover { border-color: var(--ss-primary); background: #f7f8ff; box-shadow: 0 6px 18px rgba(63, 81, 181, .12); }
.cv-btn.primary { border-color: var(--ss-primary); background: var(--ss-primary); color: #fff; }
.cv-btn.primary:hover { background: var(--ss-primary-dark); border-color: var(--ss-primary-dark); }
.cv-btn.primary .cv-btn-d { color: rgba(255, 255, 255, .82); }
.cv-btn-t { font-size: 14px; font-weight: 700; }
.cv-btn-d { font-size: 12px; color: #8a93a6; line-height: 1.35; }
.cv-btn.compact { flex-direction: row; width: auto; padding: 10px 22px; align-items: center; }
.cv-btn:disabled { opacity: .6; cursor: default; }

.cv-cancel {
    display: block; width: 100%; margin-top: 14px; padding: 10px;
    border: none; background: none; color: #8a93a6; font-size: 13.5px; font-weight: 600; cursor: pointer;
}
.cv-cancel:hover { color: #35406b; }
.cv-cancel.inline { width: auto; margin: 0; padding: 10px 16px; }

.cv-err { color: #c62828; font-size: 13px; font-weight: 600; margin: 0 0 12px; display: flex; gap: 7px; align-items: center; }

@media (max-width: 575px) {
    .cv-body { padding: 16px; }
    .cv-head { padding: 16px; }
    .cv-amount-v { font-size: 19px; }
    /* The dismiss control needs a thumb-sized hit area, not just a big glyph. */
    .cv-close { min-width: 44px; min-height: 44px; margin: -8px -8px 0 0; }
    .cv-input { font-size: 16px; height: 46px; }
    .cv-add { height: 46px; }
}

/* ============================================================
   MOBILE TOUCH TARGETS — swept at 360px across every merchant/storefront page.
   Anything tappable gets ~44px of height; a 34px search box and 38px menu rows
   are fine with a mouse and fiddly with a thumb.
   ============================================================ */
@media (max-width: 860px) {
    .ss-search { padding: 5px 5px 5px 16px; }
    .ss-search input { height: 42px; font-size: 16px; }   /* 16px also stops iOS zooming on focus */
    .ss-search button { height: 42px; }
    .ss-search-clear { width: 30px; height: 30px; line-height: 28px; font-size: 20px; }

    .ss-card-menu-item { padding: 12px 12px; font-size: 14px; }
    .ss-cat-tab { padding: 10px 18px; font-size: 13.5px; }
    .ss-result-clear { padding: 8px 10px; }

    .om-preset { padding: 10px 16px; }
    .om-range input[type="date"] { height: 44px; font-size: 16px; }
    .om-link { padding: 8px 0; display: inline-block; }

    /* Same reason as .od-facts: a grid/flex child will not shrink below its content
       without this, and one long product name scrolls the whole page sideways. */
    .om-row > *, .om-head > * { min-width: 0; }
}

/* ============================================================
   CHECKOUT / CART — the same min-width:auto trap as .od-facts.
   The card is a grid item, so it refuses to shrink below its content's
   min-content width; one long product name made the cart 606px wide inside a
   360px phone and the whole page scrolled sideways.
   ============================================================ */
.co-grid > * { min-width: 0; }
.co-card { min-width: 0; }
.co-line { min-width: 0; }

@media (max-width: 860px) {
    /* Quantity stepper and remove were 34px and 12px — the remove button was a
       12x12 hit area, which is not usable with a thumb. */
    .co-qty button { min-width: 44px; height: 44px; font-size: 18px; }
    .co-qty input  { width: 52px; height: 44px; font-size: 16px; }
    .co-line-remove {
        min-width: 44px; min-height: 44px;
        display: inline-flex; align-items: center; justify-content: center;
    }
    .co-line-img { width: 52px; height: 52px; flex-basis: 52px; }
    .co-input, .co-select, .co-textarea { font-size: 16px; min-height: 46px; }  /* no iOS zoom-on-focus */
    .co-pay-option { padding: 14px; }
}

/* ============================================================
   MODERN REFRESH v2 — product cards, toolbar, hero, share modal
   (item_listing.php merchant view + item_listing_shared.php customer view)
   ============================================================ */
:root { --ss-ink: #1b2347; --ss-muted: #7a839c; --ss-line: #e9ecf5; --ss-wa: #25d366; }

/* Cards: softer, taller image, lifted on hover. */
.ss-card {
    border: 1px solid var(--ss-line);
    border-radius: 18px;
    box-shadow: 0 2px 10px rgba(27, 35, 71, .05);
    transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.ss-card:hover { box-shadow: 0 14px 34px rgba(27, 35, 71, .13); transform: translateY(-3px); border-color: #dfe3f3; }
.ss-card > .ss-image-container { border-radius: 18px 18px 0 0; }
.ss-image-container { height: auto; aspect-ratio: 1 / 1; background: linear-gradient(135deg, #f1f3fa, #e8ebf6); }
.ss-image-container::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 38%;
    background: linear-gradient(to top, rgba(15, 20, 50, .18), transparent); pointer-events: none;
}
.ss-badge {
    top: 12px; left: 12px; padding: 5px 10px; border-radius: 999px; z-index: 1;
    background: linear-gradient(135deg, #ff7a45, #ef5417); font-size: 11.5px; letter-spacing: .02em;
    box-shadow: 0 4px 12px rgba(239, 84, 23, .35);
}
.ss-badge-hidden { right: 12px; left: auto; background: rgba(38, 50, 56, .92); box-shadow: none; }
.ss-card-body { padding: 14px 16px 16px; }
.ss-title { color: var(--ss-ink); font-size: 15.5px; font-weight: 700; letter-spacing: -.01em; }
.ss-desc { color: var(--ss-muted); margin-bottom: 12px; }
.ss-pricing { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; margin-bottom: 12px; }
.ss-price { font-size: 21px; font-weight: 800; color: var(--ss-ink); letter-spacing: -.02em; }
.ss-old-price { margin-left: 0; font-size: 13px; opacity: .55; }
/* Sits right under the price, so it borrows back part of the price's bottom gap. */
.ss-save {
    align-self: flex-start; font-size: 11.5px; font-weight: 700; color: #1b8a4b;
    background: #e6f6ec; border-radius: 999px; padding: 3px 9px; margin: -6px 0 12px;
}
/* Browsers without aspect-ratio (Safari < 15) keep a fixed image height. */
@supports not (aspect-ratio: 1 / 1) {
    .ss-image-container { height: 220px; }
}

/* Buttons: pill primary, soft round secondary. */
.ss-btn-cart {
    border-radius: 999px; padding: 11px 14px; font-size: 13.5px;
    background: linear-gradient(135deg, #4a5ccc, #3243a8);
}
.ss-btn-cart:hover { background: linear-gradient(135deg, #3f51b5, #2a3891); }
.ss-btn-cart.backorder { background: #b26a00; }
.ss-btn-cart.sold-out { background: #b9bec9; }
.ss-btn-icon { border-radius: 50%; border-color: var(--ss-line); background: #f7f8fd; color: #55608a; }
.ss-btn-icon:hover { background: #eef1ff; }
.ss-card-menu-list { border: 1px solid var(--ss-line); border-radius: 14px; }

/* Toolbar: result count + sort. */
.ss-toolbar {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    flex-wrap: wrap; margin: 2px 0 16px;
}
.ss-count { font-size: 13.5px; color: var(--ss-muted); }
.ss-count b { color: var(--ss-ink); }
.ss-sort { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ss-muted); }
.ss-sort select {
    border: 1px solid var(--ss-line); background: #fff; color: var(--ss-ink);
    border-radius: 999px; height: 36px; padding: 0 30px 0 14px; font-size: 13px; font-weight: 600;
    outline: none; cursor: pointer; box-shadow: 0 1px 4px rgba(27, 35, 71, .04);
}
.ss-sort select:focus { border-color: var(--ss-primary); }

/* Category tabs: fade-scroll row on phones, no visible scrollbar. */
.ss-cat-tab { background: #fff; border: 1px solid var(--ss-line); color: #4a537a; padding: 8px 18px; }
.ss-cat-tab:hover { background: #f1f3fd; }
.ss-cat-tab.active { background: var(--ss-primary); border-color: var(--ss-primary); color: #fff; box-shadow: 0 6px 14px rgba(63, 81, 181, .28); }
.ss-cat-tabs { scrollbar-width: none; }
.ss-cat-tabs::-webkit-scrollbar { display: none; }

/* Headline + search. */
.ss-main-title { font-size: 26px; font-weight: 800; color: var(--ss-ink); letter-spacing: -.02em; }
.ss-main-sub { font-size: 13.5px; }
.ss-search { border-radius: 999px; border-color: var(--ss-line); box-shadow: 0 4px 16px rgba(27, 35, 71, .06); }
.ss-search:focus-within { border-color: #aab4ee; box-shadow: 0 0 0 4px rgba(63, 81, 181, .12); }

/* Merchant: stat chips under the heading. */
.ss-stats { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 16px; }
.ss-stat {
    display: inline-flex; align-items: center; gap: 8px; background: #fff;
    border: 1px solid var(--ss-line); border-radius: 14px; padding: 9px 14px; font-size: 13px; color: var(--ss-muted);
}
.ss-stat b { font-size: 17px; color: var(--ss-ink); font-weight: 800; }
.ss-stat i, .ss-stat svg { color: var(--ss-primary); }

/* Customer hero: welcome line above the search. */
.ss-hero { padding: 34px 16px 12px; }
.ss-hero-title { text-align: center; font-size: 30px; font-weight: 800; color: var(--ss-ink); letter-spacing: -.02em; margin: 0 0 4px; }
.ss-hero-sub { text-align: center; color: var(--ss-muted); font-size: 14.5px; margin: 0 0 20px; }

/* Share modal (merchant). */
#share-modal .modal-content { border: none; border-radius: 20px; overflow: hidden; box-shadow: 0 30px 80px rgba(15, 20, 50, .35); }
#share-modal .modal-header { border: none; padding: 16px 20px 6px; display: flex; align-items: center; background: #fff; color: var(--ss-ink); }
#share-modal .modal-title { font-weight: 800; color: var(--ss-ink); font-size: 18px; flex: 1; padding-right: 10px; }
#share-modal .close { font-size: 26px; opacity: .5; }
.ss-share-img { margin: 6px 20px 0; border-radius: 14px; overflow: hidden; background: #f1f3fa; max-height: 260px; }
.ss-share-img img { width: 100%; max-height: 260px; object-fit: cover; display: block; }
.ss-share-body { padding: 16px 20px 20px; }
.ss-share-label { font-size: 12px; font-weight: 700; color: var(--ss-muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 6px; }
.ss-share-body select.form-control { height: 44px; border-radius: 12px; border-color: var(--ss-line); margin-bottom: 14px; }
.ss-share-row { display: flex; gap: 10px; }
.ss-share-wa, .ss-share-copy {
    flex: 1; height: 46px; border: none; border-radius: 999px; font-weight: 700; font-size: 14px; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.ss-share-wa { background: var(--ss-wa); color: #fff; box-shadow: 0 8px 20px rgba(37, 211, 102, .35); }
.ss-share-wa:hover { background: #1fb858; }
.ss-share-copy { background: #eef1ff; color: var(--ss-primary); }
.ss-share-copy:hover { background: #e1e6fd; }

@media (max-width: 575px) {
    .ss-image-container { aspect-ratio: 4 / 3; }
    .ss-main-title { font-size: 22px; }
    .ss-hero-title { font-size: 24px; }
    .ss-price { font-size: 20px; }
    .ss-btn-cart { padding: 13px 14px; }
    .ss-toolbar { margin-bottom: 12px; }
}
@media (prefers-reduced-motion: reduce) {
    .ss-card, .ss-image-container img { transition: none; }
    .ss-card:hover { transform: none; }
}

/* Product grid sized by the space the main column actually has, not the window:
   Bootstrap's col-lg-3 counted the viewport, so beside the 240px sidebar a 1024px
   window got 149px cards and a wrapped "Share" button. */
.ss-main > #item-list-1 {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px; margin: 0 0 8px;
}
.ss-main > #item-list-1 > [class*="col-"] { flex: none; width: auto; max-width: none; padding: 0; margin: 0 !important; }
/* The Loading… / "No items" message is a .col-12.text-center; product columns are col-12 too. */
.ss-main > #item-list-1 > .col-12.text-center { grid-column: 1 / -1; }
.ss-btn-cart { white-space: nowrap; min-width: 0; }
@media (max-width: 575px) { .ss-main > #item-list-1 { gap: 16px; } }
/* The "No image available" placeholder is a picture of words: never crop it. */
.ss-image-container img[src$="noImagePNG.png"] { object-fit: contain; padding: 16%; opacity: .6; }
.ss-card:hover .ss-image-container img[src$="noImagePNG.png"] { transform: none; }
/* The page wrapper (.container-fluid) already pads 24px; the shell's own 16px on top
   left phones with 40px gutters and a 295px card on a 375px screen. */
@media (max-width: 575px) { .ss-shell { padding-left: 0; padding-right: 0; } }
/* Stacked (≤860px) the shell's align-items:flex-start sized .ss-main to its content,
   and the search input's intrinsic width pushed the merchant page to 417px on a
   375px phone. Stretch the column and let the input shrink. */
@media (max-width: 860px) {
    .ss-shell { align-items: stretch; }
    .ss-main { width: 100%; }
}
.ss-search input { min-width: 0; }
/* Phones: keep the three stat chips on one line. */
@media (max-width: 575px) {
    .ss-stats { gap: 6px; flex-wrap: nowrap; }
    .ss-stat { padding: 7px 9px; gap: 5px; font-size: 12px; flex: 1 1 0; min-width: 0; justify-content: center; white-space: nowrap; }
    .ss-stat b { font-size: 15px; }
}
/* Narrow cards (3 across beside the sidebar at 1024px) left "Add to Cart" 83px of the
   110px it needs. The eye button only repeats what the photo and the title already do
   (open the item), so it gives way first. Browsers without container queries keep it,
   and the ellipsis below stops the label spilling out of the pill. */
.ss-card-body { container-type: inline-size; }
@container (max-width: 250px) {
    .ss-actions a.ss-btn-icon[title="View details"] { display: none; }
    .ss-actions { gap: 6px; }
    .ss-btn-cart { padding-left: 8px; padding-right: 8px; font-size: 12.5px; }
    /* "Place Back Order" is the longest label; its amber colour already marks it. */
    .ss-btn-cart.backorder svg, .ss-btn-cart.backorder i { display: none; }
}
.ss-btn-cart { overflow: hidden; text-overflow: ellipsis; }

/* ======================================================================
   Promotions, deals, coupons, sale alerts (migration 136, phase 159)
   ====================================================================== */
.ss-deal-ribbon {
    position: absolute;
    bottom: 10px;
    left: 10px;
    background: #1b8a4b;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 999px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
    max-width: calc(100% - 20px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ss-promo-note {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 6px 0 2px;
    font-size: 12px;
}
.ss-promo-note.detail { margin: 10px 0 4px; font-size: 13px; }
.ss-countdown {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #b3261e;
    background: #fdecea;
    border-radius: 999px;
    padding: 2px 9px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.ss-countdown.ended { color: #6b7280; background: #f1f2f5; }
.ss-promo-left, .ss-promo-limit, .ss-promo-name, .ss-promo-deal {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-radius: 999px;
    padding: 2px 9px;
    font-weight: 600;
}
.ss-promo-left { color: #8a4b00; background: #fff3e0; }
.ss-promo-limit { color: #455066; background: #eef0f5; }
.ss-promo-name { color: var(--ss-primary); background: #eef0fc; }
.ss-promo-deal { color: #1b6b3d; background: #e3f5ea; }

/* Offers strip above the grid */
.ss-offers {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 2px 2px 12px;
    margin-bottom: 6px;
    scrollbar-width: thin;
}
.ss-offer-chip {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: left;
    border: 1px solid #f3c7b5;
    background: linear-gradient(135deg, #fff7f3, #fff);
    color: #1c2230;
    border-radius: 12px;
    padding: 9px 14px;
    cursor: pointer;
    min-width: 170px;
    max-width: 260px;
}
.ss-offer-chip:hover { border-color: var(--ss-accent); }
.ss-offer-chip.on { border-color: var(--ss-accent); box-shadow: 0 0 0 2px rgba(239, 84, 23, .25); }
.ss-offer-chip .t { font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-offer-chip .d { color: var(--ss-accent); font-weight: 700; font-size: 13px; }
.ss-offer-chip .ss-countdown { align-self: flex-start; font-size: 11px; margin-top: 3px; }
.ss-offer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    background: #fff7f3;
    border: 1px solid #f3c7b5;
    border-radius: 12px;
    padding: 10px 14px;
    margin-bottom: 14px;
}
.ss-offer-head b { font-size: 15px; }
.ss-offer-head button { border: none; background: none; color: var(--ss-primary); font-weight: 600; cursor: pointer; }

/* "Tell me when it's on sale" */
.ss-alert-box {
    margin-top: 16px;
    border: 1px dashed #c9cfe0;
    border-radius: 12px;
    padding: 12px 14px;
    background: #fafbff;
}
.ss-alert-box .h { font-weight: 700; font-size: 14px; margin-bottom: 4px; }
.ss-alert-box .s { font-size: 12.5px; color: #5a6478; margin-bottom: 8px; }
.ss-alert-box .row-in { display: flex; gap: 8px; flex-wrap: wrap; }
.ss-alert-box input { flex: 1 1 160px; min-width: 0; border: 1px solid #d6dae5; border-radius: 8px; padding: 8px 10px; font-size: 14px; }
.ss-alert-box button { border: none; background: var(--ss-primary); color: #fff; border-radius: 8px; padding: 8px 14px; font-weight: 600; cursor: pointer; }
.ss-alert-box .msg { font-size: 12.5px; margin-top: 6px; }

/* Cart / checkout: deal notes and the coupon box */
.co-line-notes { font-size: 12px; color: #1b6b3d; margin-top: 2px; }
.co-line-was { font-size: 12px; color: #8a93a6; text-decoration: line-through; margin-left: 6px; }
.co-total-row.save { color: #1b6b3d; }
.co-coupon { margin: 10px 0 4px; }
.co-coupon .row-in { display: flex; gap: 8px; }
.co-coupon input { flex: 1; min-width: 0; border: 1px solid #d6dae5; border-radius: 8px; padding: 8px 10px; text-transform: uppercase; font-size: 14px; }
.co-coupon button { border: 1px solid var(--ss-primary); background: #fff; color: var(--ss-primary); border-radius: 8px; padding: 8px 12px; font-weight: 600; cursor: pointer; }
.co-coupon .msg { font-size: 12.5px; margin-top: 5px; }
.co-coupon .msg.ok { color: #1b6b3d; }
.co-coupon .msg.err { color: #b3261e; }
.co-review-item > span:last-child { white-space: nowrap; text-align: right; }
.co-review-item .co-line-was { display: block; margin-left: 0; }