/* ---------------------------------------------------------------
   Gadgetize — application styles.
   Layered on top of the template's app.css. Everything here exists
   because the dynamic store needs UI the static template did not:
   badges, filter chips, timelines, empty states, toasts.
   --------------------------------------------------------------- */

:root {
    --gdz-primary: #006937;
    --gdz-secondary: #DD3842;
    --gdz-accent: #ffe603;
    --gdz-ink: #171a1f;
    --gdz-muted: #6b7280;
    --gdz-line: #e5e7eb;
    --gdz-surface: #f6f7f9;
}

/* Cart and wishlist counters in the header ---------------------- */
.badge-count {
    position: absolute;
    top: -6px;
    right: -8px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--gdz-secondary);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    line-height: 18px;
    text-align: center;
}

/* Search suggestions -------------------------------------------- */
.search-suggest {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 60;
    background: #fff;
    border: 1px solid var(--gdz-line);
    border-radius: 12px;
    box-shadow: 0 18px 40px rgba(15, 23, 42, .12);
    overflow: hidden;
    display: none;
}
.search-suggest.is-open { display: block; }
.search-suggest a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--gdz-line);
}
.search-suggest a:last-child { border-bottom: 0; }
.search-suggest a:hover { background: var(--gdz-surface); }
.search-suggest img { width: 44px; height: 44px; object-fit: contain; }
.search-suggest .name { font-weight: 500; color: var(--gdz-ink); }
.search-suggest .price { margin-left: auto; font-weight: 600; color: var(--gdz-primary); }

/* Product cards -------------------------------------------------- */
.featured-product-card { height: 100%; display: flex; flex-direction: column; padding: 16px; }
.featured-product-card .image-box { position: relative; text-align: center; }
.featured-product-card .product-image { max-height: 220px; object-fit: contain; }
.featured-product-card .product-desc { display: flex; flex-direction: column; flex-grow: 1; }
.featured-product-card .product-desc > form,
.featured-product-card .product-desc > a.cus-btn-2 { margin-top: auto; }
.featured-product-card .sale-label.bg-dark { background: var(--gdz-ink); }

.featured-product-card.is-list { flex-direction: row; gap: 24px; align-items: center; }
.featured-product-card.is-list .image-box { flex: 0 0 260px; margin-bottom: 0 !important; }
.featured-product-card.is-list .product-desc { flex: 1; }

.side-icons a.is-active img { filter: none; }
.side-icons a.is-active { background: var(--gdz-secondary); border-radius: 50%; }

.disabled-btn { opacity: .5; pointer-events: none; }

/* Filters --------------------------------------------------------- */
.filter-chip {
    display: inline-block;
    padding: 5px 12px;
    border: 1px solid var(--gdz-line);
    border-radius: 999px;
    font-size: 13px;
    color: var(--gdz-muted);
    transition: all .18s ease;
}
.filter-chip:hover { border-color: var(--gdz-primary); color: var(--gdz-primary); }

.view-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--gdz-line);
    border-radius: 8px;
    color: var(--gdz-muted);
}
.view-btn.is-active { background: var(--gdz-primary); border-color: var(--gdz-primary); color: #fff; }

.filter-panel .form-control,
.filter-panel .form-select { height: 42px; }

/* Product detail -------------------------------------------------- */
.gallery-main {
    background: var(--gdz-surface);
    padding: 32px;
    text-align: center;
    position: relative;
    min-height: 380px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.gallery-main img { max-height: 380px; object-fit: contain; }
.gallery-thumb {
    width: 84px;
    height: 84px;
    padding: 8px;
    background: var(--gdz-surface);
    border: 2px solid transparent;
    border-radius: 10px;
    cursor: pointer;
}
.gallery-thumb img { width: 100%; height: 100%; object-fit: contain; }
.gallery-thumb.is-active { border-color: var(--gdz-primary); }

.stock-pill { padding: 4px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; }
.stock-pill.in-stock { background: rgba(0, 105, 55, .1); color: var(--gdz-primary); }
.stock-pill.out-stock { background: rgba(221, 56, 66, .1); color: var(--gdz-secondary); }

.icon-action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--gdz-muted);
    font-weight: 500;
}
.icon-action:hover, .icon-action.is-active { color: var(--gdz-secondary); }

.rating-bar { height: 8px; background: var(--gdz-line); border-radius: 999px; overflow: hidden; }
.rating-bar span { display: block; height: 100%; background: var(--gdz-accent); }

.review-avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }

.spec-table th { background: var(--gdz-surface); font-weight: 500; }
.post-body h4 { margin: 24px 0 12px; color: var(--gdz-ink); }
.post-body p { margin-bottom: 16px; }

/* Cart and checkout ----------------------------------------------- */
.cart-thumb { width: 72px; height: 72px; object-fit: contain; background: var(--gdz-surface); border-radius: 10px; }
.cart-table th { font-weight: 600; color: var(--gdz-ink); border-bottom: 1px solid var(--gdz-line); }
.summary-box { position: sticky; top: 24px; }

.method-option {
    border: 1px solid var(--gdz-line);
    border-radius: 12px;
    padding: 14px 16px;
    cursor: pointer;
    transition: border-color .18s ease;
}
.method-option:has(input:checked) { border-color: var(--gdz-primary); background: rgba(0, 105, 55, .04); }

.btn-icon { border: 0; background: transparent; color: var(--gdz-muted); padding: 4px; }
.btn-icon:hover { color: var(--gdz-secondary); }

.success-check {
    width: 68px;
    height: 68px;
    margin: 0 auto;
    border-radius: 50%;
    background: rgba(0, 105, 55, .1);
    color: var(--gdz-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
}

/* Order timeline --------------------------------------------------- */
.order-timeline { position: relative; padding-left: 8px; }
.timeline-item { position: relative; padding-left: 26px; padding-bottom: 20px; }
.timeline-item:not(:last-child)::before {
    content: '';
    position: absolute;
    left: 6px;
    top: 16px;
    bottom: 0;
    width: 2px;
    background: var(--gdz-line);
}
.timeline-dot {
    position: absolute;
    left: 0;
    top: 5px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 3px solid #fff;
    box-shadow: 0 0 0 2px currentColor;
}

/* Account ----------------------------------------------------------- */
.account-nav a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    color: var(--gdz-muted);
    font-weight: 500;
}
.account-nav a:hover { background: var(--gdz-surface); color: var(--gdz-ink); }
.account-nav a.is-active { background: rgba(0, 105, 55, .08); color: var(--gdz-primary); }

/* Blog --------------------------------------------------------------- */
.blog-card { overflow: hidden; }
.blog-card .image-box img { height: 220px; object-fit: cover; transition: transform .4s ease; }
.blog-card:hover .image-box img { transform: scale(1.04); }

/* Breadcrumb --------------------------------------------------------- */
.inner-banner { background: var(--gdz-surface); }
.breadcrumb-item + .breadcrumb-item::before { color: var(--gdz-muted); }

/* Pagination --------------------------------------------------------- */
.pagination .page-link {
    border: 1px solid var(--gdz-line);
    border-radius: 10px;
    color: var(--gdz-ink);
    min-width: 42px;
    text-align: center;
}
.pagination .page-item.active .page-link {
    background: var(--gdz-primary);
    border-color: var(--gdz-primary);
    color: #fff;
}

/* Toasts ------------------------------------------------------------- */
#gdzToasts {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.gdz-toast {
    background: var(--gdz-ink);
    color: #fff;
    padding: 12px 18px;
    border-radius: 10px;
    font-size: 14px;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .25);
    animation: gdzToastIn .22s ease;
}
.gdz-toast.is-error { background: var(--gdz-secondary); }
@keyframes gdzToastIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
    .gdz-toast, .blog-card .image-box img { animation: none; transition: none; }
}

@media (max-width: 767px) {
    .featured-product-card.is-list { flex-direction: column; }
    .featured-product-card.is-list .image-box { flex: none; width: 100%; }
    .summary-box { position: static; }
}