/*
 * botiga.css — el vestit de la botiga de Quei15 sobre l'stack
 *
 * Va al tema fill, al costat de `botiga-vestit.php`. Aquí NO hi ha res que
 * es pugui dir amb una opció de The7: si una mida, un color o unes columnes
 * es poden demanar per Theme Options, es demanen allà (ho fa
 * `vesteix-botiga.php`) i no es repeteixen aquí.
 *
 * Els selectors surten del HTML SERVIT per /mockup/index.php/shop/, no de
 * suposar-los:
 *
 *   .wf-container.dt-products.products     el contenidor de la graella
 *     .wf-cell                             cada cel·la
 *       article.product.q15-obra           la fitxa (classes q15-* nostres)
 *         figure.woocom-project            el pare POSICIONAT de la targeta
 *           .woo-buttons-on-img > a > img  la imatge
 *           span.out-stock-label           el «Out of stock» de The7
 *         figcaption.woocom-list-content   el text
 *           p.q15-autor                    nostre
 *           h4.entry-title                 el títol
 *           span.price                     el preu (+ .woocommerce-price-suffix)
 *           .woocommerce-product-details__short-description
 *           .woo-buttons                   el botó, quan va sota la imatge
 *
 * ⚠ Especificitat. La lliçó de la capçalera del banc: `.a .b` (dues
 * classes) guanya a `.b` (una), i al HTML servit això no es veu de cap
 * manera. Els selectors d'aquest full porten sempre el contenidor al
 * davant per no haver de recórrer a `!important`; on n'hi ha, és perquè
 * s'ha mesurat que calia.
 */

/* ---------------------------------------------------------- paleta v3 */
/*
 * Els mateixos valors que `css/styles.css` del mockup. Els àlies de blau
 * hi són perquè el sistema v3 els va reconvertir a negre i gris, i el
 * mockup encara els demana pel nom vell.
 */
.woocommerce,
#sidebar,
.dt-products,
.products-shortcode {
  --q15-blanc: #FFFFFF;
  --q15-negre: #141414;
  --q15-gris-text: #565656;
  --q15-gris-mig: #8A8A8A;
  --q15-gris-linia: #E6E6E3;
  --q15-gris-fons: #F6F6F4;
  --q15-gris-tint: #EFEFEC;
  --q15-accent: #00A29C;
  --q15-gir: -1.4deg;
  --q15-titols: 'Archivo', system-ui, sans-serif;
  --q15-cos: 'Source Sans 3', 'Segoe UI', system-ui, sans-serif;
}

/* ═══════════════════════ la barra lateral de filtres ═══════════════════ */

/*
 * `.filtres__blocs` del mockup: filet negre gruixut a dalt de tota la
 * columna. A The7 la columna és `#sidebar > .sidebar-content`.
 */
#sidebar .sidebar-content {
  border-top: 3px solid var(--q15-negre);
  font-family: var(--q15-cos);
  font-size: 16px;
}

#sidebar .sidebar-content .widget {
  border: 0;
  padding: 0;
  margin: 22px 0 0;
}

/* `.filtres h3` i `.filtres summary` són el mateix titolet. */
#sidebar .sidebar-content .widget-title,
#sidebar .sidebar-content .widget-title h3 {
  font-family: var(--q15-titols);
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  line-height: 1.6;
  color: var(--q15-negre);
  margin: 0 0 10px;
  padding: 0;
}

/* Els blocs a partir del segon porten filet, com els <details> del mockup. */
#sidebar .sidebar-content .widget + .widget {
  border-top: 1px solid var(--q15-gris-linia);
  padding-top: 14px;
}

#sidebar .sidebar-content ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

#sidebar .sidebar-content li {
  margin: 0 0 7px;
  padding: 0;
  border: 0;
  list-style: none;
}

/*
 * La casella. La navegació per capes de WooCommerce pinta enllaços, no
 * `<input type=checkbox>`; el quadret és un pseudoelement i l'estat marcat
 * ve de la classe `chosen`, que és la que hi posa Woo
 * (class-wc-widget-layered-nav.php, `wc-layered-nav-term chosen`).
 */
#sidebar .sidebar-content li > a {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--q15-gris-text);
  font-size: 16px;
  line-height: 1.6;
}

#sidebar .sidebar-content li > a::before {
  content: '';
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--q15-gris-mig);
  background: var(--q15-blanc);
}

#sidebar .sidebar-content li > a:hover {
  color: var(--q15-negre);
}

#sidebar .sidebar-content li > a:hover::before {
  border-color: var(--q15-negre);
}

#sidebar .sidebar-content li.chosen > a::before,
#sidebar .sidebar-content li.current-cat > a::before {
  background: var(--q15-accent);
  border-color: var(--q15-accent);
  /* la marca de verificat, dibuixada amb dos filets */
  box-shadow: inset 0 0 0 2px var(--q15-blanc), inset 0 0 0 8px var(--q15-accent);
}

#sidebar .sidebar-content li.chosen > a,
#sidebar .sidebar-content li.current-cat > a {
  color: var(--q15-negre);
  font-weight: 600;
}

/*
 * Els comptes «(20)». La navegació per capes de Woo els pinta sempre i el
 * mockup no en té cap: les caselles de `obres.html` porten només el nom.
 */
#sidebar .sidebar-content .count {
  display: none;
}

/*
 * Categories jeràrquiques: «Obra» i «Altres productes» són els dos pares i
 * fan de titolet, com els <h3> del mockup. No porten casella.
 */
#sidebar .product-categories > li > a {
  font-family: var(--q15-titols);
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  line-height: 1.6;
  color: var(--q15-negre);
  margin-bottom: 10px;
}

#sidebar .product-categories > li > a::before {
  display: none;
}

#sidebar .product-categories > li + li {
  margin-top: 22px;
}

#sidebar .product-categories .children {
  margin-left: 0;
}

/* ═════════════════════════ la barra de dalt ════════════════════════════ */

/* `.botiga__barra`: recompte a l'esquerra, ordenació a la dreta. */
/* Al mòbil, el botó flotant dels filtres de The7 (`.wc-sidebar-toggle`,
 * 40x40 arrapat a l'esquerra) tapava el «ORDENA PER» — mesurat a 390px:
 * el botó a y=337-377 i la barra a y=355. Se li fa lloc. */
@media (max-width: 768px) {
  .woocommerce .switcher-wrap {
    padding-left: 52px;
  }
}

.woocommerce .switcher-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--q15-gris-linia);
}

.woocommerce .switcher-wrap .q15-compte {
  font-family: var(--q15-cos);
  font-size: 16px;
  line-height: 1.6;
  color: var(--q15-gris-text);
  margin: 0;
}

.woocommerce .switcher-wrap .q15-compte strong {
  color: var(--q15-negre);
  font-weight: 700;
}

.woocommerce .switcher-wrap .woocommerce-ordering {
  margin: 0;
}

/* ═══════════════════════════ la fitxa d'obra ═══════════════════════════ */

:is(.dt-products, .products-shortcode) .q15-obra .woocom-project {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* la fitxa sencera tambe ha d'omplir la cel·la, o la figura no te d'on estirar */
:is(.dt-products, .products-shortcode) article.q15-obra {
  height: 100%;
}

:is(.dt-products, .products-shortcode) .q15-obra .woocom-list-content {
  flex: 1 1 auto;
}

/* --- imatge: quadrada, continguda, sobre el gris de fons --- */
:is(.dt-products, .products-shortcode) .q15-obra .woo-buttons-on-img > a {
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--q15-gris-fons);
  padding: 14px;
  margin-bottom: 14px;
  position: relative;
}

/*
 * El filet magenta que puja en passar-hi per damunt — el mateix de
 * cards/blocs/artistes (petició 08-2026: TOTES les imatges clicables,
 * productes inclosos). L'enllaç de la imatge és el pare posicionat.
 */
:is(.dt-products, .products-shortcode) .q15-obra .woo-buttons-on-img > a::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background: var(--q15-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
  z-index: 2;
}

:is(.dt-products, .products-shortcode) .q15-obra:hover .woo-buttons-on-img > a::after,
:is(.dt-products, .products-shortcode) .q15-obra .woo-buttons-on-img > a:focus-visible::after {
  transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
  :is(.dt-products, .products-shortcode) .q15-obra .woo-buttons-on-img > a::after {
    transition: none;
  }
}

:is(.dt-products, .products-shortcode) .q15-obra .woo-buttons-on-img > a img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform .3s ease;
}

:is(.dt-products, .products-shortcode) .q15-obra:hover .woo-buttons-on-img > a img {
  transform: translateY(-5px);
}

/*
 * El «Out of stock» de The7. El text és literal a la plantilla
 * (`mod-wc-product-desc-under.php:20`, `__( 'Out of stock', 'the7mk2' )`) i
 * no té cap filtre: s'amaga i el substitueix el nostre `.q15-marca`.
 */
:is(.dt-products, .products-shortcode) .q15-obra .out-stock-label {
  display: none;
}

/* --- distintiu ---
 * V2 (client, 07-09-2026): «mai posarem els elements informatius sobre la
 * imatge». El distintiu baixa de la imatge al text, com a primera línia de la
 * fitxa (order 0, davant de l'autor), recte i petit. */
:is(.dt-products, .products-shortcode) .q15-obra .q15-marca {
  order: 0;
  align-self: flex-start;
  font-family: var(--q15-titols);
  font-stretch: 87.5%;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1.6;
  background: var(--q15-negre);
  color: var(--q15-blanc);
  padding: 3px 8px 2px;
  margin: 0 0 8px;
}

/* Al mockup, «Venuda» i «Reservada» porten el seu propi to. */
:is(.dt-products, .products-shortcode) .q15-obra .q15-marca--venuda {
  background: #3A3A3A;
}

:is(.dt-products, .products-shortcode) .q15-obra .q15-marca--reservada {
  background: var(--q15-gris-mig);
}

/* El distintiu «Disponible» de la portada i el «Sèrie limitada» de les
   samarretes: a la v2 no es pinten (el client no vol rètols que no informin). */
:is(.dt-products, .products-shortcode) .q15-obra .q15-marca--disponible,
:is(.dt-products, .products-shortcode) .q15-obra .q15-marca--serie,
:is(.dt-products, .products-shortcode) .q15-obra .q15-marca--novetat {
  display: none;
}

/* --- text: l'ordre del mockup, que els ganxos de The7 no donen --- */
/*
 * The7 pinta preu (prioritat 5 de `woocommerce_after_shop_loop_item_title`)
 * abans que la descripció curta (`woocommerce_shop_loop_item_desc`, 15).
 * El mockup les vol al revés: autor, títol, dades, preu, botó.
 */
:is(.dt-products, .products-shortcode) .q15-obra .woocom-list-content {
  display: flex;
  flex-direction: column;
  text-align: left;
  font-family: var(--q15-cos);
}

:is(.dt-products, .products-shortcode) .q15-obra .q15-autor { order: 1; }
:is(.dt-products, .products-shortcode) .q15-obra .entry-title { order: 2; }
:is(.dt-products, .products-shortcode) .q15-obra .woocommerce-product-details__short-description { order: 3; }
:is(.dt-products, .products-shortcode) .q15-obra .price { order: 4; }
:is(.dt-products, .products-shortcode) .q15-obra .woo-buttons { order: 5; }

:is(.dt-products, .products-shortcode) .q15-obra .q15-autor {
  font-family: var(--q15-titols);
  font-size: 17px;
  font-weight: 700;
  color: var(--q15-negre);
  line-height: 1.6;
  margin: 0;
}

:is(.dt-products, .products-shortcode) .q15-obra .entry-title,
:is(.dt-products, .products-shortcode) .q15-obra .entry-title a {
  font-family: var(--q15-cos);
  font-size: 16.5px;
  font-weight: 400;
  font-style: italic;
  color: var(--q15-negre);
  line-height: 1.6;
  margin: 0 0 4px;
  text-transform: none;
  letter-spacing: 0;
}

:is(.dt-products, .products-shortcode) .q15-obra .woocommerce-product-details__short-description,
:is(.dt-products, .products-shortcode) .q15-obra .woocommerce-product-details__short-description p {
  font-size: 14.5px;
  color: var(--q15-gris-text);
  line-height: 1.45;
  margin: 0 0 10px;
}

:is(.dt-products, .products-shortcode) .q15-obra .price {
  font-family: var(--q15-titols);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--q15-negre);
  margin: 0 0 14px;
}

/* El «+ IVA» és el sufix de preu de WooCommerce (opció, no codi). */
:is(.dt-products, .products-shortcode) .q15-obra .price .woocommerce-price-suffix {
  font-size: 13px;
  font-weight: 600;
  color: var(--q15-gris-text);
}

/* --- venuda: imatge apagada i preu ratllat, com `.producte--venut` --- */
:is(.dt-products, .products-shortcode) .q15-venuda .woo-buttons-on-img > a,
:is(.dt-products, .products-shortcode) .q15-reservada .woo-buttons-on-img > a {
  opacity: .55;
}

:is(.dt-products, .products-shortcode) .q15-venuda .price,
:is(.dt-products, .products-shortcode) .q15-reservada .price {
  text-decoration: line-through;
  color: var(--q15-gris-text);
}

/* --- botó: `.btn-fitxa--ple`, a tota l'amplada i arran de baix --- */
:is(.dt-products, .products-shortcode) .q15-obra .woo-buttons {
  margin-top: auto;
  width: 100%;
}

/* V2: el botó de la casa — blanc, filet prim, majúscules; negre en passar-hi. */
:is(.dt-products, .products-shortcode) .q15-obra .woo-buttons .button,
:is(.dt-products, .products-shortcode) .q15-obra .woo-buttons a {
  box-sizing: border-box;
  text-transform: uppercase;
  line-height: 1.2;
  display: block;
  width: 100%;
  text-align: center;
  font-family: var(--q15-titols);
  font-stretch: 87.5%;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  padding: 12px 18px;
  border: 1px solid var(--q15-negre);
  border-radius: 0;
  background: var(--q15-blanc);
  color: var(--q15-negre);
  transition: background-color .2s, color .2s;
}

:is(.dt-products, .products-shortcode) .q15-obra .woo-buttons a:hover {
  background: var(--q15-negre);
  color: var(--q15-blanc);
}

/* Venuda i reservada: el botó existeix però no convida.
 *
 * ⚠ AMB `opacity` NO, I ÉS UNA FALLA D'ACCESSIBILITAT MESURADA. El
 * `opacity: .55` que hi havia deixava el negre #141414 en un #7e7e7e efectiu
 * sobre blanc: **4,05:1**, per sota del 4,5 que demana la WCAG AA per a text
 * (axe-core ho va marcar a la portada, 17-08-2026). I l'excepció dels controls
 * desactivats no hi val: el botó és un enllaç viu que porta a la fitxa de
 * l'obra.
 *
 * Es diu amb un gris que sí que passa —el mateix `--q15-gris-text`, 7,3:1— i
 * amb el filet més clar, que és el que fa la feina de «no convida» sense
 * tocar la llegibilitat.
 */
:is(.dt-products, .products-shortcode) .q15-venuda .woo-buttons a,
:is(.dt-products, .products-shortcode) .q15-reservada .woo-buttons a {
  background: var(--q15-blanc);
  color: var(--q15-gris-text, #565656);
  border-color: var(--q15-gris-linia, #E6E6E3);
}

:is(.dt-products, .products-shortcode) .q15-venuda .woo-buttons a:hover,
:is(.dt-products, .products-shortcode) .q15-reservada .woo-buttons a:hover {
  background: var(--q15-gris-tint);
  color: var(--q15-negre);
}

/* ══════════════════════════ la fitxa d'artista ═════════════════════════ */

/*
 * La capçalera de l'arxiu de `pa_artista`: retrat a l'esquerra, qui és i on
 * ha exposat a la dreta. Per sota de 780px s'apila, que és on la columna de
 * text es queda estreta amb el retrat al costat.
 */
.q15-artista-fitxa {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: clamp(24px, 3vw, 44px);
  align-items: start;
  margin-bottom: clamp(32px, 4vw, 52px);
  padding-bottom: clamp(28px, 3.5vw, 44px);
  border-bottom: 1px solid var(--q15-gris-linia, #E6E6E3);
}

@media (max-width: 780px) {
  .q15-artista-fitxa { grid-template-columns: 1fr; }
  .q15-artista-retrat { max-width: 260px; }
}

.q15-artista-retrat img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  background: var(--q15-gris-fons, #F6F6F4);
}

/*
 * La capçalera de l'arxiu de `pa_exposicio`: el cartell i el text del client.
 *
 * ⚠ El cartell viu DINS de la descripció del terme, no en una meta, perquè
 * `wc/v3` no escriu metes de terme (vegeu sembra-cartells-exposicio.mjs). Per
 * això aquí es vesteix un `<figure>` que és germà del text i no una columna
 * pròpia: el marcatge el mana WordPress en pintar la descripció.
 *
 * El cartell NO es retalla —són cartells d'exposició, amb el títol, les dates
 * i els noms a dins: qualsevol retall se n'endú informació—. Va sencer i a la
 * seva proporció.
 *
 * ⚠ FINS AL 17-08-2026 AIXÒ VESTIA UNA ALTRA COSA. El que hi havia (`float`
 * de 320px, `max-height: 460px`, `object-fit: contain` i un fons gris) estava
 * fet per a les BANDES apaïsades de 401x134 que servia la llista del Wix. Ara
 * els cartells són els originals del client i **els vint són verticals**
 * (fins a 1755x2481): amb aquell vestit, la caixa grisa quedava mig buida i el
 * cartell, minúscul. L'Albert ho va dir clar —«la imatge sencera del cartell
 * és el que agafa sentit quan entres a dins un post»—, i per això aquí no hi
 * ha ni `object-fit` ni fons: si la imatge omple la seva caixa, no hi ha res
 * a emplenar per sota.
 *
 * ⚠ I ES QUEDA EN `float`, NO ES FA GRAELLA. El `<figure>` i el text són
 * germans dins del `<header class="woocommerce-products-header">`, que és de
 * WooCommerce i no és nostre: hi pot aparèixer qualsevol altra cosa (un avís,
 * una ordenació) i una graella de dues columnes se l'enduria a la columna que
 * toqués. El `float` deixa passar el que no coneix. Les dues columnes surten
 * de l'`overflow: hidden` del text, aquí sota: fa context de format nou i el
 * text no s'enfila per sota del cartell.
 */
.q15-expo-cartell {
  margin: 0 0 clamp(22px, 3vw, 36px);
  float: left;
  width: min(380px, 40%);
  margin-right: clamp(26px, 3.4vw, 46px);
}

.q15-expo-cartell img {
  display: block;
  width: 100%;
  height: auto;
  /* Filet, mai ombra: la regla de la casa. */
  border: 1px solid var(--q15-gris-linia, #E6E6E3);
}

/*
 * Al mòbil el cartell va a dalt i a tot l'ample de la columna. No es limita a
 * 320px com abans: apilat, un cartell vertical de 320px damunt d'un text a
 * tota l'amplada llegeix com una miniatura enganxada, no com la portada de
 * l'exposició. El límit el posa la columna.
 */
@media (max-width: 780px) {
  .q15-expo-cartell {
    float: none;
    width: 100%;
    max-width: 460px;
    margin-right: 0;
  }
}

/*
 * ⚠ I EL MATEIX PER AL WIDGET DE FILTRES DE WOOCOMMERCE.
 *
 * The7 apaga al 50 % tots els `<span>` de `.woocommerce-widget-layered-nav-list`
 * (`wc-dt-custom.css`). SE7 Filtres ja es defensa per als seus; el widget NATIU
 * de Woo que queda a la barra lateral de la botiga, no — i els seus comptadors
 * es queden igualment per sota del contrast que demana la WCAG AA.
 *
 * És decisió de projecte i per això va aquí i no al plugin: els comptadors
 * d'aquest lloc es llegeixen.
 */
.woocommerce-widget-layered-nav-list li span,
.wc-layered-nav-term span {
  opacity: 1;
}

/*
 * Els comptes d'Instagram del text, enllaçats (vegeu `q15_enllaca_instagram`).
 * Filet magenta i prou: dins d'un paràgraf, un enllaç subratllat de sèrie
 * trenca la línia de text, i l'accent de la casa va poc i on cal.
 */
.tax-pa_exposicio .term-description a.q15-instagram {
  color: inherit;
  text-decoration: none;
  border-bottom: 2px solid var(--q15-accent, #00A29C);
  padding-bottom: 1px;
  transition: color .2s ease, background-color .2s ease;
}

.tax-pa_exposicio .term-description a.q15-instagram:hover,
.tax-pa_exposicio .term-description a.q15-instagram:focus-visible {
  color: var(--q15-accent, #00A29C);
}

/*
 * «Obres relacionades», el títol de la graella de la fitxa d'exposició.
 *
 * Mateix rètol que les exposicions de la fitxa d'artista (`.q15-artista-expos
 * h2`): caixa alta, Space Grotesk i el filet magenta tort. És el rètol de
 * secció de la casa, i aquí n'hi ha d'haver un altre com aquell, no un de nou.
 */
/*
 * V2 (client, 07-09-2026): «OBRES RELACIONADES» és un TITULAR GRAN, amb el
 * botó «Veure més obra» a la dreta (el pinta botiga-vestit.php dins de
 * .q15-expo-obres-cap). El filet de damunt és el que creix, com a tot arreu.
 */
.q15-expo-obres-cap {
  position: relative;
  clear: both;                      /* el cartell va en float */
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding-top: 22px;
  margin: clamp(28px, 3.5vw, 44px) 0 clamp(18px, 2vw, 26px);
}

.q15-expo-obres-cap::before,
.q15-expo-obres-titol::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--q15-accent, #00A29C);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.2s cubic-bezier(.22, .61, .36, 1);
}

.q15-expo-obres-cap.q15-vist::before,
.q15-expo-obres-titol.q15-vist::before {
  transform: scaleX(1);
}

.q15-expo-obres-titol {
  position: relative;
  margin: 0;
  font-family: var(--q15-titols, 'Archivo', sans-serif);
  font-stretch: 75%;
  font-size: clamp(28px, 3.2vw, 44px) !important;
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--q15-negre, #141414);
}

/* Quan el títol va sol (sense el cap de dues peces), porta ell el filet. */
.q15-expo-obres-titol:not(.q15-expo-obres-cap *) {
  clear: both;
  padding-top: 22px;
  margin: clamp(28px, 3.5vw, 44px) 0 clamp(18px, 2vw, 26px);
}

/* El text del client, que ve del seu web i pot ser llarg. */
.tax-pa_exposicio .term-description,
.tax-pa_exposicio .woocommerce-archive-description {
  overflow: hidden;                 /* conté el float del cartell */
  margin-bottom: clamp(32px, 4vw, 52px);
  padding-bottom: clamp(28px, 3.5vw, 44px);
  border-bottom: 1px solid var(--q15-gris-linia, #E6E6E3);
}

.tax-pa_exposicio .term-description p,
.tax-pa_exposicio .woocommerce-archive-description p {
  max-width: 66ch;
  line-height: 1.65;
}

.q15-artista-rol {
  font-family: var(--q15-titols, 'Archivo', sans-serif);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--q15-gris-text, #565656);
  margin: 0 0 14px;
}

.q15-artista-bio {
  font-size: 17px;
  line-height: 1.6;
  color: var(--q15-gris-text, #565656);
  max-width: 68ch;
  margin: 0 0 14px;
}

.q15-artista-compte {
  font-family: var(--q15-titols, 'Archivo', sans-serif);
  font-size: 16px;
  color: var(--q15-gris-text, #565656);
  margin: 18px 0 0;
}

.q15-artista-compte strong { color: var(--q15-negre, #141414); }

/* Les exposicions on hi ha estat: el mateix filet magenta dels titulars. */
.q15-artista-expos { margin-top: 22px; }

.q15-artista-expos h2 {
  position: relative;
  padding-top: 18px;
  font-family: var(--q15-titols, 'Archivo', sans-serif);
  font-size: 15px !important;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--q15-negre, #141414);
  margin: 0 0 10px;
}

.q15-artista-expos h2::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--q15-accent, #00A29C);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.2s cubic-bezier(.22, .61, .36, 1);
}

.q15-artista-expos h2.q15-vist::before {
  transform: scaleX(1);
}

.q15-artista-expos ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.q15-artista-expos li { margin: 0; }

/* Cada exposició, un xip inclinat com les etiquetes del sistema. */
.q15-artista-expos a {
  display: inline-block;
  font-family: var(--q15-titols, 'Archivo', sans-serif);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 7px 13px 6px;
  background: var(--q15-gris-tint, #EFEFEC);
  box-shadow: inset 4px 0 0 var(--q15-negre, #141414);
  color: var(--q15-negre, #141414);
  transform: rotate(-1.4deg);
  transition: background-color .2s, color .2s;
}

.q15-artista-expos a:hover {
  background: var(--q15-negre, #141414);
  color: #FFFFFF;
}

/* ─────────────────── l'autor: obra ↔ artista ───────────────────────── */

/*
 * L'autor és un enllaç a l'arxiu de l'artista (totes les seves obres).
 * Mateix aspecte que el text pla i el subratllat magenta del sistema en
 * passar-hi, com el titular enllaçat de secció.
 */
:is(.dt-products, .products-shortcode) .q15-autor a,
.q15-autor--fitxa a {
  color: inherit;
  text-decoration: none;
}

:is(.dt-products, .products-shortcode) .q15-autor a:hover,
.q15-autor--fitxa a:hover {
  color: var(--q15-negre, #141414);
  box-shadow: inset 0 -2px 0 var(--q15-accent, #00A29C);
  text-decoration: none;
}

/* A la fitxa d'obra: sobre el títol, amb la lletra de la graella. */
.q15-autor--fitxa {
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.4;
  color: #141414;
  margin: 0 0 2px;
}

/* ═══════════════════════════ trams de preu ═════════════════════════════ */

/* El widget propi fa servir la mateixa llista que la resta de filtres. */
#sidebar .q15-trams li > a::before {
  content: '';
}

/* ═══════════════════════════ responsiu ═════════════════════════════════ */

/*
 * El mockup passa la graella a 2 columnes a 1100px i a 1 a 640px; això ho
 * governa The7 amb les seves pròpies dades (`data-*-columns-num`), i no es
 * toca des d'aquí. L'únic que cal és que la columna de filtres deixi de ser
 * fixa quan el sistema de The7 ja l'ha apilada.
 */
@media (max-width: 800px) {
  #sidebar .sidebar-content {
    border-top-width: 3px;
  }
}

/* ═══════════════ la fitxa d'artista NO és la botiga ═════════════════════
 *
 * Sense barra lateral, totes les obres i una graella més menuda. Els dos
 * primers els fa `botiga-vestit.php` per ganxo; el tercer ha de ser CSS, i
 * val la pena saber per què.
 *
 * ⚠ LA GEOMETRIA DE LA GRAELLA NO SURT DE LA CONFIG DE LA PETICIÓ. The7 la
 * compila a `uploads/the7-css/wc-dt-custom.css` des de Theme Options, i és
 * UNA per a tot el lloc:
 *
 *   .wc-grid:not(.resize-by-browser-width) .dt-css-grid {
 *     grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
 *   }
 *
 * Escriure `template.columns.number` i `post.preview.width.min` a la config
 * (a `dt_wc_loop_start`) sí que canvia els `data-width` i `data-columns` del
 * contenidor —es pot comprovar al HTML servit— i **no mou ni una cel·la**:
 * en aquest mode els llegeix el JS per a altres coses, però qui pinta és la
 * regla de dalt. Mesurat: amb `data-width="200px" data-columns="5"` la
 * graella seguia a 4 columnes de 286px. És la T-42 en una altra pell.
 *
 * Per tant l'única manera de tenir una graella diferent en UNA pantalla és
 * una regla amb més pes, i per això `botiga-vestit.php` posa la classe
 * `q15-fitxa-artista` al cos.
 *
 * Els números: sense barra lateral el contingut fa 1220px. Amb minmax(200)
 * i 20px de separació hi caben 5 columnes de ~228px, poc més de la meitat
 * de les 283 de la botiga.
 */

.q15-fitxa-artista .wc-grid:not(.resize-by-browser-width) .dt-css-grid {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
}

/* La fitxa és una galeria, no un prestatge: el text de sota la imatge va
 * un punt més petit perquè la foto mani. */
.q15-fitxa-artista .dt-products .entry-title,
.q15-fitxa-artista .dt-products .entry-title a {
  font-size: 15px;
  line-height: 1.4;
}

.q15-fitxa-artista .dt-products .q15-autor {
  font-size: 12px;
}

.q15-fitxa-artista .dt-products .price {
  font-size: 14px;
}

.q15-fitxa-artista .dt-products .woocommerce-product-details__short-description {
  font-size: 12.5px;
}

/* ── la biografia de l'artista, retallada ──────────────────────────────
 *
 * ⚠ Mesurat: a la fitxa d'en Manel Sanz la biografia fa 326px i, sumada a
 * la capçalera, la subnav i la barra de títol, empeny la primera fila
 * d'obres fins a y=1109 amb una finestra de 900. La pàgina d'un artista
 * s'obria sense veure-hi ni una obra.
 *
 * Es retalla a quatre línies i s'obre amb el detall. `line-clamp` no
 * necessita cap JavaScript i, si el navegador no el coneix, el text surt
 * sencer — que és el pitjor cas acceptable.
 */
.q15-fitxa-artista .q15-artista-bio {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  overflow: hidden;
  margin-bottom: 6px;
}

/* Obertes, es veuen senceres. */
.q15-fitxa-artista .q15-artista-cos.is-obert .q15-artista-bio {
  display: block;
  -webkit-line-clamp: unset;
  line-clamp: unset;
  overflow: visible;
}

.q15-artista-mes {
  display: inline-block;
  margin: 2px 0 14px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 14px;
  color: #565656;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.q15-artista-mes:hover {
  color: #141414;
}

/* ⚠ El retall ha de valer per a la biografia SENCERA, no per a cada
 * paràgraf. Amb `line-clamp` a cada <p>, un artista amb quatre paràgrafs
 * en té quatre de retallats a quatre línies: mesurat, la fitxa de la
 * Betiana seguia empenyent la primera obra fins a y=1155. Plegada, se'n
 * veu el primer paràgraf i prou. */
.q15-fitxa-artista .q15-artista-cos:not(.is-obert) .q15-artista-bio ~ .q15-artista-bio {
  display: none;
}

/* ── que la primera obra es vegi sense baixar ──────────────────────────
 *
 * ⚠ Aquest era el problema de debò, i no la càrrega de les imatges.
 * Mesurat a 1280×720 (un portàtil normal), la primera obra queia a y=882:
 *
 *     capçalera 143 · subnav 83 · barra de títol 170 · coixí de #main 50
 *     · fitxa d'artista 305 (95 dels quals són buit) · ordenació 38
 *
 * Amb les fotos carregades o no, calia baixar 200px per veure cap obra. El
 * que es retalla aquí és espai mort, no contingut: la barra de títol es fa
 * compacta, el coixí de dalt baixa i el buit entre la fitxa i la graella
 * es queda en la meitat.
 *
 * Només a la fitxa d'artista: la botiga té la primera obra a y=525 i no li
 * cal res d'això.
 */

.q15-fitxa-artista .page-title {
  padding-top: 26px;
  padding-bottom: 26px;
}

.q15-fitxa-artista #main {
  padding-top: 24px;
}

.q15-fitxa-artista .q15-artista-fitxa {
  padding-bottom: 18px;
  margin-bottom: 22px;
}

.q15-fitxa-artista .q15-artista-compte {
  margin-top: 10px;
}

/* La barra d'ordenació enganxada a la graella i no flotant al mig. */
.q15-fitxa-artista .woocommerce-ordering,
.q15-fitxa-artista .switcher-wrap {
  margin-bottom: 14px;
}

/* ⚠ El que manava era un `min-height`, no el coixí: The7 compila
 * `.page-title .wf-wrap { min-height: 170px }` des de Theme Options, i per
 * això posar-hi padding el feia MÉS alt (222px) en comptes de més baix.
 * A la fitxa d'artista el titular no necessita cap alçada mínima. */
.q15-fitxa-artista .page-title .wf-wrap {
  min-height: 0;
}

.q15-fitxa-artista .page-title {
  padding-top: 18px;
  padding-bottom: 18px;
}

/* ═══════════ la pell de Quei15 per a SE7 Filtres ═══════════════════════
 *
 * El plugin és neutre (quadres negres); el mockup pinta la casella marcada
 * amb el MAGENTA i l'anell blanc de dins («la marca de verificat dibuixada
 * amb dos filets», que ja era aquí dalt per a l'estil vell d'enllaços).
 * Recuperat a demanda del client: això és pell de projecte, i per això va
 * aquí i no al plugin.
 */
#sidebar .se7f-opcio {
  --se7f-accent: var(--q15-accent);
  /* Cotejat amb `.filtres` del mockup: 16px amb interlínia 1.6 (25.6px).
   * El plugin ve a 1.35 i el coteja ho va enxampar (22.5 vs 25.6). */
  font-size: 16px;
  line-height: 1.6;
}

/* La interlínia va TAMBÉ a l'enllaç i al títol de grup: The7 escriu la dels
 * enllaços de barra lateral des de Theme Options (15px/22.5) amb selectors
 * que guanyen l'herència. Mesurat: sense això, 22.5px als dos; el mockup
 * en vol 25.6 (opció, 16×1.6) i 24 (títol, 15×1.6). */
#sidebar .product-categories .se7f-opcio .se7f-text {
  font-size: 16px;
  line-height: 1.6 !important;
}

#sidebar .product-categories .se7f-grup {
  line-height: 1.6 !important;
}

#sidebar .se7f-marca {
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--q15-gris-mig);
}

#sidebar .se7f-casella:checked + .se7f-marca {
  background: var(--q15-accent);
  border-color: var(--q15-accent);
  box-shadow: inset 0 0 0 2px var(--q15-blanc), inset 0 0 0 8px var(--q15-accent);
}

/* L'anell ja fa de marca: el «tic» del plugin sobraria a sobre. */
#sidebar .se7f-casella:checked + .se7f-marca::after {
  display: none;
}

/* Els títols de grup («OBRA», «ALTRES PRODUCTES»), amb la lletra de la
 * casa, com quan eren els enllaços pare. */
#sidebar .se7f-grup {
  font-family: var(--q15-titols);
  font-size: 15px;
  letter-spacing: 0.09em;
}

/* ── l'ordenació, amb la lletra i el color de la casa ───────────────────
 *
 * Tres opcions i prou (les tries el client: més recent, preu ↑, preu ↓), en
 * horitzontal. El plugin les pinta neutres; aquí se'ls posa la Space
 * Grotesk dels titulars i el filet magenta de la triada, com la subnav i
 * els caps de secció.
 */
.woocommerce .se7f-ordena {
  font-family: var(--q15-titols);
  font-size: 14px;
  letter-spacing: 0.01em;
}

.woocommerce .se7f-ordena-etiqueta {
  font-family: var(--q15-titols);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.09em;
  color: var(--q15-gris-text);
}

.woocommerce .se7f-ordena-opcio {
  color: var(--q15-gris-text);
}

.woocommerce .se7f-ordena-opcio:hover {
  color: var(--q15-negre);
}

.woocommerce .se7f-ordena-opcio.is-triat {
  color: var(--q15-negre);
  box-shadow: inset 0 -2px 0 var(--q15-accent);
}

/* ═════════════ la barra de filtres, sempre a la vista ══════════════════
 *
 * `position: sticky` a la columna de filtres: es queda enganxada mentre
 * la graella corre, i amb càrrega contínua això passa de comoditat a
 * necessitat — amb 189 obres carregant-se de deu en deu, tornar amunt a
 * buscar els filtres seria un viatge llarg.
 *
 * ⚠ NOMÉS A PARTIR DE 993px. Per sota, The7 converteix la barra en un
 * panell lateral que s'obre amb un botó (`position: fixed` amb transform);
 * posar-hi `sticky` a sobre trencaria aquell mecanisme.
 *
 * ⚠ `align-self: flex-start` al pare. La cel·la d'una graella o d'un flex
 * s'estira per defecte a tota l'alçada de la fila, i un `sticky` dins d'un
 * element tan alt com el contingut no s'enganxa mai: no li queda recorregut.
 * És el motiu més freqüent que «sticky no funciona».
 *
 * L'alçada es limita a la finestra i es fa desplaçable: amb 12 autors, 4
 * exposicions, 8 categories i els trams de preu, la columna passa de llarg
 * i si no, la meitat de baix quedaria inabastable.
 */
@media (min-width: 993px) {
  /*
   * ⚠ DUES COSES MATEN UN STICKY, i aquí hi eren totes dues.
   *
   * 1. Un avantpassat amb `overflow` diferent de `visible`. The7 posa
   *    `overflow: hidden` a `#page` (per tallar desbordaments horitzontals)
   *    i això fa que el sticky deixi de referir-se a la finestra. La
   *    correcció és `clip` i no `visible`: talla igual i, a diferència de
   *    `hidden`, NO crea contenidor de desplaçament.
   *
   * 2. L'element enganxat ha de tenir recorregut DINS del seu pare.
   *    Mesurat: `.sidebar-content` feia 852px i `#sidebar` també 852 — zero
   *    recorregut, i per tant no s'enganxava mai. Qui ha de ser sticky és la
   *    columna sencera (`#sidebar`), que viu dins d'una graella de 1890px i
   *    sí que en té.
   *
   * ⚠ Només de 993px amunt: per sota, The7 converteix la barra en un panell
   * lateral (`position: fixed` amb transform) i un sticky a sobre el
   * trencaria.
   */
  .woocommerce #page {
    overflow: clip;
  }

  .woocommerce #sidebar {
    position: sticky;
    top: 24px;
    align-self: start;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    scrollbar-width: thin;
    overscroll-behavior: contain;
  }

  /* El contenidor de dins torna a ser normal: qui s'enganxa és el pare. */
  .woocommerce #sidebar .sidebar-content {
    position: static;
    max-height: none;
    overflow: visible;
  }
}

/* El botó de carregar-ne més, amb la lletra de la casa. */
.woocommerce .se7f-mes {
  font-family: var(--q15-titols);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  border-color: var(--q15-negre);
  color: var(--q15-negre);
}

.woocommerce .se7f-mes:hover:not(:disabled) {
  background: var(--q15-negre);
  color: var(--q15-blanc);
}

/* Els artistes de l'exposició, sota el cartell: la mateixa veu que la
   línia d'artistes de la llista (pagines-assets.css §q15-fila). */
.q15-expo-artistes {
  font-family: var(--q15-titols);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.6;
  color: var(--q15-negre);
  margin: 0 0 16px;
}

.q15-expo-artistes a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.q15-expo-artistes a:hover {
  color: var(--q15-accent);
}

/* El bloc «qui» de la fitxa d'obra: retrat petit + autor + exposició.
   El rètol q15-autor--fitxa de sempre viu a dins, intacte. */
.q15-obra-qui {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 12px;
}

/* V2: fora la foto petita de l'artista a la fitxa d'obra (client, 07-09). */
.q15-obra-qui__retrat {
  display: none;
}

.q15-obra-qui__retrat img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.q15-obra-qui .q15-autor--fitxa {
  margin: 0;
}

.q15-obra-expo {
  margin: 2px 0 0;
  font-size: 14px;
  color: var(--q15-gris-text);
}

.q15-obra-expo a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.q15-obra-expo a:hover {
  color: var(--q15-accent);
}

/* ── El poliment de la fitxa d'obra (Albert, 20-08-2026) ──────────────────
   Mesurat abans de tocar: galeria a 366px de 1320 (28%), títol a 68px. */

/* 1 · Les molles A DALT i a l'esquerra; el títol sota, més contingut
   (n'hi ha de llargs: «SOCIALISMO, MANIPILACiÓN Y PECADO…»). */
/* V2: el fil d'Ariadna d'aquí «queda bé» (client, 07-09-2026) i passa a ser
   el de TOT el lloc: a l'esquerra, sobre el títol. La regla és a v2.css
   (sense el `.single-product` del davant); aquí es deixa la del producte per
   si el full general no es carregués. */
.single-product .page-title .wf-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.single-product .page-title .page-title-breadcrumbs {
  order: -1;
  margin: 0;
}

.single-product .page-title .breadcrumbs {
  text-align: left;
}

/* #page al davant: el CSS compilat de The7 porta «#page .page-title
   .entry-title» (1 id) i sense l'id la nostra regla perd sempre. */
.single-product #page .page-title .hgroup .entry-title {
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: 1.12;
}

/* 2 · La imatge, un 15% més gran (28% → 32% del contenidor). El PhotoSwipe
   de pantalla sencera ja hi és: el clic a la imatge l'obre. */
@media (min-width: 992px) {
  .single-product div.product .woocommerce-product-gallery {
    /* The7 la té al 30% (wc-dt-custom.css): +15% de debò = 34,5%. */
    width: 34.5% !important;
  }

  .single-product div.product .summary.entry-summary {
    width: 60% !important;
  }
}

/* 3 · El text de l'obra, dins del resum sota el preu (el pinta
   botiga-vestit.php a la prioritat 25; les pestanyes de Woo són fora). */
.q15-obra-text {
  margin: 6px 0 18px;
  max-width: 56ch;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--q15-gris-text);
}

.q15-obra-text p {
  margin: 0 0 10px;
}

/* 4 · El mòbil: la galeria a tot l'ample i el títol que no mossegui. */
@media (max-width: 991px) {
  .single-product div.product .woocommerce-product-gallery,
  .single-product div.product .summary.entry-summary {
    width: 100% !important;
    float: none;
  }

  .single-product #page .page-title .hgroup .entry-title {
    font-size: clamp(26px, 7vw, 34px);
  }
}

/* Al mòbil, la mateixa esquerra que a l'escriptori: The7 centra la barra
   de títol a les pantalles petites i quedava mig i mig. */
@media (max-width: 991px) {
  .single-product #page .page-title .wf-wrap {
    align-items: flex-start;
  }

  .single-product #page .page-title .page-title-breadcrumbs,
  .single-product #page .page-title .hgroup,
  .single-product #page .page-title .breadcrumbs {
    text-align: left;
    margin-left: 0;
    margin-right: 0;
  }
}

/* ── «Material web»: d'on ve el contingut (31-08-2026) ────────────────────
   Distintiu per a la reunió amb el client: diu quines obres venen de la web
   anterior —preu, mides i tècnica provisionals— i no de la seva entrega.
   L'origen el marca marca-origen.php; el pinta botiga-vestit.php i s'apaga
   amb l'opció q15_marca_origen.

   VA A L'ALTRE COSTAT que el distintiu d'estat (.q15-marca, a dalt a
   l'esquerra) a posta: una obra pot ser «venuda» I de material web alhora,
   i les dues s'han de poder llegir. Magenta perquè no es confongui amb cap
   estat de venda: aquí no parla la botiga, parla la producció. */
:is(.dt-products, .products-shortcode) .q15-obra .q15-origen {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  font-family: var(--q15-titols);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1.6;
  background: var(--q15-accent);
  color: var(--q15-blanc);
  padding: 4px 9px 3px;
}

/* A la fitxa d'artista no hi ha targeta: l'avís va damunt de la bio. */
.q15-origen-avis {
  font-family: var(--q15-cos);
  font-size: 14px;
  line-height: 1.5;
  color: var(--q15-negre);
  background: var(--q15-gris-tint);
  border-left: 4px solid var(--q15-accent);
  padding: 10px 14px;
  margin: 0 0 18px;
}