/* Platform v3, Nigeria's last pages in Black and gold: a category, search, bridal
   and events, and the press-on nails list, set and order (public/v3/nigeria-*).
   Loaded by those views only (@push('head')), after site.css, and built on its
   pb-* tokens and classes; only what they lack is here (ng-*). Breakpoints as
   site.css: small <=719px, wide >=1040px. */

/* A line that says plainly why nothing can be booked yet. */
.ng-honest { max-width: 52ch; color: var(--pb-ink-74); }

/* A category's services: a thumbnail when the service has its own photo, the name
   and its words, and Annel's price. */
.ng-menu { display: grid; margin: 0; padding: 0; list-style: none; }
.ng-menu__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; align-items: center; padding: 14px 0; border-top: 1px solid var(--pb-line-08); }
.ng-menu__row--photo { grid-template-columns: 60px minmax(0, 1fr) auto; }
.ng-menu__thumb { width: 60px; height: 60px; overflow: hidden; border: 1px solid var(--pb-line-09); border-radius: 12px; background: var(--pb-raised); }
.ng-menu__thumb img { width: 100%; height: 100%; object-fit: cover; }
.ng-menu__text { display: grid; gap: 3px; }
.ng-menu__name { font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--pb-ink); }
.ng-menu__text small { font-size: 13px; line-height: 1.5; color: var(--pb-ink-64); }
.ng-menu__price { font-family: var(--pb-mono); font-size: 14.5px; color: var(--pb-gold-soft); white-space: nowrap; text-align: right; }
.ng-menu__price.is-quiet { font-family: var(--pb-font); font-size: 13px; color: var(--pb-ink-64); white-space: normal; max-width: 14ch; }
@media (max-width: 719px) {
    .ng-menu__row, .ng-menu__row--photo { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
    .ng-menu__row--photo { grid-template-columns: 52px minmax(0, 1fr); }
    .ng-menu__row--photo .ng-menu__price { grid-column: 2; text-align: left; }
    .ng-menu__thumb { width: 52px; height: 52px; }
}

/* Other categories: site.css's link chips. On a phone they scroll edge to edge, and
   the reset's ul[class] { padding: 0 } would put the first chip against the edge. */
@media (max-width: 719px) { ul.ng-others { padding: 2px var(--pb-pad) 4px; } }

/* Search: the words field takes the wider share of the row. */
.pb-search__fields > .ng-grow { flex-grow: 2; }

/* Bridal and events: the head and one readable column for the form. */
.ng-eventhead { gap: 16px; }
.ng-eventhead .pb-lede { max-width: 52ch; }
.ng-formwrap { max-width: 820px; }
.ng-checks { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 719px) { .ng-checks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Press-on nails: the nail types under a set's name, and its "From" price. */
.ng-prod__types { font-size: 12.5px; line-height: 1.4; color: var(--pb-ink-64); }
.ng-from { font-size: 20px; }

/* Sizes: XS to L four across, "Not sure" on its own row. */
.ng-sizes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ng-sizes .pb-choice { justify-content: center; }
.ng-sizes .ng-sizes__wide { grid-column: 1 / -1; justify-content: flex-start; }
@media (max-width: 719px) { .pb-choices.ng-sizes { grid-template-columns: repeat(4, minmax(0, 1fr)); } .ng-sizes .pb-choice { padding: 8px 10px; } }
.ng-qty { max-width: 180px; }