/**
 * Packaging Papa Portfolio — Frontend Styles v2
 */
:root {
    --pp-primary:   var(--color-primary,  #e84c1e);
    --pp-secondary: var(--color-secondary,#1a1a2e);
    --pp-accent:    var(--color-accent,   #f5a623);
    --pp-text:      var(--color-text,     #2c2c2c);
    --pp-muted:     var(--color-muted,    #666);
    --pp-bg:        var(--color-bg,       #fff);
    --pp-bg-alt:    var(--color-bg-alt,   #f8f8f8);
    --pp-border:    var(--color-border,   #e0e0e0);
    --pp-heading:   var(--font-heading,   'Montserrat', sans-serif);
    --pp-body:      var(--font-body,      'Open Sans', sans-serif);
    --pp-r:  8px;
    --pp-rl: 16px;
    --pp-sh: 0 4px 20px rgba(0,0,0,.08);
    --pp-shh:0 8px 40px rgba(0,0,0,.16);
    --pp-tr: .3s ease;
}

/* === WRAP === */
.pp-portfolio-wrap { width:100%; }

/* === HEADER === */
.pp-portfolio-header { text-align:center; margin-bottom:40px; }
.pp-portfolio-title  { font-family:var(--pp-heading); font-size:2rem; font-weight:800; color:var(--pp-secondary); margin:0 0 12px; }
.pp-portfolio-subtitle { color:var(--pp-muted); max-width:600px; margin:0 auto; }

/* === FILTER BAR === */
.pp-portfolio-filter { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-bottom:32px; }
.pp-filter-btn {
    display:inline-flex; align-items:center; gap:6px;
    padding:8px 22px; font-family:var(--pp-heading); font-size:13px; font-weight:600;
    color:var(--pp-muted); background:transparent;
    border:2px solid var(--pp-border); border-radius:100px;
    cursor:pointer; transition:all var(--pp-tr);
}
.pp-filter-btn:hover, .pp-filter-btn.active {
    background:var(--pp-primary); border-color:var(--pp-primary); color:#fff;
}
.pp-filter-count { background:rgba(0,0,0,.1); border-radius:100px; font-size:11px; padding:1px 6px; }
.pp-filter-btn.active .pp-filter-count { background:rgba(255,255,255,.25); }

/* === GRID === */
.pp-portfolio-grid { display:grid; gap:24px; }
.pp-cols-1 { grid-template-columns:1fr; }
.pp-cols-2 { grid-template-columns:repeat(2,1fr); }
.pp-cols-3 { grid-template-columns:repeat(3,1fr); }
.pp-cols-4 { grid-template-columns:repeat(4,1fr); }
.pp-cols-5 { grid-template-columns:repeat(5,1fr); }
.pp-cols-6 { grid-template-columns:repeat(6,1fr); }

/* === ITEM CARD === */
.pp-portfolio-item {
    background:var(--pp-bg); border:1px solid var(--pp-border);
    border-radius:var(--pp-rl); overflow:hidden;
    transition:transform var(--pp-tr), box-shadow var(--pp-tr), border-color var(--pp-tr);
    animation:pp-fade .5s ease both;
}
.pp-portfolio-item:nth-child(1){animation-delay:.05s}
.pp-portfolio-item:nth-child(2){animation-delay:.10s}
.pp-portfolio-item:nth-child(3){animation-delay:.15s}
.pp-portfolio-item:nth-child(4){animation-delay:.20s}
.pp-portfolio-item:nth-child(5){animation-delay:.25s}
.pp-portfolio-item:nth-child(6){animation-delay:.30s}
@keyframes pp-fade { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:none} }
.pp-portfolio-item:hover { transform:translateY(-6px); box-shadow:var(--pp-shh); border-color:var(--pp-primary); }
.pp-item-inner { display:flex; flex-direction:column; height:100%; }

/* === IMAGE === */
.pp-item-image { position:relative; overflow:hidden; background:var(--pp-bg-alt); }
.pp-item-img {
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
    transition:transform .5s ease; display:block;
}
.pp-img-placeholder { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.pp-img-placeholder svg { width:56px; height:56px; fill:var(--pp-border); }

/* hover effects */
.pp-hover-overlay .pp-portfolio-item:hover .pp-item-img { transform:scale(1.06); }
.pp-hover-zoom    .pp-portfolio-item:hover .pp-item-img { transform:scale(1.12); }
.pp-hover-none    .pp-portfolio-item:hover .pp-item-img { transform:none; }

/* === OVERLAY === */
.pp-item-overlay {
    position:absolute; inset:0;
    background:linear-gradient(to top,rgba(26,26,46,.9),rgba(26,26,46,.15) 60%,transparent);
    opacity:0; transition:opacity var(--pp-tr);
    display:flex; align-items:flex-end; justify-content:flex-end; padding:14px;
}
.pp-portfolio-item:hover .pp-item-overlay { opacity:1; }
.pp-hover-slide .pp-item-overlay { background:rgba(26,26,46,.82); align-items:center; justify-content:center; }
.pp-overlay-actions { display:flex; gap:10px; }
.pp-overlay-btn {
    width:42px; height:42px; border-radius:50%; background:rgba(255,255,255,.15);
    border:2px solid rgba(255,255,255,.5); display:flex; align-items:center; justify-content:center;
    cursor:pointer; transition:all .2s; color:#fff; text-decoration:none; backdrop-filter:blur(4px);
}
.pp-overlay-btn:hover { background:var(--pp-primary); border-color:var(--pp-primary); }
.pp-overlay-btn svg { width:20px; height:20px; fill:#fff; }

/* === BADGE === */
.pp-item-badge {
    position:absolute; top:12px; left:12px;
    background:var(--pp-primary); color:#fff;
    font-family:var(--pp-heading); font-size:10px; font-weight:700;
    text-transform:uppercase; letter-spacing:.08em;
    padding:4px 10px; border-radius:4px; z-index:2;
}

/* === BODY === */
.pp-item-body { padding:18px 20px; flex:1; display:flex; flex-direction:column; }
.pp-item-cat  { font-family:var(--pp-heading); font-size:11px; font-weight:700; color:var(--pp-primary); text-transform:uppercase; letter-spacing:.1em; margin-bottom:6px; }
.pp-item-title { font-family:var(--pp-heading); font-size:1rem; font-weight:700; color:var(--pp-secondary); margin:0 0 8px; line-height:1.35; }
.pp-item-title a { color:inherit; text-decoration:none; transition:color .2s; }
.pp-item-title a:hover { color:var(--pp-primary); }
.pp-item-excerpt { font-size:13px; color:var(--pp-muted); margin:0 0 10px; line-height:1.6; flex:1; }
.pp-item-price  { font-family:var(--pp-heading); font-size:1.05rem; font-weight:800; color:var(--pp-primary); margin-bottom:8px; }
.pp-item-meta   { font-size:12px; color:var(--pp-text); margin:2px 0; }
.pp-meta-label  { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--pp-muted); margin-right:4px; }
.pp-item-link {
    display:inline-flex; align-items:center; gap:6px; margin-top:12px;
    font-family:var(--pp-heading); font-size:12px; font-weight:700;
    color:var(--pp-primary); text-transform:uppercase; letter-spacing:.05em; text-decoration:none;
}
.pp-item-link svg { width:14px; height:14px; fill:currentColor; transition:transform .2s; }
.pp-item-link:hover svg { transform:translateX(4px); }

/* === FOOTER === */
.pp-portfolio-footer { text-align:center; margin-top:40px; }
.pp-load-more-btn {
    display:inline-flex; align-items:center; gap:10px; padding:13px 36px;
    font-family:var(--pp-heading); font-size:14px; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
    color:var(--pp-primary); background:transparent; border:2px solid var(--pp-primary);
    border-radius:4px; cursor:pointer; transition:all var(--pp-tr);
}
.pp-load-more-btn:hover  { background:var(--pp-primary); color:#fff; transform:translateY(-2px); box-shadow:0 6px 20px rgba(232,76,30,.3); }
.pp-load-more-btn:disabled { opacity:.6; cursor:not-allowed; transform:none; }
.pp-spinner {
    width:16px; height:16px; border:2px solid currentColor; border-top-color:transparent;
    border-radius:50%; animation:pp-spin .7s linear infinite; display:none;
}
@keyframes pp-spin { to { transform:rotate(360deg); } }
.pp-count { margin-top:10px; font-size:13px; color:var(--pp-muted); }
.pp-no-products { grid-column:1/-1; text-align:center; padding:60px 24px; color:var(--pp-muted); }

/* === LIGHTBOX === */
.pp-lightbox-overlay {
    position:fixed; inset:0; background:rgba(0,0,0,.92); z-index:99999;
    display:flex!important; align-items:center; justify-content:center; padding:20px;
}
.pp-lb-inner {
    display:grid; grid-template-columns:1fr 380px; max-width:1100px; width:100%;
    background:#fff; border-radius:var(--pp-rl); overflow:hidden; max-height:86vh;
    animation:pp-fade .2s ease;
}
.pp-lb-img-wrap { background:var(--pp-bg-alt); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.pp-lb-img  { width:100%; height:100%; object-fit:contain; max-height:86vh; display:block; }
.pp-lb-content { padding:36px 28px; overflow-y:auto; display:flex; flex-direction:column; }
.pp-lb-cat   { font-family:var(--pp-heading); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--pp-primary); margin-bottom:6px; }
.pp-lb-title { font-family:var(--pp-heading); font-size:1.4rem; font-weight:800; color:var(--pp-secondary); margin:0 0 14px; }
.pp-lb-desc  { font-size:14px; color:var(--pp-muted); line-height:1.7; flex:1; margin:0 0 20px; }
.pp-lb-meta  { font-size:13px; color:var(--pp-text); margin-bottom:16px; line-height:2; }
.pp-lb-meta strong { color:var(--pp-secondary); }
.pp-lb-actions { margin-top:auto; display:flex; gap:10px; flex-wrap:wrap; }
.pp-lb-actions a {
    display:inline-flex; align-items:center; gap:6px; padding:12px 22px;
    background:var(--pp-primary); color:#fff; font-family:var(--pp-heading); font-size:13px; font-weight:700;
    border-radius:4px; text-decoration:none; transition:background .2s;
}
.pp-lb-actions a:hover { background:#c03d16; }
.pp-lb-actions a.pp-lb-secondary { background:var(--pp-secondary); }
.pp-lb-actions a.pp-lb-secondary:hover { background:#000; }
.pp-lb-close, .pp-lb-prev, .pp-lb-next {
    position:fixed; background:rgba(255,255,255,.12); border:2px solid rgba(255,255,255,.3);
    color:#fff; width:46px; height:46px; border-radius:50%; display:flex; align-items:center;
    justify-content:center; cursor:pointer; transition:background .2s; z-index:100000;
}
.pp-lb-close { top:18px; right:18px; font-size:28px; line-height:1; }
.pp-lb-prev  { left:16px;  top:50%; transform:translateY(-50%); font-size:30px; }
.pp-lb-next  { right:16px; top:50%; transform:translateY(-50%); font-size:30px; }
.pp-lb-close:hover, .pp-lb-prev:hover, .pp-lb-next:hover { background:var(--pp-primary); border-color:var(--pp-primary); }

/* === RESPONSIVE === */
@media(max-width:1024px){
    .pp-cols-4,.pp-cols-5,.pp-cols-6{grid-template-columns:repeat(3,1fr);}
    .pp-lb-inner{grid-template-columns:1fr 320px;}
}
@media(max-width:768px){
    .pp-cols-3,.pp-cols-4,.pp-cols-5,.pp-cols-6{grid-template-columns:repeat(2,1fr);}
    .pp-lb-inner{grid-template-columns:1fr; max-height:92vh;}
    .pp-lb-img-wrap{max-height:44vw;}
    .pp-lb-content{padding:20px; max-height:50vh;}
}
@media(max-width:480px){
    .pp-cols-2,.pp-cols-3,.pp-cols-4,.pp-cols-5,.pp-cols-6{grid-template-columns:1fr;}
    .pp-filter-btn{padding:6px 14px; font-size:12px;}
}