/* ================================================================
   Product Archive Pro — CSS v2
   Reference: 1mg.com Super Saving Deals page
   ================================================================ */

/* ── Variables ─────────────────────────────────────────────────── */
.pap-wrapper {
    --pap-red:        #e84c4c;
    --pap-red-light:  #fef2f2;
    --pap-green:      #02a96c;
    --pap-star:       #f5a623;
    --pap-text:       #1a1a2e;
    --pap-sub:        #666;
    --pap-border:     #e8e8e8;
    --pap-bg:         #f5f5f5;
    --pap-white:      #ffffff;
    --pap-primary:    #e84c4c;    /* overridable from Elementor */
    --pap-radius:     8px;
    --pap-shadow-sm:  0 1px 4px rgba(0,0,0,.06);
    --pap-shadow-md:  0 4px 16px rgba(0,0,0,.10);
    --pap-font:       -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    font-family: var(--pap-font);
    background:  var(--pap-bg);
    padding:     0;
    box-sizing:  border-box;
}
.pap-wrapper *, .pap-wrapper *::before, .pap-wrapper *::after { box-sizing: inherit; }

/* ── Header ─────────────────────────────────────────────────────── */
.pap-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 0 16px;
    gap: 12px;
    flex-wrap: wrap;
}

.pap-page-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--pap-text);
    margin: 0;
    line-height: 1.2;
}

.pap-toolbar {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

/* Pill buttons — exact match to 1mg toolbar */
.pap-toolbar-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    border: 1.5px solid #c8c8c8;
    border-radius: 30px;
    background: var(--pap-white);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--pap-text);
    cursor: pointer;
    white-space: nowrap;
    transition: border-color .18s, background .18s, color .18s;
    position: relative;
    letter-spacing: .01em;
}
.pap-toolbar-pill:hover {
    border-color: var(--pap-primary);
    color: var(--pap-primary);
}
.pap-toolbar-pill svg { flex-shrink: 0; }

/* Active state: filter button turns dark when filters applied — matches 1mg */
.pap-btn-filter.has-active {
    background: #222;
    border-color: #222;
    color: #fff;
}
.pap-btn-filter.has-active svg { stroke: #fff; }

.pap-filter-badge {
    background: var(--pap-primary);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    border-radius: 100px;
    min-width: 17px;
    height: 17px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    margin-left: 2px;
}

/* ── Active filter chips ─────────────────────────────────────────── */
.pap-chips-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-bottom: 14px;
}
.pap-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    background: var(--pap-red-light);
    border: 1px solid #f5c5c5;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--pap-red);
    cursor: pointer;
    transition: background .15s;
}
.pap-chip:hover { background: #fde3e3; }
.pap-chip svg { width: 11px; height: 11px; flex-shrink: 0; }

/* ── Product Grid ────────────────────────────────────────────────── */
.pap-grid {
    display: grid;
    gap: 12px;
}
.pap-cols-2 { grid-template-columns: repeat(2, 1fr); }
.pap-cols-3 { grid-template-columns: repeat(3, 1fr); }
.pap-cols-4 { grid-template-columns: repeat(4, 1fr); }
.pap-cols-5 { grid-template-columns: repeat(5, 1fr); }

/* ── Product Card — matches 1mg exactly ─────────────────────────── */
.pap-card {
    background: var(--pap-white);
    border-radius: var(--pap-radius);
    border: 1px solid var(--pap-border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: box-shadow .22s ease, transform .22s ease;
    cursor: default;
}
.pap-card:hover {
    box-shadow: var(--pap-shadow-md);
    transform: translateY(-2px);
}

/* Image area */
.pap-card-img {
    display: block;
    background: #f9f9f9;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    position: relative;
}
.pap-card-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 8px;
    transition: transform .3s ease;
}
.pap-card:hover .pap-card-img img { transform: scale(1.04); }

/* Card body */
.pap-card-body {
    padding: 10px 12px 8px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.pap-card-title {
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--pap-text);
    text-decoration: none;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.pap-card-title:hover { color: var(--pap-primary); }

.pap-card-sub {
    font-size: 0.72rem;
    color: var(--pap-sub);
    margin: 0;
    line-height: 1.3;
}

/* Star rating row — orange stars matching 1mg */
.pap-rating {
    display: flex;
    align-items: center;
    gap: 1px;
    flex-wrap: wrap;
}
.pap-star {
    width: 14px;
    height: 14px;
    color: var(--pap-star);
    flex-shrink: 0;
}
.pap-star--empty { color: #d8d8d8; }

.pap-rating-val {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--pap-text);
    margin-left: 3px;
}
.pap-rating-cnt {
    font-size: 0.72rem;
    color: var(--pap-sub);
    margin-left: 2px;
}

/* Price row — exact 1mg layout:  ₹46.7  ₹76  39% off */
.pap-price-row {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: auto;
    padding-top: 4px;
}
.pap-price-sale {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--pap-text);
}
.pap-price-regular {
    font-size: 0.75rem;
    color: var(--pap-sub);
    text-decoration: line-through;
}
.pap-price-off {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--pap-primary);
}

/* Card footer with ADD button */
.pap-card-footer {
    padding: 8px 12px 12px;
}
.pap-add-btn {
    display: block;
    width: 100%;
    text-align: center;
    padding: 8px 0;
    border: 1.5px solid var(--pap-primary);
    border-radius: 6px;
    background: transparent;
    color: var(--pap-primary);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: .08em;
    cursor: pointer;
    text-decoration: none;
    transition: background .18s, color .18s;
    position: relative;
    overflow: hidden;
}
.pap-add-btn:hover { background: var(--pap-primary); color: #fff; }
.pap-add-btn.added  { background: var(--pap-primary); color: #fff; }
.pap-add-btn.pap-oos { border-color: #bbb; color: #999; }
.pap-add-btn.pap-oos:hover { background: #f0f0f0; color: #777; }

/* Loading shimmer on btn */
.pap-add-btn.loading::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.4) 50%, transparent 100%);
    background-size: 200% 100%;
    animation: papShimmer .8s infinite;
}
@keyframes papShimmer { to { background-position: -200% 0; } }

/* Empty state */
.pap-empty {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 56px 20px;
    color: #bbb;
    font-size: 0.9rem;
}
.pap-empty p { margin: 0; }

/* Grid loading overlay */
.pap-grid.is-loading {
    pointer-events: none;
    opacity: .5;
    transition: opacity .15s;
}

/* ── Pagination ─────────────────────────────────────────────────── */
.pap-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 24px 0 8px;
}
.pap-pg-btn {
    padding: 8px 20px;
    border: 1.5px solid var(--pap-border);
    border-radius: 6px;
    background: var(--pap-white);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--pap-text);
    cursor: pointer;
    transition: border-color .16s, color .16s;
}
.pap-pg-btn:hover:not(:disabled) { border-color: var(--pap-primary); color: var(--pap-primary); }
.pap-pg-btn:disabled { opacity: .35; cursor: not-allowed; }
.pap-pg-info { font-size: 0.85rem; color: var(--pap-sub); }

/* ── Shared modal base ──────────────────────────────────────────── */
.pap-modal {
    position: fixed;
    inset: 0;
    z-index: 1000000;
    display: flex;
}
.pap-modal[hidden] { display: none !important; }

.pap-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.5);
    animation: papFadeIn .2s ease;
    cursor: pointer;
}
@keyframes papFadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ── Sort sheet (bottom on mobile, bottom-center on desktop) ───── */
.pap-sort-modal {
    align-items: flex-end;
    justify-content: center;
}

.pap-sort-sheet {
    position: relative;
    z-index: 1;
    background: var(--pap-white);
    width: 100%;
    max-width: 540px;
    border-radius: 16px 16px 0 0;
    animation: papSlideUp .22s cubic-bezier(.4,0,.2,1);
    overflow: hidden;
}
@keyframes papSlideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }

.pap-sheet-handle {
    width: 40px;
    height: 4px;
    background: #ddd;
    border-radius: 2px;
    margin: 10px auto 4px;
}

.pap-sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px 12px;
    border-bottom: 1px solid var(--pap-border);
}
.pap-sheet-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--pap-text);
}
.pap-close-btn {
    width: 30px;
    height: 30px;
    border: none;
    background: #f0f0f0;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--pap-text);
    padding: 0;
    transition: background .15s;
}
.pap-close-btn:hover { background: #e0e0e0; }

/* Sort options list */
.pap-sort-options {
    list-style: none;
    margin: 0;
    padding: 6px 0 16px;
}
.pap-sort-item {
    border-bottom: 1px solid var(--pap-border);
}
.pap-sort-item:last-child { border-bottom: none; }
.pap-radio-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 22px;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--pap-text);
    transition: background .12s;
}
.pap-radio-row:hover { background: #fafafa; }
.pap-sort-item.is-selected .pap-radio-row { font-weight: 600; }
.pap-radio-row input[type="radio"] {
    width: 20px;
    height: 20px;
    accent-color: var(--pap-primary);
    cursor: pointer;
    flex-shrink: 0;
    margin: 0;
}

/* ── Filter modal — desktop: centered dialog, mobile: bottom sheet ─ */
.pap-filter-modal {
    align-items: center;
    justify-content: center;
}

.pap-filter-sheet {
    position: relative;
    z-index: 1;
    background: var(--pap-white);
    width: 90%;
    max-width: 660px;
    max-height: 80vh;
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: papScaleIn .2s cubic-bezier(.4,0,.2,1);
    box-shadow: var(--pap-shadow-md);
}
@keyframes papScaleIn {
    from { opacity: 0; transform: scale(.96); }
    to   { opacity: 1; transform: scale(1); }
}

.pap-filter-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px 14px;
    border-bottom: 1px solid var(--pap-border);
    flex-shrink: 0;
}

/* ── Filter body: left nav + right panels ────────────────────────── */
.pap-filter-body {
    display: flex;
    flex: 1;
    overflow: hidden;
    min-height: 0;
}

/* Left nav — mimics 1mg exactly */
.pap-filter-nav {
    width: 145px;
    flex-shrink: 0;
    border-right: 1px solid var(--pap-border);
    overflow-y: auto;
    padding: 6px 0;
    background: #fafafa;
}
.pap-filter-nav-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    text-align: left;
    padding: 13px 16px;
    border: none;
    background: transparent;
    font-size: 0.875rem;
    color: var(--pap-sub);
    cursor: pointer;
    position: relative;
    transition: color .14s, background .14s;
    line-height: 1.3;
}
.pap-filter-nav-btn:hover { color: var(--pap-text); background: #f0f0f0; }

/* Active tab: bold text, left red border, white bg */
.pap-filter-nav-btn.is-active {
    color: var(--pap-text);
    font-weight: 700;
    background: var(--pap-white);
}
.pap-filter-nav-btn.is-active::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--pap-primary);
    border-radius: 0 3px 3px 0;
}

.pap-nav-count {
    background: var(--pap-primary);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    border-radius: 100px;
    min-width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
    flex-shrink: 0;
}

/* Right panels area */
.pap-filter-panels {
    flex: 1;
    overflow: hidden;
    position: relative;
}
.pap-filter-panel {
    display: none;
    height: 100%;
    overflow-y: auto;
    padding: 14px 18px;
}
.pap-filter-panel.is-active { display: block; }

/* Search input in filter panel */
.pap-search-wrap {
    margin-bottom: 10px;
}
.pap-search-input {
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid var(--pap-border);
    border-radius: 8px;
    font-size: 0.875rem;
    font-family: var(--pap-font);
    outline: none;
    background: #fafafa;
    transition: border-color .16s, background .16s;
}
.pap-search-input:focus {
    border-color: var(--pap-primary);
    background: var(--pap-white);
}

/* Checkbox list — exact 1mg style */
.pap-check-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.pap-check-item {
    border-bottom: 1px solid var(--pap-border);
}
.pap-check-item:last-child { border-bottom: none; }
.pap-check-item.is-hidden { display: none; }

.pap-check-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 4px;
    cursor: pointer;
}
.pap-check-row:hover .pap-check-label { color: var(--pap-text); }

/* Custom checkbox UI */
.pap-custom-checkbox {
    position: relative;
    flex-shrink: 0;
}
.pap-custom-checkbox input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 18px;
    height: 18px;
    margin: 0;
    cursor: pointer;
    z-index: 1;
}
.pap-checkbox-ui {
    display: block;
    width: 18px;
    height: 18px;
    border: 1.5px solid #bbb;
    border-radius: 4px;
    background: var(--pap-white);
    transition: border-color .14s, background .14s;
}
.pap-custom-checkbox input:checked ~ .pap-checkbox-ui {
    background: var(--pap-primary);
    border-color: var(--pap-primary);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpolyline points='1.5 5 4.5 8 10.5 1.5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: 11px 9px;
    background-repeat: no-repeat;
    background-position: center;
}

.pap-check-label {
    font-size: 0.875rem;
    color: var(--pap-sub);
    flex: 1;
    line-height: 1.3;
}
.pap-check-count {
    font-size: 0.78rem;
    color: #aaa;
    margin-left: auto;
    flex-shrink: 0;
}

/* Price range inputs */
.pap-price-range {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
    padding: 8px 0;
}
.pap-price-sep {
    color: var(--pap-sub);
    padding-bottom: 10px;
    font-size: 1.1rem;
}
.pap-price-label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--pap-sub);
    text-transform: uppercase;
    letter-spacing: .04em;
}
.pap-price-input {
    padding: 10px 14px;
    border: 1.5px solid var(--pap-border);
    border-radius: 8px;
    font-size: 0.9rem;
    width: 120px;
    outline: none;
    font-family: var(--pap-font);
    transition: border-color .16s;
}
.pap-price-input:focus { border-color: var(--pap-primary); }

/* ── Filter footer — Clear all + Apply ───────────────────────────── */
.pap-filter-footer {
    display: flex;
    gap: 10px;
    padding: 14px 20px;
    border-top: 1px solid var(--pap-border);
    flex-shrink: 0;
    background: var(--pap-white);
}
.pap-clear-all-btn {
    flex: 1;
    padding: 11px;
    border: none;
    background: transparent;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--pap-sub);
    cursor: pointer;
    border-radius: 8px;
    transition: background .14s, color .14s;
    font-family: var(--pap-font);
}
.pap-clear-all-btn:hover { background: #f0f0f0; color: var(--pap-text); }

/* Apply button: gray by default, red when something is selected — matches 1mg */
.pap-apply-btn {
    flex: 2;
    padding: 11px;
    border: none;
    border-radius: 8px;
    background: #d9d9d9;
    color: #888;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: not-allowed;
    transition: background .18s, color .18s;
    font-family: var(--pap-font);
    letter-spacing: .02em;
}
.pap-apply-btn:not(:disabled) {
    background: var(--pap-primary);
    color: var(--pap-white);
    cursor: pointer;
}
.pap-apply-btn:not(:disabled):hover { opacity: .9; }

/* ── Toast ──────────────────────────────────────────────────────── */
#pap-toast {
    position: fixed;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%) translateY(16px);
    background: #1a1a2e;
    color: #fff;
    padding: 10px 22px;
    border-radius: 100px;
    font-size: 0.85rem;
    font-weight: 500;
    z-index: 2000000;
    pointer-events: none;
    opacity: 0;
    transition: transform .28s ease, opacity .28s ease;
    white-space: nowrap;
    font-family: var(--pap-font);
}
#pap-toast.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .pap-cols-5 { grid-template-columns: repeat(3, 1fr); }
    .pap-cols-4 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
    /* Filter modal becomes bottom sheet on mobile */
    .pap-filter-modal {
        align-items: flex-end;
        justify-content: stretch;
    }
    .pap-filter-sheet {
        width: 100%;
        max-width: 100%;
        max-height: 88vh;
        border-radius: 16px 16px 0 0;
        animation: papSlideUp .22s cubic-bezier(.4,0,.2,1);
    }
}
@media (max-width: 680px) {
    .pap-cols-5,
    .pap-cols-4,
    .pap-cols-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 420px) {
    .pap-cols-5,
    .pap-cols-4,
    .pap-cols-3,
    .pap-cols-2 { grid-template-columns: repeat(2, 1fr); }
    .pap-filter-nav { width: 110px; }
    .pap-filter-nav-btn { padding: 12px 10px; font-size: 0.8rem; }
}

/* ── Prevent body scroll when modal open ────────────────────────── */
body.pap-no-scroll { overflow: hidden !important; }