/* The skin. Their export ships 481 PNGs to do this job, one per button per state per
   locale per device; every label is a picture of a word. This file is 8 KB and the
   words are words. */

:root {
  --cream: #ede8da;
  --cream-dim: #cdc6b2;
  --olive: #6f7337;
  --olive-lit: #878b45;
  --ink: #14160f;
  --gold: #d6b45c;
  --plate: rgba(20, 22, 15, .82);
  --edge: rgba(237, 232, 218, .18);
  --shadow: 0 10px 34px rgba(0, 0, 0, .38);
  --ui: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--ink); color: var(--cream);
  font-family: var(--ui); overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
body.grabbing #gl { cursor: grabbing; }

#gl {
  position: fixed; inset: 0; width: 100%; height: 100%;
  display: block; cursor: grab; touch-action: none;
}

/* ------------------------------------------------------------- annotations */
#annots { position: fixed; inset: 0; pointer-events: none; }

.ann {
  position: absolute; top: 0; left: 0;
  display: block; padding: 0; border: 0; background: none; color: inherit;
  font: inherit; cursor: pointer; pointer-events: auto;
  will-change: transform, opacity;
  transition: opacity .18s linear;
}
.ann.off { display: none; }
.ann .plate, .ann .pin, .ann .dot, .ann .lead { position: absolute; }

/* the anchor dot sits exactly on the feature */
.ann .dot {
  left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--cream); box-shadow: 0 0 0 2px rgba(20, 22, 15, .55), 0 0 14px rgba(255, 255, 255, .5);
}
/* the leader line is drawn, not baked into a picture, so one rule covers every
   direction their export needed a separate sprite for */
.ann .lead {
  left: 0; top: -1px; height: 2px; transform-origin: 0 50%;
  background: linear-gradient(90deg, rgba(237, 232, 218, .9), rgba(237, 232, 218, .35));
  opacity: 0; transition: opacity .2s;
}

.ann .plate {
  left: 14px; top: -50%; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 2px;
  padding: 7px 12px 8px; border-radius: 8px;
  background: var(--plate); border: 1px solid var(--edge);
  backdrop-filter: blur(9px); box-shadow: var(--shadow);
  white-space: nowrap; text-align: left;
}
.ann .name { font-size: 14px; font-weight: 650; letter-spacing: .012em; line-height: 1.15; }
.ann .note { font-size: 10.5px; color: var(--cream-dim); letter-spacing: .06em; text-transform: uppercase; }
.ann .time {
  display: inline-flex; align-items: center; gap: 5px; align-self: flex-start;
  font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink); background: var(--gold);
  padding: 2px 7px 2px 5px; border-radius: 4px; margin-bottom: 3px;
}
.ann .time svg { width: 12px; height: 12px; }

.ann svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* travel markers read as a badge, project labels as a plain plate */
.ann-travel .plate { background: rgba(111, 115, 55, .88); border-color: rgba(237, 232, 218, .3); }

/* things you can click get a pin instead of a dot */
.ann-scene .pin, .ann-media .pin {
  left: -17px; top: -17px; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(20, 22, 15, .74); border: 1.5px solid var(--gold); color: var(--gold);
  backdrop-filter: blur(8px);
  transition: transform .18s cubic-bezier(.2, .9, .3, 1.3), background .18s;
}
.ann-scene .pin svg, .ann-media .pin svg { width: 16px; height: 16px; }
.ann-scene .plate, .ann-media .plate { left: 24px; opacity: 0; transition: opacity .18s; }
.ann-scene:hover .pin, .ann-media:hover .pin,
.ann-scene:focus-visible .pin, .ann-media:focus-visible .pin { transform: scale(1.14); background: var(--gold); color: var(--ink); }
.ann-scene:hover .plate, .ann-media:hover .plate,
.ann-scene:focus-visible .plate, .ann-media:focus-visible .plate { opacity: 1; }

/* a soft pulse so a clickable pin reads as clickable without a tooltip */
.ann-scene .pin::after, .ann-media .pin::after {
  content: ''; position: absolute; inset: -1.5px; border-radius: 50%;
  border: 1.5px solid var(--gold); animation: pulse 2.6s ease-out infinite;
}
@keyframes pulse { 0% { transform: scale(1); opacity: .8 } 70%, 100% { transform: scale(1.9); opacity: 0 } }

.ann:focus-visible { outline: none; }
.ann:focus-visible .plate, .ann:focus-visible .dot { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ------------------------------------------------------------------ chrome */
.chrome { position: fixed; z-index: 5; }
.chrome button { font-family: inherit; cursor: pointer; }

.top {
  top: 0; left: 0; right: 0; padding: 16px 20px;
  display: flex; align-items: center; gap: 22px;
  background: linear-gradient(rgba(20, 22, 15, .78), rgba(20, 22, 15, 0));
  pointer-events: none;
}
.top > * { pointer-events: auto; }

.brand { display: flex; align-items: center; gap: 10px; }
/* The isotipo (the grape cluster off their logo), the owner's ask of 2026-09-04 in
   place of the gold disc. Masked, not an <img>: the SVG ships with an espresso fill
   baked in, and a mask lets it take the gold. 51x84 box, so it stands taller than wide. */
.brand .mark {
  width: 18px; height: 30px; background: var(--gold);
  -webkit-mask: url(./assets/isotipo.svg) center / contain no-repeat;
  mask: url(./assets/isotipo.svg) center / contain no-repeat;
}
.brand .wm { font-size: 15px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.brand .wm em { font-style: normal; font-weight: 300; color: var(--cream-dim); }

h1#sceneName {
  margin: 0; font-size: 13px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold); padding-left: 22px; border-left: 1px solid var(--edge);
}

#scenes { margin-left: auto; display: flex; gap: 4px; }
#scenes button {
  padding: 8px 15px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
  letter-spacing: .04em; color: var(--cream-dim);
  background: rgba(20, 22, 15, .5); border: 1px solid transparent;
  backdrop-filter: blur(8px); transition: color .18s, background .18s, border-color .18s;
}
#scenes button:hover { color: var(--cream); border-color: var(--edge); }
#scenes button[aria-current="true"] { color: var(--ink); background: var(--gold); }

.left { left: 20px; bottom: 22px; display: flex; flex-direction: column; gap: 10px; }
.seg {
  display: inline-flex; padding: 3px; border-radius: 999px;
  background: rgba(20, 22, 15, .62); border: 1px solid var(--edge); backdrop-filter: blur(10px);
}
.seg button {
  padding: 9px 17px; border: 0; border-radius: 999px; background: none;
  font-size: 12.5px; font-weight: 650; letter-spacing: .03em; color: var(--cream-dim);
  transition: color .2s, background .2s;
}
.seg button[aria-pressed="true"] { background: var(--gold); color: var(--ink); }
.hint { margin: 0; font-size: 11.5px; color: rgba(237, 232, 218, .5); letter-spacing: .02em; }
.hint kbd {
  font: inherit; font-size: 10.5px; padding: 1px 5px; border-radius: 4px;
  background: rgba(237, 232, 218, .14); border: 1px solid var(--edge);
}

.right {
  right: 20px; bottom: 22px; width: 268px;
  padding: 14px; border-radius: 14px;
  background: rgba(20, 22, 15, .66); border: 1px solid var(--edge);
  backdrop-filter: blur(12px); box-shadow: var(--shadow);
}
.right h2 {
  margin: 0 0 9px; font-size: 10.5px; font-weight: 650; letter-spacing: .16em;
  text-transform: uppercase; color: var(--cream-dim);
}
#mini canvas { width: 100%; height: 132px; display: block; cursor: pointer; border-radius: 7px; }

.links { display: flex; gap: 6px; margin-top: 11px; }
.links button {
  flex: 1; padding: 8px 6px 7px; border-radius: 8px;
  background: rgba(237, 232, 218, .07); border: 1px solid var(--edge); color: var(--cream);
  font-size: 11.5px; font-weight: 600; line-height: 1.25;
  display: flex; flex-direction: column; gap: 2px; transition: background .18s;
}
.links button:hover { background: rgba(214, 180, 92, .18); }
.links em { font-style: normal; font-size: 10px; color: var(--gold); letter-spacing: .05em; }

.tomap {
  width: 100%; margin-top: 9px; padding: 10px; border-radius: 8px; border: 0;
  background: var(--gold); color: var(--ink);
  font-size: 12.5px; font-weight: 700; letter-spacing: .02em;
  transition: filter .18s;
}
.tomap:hover { filter: brightness(1.08); }

/* ------------------------------------------------------------------ dialog */
dialog#media {
  width: min(920px, 92vw); padding: 0; border: 1px solid var(--edge); border-radius: 14px;
  background: #1b1e16; color: var(--cream); box-shadow: 0 30px 90px rgba(0, 0, 0, .6);
}
dialog#media::backdrop { background: rgba(10, 11, 8, .74); backdrop-filter: blur(4px); }
dialog .head { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-bottom: 1px solid var(--edge); }
dialog .head h2 { margin: 0; font-size: 14px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; }
dialog .close {
  margin-left: auto; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--edge);
  background: none; color: var(--cream); font-size: 19px; line-height: 1;
}
dialog .close:hover { background: rgba(237, 232, 218, .1); }
dialog .body { padding: 14px; display: grid; gap: 10px; max-height: 74vh; overflow: auto; }
dialog video, dialog img { width: 100%; border-radius: 8px; display: block; }
dialog .pending { margin: 0; padding: 26px 10px; text-align: center; color: var(--cream-dim); line-height: 1.6; }

/* -------------------------------------------------------------------- boot */
#boot {
  position: fixed; inset: 0; z-index: 40; display: grid; place-content: center; gap: 18px;
  justify-items: center; background: var(--ink);
  transition: opacity .6s ease;
}
#boot.gone { opacity: 0; pointer-events: none; }
#boot .ring {
  width: 40px; height: 40px; border-radius: 50%;
  border: 2px solid rgba(237, 232, 218, .16); border-top-color: var(--gold);
  animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg) } }
#boot .msg { margin: 0; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--cream-dim); }

body.no-gl #boot .msg::after { content: ' — este navegador no soporta WebGL'; }

/* ------------------------------------------------------------------ mobile */
@media (max-width: 820px) {
  .top { padding: 12px 14px; gap: 10px; flex-wrap: wrap; }
  h1#sceneName { padding-left: 12px; }
  #scenes { width: 100%; margin: 0; order: 3; overflow-x: auto; scrollbar-width: none; }
  #scenes::-webkit-scrollbar { display: none; }
  /* the panel height is content-driven, so anchoring the toggle to the bottom put it
     underneath. It rides under the header instead, where there is always room. */
  /* --topH is the header's measured height (tour.js): at 375 px it wraps to three rows
     (brand, language, scene chips) and a fixed 108px put the toggle ON the scene chips. */
  .left { left: 12px; right: 12px; top: calc(var(--topH, 98px) + 10px); bottom: auto; align-items: flex-start; }
  .hint { display: none; }
  .right { right: 10px; left: 10px; width: auto; bottom: 10px; padding: 10px; }
  #mini canvas { height: 84px; }
  .right h2 { margin-bottom: 6px; }
  .links { margin-top: 8px; }
  .tomap { margin-top: 7px; padding: 12px; }
  .ann .plate { left: 12px; }
  .ann .name { font-size: 13px; }
}
@media (max-width: 820px) and (max-height: 700px) {
  /* short landscape phones: the plan panel is the first thing to give */
  #mini canvas, .right h2 { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ------------------------------------------------------------ language */
.lang { display: flex; gap: 2px; padding: 3px; border-radius: 999px;
        background: rgba(20, 22, 15, .55); border: 1px solid var(--edge); backdrop-filter: blur(8px); }
.lang button {
  padding: 6px 11px; border: 0; border-radius: 999px; background: none;
  font-size: 11.5px; font-weight: 700; letter-spacing: .06em; color: var(--cream-dim);
  transition: background .18s, color .18s;
}
.lang button[aria-pressed="true"] { background: var(--gold); color: var(--ink); }

/* --------------------------------------------------- painted graphics
   Their road and boundary artwork. Sized by the solid angle it covers, so it tracks the
   terrain under it when you zoom instead of floating. */
.ann-graphic { pointer-events: none; }
.ann-graphic img { width: 100%; height: 100%; display: block; }

/* ------------------------------------------------------- nearby lots
   The thing their tour cannot do at all: it has no idea any lots exist, because their lot
   numbers are pixels in a JPEG. */
.lots {
  left: 20px; top: 74px; width: 296px; z-index: 6;
  border-radius: 12px; overflow: hidden;
  background: rgba(20, 22, 15, .68); border: 1px solid var(--edge);
  backdrop-filter: blur(12px); box-shadow: var(--shadow);
}
.lots[hidden] { display: none; }
.lots-head {
  width: 100%; display: flex; align-items: center; gap: 8px; padding: 11px 13px;
  background: none; border: 0; color: var(--cream); text-align: left; cursor: pointer;
}
.lots-head:hover { background: rgba(237, 232, 218, .06); }
.lots-title { font-size: 11px; font-weight: 650; letter-spacing: .13em; text-transform: uppercase; }
.lots-count { margin-left: auto; font-size: 11.5px; color: var(--gold); font-weight: 700; }
.chev { width: 8px; height: 8px; border-right: 1.6px solid var(--cream-dim);
        border-bottom: 1.6px solid var(--cream-dim); transform: rotate(45deg); transition: transform .2s; }
.lots-head[aria-expanded="true"] .chev { transform: rotate(-135deg); }

#lotsList { margin: 0; padding: 0 0 6px; list-style: none; max-height: 44vh; overflow: auto; }
#lotsList[hidden] { display: none; }
#lotsList button {
  width: 100%; display: grid; grid-template-columns: 10px 1fr auto; gap: 3px 9px;
  padding: 7px 13px; background: none; border: 0; color: var(--cream); text-align: left; cursor: pointer;
  font-size: 12.5px; align-items: center;
}
#lotsList button:hover { background: rgba(214, 180, 92, .13); }
#lotsList .s { width: 8px; height: 8px; border-radius: 50%; grid-row: 1 / 3; }
#lotsList .s.disponible { background: #74c08c; }
#lotsList .s.apartado { background: #d9a441; }
#lotsList .s.vendido { background: #9e5b4e; }
#lotsList .s.nd { background: #828282; }
#lotsList .n { font-weight: 700; }
#lotsList .p { text-align: right; font-weight: 700; color: var(--gold); font-variant-numeric: tabular-nums; }
/* A promotion in force (2026-10-06): the list price struck through before the promotion's. */
#lotsList .p .was { font-weight: 400; font-size: 11px; color: var(--cream-dim); margin-right: 2px; }
#lotsList .m2, #lotsList .d { grid-row: 2; font-size: 11px; color: var(--cream-dim); }
#lotsList .d { text-align: right; }

/* ------------------------------------------------------- plan popup
   All seven areas work here. Four of theirs are dead: the click handler declares two
   local functions and calls nothing. */
.planbtn {
  width: 100%; margin-top: 8px; padding: 8px; border-radius: 8px;
  background: rgba(237, 232, 218, .08); border: 1px solid var(--edge); color: var(--cream);
  font-size: 12px; font-weight: 600; cursor: pointer; transition: background .18s;
}
.planbtn:hover { background: rgba(214, 180, 92, .18); }

dialog#plan { width: min(1500px, 96vw); padding: 0; border: 1px solid var(--edge); border-radius: 14px;
              background: #1b1e16; color: var(--cream); box-shadow: 0 30px 90px rgba(0, 0, 0, .6); }
dialog#plan::backdrop { background: rgba(10, 11, 8, .8); backdrop-filter: blur(4px); }
.planwrap { position: relative; line-height: 0; }
.planwrap img { width: 100%; height: auto; display: block; border-radius: 0 0 13px 13px; }
#planPins { position: absolute; inset: 0; }
/* 2026-09-24: the lots, live, between the ground picture and the labels picture (tour.js openPlan).
   The map's own style: status wash and edge, the edge dashed by status, Zafiro's washes stronger. */
.planwrap .planlots, .planwrap .plantop { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; border-radius: 0 0 13px 13px; }
.planlots path { stroke-width: var(--lw); stroke-linejoin: round; }
.planlots .s-disponible { --c: 116 192 140; }
.planlots .s-apartado { --c: 217 164 65; stroke-dasharray: 11 6.6; }
.planlots .s-vendido { --c: 158 91 78; stroke-dasharray: 2.64 5.72; }
.planlots .s-nd { --c: 130 130 130; stroke-dasharray: 2.2 8.8; }
.planlots .e, .planlots .z { fill: rgb(var(--c) / var(--f)); stroke: rgb(var(--c) / var(--k)); }
.planlots .e.s-disponible { --f: .3; --k: .9; }
.planlots .e.s-apartado { --f: .17; --k: .8; }
.planlots .e.s-vendido { --f: .07; --k: .42; }
.planlots .e.s-nd { --f: .1; --k: .5; }
.planlots .z.s-disponible { --f: .44; --k: .95; }
.planlots .z.s-apartado { --f: .4; --k: .9; }
.planlots .z.s-vendido { --f: .3; --k: .7; }
.planlots .z.s-nd { --f: .16; --k: .5; }
.ppin { position: absolute; transform: translate(-50%, -50%); background: none; border: 0;
        padding: 0; cursor: pointer; display: flex; align-items: center; gap: 7px; }
.ppin .pd { width: 13px; height: 13px; border-radius: 50%; flex: none;
            background: var(--gold); box-shadow: 0 0 0 3px rgba(20, 22, 15, .6), 0 0 16px rgba(214, 180, 92, .7); }
.ppin-media .pd { background: var(--cream); }
.ppin .pl {
  font: 650 12.5px/1 var(--ui); color: var(--cream); white-space: nowrap;
  padding: 6px 10px; border-radius: 7px; background: rgba(20, 22, 15, .86);
  border: 1px solid var(--edge); opacity: 0; transform: translateX(-4px);
  transition: opacity .16s, transform .16s;
}
.ppin:hover .pl, .ppin:focus-visible .pl { opacity: 1; transform: none; }
.ppin:hover .pd { transform: scale(1.25); }

/* gallery grid inside the media dialog */
dialog .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
dialog .grid figure { margin: 0; }
dialog .grid figure.big { grid-column: 1 / -1; }
dialog .grid img { width: 100%; height: 130px; object-fit: cover; border-radius: 7px; cursor: zoom-in; }
dialog .grid figure.big img { height: auto; cursor: default; }
dialog .grid figcaption { margin-top: 4px; font-size: 11px; color: var(--cream-dim); }

@media (max-width: 820px) {
  .lots { left: 10px; right: 10px; width: auto; top: calc(var(--topH, 98px) + 54px); }
  #lotsList { max-height: 34vh; }
  .lang button { padding: 5px 9px; }
}

/* ------------------------------------------------- the associate of a personal link (2026-10-06)
   tour.js shows them in the header (the chip, fitted to the room left beside the scene buttons)
   and as the last row of the plan card. Nobody else sees either. */
.as-wa { display: block; width: 15px; height: 15px; flex: none; background: currentColor;
  -webkit-mask: url('../icons/icon_whatsapp.svg') center / contain no-repeat;
  mask: url('../icons/icon_whatsapp.svg') center / contain no-repeat; }

.as-chip {
  margin-left: auto; margin-right: -8px; display: flex; align-items: center; gap: 9px; flex: none;
  height: 35px; padding: 3px; border-radius: 999px; white-space: nowrap; text-decoration: none; /* 35 = the language switch: 38 made the header 3 px taller */
  color: var(--cream); background: rgba(20, 22, 15, .55); border: 1px solid var(--edge);
  backdrop-filter: blur(8px); transition: border-color .18s;
}
.as-chip[hidden] { display: none; }
.as-chip:not([hidden]) ~ #scenes { margin-left: 0; }
.as-chip:hover { border-color: rgba(237, 232, 218, .4); }
.as-chip__face { position: relative; display: block; flex: none; }
.as-chip__face img { display: block; width: 27px; height: 27px; border-radius: 50%; object-fit: cover;
  box-shadow: 0 0 0 1.5px var(--gold); }
.as-chip__txt { display: flex; flex-direction: column; gap: 4px; }
.as-chip__txt small { font-size: 9px; font-weight: 650; letter-spacing: .16em; text-transform: uppercase;
  color: var(--cream-dim); line-height: 1; }
.as-chip__txt b { font-size: 13px; font-weight: 600; line-height: 1; }
.as-chip__wa { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 50%;
  background: var(--gold); color: var(--ink); }
.as-badge { display: none; position: absolute; right: -5px; bottom: -3px; width: 16px; height: 16px;
  border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px var(--ink); }
.as-badge::after { content: ''; position: absolute; inset: 3.5px; background: #8d702b;
  -webkit-mask: url('../icons/icon_whatsapp.svg') center / contain no-repeat;
  mask: url('../icons/icon_whatsapp.svg') center / contain no-repeat; }
.as-chip[data-fit="compact"] .as-chip__txt { display: none; }
.as-chip[data-fit="face"] { height: auto; padding: 0; gap: 0; border: 0; background: none; backdrop-filter: none; margin-right: 0; }
.as-chip[data-fit="face"] .as-chip__txt, .as-chip[data-fit="face"] .as-chip__wa { display: none; }
.as-chip[data-fit="face"] .as-chip__face img { width: 32px; height: 32px;
  box-shadow: 0 0 0 1.5px var(--gold), 0 4px 14px rgba(0, 0, 0, .45); }
.as-chip[data-fit="face"] .as-badge { display: block; }

.as-row { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding-top: 12px;
  border-top: 1px solid var(--edge); color: var(--cream); text-decoration: none; }
.as-row[hidden] { display: none; }
.as-row img { width: 40px; height: 40px; flex: none; border-radius: 50%; object-fit: cover;
  box-shadow: 0 0 0 1.5px var(--gold); }
.as-row__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.as-row__txt small { font-size: 9.5px; font-weight: 650; letter-spacing: .16em; text-transform: uppercase;
  color: var(--cream-dim); line-height: 1; }
.as-row__txt b { font-size: 14px; font-weight: 600; line-height: 1.15; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.as-row__wa { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 50%;
  background: var(--gold); color: var(--ink); transition: filter .18s; }
.as-row:hover .as-row__wa { filter: brightness(1.08); }
.as-row__wa .as-wa { width: 17px; height: 17px; }

@media (max-width: 820px) {
  /* The photo alone, at the right end of the layer toggle's row, under the header. In the header it
     had no row of its own to sit on: at 412 px the language switch shares the brand's row and the
     photo wrapped onto a new one, 42 px taller (2026-10-06). The toggle row always has room. */
  .as-chip { position: fixed; right: 12px; top: calc(var(--topH, 98px) + 15px); margin: 0; }
  .as-row { margin-top: 9px; padding-top: 9px; }
  .as-row img { width: 36px; height: 36px; }
  .as-row__wa { width: 36px; height: 36px; }
}