/**
* Peren category/shop listing (telefoane.html and other category pages) —
* shared visual system, redesign 2026-08-19.
*
* Same conventions as peren-account.css/peren-buyback.css: plain CSS (this
* child theme has no Tailwind build of its own, so a not-already-compiled
* utility class silently does nothing), variables tracing back to the
* sitewide brand tokens in peren-brand-colors.css, "pc-" prefix scoped
* under .pc-scope so nothing here leaks onto unrelated pages.
*
* Underlying data/filtering is untouched: this file only restyles the real
* Magento_LayeredNavigation filter links and Peren\Catalog\Block\Category\
* VariantList's real product collection - every filter tap and sort choice
* is still a real, crawlable, bookmarkable URL.
*/
.pc-scope {
--pc-primary: var(--color-primary);
--pc-primary-dark: var(--color-primary-darker);
--pc-primary-light: var(--color-primary-lighter);
--pc-ink: var(--peren-ink);
--pc-body: var(--peren-body);
--pc-line: var(--peren-line);
--pc-bg-soft: var(--peren-bg-soft);
}
/* ─── CATEGORY HEADER ───────────────────────────────────────── */
.pc-header { margin-bottom: 20px; }
.pc-header-title { font-size: clamp(22px, 3vw, 28px); font-weight: 800; color: var(--pc-ink); letter-spacing: -.5px; margin: 0 0 4px; }
.pc-header-sub { font-size: 14.5px; color: var(--pc-body); margin: 0 0 8px; }
.pc-header-count { font-size: 13px; font-weight: 700; color: var(--pc-primary-dark); }
/* ─── TRUST STRIP ───────────────────────────────────────────── */
.pc-trust-strip { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.pc-trust-pill {
display: inline-flex; align-items: center; gap: 7px;
background: var(--pc-bg-soft); border: 1px solid var(--pc-line); border-radius: 100px;
padding: 7px 14px; font-size: 12.5px; font-weight: 600; color: var(--pc-body);
}
.pc-trust-pill svg { width: 15px; height: 15px; color: var(--pc-primary); flex-shrink: 0; }
/* ─── STICKY MOBILE CONTROL BAR ─────────────────────────────── */
.pc-mobile-bar {
display: none;
position: sticky; top: 0; z-index: 30;
background: #fff; border-bottom: 1px solid var(--pc-line);
margin: 0 -16px 16px; padding: 10px 16px;
padding-top: calc(10px + env(safe-area-inset-top, 0px));
}
.pc-mobile-bar-row { display: flex; gap: 10px; }
.pc-mobile-btn {
flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px;
padding: 11px 14px; border-radius: 10px; border: 1.5px solid var(--pc-line);
background: #fff; font-size: 14px; font-weight: 700; color: var(--pc-ink);
cursor: pointer; font-family: inherit;
}
.pc-mobile-btn svg { width: 17px; height: 17px; color: var(--pc-body); flex-shrink: 0; }
.pc-mobile-btn-active { border-color: var(--pc-primary); color: var(--pc-primary-dark); background: var(--pc-bg-soft); }
.pc-mobile-btn-active svg { color: var(--pc-primary); }
.pc-filter-count-dot {
display: inline-flex; align-items: center; justify-content: center;
min-width: 18px; height: 18px; padding: 0 5px; border-radius: 100px;
background: var(--pc-primary); color: #fff; font-size: 11px; font-weight: 800;
}
@media (max-width: 767px) {
.pc-mobile-bar { display: block; }
}
/* ─── DESKTOP TOOLBAR (count + sort) ────────────────────────── */
.pc-toolbar {
display: flex; align-items: center; justify-content: space-between; gap: 16px;
flex-wrap: wrap; margin-bottom: 18px;
}
.pc-toolbar-count { font-size: 14px; color: var(--pc-body); }
.pc-toolbar-count strong { color: var(--pc-ink); font-weight: 700; }
@media (max-width: 767px) { .pc-toolbar { display: none; } }
/* ─── SORT CONTROL ──────────────────────────────────────────── */
.pc-sort { position: relative; }
.pc-sort-trigger {
display: flex; align-items: center; gap: 8px;
padding: 9px 14px; border-radius: 10px; border: 1.5px solid var(--pc-line);
background: #fff; font-size: 13.5px; font-weight: 700; color: var(--pc-ink);
cursor: pointer; font-family: inherit; white-space: nowrap;
}
.pc-sort-trigger svg { width: 16px; height: 16px; color: var(--pc-body); transition: transform .15s ease; }
.pc-sort[data-open="true"] .pc-sort-trigger svg.pc-chevron { transform: rotate(180deg); }
.pc-sort-menu {
position: absolute; right: 0; top: calc(100% + 6px); z-index: 40;
background: #fff; border: 1px solid var(--pc-line); border-radius: 12px;
box-shadow: 0 10px 30px rgba(20,36,32,.12); min-width: 220px; padding: 6px;
}
.pc-sort-option {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
width: 100%; text-align: left; padding: 10px 12px; border-radius: 8px;
border: none; background: none; cursor: pointer; font-family: inherit;
font-size: 13.5px; font-weight: 600; color: var(--pc-ink); text-decoration: none;
}
.pc-sort-option:hover { background: var(--pc-bg-soft); }
.pc-sort-option-active { color: var(--pc-primary-dark); font-weight: 700; }
.pc-sort-option-active svg { width: 15px; height: 15px; color: var(--pc-primary); }
/* Mobile sort sheet reuses the same option markup inside the bottom sheet shell below */
.pc-sort-sheet .pc-sort-option { padding: 14px 6px; font-size: 15px; border-bottom: 1px solid var(--pc-line); border-radius: 0; }
.pc-sort-sheet .pc-sort-option:last-child { border-bottom: none; }
/* ─── ACTIVE FILTER CHIPS ───────────────────────────────────── */
.pc-chips-row {
display: flex; align-items: center; gap: 8px; margin-bottom: 18px;
overflow-x: auto; padding-bottom: 2px; scrollbar-width: none;
}
.pc-chips-row::-webkit-scrollbar { display: none; }
.pc-chip {
display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
background: var(--pc-bg-soft); border: 1px solid var(--pc-line); border-radius: 100px;
padding: 6px 8px 6px 14px; font-size: 12.5px; font-weight: 600; color: var(--pc-ink);
text-decoration: none; white-space: nowrap;
}
.pc-chip:hover { border-color: var(--pc-primary); }
.pc-chip svg { width: 14px; height: 14px; color: var(--pc-body); }
.pc-chip-clear {
flex-shrink: 0; font-size: 12.5px; font-weight: 700; color: var(--pc-primary-dark);
text-decoration: none; padding: 6px 10px; white-space: nowrap;
}
.pc-chip-clear:hover { text-decoration: underline; }
/* ─── PRODUCT GRID ───────────────────────────────────────────── */
.pc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 640px) { .pc-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; } }
@media (min-width: 1024px) { .pc-grid { grid-template-columns: repeat(4, 1fr); } }
/* ─── PRODUCT CARD ───────────────────────────────────────────── */
.pc-card {
display: flex; flex-direction: column; height: 100%;
background: #fff; border: 1px solid var(--pc-line); border-radius: 16px;
overflow: hidden; text-decoration: none; color: inherit;
transition: box-shadow .15s ease, border-color .15s ease, transform .15s ease;
}
.pc-card:hover { box-shadow: 0 12px 28px rgba(20,36,32,.10); border-color: var(--pc-line); transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .pc-card:hover { transform: none; } .pc-card { transition: none; } }
.pc-card-media { position: relative; aspect-ratio: 1 / 1; background: var(--pc-bg-soft); }
.pc-card-media img {
width: 100%; height: 100%; object-fit: contain; padding: 14px;
display: block;
}
.pc-card-badge {
position: absolute; top: 10px; left: 10px;
display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 100px;
font-size: 11px; font-weight: 800; letter-spacing: .01em; color: #fff;
box-shadow: 0 2px 6px rgba(0,0,0,.15);
}
.pc-grade-bronze { background: #a9673a; }
.pc-grade-silver { background: #7c8894; }
.pc-grade-gold { background: #b8860b; }
.pc-grade-platinum { background: #5b6b78; }
.pc-grade-premium { background: var(--pc-primary); }
.pc-grade-default { background: #6b7280; }
.pc-card-body { display: flex; flex-direction: column; flex: 1; padding: 12px 14px 14px; gap: 4px; }
.pc-card-model { font-size: 14.5px; font-weight: 800; color: var(--pc-ink); line-height: 1.25; }
.pc-card-variant { font-size: 12.5px; color: var(--pc-body); }
.pc-card-battery {
display: inline-flex; align-items: center; gap: 5px; margin-top: 2px;
font-size: 11.5px; font-weight: 700; color: var(--pc-primary-dark);
}
.pc-card-battery svg { width: 13px; height: 13px; flex-shrink: 0; }
.pc-card-price-row { margin-top: auto; padding-top: 10px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.pc-card-price { font-size: 17px; font-weight: 800; color: var(--pc-ink); letter-spacing: -.2px; }
.pc-card-price-was { font-size: 12.5px; color: var(--pc-body); text-decoration: line-through; }
.pc-card-cta {
margin-top: 10px; display: flex; align-items: center; justify-content: center; gap: 6px;
padding: 9px; border-radius: 9px; background: var(--pc-bg-soft); color: var(--pc-primary-dark);
font-size: 12.5px; font-weight: 700;
}
.pc-card:hover .pc-card-cta { background: var(--pc-primary); color: #fff; }
/* ─── PAGINATION ─────────────────────────────────────────────── */
.pc-pager { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px; margin-top: 32px; }
.pc-pager-link, .pc-pager-current, .pc-pager-ellipsis {
display: inline-flex; align-items: center; justify-content: center;
min-width: 38px; height: 38px; padding: 0 10px; border-radius: 9px;
text-decoration: none; color: var(--pc-ink); font-size: 13.5px; font-weight: 600;
}
.pc-pager-link { border: 1px solid var(--pc-line); }
.pc-pager-link:hover { border-color: var(--pc-primary); color: var(--pc-primary-dark); }
.pc-pager-current { background: var(--pc-primary); color: #fff; font-weight: 800; }
.pc-pager-ellipsis { color: var(--pc-body); }
.pc-pager-nav { gap: 6px; font-weight: 700; }
.pc-pager-nav svg { width: 15px; height: 15px; }
.pc-pager-nav[aria-disabled="true"] { opacity: .35; pointer-events: none; }
/* ─── EMPTY STATE ─────────────────────────────────────────────── */
.pc-empty { text-align: center; padding: 56px 24px; background: var(--pc-bg-soft); border: 1px dashed var(--pc-line); border-radius: 18px; }
.pc-empty-icon {
width: 56px; height: 56px; border-radius: 50%; background: #fff; border: 1px solid var(--pc-line);
display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; color: var(--pc-body);
}
.pc-empty-icon svg { width: 26px; height: 26px; }
.pc-empty-title { font-size: 17px; font-weight: 800; color: var(--pc-ink); margin-bottom: 6px; }
.pc-empty-sub { font-size: 13.5px; color: var(--pc-body); margin-bottom: 20px; }
.pc-empty-btn {
display: inline-flex; align-items: center; gap: 8px; padding: 11px 22px; border-radius: 10px;
background: var(--pc-primary); color: #fff; font-size: 13.5px; font-weight: 700; text-decoration: none;
}
.pc-empty-btn:hover { background: var(--pc-primary-dark); color: #fff; }
/* ─── DESKTOP FILTER SIDEBAR ─────────────────────────────────── */
.pc-filters-desktop { display: none; }
@media (min-width: 768px) { .pc-filters-desktop { display: block; } }
.pc-filter-section { border-bottom: 1px solid var(--pc-line); }
.pc-filter-section:last-child { border-bottom: none; }
.pc-filter-summary {
display: flex; align-items: center; justify-content: between; gap: 10px;
width: 100%; padding: 14px 2px; cursor: pointer; list-style: none;
font-size: 14px; font-weight: 700; color: var(--pc-ink);
}
.pc-filter-summary::-webkit-details-marker { display: none; }
.pc-filter-summary-row { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.pc-filter-summary svg { width: 17px; height: 17px; color: var(--pc-body); transition: transform .15s ease; flex-shrink: 0; }
details[open] > .pc-filter-summary svg.pc-chevron { transform: rotate(180deg); }
.pc-filter-active-value { font-size: 12px; font-weight: 600; color: var(--pc-primary-dark); }
.pc-filter-body { padding: 0 2px 16px; }
.pc-filter-list { list-style: none; margin: 0; padding: 0; max-height: 260px; overflow-y: auto; }
.pc-filter-item a, .pc-filter-item span.pc-filter-item-inactive {
display: block; padding: 7px 4px; font-size: 13.5px; color: var(--pc-body);
text-decoration: none; border-radius: 6px;
}
.pc-filter-item a:hover { color: var(--pc-primary-dark); background: var(--pc-bg-soft); }
.pc-filter-item-inactive { opacity: .45; }
/* ─── MOBILE BOTTOM-SHEET / FULL-SCREEN FILTER MODAL ────────── */
/* Native