*,*::before,*::after{box-sizing:border-box;}

.ofp{
    max-width:1100px;
    margin:0 auto;
    padding:20px 16px 40px;
}

/* ── Hero ── */
.ofp-hero{
    background:#0f0007;
    border-radius:16px;
    padding:36px 32px;
    margin-bottom:24px;
    position:relative;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
}
.ofp-hero::after{
    content:'';
    position:absolute;inset:0;
    background:radial-gradient(ellipse at 78% 50%,rgba(200,16,46,.38),transparent 62%);
    pointer-events:none;
}
.ofp-hero__text{position:relative;z-index:2;}
.ofp-hero__eye{
    font-size:10px;font-weight:700;
    letter-spacing:.2em;text-transform:uppercase;
    color:#f0c040;margin:0 0 10px;
    display:flex;align-items:center;gap:8px;
}
.ofp-hero__eye::before{
    content:'';width:24px;height:1.5px;
    background:#f0c040;border-radius:2px;flex-shrink:0;
}
.ofp-hero__title{
    font-size:36px;font-weight:800;
    color:#fff;line-height:1.1;margin:0 0 8px;
}
.ofp-hero__title em{color:#f0c040;font-style:normal;}
.ofp-hero__sub{
    font-size:13px;color:rgba(255,255,255,.6);
    font-weight:400;margin:0;
}
.ofp-hero__badge{
    position:relative;z-index:2;
    background:#f0c040;color:#1a0008;
    border-radius:50%;width:100px;height:100px;
    display:flex;flex-direction:column;
    align-items:center;justify-content:center;
    flex-shrink:0;text-align:center;
    animation:ofp-wobble 3s ease-in-out infinite;
}
.ofp-hero__badge .b-num{font-size:28px;font-weight:900;line-height:1;display:block;}
.ofp-hero__badge .b-txt{font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;display:block;}
@keyframes ofp-wobble{
    0%,100%{transform:rotate(-4deg) scale(1);}
    50%    {transform:rotate(4deg) scale(1.06);}
}

/* ── Filter Bar ── */
.ofp-filter{
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:12px;
    padding:12px 16px;
    margin-bottom:22px;
    display:flex;align-items:center;gap:8px;flex-wrap:wrap;
    box-shadow:0 1px 4px rgba(0,0,0,.05);
}
.ofp-filter__lbl{
    font-size:10px;font-weight:800;
    letter-spacing:.14em;text-transform:uppercase;
    color:#9ca3af;margin-right:4px;flex-shrink:0;
    display:flex;align-items:center;gap:5px;
}
.ofp-chip{
    padding:5px 14px;border-radius:20px;
    font-size:12.5px;font-weight:700;
    cursor:pointer;border:1.5px solid #e5e7eb;
    background:#f9fafb;color:#6b7280;
    transition:all .18s;text-decoration:none;
    white-space:nowrap;display:inline-flex;align-items:center;gap:5px;
}
.ofp-chip:hover,.ofp-chip.is-active{
    border-color:#c8102e;background:#c8102e;
    color:#fff;text-decoration:none;
}

/* ── Section Heading ── */
.ofp-sec{
    display:flex;align-items:center;gap:10px;
    margin:24px 0 14px;
}
.ofp-sec::before{
    content:'';width:4px;height:22px;
    background:#c8102e;border-radius:3px;flex-shrink:0;
}
.ofp-sec h2{
    font-size:20px;font-weight:800;
    color:#111827;margin:0;
    display:flex;align-items:center;gap:6px;
}
.ofp-tag{
    font-size:9px;font-weight:800;
    letter-spacing:.08em;text-transform:uppercase;
    padding:3px 10px;border-radius:20px;
}
.ofp-tag--amber{background:#fef3c7;color:#92400e;}
.ofp-tag--red  {background:#fee2e2;color:#991b1b;}

/* ══════════════════════════════════════════
   GRID — fixed 5 columns desktop
══════════════════════════════════════════ */
.ofp-grid{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:12px;
    margin-bottom:28px;
}

/* ── Card Wrapper ── */
.ofp-wrap{
    position:relative;
    display:flex;
    flex-direction:column;
}

/* Wishlist btn */
.ofp-wish{
    position:absolute;top:9px;right:9px;
    width:28px;height:28px;background:#fff;
    border-radius:50%;display:flex;align-items:center;justify-content:center;
    font-size:13px;color:#bbb;
    box-shadow:0 2px 8px rgba(0,0,0,.14);
    z-index:10;border:none;cursor:pointer;
    transition:all .18s;text-decoration:none;
    opacity:0;pointer-events:none;
}
.ofp-wrap:hover .ofp-wish{opacity:1;pointer-events:auto;}
.ofp-wish:hover{transform:scale(1.18);color:#c8102e;background:#fff0f0;text-decoration:none;}

/* ── Card ── */
.ofp-card{
    flex:1;
    display:flex;
    flex-direction:column;
    background:#fff;
    border:1px solid #e8e8e8;
    border-radius:12px;
    overflow:hidden;
    position:relative;
    transition:box-shadow .22s ease, transform .22s ease;
    text-decoration:none;
    color:inherit;
}
.ofp-card:hover{
    box-shadow:0 6px 24px rgba(0,0,0,.10);
    transform:translateY(-4px);
    text-decoration:none;color:inherit;
}

/* Discount badge */
.ofp-disc{
    position:absolute;top:8px;left:8px;
    background:#c8102e;color:#fff;
    font-size:9px;font-weight:800;
    padding:3px 7px;border-radius:5px;
    letter-spacing:.04em;z-index:2;
    pointer-events:none;line-height:1.4;
}
.ofp-disc--gold{background:#f0c040;color:#1a0008;}

/* ══════════════════════════════════════════
   IMAGE AREA
══════════════════════════════════════════ */
.ofp-img-wrap{
    position:relative;
    width:100%;
    height:180px;
    overflow:hidden;
    flex-shrink:0;
    background:#f5f5f5;
}
.ofp-img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center top;
    display:block;
    transition:transform .3s ease;
}
.ofp-card:hover .ofp-img{transform:scale(1.06);}

/* ══════════════════════════════════════════
   CARD BODY
══════════════════════════════════════════ */
.ofp-body{
    display:flex;
    flex-direction:column;
    flex:1;
    padding:10px 10px 12px;
    border-top:1px solid #f0f0f0;
}
.ofp-name{
    font-size:12.5px;font-weight:600;
    color:#1f2937;line-height:1.45;
    margin:0 0 6px;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    min-height:calc(12.5px * 1.45 * 2);
}
.ofp-price{
    font-size:15px;font-weight:900;
    color:#c8102e;margin:0 0 2px;line-height:1.2;
}
.ofp-old{
    font-size:11px;color:#aaa;
    text-decoration:line-through;margin:0 0 6px;
}
.ofp-stars{
    color:#f59e0b;font-size:11px;
    margin-bottom:8px;line-height:1;letter-spacing:1px;
}
.ofp-spacer{flex:1;min-height:4px;}

/* ── Add to Cart form/button ── */
.ofp-atc-form{
    margin:0;padding:0;width:100%;flex-shrink:0;
}
.ofp-atc{
    display:flex;align-items:center;justify-content:center;gap:5px;
    width:100%;padding:8px 0;
    background:#c8102e;color:#fff;
    border:none;border-radius:7px;
    font-size:12px;font-weight:700;
    cursor:pointer;transition:all .18s;
    text-decoration:none;line-height:1.4;
}
.ofp-atc:hover{
    background:#a50d26;
    box-shadow:0 4px 12px rgba(200,16,46,.30);
    color:#fff;text-decoration:none;
}
.ofp-atc--out{
    background:#f0f0f0;color:#aaa;
    cursor:not-allowed;pointer-events:none;
}

/* Empty State */
.ofp-empty{
    text-align:center;padding:52px 20px;
    color:#9ca3af;background:#fff;
    border:1px solid #e5e7eb;border-radius:14px;
}
.ofp-empty i{font-size:48px;display:block;margin-bottom:12px;opacity:.25;}
.ofp-empty p{font-size:14.5px;font-weight:600;margin:0;color:#6b7280;}

/* Pagination */
.ofp-pages{
    display:flex;justify-content:center;align-items:center;
    gap:5px;margin:12px 0 28px;flex-wrap:wrap;
}
.ofp-pages a,.ofp-pages span{
    padding:7px 13px;border:1.5px solid #e5e7eb;border-radius:8px;
    font-size:13px;font-weight:700;color:#6b7280;
    transition:all .18s;text-decoration:none;display:inline-block;
    line-height:1.4;min-width:36px;text-align:center;
}
.ofp-pages a:hover{border-color:#c8102e;color:#c8102e;text-decoration:none;}
.ofp-pages .is-cur{border-color:#c8102e;background:#c8102e;color:#fff;}
.ofp-pages span{opacity:.4;cursor:default;}

/* ══════════════════════════════
   RESPONSIVE
══════════════════════════════ */
@media(max-width:1024px){
    .ofp-grid{grid-template-columns:repeat(4,1fr);}
}
@media(max-width:768px){
    .ofp-hero        {padding:26px 20px;}
    .ofp-hero__title {font-size:26px;}
    .ofp-hero__badge {width:78px;height:78px;}
    .ofp-hero__badge .b-num{font-size:22px;}
    .ofp-grid        {grid-template-columns:repeat(2,1fr);gap:10px;}
    .ofp-img-wrap    {height:150px;}
    .ofp-wish        {opacity:1;pointer-events:auto;}
}
@media(max-width:420px){
    .ofp-hero__title {font-size:20px;}
    .ofp-grid        {gap:8px;}
    .ofp-img-wrap    {height:130px;}
    .ofp-name        {font-size:11.5px;}
    .ofp-atc         {font-size:11px;padding:7px 0;}
}