/* ============================================================
   HOBBYPRINT SIDE PANEL MANAGER
   Production review stylesheet

   Safety rule:
   Panels are hidden by default and only become visible after the
   production JavaScript confirms that both sides of the page have
   enough unused space.
   ============================================================ */


/* ============================================================
   1. FAIL-SAFE DEFAULT
   ============================================================ */

.hp-side-shell {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}


/* ============================================================
   2. WIDE-SCREEN ACTIVATION

   Both conditions are required:
   - Viewport is at least 1800 CSS pixels wide.
   - JavaScript has added .hp-side-panels-safe after measuring the
     actual OpenCart page container.
   ============================================================ */

@media (min-width: 1800px) {
    body.hp-side-panels-safe .hp-side-shell {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }
}


/* ============================================================
   3. OUTER SIDE PANEL SHELLS
   ============================================================ */

.hp-side-shell {
    position: fixed;
    top: var(--hp-side-top, 265px);
    flex-direction: column;
    gap: 14px;

    width: 287px;
    min-height: 420px;
    max-height: calc(100vh - var(--hp-side-top, 265px) - 18px);
    padding: 14px;
    box-sizing: border-box;

    overflow-x: hidden;
    overflow-y: auto;
    z-index: 90;

    border-radius: 18px;
    background:
        radial-gradient(circle at 12% 18%, rgba(0, 169, 224, 0.18), transparent 42%),
        radial-gradient(circle at 88% 22%, rgba(236, 0, 140, 0.13), transparent 40%),
        radial-gradient(circle at 28% 84%, rgba(255, 221, 0, 0.16), transparent 42%),
        radial-gradient(circle at 92% 88%, rgba(34, 34, 34, 0.08), transparent 38%),
        #fafafa;
    box-shadow: 0 5px 18px rgba(0, 0, 0, 0.10);
    backdrop-filter: blur(1px);
}

.hp-side-shell-left {
    left: 14px;
}

.hp-side-shell-right {
    right: 14px;
}


/* ============================================================
   4. OUTER PANEL INTRODUCTION
   ============================================================ */

.hp-side-shell-intro {
    padding: 2px 4px 12px;
    text-align: center;
}

.hp-side-shell-intro h3 {
    margin: 0 0 7px;
    font-size: 17px;
    font-weight: 700;
}

.hp-side-shell-intro p {
    margin: 0;
    color: #444;
    font-size: 12px;
    line-height: 1.35;
}


/* ============================================================
   5. PANEL STACK AND CARDS
   ============================================================ */

.hp-side-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}

.hp-side-card {
    position: relative;
    flex: 0 0 auto;
    width: 246px;
    padding: 15px;
    box-sizing: border-box;
    overflow: hidden;

    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 11px;
    box-shadow: 0 4px 13px rgba(0, 0, 0, 0.09);
    text-align: center;
}

.hp-side-card-accent {
    height: 5px;
    margin: -15px -15px 13px;
}


/* ============================================================
   6. ACCENT COLOURS
   ============================================================ */

.hp-accent-cyan {
    background: #00a9e0;
}

.hp-accent-magenta {
    background: #ec008c;
}

.hp-accent-yellow {
    background: #ffdd00;
}

.hp-accent-black {
    background: #222;
}

.hp-accent-light-cyan {
    background: #8edcf1;
}

.hp-accent-light-magenta {
    background: #f3a6d2;
}


/* ============================================================
   7. CARD CONTENT
   ============================================================ */

.hp-side-card-icon {
    margin: 1px 0 7px;
    font-size: 31px;
}

.hp-side-card h4 {
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
}

.hp-side-card p {
    margin: 0 0 12px;
    font-size: 12.5px;
    line-height: 1.4;
}

.hp-side-card-image {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto 10px;
    border-radius: 6px;
}

.hp-side-product-image {
    margin-bottom: 10px;
}


/* ============================================================
   8. CARD BUTTONS
   ============================================================ */

.hp-side-card-button {
    display: inline-block;
    padding: 7px 12px;

    color: #fff !important;
    background: #222;
    border-radius: 5px;
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
}

.hp-side-card-button:hover {
    color: #fff !important;
    background: #00a9e0;
    text-decoration: none;
}

.hp-side-card-product-button {
    margin-left: 6px;
}


/* ============================================================
   9. SCROLLBAR STYLING
   ============================================================ */

.hp-side-shell {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.28) transparent;
    overscroll-behavior: contain;
}

.hp-side-shell::-webkit-scrollbar {
    width: 7px;
}

.hp-side-shell::-webkit-scrollbar-track {
    background: transparent;
}

.hp-side-shell::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.22);
    border-radius: 8px;
}

.hp-side-shell::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.35);
}


/* ============================================================
   10. AUCTION AND PRICE DROP PROMOTION CARDS
   ============================================================ */

.hp-promotion-product h4 a {
    color: #222;
    text-decoration: none;
}

.hp-promotion-product h4 a:hover {
    color: #00a9e0;
}

.hp-promotion-data {
    overflow: visible;
}

.hp-promotion-badge {
    display: inline-block;
    margin-bottom: 9px;
    padding: 4px 10px;

    color: #fff;
    background: #b74eb8;
    border-radius: 14px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.hp-promotion-price_drop .hp-promotion-badge {
    background: #222;
}

.hp-promotion-main {
    margin-bottom: 8px !important;
}

.hp-promotion-main strong,
.hp-promotion-countdown {
    display: block;
    margin-top: 4px;
    font-size: 20px;
    line-height: 1.2;
}

.hp-promotion-countdown {
    font-size: 14px;
}

.hp-promotion-saving {
    color: #188038;
    font-weight: 700;
}

.hp-promotion-reserve {
    font-weight: 700;
}

.hp-promotion-unavailable {
    background: #fffbea;
    border-color: #d9a300;
}