/* ==========================================================================
   EmEx — Something Different landing (emex-sd-landing)
   Loaded on /directory/something-different/ (incl. /browseall) only. Adds
   rules for the unit's own markup; the hero, search bar, sidebar and cards
   stay owned by emex-assets/emex-directory.css. Consumes the --emex-* and
   --emex-kind-* tokens defined there; never redefines them.

   Rebuilt 1 Oct to match the Kadence mockup (page 13395). The type tiles,
   delivery cards and occasion cards are solid colour blocks — see the "why"
   in tiles.php's docblock (the brief's bunting-only rule is about listing
   cards, which sit next to a logo; these navigational tiles carry none).
   Nothing non-clickable looks like a card; no uppercase display type; body
   copy at 16.5px; tile radius 12px; no motion beyond hover/focus changes.
   ========================================================================== */

/* The block sits inside the hero (.emex-landing__head), above the decorative
   bunting sweeps (z-index 0), like the hero's own title and description. */
.emex-landing__head > .emex-sd-landing{ position:relative; z-index:1; }

/* WCAG AA (4.5:1) for small text. The brand tokens in emex-directory.css are untouched (large type and
   logos keep them); these two are what small text on this page uses instead.
     --emex-orange-aa  #A64816  white on it 5.90:1 · it on #FFFFFF 5.90:1 · it on #ECE8E3 4.84:1
                                (brand --emex-orange #C65A1E is 4.30 / 4.30 / 3.53)
     --emex-ink-50-aa  #6B655E  on #ECE8E3 4.72:1 · on #FFFFFF 5.76:1 · on #F2EDE4 4.94:1
                                (the old rgb(118,112,105) #767069 is 4.01 on #ECE8E3) */
:root{ --emex-orange-aa:#A64816; --emex-ink-50-aa:#6B655E; }

@media (min-width:901px){
  .emex-landing__head .emex-sd-landing .emex-sd-landing__intro{ max-width:min(66ch, calc(100% - 480px)); }
}

/* --- Copy --------------------------------------------------------------- */
.emex-sd-landing .emex-sd-landing__intro{ max-width:66ch; font-family:var(--emex-sans); font-size:16.5px; }
.emex-sd-landing .emex-sd-landing__tagline{
  font-family:var(--emex-serif); font-style:italic; font-weight:600;
  font-size:clamp(24px,2.5vw,30px); line-height:1.2; letter-spacing:-0.01em;
  text-transform:none; color:var(--emex-purple);
  margin:-4px 0 18px;
}
.emex-sd-landing .emex-sd-landing__para{
  font-family:var(--emex-sans); font-size:16.5px; line-height:1.6; color:var(--emex-ink-70);
  max-width:none; margin:0 0 10px; text-align:left;
}
/* Short capitalised strip (mockup): "Not a booking service · No commission · …".
   Capitals are CSS, not the stored text (design brief: no uppercase in markup). */
.emex-sd-landing .emex-sd-landing__note{
  font-family:var(--emex-sans); font-weight:600; font-size:13px; line-height:1.5;
  letter-spacing:0.04em; text-transform:uppercase; color:var(--emex-ink-50-aa);
  max-width:none; margin:0;
}

/* --- Header image (only rendered when set in wp-admin > Landing Photos) ---
   Photo mockup (5 Oct): a cut-out collage on a transparent background, to the
   right of the copy, rising level with the breadcrumb. It replaces the
   bunting string, which would otherwise cross it. */
.emex-sd-landing__hero-media{ margin:18px 0 0; }
.emex-sd-landing__hero-img{ display:block; width:100%; height:auto; }
.emex-landing__head:has(.emex-sd-landing__hero--has-image) > .emex-landing__bunting-sweep{ display:none; }
@media (min-width:901px){
  .emex-sd-landing__hero--has-image{
    display:grid; grid-template-columns:minmax(0,1fr) minmax(0,540px); gap:16px; align-items:start;
  }
  .emex-landing__head .emex-sd-landing .emex-sd-landing__hero--has-image .emex-sd-landing__intro{ max-width:none; }
  /* pull the collage up past the eyebrow row to the breadcrumb, and let it
     run slightly into the right gutter as in the mockup */
  .emex-sd-landing__hero-media{ margin:-98px -24px 0 0; }
}

/* --- Type page photo (type-hero.php: "Above Header Background Image") -----
   Beside the H1 and intro, like the landing's header image, and like it the
   photo replaces the bunting string. A photo, not a cut-out, so it is cropped
   to one shape and rounded. The wrapper replaces the H1 and intro as direct
   children of the hero, so it takes over their z-index. */
.emex-landing__head > .emex-sd-type-hero{ position:relative; z-index:1; }
.emex-landing__head:has(.emex-sd-type-hero) > .emex-landing__bunting-sweep{ display:none; }
.emex-sd-type-hero__media{ margin:18px 0 0; }
.emex-sd-type-hero__img{ display:block; width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; border-radius:12px; }
@media (min-width:901px){
  .emex-sd-type-hero{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,440px); gap:40px; align-items:start; }
  .emex-sd-type-hero__media{ margin:0; }
}

/* --- Search box (search.php: Directorist's own block, rendered directly) - */
/* Directorist's default shows a "Title" label above the field; the mockup
   hides it with a one-off rule scoped to its own page (.page-id-13395 in its
   inline CSS) — this is the same fix, scoped to this section instead (Eli,
   1 Oct: it was pushing the field down with no visible purpose). */
.emex-sd-landing__section--search .directorist-search-field__label{ display:none; }
/* The input's own wrapper bottom-aligns (align-items:flex-end) while the
   buttons' wrapper centres (align-items:center) — two different alignments
   in the same row, which is what reads as "the search box sits lower" (Eli,
   1 Oct). Centre both the same way. */
.emex-sd-landing__section--search .directorist-search-form__top{ align-items:center; margin-top:0; }
/* Photo mockup (5 Oct): a magnifier inside the keyword field, and a chevron
   after "All filters". Both decorative; the field and button are Directorist's. */
.emex-landing__head .emex-sd-landing__section--search .directorist-search-field .directorist-search-field__input.directorist-form-element[name="q"]{
  /* !important: emex-directory.css sets this field's padding and background with !important */
  padding-left:48px !important;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='none' stroke='%231B1B1B' stroke-width='1.8' stroke-linecap='round' viewBox='0 0 24 24'%3E%3Ccircle cx='10.5' cy='10.5' r='7'/%3E%3Cpath d='m20 20-4.5-4.5'/%3E%3C/svg%3E") no-repeat 16px center / 22px !important;
}
/* Directorist fades the placeholder in only on focus (it pairs it with a
   floating label); the label is hidden here, so show the placeholder. */
.emex-landing__head .emex-sd-landing__section--search .directorist-search-field .directorist-search-field__input.directorist-form-element[name="q"]::placeholder{
  opacity:1; color:var(--emex-ink-50-aa);
}
.emex-sd-landing__section--search .directorist-filter-btn,
.emex-sd-landing__section--search .directorist-btn-search{ text-transform:none; }
.emex-sd-landing__section--search .directorist-filter-btn::after{
  content:""; display:inline-block; width:7px; height:7px; margin:-3px 0 0 10px;
  border:solid currentColor; border-width:0 2px 2px 0; transform:rotate(45deg);
}

/* --- Sections ------------------------------------------------------------ */
.emex-sd-landing .emex-sd-landing__section{ margin:32px 0 0; }
.emex-sd-landing .emex-sd-landing__heading{
  font-family:var(--emex-serif); font-weight:700; font-size:24px; line-height:1.2;
  letter-spacing:-0.01em; text-transform:none; color:var(--emex-ink);
  margin:0 0 10px; padding:0;
}

/* --- Browse by type: colour-block tiles, 4 / 3 / 2 columns ---------------- */
.emex-sd-landing .emex-sd-landing__grid{
  display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px;
}
@media (min-width:700px){
  .emex-sd-landing .emex-sd-landing__grid{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
}
@media (min-width:1100px){
  .emex-sd-landing .emex-sd-landing__grid{ grid-template-columns:repeat(4, minmax(0, 1fr)); }
}

.emex-sd-landing .emex-sd-landing__tile{
  position:relative; display:flex; flex-direction:column; justify-content:flex-end;
  min-height:180px; padding:14px; overflow:hidden;
  border:0; border-radius:var(--emex-radius-tile);
  color:#fff; text-decoration:none;
  transition:transform var(--emex-ease);
}
/* Dark vignette so white text stays legible over either a photo or a flat
   colour — the mockup's own technique, not an extra hover/box-shadow effect. */
.emex-sd-landing .emex-sd-landing__tile::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(rgba(0,0,0,0) 35%, rgba(10,16,30,0.75));
}
.emex-sd-landing .emex-sd-landing__tile:hover,
.emex-sd-landing .emex-sd-landing__tile:focus-visible{ transform:translateY(-2px); color:#fff; }
.emex-sd-landing .emex-sd-landing__tile:focus-visible{ outline:2px solid #fff; outline-offset:-4px; }

.emex-sd-landing .emex-sd-landing__tile-count{
  position:absolute; top:10px; right:10px; z-index:1;
  background:#fff; color:var(--emex-navy); border-radius:20px; padding:3px 9px;
  font-family:var(--emex-sans); font-weight:700; font-size:12px;
}
.emex-sd-landing .emex-sd-landing__tile-body{ position:relative; z-index:1; display:flex; flex-direction:column; gap:3px; }
.emex-sd-landing .emex-sd-landing__tile-name{
  font-family:var(--emex-serif); font-weight:700; font-size:22px; line-height:1.2; color:#fff;
}
.emex-sd-landing .emex-sd-landing__tile-desc{
  font-family:var(--emex-sans); font-weight:400; font-size:13.5px; line-height:1.35; color:rgba(255,255,255,0.85);
}
/* The count badge is aria-hidden (a bare number reads oddly to a screen reader
   out of context); this carries "4 experiences" for assistive tech instead. */
.emex-sd-landing .emex-sd-landing__tile-sr{
  position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap;
}

/* "Browse all experiences" — the 13th tile: dashed outline, no fill, and
   none of the photo tiles' dark vignette (it has no photo to sit over). */
.emex-sd-landing .emex-sd-landing__tile--all{
  background:transparent; border:2px dashed var(--emex-hairline);
  align-items:center; justify-content:center; text-align:center;
}
.emex-sd-landing .emex-sd-landing__tile--all::before{ display:none; }
.emex-sd-landing .emex-sd-landing__tile--all .emex-sd-landing__tile-name{ color:var(--emex-ink-70); font-size:16px; }
.emex-sd-landing .emex-sd-landing__tile--all:hover,
.emex-sd-landing .emex-sd-landing__tile--all:focus-visible{ border-color:var(--emex-purple); box-shadow:none; transform:none; }
.emex-sd-landing .emex-sd-landing__tile--all:hover .emex-sd-landing__tile-name{ color:var(--emex-purple); }

/* --- In person or virtual: 3 cards ---------------------------------------- */
/* White card, a 5px colour accent on top, a colour rectangle inside — the
   mockup's own .sd-box/.sd-img structure, not a solid-colour card. */
.emex-sd-landing .emex-sd-landing__deliveries{
  display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:14px;
}
@media (max-width:900px){
  .emex-sd-landing .emex-sd-landing__deliveries{ grid-template-columns:1fr; }
}
.emex-sd-landing .emex-sd-landing__delivery{
  display:flex; flex-direction:column; gap:6px; background:#fff;
  border-top:5px solid var(--emex-purple); border-radius:var(--emex-radius-tile);
  padding:18px; box-shadow:0 1px 3px rgba(0,0,0,0.06);
  text-decoration:none; color:var(--emex-ink-70); font-weight:400;
}
.emex-sd-landing .emex-sd-landing__delivery-img{
  display:block; height:150px; margin:0 0 4px; border-radius:8px; background-position:center; background-size:cover;
}
.emex-sd-landing .emex-sd-landing__delivery-badge{
  display:block; font-family:var(--emex-sans); font-weight:700; font-size:11px;
  letter-spacing:0.1em; text-transform:uppercase; color:var(--emex-ink-50);
}
.emex-sd-landing .emex-sd-landing__delivery-title{
  display:block; font-family:var(--emex-serif); font-weight:700; font-style:normal; font-size:22px; color:var(--emex-ink); margin:4px 0 6px;
}
.emex-sd-landing .emex-sd-landing__delivery-desc{
  display:block; font-family:var(--emex-sans); font-style:normal; font-size:14px; line-height:1.45;
}
.emex-sd-landing .emex-sd-landing__delivery:hover,
.emex-sd-landing .emex-sd-landing__delivery:focus-visible{ transform:translateY(-2px); }
.emex-sd-landing .emex-sd-landing__delivery:focus-visible{ outline:2px solid var(--emex-purple); outline-offset:2px; }

/* --- Browse by occasion: 5 cards ------------------------------------------ */
/* Same white-card-with-accent pattern as the delivery cards, smaller. */
.emex-sd-landing .emex-sd-landing__occasions{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:14px;
}
.emex-sd-landing .emex-sd-landing__occasion{
  display:flex; flex-direction:column; gap:6px; background:#fff;
  border-top:5px solid var(--emex-navy); border-radius:var(--emex-radius-tile);
  padding:16px; box-shadow:0 1px 3px rgba(0,0,0,0.06);
  text-decoration:none; color:var(--emex-ink-70); font-weight:400;
  transition:transform var(--emex-ease);
}
.emex-sd-landing .emex-sd-landing__occasion-img{
  display:block; height:120px; margin:0 0 2px; border-radius:8px; background-position:center; background-size:cover;
}
.emex-sd-landing .emex-sd-landing__occasion-name{ font-family:var(--emex-serif); font-weight:700; font-size:19px; color:var(--emex-ink); }
.emex-sd-landing .emex-sd-landing__occasion-desc{
  font-family:var(--emex-sans); font-style:normal; font-size:14px; line-height:1.4;
}
.emex-sd-landing .emex-sd-landing__occasion-browse{
  margin-top:auto; font-family:var(--emex-sans); font-weight:700; font-size:13px; color:var(--emex-orange-aa);
}
.emex-sd-landing .emex-sd-landing__occasion:hover,
.emex-sd-landing .emex-sd-landing__occasion:focus-visible{ transform:translateY(-2px); }
.emex-sd-landing .emex-sd-landing__occasion:focus-visible{ outline:2px solid var(--emex-navy); outline-offset:2px; }
@media (max-width:520px){
  .emex-sd-landing .emex-sd-landing__occasions{ grid-template-columns:1fr 1fr; gap:10px; }
  .emex-sd-landing .emex-sd-landing__occasion-desc{ display:none; }
}

/* --- About this directory + closing CTA ----------------------------------- */
.emex-sd-landing .emex-sd-landing__section--about{ border-top:1px solid var(--emex-hairline); padding-top:26px; }
.emex-sd-landing .emex-sd-landing__about-p{
  font-family:var(--emex-sans); font-size:16.5px; line-height:1.6; color:var(--emex-ink-70);
  max-width:65ch; margin:0 0 12px;
}
.emex-sd-landing__cta{
  display:flex; align-items:center; justify-content:space-between; gap:16px 24px; flex-wrap:wrap;
  margin:28px 0 8px; padding:24px;
  background:var(--emex-paper-warm); border:0; border-radius:var(--emex-radius-tile);
}
.emex-sd-landing__cta .emex-sd-landing__cta-title{
  font-family:var(--emex-serif); font-weight:700; font-size:22px; line-height:1.25; color:var(--emex-ink); margin:0 0 6px;
}
.emex-sd-landing__cta .emex-sd-landing__cta-sub{
  font-family:var(--emex-sans); font-size:16px; line-height:1.55; color:var(--emex-ink-70); margin:0; max-width:60ch;
}
.emex-sd-landing__cta .emex-sd-landing__cta-btn{
  display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:0 26px; flex:none;
  background:var(--emex-orange); color:#fff; border-radius:8px;
  font-family:var(--emex-sans); font-weight:700; font-size:17px; text-decoration:none;
  transition:background-color var(--emex-ease);
}
.emex-sd-landing__cta .emex-sd-landing__cta-btn:hover,
.emex-sd-landing__cta .emex-sd-landing__cta-btn:focus-visible{ background:var(--emex-orange-dark); color:#fff; }
.emex-sd-landing__cta .emex-sd-landing__cta-btn:focus-visible{ outline:2px solid var(--emex-orange); outline-offset:2px; }
@media (max-width:599px){
  .emex-sd-landing__cta{ flex-direction:column; align-items:stretch; padding:18px; }
}

/* --- Submit banner: the shorter strip after the /browseall results grid --- */
.emex-sd-landing__banner{
  display:flex; align-items:center; justify-content:space-between; gap:16px 24px; flex-wrap:wrap;
  margin:28px 0 8px; padding:20px 24px;
  background:var(--emex-paper-warm); border:0; border-radius:var(--emex-radius-tile);
}
.emex-sd-landing__banner .emex-sd-landing__banner-title{
  font-family:var(--emex-serif); font-weight:700; font-size:20px; line-height:1.25;
  color:var(--emex-ink); margin:0 0 2px;
}
.emex-sd-landing__banner .emex-sd-landing__banner-sub{
  font-family:var(--emex-sans); font-size:16.5px; line-height:1.5; color:var(--emex-ink-70); margin:0;
}
.emex-sd-landing__banner .emex-sd-landing__banner-btn{
  display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:0 22px;
  background:var(--emex-orange); color:#fff; border-radius:8px;
  /* White on --emex-orange is 4.30:1, under AA for normal text; 19px bold is
     WCAG "large text" (AA at 3:1), so the label is sized to meet it. */
  font-family:var(--emex-sans); font-weight:700; font-size:19px; text-decoration:none;
  transition:background-color var(--emex-ease);
}
.emex-sd-landing__banner .emex-sd-landing__banner-btn:hover,
.emex-sd-landing__banner .emex-sd-landing__banner-btn:focus-visible{ background:var(--emex-orange-dark); color:#fff; }
.emex-sd-landing__banner .emex-sd-landing__banner-btn:focus-visible{ outline:2px solid var(--emex-orange); outline-offset:2px; }
@media (max-width:599px){
  .emex-sd-landing__banner{ flex-direction:column; align-items:stretch; padding:18px; }
}

/* --- Reduced motion: no transitions at all -------------------------------- */
@media (prefers-reduced-motion: reduce){
  .emex-sd-landing .emex-sd-landing__tile,
  .emex-sd-landing .emex-sd-landing__delivery,
  .emex-sd-landing .emex-sd-landing__occasion,
  .emex-sd-landing__cta .emex-sd-landing__cta-btn,
  .emex-sd-landing__banner .emex-sd-landing__banner-btn{ transition:none; }
}

/* --- Filters v3 (filters-v3.php): sidebar groups, applied-filter chips ------------ */
.emex-v3-group{ border:0; margin:0 0 18px; padding:0; min-width:0; }
.emex-v3-group .emex-filter-panel__label{ padding:0; float:none; width:auto; }
.emex-v3-sub{ font-size:12px; font-weight:600; color:var(--emex-ink-50); margin:10px 0 8px; }
/* "Cities in <country>" reads as a group heading, like Format / Where / Type / Good for. */
.emex-v3-cities > .emex-v3-sub{
  font-family:var(--emex-sans); font-size:11px; font-weight:700; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--emex-ink-50-aa); margin:14px 0 12px;
}
.emex-v3-country{ width:100%; box-sizing:border-box; font-size:16px; padding:9px 10px; border:1.5px solid var(--emex-hairline); border-radius:6px; background:#fff; margin:0 0 6px; }

/* Option rows: the name takes the row, the count stays on one line at its natural width.
   Rows are 32px tall on desktop (tap target), 44px below 1024px. */
.emex-v3 .emex-filter-topic{ min-height:32px; margin:0; align-items:center; }
.emex-v3-name{ flex:1 1 auto; min-width:0; }
.emex-v3-count{ flex:none; white-space:nowrap; color:var(--emex-ink-50); font-size:12px; }
.emex-v3-more,.emex-filter-clear{ display:inline-flex; align-items:center; min-height:32px; }
.emex-v3-more{ background:transparent; border:0; padding:0; font-size:13px; font-weight:700; color:var(--emex-navy); cursor:pointer; text-decoration:underline; }
.emex-v3-more:focus-visible,.emex-v3-toggle:focus-visible{ background:var(--emex-orange-aa); color:#fff; }
@media (hover:hover){ .emex-v3-more:hover,.emex-v3-toggle:hover{ background:var(--emex-orange-aa); color:#fff; } }
.emex-v3-more:hover,.emex-v3-more:focus-visible{ padding:0 6px; border-radius:4px; }
.emex-v3-toggle{ display:none; min-height:32px; }
.emex-v3 [hidden]{ display:none !important; }
.emex-v3-applied{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0 0 16px; }
.emex-v3-applied__count{ font-size:13px; font-weight:700; color:var(--emex-ink); margin-right:4px; }
.emex-v3-chip{
  display:inline-flex; align-items:center; gap:8px; min-height:32px; padding:4px 12px; border-radius:20px;
  background:var(--emex-navy); color:#fff; font-size:12px; font-weight:600; line-height:1.3; text-decoration:none;
}
.emex-v3-chip:hover,.emex-v3-chip:focus-visible{ background:var(--emex-orange-aa); color:#fff; }
.emex-v3-clearall{ display:inline-flex; align-items:center; min-height:32px; font-size:13px; font-weight:700; color:var(--emex-ink-50-aa); text-decoration:underline; padding:6px 4px; }

/* Grey small text on the #ECE8E3 page: crumbs, the "Also covers…" rule label. */
.emex-landing__crumb,.emex-landing__crumb a,.emex-all-rule__label{ color:var(--emex-ink-50-aa); }
.emex-landing__crumb a:hover{ color:var(--emex-orange-aa); }
.emex-landing__crumb .emex-landing__crumb-current{ color:var(--emex-navy); }

/* Search buttons: orange fill, white text (hover is the darker brand orange, #9E4417: 6.38:1 with white). */
.emex-search-module .emex-btn,.emex-search-module .directorist-btn-submit,
.emex-sd-landing .emex-btn,.emex-sd-landing .directorist-btn-submit{
  background:var(--emex-orange-aa) !important; border-color:var(--emex-orange-aa) !important; color:#fff !important;
}
.emex-search-module .emex-btn:hover,.emex-search-module .directorist-btn-submit:hover,
.emex-sd-landing .emex-btn:hover,.emex-sd-landing .directorist-btn-submit:hover{
  background:var(--emex-orange-dark) !important; border-color:var(--emex-orange-dark) !important;
}

/* A wider sidebar where the two-column layout has room (emex-directory.css: 236px). */
@media (min-width:1025px){
  .emex-landing__body{ grid-template-columns:280px minmax(0,1fr); }
}
/* The city block sits on an ordinary page: no reliance on Directorist's own stylesheet for the grid wrapper,
   and no extra side gutter on top of the page's own. */
.emex-landing--city .directorist-archive-items{ display:block; }
.emex-landing--city .directorist-pagination .page-numbers{ padding:6px 10px; }
.emex-sd-results-empty{ font-family:var(--emex-sans); font-size:16px; color:var(--emex-ink-70); margin:12px 0 24px; }
@media (max-width:1024px){
  .emex-v3-toggle{
    display:flex; align-items:center; justify-content:space-between; width:100%; min-height:44px; padding:0 4px;
    background:none; border:0; font-size:15px; font-weight:700; color:var(--emex-ink); cursor:pointer;
  }
  .emex-v3-panel.is-collapsed .emex-v3-body{ display:none; }
  .emex-v3 .emex-filter-topic,.emex-v3-more,.emex-filter-clear,.emex-v3-clearall,.emex-v3-chip{ min-height:44px; }
  .emex-landing--city{ margin-left:0; margin-right:0; }
  .emex-landing--city .listing-with-sidebar__wrapper{ padding-left:0; padding-right:0; }
  .emex-landing__sidebar .emex-v3-panel{ flex:1 1 100%; }
}
