/* =============================================================================
   HOME CONTENT GRID
   Sidebar is 420px — matches the hero featured-card column width on the right.
   ============================================================================= */

.hcg-wrap {
    width: 100%;
}

.hcg-inner {
    display: grid;
    grid-template-columns: 1fr 420px;   /* wider sidebar, matches hero right col */
    gap: 0 36px;
    align-items: start;
}

.hcg-main {
    min-width: 0;
}

.hcg-sidebar {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: sticky;
    top: calc(var(--header-height, 70px) + 20px);
	margin-top: 20px;
}

/* =============================================================================
   SIDEBAR WIDGET SHELL
   ============================================================================= */

.sb-widget {
    padding: 20px 22px 24px;
}

.sb-widget__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 18px;
}

.sb-widget__title {
    font-size: 16px;
    font-weight: 800;
    color: var(--text, #e8eefc);
    display: flex;
    align-items: center;
    gap: 8px;
    line-height: 1;
}

html[data-theme="light"] .sb-widget__title {
    color: #0f172a;
}

.sb-empty {
    padding: 16px 0;
    font-size: 13px;
    color: #6b7fa0;
    text-align: center;
}

/* =============================================================================
   TRENDING DEALS  —  compact rows: image + name + price + badge
   FIX: price = #facc15 yellow (matches product cards site-wide)
   FIX: badge forced green — a discount is good news
   ============================================================================= */

.sb-drops {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.sb-drops__item {
    display: grid;
    grid-template-columns: 62px 1fr;
    gap: 14px;
    align-items: center;
    padding: 13px 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    text-decoration: none;
    transition: opacity .15s ease;
    position: relative;
}

html[data-theme="light"] .sb-drops__item {
    border-bottom-color: rgba(148, 163, 184, 0.13);
}

.sb-drops__item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.sb-drops__item:first-child {
    padding-top: 0;
}

.sb-drops__item:hover { opacity: .82; }

.sb-drops__thumb {
    width: 62px;
    height: 62px;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,0.07);
    flex-shrink: 0;
}

html[data-theme="light"] .sb-drops__thumb {
    background: #fff;
    border-color: rgba(148,163,184,0.14);
}

.sb-drops__img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 4px;
}

.sb-drops__img-placeholder { font-size: 22px; opacity: .35; }

.sb-drops__body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.sb-drops__name {
    font-size: 13px;
    font-weight: 800;
    color: var(--text, #e8eefc);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

html[data-theme="light"] .sb-drops__name { color: #0f172a; }

.sb-drops__sub {
    font-size: 11px;
    color: #5c6e8a;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sb-drops__price-row {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
    margin-top: 3px;
}

/* FIX: matches product-card__price which is #facc15 across the whole site */
.sb-drops__price {
    font-size: 15px;
    font-weight: 800;
    color: #facc15;
    line-height: 1;
}


.sb-drops__old {
    font-size: 11px;
    color: #5c6e8a;
    text-decoration: line-through;
    font-weight: 600;
}

/*
 * FIX: discount badge is GREEN (not red).
 * Mirrors .badge-green from base.css exactly, just tighter sizing.
 */
.sb-drops__badge {
    font-size: 11px !important;
    padding: 3px 8px !important;
    min-height: 20px !important;
    line-height: 1 !important;
    border-radius: 6px !important;
    color: #4ade80 !important;
    background: rgba(34, 197, 94, 0.12) !important;
    border: 1px solid rgba(34, 197, 94, 0.22) !important;
}

html[data-theme="light"] .sb-drops__badge {
    color: #16a34a !important;
    background: rgba(34, 197, 94, 0.10) !important;
    border-color: rgba(34, 197, 94, 0.28) !important;
}

/* =============================================================================
   BROWSE BY THEME  — circular avatar grid, 4 across
   FIX: object-fit: cover so images fill the full circle (no letterboxing)
   ============================================================================= */

.sb-themes__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px 8px;
}

.sb-themes__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    text-decoration: none;
    text-align: center;
}

.sb-themes__circle {
    width: 74px;
    height: 74px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid rgba(255,255,255,0.09);
    background: #fff;
    display: grid;
    place-items: center;
    transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
    flex-shrink: 0;
}

html[data-theme="light"] .sb-themes__circle {
    border-color: rgba(148, 163, 184, 0.20);
    background: rgba(15,23,42,0.04);
}

.sb-themes__item:hover .sb-themes__circle {
    border-color: rgba(250, 204, 21, 0.55);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.24);
}

/* FIX: cover fills the circle so there's no white padding around the image */
.sb-themes__img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
}

.sb-themes__img-placeholder {
    font-size: 24px;
    font-weight: 900;
    color: #facc15;
}

.sb-themes__name {
    font-size: 11px;
    font-weight: 800;
    color: var(--text, #e8eefc);
    line-height: 1.2;
    word-break: break-word;
    max-width: 100%;
}

html[data-theme="light"] .sb-themes__name { color: #0f172a; }

.sb-themes__count {
    font-size: 10px;
    color: #5c6e8a;
    font-weight: 600;
    margin-top: -3px;
    line-height: 1;
}

/* =============================================================================
   RETIRING SOON — list rows with coloured progress bar
   FIX colour tiers (use site palette tokens from base.css):
     < 10 days  → red    #fb7185  (badge-red text colour)
     10–29 days → orange #fb923c
     30+ days   → green  #4ade80  (badge-green text colour)
   ============================================================================= */

.sb-retiring {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.sb-retiring__item {
    display: grid;
    grid-template-columns: 52px 1fr;
    gap: 13px;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    text-decoration: none;
    transition: opacity .15s ease;
}

html[data-theme="light"] .sb-retiring__item {
    border-bottom-color: rgba(148, 163, 184, 0.13);
}

.sb-retiring__item:last-child { border-bottom: none; padding-bottom: 0; }
.sb-retiring__item:first-child { padding-top: 0; }
.sb-retiring__item:hover { opacity: .82; }

.sb-retiring__thumb {
    width: 52px;
    height: 52px;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    border: 1px solid rgba(255,255,255,0.07);
}

html[data-theme="light"] .sb-retiring__thumb {
    background: #fff;
    border-color: rgba(148,163,184,0.14);
}

.sb-retiring__img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 3px;
}

.sb-retiring__img-placeholder { font-size: 20px; opacity: .35; }

.sb-retiring__info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.sb-retiring__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.sb-retiring__number {
    font-size: 11px;
    font-weight: 700;
    color: #5c6e8a;
    line-height: 1;
    white-space: nowrap;
}

.sb-retiring__label {
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
    line-height: 1;
}

/* FIX: three tiers matching site palette */
.sb-retiring__label--critical { color: #fb7185; }   /* < 10 days  — badge-red   */
.sb-retiring__label--warning  { color: #fb923c; }   /* 10–29 days — amber       */
.sb-retiring__label--safe     { color: #4ade80; }   /* 30+ days   — badge-green */

/* Bar fill colours match label tiers (set inline by PHP) */

.sb-retiring__name {
    font-size: 13px;
    font-weight: 700;
    color: var(--text, #e8eefc);
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

html[data-theme="light"] .sb-retiring__name { color: #0f172a; }

.sb-retiring__bar-track {
    height: 3px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

html[data-theme="light"] .sb-retiring__bar-track {
    background: rgba(15, 23, 42, 0.08);
}

/* colour + width set inline via style attr by PHP */
.sb-retiring__bar-fill {
    height: 100%;
    border-radius: 999px;
    transition: width .4s ease;
}

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

@media (max-width: 1400px) {
    .hcg-inner {
        grid-template-columns: 1fr 380px;
        gap: 0 28px;
    }
}

@media (max-width: 1100px) {
    .hcg-inner {
        grid-template-columns: 1fr 340px;
        gap: 0 24px;
    }
    .sb-themes__circle { width: 62px; height: 62px; }
}

@media (max-width: 900px) {
    .hcg-inner { grid-template-columns: 1fr; }
    .hcg-sidebar {
        position: static;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
}

@media (max-width: 580px) {
    .hcg-sidebar { grid-template-columns: 1fr; }
}
/* =============================================================================
   SIDEBAR WIDGET — actions group (view-all link, right of title)
   ============================================================================= */

.sb-widget__actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* =============================================================================
   LATEST REVIEWS — compact rows: image + name + stars + author + date
   ============================================================================= */

.sb-reviews {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.sb-reviews__item {
    display: grid;
    grid-template-columns: 52px 1fr;
    gap: 13px;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    text-decoration: none;
    transition: opacity .15s ease;
}

html[data-theme="light"] .sb-reviews__item {
    border-bottom-color: rgba(148, 163, 184, 0.13);
}

.sb-reviews__item:last-child { border-bottom: none; padding-bottom: 0; }
.sb-reviews__item:first-child { padding-top: 0; }
.sb-reviews__item:hover { opacity: .82; }

.sb-reviews__thumb {
    width: 52px;
    height: 52px;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    border: 1px solid rgba(255,255,255,0.07);
}

html[data-theme="light"] .sb-reviews__thumb {
    background: #fff;
    border-color: rgba(148,163,184,0.14);
}

.sb-reviews__img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 3px;
}

.sb-reviews__img-placeholder { font-size: 20px; opacity: .35; }

.sb-reviews__body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sb-reviews__name {
    font-size: 13px;
    font-weight: 700;
    color: var(--text, #e8eefc);
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

html[data-theme="light"] .sb-reviews__name { color: #0f172a; }

.sb-reviews__meta-row {
    display: flex;
    align-items: center;
    gap: 7px;
}

.sb-reviews__stars-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.sb-reviews__stars {
    display: flex;
    gap: 1px;
    line-height: 1;
}

.sb-reviews__star {
    font-size: 12px;
    line-height: 1;
}

.sb-reviews__star--full  { color: #facc15; }
.sb-reviews__star--empty { color: rgba(255,255,255,0.15); }

html[data-theme="light"] .sb-reviews__star--empty { color: rgba(15,23,42,0.15); }

.sb-reviews__verified {
    font-size: 10px;
    font-weight: 700;
    color: #4ade80;
    line-height: 1;
}

.sb-reviews__title {
    font-size: 11px;
    font-weight: 600;
    color: #94a3b8;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

html[data-theme="light"] .sb-reviews__title { color: #475569; }

.sb-reviews__meta {
    display: flex;
    align-items: center;
    gap: 6px;
}

.sb-reviews__author {
    font-size: 11px;
    font-weight: 600;
    color: #5c6e8a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sb-reviews__date {
    font-size: 10px;
    color: #4a5568;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
}
.sb-retiring__bar-track {
    position: relative;
    height: 4px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.08);
    overflow: hidden;
    margin-top: 2px;
}

html[data-theme="dark"] .sb-retiring__bar-track {
    background: rgba(255, 255, 255, 0.10);
}

.sb-retiring__bar-fill {
    display: block;
    height: 100%;
    min-width: 8px;
    border-radius: 999px;
    transition: width .35s ease;
}

.sb-retiring__bar-fill--critical {
    background: #fb7185;
}

.sb-retiring__bar-fill--warning {
    background: #fb923c;
}

.sb-retiring__bar-fill--safe {
    background: #4ade80;
}