/* shop: shop, category, flavour and search templates (main.nv-shop). Card look comes from theme.css
   (.wc-block-product rules shared with the homepage); only archive-specific layout lives here. */

.nv-shop { padding-top: var(--wp--preset--spacing--30) !important; }
.nv-shop__crumbs { font-size: .85rem; color: var(--wp--preset--color--ink-soft); margin-bottom: 1rem; }
.nv-shop__crumbs a { color: var(--wp--preset--color--maroon); }
.nv-shop__head { margin-bottom: 1.25rem; }
.nv-shop__head .nv-shop__title { font-size: clamp(2.1rem, 4vw, 3.25rem); margin: 0 0 .5rem; }
.nv-shop__intro, .nv-shop__intro p { color: var(--wp--preset--color--ink-soft); max-width: 60ch; margin: 0; }

/* bar: flavour pills left, count + sorting right */
.nv-shop__bar { gap: 1rem 1.5rem; margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--wp--preset--color--sand); }
.nv-shop__pills { gap: .5rem; }
.nv-shop__pill { --pill: var(--wp--preset--color--maroon); }
.nv-shop__pill--limbu-phudina { --pill: var(--wp--preset--color--green); }
.nv-shop__pill--tomato { --pill: var(--wp--preset--color--tomato); }
.nv-shop__pill .wp-block-button__link {
  display: inline-flex; align-items: center; min-height: 44px; box-sizing: border-box;
  padding: .55rem 1.15rem; font-size: .9rem; font-weight: 600;
  background: transparent; color: var(--pill); border: 1.5px solid var(--pill);
}
.nv-shop__pill .wp-block-button__link:hover,
body.post-type-archive-product:not(.search) .nv-shop__pill--all .wp-block-button__link,
body.tax-product_cat .nv-shop__pill--all .wp-block-button__link,
body.term-limbu-phudina .nv-shop__pill--limbu-phudina .wp-block-button__link,
body.term-tomato .nv-shop__pill--tomato .wp-block-button__link { background: var(--pill); color: #fff; }

.nv-shop__sort { gap: .5rem 1rem; }
.nv-shop__sort .wc-block-product-results-count .woocommerce-result-count { margin: 0; font-size: .875rem; color: var(--wp--preset--color--ink-soft); }
.nv-shop__sort .woocommerce-ordering { margin: 0; }
.nv-shop__sort .woocommerce-ordering select {
  appearance: none; -webkit-appearance: none; min-height: 44px; box-sizing: border-box;
  padding: .5rem 2.4rem .5rem 1rem; border: 1.5px solid var(--wp--preset--color--sand); border-radius: 999px;
  font: 500 .875rem/1.2 var(--wp--preset--font-family--body); color: var(--wp--preset--color--ink); cursor: pointer;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A1B2E' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right .9rem center / 16px no-repeat;
}
/* Woo's field-sizing:content resizes the select to the picked option, re-wrapping the bar after a sort */
.nv-shop__sort .woocommerce.wc-block-catalog-sorting select.orderby { field-sizing: fixed; }
.nv-shop__sort .woocommerce-ordering select:hover { border-color: var(--wp--preset--color--maroon); }
.nv-shop__sort .woocommerce-ordering select:focus-visible { outline: 2px solid var(--wp--preset--color--maroon); outline-offset: 2px; }

/* grid: 2-up cards on phones, 3-up on tablets, 4-up on desktop; centred so 1-2 SKUs do not leave half the row empty */
.nv-shop .nv-shop__grid .wc-block-product-template.wc-block-product-template {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 1.75rem 1rem; margin: 0; padding: 0; list-style: none;
}
.nv-shop .nv-shop__grid .wc-block-product-template > .wc-block-product { flex: 0 0 calc((100% - 1rem) / 2); width: auto; margin: 0; }
@media (min-width: 782px) {
  .nv-shop .nv-shop__grid .wc-block-product-template.wc-block-product-template { gap: 2rem 1.5rem; }
  .nv-shop .nv-shop__grid .wc-block-product-template > .wc-block-product { flex-basis: calc((100% - 3rem) / 3); }
}
@media (min-width: 1200px) { .nv-shop .nv-shop__grid .wc-block-product-template > .wc-block-product { flex-basis: calc((100% - 4.5rem) / 4); } }

/* size chips: 2x2 whenever the card is too narrow for one row (phones, 3-up tablets) */
.nv-shop .wc-block-product { container-type: inline-size; }
@container (max-width: 270px) {
  .nv-shop .wc-block-product .nv-chips { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem; }
  .nv-shop .wc-block-product .nv-chips a { justify-content: center; padding-inline: .3rem; }
}

/* card title is an h2 here (h1 above it); keep the homepage h3 look instead of the global Oswald h2 */
.nv-shop .wc-block-product .nv-card__title {
  font-family: var(--wp--preset--font-family--body); text-transform: none; letter-spacing: 0; line-height: 1.3; color: var(--wp--preset--color--ink);
}

.nv-shop__pages { margin-top: 2.5rem; gap: .5rem; }
.nv-shop__pages a, .nv-shop__pages .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; border-radius: 999px; }
.nv-shop__pages .page-numbers.current { background: var(--wp--preset--color--maroon); color: #fff; }

/* empty state */
.nv-shop__empty { padding: var(--wp--preset--spacing--50) 1rem; text-align: center; background: var(--wp--preset--color--paper); border-radius: var(--nv-radius); }
.nv-shop__empty > * + * { margin-top: 1rem; }
.nv-shop__search .wp-block-search__inside-wrapper { max-width: 420px; margin-inline: auto; }
.nv-shop__search .wp-block-search__input { min-height: 44px; border: 1.5px solid var(--wp--preset--color--sand); border-radius: 999px; padding: .5rem 1.1rem; }
.nv-shop__search .wp-block-search__button { min-height: 44px; border-radius: 999px; margin-left: .5rem; padding: .5rem 1.25rem; }

/* 44px breadcrumb tap targets on phones and touch tablets */
@media (max-width: 781px), (pointer: coarse) {
  .nv-shop__crumbs { margin-bottom: .25rem; }
  .nv-shop__crumbs a { display: inline-block; padding: .75rem 0; text-align: center; }   /* theme.css adds min-width 44px: centre short words like "Shop" in it */
}
/* stacked up to 899px: pills + count + sorting need ~840px in one row, so 782-899 would wrap only once the web font
   loads and shift the grid; stacking there is the same layout before and after the font swap */
@media (max-width: 899px) {
  /* nowrap: a wrapping column flex line is as wide as its widest child, which pushed pills and sorting into the gutter */
  .nv-shop__bar { flex-direction: column; flex-wrap: nowrap !important; align-items: stretch !important; }
  .nv-shop__sort { justify-content: space-between; }
}
@media (max-width: 781px) {
  .nv-shop__pills { gap: .4rem; }
  .nv-shop__pill .wp-block-button__link { padding-inline: .75rem; font-size: .8125rem; white-space: nowrap; }
}
@media (max-width: 599px) {
  .nv-shop .wc-block-product .wc-block-components-product-image { padding: 8px; margin-bottom: .75rem; }
  .nv-shop .wc-block-product .nv-card__title { font-size: .95rem; }
  .nv-shop .wc-block-product .nv-card__summary { font-size: .8rem; }
  .nv-shop .wc-block-product .nv-card__price { font-size: .95rem; }
  .nv-shop .wc-block-product .nv-card__btn .wc-block-components-product-button__button { min-height: 44px; padding: .7rem .5rem; font-size: .875rem; }
}