/*
 * U-HIV premium visual layer
 * Loaded last, keeps Django templates and shop logic intact.
 */

:root {
    --premium-ink: #111827;
    --premium-muted: #667085;
    --premium-line: #d9e2ea;
    --premium-surface: #ffffff;
    --premium-surface-soft: #f6f8f9;
    --premium-accent: #0f766e;
    --premium-accent-dark: #115e59;
    --premium-accent-soft: #e6f4f1;
    --premium-gold: #b7791f;
    --premium-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
    --premium-shadow-soft: 0 4px 14px rgba(15, 23, 42, 0.06);
    --premium-radius: 8px;
}

html,
body {
    background: linear-gradient(180deg, #f8fafb 0%, #eef4f3 42%, #f7f8f6 100%) !important;
    color: var(--premium-ink);
    letter-spacing: 0;
}

.loading-overlay { background: #f8fafb !important; }

#catalog-header,
.header .fixed.top-0,
.fixed.top-0.left-0.w-full.bg-white {
    background: rgba(255, 255, 255, 0.92) !important;
    border-bottom: 1px solid rgba(17, 24, 39, 0.08) !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.07) !important;
    backdrop-filter: saturate(1.25) blur(18px);
    -webkit-backdrop-filter: saturate(1.25) blur(18px);
}

#catalog-header .container { max-width: 980px; }

#page-title,
.header h1,
#catalog-header h1 {
    color: var(--premium-ink) !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
}

#back-arrow a,
.back-button,
.cart-icon-container {
    background: #f3f6f6 !important;
    border: 1px solid rgba(17, 24, 39, 0.08) !important;
    border-radius: var(--premium-radius) !important;
    box-shadow: none !important;
}

.cart-icon-container svg path { fill: var(--premium-ink) !important; }
.back-button svg { color: var(--premium-ink) !important; }

.cart-badge {
    background: var(--premium-accent) !important;
    color: #fff !important;
    border: 2px solid #fff !important;
    box-shadow: 0 4px 10px rgba(15, 118, 110, 0.24) !important;
}

#content-container {
    background: transparent !important;
    max-width: 980px;
    min-height: 100vh;
}

.catalog-results-count {
    color: var(--premium-muted) !important;
    font-size: 0.78rem !important;
    font-weight: 500 !important;
}

.catalog-search-tabs {
    background: transparent !important;
    border-bottom: 0 !important;
    padding-bottom: 12px !important;
}

.search-field-wrapper {
    background: var(--premium-surface) !important;
    border: 1px solid var(--premium-line) !important;
    border-radius: var(--premium-radius) !important;
    box-shadow: var(--premium-shadow-soft) !important;
    overflow: hidden;
}

.search-field-input {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: var(--premium-ink) !important;
    font-weight: 500 !important;
    box-shadow: none !important;
}

.search-field-input:focus { box-shadow: inset 0 0 0 1px var(--premium-accent) !important; }
.search-field-input::placeholder { color: #8a97a3 !important; }
.search-submit-btn { color: var(--premium-accent) !important; }

.catalog-tabs {
    margin-top: 10px !important;
    padding: 4px !important;
    background: #e9efee !important;
    border: 1px solid rgba(17, 24, 39, 0.06) !important;
    border-radius: var(--premium-radius) !important;
}

.catalog-tab {
    min-height: 38px !important;
    padding: 0 10px !important;
    color: var(--premium-muted) !important;
    border-radius: 6px !important;
    font-size: 0.92rem !important;
    font-weight: 600 !important;
}

.catalog-tab[aria-pressed="true"] { color: var(--premium-ink) !important; }

.tab-indicator {
    top: 4px !important;
    bottom: auto !important;
    height: calc(100% - 8px) !important;
    width: calc(50% - 4px) !important;
    background: #fff !important;
    border: 1px solid rgba(17, 24, 39, 0.06) !important;
    border-radius: 6px !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08) !important;
}

#content-container .grid.grid-cols-1 > a {
    position: relative;
    min-height: 72px;
    background: var(--premium-surface) !important;
    border: 1px solid rgba(17, 24, 39, 0.08) !important;
    border-radius: var(--premium-radius) !important;
    box-shadow: var(--premium-shadow-soft) !important;
    color: var(--premium-ink) !important;
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

#content-container .grid.grid-cols-1 > a::before {
    content: "";
    width: 6px;
    align-self: stretch;
    margin: -1rem 12px -1rem -1rem;
    background: var(--premium-accent);
    border-radius: 8px 0 0 8px;
}

#content-container .grid.grid-cols-1 > a:nth-child(2n)::before { background: #1d4ed8; }
#content-container .grid.grid-cols-1 > a:nth-child(3n)::before { background: var(--premium-gold); }

#content-container .grid.grid-cols-1 > a:hover,
#content-container .grid.grid-cols-1 > a:focus {
    transform: translateY(-1px);
    border-color: rgba(15, 118, 110, 0.25) !important;
    box-shadow: var(--premium-shadow) !important;
}

#content-container .grid.grid-cols-1 > a span {
    font-size: 1rem !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
}

#content-container .grid.grid-cols-1 > a svg { color: var(--premium-accent) !important; }

#content-container .grid.grid-cols-2 > a,
#content-container .grid.md\:grid-cols-3 > a,
#content-container a.block.bg-white.rounded-lg {
    background: var(--premium-surface) !important;
    border: 1px solid rgba(17, 24, 39, 0.08) !important;
    border-radius: var(--premium-radius) !important;
    box-shadow: var(--premium-shadow-soft) !important;
    overflow: hidden !important;
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease !important;
}

#content-container .grid.grid-cols-2 > a:hover,
#content-container .grid.md\:grid-cols-3 > a:hover,
#content-container a.block.bg-white.rounded-lg:hover {
    transform: translateY(-2px);
    border-color: rgba(15, 118, 110, 0.24) !important;
    box-shadow: var(--premium-shadow) !important;
}

#content-container a.block.bg-white.rounded-lg .aspect-square {
    background: #eef3f2 !important;
    border-radius: 0 !important;
}

#content-container a.block.bg-white.rounded-lg img { border-radius: 0 !important; }

#content-container a.block.bg-white.rounded-lg .px-4 {
    padding: 12px !important;
    text-align: left !important;
}

#content-container a.block.bg-white.rounded-lg h2 {
    min-height: 40px;
    color: var(--premium-ink) !important;
    font-size: 0.92rem !important;
    line-height: 1.32 !important;
    font-weight: 700 !important;
}

#content-container a.block.bg-white.rounded-lg p {
    color: var(--premium-muted) !important;
    font-size: 0.78rem !important;
    line-height: 1.4 !important;
}

#content-container a.block.bg-white.rounded-lg span.text-lg {
    display: inline-flex !important;
    align-items: center;
    margin-top: 10px !important;
    padding: 6px 9px;
    background: var(--premium-accent-soft);
    color: var(--premium-accent-dark) !important;
    border-radius: 6px;
    font-size: 1rem !important;
    font-weight: 800 !important;
}

.scrollable-content { background: transparent !important; }
.scrollable-content > .w-full.relative { background: #eef3f2 !important; }
.scrollable-content > .w-full.relative > .relative { max-height: 62vh; }
.scrollable-content .container.mx-auto { max-width: 760px; }

.scrollable-content h2.text-lg {
    margin-top: 18px !important;
    color: var(--premium-ink) !important;
    font-size: 1.35rem !important;
    line-height: 1.25 !important;
    font-weight: 800 !important;
}

#selected-price,
.price-display {
    color: var(--premium-accent-dark) !important;
    font-weight: 850 !important;
}

.variant-options-list {
    display: grid !important;
    gap: 8px !important;
}

.variant-option-item {
    background: var(--premium-surface) !important;
    border: 1px solid var(--premium-line) !important;
    border-radius: var(--premium-radius) !important;
    box-shadow: none !important;
}

.variant-option-item.variant-option-active,
.variant-option-item:has(.variant-radio:checked) {
    border-color: var(--premium-accent) !important;
    background: var(--premium-accent-soft) !important;
    box-shadow: 0 0 0 1px rgba(15, 118, 110, 0.16) !important;
}

.variant-option-price {
    color: var(--premium-accent-dark) !important;
    font-weight: 800 !important;
}

.description,
.description-first-ul,
.scrollable-content .bg-gray-100 {
    background: var(--premium-surface) !important;
    border: 1px solid rgba(17, 24, 39, 0.08) !important;
    border-radius: var(--premium-radius) !important;
    box-shadow: var(--premium-shadow-soft) !important;
}

.description,
.description-first-ul { padding: 14px !important; }
.description-header { margin-top: 18px !important; color: var(--premium-ink) !important; }

.footer-add {
    background: rgba(255, 255, 255, 0.94) !important;
    border-top: 1px solid rgba(17, 24, 39, 0.08) !important;
    box-shadow: 0 -12px 28px rgba(15, 23, 42, 0.10) !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.quantity-btn-modern,
.quantity-input-modern,
.share-button {
    border-radius: var(--premium-radius) !important;
    border-color: var(--premium-line) !important;
    background: #f7faf9 !important;
}

.add-to-cart-button,
button.add-to-cart-button,
#add-to-cart.add-to-cart-button,
.fixed-bottom .checkout-button {
    background: var(--premium-accent) !important;
    border-radius: var(--premium-radius) !important;
    box-shadow: 0 8px 18px rgba(15, 118, 110, 0.24) !important;
    font-weight: 800 !important;
}

.add-to-cart-button:hover,
button.add-to-cart-button:hover,
#add-to-cart.add-to-cart-button:hover,
.fixed-bottom .checkout-button:hover {
    background: var(--premium-accent-dark) !important;
}

@media (max-width: 640px) {
    #content-container {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    #content-container .grid.grid-cols-2 { gap: 10px !important; }
    #content-container a.block.bg-white.rounded-lg .px-4 { padding: 10px !important; }
    #content-container a.block.bg-white.rounded-lg h2 { font-size: 0.86rem !important; }
    #content-container a.block.bg-white.rounded-lg span.text-lg { font-size: 0.94rem !important; }
}

/* Keep the pill indicator behind tab labels. */
.catalog-tabs {
    overflow: hidden !important;
}

.catalog-tab {
    z-index: 2 !important;
}

.tab-indicator {
    z-index: 1 !important;
    pointer-events: none !important;
}

/* Product pages: show packaging cleanly instead of cropping it. */
.scrollable-content > .w-full.relative {
    background: #f8fafb !important;
    border-bottom: 1px solid rgba(17, 24, 39, 0.06) !important;
}

.scrollable-content > .w-full.relative > .relative {
    padding-bottom: min(72vw, 430px) !important;
    max-height: 430px !important;
    background: #fff !important;
}

.scrollable-content > .w-full.relative img {
    object-fit: contain !important;
    padding: 24px !important;
}


/* Fixed header spacing for Telegram mobile viewport. */
#content-container {
    padding-top: 196px !important;
}

#content-container > .grid:first-child,
#content-container > .catalog-results-count:first-child {
    margin-top: 10px !important;
}

@media (max-width: 640px) {
    #content-container {
        padding-top: 216px !important;
    }

    #content-container > .grid:first-child,
    #content-container > .catalog-results-count:first-child {
        margin-top: 12px !important;
    }
}