/* Market Fortune · LOS CONTROLES DE LA CASA. Se genera; no editar a mano.
   Ver scratchpad/controles-casa.js para el diagnostico completo. */

/* ===== LA LINEA QUE FALTABA ===================================================================
   Un <button>, <select>, <input> o <textarea> NO hereda font-family: si nadie se la pone, el
   navegador mete la suya. Esta hoja no la ponia y el sitio arrastraba 88 controles en Arial. Con
   esto heredan la de la pagina, que siempre es una de las tres de la casa. */
button,select,input,textarea,optgroup{font-family:inherit;font-size:inherit;line-height:inherit}
/* el <option> lo pinta el sistema operativo y no siempre obedece; se pide igual y se le da un
   fondo legible para los que si obedecen (Firefox y Chrome en Windows) */
select option{font-family:inherit;background:#07120d;color:#f7f1e7}

/* ===== EL CARRITO ============================================================================= */

/* el aspa: cuadrado de la casa, no el boton por defecto del navegador */
.store-cart-close{
  width:42px;height:42px;padding:0;border:1px solid rgba(227,200,115,.3) !important;border-radius:3px;
  background:transparent;color:#e3c873 !important;cursor:pointer;
  font-family:'EB Garamond',Georgia,serif !important;font-size:24px !important;line-height:1;
  display:grid;place-items:center;transition:border-color .2s,color .2s,background .2s}
.store-cart-close:hover{border-color:#c7a24a;color:#fbf0cd;background:rgba(227,200,115,.06)}

/* el contador de unidades: un solo control, no tres piezas sueltas. Los glifos se agrandan porque
   a 13px de Arial eran invisibles y a 13px de EB Garamond lo serian todavia mas. */
.store-cart-miniqty{border:1px solid rgba(227,200,115,.26) !important;border-radius:3px;
  overflow:hidden;background:rgba(227,200,115,.03)}
.store-cart-miniqty button{width:34px;height:34px;color:#e3c873 !important;
  font-family:'EB Garamond',Georgia,serif !important;font-size:19px !important;line-height:1;
  display:grid;place-items:center;transition:background .18s,color .18s}
.store-cart-miniqty button:hover{background:rgba(227,200,115,.12);color:#fbf0cd}
.store-cart-miniqty span,.store-cart-miniqty input{
  font-family:'EB Garamond',Georgia,serif !important;font-size:15px !important;
  font-variant-numeric:tabular-nums;color:#f7f1e7;min-width:34px}

/* Eliminar: enlace de texto, no un boton compitiendo con el de pagar */
.store-cart-remove,.store-remove{font-family:'EB Garamond',Georgia,serif !important;
  font-size:12px !important;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(247,241,231,.5) !important;text-decoration:none !important;
  border-bottom:1px solid rgba(247,241,231,.22);padding-bottom:1px;transition:color .18s,border-color .18s}
.store-cart-remove:hover,.store-remove:hover{color:#e3c873 !important;border-color:#c7a24a}

/* EL DESPLEGABLE DEL PAIS. Iba con appearance:auto, o sea el control crudo del sistema operativo
   dentro de un cajon negro y oro. Se le quita el cromo del sistema y se le dibuja la flecha de la
   casa. La flecha va como data URI para que no dependa de un archivo mas que pueda dar 404. */
/* CONTRA UN ATAJO CON !important HAY QUE GANAR TODAS SUS PARTES, NO UNA. La hoja de la tienda
   trae ".store-cart-foot select{background:var(--black) !important}", y un atajo pone de golpe
   image, repeat, position y size, las cuatro con !important. En mi primera version marque solo
   background-image: gane la flecha y perdi el repeat, asi que la flecha salio SEIS VECES en
   mosaico a lo ancho del campo. Ganar la mitad de un atajo deja la pantalla peor que no tocarla:
   van las cuatro longhand, las cuatro marcadas. */
.store-cart select,.store-ship select,.store-cart-foot select{
  -webkit-appearance:none !important;-moz-appearance:none !important;appearance:none !important;
  width:100%;padding:13px 40px 13px 14px !important;border-radius:3px;
  border:1px solid rgba(227,200,115,.26) !important;
  background-color:rgba(227,200,115,.03) !important;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c7a24a' stroke-width='1.7'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important;
  background-position:right 13px center !important;
  background-size:15px 15px !important;
  color:#f7f1e7 !important;font-family:'EB Garamond',Georgia,serif !important;font-size:16px !important;
  cursor:pointer;transition:border-color .2s}
.store-cart select:hover,.store-ship select:hover,.store-cart-foot select:hover{border-color:rgba(227,200,115,.5) !important}
.store-cart select:focus,.store-ship select:focus,.store-cart-foot select:focus{outline:none;border-color:#c7a24a !important}

/* el pie del carrito: la cifra manda y va en EB Garamond, como en toda la casa */
.store-cart-foot{font-family:'EB Garamond',Georgia,serif}
.store-cart-foot .store-cart-total,.store-cart-foot strong,.store-cart-foot b{
  font-variant-numeric:tabular-nums}

/* el foco se ve: un carrito que no se puede recorrer con el teclado es un carrito que excluye */
.store-cart :focus-visible,.mfm :focus-visible{outline:2px solid #c7a24a;outline-offset:2px}


/* ===== LO PEQUENO VA EN EB GARAMOND (2026-08-27) ==============================================
   Playfair a 11 y 12px pierde los trazos finos. Medido: la barra iba a 11px/600 con 1,1px de
   espaciado y los botones a 12px/600 con 1,92px, en mayusculas. El contraste del boton dorado ya
   era correcto (16,5:1 contra el claro del degradado, 5,15:1 contra el oscuro): lo que fallaba era
   la letra, no el color. Ver scratchpad/legibilidad.js. */

/* LA BARRA. Menu, CTA e idioma: lo blanco y lo dorado que pidio David. */
#hd .menu>li>a,
#hd .util .lang,
#hd .util .ctaHd,
#hd .sub a{
  font-family:'EB Garamond',Georgia,serif !important;
  font-size:13px !important;
  font-weight:600 !important;
  letter-spacing:.08em !important}
#hd .menu>li>a{font-size:12px !important;letter-spacing:.05em !important}
/* el menu ingles es mas largo que el espanol (518px contra 466): a 12px y con el espaciado
   apretado cabe en su columna sin pisar la marca, y sigue leyendose mejor que Playfair a 11 */
#hd .menu{gap:8px !important}
#hd .sub a{font-weight:500 !important;letter-spacing:.02em !important;font-size:14px !important}
#hd .util .ctaHd b{font-family:'EB Garamond',Georgia,serif !important;
  font-variant-numeric:tabular-nums;letter-spacing:0 !important}
/* la marca y su bajada no se tocan: ahi Playfair y el oro trabajan bien */

/* LOS BOTONES DORADOS. Sube el cuerpo, baja el espaciado y cambia la fuente: tres cosas que
   empujan en la misma direccion. El numero va en cifras de la casa. */
a.btn:not(.ghost), button.btn:not(.ghost),
.mfm-pie .mfm-cta, .btn--gold{
  font-family:'EB Garamond',Georgia,serif !important;
  font-size:13.5px !important;
  font-weight:600 !important;
  letter-spacing:.11em !important}
a.btn:not(.ghost) b, button.btn:not(.ghost) b, .mfm-pie .mfm-cta b{
  font-family:'EB Garamond',Georgia,serif !important;
  font-variant-numeric:tabular-nums;letter-spacing:.02em !important;font-weight:600 !important}
/* los botones translucidos comparten cuerpo para que la pareja no se vea despareja */
a.btn.ghost, button.btn.ghost{
  font-family:'EB Garamond',Georgia,serif !important;
  font-size:13.5px !important;font-weight:600 !important;letter-spacing:.11em !important}

/* el boton de las tarjetas de producto, que es el que mas se toca */
article.p .add{
  font-family:'EB Garamond',Georgia,serif !important;
  font-size:13px !important;font-weight:600 !important;letter-spacing:.09em !important}