/* Postit (Anuncios) - colour of the section: teal */
:root, .com-postit { --pi-accent: #0f7b83; --pi-accent-dark: #0b5d63; --pi-soft: #e8f4f4; --pi-line: #e3e1dc; --pi-text: #3d3c39; --pi-muted: #6f6a62; --pi-radius: 14px; }
body .com-postit .btn-primary, body .mod-postit .btn-primary, body .pi-msearch .btn-primary { --btn-bg: var(--pi-accent); --btn-border-color: var(--pi-accent); --btn-hover-bg: var(--pi-accent-dark); --btn-hover-border-color: var(--pi-accent-dark); background-color: var(--pi-accent); border-color: var(--pi-accent); color: #fff; }
body .com-postit .btn-primary:hover, body .com-postit .btn-primary:focus-visible, body .pi-msearch .btn-primary:hover { background-color: var(--pi-accent-dark); border-color: var(--pi-accent-dark); color: #fff; }
.com-postit a:not(.btn) { color: var(--pi-accent-dark); }
.com-postit h1 { margin: 0; }
.pi-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1rem; margin-bottom: 1rem; }
.pi-head__count { margin: .2rem 0 0; color: var(--pi-muted); }
.pi-head__actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.pi-intro { margin-bottom: 1rem; }
.pi-section-title { margin: 1.75rem 0 .9rem; font-size: 1.35rem; }
.pi-empty { padding: 1.5rem; border-radius: var(--pi-radius); background: #f7f6f3; color: var(--pi-muted); text-align: center; }
.pi-total { margin: .5rem 0; color: var(--pi-muted); font-size: .95rem; }
.pi-help { color: var(--pi-muted); font-size: .9rem; }
.pi-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* quick search of the home page */
.pi-quicksearch { display: flex; gap: .5rem; padding: .75rem; border-radius: var(--pi-radius); background: var(--pi-soft); }
.pi-quicksearch input { flex: 1 1 auto; min-width: 0; padding: .65rem .9rem; border: 1px solid #c8dcdc; border-radius: 10px; font-size: 1rem; }

/* categories */
.pi-cats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1rem; }
.pi-cat { border: 1px solid var(--pi-line); border-radius: var(--pi-radius); background: #fff; padding: .9rem 1rem; }
.pi-cat__main { display: flex; align-items: center; gap: .75rem; text-decoration: none; }
.pi-cat__img { width: 48px; height: 48px; border-radius: 12px; object-fit: contain; flex: none; background: var(--pi-soft); }
.pi-cat__img--none { display: inline-flex; align-items: center; justify-content: center; color: var(--pi-accent); font-weight: 700; font-size: 1.3rem; }
.pi-cat__title { flex: 1 1 auto; font-weight: 700; font-size: 1.08rem; color: var(--pi-text); }
.pi-cat__count { min-width: 2rem; padding: .15rem .55rem; border-radius: 1rem; background: var(--pi-soft); color: var(--pi-accent-dark); font-weight: 700; font-size: .85rem; text-align: center; }
.pi-cat__main:hover .pi-cat__title { color: var(--pi-accent-dark); }
.pi-cat__subs { list-style: none; margin: .6rem 0 0; padding: .6rem 0 0; border-top: 1px solid #f0eeea; display: flex; flex-wrap: wrap; gap: .25rem .9rem; font-size: .93rem; }
.pi-cat__subs a { text-decoration: none; }
.pi-cat__subs span { color: var(--pi-muted); }
.pi-chips { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.pi-chips a { display: inline-flex; gap: .4rem; padding: .4rem .85rem; border: 1px solid #c8dcdc; border-radius: 2rem; background: #fff; text-decoration: none; font-weight: 600; }
.pi-chips a span { color: var(--pi-muted); font-weight: 400; }
.pi-chips a:hover { background: var(--pi-soft); }

/* cards */
.pi-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 1rem; }
.pi-card { border: 1px solid var(--pi-line); border-radius: var(--pi-radius); background: #fff; overflow: hidden; transition: box-shadow .15s, transform .15s; }
.pi-card:hover { box-shadow: 0 6px 18px rgba(30, 30, 20, .12); transform: translateY(-2px); }
.pi-card--featured { border-color: #f2c94c; box-shadow: 0 0 0 2px #fbe9a8 inset; }
.pi-card--closed { opacity: .72; }
.pi-card__link { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; }
.pi-card__img { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--pi-soft); }
.pi-card__img img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; display: block; }
.pi-card__body { display: flex; flex-direction: column; gap: .3rem; padding: .75rem .9rem .9rem; }
.pi-card__price { font-size: 1.15rem; font-weight: 800; color: var(--pi-text); }
.pi-card__title { font-weight: 600; line-height: 1.3; color: var(--pi-accent-dark); }
.pi-card__desc { font-size: .9rem; color: var(--pi-muted); }
.pi-card__meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .2rem .6rem; margin-top: auto; font-size: .82rem; color: var(--pi-muted); }
.pi-badge { display: inline-block; padding: .15rem .55rem; border-radius: 1rem; font-size: .75rem; font-weight: 700; }
.pi-card__img .pi-badge { position: absolute; top: .55rem; left: .55rem; }
.pi-badge--featured { background: #f2c94c; color: #4a3800; }
.pi-badge--closed { background: #3d3c39; color: #fff; }
.pi-badge--count { background: #d54215; color: #fff; }
.pi-price { white-space: nowrap; }
.pi-price--text { font-weight: 700; color: var(--pi-accent-dark); }
.pi-price__nego { font-size: .75rem; font-weight: 600; color: var(--pi-muted); }

/* filters */
.pi-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem 1rem; margin: 0 0 1rem; padding: .9rem 1rem; border-radius: var(--pi-radius); background: #f7f6f3; }
.pi-filters__field { display: flex; flex-direction: column; gap: .25rem; min-width: 10rem; }
.pi-filters__field--q { flex: 1 1 16rem; }
.pi-filters__field label, .pi-filters__label { font-size: .82rem; font-weight: 700; color: var(--pi-muted); }
.pi-filters input, .pi-filters select { padding: .5rem .7rem; border: 1px solid #d9d7d2; border-radius: 10px; background: #fff; font-size: .98rem; }
.pi-filters__range { display: flex; gap: .4rem; }
.pi-filters__range input { width: 6.5rem; }
.pi-pagination { margin-top: 1.25rem; }

/* ad page */
.pi-ad__head { margin-bottom: 1rem; }
.pi-ad__cat { margin: 0 0 .3rem; font-weight: 700; }
.pi-ad__cat a { text-decoration: none; }
.pi-ad__title { font-size: clamp(1.5rem, 3vw, 2.1rem); }
.pi-ad__price { margin: .4rem 0; font-size: 1.6rem; font-weight: 800; }
.pi-ad__meta { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; margin: 0; color: var(--pi-muted); font-size: .93rem; }
.pi-ad__owner { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1rem; padding: .75rem; border-radius: var(--pi-radius); background: var(--pi-soft); }
.pi-ad__grid { display: grid; grid-template-columns: minmax(0, 1fr) 21rem; gap: 1.5rem; align-items: start; }
.pi-ad__subtitle { font-size: 1.2rem; margin: 1.25rem 0 .5rem; }
.pi-ad__desc { line-height: 1.6; }
.pi-gallery__main { margin: 0; border-radius: var(--pi-radius); overflow: hidden; background: #f3f2ee; }
.pi-gallery__main img { display: block; width: 100%; max-height: 32rem; object-fit: contain; }
.pi-gallery__main figcaption { padding: .4rem .75rem; font-size: .9rem; color: var(--pi-muted); }
.pi-gallery__main figcaption:empty { display: none; }
.pi-gallery__thumbs { list-style: none; margin: .5rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.pi-gallery__thumb { padding: 0; border: 2px solid transparent; border-radius: 10px; overflow: hidden; background: none; cursor: pointer; }
.pi-gallery__thumb img { display: block; width: 72px; height: 54px; object-fit: cover; }
.pi-gallery__thumb.is-active { border-color: var(--pi-accent); }
.pi-tags { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.pi-tags a { display: inline-block; padding: .25rem .7rem; border-radius: 1rem; background: var(--pi-soft); text-decoration: none; font-size: .9rem; }
.pi-box { margin-bottom: 1rem; padding: 1rem 1.1rem; border: 1px solid var(--pi-line); border-radius: var(--pi-radius); background: #fff; }
.pi-box__title { margin: 0 0 .6rem; font-size: 1.05rem; font-family: inherit; color: var(--pi-text); }
.pi-seller__name { display: flex; align-items: center; gap: .6rem; margin: 0 0 .3rem; font-weight: 700; }
.pi-seller__avatar { display: inline-flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--pi-accent); color: #fff; }
.pi-seller__since { margin: 0 0 .6rem; color: var(--pi-muted); font-size: .88rem; }
.pi-form { display: flex; flex-direction: column; gap: .35rem; }
.pi-form label { font-size: .85rem; font-weight: 700; color: #5d5a54; }
.pi-form input, .pi-form textarea, .pi-form select { padding: .5rem .7rem; border: 1px solid #d9d7d2; border-radius: 10px; font-size: 1rem; }
.pi-form .btn { margin-top: .4rem; }
.pi-report summary { cursor: pointer; color: var(--pi-muted); font-size: .9rem; }
.pi-report[open] { padding: .75rem 1rem; border: 1px solid var(--pi-line); border-radius: var(--pi-radius); }
.pi-similar { margin-top: 2rem; }

/* posting form */
.pi-fieldset { margin: 0 0 1rem; padding: 1rem 1.25rem; border: 1px solid var(--pi-line); border-radius: var(--pi-radius); background: #fff; }
.pi-fieldset legend { float: none; width: auto; padding: 0 .4rem; font-size: 1.1rem; font-weight: 700; }
.pi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0 1.25rem; }
.pi-upload { display: flex; align-items: center; gap: .75rem; padding: 1rem; border: 2px dashed #b9d6d6; border-radius: var(--pi-radius); background: var(--pi-soft); cursor: pointer; }
.pi-upload input { margin-left: auto; max-width: 14rem; }
.pi-upload .icon-image { font-size: 1.6rem; color: var(--pi-accent); }
.pi-preview, .pi-editimgs { list-style: none; margin: .75rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .75rem; }
.pi-preview img { width: 96px; height: 72px; object-fit: cover; border-radius: 8px; }
.pi-editimgs li { display: flex; flex-direction: column; gap: .3rem; width: 10rem; }
.pi-editimgs img { width: 100%; height: 7.5rem; object-fit: cover; border-radius: 10px; }
.pi-editimgs input[type=text] { padding: .35rem .5rem; border: 1px solid #d9d7d2; border-radius: 8px; font-size: .9rem; }
.pi-editimgs__del { font-size: .85rem; color: #a23b1d; }
.pi-editform__buttons { display: flex; gap: .5rem; }

/* my ads */
.pi-mylist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .75rem; }
.pi-myad { display: flex; gap: 1rem; padding: .75rem; border: 1px solid var(--pi-line); border-radius: var(--pi-radius); background: #fff; }
.pi-myad__img img { width: 8rem; height: 6rem; object-fit: cover; border-radius: 10px; display: block; }
.pi-myad__body { flex: 1 1 auto; min-width: 0; }
.pi-myad__state { margin: 0; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; font-size: .85rem; }
.pi-myad__title { margin: .2rem 0; font-size: 1.1rem; font-family: inherit; }
.pi-myad__title a { text-decoration: none; }
.pi-myad__meta { margin: 0 0 .5rem; color: var(--pi-muted); font-size: .9rem; }
.pi-myad__actions { display: flex; flex-wrap: wrap; gap: .4rem; }
.pi-status { padding: .15rem .6rem; border-radius: 1rem; font-weight: 700; }
.pi-status--1 { background: #e3f3e6; color: #2e6b35; }
.pi-status--0 { background: #fff3cd; color: #7a5a00; }
.pi-status--2 { background: #eceae6; color: #4d4a44; }
.pi-status--expired { background: #fbe4dc; color: #9b2c0b; }

/* messages */
.pi-convs { list-style: none; margin: 0; padding: 0; border: 1px solid var(--pi-line); border-radius: var(--pi-radius); overflow: hidden; }
.pi-conv + .pi-conv { border-top: 1px solid var(--pi-line); }
.pi-conv a { display: grid; grid-template-columns: 1fr auto; gap: .15rem 1rem; padding: .8rem 1rem; text-decoration: none; color: inherit; }
.pi-conv a:hover { background: #f7f6f3; }
.pi-conv--unread { background: var(--pi-soft); }
.pi-conv__ad { font-weight: 700; color: var(--pi-accent-dark); }
.pi-conv__who, .pi-conv__date { font-size: .88rem; color: var(--pi-muted); }
.pi-conv__last { grid-column: 1 / -1; font-size: .93rem; }
.pi-thread { list-style: none; margin: 1rem 0; padding: 0; display: flex; flex-direction: column; gap: .75rem; }
.pi-msg { max-width: 42rem; padding: .75rem 1rem; border-radius: var(--pi-radius); background: #f3f2ee; }
.pi-msg--mine { align-self: flex-end; background: var(--pi-soft); }
.pi-msg__who { margin: 0 0 .3rem; font-size: .85rem; color: var(--pi-muted); }
.pi-reply { max-width: 42rem; }

@media (max-width: 991.98px) {
    .pi-ad__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 575.98px) {
    .pi-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
    .pi-card__body { padding: .55rem .6rem .7rem; }
    .pi-card__price { font-size: 1rem; }
    .pi-filters__field { min-width: 0; flex: 1 1 45%; }
    .pi-myad { flex-direction: column; }
    .pi-myad__img img { width: 100%; height: 10rem; }
    .pi-quicksearch .btn span + * { display: none; }
}

/* modules */
.pi-msearch .btn-primary { background-color: #0f7b83; border-color: #0f7b83; color: #fff; }
.pi-msearch .btn-primary:hover { background-color: #0b5d63; border-color: #0b5d63; }
.pi-mcats { list-style: none; margin: 0; padding: 0; }
.pi-mcats > li + li { border-top: 1px solid #f0eeea; }
.pi-mcats__main { display: flex; justify-content: space-between; gap: .5rem; padding: .45rem .25rem; color: #2f2c27; font-weight: 600; text-decoration: none; }
.pi-mcats__main:hover { color: #0b5d63; }
.pi-mcats__n { min-width: 1.8rem; padding: 0 .45rem; border-radius: 1rem; background: #e8f4f4; color: #0b5d63; font-size: .82rem; text-align: center; line-height: 1.6; }
.pi-mcats__subs { list-style: none; margin: 0 0 .45rem; padding: 0 0 0 .75rem; display: flex; flex-wrap: wrap; gap: .1rem .75rem; font-size: .9rem; }
.pi-mcats__subs a { color: #0b5d63; text-decoration: none; }
.pi-mcats__subs span { color: #7a7468; }
.pi-msearch { display: flex; flex-direction: column; gap: .5rem; }
.pi-msearch input, .pi-msearch select { width: 100%; padding: .5rem .7rem; border: 1px solid #d9d7d2; border-radius: 10px; font-size: .98rem; background: #fff; }
.pi-msearch__post { font-weight: 700; color: #0b5d63; text-decoration: none; text-align: center; }
.pi-mtags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem .6rem; align-items: baseline; }
.pi-mtags__t { color: #0b5d63; text-decoration: none; line-height: 1.3; }
.pi-mtags__t:hover { text-decoration: underline; }
.pi-mtags__t--1 { font-size: .85rem; } .pi-mtags__t--2 { font-size: .95rem; } .pi-mtags__t--3 { font-size: 1.05rem; } .pi-mtags__t--4 { font-size: 1.2rem; font-weight: 600; } .pi-mtags__t--5 { font-size: 1.35rem; font-weight: 700; }
.pi-mlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.pi-mlist a { display: grid; grid-template-columns: 64px 1fr; grid-template-rows: auto auto; gap: 0 .65rem; color: inherit; text-decoration: none; }
.pi-mlist img { grid-row: 1 / 3; width: 64px; height: 48px; object-fit: cover; border-radius: 8px; }
.pi-mlist__t { font-weight: 600; color: #0b5d63; line-height: 1.25; }
.pi-mlist__p { font-size: .9rem; font-weight: 700; }
.pi-cards--module { grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: .75rem; }

/* Category icons (drawn sprite, same style as the recipe themes) */
.pi-caticon { display: block; flex: none; background: none !important; border-radius: 0; }
.pi-subicon { width: 22px; height: 22px; flex: none; border-radius: 6px; object-fit: contain; vertical-align: -6px; margin-right: .35rem; }
span.pi-subicon { display: inline-flex; align-items: center; justify-content: center; background: var(--pi-soft); color: var(--pi-accent); font-size: .75rem; font-weight: 700; }
.pi-cat__subs a, .pi-chips a { display: inline-flex; align-items: center; gap: .3rem; }
.pi-subicon { margin-right: 0; }
.pi-head__title { display: flex; align-items: center; gap: .6rem; }
.pi-head__icon { width: 44px; height: 44px; flex: none; border-radius: 12px; object-fit: contain; }
span.pi-head__icon { display: inline-flex; align-items: center; justify-content: center; background: var(--pi-soft); color: var(--pi-accent); font-size: 1.2rem; }
.pi-mcats__main { align-items: center; }
.pi-mcats__icon { width: 28px; height: 28px; flex: none; border-radius: 8px; object-fit: contain; }
span.pi-mcats__icon { display: inline-flex; align-items: center; justify-content: center; background: #e8f4f4; color: #0b5d63; font-size: .85rem; }
.pi-mcats__t { flex: 1 1 auto; }